/* ==========================================================================
   ANIDAM — STRATEGY, AI & DIGITAL INNOVATION STUDIO
   Official Color Palette & Master Stylesheet
   Palette:
   - Primary Vermillion Red: #ff2900
   - Secondary Warm Red:    #f4300f
   - Warm Sand / Ivory:     #f4f1e4
   - Pitch Black:           #000000
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENS & COLOR SYSTEM
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --page-bg: #FFFFFF;
  --surface: #F5F6F6;
  --text-primary: #090D11;
  --text-secondary: #626A70;
  --border-color: rgba(9, 13, 17, 0.10);
  --brand-accent: #FF351A;
  color-scheme: light;

  /* App compatibility aliases */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F6F6;
  --bg-subtle: #F5F6F6;
  --bg-card: #FFFFFF;
  --fg-primary: #090D11;
  --fg-muted: #626A70;
  --fg-faint: #8490A0;
  --border-light: rgba(9, 13, 17, 0.10);
  --border-medium: rgba(9, 13, 17, 0.14);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.09);
  --overlay-bg: rgba(255, 255, 255, 0.98);
  --nav-bg: rgba(255, 255, 255, 0.95);
  --brand-red: #FF351A;
  --brand-red-deep: #E02B12;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --page-bg: #090B0C;
  --surface: #111516;
  --text-primary: #F7F7F2;
  --text-secondary: #A4A9AC;
  --border-color: rgba(255, 255, 255, 0.10);
  --brand-accent: #FF351A;
  color-scheme: dark;

  /* App compatibility aliases */
  --bg-primary: #090B0C;
  --bg-secondary: #111516;
  --bg-subtle: #111516;
  --bg-card: #111516;
  --fg-primary: #F7F7F2;
  --fg-muted: #A4A9AC;
  --fg-faint: #737B80;
  --border-light: rgba(255, 255, 255, 0.10);
  --border-medium: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.95);
  --overlay-bg: rgba(9, 11, 12, 0.96);
  --nav-bg: rgba(9, 11, 12, 0.90);
  --brand-red: #FF351A;
  --brand-red-deep: #E02B12;
}

/* --------------------------------------------------------------------------
   02. BASE RESET & HELPER CLASSES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  line-height: 1.5;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

img, video {
  max-width: 100%;
  display: block;
}

.font-syne { font-family: var(--font-display); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.mt-2 { margin-top: 8px; }
.text-white { color: #ffffff !important; }
.text-sand { color: #f4f1e4 !important; }
.text-white-muted { color: rgba(244, 241, 228, 0.75) !important; }

/* --------------------------------------------------------------------------
   03. FLOATING CONTROLS (Compact Circular Buttons)
   -------------------------------------------------------------------------- */
.custom-cursor {
  display: none !important;
}

.fixed-floating-controls {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.floating-control-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  background: rgba(235, 235, 235, 0.90);
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 240ms ease,
              border-color 240ms ease,
              color 240ms ease;
}

[data-theme="dark"] .floating-control-circle {
  background: rgba(25, 27, 28, 0.88);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.floating-control-circle:hover {
  transform: scale(1.06);
  border-color: rgba(255, 53, 26, 0.4);
}

.floating-control-circle:active {
  transform: scale(0.96);
}

.floating-control-circle:focus-visible {
  outline: 2px solid #FF351A;
  outline-offset: 2px;
}

.control-icon {
  width: 20px;
  height: 20px;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.floating-control-circle:hover .control-icon {
  transform: rotate(14deg);
}

/* Sound Icon Playing Indicator */
.audio-btn.playing .control-icon {
  color: #FF351A;
}

/* Single Active Icon Display for Theme Toggle */
.theme-icon-sun,
.theme-icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

[data-theme="light"] .theme-icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(90deg);
  pointer-events: none;
}

[data-theme="light"] .theme-icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

[data-theme="dark"] .theme-icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-90deg);
  pointer-events: none;
}

[data-theme="dark"] .theme-icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

@media (max-width: 767px) {
  .fixed-floating-controls {
    bottom: 15px;
    right: 15px;
    gap: 6px;
  }
  .floating-control-circle {
    width: 40px;
    height: 40px;
  }
  .control-icon {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   04. NAVBAR & DROPDOWN HEADER
   -------------------------------------------------------------------------- */
.main-navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 8000;
  padding: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. At Top State (Full Width Dark Header like Superside) */
.main-navbar-wrapper.at-top {
  padding: 0;
  background: rgba(7, 9, 10, 0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.main-navbar-wrapper.at-top .main-navbar {
  max-width: 1720px;
  margin: 0 auto;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 16px 24px;
}

.main-navbar-wrapper.at-top .nav-item,
.main-navbar-wrapper.at-top .dropdown-trigger {
  color: rgba(244, 241, 228, 0.85);
}

.main-navbar-wrapper.at-top .nav-item:hover,
.main-navbar-wrapper.at-top .nav-item.active,
.main-navbar-wrapper.at-top .dropdown-trigger:hover {
  color: #ffffff;
}

.main-navbar-wrapper.at-top .brand-header-logo-full {
  filter: none;
}

/* 2. Scrolled Down State (Floating Liquid Glass Pill Bar) */
.main-navbar-wrapper.scrolled {
  padding: 16px 24px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}

.main-navbar-wrapper.scrolled .main-navbar {
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: 999px;
  padding: 8px 14px 8px 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-radius 400ms ease, background 400ms ease, box-shadow 400ms ease, padding 400ms ease;
}

[data-theme="dark"] .main-navbar-wrapper.scrolled .main-navbar {
  background: rgba(12, 12, 12, 0.78);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Logo contrast handling for white vs dark text variants matching folder logo */
.brand-header-logo-white {
  display: block;
  height: 38px;
  max-width: 220px;
  object-fit: contain;
}

.brand-header-logo-dark {
  display: none;
  height: 38px;
  max-width: 220px;
  object-fit: contain;
}

/* When scrolled in light liquid glass mode */
.main-navbar-wrapper.scrolled .brand-header-logo-white {
  display: none;
}

.main-navbar-wrapper.scrolled .brand-header-logo-dark {
  display: block;
}

/* When scrolled in dark theme mode */
[data-theme="dark"] .main-navbar-wrapper.scrolled .brand-header-logo-white {
  display: block;
}

[data-theme="dark"] .main-navbar-wrapper.scrolled .brand-header-logo-dark {
  display: none;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-site-logo-png {
  height: 42px;
  max-width: 220px;
  object-fit: contain;
}

.brand-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}

.brand-logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--fg-primary);
}

.desktop-nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  transition: color var(--transition-fast);
  position: relative;
  padding: 6px 0;
}

.nav-item:hover, .nav-item.active {
  color: var(--fg-primary);
}

/* Dropdown Menu Styling */
.dropdown-parent {
  position: relative;
}

.dropdown-trigger {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast);
}

.dropdown-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.dropdown-parent:hover .dropdown-chevron,
.dropdown-parent.active .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--brand-red);
}

.dropdown-parent:hover .dropdown-trigger {
  color: var(--fg-primary);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
  z-index: 100;
}

.dropdown-parent:hover .dropdown-menu,
.dropdown-parent.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  transition: background-color var(--transition-fast);
}

.dropdown-link i {
  width: 16px;
  height: 16px;
  color: var(--brand-red);
}

.dropdown-link:hover {
  background: var(--bg-subtle);
}

/* --------------------------------------------------------------------------
   SUPERSIDE MEGA DROPDOWN MENU (Services Desktop Menu)
   -------------------------------------------------------------------------- */
.mega-dropdown-parent {
  position: relative;
}

.mega-dropdown-menu {
  position: fixed;
  top: 72px;
  left: 3vw;
  transform: translateY(16px);
  width: min(94vw, 1420px);
  background: rgba(250, 248, 242, 0.98);
  color: #121820;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  text-align: left;
}

.mega-dropdown-parent:hover .mega-dropdown-menu,
.mega-dropdown-parent.active .mega-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(8px);
}

.mega-dropdown-container {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px;
}

.mega-menu-intro {
  min-height: 100%;
  border-radius: 18px;
  padding: 24px;
  background: #0b1014;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mega-menu-intro > span {
  color: #ff5a47;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mega-menu-intro strong {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
}

.mega-menu-intro a {
  margin-top: auto;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mega-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mega-service-group {
  padding: 16px;
  border: 1px solid rgba(18, 24, 32, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.mega-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 14px;
}

.mega-category-pill svg {
  width: 14px;
  height: 14px;
}

.pill-green {
  background: #c8ea80;
  color: #182810;
}

.pill-dark {
  background: #244238;
  color: #ffffff;
}

.pill-blue {
  background: #1c5274;
  color: #ffffff;
}

.pill-sand {
  background: #ebdcc4;
  color: #2c2214;
}

.pill-coral {
  background: #ffd3cb;
  color: #6e1c12;
}

.mega-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-item {
  display: block;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 9px;
  transition: transform 0.2s ease;
}

.mega-item:hover {
  transform: translateX(3px);
  background: rgba(18, 24, 32, 0.05);
}

.mega-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  color: #121820;
}

.mega-item-sub {
  display: block;
  font-size: 13px;
  color: #646e7a;
  margin-top: 2px;
}

.badge-new {
  display: inline-block;
  background: #c8ea80;
  color: #182810;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 100px;
  text-transform: uppercase;
}

/* ─── Header CTA Button — White Liquid-Glass (matches hero Let's Contact) ─── */
.nav-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 4px 0 16px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 242, 245, 0.90) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #151821 !important;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 1), 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 220ms cubic-bezier(0.2, 1, 0.3, 1), box-shadow 220ms ease;
  will-change: transform;
  overflow: visible;
}

.nav-cta-btn::before {
  display: none;
}

.nav-cta-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #151821;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 220ms ease, background 220ms ease;
}

.nav-cta-arrow svg,
.nav-cta-arrow i {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
  stroke-width: 2.5;
  transition: transform 220ms ease;
}

.nav-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 1), 0 8px 22px rgba(0, 0, 0, 0.22);
}

.nav-cta-btn:hover .nav-cta-arrow {
  background: var(--brand-red, #FF351A);
  transform: translate(2px, -2px);
}

.nav-cta-btn:hover .nav-cta-arrow svg,
.nav-cta-btn:hover .nav-cta-arrow i {
  transform: translate(1px, -1px);
}

.nav-cta-btn:active {
  transform: scale(0.97);
}

/* Scrolled dark-mode nav button — keep white glass */
[data-theme="dark"] .main-navbar-wrapper.scrolled .nav-cta-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(230, 232, 236, 0.86) 100%);
  border-color: rgba(255, 255, 255, 0.60);
}

/* Crisp White Mobile Hamburger Button Icon */
.hamburger-btn {
  display: none;
  font-size: 24px;
  color: #ffffff !important;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.hamburger-btn svg,
.hamburger-btn i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none;
}

/* --------------------------------------------------------------------------
   05. HERO SECTION (Full-Screen Superside Layout)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   05. HERO SECTION (Full-Screen Animated Abstract Orange Torus Background)
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 700px;
  max-height: 1080px;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden !important;
  background: #05070a;
  color: #f4f1e4;
  border-radius: 0 0 13px 13px !important;
}

/* Hero Canvas Background Wrapper */
.hero-webgl-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden !important;
  pointer-events: none;
  z-index: 0;
  background: #05070a;
  border-radius: 0 0 14px 14px;
}

#hero-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Multi-Stage Dark Black Gradient Overlay for Maximum Text Readability */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(5, 7, 10, 0.82) 0%, rgba(5, 7, 10, 0.60) 35%, rgba(5, 7, 10, 0.30) 65%, rgba(5, 7, 10, 0.15) 100%),
    linear-gradient(to bottom, rgba(5, 7, 10, 0.70) 0%, rgba(5, 7, 10, 0.15) 30%, transparent 60%),
    linear-gradient(to top, rgba(5, 7, 10, 0.85) 0%, rgba(5, 7, 10, 0.20) 20%, transparent 50%);
}

/* Liquid-Glass Content Panel (Left Hero Content Wrapper) */
.hero-glass-panel {
  position: relative;
  background: rgba(8, 10, 12, 0.28);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 44px 36px 24px 36px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 1px 0 1px rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease;
  will-change: transform;
}

.hero-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  pointer-events: none;
}

.hero-glass-panel::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 53, 26, 0.16) 0%, transparent 70%);
  pointer-events: none;
  transition: transform 300ms ease, opacity 300ms ease;
}
/* ================================================================
   HERO LEFT COLUMN — CLEAN OPEN 3-LINE HEADING SYSTEM & INLINE THUMBNAILS
================================================================ */
.hero-text-col--clean {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-clean-container {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 auto;
}

/* 3 Separate Horizontal Flex Rows Stack */
.hero-heading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  width: 100%;
}

.hero-heading-line-wrapper {
  overflow: visible;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2px 0;
}

.hero-heading-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: clamp(38px, 3.15vw, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
  will-change: transform, opacity;
}

.text-white {
  color: #FFFFFF;
}

.text-soft-gray {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}

.text-orange {
  color: #FF351A;
  font-weight: 800;
}

/* Dedicated Inline Image Capsule (Pill) */
.hero-heading-line .hero-small-img-capsule,
.hero-small-img-capsule {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 48px !important;
  min-width: 68px !important;
  min-height: 48px !important;
  max-width: 68px !important;
  max-height: 48px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
  margin-inline: 2px !important;
  will-change: transform;
}

.hero-heading-line .hero-small-img-capsule img,
.hero-small-img-capsule img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Centered Paragraph Description */
.hero-clean-desc {
  max-width: 560px;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  margin: 0;
}

/* Centered CTA Row */
.hero-clean-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap;
}

.hero-rating-box--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Compact Content-Sized Liquid-Glass Scroll to Explore Control */
.hero-bottom-glass-strip {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content !important;
  max-width: max-content !important;
  height: 40px;
  padding: 0 22px;
  background: rgba(8, 10, 12, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: opacity 280ms ease, transform 280ms ease, border-color 200ms ease, background 200ms ease;
}

.hero-bottom-glass-strip:hover {
  background: rgba(12, 16, 20, 0.65);
  border-color: rgba(255, 53, 26, 0.40);
}

.scroll-explore-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  user-select: none;
}

.scroll-chevron-icon {
  width: 14px;
  height: 14px;
  color: #FF351A;
  animation: bounceChevron 2.2s infinite ease-in-out;
}

@keyframes bounceChevron {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3.5px); }
}

@media (max-width: 1024px) {
  .hero-glass-panel {
    padding: 32px 36px;
    border-radius: 24px;
  }
}

/* ===== MOBILE HERO LAYOUT — max 767px ===== */
@media (max-width: 767px) {
  .hero-left-content,
  .hero-text-col--clean {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 54px !important;
    padding-bottom: 26px !important;
  }

  /* MOBILE CORRECTION 1: Tight Headline Line Spacing */
  .hero-title,
  .hero-heading,
  .hero-heading-stack {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 0.98 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    gap: 2px !important;
    row-gap: 2px !important;
  }

  .hero-heading-line-wrapper {
    overflow: visible !important;
    padding: 0 !important;
    margin-block: 0 !important;
  }

  .hero-heading-line {
    min-height: 0 !important;
    margin-block: 0 !important;
    padding: 0 !important;
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 0.98 !important;
    gap: 4px !important;
    row-gap: 2px !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-heading-line span {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 0.98 !important;
    margin: 0 !important;
  }

  .hero-heading-image,
  .hero-heading-line .hero-small-img-capsule,
  .hero-small-img-capsule {
    display: inline-flex !important;
    width: 44px !important;
    height: 28px !important;
    min-width: 44px !important;
    min-height: 28px !important;
    max-width: 44px !important;
    max-height: 28px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin-inline: 2px !important;
  }

  .hero-heading-line .hero-small-img-capsule img,
  .hero-small-img-capsule img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 999px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .hero-description,
  .hero-clean-desc {
    max-width: 340px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .hero-actions,
  .hero-clean-cta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
  }

  /* MOBILE CORRECTION 2: Space Below Rating */
  .hero-rating,
  .hero-rating-box {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  /* MOBILE PORTFOLIO SLIDER: 1:1 Aspect Ratio Cards Across 3 Columns */
  .hero-image-col,
  .mobile-portfolio-wrapper,
  .mobile-portfolio-grid {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-grid-slider-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .hero-work-card,
  .mobile-portfolio-card {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .hero-work-card img,
  .mobile-portfolio-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* MOBILE SCROLL CONTROL: Centered Directly Below Mobile Image Slider */
  .desktop-scroll-control,
  .mobile-scroll-control {
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: auto !important;
    margin-top: 16px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 5 !important;
  }

  .hero-bottom-glass-strip {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .scroll-explore-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 18px !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  .mobile-scroll-control::before,
  .mobile-scroll-control::after {
    display: none !important;
    content: none !important;
  }

  .mobile-scroll-control .hero-bottom-glass-strip {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 20px !important;
    background: rgba(8, 10, 12, 0.45) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 100px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  }

  .mobile-scroll-control .scroll-explore-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }
}

/* Below 340px: stack CTA actions if needed */
@media (max-width: 340px) {
  .hero-cta-row,
  .hero-dual-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* At 320px: reduce side margins to 8px */
@media (max-width: 320px) {
  .hero-glass-panel {
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  .annot-brand-strategy,
  .annot-ai-automation,
  .annot-web-digital {
    font-size: 8px !important;
    padding: 3px 5px !important;
  }
}

@media (max-width: 340px) {
  .hero-rating-box {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-image-layer {
    animation: none !important;
    transform: scale(1.05) !important;
  }
  .hero-click-pulse {
    display: none !important;
  }
}

/* ==========================================================================
   MORE RECENT WORK — Stacked Editorial Case Studies
   ========================================================================== */
.mrw-section {
  padding: clamp(84px, 10vw, 150px) 0;
  background: #ffffff;
  color: #080c10;
  overflow: clip;
}

.mrw-container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.mrw-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 32px 70px;
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 88px);
}

.mrw-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand-red, #ff351a);
  font: 700 11px/1 var(--font-main);
  letter-spacing: 2.5px;
}

.mrw-heading {
  margin: 0;
  font: 700 clamp(2.5rem, 5.8vw, 5rem)/.98 var(--font-display);
  letter-spacing: -.055em;
}

.mrw-heading em {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.mrw-intro {
  margin: 0 0 6px;
  color: rgba(8,12,16,.62);
  font: 400 15px/1.75 var(--font-main);
}

.mrw-list {
  display: block;
  position: relative;
}

.mrw-card {
  --mrw-text: #080c10;
  --mrw-muted: rgba(8,12,16,.64);
  --mrw-meta: rgba(8,12,16,.55);
  --mrw-panel: rgba(8,12,16,.055);
  --mrw-accent: #ff391e;
  display: grid;
  grid-template-columns: .94fr 1.16fr;
  min-height: 510px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.22,1,.36,1);
  position: sticky;
  top: calc(var(--header-height, 72px) + 28px);
  margin-bottom: 26px;
  transform-origin: center top;
  will-change: transform, filter;
  color: var(--mrw-text);
}

.mrw-card:nth-child(1) { z-index: 1; }
.mrw-card:nth-child(2) { z-index: 2; top: calc(var(--header-height, 72px) + 44px); }
.mrw-card:nth-child(3) { z-index: 3; top: calc(var(--header-height, 72px) + 60px); }

.mrw-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mrw-section.is-enhanced .mrw-card:not(.is-visible) {
  opacity: 0;
  transform: translateY(54px) scale(.975);
}

.mrw-card:hover {
  box-shadow: none;
}

.mrw-card--lavender {
  background: linear-gradient(135deg, #fffaf8 0%, #f1efec 100%);
  border-color: rgba(255,57,30,.16);
}
.mrw-card--coral {
  --mrw-text: #ffffff;
  --mrw-muted: rgba(255,255,255,.68);
  --mrw-meta: rgba(255,255,255,.56);
  --mrw-panel: rgba(255,255,255,.09);
  background: linear-gradient(135deg, #070b0e 0%, #171316 100%);
  border-color: rgba(255,255,255,.12);
}
.mrw-card--mint {
  --mrw-text: #ffffff;
  --mrw-muted: rgba(255,255,255,.78);
  --mrw-meta: rgba(255,255,255,.66);
  --mrw-panel: rgba(255,255,255,.16);
  --mrw-accent: #ffffff;
  background: linear-gradient(135deg, #ff4a31 0%, #df250f 100%);
  border-color: rgba(255,57,30,.2);
}

.mrw-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 4vw, 50px);
}

.mrw-type {
  margin: 0 0 17px;
  color: var(--mrw-accent);
  font: italic 600 17px/1.2 Georgia, 'Times New Roman', serif;
}

.mrw-copy h3 {
  margin: 0 0 17px;
  font: 700 clamp(1.75rem, 3.1vw, 3rem)/1.04 var(--font-display);
  letter-spacing: -.04em;
}

.mrw-description {
  max-width: 490px;
  margin: 0;
  color: var(--mrw-muted);
  font: 400 14px/1.7 var(--font-main);
}

.mrw-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: auto 0 24px;
}

.mrw-results div { display: grid; gap: 7px; }
.mrw-results dt { color: var(--mrw-meta); font: 500 12px/1 var(--font-main); }
.mrw-results dd { margin: 0; font: 700 24px/1 var(--font-display); }

.mrw-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 19px;
  border-radius: 12px;
  background: var(--mrw-panel);
  color: inherit;
  text-decoration: none;
  font: 700 13px/1 var(--font-main);
  transition: background 220ms ease, transform 220ms ease;
}

.mrw-link:hover,
.mrw-link:focus-visible {
  background: rgba(255,57,30,.18);
  transform: translateY(-2px);
  outline: 2px solid #ff391e;
  outline-offset: 2px;
}

.mrw-card--coral .mrw-link:hover,
.mrw-card--coral .mrw-link:focus-visible,
.mrw-card--mint .mrw-link:hover,
.mrw-card--mint .mrw-link:focus-visible {
  background: rgba(255,255,255,.2);
  outline-color: rgba(255,255,255,.9);
}

.mrw-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: 17px;
  background: rgba(255,255,255,.06);
}

.mrw-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.28);
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
}

.mrw-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter 500ms ease;
}

.mrw-card:hover .mrw-visual img { transform: scale(1.1); }

.mrw-footer {
  display: flex;
  justify-content: center;
  padding-top: 46px;
}

.mrw-all-projects {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 16px 22px;
  border-radius: 999px;
  background: #ff391e;
  color: #fff;
  text-decoration: none;
  font: 700 13px/1 var(--font-main);
  transition: transform 220ms ease, background 220ms ease;
}

.mrw-all-projects:hover,
.mrw-all-projects:focus-visible {
  transform: translateY(-3px);
  background: #ffffff;
  color: #080c10;
  outline: none;
}

@media (max-width: 767px) {
  .mrw-section { padding: 72px 0; }
  .mrw-container { width: calc(100% - 32px); }
  .mrw-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }
  .mrw-heading { font-size: clamp(2.45rem, 13vw, 3.65rem); }
  .mrw-intro { font-size: 14px; }
  .mrw-list { display: grid; gap: 18px; }
  .mrw-card {
    position: relative;
    top: auto !important;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 10px;
    margin-bottom: 0;
    border-radius: 18px;
    filter: none !important;
    transition: opacity 650ms ease, transform 800ms cubic-bezier(.22,1,.36,1);
  }
  .mrw-section.is-enhanced .mrw-card:not(.is-visible) {
    opacity: 0;
    transform: translateY(42px) scale(.975) !important;
  }
  .mrw-section.is-enhanced .mrw-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) !important;
  }
  .mrw-copy { min-height: 400px; padding: 26px 20px 22px; }
  .mrw-copy h3 { font-size: 2rem; }
  .mrw-results { margin-top: 42px; }
  .mrw-visual { min-height: 330px; order: -1; }
  .mrw-card:hover .mrw-visual img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .mrw-card { opacity: 1 !important; transform: none !important; transition: none; }
  .mrw-visual img { transition: none; }
}

@media (max-width: 767px) {
  .hero-bg-image-layer {
    animation-duration: 26s;
  }
}

.hero-content-container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 100px 24px 40px 24px;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  width: 100%;
  position: relative;
}

.hero-text-col {
  position: relative;
  z-index: 10;
  max-width: 710px;
}

/* Small Category Tagline Label */
.hero-category-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand-red, #FF351A);
  margin-bottom: 16px;
}

.hero-category-label .label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-red, #FF351A);
  box-shadow: 0 0 8px rgba(255, 53, 26, 0.6);
}

/* ================================================================
   HERO HEADING + ANNOTATION GRID
   Three-column layout: [left annotations | heading | right annotations]
   h1 uses display:contents so its span children become grid items.
   Labels sit in dedicated side columns — never over the heading.
================================================================ */

/* The grid container */
.hero-heading-composition {
  display: grid;
  grid-template-columns: 100px minmax(0, 390px) 100px;
  grid-template-rows: repeat(3, auto);
  column-gap: 12px;
  row-gap: 4px;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 0;
  align-items: center;
}

/* h1 is transparent to the grid — its 3 spans become grid items */
.hero-title {
  display: contents;
}

/* All heading lines share typography defaults */
.hero-title .title-line {
  display: block;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: #FFFFFF;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
  justify-self: start;
}

/* Center-column row placements */
.title-line-1 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(2.7rem, 3.2vw, 3.6rem);
}

.title-line-2 {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(2.05rem, 2.55vw, 2.8rem);
}

.title-line-3 {
  grid-column: 2;
  grid-row: 3;
  font-size: clamp(2.7rem, 3.2vw, 3.6rem);
}

/* Orange italic override on BRAND & DIGITAL */
.hero-title .serif-italic-highlight {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 800 !important;
  color: var(--brand-red, #FF351A) !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Copy and Actions Wrapper (Paragraph + CTA) */
.hero-copy-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
}

/* Supporting Paragraph */
.hero-description,
.hero-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  max-width: 520px;
  margin: 0;
}

/* ================================================================
   ANNOTATION PILL BASE STYLE
   Desktop: grid-placed (position:static). Mobile: position:absolute.
================================================================ */
.hero-annot-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(8, 10, 12, 0.52);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  pointer-events: auto;
  width: max-content;
  max-width: 100px;
  position: static;
  transform: none;
  margin: 0;
  z-index: 4;
}

.hero-annot-pill svg,
.hero-annot-pill i {
  width: 9px;
  height: 9px;
  color: var(--brand-red, #FF351A);
  flex-shrink: 0;
}

@media (hover: hover) {
  .hero-annot-pill:hover {
    border-color: rgba(255, 53, 26, 0.65);
    box-shadow: inset 0 1px 1px rgba(255, 100, 60, 0.18);
  }
}

/* ── Desktop grid placement for labels ── */

/* ROW 1 — "Impactful" */
.annot-brand-strategy {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  position: static;
  transform: none;
  margin: 0;
}

.annot-ai-automation {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  position: static;
  transform: none;
  margin: 0;
}

/* ROW 2 — "BRAND & DIGITAL" */
.annot-growth {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  position: static;
  transform: none;
  margin: 0;
  max-width: 100px;
}

.annot-web-digital {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  position: static;
  transform: none;
  margin: 0;
  z-index: 2;
  max-width: 100px;
}

/* ROW 3 — "Experiences." */
.annot-creative {
  grid-column: 3;
  grid-row: 3;
  justify-self: start;
  align-self: center;
  position: static;
  transform: none;
  margin: 0;
  max-width: 100px;
}

/* Narrow panel / Tablet: Hide Web & Digital first if space is tight */
@media (min-width: 768px) and (max-width: 1100px) {
  .annot-web-digital {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-annot-desktop-only {
    display: none !important;
  }
  .hero-heading-composition {
    grid-template-columns: 100px minmax(0, 390px) 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-annot-pill {
    animation: none !important;
    transition: none !important;
  }
}

/* Two Compact Actions in One Row */
.hero-cta-row,
.hero-dual-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  position: static;
  transform: none;
  z-index: 2;
  width: fit-content;
  line-height: 1;
}

/* Primary Action: White Liquid-Glass Capsule */
.hero-primary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 6px 0 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 242, 245, 0.90) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.80);
  color: #151821 !important;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 1), 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.2, 1, 0.3, 1), box-shadow 220ms ease;
  cursor: pointer;
}

.hero-primary-btn .arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #151821;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease, background 220ms ease;
}

.hero-primary-btn .arrow-circle svg,
.hero-primary-btn .arrow-circle i {
  width: 16px;
  height: 16px;
  color: #FFFFFF;
  stroke-width: 2.5;
  transition: transform 220ms ease;
}

.hero-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 1), 0 12px 28px rgba(0, 0, 0, 0.35);
}

.hero-primary-btn:hover .arrow-circle {
  background: var(--brand-red, #FF351A);
  transform: translate(2px, -2px);
}

.hero-primary-btn:active {
  transform: scale(0.97);
}

/* Secondary Action: Text + Arrow with Underline Hover */
.hero-secondary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF !important;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  transition: color 220ms ease;
  cursor: pointer;
}

.hero-secondary-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--brand-red, #FF351A);
  transition: width 240ms ease;
}

.hero-secondary-btn .secondary-arrow {
  width: 15px;
  height: 15px;
  color: var(--brand-red, #FF351A);
  transition: transform 220ms ease;
}

.hero-secondary-btn:hover {
  color: var(--brand-red, #FF351A) !important;
}

.hero-secondary-btn:hover::after {
  width: 100%;
}

.hero-secondary-btn:hover .secondary-arrow {
  transform: translate(3px, -3px);
}

.hero-rating-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(244, 241, 228, 0.95);
}

.star-group {
  display: flex;
  gap: 3px;
}

.star-filled {
  width: 16px;
  height: 16px;
  fill: #ff2900;
  color: #ff2900;
}

/* Full Vertical Scale Superside 3-Stream Work Grid (Shifted Left with Soft Top & Bottom Blur Mask) */
.hero-image-col {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(60px, calc((100vw - 1720px) / 2 + 60px));
  width: 46%;
  max-width: 740px;
  height: 100%;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 1;
}

.hero-grid-slider-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  height: 100%;
  padding: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
}

.hero-slider-col {
  overflow: hidden;
  height: 100%;
}

.col-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: max-content;
}

.track-up {
  animation: moveColUp 72s linear infinite;
}

.track-down {
  animation: moveColDown 84s linear infinite;
}

.hero-slider-col:hover .col-track {
  animation-play-state: paused;
}

@keyframes moveColUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes moveColDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.hero-work-card {
  width: 100%;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all var(--transition-smooth);
}

.hero-work-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.hero-work-card:hover {
  transform: scale(1.04);
  border-color: var(--brand-red);
  box-shadow: 0 16px 40px rgba(255, 41, 0, 0.4);
}

.hero-work-card:hover img {
  transform: scale(1.08);
}

/* Floating Overlapping Hero Cards Row (5 Cards) */
.hero-floating-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
  transform: translateY(40px);
}

.hero-card {
  background: rgba(244, 241, 228, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 20px;
  color: #000000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(255, 41, 0, 0.25);
}

/* Card 1: Tags */
.card-tags {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.tag-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: #000000;
  font-weight: 500;
}

.tag-chip.tag-accent {
  background: var(--brand-red);
  color: #ffffff;
  font-weight: 700;
}

.card-bottom-label {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}

.card-bottom-label span {
  font-size: 12px;
  color: var(--fg-muted);
}

.large-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #000000;
}

/* Card 2: Metrics & Avatar */
.card-metrics {
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.metric-portrait {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.metric-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metric-badge-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(244, 241, 228, 0.95);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.m-row {
  display: flex;
  flex-direction: column;
}

.m-label {
  font-size: 10px;
  color: #4a463a;
}

.green-pct {
  color: var(--brand-red);
  font-weight: 700;
}

.m-val {
  font-size: 13px;
  font-weight: 700;
  color: #000000;
}

/* Card 3: Dark Card */
.card-dark {
  background: #000000 !important;
  color: #f4f1e4 !important;
  border-color: rgba(255, 41, 0, 0.3) !important;
  display: flex;
  align-items: center;
}

.card-dark-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.red-dot-pulse {
  display: inline-block;
  color: #ff2900;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Card 4: Finance Widget */
.card-finance {
  display: flex;
  flex-direction: column;
}

.finance-header {
  margin-bottom: 8px;
}

.f-sub {
  font-size: 11px;
  color: #4a463a;
}

.f-total {
  font-size: 18px;
  font-weight: 800;
  color: #000000;
}

.f-max {
  font-size: 12px;
  color: #858072;
  font-weight: 400;
}

.progress-bar-container {
  height: 6px;
  background: #e4dfce;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: var(--brand-red);
  border-radius: 100px;
}

.transaction-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.tx-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tx-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-red);
}

.tx-info {
  display: flex;
  flex-direction: column;
}

.tx-info span {
  font-size: 9px;
  color: #858072;
}

.tx-amount {
  font-weight: 700;
  color: #000000;
}

/* Card 5: App Notifications */
.card-apps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  background: linear-gradient(135deg, rgba(244, 241, 228, 0.95), rgba(255, 41, 0, 0.2)) !important;
}

.app-pill-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.app-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #000000;
}

.app-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-red);
}

.live-badge {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--brand-red);
  color: #ffffff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   05-B. INTRODUCTORY STATISTICS SECTION (Pure White Minimal Editorial Layout)
   -------------------------------------------------------------------------- */
.intro-stats-section {
  background: #ffffff !important;
  color: #0b0f17;
  padding: 130px 24px 110px 24px;
  position: relative;
  z-index: 5;
  border-top: none;
  margin-top: 0;
}

.intro-stats-container {
  max-width: 1380px;
  margin: 0 auto;
  width: 100%;
}

.intro-copy-block {
  max-width: 920px;
}

.section-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-red);
}

.badge-text {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #646e7a;
  text-transform: uppercase;
}

.editorial-intro-text {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #0b0f17;
}

.line-mask {
  overflow: hidden;
  display: block;
  padding-bottom: 2px;
}

.line-inner {
  display: block;
  will-change: transform, opacity;
}

.highlight-orange-wipe {
  position: relative;
  display: inline-block;
  color: var(--brand-red);
  font-weight: 800;
}

.highlight-orange-wipe .wipe-inner {
  display: inline-block;
  will-change: transform, clip-path, opacity;
}

/* Suppress any unwanted cyan or blue dots */
.stat-editorial-card .dot-accent,
.blue-dot, .cyan-dot {
  display: none !important;
}

/* Asymmetric Editorial Statistics Grid */
.stats-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 90px;
}

.stat-editorial-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Asymmetric Vertical Positioning on Desktop */
@media (min-width: 1025px) {
  .stat-offset-1 {
    transform: translateY(0);
  }

  .stat-offset-2 {
    transform: translateY(48px);
  }

  .stat-offset-3 {
    transform: translateY(18px);
  }
}

.stat-number-wrap {
  margin-bottom: 12px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.5vw, 92px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: #0b0f17;
  text-shadow: none !important;
  filter: none !important;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: #0b0f17;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.stat-subtext {
  font-size: 14px;
  line-height: 1.6;
  color: #586270;
  max-width: 320px;
}

/* Mobile Responsive Stacking */
@media (max-width: 1024px) {
  .intro-stats-section {
    padding: 80px 20px 60px 20px !important;
  }

  .stats-editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    margin-top: 50px !important;
  }

  .stat-editorial-card {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   CINEMATIC PLAY REEL SECTION (GSAP Scroll-Expanded Showreel)
   -------------------------------------------------------------------------- */
.play-reel-section {
  background: #ffffff !important;
  color: #0b0f17;
  padding: 100px 0;
  position: relative;
  z-index: 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.play-reel-container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.reel-description {
  font-family: var(--font-main);
  font-size: clamp(13px, 1.4vw, 16px);
  color: #586270;
  text-align: center;
  max-width: 580px;
  margin-bottom: 36px;
  transition: color 0.4s ease;
  z-index: 10;
  position: relative;
}

/* Same Horizontal Stage for PLAY | VIDEO | REEL */
.reel-stage-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  z-index: 10;
}

.reel-word {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 130px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -3px;
  color: #0b0f17;
  transition: color 0.4s ease;
  will-change: transform, color;
  pointer-events: none;
  user-select: none;
  z-index: 12;
}

/* Centered Video Wrapper Card */
.reel-video-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(340px, 32vw, 440px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #05070a;
  box-shadow: none !important;
  z-index: 5;
  will-change: width, height, border-radius, transform;
}

.reel-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Play / Pause Toggle Button */
.reel-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  color: #0b0f17;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}

.reel-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffffff;
}

.reel-play-btn:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 4px;
}

.btn-icon-play,
.btn-icon-pause {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
}

.hidden {
  display: none !important;
}

/* Error Fallback */
.reel-error-msg {
  position: absolute;
  inset: 0;
  background: #05070a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 15;
  font-size: 15px;
  font-weight: 600;
}

.reel-error-msg i {
  width: 32px;
  height: 32px;
  color: var(--brand-red);
}

/* Reduced Motion Mode */
@media (prefers-reduced-motion: reduce) {
  .play-reel-section {
    min-height: auto;
    padding: 80px 24px;
  }

  .reel-video-wrapper {
    width: 100% !important;
    max-width: 1100px;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   06. ABOUT US SECTION (4-Card Bento Grid)
   -------------------------------------------------------------------------- */
.about-section {
  padding: 140px 24px 100px;
  max-width: 1720px;
  margin: 0 auto;
  background: #ffffff !important;
}

.section-tag-row {
  margin-bottom: 16px;
}

.section-bullet {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
}

.about-main-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--fg-primary);
  max-width: 960px;
  margin-bottom: 56px;
}

.inline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 4px;
}

.badge-black {
  background: #000000;
  color: #f4f1e4;
}

.badge-red {
  background: var(--brand-red);
  color: #ffffff;
}

.inline-badge i {
  width: 22px;
  height: 22px;
}

/* Bento Grid */
.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.bento-card {
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.bento-card:hover {
  transform: translateY(-6px);
}

.bento-light {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.bento-red {
  background: var(--brand-red);
  color: #ffffff;
  box-shadow: 0 16px 40px var(--red-glow);
}

.bento-dark-nature {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?auto=format&fit=crop&w=800&q=80') center/cover;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 41, 0, 0.2);
}

.bento-top-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-sm {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: var(--fg-muted);
}

.bento-stat-bottom {
  margin-top: 24px;
}

.bento-label {
  font-size: 13px;
  color: var(--fg-muted);
}

.bento-number {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  color: var(--fg-primary);
  line-height: 1.1;
}

.bento-huge-number {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  margin: 12px 0;
}

.bento-subtitle {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

.bento-desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   07. DUAL-ROW CLIENT LOGOS SLIDER (Matching Reference Screenshot)
   - Headline: "Creative support for 50+ top global brands"
   - Row 1: Slides RIGHT
   - Row 2: Slides LEFT
   - Edge Fade Mask
   -------------------------------------------------------------------------- */
.client-slider-section {
  padding: 64px 0 68px 0 !important;
  background: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important;
  overflow: hidden;
  position: relative;
  z-index: 4;
}

.client-slider-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 24px;
}

.client-slider-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: #070B0D;
  letter-spacing: -0.01em;
  margin: 0;
}

.dual-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.slider-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.slider-track {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: max-content;
  will-change: transform;
}

.track-right {
  animation: slideRight 80s linear infinite;
}

.track-left {
  animation: slideLeft 80s linear infinite;
}

@media (hover: hover) {
  .client-slider-section:hover .slider-track {
    animation-play-state: paused !important;
  }
}

@keyframes slideRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@keyframes slideLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Reference Card Pill Container */
.ref-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  min-width: 188px;
  padding: 0 24px;
  border-radius: 14px !important;
  background: #F2F2F2 !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.ref-client-card:hover {
  background: #E6E6E6 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

.ref-client-logo {
  height: auto;
  max-height: 36px;
  width: auto;
  max-width: 136px;
  object-fit: contain;
  filter: brightness(0) opacity(0.85);
  transition: filter 300ms ease, transform 300ms ease;
}

.ref-client-card:hover .ref-client-logo {
  filter: brightness(0) opacity(1);
  transform: scale(1.04);
}

/* Mobile Responsive Layout (< 768px) */
@media (max-width: 767px) {
  .client-slider-section {
    padding: 44px 0 48px 0 !important;
  }

  .client-slider-header {
    margin-bottom: 24px;
  }

  /* Keep both counter-moving marquee rows on mobile. */
  .dual-slider-wrapper .slider-row:nth-child(2) {
    display: flex !important;
  }

  .ref-client-card {
    height: 62px !important;
    min-width: 150px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
  }

  .ref-client-logo {
    height: auto !important;
    max-height: 29px !important;
    max-width: 112px !important;
  }
}

/* Prefers Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .slider-track {
    animation: none !important;
  }
  .dual-slider-wrapper {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   CINEMATIC PLAY REEL SECTION (Clean 3-Column CSS Grid Architecture)
   -------------------------------------------------------------------------- */
.reel-scroll {
  position: relative;
  width: 100%;
  height: 260vh;
  background: #ffffff !important;
  color: #0b0f17;
  z-index: 5;
  box-sizing: border-box;
}

.reel-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 20;
}

/* --------------------------------------------------------------------------
   CINEMATIC PLAY REEL SECTION (Content-Sized Flex Row Architecture)
   -------------------------------------------------------------------------- */
.reel-scroll {
  position: relative;
  width: 100%;
  height: 260vh;
  background: #ffffff !important;
  color: #0b0f17;
  z-index: 5;
  box-sizing: border-box;
}

.reel-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 20;
}

.reel-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
}

.reel-description {
  position: relative;
  margin: 0;
  max-width: 580px;
  text-align: center;
  font-family: var(--font-main);
  font-size: clamp(13px, 1.4vw, 16px);
  color: #586270;
  transition: color 0.4s ease, opacity 0.4s ease;
  z-index: 25;
  pointer-events: none;
}

.reel-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.reel-play {
  justify-self: end;
}

.reel-video-frame {
  grid-column: 2;
  justify-self: center;
}

.reel-word {
  justify-self: start;
}

.reel-video-frame {
  width: clamp(260px, 25vw, 440px);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #05070a;
  box-shadow: none !important;
  transform-origin: center center;
  flex-shrink: 0;
  z-index: 1;
  will-change: width, height, border-radius;
}

.reel-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.reel-play,
.reel-word {
  position: relative;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 110px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
  color: #0b0f17;
  z-index: 25;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

/* Ensure next section (Pre-Footer CTA) sits above Play Reel unpinned stage */
.pre-footer-cta-strip {
  position: relative;
  z-index: 30;
}

/* Sticky Navbar Layering */
.main-navbar-wrapper {
  z-index: 1000 !important;
}

@media (max-width: 767px) {
  .reel-scroll {
    height: calc(min(100dvh, 506px) + min(40vh, 320px)) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .reel-stage {
    position: sticky !important;
    top: 0 !important;
    height: min(100dvh, 506px) !important;
    min-height: 0 !important;
    align-items: flex-start;
  }
  .reel-center {
    gap: 10px;
    padding: 100px 12px 0;
    transform: none;
  }
  .reel-composition {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px;
  }
  .reel-description {
    font-size: clamp(12px, 3.2vw, 14px);
  }
  .reel-play,
  .reel-word {
    grid-row: 1;
    font-size: clamp(15px, 4.3vw, 18px);
    line-height: 1;
  }
  .reel-play {
    grid-column: 1;
    justify-self: end;
  }
  .reel-word {
    grid-column: 3;
    justify-self: start;
  }
  .reel-video-frame {
    grid-column: 2;
    grid-row: 1;
    width: clamp(172px, 56vw, 220px);
    max-width: none;
    justify-self: center;
  }
}

@media (min-width: 520px) and (max-width: 767px) {
  .reel-video-frame {
    width: min(540px, calc(100% - 108px));
  }
}

/* --------------------------------------------------------------------------
   EDITORIAL VISION SECTION (The Future of Creative Work)
   -------------------------------------------------------------------------- */
.editorial-vision-section {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  color: var(--text-primary, #090D11);
  padding: 130px 24px;
  z-index: 30;
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 300ms ease, color 300ms ease;
}

[data-theme="dark"] .editorial-vision-section {
  background: var(--page-bg, #090B0C);
  color: var(--text-primary, #F7F7F2);
}

.editorial-container {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(60px, 6.5vw, 100px);
  position: relative;
  z-index: 2;
}

.editorial-content-col {
  flex: 1 1 54%;
  max-width: 56%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.editorial-image-col {
  flex: 1 1 42%;
  max-width: 44%;
  width: 100%;
}

.editorial-label-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.editorial-label {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-secondary, #626A70);
  white-space: nowrap;
}

[data-theme="dark"] .editorial-label {
  color: #A4A9AC;
}

.editorial-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--border-color, rgba(9, 13, 17, 0.12));
}

[data-theme="dark"] .editorial-line {
  background: rgba(255, 255, 255, 0.12);
}

.editorial-heading {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 66px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: var(--text-primary, #090D11);
  margin: 0 0 28px 0;
}

[data-theme="dark"] .editorial-heading {
  color: #F7F7F2;
}

.serif-italic {
  font-family: 'Playfair Display', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.editorial-subheading {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary, #090D11);
  margin: 0 0 16px 0;
  max-width: 540px;
}

[data-theme="dark"] .editorial-subheading {
  color: #F7F7F2;
}

.editorial-body {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary, #626A70);
  margin: 0 0 36px 0;
  max-width: 520px;
}

[data-theme="dark"] .editorial-body {
  color: #A4A9AC;
}

.editorial-image-frame {
  position: relative;
  width: 100%;
  height: clamp(520px, 60vh, 700px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.editorial-team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 16px;
  transform-origin: center center;
}

@media (max-width: 1024px) {
  .editorial-vision-section {
    padding: 80px 24px;
  }
  .editorial-container {
    flex-direction: column;
    gap: 48px;
  }
  .editorial-content-col,
  .editorial-image-col {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .editorial-image-frame {
    height: clamp(400px, 55vh, 520px);
  }
}

@media (max-width: 767px) {
  .editorial-vision-section {
    padding: 64px 20px;
  }
  .editorial-container {
    gap: 40px;
  }
  .editorial-label-row {
    margin-bottom: 18px;
  }
  .editorial-label {
    font-size: 12px;
    letter-spacing: 1.8px;
  }
  .editorial-heading {
    font-size: clamp(34px, 9vw, 46px);
    letter-spacing: -1px;
    margin-bottom: 20px;
  }
  .editorial-subheading {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .editorial-body {
    font-size: 14px;
    margin-bottom: 32px;
  }
  .editorial-image-frame {
    height: clamp(360px, 50vh, 460px);
    border-radius: 14px;
  }
}

.service-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-red);
}

.service-head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  flex-grow: 1;
}

.service-toggle-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

.service-item.active .service-toggle-icon {
  transform: rotate(45deg);
  color: var(--brand-red);
}

.service-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-smooth), opacity var(--transition-smooth);
  opacity: 0;
}

.service-item.active .service-body {
  max-height: 300px;
  opacity: 1;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.service-body p {
  font-size: 15px;
  color: var(--fg-muted);
  margin-bottom: 16px;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
}

.service-list li {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-list li::before {
  content: '•';
  color: var(--brand-red);
  font-size: 18px;
}

/* Drawer Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

.modal-backdrop.active, .drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   SUPERSIDE & DZ!NR FULLSCREEN LIQUID-GLASS MOBILE NAVIGATION OVERLAY
   ========================================================================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 99999;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 53, 26, .22), transparent 38%),
    radial-gradient(circle at 92% 72%, rgba(255, 112, 34, .17), transparent 42%),
    radial-gradient(circle at 24% 88%, rgba(37, 71, 82, .20), transparent 44%),
    rgba(5, 7, 12, 0.94);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Prevent Body Scroll when Menu is Open */
body.menu-open {
  overflow: hidden !important;
  touch-action: none;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Liquid-Glass Ambient Glowing Blobs */
.mobile-menu-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.mobile-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
  animation: blobLiquidMove 18s ease-in-out infinite alternate;
}

.mobile-blob.blob-1 {
  width: 380px;
  height: 380px;
  top: -10%;
  left: -15%;
  background: radial-gradient(circle, rgba(255, 41, 0, 0.5) 0%, rgba(244, 48, 15, 0.2) 60%, transparent 80%);
  animation-duration: 20s;
}

.mobile-blob.blob-2 {
  width: 420px;
  height: 420px;
  bottom: 5%;
  right: -20%;
  background: radial-gradient(circle, rgba(255, 65, 0, 0.45) 0%, rgba(200, 234, 128, 0.2) 60%, transparent 80%);
  animation-duration: 24s;
  animation-delay: -6s;
}

.mobile-blob.blob-3 {
  width: 320px;
  height: 320px;
  top: 45%;
  left: 20%;
  background: radial-gradient(circle, rgba(244, 240, 15, 0.3) 0%, rgba(255, 41, 0, 0.2) 50%, transparent 80%);
  animation-duration: 16s;
  animation-delay: -12s;
}

@keyframes blobLiquidMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -35px) scale(1.15); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

/* Inner Liquid-Glass Layout Container */
.menu-overlay-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 5vw, 40px) clamp(24px, 6vw, 44px);
  box-sizing: border-box;
  padding-top: max(clamp(24px, 5vw, 40px), env(safe-area-inset-top));
  padding-bottom: max(clamp(24px, 5vw, 40px), env(safe-area-inset-bottom));
}

/* Header Top Bar: Full Desktop Logo + Clean Glass Circular Close Button */
.menu-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mobile-nav-logo .brand-header-logo-full {
  height: clamp(26px, 6vw, 32px);
  width: auto;
}

.menu-close-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  filter: none !important;
  drop-shadow: none !important;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.menu-close-btn:focus-visible {
  background: rgba(255, 41, 0, 0.8);
  border-color: var(--brand-red);
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  box-shadow: none !important;
}

@media (hover: hover) {
  .menu-close-btn:hover {
    background: rgba(255, 41, 0, 0.8);
    border-color: var(--brand-red);
    transform: rotate(90deg) scale(1.05);
    box-shadow: none !important;
  }
}

.menu-close-btn svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  filter: none !important;
}

/* Content Area: Center Left Numbered Navigation Items (Flat Sharp Styling - No Shadows) */
.menu-overlay-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin: 20px 0;
}

.overlay-nav-links {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vh, 24px);
}

.nav-overlay-item {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 3vw, 20px);
  text-decoration: none;
  width: 100%;
  padding: 6px 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease, color var(--transition-fast);
}

.menu-overlay.active .nav-overlay-item {
  opacity: 1;
  transform: translateY(0);
}

.menu-overlay.active .nav-overlay-item:nth-child(1) { transition-delay: 0.1s; }
.menu-overlay.active .nav-overlay-item:nth-child(2) { transition-delay: 0.15s; }
.menu-overlay.active .nav-overlay-item:nth-child(3) { transition-delay: 0.2s; }
.menu-overlay.active .nav-overlay-item:nth-child(4) { transition-delay: 0.25s; }
.menu-overlay.active .nav-overlay-item:nth-child(5) { transition-delay: 0.3s; }
.menu-overlay.active .nav-overlay-item:nth-child(6) { transition-delay: 0.35s; }
.menu-overlay.active .nav-overlay-item:nth-child(7) { transition-delay: 0.4s; }

.item-num {
  display: none !important;
  font-family: var(--font-mono, monospace);
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(244, 241, 228, 0.6);
  text-shadow: none !important;
  filter: none !important;
  transition: color var(--transition-fast);
}

.item-text {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 54px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: rgba(244, 241, 228, 0.7);
  text-shadow: none !important;
  filter: none !important;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* Touch/Click Selected State: Sharp Flat Anidam Orange-Red (No Shadows) */
.nav-overlay-item.selected .item-text,
.nav-overlay-item.selected .item-num,
.nav-overlay-item:active .item-text,
.nav-overlay-item:active .item-num,
.nav-overlay-item.active .item-text,
.nav-overlay-item.active .item-num {
  color: var(--brand-red) !important;
  text-shadow: none !important;
  filter: none !important;
}

.nav-overlay-item.selected .item-text,
.nav-overlay-item:active .item-text,
.nav-overlay-item.active .item-text {
  transform: translateX(6px);
}

/* Desktop Hover State (Disabled on touch devices to avoid sticky mobile hover) */
@media (hover: hover) {
  .nav-overlay-item:hover .item-text {
    color: var(--brand-red);
    text-shadow: none !important;
    filter: none !important;
    transform: translateX(6px);
  }
  .nav-overlay-item:hover .item-num {
    color: var(--brand-red);
    text-shadow: none !important;
    filter: none !important;
  }
}

.nav-overlay-item:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: none !important;
}

/* Bottom Footer Area */
.menu-overlay-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-quick {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(244, 241, 228, 0.45);
  text-transform: uppercase;
}

.quick-link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(244, 241, 228, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.quick-link:hover {
  color: var(--brand-red);
}

.social-quick {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(244, 241, 228, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.social-link:hover {
  color: #ffffff;
}

/* Prefers Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mobile-blob {
    animation: none !important;
  }

  .nav-overlay-item {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
}

/* Drawer Panel */
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
  background: var(--bg-card);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
}

.drawer-backdrop.active .drawer-panel {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.drawer-header h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
}

.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  background: var(--bg-subtle);
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 14px;
}

.submit-inquiry-btn {
  background: var(--brand-red);
  color: #ffffff;
  padding: 14px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  box-shadow: 0 6px 20px var(--red-glow);
}

.form-success-msg {
  display: none;
  background: var(--brand-red);
  color: #ffffff;
  padding: 16px;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
}

.form-success-msg.active { display: flex; }

/* Modal Content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90%;
  max-width: 700px;
  background: var(--bg-card);
  border-radius: 28px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-smooth);
}

.modal-backdrop.active .modal-content {
  transform: translate(-50%, -50%) scale(1);
}

.modal-close-btn, .menu-close-btn, .drawer-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.main-footer {
  background: #000000;
  color: #f4f1e4;
  padding: 80px 24px 40px;
}

/* Keep the shared inner-page footer visually identical to the home footer. */
.footer-master {
  background: #07090A !important;
  color: #F7F7F2 !important;
  position: relative;
  overflow: hidden;
  padding: 80px 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-master::after {
  content: "ANIDAM";
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.035);
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 240px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.footer-main-container {
  width: min(1380px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.footer-master .footer-logo-link {
  display: inline-flex;
  margin-bottom: 20px;
}

.footer-master .footer-logo-img {
  display: block;
  width: min(180px, 100%);
  height: auto;
}

.footer-master .footer-brand-desc {
  max-width: 340px;
  margin: 0 0 24px;
  color: #A4A9AC;
  font-size: 15px;
  line-height: 1.65;
}

.footer-master .footer-contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-master .footer-contact-item svg {
  width: 17px;
  height: 17px;
}

.footer-master .footer-bottom-row {
  position: relative;
  z-index: 3;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-master .footer-copyright {
  margin: 0;
  color: #737B80;
  font-size: 13px;
}

/* Shared inner-page pre-footer CTA uses the home page's dark/orange treatment. */
.pre-footer-cta-strip .pre-footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.pre-footer-cta-strip .pre-footer-title {
  margin: 0 0 12px;
  color: #F7F7F2 !important;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.pre-footer-cta-strip .pre-footer-sub {
  margin: 0 auto 24px;
  color: rgba(247, 247, 242, .66) !important;
  font-size: 15px;
}

.pre-footer-cta-strip .pre-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #FF351A;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.footer-container {
  max-width: 1720px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 2.5fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand p {
  color: #a39f93;
  margin-top: 16px;
  max-width: 340px;
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--brand-red);
}

.footer-col a, .footer-col p {
  display: block;
  font-size: 14px;
  color: #a39f93;
  margin-bottom: 10px;
  transition: color var(--transition-fast);
}

.footer-col a:hover { color: #f4f1e4; }

.footer-bottom {
  border-top: 1px solid rgba(244, 241, 228, 0.12);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #858072;
}

.back-to-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-floating-cards-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .about-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .desktop-nav-menu, .nav-cta-btn { display: none !important; }
  .hamburger-btn { display: block !important; }

  /* Hero Section Mobile Border Radius */
  .hero-section,
  .hero-webgl-wrapper {
    border-radius: 0 0 16px 16px !important;
  }

  /* Mobile Background Position Adjustment for Abstract Orange Torus */
  .hero-bg-animated-image {
    background-position: 85% center !important;
  }

  /* Hero Section Mobile & Tablet Layout (Strict Vertical Stacking: Text UP, Slider DOWN) */
  .hero-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    overflow: hidden !important;
  }

  .hero-content-container {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    z-index: 10 !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .hero-text-col {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .hero-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-action-group {
    display: flex !important;
    justify-content: center !important;
  }

  .hero-cta-pill {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }

  .hero-rating-box {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  /* Work Cards Mobile Slider (Horizontal Edge-to-Edge Carousel DOWN Below Text - 2 LINES TALL PORTRAIT SIZE) */
  .hero-image-col {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 355px !important;
    margin: 20px 0 0 0 !important;
    overflow: hidden !important;
    z-index: 5 !important;
    clear: both !important;
  }

  .hero-grid-slider-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    height: 100%;
    padding: 0;
    mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
  }

  .hero-slider-col {
    width: 100%;
    height: 165px !important;
    overflow: hidden;
  }

  .hero-slider-col:nth-child(3) {
    display: none !important;
  }

  .col-track {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px;
    width: max-content;
    height: 100%;
  }

  .hero-work-card {
    width: 130px !important;
    height: 165px !important;
    flex-shrink: 0;
    border-radius: 16px;
  }

  .hero-work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .track-up {
    animation: slideHorizontalLeft 35s linear infinite;
  }

  .track-down {
    animation: slideHorizontalRight 40s linear infinite;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

@keyframes slideHorizontalLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes slideHorizontalRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (max-width: 580px) {
  .hero-floating-cards-row {
    grid-template-columns: 1fr;
  }
  .about-cards-grid {
    grid-template-columns: 1fr;
  }
  .estimator-summary-box {
    flex-direction: column;
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   13. DESKTOP HERO RESTORATION (min-width: 1025px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    max-height: 1080px;
    display: flex;
    align-items: center;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
  }

  .hero-content-container {
    max-width: 1720px;
    margin: 0 auto;
    padding: 100px 24px 40px 24px;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    width: 100%;
    position: relative;
    text-align: left;
  }

  .hero-text-col {
    position: relative;
    z-index: 10;
    max-width: 680px;
    text-align: left;
  }

  .hero-subtitle {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-action-group {
    display: block;
  }

  .hero-cta-pill {
    width: auto;
    max-width: none;
  }

  .hero-rating-box {
    justify-content: flex-start;
  }

  .hero-image-col {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: max(60px, calc((100vw - 1720px) / 2 + 60px)) !important;
    left: auto !important;
    width: 46% !important;
    max-width: 740px !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .hero-grid-slider-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: row !important;
    gap: 16px !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%) !important;
  }

  .hero-slider-col {
    width: auto !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .col-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: max-content !important;
    width: 100% !important;
    height: auto !important;
  }

  .hero-work-card {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .track-up {
    animation: moveColUp 72s linear infinite !important;
  }

  .track-down {
    animation: moveColDown 84s linear infinite !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE CLIENT MARQUEE SINGLE-ROW & SPEED CONTROL (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .dual-slider-wrapper {
    gap: 12px !important;
  }

  .row-slide-left {
    display: flex !important;
  }

  .slider-row {
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .slider-track {
    gap: 32px !important;
    animation-duration: 72s !important;
  }

  .ref-client-card {
    height: 62px !important;
    min-width: 150px !important;
    padding: 0 16px !important;
  }

  .ref-client-logo {
    height: auto !important;
    max-height: 29px !important;
    max-width: 112px !important;
  }
}

/* --------------------------------------------------------------------------
   PRE-FOOTER CTA STRIP & EDITORIAL DARK FOOTER WITH PARALLAX WORDMARK
   -------------------------------------------------------------------------- */
.pre-footer-cta-strip {
  background: #070b0c;
  padding: 60px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px 24px 0 0;
  position: relative;
  z-index: 5;
  margin-top: 0 !important;
}

.pre-footer-container {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.pre-footer-cta-strip .pre-footer-content {
  width: min(100%, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pre-footer-cta-strip .pre-footer-title {
  margin-bottom: 16px;
}

.pre-footer-cta-strip .pre-footer-sub {
  max-width: 620px;
  margin: 0 auto 28px;
}

.pre-footer-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
}

.cta-pill-orange {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--brand-red);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.cta-pill-orange:hover {
  transform: translateY(-2px);
  background: #e02400;
}

.arrow-badge-white {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Footer Container */
.main-footer {
  background: #07090A !important;
  color: #F7F7F2;
  position: relative;
  overflow: hidden;
  padding: 80px 24px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-container {
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 70px;
}

.footer-logo-wrap {
  margin-bottom: 20px;
}

.footer-brand-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: #A4A9AC;
  max-width: 340px;
  margin-bottom: 24px;
}

.footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #92999D;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 280ms ease, transform 280ms ease;
}

.footer-contact-item i {
  color: #92999D;
  transition: color 280ms ease;
}

.footer-contact-item:hover {
  color: #FFFFFF;
  transform: translateX(3px);
}

.footer-contact-item:hover i {
  color: #FF351A;
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #FF351A !important;
  margin-bottom: 24px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links-list a {
  position: relative;
  display: inline-block;
  color: #92999D;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-links-list a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FF351A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-links-list a:hover {
  color: #FFFFFF;
  transform: translateX(4px);
}

.footer-links-list a:hover::after {
  transform: scaleX(1);
}

.footer-social-links {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}

.footer-social-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #92999D;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 280ms ease;
}

.footer-social-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FF351A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.social-arrow-icon {
  width: 14px;
  height: 14px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms ease;
}

.footer-social-links a:hover {
  color: #FFFFFF;
}

.footer-social-links a:hover::after {
  transform: scaleX(1);
}

.footer-social-links a:hover .social-arrow-icon {
  transform: translate(2px, -2px);
  color: #FF351A;
}

/* Newsletter Box */
.footer-newsletter-box {
  background: #111516;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 24px;
  border-radius: 16px;
}

.newsletter-title {
  font-size: 16px;
  font-weight: 700;
  color: #F7F7F2;
  margin-bottom: 14px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.newsletter-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 10px 18px;
  color: #FFFFFF;
  font-size: 13px;
  outline: none;
  transition: border-color 200ms ease;
}

.newsletter-input:focus {
  border-color: #FF351A;
}

.newsletter-submit-btn {
  background: #FF351A;
  color: #FFFFFF;
  border: none;
  padding: 10px 22px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 250ms ease;
}

.newsletter-submit-btn:hover {
  background: #E02B12;
}

.newsletter-subtext {
  font-size: 12px;
  color: #737B80;
  margin: 0;
}

.newsletter-feedback {
  font-size: 12px;
  margin-top: 8px;
  color: #FF351A;
}

/* Bottom Bar */
.footer-bottom-bar {
  background: #0B0E0F;
  margin: 70px -24px 0 -24px;
  padding: 28px 160px 28px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  z-index: 5;
}

.copyright-text {
  font-size: 13px;
  color: #737B80;
}

.back-to-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #92999D;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 250ms ease;
}

.back-to-top-link i {
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), color 250ms ease;
}

.back-to-top-link:hover {
  color: #FFFFFF;
}

.back-to-top-link:hover i {
  transform: translateY(-4px);
  color: #FF351A;
}

/* Large Background ANIDAM Wordmark */
.footer-bg-wordmark-container {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  overflow: hidden;
}

.footer-bg-wordmark {
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 240px);
  font-weight: 900;
  letter-spacing: -4px;
  color: rgba(255, 255, 255, 0.035) !important;
  line-height: 0.8;
  display: inline-block;
  will-change: transform;
}

/* Mobile Responsiveness for Footer */
@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .pre-footer-container {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-newsletter-box .newsletter-form {
    flex-direction: column;
  }
  .pre-footer-cta-strip {
    border-radius: 16px 16px 0 0;
    padding: 48px 20px;
  }
  .pre-footer-cta-strip .pre-footer-title {
    margin-bottom: 14px;
  }
  .pre-footer-cta-strip .pre-footer-sub {
    margin-bottom: 24px;
    line-height: 1.6;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 24px 112px 24px 48px;
  }
}

/* ================================================================
   NEW OUR SERVICES SECTION — STACKED CARDS EXPERIENCE
================================================================ */
/* ================================================================
   OUR SERVICES SECTION — DESKTOP STICKY STACK & MOBILE FLOW
================================================================ */
.services-section {
  position: relative;
  background-color: #070B0E !important;
  color: #FFFFFF !important;
  padding: 120px 0 72px 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  z-index: 5;
}

/* Centered Desktop Container & Layout */
.services-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

.services-layout,
.services-grid {
  display: grid;
  grid-template-columns: minmax(320px, 42%) minmax(0, 58%);
  align-items: start;
  gap: clamp(48px, 7vw, 120px);
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Left Column: Sticky Intro Column (42%) */
.services-intro {
  grid-column: 1;
  position: sticky;
  top: 120px;
  align-self: start;
  height: fit-content;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.services-label-tag,
.services-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF351A;
}

.services-label-tag .label-dot,
.services-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF351A;
  box-shadow: 0 0 10px rgba(255, 53, 26, 0.8);
}

.services-heading,
.services-intro h2 {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}

.services-subtext,
.services-intro p {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
  max-width: 440px;
  margin: 0;
}

.services-progress-box,
.services-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.services-progress-box::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF351A;
  box-shadow: 0 0 8px rgba(255, 53, 26, 0.8);
  flex-shrink: 0;
}

.progress-current,
.services-progress .current {
  font-size: 14px;
  color: #FF351A;
  transition: color 200ms ease;
}

.progress-separator,
.progress-total,
.services-progress span:not(.current) {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Right Column: Cards Stack (58%) */
.services-cards,
.services-card-stack {
  grid-column: 2;
  width: 100%;
  max-width: 590px;
  justify-self: end;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Service Card Base Style — Compact Horizontal Content Card (#0B1015) */
.service-stacked-card {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 330px;
  border-radius: 20px;
  background: #0B1015 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  padding: 32px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0;
  will-change: opacity, transform;
  transition: background 350ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-stacked-card:last-child {
  margin-bottom: 0;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.card-number {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FF391E;
  transition: color 350ms ease;
}

/* Small 42-46px rounded-square icon container at top-right */
.card-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 350ms ease, border-color 350ms ease;
}

/* Small 20-22px icon inside container */
.card-icon-wrap svg,
.card-icon-wrap i,
.card-icon-svg {
  width: 21px !important;
  height: 21px !important;
  max-width: 21px !important;
  max-height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  color: rgba(255, 255, 255, 0.75);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.8;
  flex-shrink: 0;
  object-fit: contain;
  transition: color 350ms ease, stroke 350ms ease;
}

.card-title {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 12px 0 10px 0;
  padding-right: 16px;
  transition: color 350ms ease;
}

.card-description {
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 18px 0;
  transition: color 350ms ease, opacity 350ms ease;
}

.card-capabilities-wrapper {
  margin-top: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 350ms ease;
}

.card-capabilities-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-capabilities-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  transition: color 350ms ease;
}

.bullet-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FF391E;
  flex-shrink: 0;
  transition: background 350ms ease;
}

/* Active Card — Subtle dark orange/brown gradient */
.service-stacked-card.active,
.service-stacked-card.is-active {
  background: linear-gradient(
    135deg,
    rgba(255, 57, 30, 0.16) 0%,
    rgba(255, 57, 30, 0.07) 45%,
    #0B1015 100%
  ) !important;
  border: 1px solid rgba(255, 55, 30, 0.35) !important;
  box-shadow:
    0 18px 45px rgba(255, 57, 30, 0.14),
    0 0 24px rgba(255, 57, 30, 0.08) !important;
  z-index: 4;
}

.service-stacked-card.active .card-number,
.service-stacked-card.is-active .card-number {
  color: #FF391E !important;
}

.service-stacked-card.active .card-icon-wrap,
.service-stacked-card.is-active .card-icon-wrap {
  background: rgba(255, 57, 30, 0.16) !important;
  border-color: rgba(255, 57, 30, 0.38) !important;
}

.service-stacked-card.active .card-icon-wrap svg,
.service-stacked-card.is-active .card-icon-wrap svg,
.service-stacked-card.active .card-icon-svg,
.service-stacked-card.is-active .card-icon-svg {
  color: #FF391E !important;
  stroke: #FF391E !important;
}

.service-stacked-card.active .card-title,
.service-stacked-card.is-active .card-title {
  color: #FFFFFF !important;
}

.service-stacked-card.active .card-description,
.service-stacked-card.is-active .card-description {
  color: rgba(255, 255, 255, 0.8) !important;
}

.service-stacked-card.active .card-capabilities-list li,
.service-stacked-card.is-active .card-capabilities-list li {
  color: rgba(255, 255, 255, 0.92) !important;
}

.service-stacked-card.active .bullet-dot,
.service-stacked-card.is-active .bullet-dot {
  background: #FF391E !important;
  box-shadow: 0 0 8px rgba(255, 57, 30, 0.7) !important;
}

/* Card Bottom Divider & Action Row */
.card-footer-row {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 400ms ease;
}

.service-stacked-card.active .card-footer-row,
.service-stacked-card.is-active .card-footer-row {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.card-explore-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  font-family: 'Manrope', 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  transition: color 250ms ease;
}

.service-stacked-card.active .card-explore-btn,
.service-stacked-card.is-active .card-explore-btn {
  color: #FFFFFF !important;
}

.card-arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 250ms ease, transform 250ms ease;
}

.card-arrow-circle svg,
.card-arrow-circle i {
  width: 15px;
  height: 15px;
  color: #FFFFFF;
  transition: transform 250ms ease;
}

.service-stacked-card.active .card-arrow-circle,
.service-stacked-card.is-active .card-arrow-circle {
  background: #FF3B1F !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(255, 59, 31, 0.45) !important;
}

.service-stacked-card.active .card-arrow-circle svg,
.service-stacked-card.is-active .card-arrow-circle svg,
.service-stacked-card.active .card-arrow-circle i,
.service-stacked-card.is-active .card-arrow-circle i {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.card-explore-btn:hover .card-arrow-circle {
  transform: translate(2px, -2px);
  background: #FF3B1F !important;
}

/* Mouse Cursor Pointer-Following Glow Overlay (Desktop Only) */
.card-glow-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 59, 31, 0.13),
    transparent 55%
  );
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 350ms ease;
  z-index: 2;
}

@media (min-width: 768px) {
  .service-stacked-card:hover .card-glow-bg {
    opacity: 1;
  }

  .service-stacked-card:hover {
    transform: translateY(-3.5px);
    border-color: rgba(255, 59, 31, 0.85) !important;
    box-shadow: 0 20px 48px rgba(255, 59, 31, 0.15), 0 0 28px rgba(255, 59, 31, 0.1) !important;
  }
}

/* Obsolete Metallic Reflection Disabled */
.card-reflection {
  display: none !important;
}

/* Scaled/Stacked Previous Card State */
.service-stacked-card.is-stacked-prev {
  transform: scale(0.96) translateY(-14px) !important;
  filter: brightness(0.7) !important;
  background: #0B0F14 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  z-index: 2;
}

.service-stacked-card.is-stacked-prev .card-number {
  color: #FF351A;
}

.service-stacked-card.is-stacked-prev .bullet-dot {
  background: #FF351A;
}

/* Mobile Sticky Status Bar (Hidden by default on Desktop) */
.mobile-sticky-status-bar {
  display: none !important;
}

/* Mobile & Tablet Overrides (< 1024px) */
@media (max-width: 1023px) {
  .services-section {
    padding: 80px 0 40px 0;
  }

  .services-container {
    width: min(100% - 32px, 640px);
    margin: 0 auto;
  }

  .services-layout,
  .services-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .services-intro {
    position: relative !important;
    top: auto !important;
    width: 100%;
  }

  .services-cards,
  .services-card-stack {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .card-capabilities-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .services-section {
    padding: 56px 0 !important;
  }

  .services-heading,
  .services-intro h2 {
    font-size: clamp(2.0rem, 7vw, 2.8rem);
  }

  .services-subtext,
  .services-intro p {
    font-size: 15px;
  }

  /* MOBILE COLLAPSED CARD SHELL & EXPANSION */
  .service-stacked-card {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 20px !important;
    border-radius: 18px !important;
    background: #0B0F14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease, padding 400ms ease;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .service-stacked-card:not(.active):not(.is-active) .card-top-row {
    margin-bottom: 0;
  }

  /* Inactive collapsed card: keep the title beside the number; hide only details. */
  .service-stacked-card:not(.active):not(.is-active) .card-description,
  .service-stacked-card:not(.active):not(.is-active) .card-capabilities-wrapper,
  .service-stacked-card:not(.active):not(.is-active) .card-footer-row {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease, margin 380ms ease, padding 380ms ease;
  }

  .service-stacked-card:not(.active):not(.is-active) .card-inner {
    position: relative;
  }

  .service-stacked-card:not(.active):not(.is-active) .card-title {
    position: absolute;
    top: 50%;
    left: 48px;
    right: 62px;
    transform: translateY(-50%);
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1 !important;
    pointer-events: none;
  }

  /* Active Expanded Card: Reveal title, description, capabilities list, divider & explore button */
  .service-stacked-card.active .card-title,
  .service-stacked-card.is-active .card-title,
  .service-stacked-card.active .card-description,
  .service-stacked-card.is-active .card-description,
  .service-stacked-card.active .card-capabilities-wrapper,
  .service-stacked-card.is-active .card-capabilities-wrapper,
  .service-stacked-card.active .card-footer-row,
  .service-stacked-card.is-active .card-footer-row {
    max-height: 500px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 350ms ease 80ms;
  }

  .service-stacked-card.active,
  .service-stacked-card.is-active {
    padding: 24px 20px !important;
    border-color: rgba(255, 53, 26, 0.55) !important;
  }

  .card-title {
    font-size: 1.35rem;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  .card-description {
    font-size: 14px;
  }

  .card-capabilities-list li {
    font-size: 13px;
  }
}




/* ==========================================================================
   RECENT PROJECTS SECTION — Dark 2-Column Grid
   ========================================================================== */

.rp-section {
  background-color: #070B0E;
  color: #FFFFFF;
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}

/* Subtle Orange-Red Ambient Radial Lighting */
.rp-lighting-effect {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 57, 30, 0.12) 0%, rgba(255, 57, 30, 0) 70%);
  pointer-events: none;
}

.rp-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Header */
.rp-header {
  margin-bottom: clamp(44px, 6vw, 72px);
  max-width: 720px;
}

.rp-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 18px 0 16px;
}

.rp-subtext {
  font-family: var(--font-main);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Grid Layout */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
  transition: opacity 300ms ease;
}

/* Hover dimming: when hovering one card, dim other cards in the grid */
@media (hover: hover) {
  .rp-grid:has(.rp-card:hover) .rp-card:not(:hover) {
    opacity: 0.55;
    transform: scale(0.99);
  }
}

/* Card Container */
.rp-card {
  display: flex;
  flex-direction: column;
  background: #12161A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  box-sizing: border-box;
  will-change: transform, opacity;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 400ms ease,
    box-shadow 400ms ease,
    opacity 350ms ease;
  cursor: pointer;
}

.rp-card:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
}

.rp-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 57, 30, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 57, 30, 0.12);
  z-index: 10;
}

/* Liquid-Glass Shimmer Effect on Hover */
.rp-card-shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
  transition: left 750ms ease;
}

.rp-card:hover .rp-card-shine {
  left: 150%;
}

/* Card Top Header */
.rp-card-header {
  padding: 24px 28px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(18, 22, 26, 0.95);
  position: relative;
  z-index: 3;
}

.rp-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-card-category {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.rp-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
}

/* Circular Arrow Icon */
.rp-card-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background 350ms ease, border-color 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1), color 350ms ease;
}

.rp-card-arrow svg {
  width: 18px;
  height: 18px;
}

.rp-card:hover .rp-card-arrow {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #FFFFFF;
  transform: translate(3px, -3px);
}

/* Card Media & Image */
.rp-card-media {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  background: #0B0E11;
}

.rp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.rp-card:hover .rp-card-img {
  transform: scale(1.04);
}

.rp-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 11, 14, 0.6) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}

/* Bottom CTA Button */
.rp-footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.rp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: 100px;
  background: #FFFFFF;
  color: #070B0E !important;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background 350ms ease, color 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.rp-cta-arrow {
  font-size: 16px;
  transition: transform 350ms ease;
}

.rp-cta-btn:hover {
  background: var(--brand-red);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 57, 30, 0.3);
}

.rp-cta-btn:hover .rp-cta-arrow {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   RECENT PROJECTS — MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  .rp-section {
    padding: 72px 0 64px;
  }

  .rp-container {
    width: calc(100% - 32px);
  }

  .rp-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .rp-card-media {
    height: 250px;
  }

  .rp-card-header {
    padding: 20px 20px 16px;
  }

  .rp-card-title {
    font-size: 1.25rem;
  }

  .rp-footer-cta {
    margin-top: 44px;
  }

  .rp-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }
}

/* ==========================================================================
   RECENT PROJECTS — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rp-card,
  .rp-card-img,
  .rp-card-arrow,
  .rp-cta-btn {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .rp-card-shine {
    display: none !important;
  }
}


/* ==========================================================================
   WHY CHOOSE ANIDAM — Staggered Cards Section
   ========================================================================== */

.wca-section {
  background: #FFFFFF;
  padding: 100px 0 0;
  overflow: hidden;
  position: relative;
}

/* Container */
.wca-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 72px;
}

/* ── Header ── */
.wca-header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.wca-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 18px;
}

.wca-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: #080C10;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
}

/* ── Cards Row ── */
.wca-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  position: relative;
}

/* ── Individual Card ── */
.wca-card {
  border-radius: 16px;
  cursor: default;
  position: relative;
  overflow: hidden;
  /* Transform-origin at center for scale/rotation */
  transform-origin: center center;
  will-change: transform, opacity;
  transition:
    transform  340ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 340ms ease;
}

.wca-card-inner {
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  min-height: 340px;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keep CSS transitions off the element GSAP moves during scroll. */
.wca-section.is-wca-animated .wca-card {
  transition: box-shadow 340ms ease;
}

/* ── Color variants ── */
.wca-card--gray  { background: #F2F2F2; }
.wca-card--black { background: #080C10; }
.wca-card--red   { background: var(--brand-red); }

/* ── Card top: pill + icon ── */
.wca-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}

/* Pill label */
.wca-pill {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid;
  line-height: 1.4;
}

.wca-card--gray  .wca-pill { color: rgba(8,12,16,0.55); border-color: rgba(8,12,16,0.18); }
.wca-card--black .wca-pill { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.18); }
.wca-card--red   .wca-pill { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.35); }

/* Icon wrap */
.wca-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wca-card--gray  .wca-icon-wrap { color: rgba(8,12,16,0.5);    border-color: rgba(8,12,16,0.12); }
.wca-card--black .wca-icon-wrap { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); }
.wca-card--red   .wca-icon-wrap { color: rgba(255,255,255,0.85);border-color: rgba(255,255,255,0.35); }

.wca-icon {
  width: 18px;
  height: 18px;
}

/* ── Card body ── */
.wca-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.wca-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.wca-card--gray  .wca-card-title { color: #080C10; }
.wca-card--black .wca-card-title { color: #FFFFFF; }
.wca-card--red   .wca-card-title { color: #FFFFFF; }

.wca-card-desc {
  font-family: var(--font-main);
  font-size: clamp(0.82rem, 1.1vw, 0.9rem);
  line-height: 1.65;
  margin: 0;
}

.wca-card--gray  .wca-card-desc { color: rgba(8,12,16,0.55); }
.wca-card--black .wca-card-desc { color: rgba(255,255,255,0.55); }
.wca-card--red   .wca-card-desc { color: rgba(255,255,255,0.8); }

/* ── Hover ── */
@media (hover: hover) {
  .wca-card:hover {
    box-shadow: 0 12px 40px rgba(8, 12, 16, 0.10),
                0 0 0 1.5px rgba(255, 53, 26, 0.35) !important;
    z-index: 2;
  }
  .wca-card:hover .wca-card-inner {
    transform: translateY(-8px);
  }
  .wca-card:hover .wca-icon-wrap {
    transform: rotate(12deg);
  }
}

/* Focus-visible ring */
.wca-card:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
}

/* ── Bottom Marquee ── */
.wca-marquee-outer {
  overflow: hidden;
  border-top: 1px solid rgba(8, 12, 16, 0.06);
  padding: 28px 0;
  width: 100%;
}

.wca-marquee-track {
  display: flex;
  width: max-content;
  animation: wcaMarquee 28s linear infinite;
  will-change: transform;
}

.wca-marquee-text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(8, 12, 16, 0.08);
  white-space: nowrap;
  padding-right: 0;
  text-transform: uppercase;
}

@keyframes wcaMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* ==========================================================================
   WHY CHOOSE ANIDAM — MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  .wca-section {
    padding: 64px 0 0;
  }

  .wca-container {
    width: calc(100% - 40px);
    padding-bottom: 44px;
  }

  .wca-header {
    margin-bottom: 32px;
  }

  .wca-heading {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .wca-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Remove stagger offsets on mobile */
  .wca-card:nth-child(1),
  .wca-card:nth-child(2),
  .wca-card:nth-child(3),
  .wca-card:nth-child(4) {
    margin-bottom: 0;
  }

  .wca-card-inner {
    min-height: 220px;
    padding: 22px 20px 24px;
  }

  .wca-card-top {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   WHY CHOOSE ANIDAM — TABLET (768px – 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .wca-section {
    padding: 80px 0 0;
  }

  .wca-cards {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
}

/* ==========================================================================
   WHY CHOOSE ANIDAM — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .wca-marquee-track {
    animation: none !important;
  }

  .wca-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* ==========================================================================
   PLATFORMS & TOOLS WE WORK WITH — Premium Tech Grid
   ========================================================================== */

/* ==========================================================================
   RECENT PROJECTS — Cinematic Perspective Carousel
   ========================================================================== */
.fp-section {
  --fp-accent: #ff351a;
  position: relative;
  overflow: hidden;
  min-height: 900px;
  padding: 88px 0 48px;
  background: #ffffff;
  color: #080c10;
}

.fp-section::before,
.fp-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .5;
}

.fp-section::before {
  width: 420px;
  height: 420px;
  top: -210px;
  right: -110px;
  border: 1px solid rgba(8,12,16,.08);
  animation: fpOrbit 18s linear infinite;
}

.fp-section::after {
  width: 260px;
  height: 260px;
  bottom: -130px;
  left: -70px;
  border: 1px solid rgba(255,53,26,.2);
  animation: fpOrbit 13s linear infinite reverse;
}

@keyframes fpOrbit { to { transform: rotate(360deg); } }

.fp-header {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  position: relative;
  z-index: 20;
}

.fp-kicker {
  margin: 0 0 12px;
  color: var(--fp-accent);
  font: 700 11px/1.2 var(--font-main);
  letter-spacing: 2.4px;
}

.fp-heading {
  max-width: 650px;
  margin: 0;
  font: 700 clamp(2rem, 4vw, 3.5rem)/1.04 var(--font-display);
  letter-spacing: -0.04em;
}

.fp-view-all,
.fp-project-link {
  color: inherit;
  font: 700 13px/1 var(--font-main);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

.fp-view-all { color: rgba(8,12,16,.72); }

.fp-view-all:hover,
.fp-view-all:focus-visible { color: var(--fp-accent); }

.fp-stage {
  position: relative;
  width: 100%;
  height: 620px;
  margin-top: 24px;
  perspective: 1600px;
  transform-style: preserve-3d;
  touch-action: pan-y;
}

.fp-stage::before {
  content: "";
  position: absolute;
  inset: 15% 24%;
  border-radius: 50%;
  background: rgba(255,53,26,.08);
  filter: blur(70px);
  pointer-events: none;
}

.fp-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 820px);
  height: min(31vw, 500px);
  min-height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 30px 70px rgba(38, 18, 12, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform 850ms cubic-bezier(.22,1,.36,1), opacity 550ms ease, filter 550ms ease, box-shadow 550ms ease;
  will-change: transform, opacity;
  cursor: pointer;
}

.fp-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(5,7,8,.68) 100%);
  pointer-events: none;
}

.fp-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter 550ms ease;
}

.fp-slide.is-active {
  z-index: 5;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotateY(0);
  box-shadow: 0 42px 100px rgba(38,18,12,.3), 0 8px 24px rgba(38,18,12,.15);
  cursor: grab;
}

.fp-slide.is-active img { transform: scale(1); }
.fp-slide.is-active:hover img { transform: scale(1.045); }

.fp-slide.is-prev,
.fp-slide.is-next {
  z-index: 3;
  opacity: .9;
  filter: saturate(.82);
}

.fp-slide.is-prev {
  transform: translate(-132%, -48%) scale(.68) rotateY(18deg) rotateZ(-3deg);
}

.fp-slide.is-next {
  transform: translate(32%, -48%) scale(.68) rotateY(-18deg) rotateZ(3deg);
}

.fp-slide.is-far-prev,
.fp-slide.is-far-next {
  z-index: 1;
  opacity: .55;
  filter: saturate(.7);
}

.fp-slide.is-far-prev {
  transform: translate(-192%, -45%) scale(.44) rotateY(24deg) rotateZ(-5deg);
}

.fp-slide.is-far-next {
  transform: translate(92%, -45%) scale(.44) rotateY(-24deg) rotateZ(5deg);
}

.fp-active-copy {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  width: min(46vw, 720px);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  pointer-events: none;
  transition: opacity 220ms ease, transform 400ms cubic-bezier(.22,1,.36,1), filter 300ms ease;
}

.fp-active-copy.is-changing {
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, calc(-50% + 18px));
}

.fp-active-category {
  margin: 0 0 10px;
  font: 700 11px/1.2 var(--font-main);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.fp-active-title {
  margin: 0 0 22px;
  font: 800 clamp(2.4rem, 6vw, 5.8rem)/.94 var(--font-display);
  letter-spacing: -0.055em;
}

.fp-project-link {
  display: inline-flex;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #080c10;
  text-shadow: none;
  pointer-events: auto;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.fp-project-link:hover,
.fp-project-link:focus-visible {
  transform: translateY(-3px);
  background: var(--fp-accent);
  color: #fff;
  outline: none;
}

.fp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 20;
  width: fit-content;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid rgba(8,12,16,.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,245,245,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(8,12,16,.04),
    0 12px 34px rgba(8,12,16,.1);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.fp-controls::before {
  content: "";
  position: absolute;
  inset: 3px 12% auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}

.fp-control {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(8,12,16,.12);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  color: #080c10;
  font-size: 22px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff, 0 5px 14px rgba(8,12,16,.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.fp-next {
  background: linear-gradient(145deg, rgba(255,87,60,.96), rgba(255,53,26,.72));
  border-color: rgba(255,130,108,.58);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 7px 22px rgba(255,53,26,.27);
}

.fp-control:hover,
.fp-control:focus-visible {
  background: linear-gradient(145deg, #171b1e, #080c10);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 9px 22px rgba(8,12,16,.2);
  outline: 1px solid rgba(8,12,16,.25);
  outline-offset: 2px;
}

.fp-next:hover,
.fp-next:focus-visible {
  background: linear-gradient(145deg, #ff684f, var(--fp-accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(255,53,26,.35);
}

.fp-counter {
  min-width: 58px;
  margin: 0;
  text-align: center;
  font: 700 12px/1 var(--font-main);
  color: rgba(8,12,16,.82);
}

.fp-progress {
  width: clamp(80px, 10vw, 150px);
  height: 2px;
  overflow: hidden;
  background: rgba(8,12,16,.14);
}

.fp-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fp-accent);
  transform: scaleX(.2);
  transform-origin: left center;
  transition: transform 650ms cubic-bezier(.22,1,.36,1);
}

@media (max-width: 767px) {
  .fp-section {
    min-height: 690px;
    padding: 64px 0 36px;
  }

  .fp-header {
    width: calc(100% - 40px);
    align-items: flex-start;
  }

  .fp-view-all {
    display: none;
  }

  .fp-heading {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .fp-stage {
    height: 450px;
    margin-top: 18px;
  }

  .fp-slide {
    width: 78vw;
    height: 350px;
    min-height: 0;
    border-radius: 14px;
  }

  .fp-slide.is-prev { transform: translate(-126%, -50%) scale(.72) rotateY(12deg); }
  .fp-slide.is-next { transform: translate(26%, -50%) scale(.72) rotateY(-12deg); }
  .fp-slide.is-far-prev,
  .fp-slide.is-far-next { opacity: 0; }

  .fp-active-copy {
    width: 68vw;
  }

  .fp-active-title {
    font-size: clamp(2rem, 12vw, 3.3rem);
  }

  .fp-progress { width: 72px; }

  .fp-section::before {
    width: 260px;
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-slide,
  .fp-slide img,
  .fp-active-copy,
  .fp-progress span { transition: none; }
  .fp-section::before,
  .fp-section::after { animation: none; }
}


.pat-section {
  background-color: #050708;
  color: #FFFFFF;
  padding: 100px 0 96px;
  position: relative;
  overflow: hidden;
}

/* Container */
.pat-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
}

/* Header */
.pat-header {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 720px;
}

.section-badge-label--dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.pat-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 18px 0 16px;
}

.pat-subtext {
  font-family: var(--font-main);
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* 3-Column x 2-Row Card Grid */
.pat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Individual Tech Card */
.pat-card {
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: default;
  will-change: transform, opacity;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 380ms ease,
    box-shadow 380ms ease,
    background-color 380ms ease;
}

.pat-card:hover,
.pat-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(255, 53, 26, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 53, 26, 0.08);
  background-color: #1a1a1a;
  outline: none;
}

/* Mouse-following Orange Glow */
.pat-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 53, 26, 0.16) 0%, rgba(255, 53, 26, 0) 70%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 350ms ease;
  z-index: 1;
}

/* Logo Wrapper & Logos */
.pat-logo-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 68px;
}

.pat-logo {
  max-height: 52px;
  max-width: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pat-logo--google { max-height: 50px; max-width: 120px; }
.pat-logo--meta { max-height: 46px; max-width: 135px; }
.pat-logo--figma { max-height: 52px; max-width: 45px; }
.pat-logo--shopify { max-height: 52px; max-width: 55px; }
.pat-logo--adobe { max-height: 48px; max-width: 60px; }
.pat-logo--wordpress { max-height: 52px; max-width: 52px; }

/* On hover: Logo subtle scale */
.pat-card:hover .pat-logo,
.pat-card:focus-visible .pat-logo {
  transform: scale(1.06);
}

/* Platform Name Label */
.pat-card-name {
  position: absolute;
  bottom: 18px;
  left: 22px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
  transition: color 350ms ease;
}

.pat-card:hover .pat-card-name,
.pat-card:focus-visible .pat-card-name {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   PLATFORMS & TOOLS — MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  .pat-section {
    padding: 64px 0 56px;
  }

  .pat-container {
    width: calc(100% - 40px);
  }

  .pat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pat-card {
    height: 135px;
    border-radius: 10px;
  }

  .pat-logo-wrapper {
    height: 44px;
  }

  .pat-logo {
    max-width: 36px;
    max-height: 36px;
  }

  .pat-card-name {
    bottom: 12px;
    left: 14px;
    font-size: 11px;
  }

  /* Disable cursor glow on touch */
  .pat-card-glow {
    display: none;
  }
}

/* ==========================================================================
   PLATFORMS & TOOLS — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .pat-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .pat-logo {
    transition: none !important;
    filter: grayscale(0%) opacity(1) !important;
  }
}


/* ================================================================
   FAQ SECTION — EDITORIAL PURE WHITE VERTICAL ACCORDION PANELS
================================================================ */
.faq-section {
  position: relative;
  background-color: #FFFFFF !important;
  color: #070B0D !important;
  padding: 100px 0 110px 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 6;
}

.faq-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
}

.faq-header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.faq-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #070B0D;
  margin: 0;
}

.text-orange-accent {
  color: #FF391E !important;
}

/* Accordion Horizontal Row Layout (Desktop >= 768px) */
.faq-accordion-wrapper {
  display: flex;
  gap: 16px;
  height: 520px;
  width: 100%;
  box-sizing: border-box;
}

/* Base Panel (Inactive/Closed Question Panel — Matching Floating Header Menu) */
.faq-panel {
  position: relative;
  flex: 0 0 90px;
  height: 100%;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  transition: flex 650ms cubic-bezier(0.4, 0, 0.2, 1),
              background 650ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 400ms ease,
              transform 350ms ease,
              box-shadow 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-panel:hover:not(.is-active) {
  transform: translateY(-4px);
  border-color: rgba(255, 57, 30, 0.35) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Active Panel (Expanded) */
.faq-panel.is-active {
  flex: 1 1 420px;
  background: linear-gradient(135deg, #FF391E 0%, #E02B12 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 20px 48px rgba(255, 57, 30, 0.25) !important;
  cursor: default;
}

/* Header Button inside Panel */
.faq-panel-header {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 90px;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  z-index: 3;
}

.faq-panel-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #718096;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 400ms ease;
}

.faq-panel.is-active .faq-panel-num {
  color: rgba(255, 255, 255, 0.8) !important;
}

.faq-vertical-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #070B0D;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 260px;
  transition: opacity 400ms ease, color 400ms ease;
}

.faq-panel.is-active .faq-vertical-title {
  opacity: 0;
  pointer-events: none;
}

.faq-panel-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #070B0D;
  transition: background 400ms ease, transform 400ms ease, color 400ms ease;
}

.faq-panel:hover:not(.is-active) .faq-panel-icon {
  color: #FF391E;
  border-color: rgba(255, 57, 30, 0.4);
}

.faq-panel.is-active .faq-panel-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
}

.faq-panel .icon-minus {
  display: none;
}

.faq-panel .icon-plus {
  display: block;
}

.faq-panel.is-active .icon-minus {
  display: block;
}

.faq-panel.is-active .icon-plus {
  display: none;
}

/* Content inside Panel (Revealed on Active) */
.faq-panel-content {
  position: absolute;
  top: 0;
  left: 90px;
  right: 0;
  bottom: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity 400ms cubic-bezier(0.2, 1, 0.3, 1) 150ms,
              transform 400ms cubic-bezier(0.2, 1, 0.3, 1) 150ms,
              visibility 400ms ease 150ms;
}

.faq-panel.is-active .faq-panel-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.faq-question-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF !important;
  margin: 0;
}

.faq-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 20px 0;
}

.faq-answer-text {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 0 24px 0;
}

.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 100px;
  background: #FFFFFF;
  color: #FF391E !important;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background 300ms ease, transform 300ms ease, color 300ms ease;
}

.faq-cta-btn:hover {
  background: #070B0D;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.faq-arrow-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 57, 30, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-cta-btn:hover .faq-arrow-circle {
  background: rgba(255, 255, 255, 0.2);
}

/* Mobile Accordion Stack (< 768px) */
@media (max-width: 767px) {
  .faq-section {
    padding: 60px 0 !important;
  }

  .faq-container {
    width: calc(100% - 32px) !important;
    margin: 0 16px !important;
  }

  .faq-header {
    margin-bottom: 32px;
    gap: 14px;
  }

  .faq-heading {
    width: 100%;
    max-width: 470px;
    font-size: clamp(2rem, 7.4vw, 2.45rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .faq-accordion-wrapper {
    display: flex;
    flex-direction: column;
    height: auto !important;
    gap: 16px;
  }

  .faq-panel {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  .faq-panel-header {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center !important;
    gap: 14px;
  }

  .faq-panel-num {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    flex-shrink: 0;
  }

  .faq-vertical-title {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    max-height: none !important;
    font-size: 15px !important;
    white-space: normal !important;
    text-align: left;
    line-height: 1.25;
    min-width: 0;
    opacity: 1 !important;
  }

  .faq-panel.is-active .faq-vertical-title {
    color: #FFFFFF !important;
  }

  .faq-panel-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 0 20px 24px 20px !important;
    transform: none !important;
    box-sizing: border-box;
  }

  .faq-panel:not(.is-active) .faq-panel-content {
    display: none !important;
  }

  .faq-panel.is-active .faq-panel-content {
    display: flex !important;
  }

  .faq-question-heading {
    display: none;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION — Client Stories Marquee
   viewport > track > set×3, GSAP-animated
   ========================================================================== */

/* Section wrapper */
.testimonials-section {
  background: #FFFFFF;
  padding: 96px 0 0;
  position: relative;
  /* NO overflow:hidden here — handled per row */
}

/* Header */
.testimonials-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

.testimonials-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #070B0D;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.testimonials-subtext {
  font-family: var(--font-main);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 0;
}

/* ── Viewport: clips horizontally, generous vertical padding for lifted cards ── */
.tms-viewport {
  overflow-x: hidden;
  overflow-y: visible;           /* lifted cards never cut vertically */
  padding: 24px 0;               /* breathing room above & below each row */
  /* Edge fade mask — horizontal only */
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* ── Track: the moving element, measured by GSAP ── */
.tms-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  /* No animation here — GSAP drives x transform */
  will-change: transform;
}

/* ── Set: one full group of cards, gap between every card ── */
.tms-set {
  display: flex;
  gap: 20px;
  padding-right: 20px; /* gap between last card of one set and first of next */
}

/* ── Individual Card ── */
.tms-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 360px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid rgba(9, 13, 17, 0.09);
  border-radius: 12px;
  padding: 26px 28px 24px;
  box-sizing: border-box;
  cursor: default;
  transform-origin: center;
  /* transition handled by GSAP hover tween */
  transition: border-color 350ms ease, box-shadow 350ms ease;
  position: relative;
  z-index: 0;
}

.tms-card:hover,
.tms-card:focus-within,
.tms-card.is-active {
  border-color: rgba(255, 53, 26, 0.30);
  box-shadow: 0 8px 32px rgba(255, 53, 26, 0.08);
  z-index: 10;
  outline: none;
}

/* ── Card Author row ── */
.tms-card-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  padding: 0;
  margin: 0;
}

.tms-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF391E 0%, #E02B12 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.tms-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tms-name {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  color: #070B0D;
  line-height: 1.3;
}

.tms-role {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* ── Quote ── */
.tms-quote {
  margin: 0;
  padding: 0;
  flex: 1;
}

.tms-quote p {
  font-family: var(--font-main);
  font-size: 14.5px;
  line-height: 1.7;
  color: #2A2E34;
  margin: 0;
}

/* ── Card footer: company logo ── */
.tms-card-footer {
  padding-top: 12px;
  border-top: 1px solid rgba(9, 13, 17, 0.07);
  display: flex;
  align-items: center;
  margin: 0;
}

.tms-company-logo {
  max-height: 24px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) opacity(0.4);
  transition: filter 350ms ease;
}

.tms-card:hover .tms-company-logo,
.tms-card.is-active .tms-company-logo {
  filter: brightness(0) opacity(0.65);
}

/* ── Bottom padding after last row ── */
.testimonials-section > .tms-viewport:last-of-type {
  padding-bottom: 88px;
}

/* ── Mobile: hidden on desktop ── */
.tms-mobile-outer {
  display: none;
}

/* ==========================================================================
   TESTIMONIALS — MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  .testimonials-section {
    padding: 64px 0 0;
  }

  .testimonials-header {
    margin-bottom: 36px;
  }

  /* Hide desktop viewports on mobile */
  .tms-viewport {
    display: none;
  }

  /* Show mobile track */
  .tms-mobile-outer {
    display: block;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 4px 0 60px;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    scrollbar-width: none;
  }

  .tms-mobile-outer::-webkit-scrollbar { display: none; }

  .tms-mobile-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 8px 20px 8px;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
  }

  .tms-mobile-track.is-autoplaying {
    animation: tms-mobile-loop var(--tms-mobile-loop-duration, 40s) linear infinite;
  }

  .tms-mobile-track.is-paused {
    animation-play-state: paused;
  }

  .tms-mobile-track .tms-card {
    width: calc(100vw - 40px);
    min-width: 0;
    max-width: 360px;
    flex-shrink: 0;
  }

  @keyframes tms-mobile-loop {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * var(--tms-mobile-loop-distance)), 0, 0); }
  }
}

/* ==========================================================================
   TESTIMONIALS — TABLET (768px – 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .tms-card { width: 300px; }
}

/* ==========================================================================
   TESTIMONIALS — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .tms-mobile-track.is-autoplaying {
    animation: none;
    transform: none;
  }

  /* Stop GSAP tickers — handled in JS; fallback: make track scrollable */
  .tms-viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .tms-track {
    /* Do not transform */
    will-change: auto;
  }

  .tms-card:hover,
  .tms-card.is-active {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* ==========================================================================
   PAGE-SPECIFIC STYLES FOR MULTI-PAGE ANIDAM SITE
   ========================================================================== */

/* ── Standard Inner Page Hero ────────────────────────────────────────────── */
.pg-hero {
  padding: 160px 0 60px;
  background-color: var(--bg-main, #FFFFFF);
  color: var(--text-main, #070B0E);
  position: relative;
  transition: background-color 350ms ease, color 350ms ease;
}

.pg-hero--dark {
  background-color: #070B0E;
  color: #FFFFFF;
}

.pg-hero-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  max-width: 840px;
}

.pg-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 20px 0 20px;
}

.pg-hero-desc {
  font-family: var(--font-main);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  opacity: 0.75;
  margin: 0;
}

/* ── About Page Styles ──────────────────────────────────────────────────── */
.abt-story-section, .abt-values-section, .abt-stats-section {
  padding: 80px 0;
}

.abt-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.abt-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 991px) {
  .abt-story-grid { grid-template-columns: 1fr; gap: 40px; }
}

.abt-sublabel {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.abt-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 12px 0 24px;
}

.abt-story-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.75;
  margin-bottom: 16px;
}

.abt-story-media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.abt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .abt-values-grid { grid-template-columns: 1fr; }
}

.abt-value-card {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 36px 28px;
  transition: transform 350ms ease, border-color 350ms ease;
}

[data-theme="dark"] .abt-value-card {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

.abt-value-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-red);
}

.abt-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,57,30,0.1);
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.abt-value-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 12px;
}

.abt-value-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.7;
  margin: 0;
}

/* Stats Counter */
.abt-stats-section {
  background: #070B0E;
  color: #FFFFFF;
}

.abt-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

@media (max-width: 767px) {
  .abt-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.abt-stat-box .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--brand-red);
}

.abt-stat-box .stat-label {
  font-size: 0.9rem;
  letter-spacing: 1px;
  opacity: 0.7;
  text-transform: uppercase;
}

/* ── Services Page Detail Cards ─────────────────────────────────────────── */
.svc-list-section {
  padding: 40px 0 100px;
}

.svc-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.svc-detail-card {
  background: var(--bg-main, #FFFFFF);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 350ms ease, border-color 350ms ease;
}

[data-theme="dark"] .svc-detail-card {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

.svc-detail-card:hover {
  border-color: rgba(255,57,30,0.4);
  transform: translateY(-4px);
}

.svc-card-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="dark"] .svc-card-header {
  border-bottom-color: rgba(255,255,255,0.06);
}

.svc-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--brand-red);
  line-height: 1;
}

.svc-category-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.svc-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  margin: 4px 0 0;
}

.svc-card-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

@media (max-width: 850px) {
  .svc-card-grid { grid-template-columns: 1fr; gap: 24px; }
}

.svc-overview {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: 24px;
}

.svc-deliverables h4, .svc-benefits-box h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.svc-deliverables ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-deliverables li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.svc-deliverables li svg {
  width: 18px;
  height: 18px;
  color: var(--brand-red);
  flex-shrink: 0;
}

.svc-benefits-box {
  background: rgba(255,57,30,0.05);
  border: 1px solid rgba(255,57,30,0.15);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.svc-benefits-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 20px;
}

.svc-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-red) !important;
  text-decoration: none;
  transition: gap 300ms ease;
}

.svc-cta-link:hover {
  gap: 12px;
}

/* ── Projects Archive Filter Bar ────────────────────────────────────────── */
.prj-filter-section {
  padding: 20px 0 40px;
}

.prj-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.prj-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.prj-filter-btn {
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 300ms ease;
}

.prj-filter-btn:hover, .prj-filter-btn.active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #FFFFFF;
}

/* ── Insights Page ──────────────────────────────────────────────────────── */
.ins-featured-section, .ins-grid-section, .ins-newsletter-section {
  padding: 40px 0 60px;
}

.ins-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.ins-hero-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  overflow: hidden;
}

[data-theme="dark"] .ins-hero-card {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

@media (max-width: 850px) {
  .ins-hero-card { grid-template-columns: 1fr; }
}

.ins-hero-media {
  height: 380px;
}

.ins-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ins-hero-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ins-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-red);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.ins-hero-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 14px;
}

.ins-hero-content p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  margin-bottom: 20px;
}

.ins-meta {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 24px;
}

.ins-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-red) !important;
  text-decoration: none;
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .ins-grid { grid-template-columns: 1fr; }
}

.ins-card {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 350ms ease, border-color 350ms ease;
}

[data-theme="dark"] .ins-card {
  border-color: rgba(255,255,255,0.08);
  background: #12161A;
}

.ins-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-red);
}

.ins-card-media {
  height: 200px;
}

.ins-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ins-card-body {
  padding: 24px;
}

.ins-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 10px 0;
}

.ins-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.7;
}

.ins-nl-card {
  background: #070B0E;
  color: #FFFFFF;
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.ins-nl-card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.ins-nl-card p {
  opacity: 0.7;
  margin-bottom: 28px;
}

.ins-nl-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 550px) {
  .ins-nl-form { flex-direction: column; }
}

.ins-nl-input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  font-size: 14px;
}

.ins-nl-btn {
  padding: 14px 28px;
  border-radius: 100px;
  background: var(--brand-red);
  color: #FFFFFF;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

/* ── Contact Page Styles ────────────────────────────────────────────────── */
.cnt-main-section {
  padding: 40px 0 100px;
}

.cnt-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.cnt-layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

@media (max-width: 950px) {
  .cnt-layout-grid { grid-template-columns: 1fr; }
}

.cnt-form-card {
  background: var(--bg-main, #FFFFFF);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

[data-theme="dark"] .cnt-form-card {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

.cnt-form-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.cnt-form-sub {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: 32px;
}

.cnt-full-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cnt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .cnt-form-row { grid-template-columns: 1fr; }
}

.cnt-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cnt-field label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.cnt-field input, .cnt-field select, .cnt-field textarea {
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  color: inherit;
  font-family: var(--font-main);
  font-size: 14px;
}

[data-theme="dark"] .cnt-field input,
[data-theme="dark"] .cnt-field select,
[data-theme="dark"] .cnt-field textarea {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.cnt-field input:focus, .cnt-field select:focus, .cnt-field textarea:focus {
  outline: none;
  border-color: var(--brand-red);
}

.cnt-checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: 0.8;
}

.cnt-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 100px;
  background: var(--brand-red);
  color: #FFFFFF;
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 300ms ease, box-shadow 300ms ease;
  margin-top: 10px;
}

.cnt-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,57,30,0.3);
}

.cnt-success-alert {
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cnt-info-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cnt-info-box {
  background: var(--bg-main, #FFFFFF);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 30px;
}

[data-theme="dark"] .cnt-info-box {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

.cnt-info-box h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.cnt-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cnt-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cnt-info-list li svg {
  color: var(--brand-red);
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.cnt-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.5;
  text-transform: uppercase;
}

.cnt-info-list a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.cnt-info-list a:hover { color: var(--brand-red); }

.cnt-social-links {
  display: flex;
  gap: 12px;
}

.cnt-social-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,0.1);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

[data-theme="dark"] .cnt-social-badge {
  border-color: rgba(255,255,255,0.1);
}

/* ==========================================================================
   HOW WE WORK — Circular Interactive Scroll-Driven 5-Step Process Section
   ========================================================================== */

.hww-process-section {
  position: relative;
  background-color: var(--bg-main, #FFFFFF);
  color: var(--text-main, #070B0E);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transition: background-color 350ms ease, color 350ms ease;
}

[data-theme="dark"] .hww-process-section {
  background-color: #070B0E;
  color: #FFFFFF;
}

.hww-process-stage {
  position: relative;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 4vw;
}

.hww-layout-container {
  width: 100%;
  display: grid;
  grid-template-columns: 34% 66%;
  align-items: center;
  box-sizing: border-box;
}

/* ── 1. Left Dial Column (34%) ───────────────────────────────────────────── */
.hww-col-dial {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.hww-dial-wrap {
  position: absolute;
  right: 45%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(640px, 58vw, 900px);
  height: clamp(640px, 58vw, 900px);
  transform-origin: center center;
  will-change: transform;
}

.hww-dial-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hww-dial-outline {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1px;
  transition: stroke 350ms ease;
}

[data-theme="dark"] .hww-dial-outline {
  stroke: rgba(255, 255, 255, 0.09);
}

/* Fixed Anidam Orange-Red Active Indicator Dot on right focal point */
.hww-fixed-dot {
  position: absolute;
  right: calc(45% - 4px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hww-dot-inner {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-red, #FF351A);
  box-shadow: 0 0 10px rgba(255, 53, 26, 0.7);
  display: block;
}

/* Step Numbers placed along circle circumference */
.hww-dial-num {
  position: absolute;
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  color: #A0A5AA;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  opacity: 0.32;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  transition: color 300ms ease, opacity 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] .hww-dial-num {
  color: #6C757D;
}

/* Radius = 450px, Center = (450, 450). Angle step = 28 deg */
.hww-dial-num--1 {
  left: 105.5%;
  top: 50%;
}

.hww-dial-num--2 {
  left: 99%;
  top: 76.06%;
}

.hww-dial-num--3 {
  left: 81.04%;
  top: 96.02%;
}

.hww-dial-num--4 {
  left: 55.79%;
  top: 105.19%;
}

.hww-dial-num--5 {
  left: 29.21%;
  top: 101.46%;
}

.hww-dial-num.is-active {
  color: #070B0E !important;
  opacity: 1 !important;
  font-weight: 700;
  transform: translate(-50%, -50%) scale(1.18);
}

[data-theme="dark"] .hww-dial-num.is-active {
  color: #FFFFFF !important;
}

/* ── 2. Center Content Column (36%) ──────────────────────────────────────── */
.hww-col-content {
  position: relative;
  width: 100%;
  padding: 0 4vw;
  z-index: 5;
}

.hww-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  max-width: 680px;
}

.hww-badge {
  margin-bottom: 0 !important;
}

.hww-counter-badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(7, 11, 14, 0.5);
}

[data-theme="dark"] .hww-counter-badge {
  color: rgba(255, 255, 255, 0.5);
}

.hww-counter-badge span {
  color: var(--brand-red, #FF351A);
}

.hww-content-wrap {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hww-step-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 680px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

.hww-step-block.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  position: relative;
}

.hww-step-eyebrow {
  display: block;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--brand-red, #FF351A);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hww-step-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-main, #070B0E);
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

[data-theme="dark"] .hww-step-title {
  color: #FFFFFF;
}

.hww-step-desc {
  font-family: var(--font-main);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(7, 11, 14, 0.75);
  margin: 0 0 24px;
}

[data-theme="dark"] .hww-step-desc {
  color: rgba(255, 255, 255, 0.75);
}

.hww-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hww-tag-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: rgba(0, 0, 0, 0.03);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main, #070B0E);
  letter-spacing: 0.01em;
  transition: border-color 300ms ease, background 300ms ease;
}

[data-theme="dark"] .hww-tag-pill {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

/* ── 3. Right Visual Column (30%) ────────────────────────────────────────── */
.hww-col-visual {
  display: none;
}

.hww-sculpture-box {
  position: relative;
  width: clamp(260px, 24vw, 360px);
  height: clamp(260px, 24vw, 360px);
  max-width: 360px;
  max-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hww-sculpture-asset {
  width: 100%;
  height: 100%;
  display: block;
}

.hww-shadow-ambient {
  position: absolute;
  bottom: -15px;
  width: 70%;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(8px);
  pointer-events: none;
}

[data-theme="dark"] .hww-shadow-ambient {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
}

/* ── Responsive Tablet & Mobile (< 900px) ────────────────────────────────── */
@media (max-width: 900px) {
  .hww-process-section {
    overflow: hidden;
  }

  .hww-process-stage {
    height: auto;
    min-height: auto;
    padding: 64px 20px 32px;
  }

  .hww-layout-container {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }

  .hww-col-dial {
    display: none;
  }

  .hww-top-meta {
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 28px;
    max-width: none;
  }

  .hww-col-content {
    padding: 0;
  }

  .hww-step-block {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    margin-bottom: 0;
    padding: 28px 0;
    border-top: 1px solid rgba(7, 11, 14, 0.1);
    max-width: 100%;
  }

  .hww-step-block:last-child {
    border-bottom: 1px solid rgba(7, 11, 14, 0.1);
  }

  .hww-step-title {
    font-size: clamp(1.8rem, 9vw, 2.45rem);
    margin-bottom: 12px;
  }

  .hww-step-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .hww-content-wrap {
    min-height: auto;
  }

  .hww-step-tags {
    justify-content: flex-start;
  }

  .hww-sculpture-box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
}

/* Mobile keeps the same pinned circular process experience as desktop. */
@media (max-width: 900px) {
  .hww-process-stage {
    width: 100%;
    height: 100svh;
    min-height: 640px;
    padding: 32px 14px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .hww-layout-container {
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: center;
    gap: 0;
    height: 100%;
    position: relative;
    text-align: left;
    transform: none;
  }

  .hww-col-dial {
    display: flex;
    height: 430px;
  }

  .hww-dial-wrap {
    width: 430px;
    height: 430px;
    right: 48%;
  }

  .hww-fixed-dot {
    right: calc(48% - 4px);
  }

  .hww-dial-num {
    width: 38px;
    height: 30px;
    font-size: 16px;
  }

  .hww-col-content {
    width: 100%;
    min-width: 0;
    padding: 0 0 0 10px;
    position: static;
  }

  .hww-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: absolute;
    top: 0;
    left: calc(38% + 10px);
    right: 0;
    margin: 0;
  }

  .hww-badge {
    display: none !important;
  }

  .hww-badge .badge-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
  }

  .hww-badge .badge-text {
    display: block;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 1.5px;
  }

  .hww-counter-badge {
    display: none;
  }

  .hww-content-wrap {
    position: relative;
    min-height: 330px;
  }

  .hww-step-block {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    filter: blur(6px);
  }

  .hww-step-block:last-child {
    border-bottom: 0;
  }

  .hww-step-block.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: blur(0);
  }

  .hww-step-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: normal;
    margin: 0 0 18px;
  }

  .hww-step-title {
    font-size: clamp(1.75rem, 8.4vw, 2.2rem);
    line-height: 1.05;
    margin-bottom: 12px;
  }

  .hww-step-desc {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .hww-step-tags {
    justify-content: flex-start;
    gap: 6px;
  }

  .hww-tag-pill {
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hww-process-stage {
    height: auto !important;
  }
  .hww-step-block {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    margin-bottom: 40px;
  }
  .hww-col-dial {
    display: none !important;
  }
}

/* ==========================================================================
   OUR PROCESS PAGE STYLES (our-process.html)
   ========================================================================== */

.prc-timeline-section {
  padding: 40px 0 80px;
  background: var(--bg-main, #FFFFFF);
}

.prc-container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.prc-stages-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.prc-stage-card {
  background: var(--bg-main, #FFFFFF);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 350ms ease, border-color 350ms ease;
}

[data-theme="dark"] .prc-stage-card {
  background: #12161A;
  border-color: rgba(255,255,255,0.08);
}

.prc-stage-card:hover {
  border-color: var(--brand-red);
}

.prc-stage-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="dark"] .prc-stage-header {
  border-bottom-color: rgba(255,255,255,0.06);
}

.prc-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--brand-red);
}

.prc-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--brand-red);
  text-transform: uppercase;
}

.prc-stage-title-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  margin: 4px 0 0;
}

.prc-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 850px) {
  .prc-stage-grid { grid-template-columns: 1fr; }
}

.prc-col h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.prc-col p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
}

.prc-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prc-col li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.prc-col li svg {
  width: 16px;
  height: 16px;
  color: var(--brand-red);
  flex-shrink: 0;
}

.prc-cta-section {
  padding: 40px 0 100px;
}

.prc-cta-box {
  background: #070B0E;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.prc-cta-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 16px;
}

.prc-cta-box p {
  font-size: 1.05rem;
  opacity: 0.75;
  margin-bottom: 32px;
}

.prc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 100px;
  background: var(--brand-red);
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: transform 300ms ease;
}

.prc-cta-btn:hover {
  transform: translateY(-3px);
}

/* ==========================================================================
   UNIFIED EDITORIAL FOOTER — Newsletter-led, responsive Anidam treatment
   ========================================================================== */
.main-footer,
.footer-master {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,57,30,.09), transparent 28%),
    #05090a !important;
  color: #f7f7f2 !important;
  border-top: 1px solid rgba(255,255,255,.1);
}

.main-footer::before,
.footer-master::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff391e 22%, #ff391e 78%, transparent);
  opacity: .72;
}

.main-footer {
  padding: clamp(68px, 8vw, 110px) 24px 0;
}

.footer-master {
  padding: clamp(68px, 8vw, 110px) 24px 30px;
}

.main-footer .footer-container,
.footer-master .footer-main-container {
  width: min(1380px, 100%);
  margin-inline: auto;
}

.main-footer .footer-main-grid {
  grid-template-columns: minmax(260px, 1.15fr) minmax(130px, .62fr) minmax(210px, .9fr) minmax(300px, 1.25fr);
  gap: clamp(34px, 4vw, 72px);
  align-items: start;
  margin-bottom: 0;
}

.footer-master .footer-main-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.45fr) minmax(260px, 1.15fr) minmax(130px, .62fr) minmax(180px, .78fr);
  gap: clamp(30px, 3.5vw, 64px);
  align-items: start;
  margin-bottom: 0;
}

.footer-master .footer-newsletter-box--master {
  order: -2;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.footer-eyebrow {
  margin: 0 0 16px;
  color: #ff4a31;
  font: 700 10px/1 var(--font-main);
  letter-spacing: 2.4px;
}

.footer-master .newsletter-title {
  max-width: 390px;
  margin: 0 0 24px;
  color: #fff;
  font: 700 clamp(1.7rem, 2.5vw, 2.65rem)/1.03 var(--font-display);
  letter-spacing: -.04em;
}

.footer-master .newsletter-form {
  max-width: 440px;
  padding: 5px;
  gap: 6px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
}

.footer-master .newsletter-input {
  min-width: 0;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
}

.footer-master .newsletter-submit-btn {
  padding: 12px 20px;
  border-radius: 10px;
}

.footer-master .newsletter-subtext {
  margin-top: 10px;
  color: #7f888c;
}

.footer-master .footer-col-brand {
  order: -1;
}

.main-footer .footer-col-title,
.footer-master .footer-col-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: #f7f7f2 !important;
  font-size: 12px;
  letter-spacing: 1.4px;
}

.main-footer .footer-col-title::before,
.footer-master .footer-col-title::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #ff391e;
}

.main-footer .footer-links-list,
.footer-master .footer-links-list {
  gap: 12px;
}

.main-footer .footer-links-list a,
.footer-master .footer-links-list a,
.main-footer .footer-social-links a,
.footer-master .footer-contact-item {
  color: #9ba3a7;
}

.footer-master .footer-logo-link {
  margin-bottom: 18px;
}

.footer-master .footer-logo-img {
  width: 154px;
  filter: none;
}

.footer-master .footer-brand-desc {
  color: #8d969a;
  line-height: 1.7;
}

.footer-master .footer-contact-item {
  display: inline-flex;
  margin: 0;
}

.footer-master .footer-connect-inline {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-master .footer-connect-inline .footer-col-title {
  margin-bottom: 14px;
}

.footer-master .footer-connect-inline .footer-links-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px;
}

.footer-master .footer-connect-inline .footer-links-list li {
  display: block;
}

.footer-master .footer-connect-inline .footer-links-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #f7f7f2;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  line-height: 1;
}

.footer-master .footer-connect-inline .footer-links-list a::after {
  display: none;
}

.footer-master .footer-connect-inline .footer-links-list a:hover {
  color: #fff;
  background: #ff391e;
  border-color: #ff391e;
  transform: translateY(-2px);
}

.footer-social-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.footer-social-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
}

.footer-social-mark svg rect,
.footer-social-mark svg circle {
  fill: none;
}

.footer-social-mark svg .fill-shape {
  fill: currentColor;
  stroke: none;
}

.footer-master .footer-bottom-row,
.main-footer .footer-bottom-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  margin-top: clamp(60px, 7vw, 92px);
  padding: 24px 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.1);
}

.main-footer .footer-bottom-bar {
  margin-inline: 0;
}

.footer-legal-links {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.footer-legal-links a {
  color: #8b9498;
  font: 600 12px/1 var(--font-main);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-legal-links a:hover {
  color: #fff;
}

.footer-master::after,
.footer-bg-wordmark {
  color: rgba(255,255,255,.028) !important;
}

@media (max-width: 1100px) {
  .main-footer .footer-main-grid,
  .footer-master .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-master .footer-newsletter-box--master,
  .footer-master .footer-col-brand,
  .main-footer .footer-col-brand,
  .main-footer .footer-col-newsletter {
    grid-column: 1 / -1;
  }

  .footer-master .footer-newsletter-box--master {
    max-width: 620px;
  }
}

@media (max-width: 640px) {
  .main-footer,
  .footer-master {
    padding-inline: 20px;
  }

  .main-footer .footer-main-grid,
  .footer-master .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 22px;
  }

  .footer-master .footer-newsletter-box--master,
  .footer-master .footer-col-brand,
  .main-footer .footer-col-brand,
  .main-footer .footer-col-newsletter {
    grid-column: 1 / -1;
  }

  .footer-master .newsletter-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .footer-master .newsletter-form,
  .main-footer .newsletter-form {
    flex-direction: row;
  }

  .footer-master .newsletter-submit-btn,
  .main-footer .newsletter-submit-btn {
    padding-inline: 16px;
  }

  .footer-master .footer-bottom-row,
  .main-footer .footer-bottom-bar {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 18px;
    padding: 24px 0 70px;
  }

  .footer-legal-links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   PROJECTS / WORK PAGE — Premium case-study portfolio
   ========================================================================== */
.projects-page {
  background: #ffffff;
  color: #080c10;
}

.wrk-main {
  overflow: clip;
}

.wrk-shell {
  width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
}

.wrk-hero {
  position: relative;
  min-height: 900px;
  padding: 160px 0 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 24%, rgba(255,57,30,.2), transparent 31%),
    radial-gradient(circle at 91% 78%, rgba(255,57,30,.13), transparent 32%),
    linear-gradient(140deg, #05080a 0%, #0a0d10 54%, #180c09 100%);
  color: #ffffff;
}

.wrk-hero::after {
  content: "WORK";
  position: absolute;
  right: -0.05em;
  bottom: -.18em;
  color: rgba(255,255,255,.025);
  font: 900 clamp(10rem, 29vw, 33rem)/.75 var(--font-display);
  letter-spacing: -.08em;
  pointer-events: none;
}

.wrk-hero-orbit {
  position: absolute;
  width: 720px;
  height: 720px;
  right: -280px;
  top: -280px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
}

.wrk-hero-orbit::before,
.wrk-hero-orbit::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(255,57,30,.13);
}

.wrk-hero-orbit::before { inset: 90px; }
.wrk-hero-orbit::after { inset: 190px; }

.wrk-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .85fr);
  gap: clamp(54px, 7vw, 120px);
  align-items: center;
}

.wrk-eyebrow,
.wrk-section-index {
  margin: 0;
  color: #ff4a31;
  font: 700 10px/1.2 var(--font-main);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.wrk-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.wrk-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff391e;
  box-shadow: 0 0 15px rgba(255,57,30,.65);
}

.wrk-hero h1 {
  max-width: 830px;
  margin: 0;
  font: 750 clamp(4rem, 7.2vw, 7.4rem)/.88 var(--font-display);
  letter-spacing: -.07em;
}

.wrk-hero h1 em {
  color: #ff4a31;
  font-style: normal;
  font-weight: inherit;
}

.wrk-inline-gallery {
  position: relative;
  display: inline-flex;
  width: clamp(132px, 12vw, 190px);
  height: .7em;
  margin: 0 .08em;
  vertical-align: .03em;
}

.wrk-inline-gallery i {
  position: absolute;
  top: 0;
  width: 52%;
  height: 100%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 14px;
  background: #171b1e;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.wrk-inline-gallery i:nth-child(1) { left: 0; z-index: 1; transform: rotate(-4deg); }
.wrk-inline-gallery i:nth-child(2) { left: 24%; z-index: 2; transform: translateY(-5%) rotate(2deg); }
.wrk-inline-gallery i:nth-child(3) { right: 0; z-index: 3; transform: rotate(5deg); }

.wrk-inline-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wrk-hero-lead {
  max-width: 640px;
  margin: 32px 0 0;
  color: rgba(255,255,255,.66);
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.7 var(--font-main);
}

.wrk-case-link,
.wrk-impact-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 34px;
  padding: 15px 19px;
  border-radius: 999px;
  background: #ff391e;
  color: #ffffff !important;
  font: 700 13px/1 var(--font-main);
  text-decoration: none;
  transition: transform 250ms ease, background 250ms ease;
}

.wrk-case-link:hover,
.wrk-impact-link:hover {
  background: #ffffff;
  color: #080c10 !important;
  transform: translateY(-3px);
}

.wrk-hero-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  height: 52px;
  margin-top: 34px;
  padding: 0 6px 0 20px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,239,243,.92));
  color: #151821 !important;
  box-shadow: inset 0 1.5px 1.5px #fff, 0 10px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 700 13.5px/1 var(--font-main);
  letter-spacing: .2px;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2,1,.3,1), box-shadow 220ms ease;
}

.wrk-hero-link-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #151821;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: transform 220ms ease, background 220ms ease;
}

.wrk-hero-link:hover {
  color: #151821 !important;
  transform: translateY(-2px);
  box-shadow: inset 0 1.5px 1.5px #fff, 0 14px 30px rgba(0,0,0,.34);
}

.wrk-hero-link:hover .wrk-hero-link-arrow {
  background: #ff391e;
  transform: translateY(2px);
}

.wrk-hero-link:active { transform: scale(.97); }

.wrk-hero-collage {
  position: relative;
  min-height: 590px;
}

.wrk-people-film {
  position: relative;
  min-height: 610px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: #111619 url('../assets/Team%201.avif') center/cover no-repeat;
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
  isolation: isolate;
}

.wrk-people-film::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(8,12,16,.32);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.wrk-people-film::after {
  content: "▶";
  position: absolute;
  z-index: 4;
  top: 43px;
  right: 43px;
  color: #fff;
  font-size: 13px;
}

.wrk-people-film video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.wrk-people-film-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,8,10,.04) 38%, rgba(5,8,10,.82) 100%),
    linear-gradient(110deg, rgba(255,57,30,.14), transparent 45%);
  pointer-events: none;
}

.wrk-people-film-mark {
  position: absolute;
  z-index: 2;
  top: 27px;
  left: 27px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.82);
  font: 750 9px/1 var(--font-main);
  letter-spacing: 1.5px;
}

.wrk-people-film-mark span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff391e;
  box-shadow: 0 0 14px rgba(255,57,30,.75);
}

.wrk-people-film figcaption {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.82);
  font: 650 10px/1.2 var(--font-main);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wrk-collage-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: #131719;
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
}

.wrk-collage-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

.wrk-collage-card:hover img { transform: scale(1.055); }

.wrk-collage-card--main {
  width: 64%;
  height: 440px;
  left: 2%;
  top: 100px;
  z-index: 2;
  transform: rotate(-3deg);
}

.wrk-collage-card--top {
  width: 42%;
  height: 270px;
  right: 0;
  top: 8px;
  z-index: 1;
  transform: rotate(4deg);
}

.wrk-collage-card--bottom {
  width: 43%;
  height: 285px;
  right: 0;
  bottom: 4px;
  z-index: 3;
  transform: rotate(2deg);
}

.wrk-collage-seal {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 52%;
  width: 132px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff391e;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%) rotate(7deg);
  box-shadow: 0 18px 40px rgba(255,57,30,.3);
}

.wrk-collage-seal strong { font: 800 2rem/1 var(--font-display); }
.wrk-collage-seal span { margin-top: 5px; font: 650 9px/1.2 var(--font-main); letter-spacing: 1px; text-transform: uppercase; }

.wrk-hero-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 54px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.wrk-hero-stats div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 25px 26px 0 0;
}

.wrk-hero-stats strong { font: 750 clamp(1.7rem, 2.7vw, 2.7rem)/1 var(--font-display); }
.wrk-hero-stats span { color: rgba(255,255,255,.5); font: 500 12px/1.3 var(--font-main); }

.wrk-featured,
.wrk-archive {
  background: #ffffff;
  color: #080c10;
}

.wrk-featured { padding: clamp(90px, 10vw, 150px) 0 72px; }

.wrk-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 34px;
}

.wrk-section-note {
  margin: 0;
  color: #687075;
  font: 600 12px/1 var(--font-main);
}

.wrk-feature-card {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  min-height: 680px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,57,30,.18), transparent 36%),
    #080c10;
  color: #ffffff;
}

.wrk-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5.3vw, 78px);
}

.wrk-client {
  margin: 0 0 24px;
  color: #ff4a31;
  font: 800 11px/1 var(--font-main);
  letter-spacing: 2.3px;
}

.wrk-feature-copy h2 {
  margin: 0;
  font: 730 clamp(2.4rem, 4.4vw, 4.5rem)/.98 var(--font-display);
  letter-spacing: -.055em;
}

.wrk-feature-copy > p:not(.wrk-client) {
  margin: 27px 0 0;
  color: rgba(255,255,255,.64);
  font: 400 15px/1.72 var(--font-main);
}

.wrk-feature-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: auto 0 0;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.wrk-feature-results div { display: grid; gap: 9px; }
.wrk-feature-results dt { color: rgba(255,255,255,.45); font: 500 10px/1.2 var(--font-main); }
.wrk-feature-results dd { margin: 0; font: 750 1.7rem/1 var(--font-display); }
.wrk-case-link { align-self: flex-start; margin-top: 32px; }

.wrk-feature-media {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

.wrk-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,12,16,.2), transparent 30%);
}

.wrk-feature-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

.wrk-feature-card:hover .wrk-feature-media img { transform: scale(1.045); }

.wrk-feature-media figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(7,10,12,.52);
  color: rgba(255,255,255,.78);
  font: 600 10px/1 var(--font-main);
  letter-spacing: 1px;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.wrk-filter-section {
  position: sticky;
  z-index: 40;
  top: var(--header-height, 76px);
  align-self: start;
  padding: 0;
  background: transparent;
  border: 0;
}

.projects-page .prj-filter-bar {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  padding: 9px;
  overflow: visible;
  border: 1px solid rgba(8,12,16,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 34px rgba(8,12,16,.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  scrollbar-width: none;
}

.projects-page .prj-filter-bar::-webkit-scrollbar { display: none; }

.projects-page .prj-filter-btn {
  flex: 0 0 auto;
  width: 100%;
  padding: 11px 19px;
  border-radius: 12px;
  border-color: rgba(8,12,16,.12);
  background: #ffffff;
  color: #535b60;
  text-align: left;
}

.projects-page .prj-filter-btn:hover,
.projects-page .prj-filter-btn.active {
  background: #080c10;
  border-color: #080c10;
  color: #ffffff;
}

.wrk-archive {
  padding: clamp(88px, 9vw, 140px) 0 clamp(100px, 11vw, 170px);
  scroll-margin-top: 150px;
}

.wrk-archive-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

.wrk-archive-main { min-width: 0; }

.wrk-archive-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
  gap: 50px;
  align-items: end;
  margin-bottom: 62px;
}

.wrk-archive-head h2 {
  max-width: 820px;
  margin: 17px 0 0;
  font: 750 clamp(2.8rem, 5.8vw, 5.7rem)/.94 var(--font-display);
  letter-spacing: -.06em;
}

.wrk-archive-head > p {
  margin: 0 0 8px;
  color: #656d72;
  font: 400 15px/1.72 var(--font-main);
}

.wrk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.wrk-card {
  position: relative;
  grid-column: span 5;
  min-height: 620px;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #0a0d10;
  color: #ffffff !important;
  text-decoration: none;
  transform: translateY(0);
  transition: opacity 650ms ease, transform 750ms cubic-bezier(.22,1,.36,1);
}

.wrk-card--wide { grid-column: span 7; }

.wrk-grid.is-enhanced .wrk-card:not(.is-visible) {
  opacity: 0;
  transform: translateY(46px) scale(.985);
}

.wrk-card-media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.wrk-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,.02) 20%, rgba(5,8,10,.2) 52%, rgba(5,8,10,.94) 100%);
}

.wrk-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.15s cubic-bezier(.22,1,.36,1), filter 500ms ease;
}

.wrk-card-content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: clamp(24px, 3vw, 38px);
}

.wrk-card-content > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.wrk-card-content > div span {
  color: #ff4a31;
  font: 800 10px/1 var(--font-main);
}

.wrk-card-content > div p {
  margin: 0;
  color: rgba(255,255,255,.6);
  font: 650 10px/1 var(--font-main);
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

.wrk-card h3 {
  max-width: 620px;
  margin: 0;
  font: 730 clamp(2rem, 3.7vw, 3.8rem)/.96 var(--font-display);
  letter-spacing: -.05em;
}

.wrk-card-summary {
  max-width: 540px;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  color: rgba(255,255,255,.68);
  font: 400 13px/1.6 var(--font-main);
  transform: translateY(12px);
  transition: max-height 450ms ease, margin 450ms ease, opacity 350ms ease, transform 450ms cubic-bezier(.22,1,.36,1);
}

.wrk-card-arrow {
  position: absolute;
  right: clamp(24px, 3vw, 38px);
  bottom: clamp(24px, 3vw, 38px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  font-size: 20px;
  transition: background 250ms ease, transform 350ms cubic-bezier(.22,1,.36,1);
}

.wrk-card:hover { transform: translateY(-7px); }
.wrk-card:hover .wrk-card-media img { transform: scale(1.065); filter: saturate(1.08); }
.wrk-card:hover .wrk-card-summary { max-height: 90px; margin-top: 16px; opacity: 1; transform: translateY(0); }
.wrk-card:hover .wrk-card-arrow { background: #ff391e; border-color: #ff391e; transform: rotate(8deg); }

.wrk-impact {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(100px, 11vw, 160px);
  background: #070b0d;
  color: #ffffff;
}

.wrk-impact-marquee {
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.1);
}

.wrk-impact-marquee > div {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 0;
  animation: wrkMarquee 30s linear infinite;
}

.wrk-impact-marquee span { font: 800 clamp(1.1rem, 2vw, 1.8rem)/1 var(--font-display); letter-spacing: -.02em; }
.wrk-impact-marquee i { color: #ff391e; font-style: normal; }

@keyframes wrkMarquee { to { transform: translateX(-50%); } }

.wrk-impact-inner {
  padding-top: clamp(90px, 10vw, 150px);
  text-align: center;
}

.wrk-impact-inner .wrk-section-index { margin-bottom: 26px; }

.wrk-impact h2 {
  margin: 0;
  font: 750 clamp(3.2rem, 7.2vw, 7.5rem)/.9 var(--font-display);
  letter-spacing: -.07em;
}

.wrk-impact h2 em {
  color: #ff4a31;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.wrk-impact-link { margin-top: 42px; }

@media (max-width: 1100px) {
  .wrk-hero-grid { grid-template-columns: 1fr; }
  .wrk-hero-copy { max-width: 900px; }
  .wrk-hero-collage { width: min(760px, 100%); margin-inline: auto; }
  .wrk-people-film { width: min(760px, 100%); min-height: 520px; margin-inline: auto; }
  .wrk-feature-card { grid-template-columns: 1fr; }
  .wrk-feature-media { min-height: 560px; order: -1; }
  .wrk-feature-copy { min-height: 620px; }
  .wrk-card,
  .wrk-card--wide { grid-column: span 6; }
}

@media (max-width: 767px) {
  .wrk-shell { width: calc(100% - 32px); }
  .wrk-hero { min-height: 0; padding: 130px 0 44px; }
  .wrk-hero h1 { font-size: clamp(3.25rem, 15.2vw, 5rem); }
  .wrk-inline-gallery { width: 112px; height: .68em; }
  .wrk-inline-gallery i { border-width: 1px; border-radius: 9px; }
  .wrk-hero-lead { margin-top: 24px; font-size: 15px; }
  .wrk-hero-collage { min-height: 430px; margin-top: 16px; }
  .wrk-people-film { min-height: 430px; margin-top: 20px; border-radius: 20px; }
  .wrk-people-film figcaption { right: 18px; bottom: 18px; left: 18px; }
  .wrk-collage-card { border-radius: 15px; }
  .wrk-collage-card--main { width: 66%; height: 305px; top: 70px; }
  .wrk-collage-card--top { width: 43%; height: 180px; }
  .wrk-collage-card--bottom { width: 45%; height: 190px; }
  .wrk-collage-seal { width: 92px; height: 92px; }
  .wrk-collage-seal strong { font-size: 1.35rem; }
  .wrk-collage-seal span { font-size: 7px; }
  .wrk-hero-stats { grid-template-columns: 1fr; margin-top: 28px; }
  .wrk-hero-stats div { justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .wrk-section-head { align-items: flex-start; flex-direction: column; }
  .wrk-featured { padding: 72px 0 48px; }
  .wrk-feature-card { border-radius: 19px; }
  .wrk-feature-media { min-height: 390px; }
  .wrk-feature-copy { min-height: 0; padding: 32px 24px; }
  .wrk-feature-copy h2 { font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .wrk-feature-results { margin-top: 42px; grid-template-columns: 1fr 1fr; }
  .wrk-feature-results div:last-child { grid-column: 1 / -1; }
  .wrk-archive-layout { grid-template-columns: 1fr; gap: 34px; }
  .wrk-filter-section { position: static; padding: 0; }
  .projects-page .prj-filter-bar {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }
  .projects-page .prj-filter-btn { width: auto; text-align: center; }
  .wrk-archive {
    padding: 72px 0 92px;
    scroll-margin-top: 132px;
  }
  .wrk-archive-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .wrk-archive-head h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .wrk-grid { gap: 18px; }
  .wrk-card,
  .wrk-card--wide { grid-column: 1 / -1; min-height: 510px; border-radius: 17px; }
  .wrk-card-summary { display: none; }
  .wrk-card-arrow { width: 42px; height: 42px; }
  .wrk-card h3 { max-width: calc(100% - 56px); font-size: clamp(2rem, 9vw, 2.8rem); }
  .wrk-impact h2 { font-size: clamp(3rem, 14vw, 4.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .wrk-impact-marquee > div { animation: none; }
  .wrk-card,
  .wrk-grid.is-enhanced .wrk-card:not(.is-visible) { opacity: 1; transform: none; transition: none; }
  .wrk-card-media img,
  .wrk-collage-card img,
  .wrk-feature-media img { transition: none; }
}

/* Projects hero — editorial white canvas with a scroll-morphing people film. */
.wrk-hero.wrk-hero--morph {
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #fff;
  color: #080c10;
}

.wrk-hero--morph::after,
.wrk-hero--morph .wrk-hero-orbit {
  display: none;
}

.wrk-hero-story {
  position: relative;
  height: 205svh;
  min-height: 1500px;
  background:
    radial-gradient(circle at 89% 14%, rgba(255, 57, 30, .035), transparent 24%),
    #fff;
}

.wrk-hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(150px, 17vh, 205px);
}

.wrk-hero-heading {
  position: relative;
  z-index: 2;
  text-align: center;
  transform-origin: center top;
  will-change: transform, opacity;
}

.wrk-hero--morph .wrk-eyebrow {
  display: none;
}

.wrk-hero--morph h1 {
  max-width: 1480px;
  margin-inline: auto;
  color: #080c10;
  font: 500 clamp(4.4rem, 8.3vw, 8.9rem)/.91 var(--font-main);
  letter-spacing: -.068em;
}

.wrk-hero--morph h1 em {
  color: inherit;
}

.wrk-title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .13em;
  white-space: nowrap;
}

.wrk-reference-strip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: clamp(150px, 17vw, 265px);
  height: .72em;
  margin-inline: .04em;
  overflow: visible;
}

.wrk-reference-strip i {
  position: absolute;
  top: 0;
  display: block;
  width: 42%;
  height: 100%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 16px;
  background: #e5e9eb;
  box-shadow: 0 9px 22px rgba(27, 35, 41, .13);
}

.wrk-reference-strip i:nth-child(1) { left: 0; z-index: 1; transform: rotate(-2.5deg); }
.wrk-reference-strip i:nth-child(2) { left: 29%; z-index: 2; transform: translateY(-4%) rotate(1deg); }
.wrk-reference-strip i:nth-child(3) { right: 0; z-index: 3; transform: rotate(2.5deg); }

.wrk-reference-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wrk-reference-strip::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff391e;
}

.wrk-into-image {
  display: inline-flex;
  flex: 0 0 auto;
  width: clamp(118px, 12vw, 182px);
  height: .72em;
  margin-inline: .03em;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 16px;
  background: #ff391e;
  box-shadow: 0 9px 22px rgba(27, 35, 41, .13);
  transform: rotate(1.2deg);
}

.wrk-into-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}

.wrk-arrow-mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: clamp(105px, 11vw, 170px);
  height: .67em;
  margin-inline: .02em;
}

.wrk-arrow-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #ff6848;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrk-video-inline-slot {
  position: relative;
  display: inline-block;
  width: clamp(150px, 19vw, 300px);
  height: .62em;
  margin: 0 .08em;
  vertical-align: -.02em;
  border-radius: 16px;
}

.wrk-hero-support {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: clamp(28px, 4vh, 44px);
  will-change: transform, opacity;
}

.wrk-hero--morph .wrk-hero-lead {
  max-width: 620px;
  margin: 0;
  color: rgba(8, 12, 16, .62);
  text-align: left;
}

.wrk-hero--morph .wrk-hero-link {
  flex: 0 0 auto;
  margin-top: 0;
  border-color: rgba(8, 12, 16, .12);
  background: #080c10;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(8, 12, 16, .16);
}

.wrk-hero--morph .wrk-hero-link-arrow {
  background: #ff391e;
}

.wrk-hero--morph .wrk-hero-link:hover {
  color: #fff !important;
}

.wrk-film-stage {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(30px, 4.5vh, 58px);
  height: min(56svh, 650px);
  padding: 0;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.wrk-people-film.wrk-people-film--morph {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  border-color: rgba(8, 12, 16, .12);
  border-radius: 28px;
  background-color: #dfe3e6;
  box-shadow: 0 26px 70px rgba(20, 27, 34, .18);
  transform-origin: left top;
  will-change: transform, width, height, border-radius;
  pointer-events: auto;
}

.wrk-people-film.wrk-people-film--morph::before,
.wrk-people-film.wrk-people-film--morph::after {
  display: none;
}

.wrk-hero--morph.is-morph-ready .wrk-people-film--morph {
  visibility: visible;
  opacity: 1;
}

.wrk-people-film--morph .wrk-people-film-mark,
.wrk-people-film--morph figcaption {
  opacity: 0;
  will-change: opacity, transform;
}

.wrk-hero--morph .wrk-hero-stats {
  margin-top: 0;
  padding: 34px 0 52px;
  border-top-color: rgba(8, 12, 16, .11);
  background: #fff;
}

.wrk-hero--morph .wrk-hero-stats div {
  color: #080c10;
}

.wrk-hero--morph .wrk-hero-stats span {
  color: rgba(8, 12, 16, .52);
}

/* Performance panel — directly follows the Projects hero film. */
.wrk-performance {
  position: relative;
  z-index: 6;
  padding: clamp(76px, 8vw, 126px) 0 clamp(88px, 9vw, 142px);
  background: #fff;
  color: #080c10;
}

.wrk-performance-head {
  width: min(980px, 100%);
  margin: 0 auto clamp(48px, 5vw, 74px);
  text-align: center;
}

.wrk-performance-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
  padding: 11px 18px;
  border: 1px solid rgba(8, 12, 16, .09);
  border-radius: 999px;
  background: #f7f7f5;
  color: rgba(8, 12, 16, .7);
  font: 650 12px/1 var(--font-main);
  letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(8, 12, 16, .04);
}

.wrk-performance-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff391e;
  box-shadow: 0 0 0 5px rgba(255, 57, 30, .1);
}

.wrk-performance-head h2 {
  margin: 0;
  font: 700 clamp(3rem, 6vw, 6.2rem)/.95 var(--font-display);
  letter-spacing: -.065em;
}

.wrk-performance-head h2 em {
  color: #ff391e;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.wrk-performance-head > p:not(.wrk-performance-kicker) {
  max-width: 790px;
  margin: 25px auto 0;
  color: rgba(8, 12, 16, .63);
  font: 450 clamp(1rem, 1.35vw, 1.25rem)/1.65 var(--font-main);
}

.wrk-performance-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.wrk-performance-actions a {
  min-width: 154px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid rgba(8, 12, 16, .1);
  border-radius: 16px;
  font: 650 14px/1 var(--font-main);
  transition: transform 280ms cubic-bezier(.22,1,.36,1), background 220ms ease, color 220ms ease;
}

.wrk-performance-primary {
  background: #080c10;
  color: #fff;
  border-color: #080c10 !important;
}

.wrk-performance-secondary {
  background: #f7f7f5;
  color: #080c10;
}

.wrk-performance-actions a:hover { transform: translateY(-3px); }
.wrk-performance-primary:hover { background: #ff391e; border-color: #ff391e !important; }
.wrk-performance-secondary:hover { background: #fff; }

.wrk-performance-board {
  position: relative;
  min-height: 510px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(34px, 5vw, 82px);
  border-radius: clamp(24px, 2.5vw, 40px);
  background:
    radial-gradient(circle at 11% 14%, rgba(255, 93, 65, .95), transparent 34%),
    radial-gradient(circle at 76% 34%, rgba(255, 216, 202, .62), transparent 40%),
    radial-gradient(circle at 68% 112%, rgba(255, 57, 30, .72), transparent 38%),
    linear-gradient(135deg, #100808 0%, #35110f 45%, #090d10 100%);
  box-shadow: 0 28px 80px rgba(26, 10, 8, .18);
  isolation: isolate;
}

.wrk-performance-board::before,
.wrk-performance-board::after,
.wrk-performance-glow {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.wrk-performance-board::before {
  width: 40%;
  aspect-ratio: 1;
  left: -6%;
  bottom: -34%;
  background: rgba(255, 255, 255, .22);
}

.wrk-performance-board::after {
  width: 36%;
  aspect-ratio: 1;
  right: -8%;
  top: -25%;
  background: rgba(255, 57, 30, .48);
}

.wrk-performance-glow {
  width: 46%;
  aspect-ratio: 1;
  left: 36%;
  top: -22%;
  background: rgba(255, 235, 225, .26);
}

.wrk-performance-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.wrk-performance-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 50px rgba(0,0,0,.12);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  transition: transform 350ms cubic-bezier(.22,1,.36,1), background 250ms ease;
}

.wrk-performance-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .18);
}

.wrk-performance-card strong {
  display: block;
  font: 650 clamp(3.25rem, 5vw, 5.8rem)/.92 var(--font-display);
  letter-spacing: -.065em;
}

.wrk-performance-card h3 {
  margin: 18px 0 0;
  font: 650 clamp(1.05rem, 1.5vw, 1.35rem)/1.15 var(--font-display);
  letter-spacing: -.02em;
}

.wrk-performance-card p {
  max-width: 290px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .72);
  font: 430 13px/1.55 var(--font-main);
}

@media (max-width: 900px) {
  .wrk-performance-board { min-height: 0; }
  .wrk-performance-grid { grid-template-columns: 1fr; }
  .wrk-performance-card { min-height: 210px; }
}

@media (max-width: 767px) {
  .wrk-performance { padding: 104px 0 84px; }
  .wrk-performance-head { margin-bottom: 38px; }
  .wrk-performance-kicker { margin-bottom: 19px; padding: 10px 14px; font-size: 10px; }
  .wrk-performance-head h2 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .wrk-performance-head > p:not(.wrk-performance-kicker) { margin-top: 19px; font-size: 14px; line-height: 1.55; }
  .wrk-performance-actions { margin-top: 25px; }
  .wrk-performance-actions a { min-width: 0; min-height: 50px; flex: 1 1 145px; border-radius: 14px; }
  .wrk-performance-board { padding: 18px; border-radius: 24px; }
  .wrk-performance-grid { gap: 12px; }
  .wrk-performance-card { min-height: 190px; padding: 28px 20px; border-radius: 19px; }
  .wrk-performance-card strong { font-size: clamp(3rem, 16vw, 4.5rem); }
}

.wrk-hero--morph.is-morph-static .wrk-hero-story {
  height: auto;
  min-height: 0;
}

.wrk-hero--morph.is-morph-static .wrk-hero-sticky {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 52px;
}

.wrk-hero--morph.is-morph-static .wrk-film-stage {
  position: relative;
  left: auto;
  bottom: auto;
  height: min(58vw, 620px);
  margin-top: 48px;
  transform: none;
}

.wrk-hero--morph.is-morph-static .wrk-people-film--morph {
  position: relative;
}

.wrk-hero--morph.is-morph-static .wrk-people-film-mark,
.wrk-hero--morph.is-morph-static .wrk-people-film--morph figcaption {
  opacity: 1;
}

@media (max-width: 900px) {
  .wrk-hero-story {
    height: 185svh;
    min-height: 1260px;
  }

  .wrk-hero-sticky {
    min-height: 640px;
    padding-top: 120px;
  }

  .wrk-hero--morph h1 {
    font-size: clamp(3.35rem, 9.2vw, 5.8rem);
  }

  .wrk-hero-support {
    flex-direction: column;
    gap: 20px;
  }

  .wrk-hero--morph .wrk-hero-lead {
    max-width: 560px;
    text-align: center;
  }

  .wrk-film-stage {
    height: min(50svh, 560px);
  }
}

@media (max-width: 767px) {
  .wrk-hero-story {
    height: 175svh;
    min-height: 1080px;
  }

  .wrk-hero-sticky {
    min-height: 600px;
    padding-top: 152px;
  }

  .wrk-hero--morph h1 {
    font-size: clamp(2.1rem, 9vw, 2.7rem);
    line-height: .98;
    letter-spacing: -.06em;
  }

  .wrk-title-line {
    gap: .07em;
  }

  .wrk-reference-strip {
    width: 86px;
    height: .76em;
    border-width: 2px;
    border-radius: 9px;
  }

  .wrk-arrow-mark {
    width: 72px;
    height: .7em;
  }

  .wrk-arrow-mark svg {
    stroke-width: 6;
  }

  .wrk-into-image {
    width: 72px;
    height: .76em;
    border-width: 2px;
    border-radius: 9px;
  }

  .wrk-video-inline-slot {
    width: 88px;
    height: .7em;
    margin-inline: .04em;
    border-radius: 8px;
  }

  .wrk-hero--morph .wrk-eyebrow {
    margin-bottom: 24px;
    font-size: 8px;
    letter-spacing: 1.7px;
  }

  .wrk-hero-support {
    margin-top: 25px;
  }

  .wrk-hero--morph .wrk-hero-lead {
    padding-inline: 8px;
    font-size: 14px;
    line-height: 1.55;
  }

  .wrk-film-stage {
    bottom: 24px;
    height: min(43svh, 430px);
  }

  .wrk-people-film.wrk-people-film--morph {
    border-radius: 18px;
  }

  .wrk-hero--morph .wrk-hero-stats {
    margin-top: 0;
    padding-top: 16px;
  }

  .wrk-hero--morph .wrk-hero-stats div {
    border-bottom-color: rgba(8, 12, 16, .1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrk-hero-story {
    height: auto;
    min-height: 0;
  }

  .wrk-hero-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 48px;
  }

  .wrk-film-stage {
    position: relative;
    left: auto;
    bottom: auto;
    height: min(58vw, 620px);
    margin-top: 48px;
    transform: none;
  }

  .wrk-people-film.wrk-people-film--morph {
    position: relative;
    visibility: visible;
    opacity: 1;
  }
}

/* ==========================================================================
   PREMIUM INNER-PAGE SYSTEM — Services-level finish across the full site
   ========================================================================== */

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) {
  background: #f7f6f3;
  color: #080c10;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) main {
  overflow: clip;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(760px, 84vh);
  padding: 190px 0 clamp(84px, 9vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,57,30,.14), transparent 25%),
    radial-gradient(circle at 68% 76%, rgba(244,211,167,.3), transparent 31%),
    linear-gradient(135deg, #fbfaf7 0%, #f5f3ef 60%, #ece9e3 100%);
  border-bottom: 1px solid rgba(8,12,16,.09);
  color: #080c10;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(420px, 48vw, 760px);
  aspect-ratio: 1;
  right: -12%;
  top: -24%;
  border: 1px solid rgba(8,12,16,.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(255,255,255,.18),
    0 0 0 91px rgba(8,12,16,.045),
    0 0 0 190px rgba(255,255,255,.12),
    0 0 0 191px rgba(8,12,16,.035);
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero::after {
  position: absolute;
  z-index: -1;
  right: -1.5vw;
  bottom: -0.18em;
  color: rgba(8,12,16,.035);
  font: 800 clamp(8rem, 20vw, 22rem)/.75 var(--font-display);
  letter-spacing: -.09em;
  white-space: nowrap;
  pointer-events: none;
}

.services-page .pg-hero::after { content: "SERVICES"; }
.about-page .pg-hero::after { content: "ABOUT"; }
.process-page .pg-hero::after { content: "PROCESS"; }
.insights-page .pg-hero::after { content: "IDEAS"; }
.contact-page .pg-hero::after { content: "HELLO"; }

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-container {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero .section-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(8,12,16,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff391e;
  box-shadow: 0 0 12px rgba(255,57,30,.6);
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero .badge-text {
  color: #4f555b;
  font: 800 10px/1 var(--font-main);
  letter-spacing: .2em;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-title {
  max-width: 1120px;
  margin: 28px 0 28px;
  font: 750 clamp(3.7rem, 7.2vw, 7.6rem)/.91 var(--font-display);
  letter-spacing: -.068em;
  text-wrap: balance;
}

:where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-desc {
  max-width: 760px;
  margin: 0;
  color: #5e646a;
  font: 450 clamp(1rem, 1.45vw, 1.2rem)/1.72 var(--font-main);
  opacity: 1;
}

.pg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 860px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(8,12,16,.12);
}

.pg-hero-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  min-width: 200px;
  padding: 5px 28px 5px 0;
  color: #70767b;
  font: 600 12px/1.35 var(--font-main);
}

.pg-hero-meta strong {
  color: #ff391e;
  font: 800 15px/1 var(--font-display);
  letter-spacing: -.02em;
}

/* Shared premium surface language */
:where(.svc-detail-card, .prc-stage-card, .abt-value-card, .ins-hero-card, .ins-card, .cnt-form-card, .cnt-info-box) {
  border-color: rgba(8,12,16,.1);
  box-shadow: 0 24px 70px rgba(18,22,26,.07);
}

.premium-reveal {
  opacity: 1;
  transform: none;
}

.premium-reveal.is-enhanced:not(.is-visible) {
  opacity: 0;
  transform: translateY(34px);
}

.premium-reveal.is-enhanced {
  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Services */
.services-page .svc-list-section {
  padding: clamp(76px, 8vw, 120px) 0 clamp(110px, 11vw, 170px);
  background: #f7f6f3;
}

.services-page .svc-container { gap: 28px; }

.services-page .svc-detail-card {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 24px 70px rgba(16,21,24,.065);
}

.services-page .svc-detail-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#ff391e, #ff816f);
  opacity: 0;
  transition: opacity 300ms ease;
}

.services-page .svc-detail-card:hover::before { opacity: 1; }
.services-page .svc-detail-card:hover { transform: translateY(-5px); box-shadow: 0 32px 90px rgba(16,21,24,.1); }
.services-page .svc-num { font-size: clamp(2.4rem, 4vw, 4.2rem); letter-spacing: -.06em; }
.services-page .svc-title { font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1.04; }
.services-page .svc-card-grid { grid-template-columns: minmax(0,1.65fr) minmax(280px,.8fr); gap: clamp(34px, 6vw, 84px); }
.services-page .svc-overview { max-width: 760px; font-size: clamp(1rem, 1.3vw, 1.14rem); }
.services-page .svc-benefits-box { border-radius: 20px; padding: 28px; background: linear-gradient(145deg, rgba(255,57,30,.075), rgba(255,255,255,.6)); }

/* About */
.about-page .abt-story-section { padding: clamp(100px, 11vw, 170px) 0; background: #fff; }
.about-page .abt-story-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(52px, 8vw, 120px); }
.about-page .abt-heading { max-width: 720px; font-size: clamp(2.6rem, 5.1vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
.about-page .abt-story-text p { max-width: 650px; color: #5e646a; opacity: 1; font-size: clamp(1rem, 1.3vw, 1.14rem); }
.about-page .abt-story-media { position: relative; min-height: 620px; border-radius: 28px; box-shadow: 0 35px 90px rgba(14,18,20,.16); }
.about-page .abt-img { position: absolute; inset: 0; }
.abt-media-caption {
  position: absolute;
  inset: auto 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px;
  background: rgba(6,10,12,.66);
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.abt-media-caption span { color: rgba(255,255,255,.62); font: 600 10px/1.3 var(--font-main); text-transform: uppercase; letter-spacing: .13em; }
.abt-media-caption strong { font: 700 12px/1.35 var(--font-main); text-align: right; }

.about-page .abt-values-section { padding: clamp(100px, 10vw, 150px) 0; background: #f1efeb; }
.about-page .abt-section-header { max-width: 850px; }
.about-page .abt-values-grid { gap: 20px; margin-top: 58px; }
.about-page .abt-value-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 32px;
  border-radius: 26px;
  background: rgba(255,255,255,.82);
}
.about-page .abt-value-card:nth-child(2) { background: #080c10; color: #fff; }
.about-page .abt-value-card:nth-child(2) p { color: rgba(255,255,255,.66); }
.about-page .abt-value-card h3 { margin-top: auto; font-size: clamp(1.6rem, 2.5vw, 2.35rem); letter-spacing: -.04em; }
.about-page .abt-value-card p { color: #666d72; opacity: 1; }
.about-page .abt-value-icon { width: 56px; height: 56px; border-radius: 17px; }
.about-page .abt-stats-section {
  padding: clamp(84px, 9vw, 130px) 0;
  background: radial-gradient(circle at 14% 0%, rgba(255,57,30,.2), transparent 30%), #070b0e;
}
.about-page .abt-stat-box { padding: 24px 14px; border-left: 1px solid rgba(255,255,255,.12); }
.about-page .abt-stat-box .stat-number { color: #fff; letter-spacing: -.06em; }
.about-page .abt-stat-box .stat-label { color: rgba(255,255,255,.56); opacity: 1; }
.about-page .wca-section { padding-top: clamp(100px, 11vw, 160px); }

/* Process */
.process-page .prc-timeline-section { padding: 0 0 clamp(100px, 11vw, 160px); background: #f7f6f3; }
.prc-overview-rail {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin: 0 0 clamp(70px, 8vw, 110px);
  border: 1px solid rgba(8,12,16,.1);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 50px rgba(13,18,20,.06);
  overflow: hidden;
}
.prc-overview-rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 22px;
  border-right: 1px solid rgba(8,12,16,.08);
  color: #52595e;
  font: 700 13px/1 var(--font-main);
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}
.prc-overview-rail a:last-child { border-right: 0; }
.prc-overview-rail a span { color: #ff391e; font: 800 11px/1 var(--font-display); }
.prc-overview-rail a:hover { background: #080c10; color: #fff; }

.process-page .prc-stages-list { gap: 28px; }
.process-page .prc-stage-card {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 28px;
  background: rgba(255,255,255,.88);
}
.process-page .prc-stage-card::after {
  content: attr(data-stage);
  position: absolute;
  right: -18px;
  bottom: -42px;
  color: rgba(8,12,16,.028);
  font: 800 13rem/.8 var(--font-display);
  letter-spacing: -.1em;
  pointer-events: none;
}
.process-page .prc-stage-card:nth-child(even) { background: #0a0e11; color: #fff; }
.process-page .prc-stage-card:nth-child(even) .prc-col p,
.process-page .prc-stage-card:nth-child(even) .prc-col li { color: rgba(255,255,255,.68); opacity: 1; }
.process-page .prc-stage-card:nth-child(even) .prc-stage-header { border-color: rgba(255,255,255,.1); }
.process-page .prc-stage-card:hover { transform: translateY(-4px); box-shadow: 0 35px 85px rgba(13,18,20,.12); }
.process-page .prc-num { font-size: clamp(2.6rem, 4vw, 4.2rem); letter-spacing: -.06em; }
.process-page .prc-stage-title-wrap h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1; letter-spacing: -.05em; }
.process-page .prc-stage-grid { gap: clamp(28px, 5vw, 70px); }
.process-page .prc-cta-section { padding: 0 0 clamp(100px, 11vw, 160px); background: #f7f6f3; }
.process-page .prc-cta-box { max-width: 1280px; padding: clamp(58px, 8vw, 110px) 32px; border-radius: 30px; background: radial-gradient(circle at 82% 18%, rgba(255,57,30,.26), transparent 28%), #070b0e; }
.process-page .prc-cta-box h2 { max-width: 850px; margin-inline: auto; font-size: clamp(2.7rem, 5.2vw, 5.4rem); line-height: .96; letter-spacing: -.06em; }

/* Insights */
.insights-page .ins-topic-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(1280px, calc(100% - 48px));
  margin: -34px auto 0;
  padding: 12px;
  border: 1px solid rgba(8,12,16,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 22px 60px rgba(16,20,23,.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-x: auto;
}
.ins-topic-bar span,
.ins-topic-bar a { flex: 0 0 auto; }
.ins-topic-bar span { padding: 0 14px; color: #858b90; font: 700 10px/1 var(--font-main); letter-spacing: .12em; text-transform: uppercase; }
.ins-topic-bar a { padding: 12px 17px; border-radius: 999px; color: #30363a; font: 700 12px/1 var(--font-main); text-decoration: none; transition: background 220ms ease, color 220ms ease; }
.ins-topic-bar a:hover { background: #080c10; color: #fff; }
.insights-page .ins-featured-section { padding: clamp(90px, 10vw, 150px) 0 50px; background: #f7f6f3; }
.insights-page .ins-hero-card { grid-template-columns: 1.15fr .85fr; min-height: 620px; border-radius: 30px; background: #fff; }
.insights-page .ins-hero-media { height: auto; min-height: 620px; overflow: hidden; }
.insights-page .ins-hero-img { transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.insights-page .ins-hero-card:hover .ins-hero-img { transform: scale(1.04); }
.insights-page .ins-hero-content { padding: clamp(34px, 5vw, 70px); }
.insights-page .ins-hero-content h2 { font-size: clamp(2.3rem, 4vw, 4.3rem); line-height: .98; letter-spacing: -.055em; }
.insights-page .ins-grid-section { padding: 40px 0 clamp(100px, 10vw, 150px); background: #f7f6f3; }
.insights-page .ins-grid { gap: 20px; }
.insights-page .ins-card { border-radius: 24px; background: #fff; }
.insights-page .ins-card-media { height: 300px; overflow: hidden; }
.insights-page .ins-card-img { transition: transform 650ms cubic-bezier(.2,.8,.2,1); }
.insights-page .ins-card:hover .ins-card-img { transform: scale(1.055); }
.insights-page .ins-card-body { padding: 28px; }
.insights-page .ins-card-title { font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -.035em; }
.insights-page .fp-section--insights { background: #fff !important; }
.insights-page .ins-newsletter-section { padding: clamp(90px, 9vw, 130px) 0; background: #f7f6f3; }
.insights-page .ins-nl-card { max-width: 980px; padding: clamp(54px, 8vw, 96px) 32px; border-radius: 30px; background: radial-gradient(circle at 20% 0%, rgba(255,57,30,.22), transparent 34%), #070b0e; }
.insights-page .ins-nl-card h3 { font-size: clamp(2.4rem, 4.5vw, 4.6rem); line-height: .98; letter-spacing: -.055em; }

/* Contact */
.contact-page .cnt-main-section { padding: clamp(90px, 10vw, 150px) 0 clamp(110px, 11vw, 170px); background: #f7f6f3; }
.contact-page .cnt-layout-grid { grid-template-columns: minmax(0,1.55fr) minmax(320px,.75fr); gap: 22px; align-items: start; }
.contact-page .cnt-form-card { padding: clamp(30px, 4.5vw, 58px); border-radius: 30px; background: #fff; }
.contact-page .cnt-form-card h2 { font-size: clamp(2.5rem, 4.2vw, 4.4rem); line-height: .96; letter-spacing: -.055em; }
.contact-page .cnt-form-sub { max-width: 620px; margin-bottom: 44px; color: #687075; opacity: 1; }
.contact-page .cnt-full-form { gap: 24px; }
.contact-page .cnt-field { gap: 9px; }
.contact-page .cnt-field label { color: #4f565b; font-size: 12px; font-weight: 750; }
.contact-page .cnt-field input,
.contact-page .cnt-field select,
.contact-page .cnt-field textarea {
  min-height: 56px;
  padding: 15px 17px;
  border-color: #d9dcde;
  border-radius: 14px;
  background: #f7f7f5;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.contact-page .cnt-field textarea { min-height: 150px; resize: vertical; }
.contact-page .cnt-field input:focus,
.contact-page .cnt-field select:focus,
.contact-page .cnt-field textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255,57,30,.1); }
.contact-page .cnt-checkbox-field input { accent-color: #ff391e; }
.contact-page .cnt-submit-btn { min-height: 58px; justify-content: space-between; padding: 0 10px 0 24px; }
.contact-page .cnt-submit-btn svg { display: grid; place-items: center; width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.contact-page .cnt-info-card { position: sticky; top: 110px; gap: 18px; }
.contact-page .cnt-info-box { padding: 30px; border-radius: 24px; background: #fff; }
.contact-page .cnt-info-box:first-child { background: radial-gradient(circle at 90% 0%, rgba(255,57,30,.25), transparent 32%), #080c10; color: #fff; }
.contact-page .cnt-info-box:first-child .cnt-info-list li { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.11); }
.contact-page .cnt-info-box:first-child .cnt-label { color: rgba(255,255,255,.45); opacity: 1; }
.contact-page .cnt-social-links { flex-wrap: wrap; }
.contact-page .cnt-social-badge { min-height: 44px; border-color: rgba(8,12,16,.12); background: #f6f5f2; }

/* Responsive inner-page system */
@media (max-width: 991px) {
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero { min-height: 680px; }
  .about-page .abt-story-grid { grid-template-columns: 1fr; }
  .about-page .abt-story-media { min-height: 560px; }
  .services-page .svc-card-grid { grid-template-columns: 1fr; }
  .insights-page .ins-hero-card { grid-template-columns: 1fr; }
  .insights-page .ins-hero-media { min-height: 480px; }
  .contact-page .cnt-layout-grid { grid-template-columns: 1fr; }
  .contact-page .cnt-info-card { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero {
    min-height: 0;
    padding: 126px 0 72px;
  }
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-container { width: calc(100% - 32px); }
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-title { margin: 24px 0 22px; font-size: clamp(3.15rem, 14vw, 4.8rem); }
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero-desc { font-size: 15px; line-height: 1.65; }
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero::before { right: -70%; top: -20%; }
  :where(.services-page, .about-page, .process-page, .insights-page, .contact-page) .pg-hero::after { font-size: 8.4rem; bottom: -.1em; }
  .pg-hero-meta { display: grid; grid-template-columns: 1fr; margin-top: 32px; padding-top: 14px; }
  .pg-hero-meta span { justify-content: space-between; width: 100%; min-width: 0; padding: 11px 0; border-bottom: 1px solid rgba(8,12,16,.08); }

  .services-page .svc-container,
  .about-page .abt-container,
  .process-page .prc-container,
  .insights-page .ins-container,
  .contact-page .cnt-container { width: calc(100% - 32px); }

  .services-page .svc-detail-card,
  .process-page .prc-stage-card { padding: 26px 22px; border-radius: 22px; }
  .services-page .svc-card-header,
  .process-page .prc-stage-header { gap: 15px; }
  .services-page .svc-title,
  .process-page .prc-stage-title-wrap h2 { font-size: 1.75rem; }
  .services-page .svc-num,
  .process-page .prc-num { font-size: 2rem; }

  .about-page .abt-story-section,
  .about-page .abt-values-section { padding: 78px 0; }
  .about-page .abt-heading { font-size: clamp(2.55rem, 12vw, 3.7rem); }
  .about-page .abt-story-media { min-height: 430px; border-radius: 20px; }
  .abt-media-caption { inset: auto 12px 12px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .abt-media-caption strong { text-align: left; }
  .about-page .abt-values-grid { margin-top: 36px; }
  .about-page .abt-value-card { min-height: 300px; padding: 26px; border-radius: 21px; }
  .about-page .abt-stats-grid { gap: 0; }
  .about-page .abt-stat-box { border-left: 0; border-bottom: 1px solid rgba(255,255,255,.11); }

  .prc-overview-rail { grid-template-columns: repeat(4, minmax(110px,1fr)); margin-bottom: 60px; overflow-x: auto; }
  .prc-overview-rail a { min-height: 62px; padding: 0 15px; }
  .process-page .prc-stage-grid { gap: 28px; }
  .process-page .prc-cta-box { border-radius: 22px; }

  .insights-page .ins-topic-bar { width: calc(100% - 24px); margin-top: -24px; border-radius: 15px; }
  .insights-page .ins-featured-section { padding-top: 72px; }
  .insights-page .ins-hero-card { min-height: 0; border-radius: 21px; }
  .insights-page .ins-hero-media { min-height: 330px; }
  .insights-page .ins-hero-content { padding: 28px 24px; }
  .insights-page .ins-hero-content h2 { font-size: 2.4rem; }
  .insights-page .ins-card-media { height: 240px; }
  .insights-page .ins-nl-card { border-radius: 22px; }

  .contact-page .cnt-main-section { padding: 72px 0 100px; }
  .contact-page .cnt-form-card { padding: 27px 20px; border-radius: 22px; }
  .contact-page .cnt-form-card h2 { font-size: 2.8rem; }
  .contact-page .cnt-info-card { display: flex; }
  .contact-page .cnt-info-box { padding: 25px 22px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-reveal,
  .premium-reveal.is-enhanced:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HERO SELECTED WORK — EXPAND INTERACTION
   ========================================================================== */
.hero-work-card {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: pan-y;
}

/* The hero content grid spans the full viewport. Let pointer input pass through
   its empty right column to the moving gallery, while keeping the copy/CTAs live. */
.hero-content-container,
.hero-grid {
  pointer-events: none;
}

.hero-text-col {
  pointer-events: auto;
}

.hero-work-card > img,
.mobile-portfolio-card > img {
  border-radius: 10px !important;
  user-select: none;
  -webkit-user-drag: none;
}

/* Keep gallery imagery still and fully framed—no orange hover or zoom crop. */
.hero-work-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.hero-work-card:hover > img,
.mobile-portfolio-card:hover > img {
  transform: none;
}

.hero-work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 10, 12, 0.01), rgba(4, 10, 12, 0.13));
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.hero-expand-trigger {
  position: absolute;
  top: var(--expand-y, 50%);
  left: var(--expand-x, 50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 106px;
  height: 106px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 30, 29, 0.46);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
  color: #fff;
  font: 600 13px/1 var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  will-change: top, left, opacity, transform;
  touch-action: manipulation;
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  transition: opacity 340ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), background 300ms ease;
}

.hero-expand-trigger span:last-child {
  font-size: 19px;
  font-weight: 400;
  margin-top: -1px;
}

.hero-work-card:hover::after,
.hero-work-card:focus-within::after {
  opacity: 1;
}

.hero-work-card:hover .hero-expand-trigger,
.hero-expand-trigger:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.hero-expand-trigger:hover {
  background: rgba(25, 30, 29, 0.54);
  transform: translate(-50%, -50%) scale(1);
}

.hero-slider-col.is-manual-control {
  cursor: grab;
}

.hero-slider-col.is-manual-control .hero-expand-trigger {
  cursor: grab;
}

.hero-slider-col.is-dragging,
.hero-slider-col.is-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.hero-expand-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

.hero-gallery-viewer__close:focus-visible {
  outline: 2px solid rgba(10, 14, 15, 0.88);
  outline-offset: 4px;
}

.hero-gallery-expanded {
  overflow: hidden;
}

.hero-gallery-expanded .hero-image-col .col-track {
  animation-play-state: paused !important;
}

.hero-gallery-viewer[hidden] {
  display: none;
}

.hero-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: rgba(250, 249, 247, 0.9);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(28px) saturate(115%);
  -webkit-backdrop-filter: blur(28px) saturate(115%);
  transition: opacity 340ms ease, visibility 340ms ease;
}

.hero-gallery-viewer.is-open {
  opacity: 1;
  visibility: visible;
}

.hero-gallery-viewer__ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 67, 42, 0.13), transparent 29%),
    radial-gradient(circle at 86% 82%, rgba(196, 176, 160, 0.2), transparent 30%);
  filter: blur(70px);
}

.hero-gallery-viewer__shell {
  position: relative;
  z-index: 1;
  width: min(1760px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(88px, 8vw, 132px) clamp(14px, 2vw, 34px) clamp(112px, 10vw, 170px);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 380ms ease 60ms, transform 560ms cubic-bezier(.18,.82,.2,1) 30ms;
}

.hero-gallery-viewer.is-open .hero-gallery-viewer__shell {
  opacity: 1;
  transform: translateY(0);
}

.hero-gallery-viewer__header {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
  align-items: end;
  gap: clamp(44px, 7vw, 120px);
  padding: 0 clamp(4px, 1vw, 18px) clamp(40px, 5vw, 78px);
}

.hero-gallery-viewer__summary {
  max-width: 510px;
  margin-left: auto;
  padding-left: clamp(18px, 3vw, 42px);
  border-left: 1px solid rgba(10, 14, 15, 0.14);
}

.hero-gallery-viewer__summary h3 {
  margin: 16px 0 12px;
  color: #0b0f10;
  font-size: clamp(1.35rem, 2.15vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.hero-gallery-viewer__summary p {
  max-width: 48ch;
  margin: 0;
  color: rgba(10, 14, 15, 0.63);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.65;
}

.hero-gallery-viewer__subtitle {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(10, 14, 15, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: rgba(10, 14, 15, 0.72);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-gallery-viewer__eyebrow {
  margin: 0 0 14px;
  color: #ff5138;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.hero-gallery-viewer__title {
  max-width: 790px;
  margin: 0;
  color: #0b0f10;
  font-size: clamp(3rem, 5.45vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: -0.062em;
}

.hero-gallery-viewer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(7px, 0.8vw, 14px);
  width: 100%;
  align-items: stretch;
}

.hero-gallery-viewer__tile {
  position: relative;
  align-self: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(10, 14, 15, 0.08);
  border-radius: clamp(8px, 0.8vw, 14px);
  background: rgba(255, 255, 255, 0.74);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 480ms ease calc(100ms + var(--tile-order) * 24ms),
              transform 620ms cubic-bezier(.18,.82,.2,1) calc(80ms + var(--tile-order) * 24ms);
}

.hero-gallery-viewer.is-open .hero-gallery-viewer__tile {
  opacity: 1;
  transform: translateY(0);
}

.hero-gallery-viewer__tile--wide { grid-column: span 6; aspect-ratio: 16 / 9; }
.hero-gallery-viewer__tile--large { grid-column: span 8; aspect-ratio: 3 / 2; }
.hero-gallery-viewer__tile--square { grid-column: span 4; aspect-ratio: 1 / 1; }
.hero-gallery-viewer__tile--tall { grid-column: span 3; aspect-ratio: 4 / 5; }

.hero-gallery-viewer__tile > img,
.hero-gallery-viewer__tile > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e7e5e1;
}

.hero-gallery-viewer__storybar {
  position: sticky;
  bottom: 18px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(300px, 1.25fr) auto;
  align-items: center;
  gap: 32px;
  width: calc(100% - clamp(18px, 2vw, 34px));
  margin: clamp(22px, 3vw, 46px) auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(10, 14, 15, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 60px rgba(30, 24, 19, 0.12);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
}

.hero-gallery-viewer__identity {
  display: grid;
  gap: 5px;
}

.hero-gallery-viewer__identity strong {
  color: #0b0f10;
  font-size: clamp(17px, 1.4vw, 23px);
  letter-spacing: -0.02em;
}

.hero-gallery-viewer__identity span,
.hero-gallery-viewer__storybar > p,
.hero-gallery-viewer__scroll-cue {
  color: rgba(10, 14, 15, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.hero-gallery-viewer__storybar > p {
  max-width: 60ch;
  margin: 0;
}

.hero-gallery-viewer__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.hero-gallery-viewer__scroll-cue span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff3b22;
  color: #fff;
  font-size: 16px;
}

.hero-gallery-viewer__close {
  position: fixed;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 38px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid rgba(10, 14, 15, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #0b0f10;
  font: 600 12px/1 var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 220ms ease, transform 220ms ease;
}

.hero-gallery-viewer__close span:last-child {
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.hero-gallery-viewer__close:hover {
  background: #ff351a;
  color: #fff;
  transform: translateY(-2px);
}

@media (hover: none), (pointer: coarse) {
  .hero-expand-trigger {
    width: 78px;
    height: 78px;
    gap: 4px;
    font-size: 10px;
    background: rgba(25, 30, 29, 0.52);
  }

  .hero-expand-trigger span:last-child { font-size: 15px; }
}

@media (max-width: 767px) {
  .hero-gallery-viewer__shell {
    padding: 80px 9px 100px;
  }

  .hero-gallery-viewer__header {
    display: block;
    padding: 0 7px 26px;
  }

  .hero-gallery-viewer__summary {
    max-width: none;
    margin: 25px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(10, 14, 15, 0.12);
    border-left: 0;
  }

  .hero-gallery-viewer__summary p {
    max-width: 36ch;
    margin: 0;
  }

  .hero-gallery-viewer__title {
    max-width: 9ch;
    font-size: clamp(2.55rem, 13.5vw, 4.2rem);
  }

  .hero-gallery-viewer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .hero-gallery-viewer__tile--wide,
  .hero-gallery-viewer__tile--large { grid-column: span 2; }
  .hero-gallery-viewer__tile--square,
  .hero-gallery-viewer__tile--tall { grid-column: span 1; }

  .hero-gallery-viewer__tile {
    border-radius: 8px;
  }

  .hero-gallery-viewer__storybar {
    bottom: 8px;
    grid-template-columns: 1fr auto;
    gap: 14px;
    width: calc(100% - 10px);
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 14px;
  }

  .hero-gallery-viewer__storybar > p,
  .hero-gallery-viewer__scroll-cue {
    display: none;
  }

  .hero-gallery-viewer__close span:first-child {
    display: none;
  }

  .hero-gallery-viewer__close {
    width: 46px;
    min-height: 46px;
    padding: 0;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-expand-trigger,
  .hero-gallery-viewer,
  .hero-gallery-viewer__shell,
  .hero-gallery-viewer__tile {
    transition: none;
  }
}

/* ==========================================================================
   PROJECTS — SELECTED WORK EDITORIAL SHOWCASE
   ========================================================================== */
.projects-page .wrk-archive {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 9vw, 150px) 0 clamp(120px, 12vw, 190px);
  background:
    radial-gradient(circle at 92% 6%, rgba(255, 57, 30, 0.13), transparent 23%),
    radial-gradient(circle at 4% 84%, rgba(115, 73, 50, 0.13), transparent 25%),
    #090c0e;
  color: #f7f5f1;
}

.projects-page .wrk-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.projects-page .wrk-archive .wrk-shell {
  position: relative;
  z-index: 1;
}

.projects-page .wrk-archive-layout {
  grid-template-columns: 176px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 68px);
}

.projects-page .wrk-filter-section {
  top: calc(var(--header-height, 76px) + 18px);
}

.projects-page .wrk-filter-section .prj-filter-bar {
  padding: 8px;
  border-color: rgba(255,255,255,.12);
  background: rgba(20, 23, 24, 0.76);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.projects-page .wrk-filter-section .prj-filter-btn {
  border-color: transparent;
  background: transparent;
  color: rgba(255,255,255,.58);
}

.projects-page .wrk-filter-section .prj-filter-btn:hover {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.projects-page .wrk-filter-section .prj-filter-btn.active {
  border-color: #ff3b21;
  background: #ff3b21;
  color: #fff;
}

.projects-page .wrk-archive-head {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  margin-bottom: clamp(48px, 6vw, 82px);
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.projects-page .wrk-archive-head .wrk-section-index {
  color: #ff4a31;
}

.projects-page .wrk-archive-head h2 {
  max-width: 950px;
  color: #f7f5f1;
  font-size: clamp(3.25rem, 6vw, 6.35rem);
}

.projects-page .wrk-archive-head > p {
  color: rgba(255,255,255,.56);
}

.projects-page .wrk-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 54px);
}

.projects-page .wrk-card,
.projects-page .wrk-card--wide {
  position: relative;
  grid-column: 1 / -1;
  min-height: clamp(690px, 62vw, 930px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(24px, 2.2vw, 38px);
  background:
    radial-gradient(circle at 85% 88%, rgba(255,57,30,.22), transparent 31%),
    linear-gradient(145deg, #15191a 0%, #080b0d 72%);
  box-shadow: 0 36px 90px rgba(0,0,0,.26);
  isolation: isolate;
}

.projects-page .wrk-card:nth-child(2) {
  background: radial-gradient(circle at 18% 94%, rgba(255,91,53,.26), transparent 34%), #15110f;
}

.projects-page .wrk-card:nth-child(3) {
  background: radial-gradient(circle at 83% 90%, rgba(66,124,125,.25), transparent 34%), #0b1213;
}

.projects-page .wrk-card:nth-child(4) {
  background: radial-gradient(circle at 20% 92%, rgba(255,57,30,.23), transparent 34%), #130f11;
}

.projects-page .wrk-card:nth-child(5) {
  background: radial-gradient(circle at 84% 88%, rgba(175,119,51,.24), transparent 34%), #12100c;
}

.projects-page .wrk-card:nth-child(6) {
  background: radial-gradient(circle at 18% 92%, rgba(255,57,30,.25), transparent 34%), #0b0f11;
}

.projects-page .wrk-card::before {
  content: attr(data-display);
  position: absolute;
  z-index: 0;
  right: -.025em;
  bottom: -.2em;
  left: -.035em;
  overflow: hidden;
  color: rgba(255,255,255,.07);
  font: 800 clamp(7rem, 17vw, 18rem)/.78 var(--font-display);
  letter-spacing: -.085em;
  white-space: nowrap;
  pointer-events: none;
}

.projects-page .wrk-card-media {
  z-index: 1;
  inset: clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px) clamp(190px, 16vw, 225px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: clamp(19px, 1.8vw, 30px);
  background: #f4f6f7;
  box-shadow: 0 24px 60px rgba(0,0,0,.23);
}

.projects-page .wrk-card-media::after {
  background: linear-gradient(180deg, transparent 72%, rgba(5,8,10,.09));
}

.projects-page .wrk-card-media img {
  object-position: center;
  transform: scale(1.002);
}

.projects-page .wrk-card-content {
  z-index: 3;
  inset: auto 0 0;
  min-height: clamp(170px, 15vw, 210px);
  display: grid;
  grid-template-columns: minmax(280px, 1.12fr) minmax(260px, .82fr) 54px;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 12px clamp(28px, 4vw, 74px);
  padding: clamp(26px, 3vw, 44px);
}

.projects-page .wrk-card-content > div {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.projects-page .wrk-card-content > div span,
.projects-page .wrk-card-content > div p,
.projects-page .wrk-card-content > div::after {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font: 700 9px/1 var(--font-main);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.projects-page .wrk-card-content > div span {
  border-color: rgba(255,74,49,.46);
  background: rgba(255,74,49,.15);
  color: #ff715c;
}

.projects-page .wrk-card-content > div::after {
  content: attr(data-location);
}

.projects-page .wrk-card h3 {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  color: #f7f5f1;
  font-size: clamp(2.15rem, 3.5vw, 4rem);
}

.projects-page .wrk-card h3 em {
  color: #ff4a31;
  font-style: normal;
  font-weight: inherit;
}

.projects-page .wrk-card-summary {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 460px;
  max-height: none;
  margin: 0;
  overflow: visible;
  opacity: 1;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  transform: none;
}

.projects-page .wrk-card-arrow {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.projects-page .wrk-card:hover {
  transform: translateY(-5px);
}

.projects-page .wrk-card:hover .wrk-card-media img {
  transform: scale(1.045);
  filter: saturate(1.06);
}

.projects-page .wrk-card:hover .wrk-card-summary {
  max-height: none;
  margin: 0;
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  .projects-page .wrk-archive-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .projects-page .wrk-filter-section {
    position: static;
    min-width: 0;
  }

  .projects-page .wrk-filter-section .prj-filter-bar {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .projects-page .wrk-archive-main,
  .projects-page .wrk-grid,
  .projects-page .wrk-card,
  .projects-page .wrk-card--wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .projects-page .wrk-filter-section .prj-filter-btn {
    width: auto;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .projects-page .wrk-archive {
    padding: 76px 0 104px;
  }

  .projects-page .wrk-archive-head {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 42px;
  }

  .projects-page .wrk-archive-head h2 {
    font-size: clamp(2.75rem, 13vw, 4.2rem);
    overflow-wrap: anywhere;
  }

  .projects-page .wrk-grid {
    gap: 22px;
  }

  .projects-page .wrk-card,
  .projects-page .wrk-card--wide {
    min-height: 610px;
    border-radius: 23px;
  }

  .projects-page .wrk-card::before {
    bottom: -.08em;
    font-size: 29vw;
  }

  .projects-page .wrk-card-media {
    inset: 12px 12px 198px;
    border-radius: 18px;
  }

  .projects-page .wrk-card-content {
    min-height: 190px;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: auto auto;
    gap: 13px 14px;
    padding: 22px;
  }

  .projects-page .wrk-card h3 {
    grid-column: 1;
    font-size: clamp(2rem, 9.5vw, 3rem);
  }

  .projects-page .wrk-card-content > div {
    grid-column: 1 / -1;
  }

  .projects-page .wrk-card-summary {
    display: none;
  }

  .projects-page .wrk-card-arrow {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }
}

/* Projects archive — white two-column gallery with top category navigation. */
.projects-page .wrk-archive {
  padding: clamp(90px, 8vw, 132px) 0 clamp(110px, 10vw, 160px);
  background: #ffffff;
  color: #0a0d10;
}

.projects-page .wrk-archive::before {
  background-image:
    linear-gradient(rgba(8, 12, 16, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 12, 16, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.projects-page .wrk-archive-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.projects-page .wrk-filter-section {
  position: static;
  width: 100%;
  margin: 0 0 clamp(48px, 5vw, 72px);
}

.projects-page .wrk-filter-section .prj-filter-bar {
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(8, 12, 16, 0.1);
  border-radius: 999px;
  background: rgba(247, 247, 245, 0.94);
  box-shadow: none;
  scrollbar-width: none;
}

.projects-page .wrk-filter-section .prj-filter-bar::-webkit-scrollbar {
  display: none;
}

.projects-page .wrk-filter-section .prj-filter-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  color: #565d61;
  text-align: center;
}

.projects-page .wrk-filter-section .prj-filter-btn:hover {
  border-color: rgba(8, 12, 16, 0.08);
  background: #ffffff;
  color: #0a0d10;
}

.projects-page .wrk-filter-section .prj-filter-btn.active {
  border-color: #ff3b21;
  background: #ff3b21;
  color: #ffffff;
}

.projects-page .wrk-archive-head {
  margin-bottom: clamp(44px, 5vw, 72px);
  border-top-color: rgba(8, 12, 16, 0.12);
}

.projects-page .wrk-archive-head h2 {
  color: #0a0d10;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
}

.projects-page .wrk-archive-head > p {
  color: #62696d;
}

.projects-page .wrk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

.projects-page .wrk-card,
.projects-page .wrk-card--wide {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: clamp(590px, 50vw, 720px);
  border-radius: clamp(22px, 2vw, 30px);
  box-shadow: none;
}

.projects-page .wrk-card::before {
  bottom: -0.07em;
  font-size: clamp(5.2rem, 10.2vw, 9.5rem);
}

.projects-page .wrk-card-media {
  inset: clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px) 188px;
  border-radius: clamp(17px, 1.6vw, 24px);
}

.projects-page .wrk-card-content {
  min-height: 180px;
  grid-template-columns: minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  gap: 13px 16px;
  padding: clamp(22px, 2.1vw, 32px);
}

.projects-page .wrk-card h3 {
  grid-column: 1;
  grid-row: 1;
  max-width: 12ch;
  font-size: clamp(2rem, 3.1vw, 3.25rem);
}

.projects-page .wrk-card-content > div {
  grid-column: 1 / -1;
  grid-row: 2;
}

.projects-page .wrk-card-summary {
  display: none;
}

.projects-page .wrk-card-arrow {
  grid-column: 2;
  grid-row: 1;
  width: 48px;
  height: 48px;
}

@media (max-width: 900px) {
  .projects-page .wrk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .projects-page .wrk-card,
  .projects-page .wrk-card--wide {
    min-height: clamp(590px, 105vw, 760px);
  }
}

@media (max-width: 767px) {
  .projects-page .wrk-archive {
    padding: 72px 0 100px;
  }

  .projects-page .wrk-filter-section {
    margin-bottom: 38px;
  }

  .projects-page .wrk-filter-section .prj-filter-bar {
    width: 100%;
    border-radius: 18px;
  }

  .projects-page .wrk-filter-section .prj-filter-btn {
    min-height: 40px;
    padding: 0 17px;
  }

  .projects-page .wrk-archive-head {
    margin-bottom: 38px;
  }

  .projects-page .wrk-card,
  .projects-page .wrk-card--wide {
    min-height: 610px;
  }

  .projects-page .wrk-card-media {
    inset: 12px 12px 198px;
  }

  .projects-page .wrk-card-content {
    min-height: 190px;
    padding: 22px;
  }
}

/* Projects archive cards — soft transparent white glass. */
.projects-page .wrk-grid > .wrk-card {
  border: 1px solid rgba(10, 14, 16, 0.1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(242, 245, 245, 0.54));
  box-shadow:
    0 18px 46px rgba(12, 16, 18, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
}

.projects-page .wrk-grid > .wrk-card::before {
  color: rgba(10, 14, 16, 0.055);
}

.projects-page .wrk-card-media {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 20px 42px rgba(10, 14, 16, 0.1),
    0 0 0 1px rgba(10, 14, 16, 0.05);
}

.projects-page .wrk-card h3 {
  color: #0a0d10;
}

.projects-page .wrk-card-content > div span,
.projects-page .wrk-card-content > div p,
.projects-page .wrk-card-content > div::after {
  border-color: rgba(10, 14, 16, 0.1);
  background: rgba(255, 255, 255, 0.62);
  color: #4d5559;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.projects-page .wrk-card-content > div span {
  border-color: rgba(255, 74, 49, 0.3);
  background: rgba(255, 74, 49, 0.1);
  color: #e93d26;
}

.projects-page .wrk-card-arrow {
  border-color: rgba(10, 14, 16, 0.12);
  background: rgba(255, 255, 255, 0.68);
  color: #0a0d10;
  box-shadow: 0 10px 26px rgba(10, 14, 16, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.projects-page .wrk-card:hover {
  border-color: rgba(10, 14, 16, 0.13);
  box-shadow:
    0 24px 58px rgba(12, 16, 18, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Projects archive cards — simplified modern content layout. */
.projects-page .wrk-grid > .wrk-card {
  min-height: clamp(620px, 50vw, 740px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 245, 0.5));
  backdrop-filter: blur(32px) saturate(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(1.08);
}

.projects-page .wrk-grid > .wrk-card::before {
  content: none;
  display: none;
}

.projects-page .wrk-card-media {
  inset: clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px) 218px;
}

.projects-page .wrk-card-content {
  min-height: 210px;
  grid-template-columns: minmax(0, 1fr) 46px;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: start;
  gap: 6px 18px;
  padding: clamp(24px, 2.3vw, 34px);
}

.projects-page .wrk-card h3 {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  margin: 0;
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.projects-page .wrk-card-summary {
  grid-column: 1;
  grid-row: 2;
  display: block;
  max-width: 38ch;
  max-height: none;
  margin: 5px 0 0;
  overflow: visible;
  opacity: 1;
  color: #5e6569;
  font: 400 13.5px/1.5 var(--font-main);
  transform: none;
}

.projects-page .wrk-card-content > div {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 12px;
}

.projects-page .wrk-card-content > div span,
.projects-page .wrk-card-content > div p,
.projects-page .wrk-card-content > div::after {
  min-height: 25px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.36);
  font-size: 8px;
}

.projects-page .wrk-card-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 44px;
  height: 44px;
}

.projects-page .wrk-card:hover .wrk-card-summary {
  max-height: none;
  margin-top: 5px;
  opacity: 1;
  transform: none;
}

@media (max-width: 767px) {
  .projects-page .wrk-grid > .wrk-card {
    min-height: 625px;
  }

  .projects-page .wrk-card-media {
    inset: 12px 12px 224px;
  }

  .projects-page .wrk-card-content {
    min-height: 216px;
    padding: 22px;
  }

  .projects-page .wrk-card h3 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
}

/* Projects header — retain the original full-width layout with a white liquid-glass material. */
.projects-page .main-navbar-wrapper,
.projects-page .main-navbar-wrapper.at-top {
  padding: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 0;
  border-bottom: 1px solid rgba(10, 14, 16, 0.08);
  box-shadow: 0 8px 30px rgba(20, 22, 24, 0.075);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.projects-page .main-navbar-wrapper .main-navbar,
.projects-page .main-navbar-wrapper.at-top .main-navbar {
  max-width: 1720px;
  margin: 0 auto;
  padding: 16px 24px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* After scrolling, return to the compact floating glass navigation. */
.projects-page .main-navbar-wrapper.scrolled {
  padding: 16px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.projects-page .main-navbar-wrapper.scrolled .main-navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 14px 8px 20px;
  border: 1px solid rgba(10, 14, 16, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 16px 42px rgba(24, 20, 18, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.projects-page .main-navbar-wrapper .nav-item,
.projects-page .main-navbar-wrapper .dropdown-trigger,
.projects-page .main-navbar-wrapper.at-top .nav-item,
.projects-page .main-navbar-wrapper.at-top .dropdown-trigger {
  color: rgba(10, 14, 16, 0.68);
}

.projects-page .main-navbar-wrapper .nav-item:hover,
.projects-page .main-navbar-wrapper .nav-item.active,
.projects-page .main-navbar-wrapper .dropdown-trigger:hover {
  color: #0a0d10;
}

.projects-page .main-navbar-wrapper .brand-header-logo-white {
  display: none !important;
}

.projects-page .main-navbar-wrapper .brand-header-logo-dark {
  display: block !important;
}

.projects-page .hamburger-btn,
.projects-page .hamburger-btn svg,
.projects-page .hamburger-btn i {
  color: #0a0d10 !important;
  stroke: #0a0d10 !important;
}

/* Project cards — Home gallery-inspired Expand control. */
.projects-page .wrk-card-content {
  grid-template-columns: minmax(0, 1fr);
}

.wrk-card-expand {
  position: absolute;
  top: var(--expand-y, 50%);
  left: var(--expand-x, 50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100px;
  height: 100px;
  border: 0;
  border-radius: 50%;
  background: rgba(25, 30, 29, 0.44);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font: 600 12px/1 var(--font-body, 'Inter', sans-serif);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  will-change: top, left, opacity, transform;
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  transition:
    opacity 320ms ease,
    transform 500ms cubic-bezier(.2, .8, .2, 1),
    background 280ms ease;
}

.wrk-card-expand span:last-child {
  margin-top: -1px;
  font-size: 19px;
  font-weight: 400;
}

.projects-page .wrk-card-media::after {
  z-index: 2;
  opacity: 0;
  background: rgba(8, 12, 14, 0.08);
  transition: opacity 320ms ease;
}

.projects-page .wrk-card:hover .wrk-card-media::after,
.projects-page .wrk-card:focus-visible .wrk-card-media::after {
  opacity: 1;
}

.projects-page .wrk-card-media:hover .wrk-card-expand,
.projects-page .wrk-card:focus-visible .wrk-card-expand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .wrk-card-expand {
    width: 76px;
    height: 76px;
    gap: 4px;
    background: rgba(25, 30, 29, 0.5);
    font-size: 10px;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }

  .wrk-card-expand span:last-child {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .projects-page .main-navbar-wrapper,
  .projects-page .main-navbar-wrapper.at-top {
    padding: 0;
  }

  .projects-page .main-navbar-wrapper .main-navbar,
  .projects-page .main-navbar-wrapper.at-top .main-navbar {
    padding: 12px 18px;
  }

  .projects-page .main-navbar-wrapper.scrolled {
    padding: 10px 14px;
  }

  .projects-page .main-navbar-wrapper.scrolled .main-navbar {
    padding: 7px 10px 7px 14px;
  }
}

/* Home mobile navigation — dark icon on the white liquid-glass header. */
@media (max-width: 1024px) {
  .home-page .main-navbar-wrapper.scrolled .hamburger-btn,
  .home-page .main-navbar-wrapper.scrolled .hamburger-btn svg,
  .home-page .main-navbar-wrapper.scrolled .hamburger-btn i {
    color: #0a0d10 !important;
    stroke: #0a0d10 !important;
  }

  .home-page .main-navbar-wrapper.at-top .hamburger-btn,
  .home-page .main-navbar-wrapper.at-top .hamburger-btn svg,
  .home-page .main-navbar-wrapper.at-top .hamburger-btn i {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* Projects 01 — Featured collaboration / trusted brands. */
.projects-page .wrk-trusted {
  position: relative;
  padding: clamp(100px, 11vw, 168px) 0 clamp(92px, 10vw, 148px);
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 73, 49, 0.055), transparent 31%),
    radial-gradient(circle at 92% 88%, rgba(211, 226, 219, 0.42), transparent 30%),
    #f7f8f3;
  color: #0a1713;
}

.projects-page .wrk-trusted::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 23, 19, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 23, 19, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.projects-page .wrk-trusted-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.projects-page .wrk-trusted-index {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 34px;
}

.projects-page .wrk-trusted-index::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3f28;
  box-shadow: 0 0 14px rgba(255, 63, 40, 0.38);
}

.projects-page .wrk-trusted h2 {
  max-width: 820px;
  margin: 0 auto;
  font: 540 clamp(2.7rem, 5.2vw, 5.55rem)/1.03 var(--font-display);
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.projects-page .wrk-trusted h2 em {
  color: #ff3f28;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.055em;
}

.projects-page .wrk-trusted-intro {
  max-width: 720px;
  margin: 30px auto 0;
  color: rgba(10, 23, 19, 0.61);
  font: 430 clamp(0.98rem, 1.25vw, 1.15rem)/1.7 var(--font-main);
  text-wrap: balance;
}

.projects-page .wrk-trusted-brands {
  margin-top: clamp(74px, 8vw, 122px);
  padding-top: 28px;
}

.projects-page .wrk-trusted-brands > p {
  margin: 0 0 42px;
  color: rgba(10, 23, 19, 0.56);
  font: 700 10px/1.2 var(--font-main);
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.projects-page .wrk-trusted-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: clamp(20px, 2.6vw, 46px);
}

.projects-page .wrk-trusted-logo {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 62px;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}

.projects-page .wrk-trusted-logo:hover {
  opacity: 0.95;
  filter: grayscale(0);
  transform: translateY(-3px);
}

.projects-page .wrk-trusted-logo img {
  width: 100%;
  max-width: 116px;
  max-height: 48px;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px) {
  .projects-page .wrk-trusted-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 32px;
  }
}

@media (max-width: 600px) {
  .projects-page .wrk-trusted {
    padding: 82px 0 78px;
  }

  .projects-page .wrk-trusted::before {
    background-size: 48px 48px;
  }

  .projects-page .wrk-trusted-index {
    margin-bottom: 25px;
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .projects-page .wrk-trusted h2 {
    max-width: 24rem;
    font-size: clamp(2.25rem, 11vw, 3.15rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
  }

  .projects-page .wrk-trusted-intro {
    margin-top: 22px;
    font-size: 0.95rem;
    line-height: 1.62;
  }

  .projects-page .wrk-trusted-brands {
    margin-top: 62px;
    padding-top: 24px;
  }

  .projects-page .wrk-trusted-brands > p {
    max-width: 18rem;
    margin: 0 auto 32px;
    font-size: 8px;
    letter-spacing: 1.8px;
  }

  .projects-page .wrk-trusted-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
  }

  .projects-page .wrk-trusted-logo {
    height: 54px;
    opacity: 0.63;
  }

  .projects-page .wrk-trusted-logo img {
    max-width: 110px;
    max-height: 43px;
  }
}

/* Projects — studio proof section replacing the former KPI panel. */
.projects-page .wrk-studio-stats {
  position: relative;
  padding: clamp(100px, 11vw, 164px) 0 clamp(106px, 12vw, 176px);
  background: #ffffff;
  color: #080d0f;
}

.projects-page .wrk-studio-stats-layout {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr);
  gap: clamp(54px, 8vw, 150px);
}

.projects-page .wrk-studio-stats-label {
  margin: 8px 0 0;
  color: rgba(8, 13, 15, 0.56);
  font: 750 10px/1.2 var(--font-main);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.projects-page .wrk-studio-stats-content > h2 {
  max-width: 920px;
  margin: 0;
  font: 570 clamp(2rem, 3.4vw, 3.75rem)/1.08 var(--font-display);
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.projects-page .wrk-studio-stats-content {
  width: 100%;
  min-width: 0;
}

.projects-page .wrk-studio-stats-content > h2 em {
  color: #ff3f28;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-style: italic;
}

.projects-page .wrk-studio-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(72px, 8vw, 116px);
}

.projects-page .wrk-studio-metric {
  position: relative;
  padding: clamp(30px, 3.2vw, 48px) clamp(22px, 3.5vw, 54px);
}

.projects-page .wrk-studio-metric:first-child {
  padding-left: 0;
}

.projects-page .wrk-studio-metric strong {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  color: #080d0f;
  font: 720 clamp(3.25rem, 5.5vw, 6.2rem)/0.88 var(--font-display);
  letter-spacing: -0.07em;
}

.projects-page .wrk-studio-metric strong small {
  margin-bottom: 0.08em;
  font-size: 0.31em;
  letter-spacing: -0.02em;
}

.projects-page .wrk-studio-metric p {
  margin: 17px 0 0;
  color: rgba(8, 13, 15, 0.58);
  font: 730 10px/1.3 var(--font-main);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Keep the collaboration area bright and make the logos flow continuously. */
.projects-page .wrk-trusted {
  background: #ffffff;
}

.projects-page .wrk-trusted::before {
  display: none;
}

.projects-page .wrk-trusted-logo-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.projects-page .wrk-trusted-logo-track {
  display: flex;
  width: max-content;
  animation: wrkTrustedLogoFlow 34s linear infinite;
  will-change: transform;
}

.projects-page .wrk-trusted-logo-viewport:hover .wrk-trusted-logo-track {
  animation-play-state: paused;
}

.projects-page .wrk-trusted-logo-group {
  display: grid;
  grid-template-columns: repeat(8, 150px);
  align-items: center;
  gap: clamp(26px, 3vw, 54px);
  padding-right: clamp(26px, 3vw, 54px);
}

.projects-page .wrk-trusted-logo {
  width: 150px;
}

@keyframes wrkTrustedLogoFlow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 800px) {
  .projects-page .wrk-studio-stats-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .projects-page .wrk-studio-stats-content,
  .projects-page .wrk-studio-stats-content > h2,
  .projects-page .wrk-trusted-brands,
  .projects-page .wrk-trusted-logo-viewport {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .projects-page .wrk-trusted-brands {
    overflow: hidden;
  }

  .projects-page .wrk-studio-stats-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
  }

  .projects-page .wrk-studio-stats-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3f28;
  }

  .projects-page .wrk-studio-metrics {
    margin-top: 58px;
  }

  .projects-page .wrk-trusted-logo-group {
    grid-template-columns: repeat(8, 122px);
    gap: 30px;
    padding-right: 30px;
  }

  .projects-page .wrk-trusted-logo {
    width: 122px;
  }
}

@media (max-width: 600px) {
  .projects-page .wrk-studio-stats {
    padding: 76px 0 84px;
  }

  .projects-page .wrk-studio-stats-content > h2 {
    font-size: clamp(2rem, 9.5vw, 2.7rem);
    line-height: 1.08;
  }

  .projects-page .wrk-studio-metrics {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .projects-page .wrk-studio-metric,
  .projects-page .wrk-studio-metric:first-child {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) 1fr;
    align-items: end;
    gap: 18px;
    padding: 24px 0;
  }

  .projects-page .wrk-studio-metric strong {
    font-size: clamp(3.2rem, 16vw, 4.4rem);
  }

  .projects-page .wrk-studio-metric p {
    margin: 0 0 4px;
  }

  .projects-page .wrk-trusted-logo-group {
    grid-template-columns: repeat(8, 108px);
    gap: 26px;
    padding-right: 26px;
  }

  .projects-page .wrk-trusted-logo {
    width: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-page .wrk-trusted-logo-track {
    animation-play-state: paused;
  }
}

/* Projects finishing pass — centered partners, glass metadata, tighter transition. */
.projects-page .wrk-studio-stats {
  padding-bottom: clamp(28px, 3vw, 44px);
}

/* ===========================================================================
   CONTACT 2026 — PREMIUM NEW-BUSINESS EXPERIENCE
   ========================================================================== */
.contact-page {
  --cntx-ink: #080d0f;
  --cntx-muted: #697074;
  --cntx-accent: #ff3f28;
  --cntx-paper: #f6f6f2;
  --cntx-line: rgba(8, 13, 15, 0.11);
  background: #fff;
  color: var(--cntx-ink);
}

.contact-page main { overflow: clip; }
.cntx-shell { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
.cntx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: rgba(255,255,255,.58);
  font: 750 10px/1.2 var(--font-main);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cntx-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--cntx-accent); box-shadow: 0 0 18px rgba(255,63,40,.55); }
.cntx-kicker-dark { color: rgba(8,13,15,.52); }

.cntx-hero {
  position: relative;
  min-height: min(890px, 92vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,63,40,.42), transparent 30%),
    radial-gradient(circle at 83% 82%, rgba(255,92,62,.18), transparent 28%),
    linear-gradient(128deg, #080b0e 0%, #111111 54%, #250d0a 100%);
  color: #fff;
}
.cntx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 82px 82px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 82%);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.cntx-hero-inner { position: relative; z-index: 2; padding: clamp(170px, 17vh, 230px) 0 clamp(68px, 7vw, 108px); }
.cntx-hero-badge-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cntx-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: rgba(8,13,15,.04); border: 1px solid rgba(8,13,15,.08); color: #080d0f; font: 600 12px/1 var(--font-main); }
.cntx-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #21915d; box-shadow: 0 0 0 0 rgba(33,145,93,.6); animation: cntxPulse 2s infinite; }
@keyframes cntxPulse { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(33,145,93,.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(33,145,93,0); } 100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(33,145,93,0); } }
.cntx-hero-badge-location { display: inline-flex; align-items: center; gap: 6px; color: #6a747a; font: 500 12px/1 var(--font-main); }
.cntx-hero-badge-location svg { width: 13px; height: 13px; color: var(--cntx-accent,#ff3f28); }
.cntx-hero h1 { max-width: 1220px; margin: 26px 0 0; font: 600 clamp(3.6rem, 7.8vw, 8.4rem)/.92 var(--font-display); letter-spacing: -.065em; color: #080d0f; text-wrap: balance; }
.cntx-hero-gradient-text { background: linear-gradient(135deg,#ff3f28 0%,#e02810 55%,#ff624d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: -.05em; }
.cntx-hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(48px, 6vw, 76px); padding-top: 30px; border-top: 1px solid rgba(8,13,15,.09); }
.cntx-hero-desc { max-width: 580px; margin: 0; color: #555e64; font: 430 clamp(1rem, 1.25vw, 1.15rem)/1.65 var(--font-main); }
.cntx-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cntx-hero-primary-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 26px; border-radius: 999px; background: #080d0f; color: #fff; font: 650 13px/1 var(--font-main); text-decoration: none; transition: all .25s cubic-bezier(.16,1,.3,1); box-shadow: 0 8px 24px rgba(8,13,15,.12); }
.cntx-hero-primary-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.cntx-hero-primary-btn:hover { background: var(--cntx-accent,#ff3f28); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,63,40,.32); color: #fff; }
.cntx-hero-primary-btn:hover svg { transform: translateY(3px); }
.cntx-hero-stats-mini { display: flex; align-items: center; gap: 10px; }
.cntx-hero-stat-pill { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: rgba(8,13,15,.03); border: 1px solid rgba(8,13,15,.06); }
.cntx-hero-stat-pill strong { font: 700 13px/1.1 var(--font-display); color: #080d0f; }
.cntx-hero-stat-pill span { font: 500 9.5px/1.2 var(--font-main); color: #727c82; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.cntx-scroll-link { display: inline-flex; align-items: center; gap: 15px; color: #fff; font: 700 12px/1 var(--font-main); letter-spacing: .04em; }
.cntx-scroll-link svg { width: 42px; height: 42px; padding: 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; transition: transform .25s ease, background .25s ease; }
.cntx-scroll-link:hover svg { transform: translateY(4px); background: var(--cntx-accent); border-color: var(--cntx-accent); }
.cntx-orbit { position: absolute; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; pointer-events: none; }
.cntx-orbit-one { width: 620px; height: 620px; right: -230px; top: -180px; }
.cntx-orbit-two { width: 280px; height: 280px; right: 15%; bottom: -170px; border-color: rgba(255,63,40,.2); }

.cntx-contact { position: relative; padding: clamp(90px, 10vw, 164px) 0; background: var(--cntx-paper); }
.cntx-contact::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(8,13,15,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(8,13,15,.035) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.cntx-contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(310px,.72fr) minmax(0,1.5fr); gap: clamp(44px, 7vw, 112px); align-items: start; }
.cntx-intro { position: sticky; top: 112px; padding-top: 15px; }
.cntx-intro h2 { max-width: 640px; margin: 30px 0 22px; font: 580 clamp(2.7rem, 4.4vw, 5rem)/.98 var(--font-display); letter-spacing: -.062em; }
.cntx-intro-copy { max-width: 530px; margin: 0; color: var(--cntx-muted); font: 430 1rem/1.7 var(--font-main); }
.cntx-direct-list { display: grid; margin-top: clamp(48px, 6vw, 76px); border-top: 1px solid var(--cntx-line); }
.cntx-direct-list a { display: grid; grid-template-columns: 120px minmax(0,1fr) 28px; align-items: center; gap: 16px; padding: 23px 0; color: var(--cntx-ink); border-bottom: 1px solid var(--cntx-line); }
.cntx-direct-list a > span { display: inline-flex; align-items: center; gap: 9px; color: var(--cntx-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.cntx-direct-list a > span svg { width: 15px; }
.cntx-direct-list strong { font: 620 clamp(1rem, 1.4vw, 1.25rem)/1.2 var(--font-main); overflow-wrap: anywhere; }
.cntx-direct-list a > svg { width: 18px; transition: transform .25s ease; }
.cntx-direct-list a:hover { color: var(--cntx-accent); }
.cntx-direct-list a:hover > svg { transform: translate(3px,-3px); }
.cntx-offices { display: grid; gap: 10px; margin-top: 22px; }
.cntx-office-card { display: grid; grid-template-columns: 34px minmax(0,1fr) 24px; gap: 14px; align-items: start; padding: 18px; border: 1px solid rgba(8,13,15,.09); border-radius: 17px; background: rgba(255,255,255,.68); color: var(--cntx-ink); text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cntx-office-card:hover { transform: translateY(-3px); border-color: rgba(255,63,40,.32); box-shadow: 0 16px 34px rgba(8,13,15,.08); }
.cntx-office-index { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #080d0f; color: #fff; font: 700 10px/1 var(--font-main); }
.cntx-office-country { display: block; margin-bottom: 5px; color: var(--cntx-accent,#ff3f28); font: 750 9px/1.2 var(--font-main); letter-spacing: .1em; text-transform: uppercase; }
.cntx-office-card strong { display: block; font: 650 17px/1.2 var(--font-display); letter-spacing: -.02em; }
.cntx-office-card p { margin: 6px 0 0; color: var(--cntx-muted); font: 450 12px/1.5 var(--font-main); }
.cntx-office-card > svg { width: 18px; height: 18px; color: var(--cntx-accent,#ff3f28); transition: transform .25s ease; }
.cntx-office-card:hover > svg { transform: translate(2px,-2px); }
.cntx-trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 32px; }
.cntx-trust-row > div { min-height: 102px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid rgba(255,255,255,.86); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.78),rgba(235,240,239,.46)); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 28px rgba(8,13,15,.045); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.cntx-trust-row strong { font: 680 1.45rem/1 var(--font-display); letter-spacing: -.04em; }
.cntx-trust-row span { color: var(--cntx-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cntx-social-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: var(--cntx-muted); font-size: 11px; font-weight: 700; }
.cntx-social-row > span { margin-right: auto; letter-spacing: .08em; text-transform: uppercase; }
.cntx-social-row a { display: inline-flex; align-items: center; gap: 5px; color: var(--cntx-ink); }
.cntx-social-row a svg { width: 13px; }

.cntx-workspace { overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 32px; background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,243,242,.66)); box-shadow: inset 0 1px rgba(255,255,255,.98), 0 38px 90px rgba(8,13,15,.105); -webkit-backdrop-filter: blur(38px) saturate(1.15); backdrop-filter: blur(38px) saturate(1.15); }
.cntx-workspace-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 20px 18px 24px; border-bottom: 1px solid var(--cntx-line); background: rgba(255,255,255,.44); }
.cntx-workspace-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cntx-workspace-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; }
.cntx-workspace-brand span { display: grid; gap: 2px; color: var(--cntx-muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cntx-workspace-brand strong { color: var(--cntx-ink); font-size: 11px; }
.cntx-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(8,13,15,.05); }
.cntx-tab { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--cntx-muted,#5f686d); font: 650 12px/1 var(--font-main); cursor: pointer; transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-tab:hover { color: var(--cntx-ink,#080d0f); }
.cntx-tab.is-active { background: var(--cntx-ink,#080d0f); color: #fff; box-shadow: 0 6px 16px rgba(8,13,15,.14); }
.cntx-panel { padding: clamp(28px,4vw,54px); animation: cntxPanelFade .35s cubic-bezier(.16,1,.3,1); }
@keyframes cntxPanelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cntx-panel[hidden] { display: none; }
.cntx-panel-head { padding-bottom: 26px; border-bottom: 1px solid rgba(8,13,15,.08); }
.cntx-panel-title-wrap h3 { margin: 0; font: 620 clamp(2.1rem,3.1vw,3.2rem)/1.04 var(--font-display); letter-spacing: -.045em; color: var(--cntx-ink,#080d0f); }
.cntx-panel-title-wrap p { max-width: 580px; margin: 10px 0 0; color: #5a646a; font: 440 15px/1.6 var(--font-main); }
.cntx-form { display: grid; gap: 23px; margin-top: 30px; }
.cntx-fields-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: 100%; }
.cntx-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.cntx-field > span, .cntx-field label, .cntx-field label > span, .cntx-service-fieldset legend { color: rgba(8,13,15,.67); font: 720 10px/1.2 var(--font-main); letter-spacing: .055em; text-transform: uppercase; margin: 0; }
.cntx-field input, .cntx-field select, .cntx-field textarea { width: 100%; box-sizing: border-box; min-height: 52px; height: 52px; padding: 0 16px; border: 1px solid rgba(8,13,15,.12); border-radius: 13px; outline: 0; background: rgba(255,255,255,.68); color: var(--cntx-ink); font: 450 14px/1.4 var(--font-main); transition: border .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease; }
.cntx-field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23080d0f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 14px 14px; cursor: pointer; }
.cntx-phone-input-wrap { display: flex; align-items: stretch; gap: 10px; width: 100%; box-sizing: border-box; }
.cntx-country-select-wrap { position: relative; flex: 0 0 128px; min-width: 110px; }
.cntx-country-select-wrap select { width: 100%; box-sizing: border-box; min-height: 52px; height: 52px; padding: 0 28px 0 12px; border: 1px solid rgba(8,13,15,.12); border-radius: 13px; outline: 0; background: rgba(255,255,255,.68); color: var(--cntx-ink); font: 500 13px/1.4 var(--font-main); cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23080d0f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 12px 12px; }
.cntx-country-select-wrap select:focus { border-color: rgba(255,63,40,.7); background-color: #fff; box-shadow: 0 0 0 4px rgba(255,63,40,.09); }
.cntx-phone-input-wrap input[type="tel"] { flex: 1; min-width: 0; }
.cntx-field textarea { height: auto; min-height: 126px; padding: 14px 16px; resize: vertical; }
.cntx-field input:focus, .cntx-field select:focus, .cntx-field textarea:focus { border-color: rgba(255,63,40,.7); background: #fff; box-shadow: 0 0 0 4px rgba(255,63,40,.09); }
.cntx-field input::placeholder, .cntx-field textarea::placeholder { color: rgba(8,13,15,.36); }
.cntx-service-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cntx-service-legend-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cntx-service-legend-wrap legend { margin: 0; }
.cntx-service-hint { color: var(--cntx-muted,#6d767c); font: 450 11px/1.2 var(--font-main); }
.cntx-service-fieldset.has-error legend { color: var(--cntx-accent); }
.cntx-service-fieldset.has-error .cntx-service-grid { padding: 8px; margin: -8px; border-radius: 18px; box-shadow: 0 0 0 2px rgba(255,63,40,.18); }
.cntx-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.cntx-srv-card { min-width: 0; cursor: pointer; position: relative; user-select: none; }
.cntx-srv-card input { position: absolute; opacity: 0; pointer-events: none; }
.cntx-srv-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 104px; padding: 15px 16px 14px; border: 1px solid rgba(8,13,15,.09); border-radius: 16px; background: rgba(255,255,255,.65); transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-srv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cntx-srv-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(8,13,15,.04); color: #080d0f; transition: all .25s ease; }
.cntx-srv-icon svg { width: 17px; height: 17px; transition: transform .25s ease; }
.cntx-srv-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(8,13,15,.18); display: flex; align-items: center; justify-content: center; color: transparent; background: transparent; transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-srv-check svg { width: 12px; height: 12px; transform: scale(.6); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.cntx-srv-title { display: block; font: 620 13.5px/1.25 var(--font-display); letter-spacing: -.015em; color: #080d0f; transition: color .2s ease; }
.cntx-srv-desc { display: block; margin-top: 4px; font: 430 11px/1.35 var(--font-main); color: #6d767c; transition: color .2s ease; }
.cntx-srv-card:hover .cntx-srv-inner { border-color: rgba(8,13,15,.25); background: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8,13,15,.04); }
.cntx-srv-card:hover .cntx-srv-icon { background: rgba(255,63,40,.1); color: var(--cntx-accent,#ff3f28); }
.cntx-srv-card:hover .cntx-srv-icon svg { transform: scale(1.08); }
.cntx-srv-card input:checked + .cntx-srv-inner { border-color: #080d0f; background: #080d0f; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,13,15,.16); }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-icon { background: rgba(255,255,255,.14); color: var(--cntx-accent,#ff3f28); }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-icon svg { transform: scale(1.1); }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-title { color: #fff; }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-desc { color: rgba(255,255,255,.65); }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-check { border-color: var(--cntx-accent,#ff3f28); background: var(--cntx-accent,#ff3f28); color: #fff; }
.cntx-srv-card input:checked + .cntx-srv-inner .cntx-srv-check svg { transform: scale(1); }

/* Estimated Investment modern card styles */
.cntx-budget-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cntx-budget-legend-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cntx-budget-legend-wrap legend { margin: 0; color: rgba(8,13,15,.72); font: 720 10.5px/1.2 var(--font-main); letter-spacing: .08em; text-transform: uppercase; }
.cntx-budget-hint { color: var(--cntx-muted,#6d767c); font: 450 11px/1.2 var(--font-main); }
.cntx-budget-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.cntx-budget-card { min-width: 0; cursor: pointer; position: relative; user-select: none; }
.cntx-budget-card input { position: absolute; opacity: 0; pointer-events: none; }
.cntx-budget-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 78px; padding: 13px 14px 12px; border: 1px solid rgba(8,13,15,.09); border-radius: 14px; background: rgba(255,255,255,.65); transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-budget-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cntx-budget-tier { font: 500 10px/1 var(--font-main); letter-spacing: .02em; color: #6d767c; text-transform: uppercase; transition: color .2s ease; }
.cntx-budget-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(8,13,15,.18); display: flex; align-items: center; justify-content: center; transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-budget-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; transition: background-color .2s ease; }
.cntx-budget-amount { display: block; margin-top: 6px; font: 650 15px/1 var(--font-display); letter-spacing: -.02em; color: #080d0f; transition: color .2s ease; }
.cntx-budget-card:hover .cntx-budget-inner { border-color: rgba(8,13,15,.25); background: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(8,13,15,.04); }
.cntx-budget-card input:checked + .cntx-budget-inner { border-color: #080d0f; background: #080d0f; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(8,13,15,.14); }
.cntx-budget-card input:checked + .cntx-budget-inner .cntx-budget-tier { color: rgba(255,255,255,.65); }
.cntx-budget-card input:checked + .cntx-budget-inner .cntx-budget-amount { color: #fff; }
.cntx-budget-card input:checked + .cntx-budget-inner .cntx-budget-dot { border-color: var(--cntx-accent,#ff3f28); }
.cntx-budget-card input:checked + .cntx-budget-inner .cntx-budget-dot::after { background: var(--cntx-accent,#ff3f28); }

/* Timeline Chips */
.cntx-timeline-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cntx-timeline-fieldset legend { margin-bottom: 11px; color: rgba(8,13,15,.72); font: 720 10.5px/1.2 var(--font-main); letter-spacing: .08em; text-transform: uppercase; }
.cntx-timeline-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.cntx-timeline-chip { min-width: 0; cursor: pointer; user-select: none; }
.cntx-timeline-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cntx-timeline-chip span { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(8,13,15,.09); border-radius: 12px; background: rgba(255,255,255,.6); color: #3f474d; font: 580 11.5px/1 var(--font-main); transition: all .22s cubic-bezier(.16,1,.3,1); }
.cntx-timeline-chip span svg { width: 14px; height: 14px; color: var(--cntx-accent,#ff3f28); }
.cntx-timeline-chip:hover span { border-color: rgba(8,13,15,.25); background: #fff; transform: translateY(-1px); }
.cntx-timeline-chip input:checked + span { border-color: #080d0f; background: #080d0f; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8,13,15,.14); }
.cntx-timeline-chip input:checked + span svg { color: var(--cntx-accent,#ff3f28); }
.cntx-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; }
.cntx-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 430px; color: var(--cntx-muted); font: 430 11px/1.45 var(--font-main); cursor: pointer; }
.cntx-consent input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--cntx-accent); }
.cntx-submit { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 8px 6px 24px; border: 0; border-radius: 999px; background: linear-gradient(135deg,#ff3f28 0%,#e52c15 100%); color: #fff; font: 680 13px/1 var(--font-main); cursor: pointer; box-shadow: 0 12px 28px rgba(255,63,40,.28); transition: all .28s cubic-bezier(.16,1,.3,1); }
.cntx-submit svg { width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.22); transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease; }
.cntx-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255,63,40,.38); background: linear-gradient(135deg,#ff4c36 0%,#e02810 100%); }
.cntx-submit:hover svg { transform: translate(2px,-2px); background: rgba(255,255,255,.32); }
.cntx-submit:active { transform: translateY(0); }
.cntx-submit:disabled { cursor: wait; opacity: .68; }
.cnt-success-alert { align-items: center; gap: 14px; padding: 20px; border: 1px solid rgba(33,145,93,.22); border-radius: 16px; background: rgba(33,145,93,.08); color: #12623d; }
.cnt-success-alert > svg { flex: 0 0 auto; }
.cnt-success-alert p { margin: 4px 0 0; font-size: 12px; }

.cntx-panel-head-call { margin-bottom: 30px; }
.cntx-booking { display: grid; grid-template-columns: .82fr 1.28fr; border: 1px solid rgba(8,13,15,.09); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(8,13,15,.04); }
.cntx-booking-summary { padding: 36px 32px; border-right: 1px solid rgba(255,255,255,.08); background: #080d0f; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.cntx-booking-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,#ff3f28 0%,#e02810 100%); color: #fff; box-shadow: 0 8px 20px rgba(255,63,40,.35); }
.cntx-booking-icon svg { width: 22px; height: 22px; }
.cntx-booking-summary h4 { margin: 32px 0 12px; font: 620 1.65rem/1.1 var(--font-display); letter-spacing: -.035em; color: #fff; }
.cntx-booking-summary > p { margin: 0; color: rgba(255,255,255,.65); font: 430 13px/1.6 var(--font-main); }
.cntx-booking-summary ul { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.cntx-booking-summary li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font: 500 12px/1.3 var(--font-main); }
.cntx-booking-summary li svg { width: 16px; height: 16px; color: var(--cntx-accent,#ff3f28); flex: 0 0 auto; }
.cntx-tz-item { position: relative; width: 100%; }
.cntx-tz-dropdown { position: relative; width: 100%; }
.cntx-tz-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; font: 500 12px/1.3 var(--font-main); cursor: pointer; transition: all .2s ease; text-align: left; }
.cntx-tz-trigger:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.cntx-tz-trigger svg { width: 15px; height: 15px; color: var(--cntx-accent,#ff3f28); }
.cntx-tz-chevron { width: 13px !important; height: 13px !important; color: rgba(255,255,255,.6) !important; transition: transform .2s ease; margin-left: 2px; }
.cntx-tz-dropdown.is-open .cntx-tz-chevron { transform: rotate(180deg); }
.cntx-tz-menu { position: absolute; bottom: calc(100% + 8px); top: auto; left: 0; width: 260px; max-width: 90vw; background: #fff; border: 1px solid rgba(8,13,15,.12); border-radius: 14px; box-shadow: 0 -12px 35px rgba(8,13,15,.25), 0 2px 6px rgba(8,13,15,.08); padding: 8px; z-index: 1000; animation: tzMenuFadeUp .2s cubic-bezier(.16,1,.3,1); }
@keyframes tzMenuFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cntx-tz-menu[hidden] { display: none; }
.cntx-tz-search-wrap { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(8,13,15,.06); }
.cntx-tz-search-wrap input { width: 100%; padding: 7px 10px; border: 1px solid rgba(8,13,15,.1); border-radius: 8px; font: 450 11.5px/1 var(--font-main); outline: 0; background: rgba(8,13,15,.02); color: #080d0f; }
.cntx-tz-search-wrap input:focus { border-color: var(--cntx-accent,#ff3f28); background: #fff; }
.cntx-tz-list { max-height: 185px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cntx-tz-list::-webkit-scrollbar { width: 4px; }
.cntx-tz-list::-webkit-scrollbar-thumb { background: rgba(8,13,15,.15); border-radius: 4px; }
.cntx-tz-option { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #1a2226; font: 480 12px/1.3 var(--font-main); text-align: left; cursor: pointer; transition: all .15s ease; }
.cntx-tz-option:hover { background: #f0f2f4; color: #080d0f; }
.cntx-tz-option.is-selected { background: #eaedf0; color: #080d0f; font-weight: 600; }
.cntx-booking-picker { min-width: 0; padding: 34px 32px; background: #fff; }
.cntx-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cntx-picker-label { margin: 0; color: rgba(8,13,15,.65); font: 720 10px/1.2 var(--font-main); letter-spacing: .08em; text-transform: uppercase; }
.cntx-picker-month { color: var(--cntx-accent,#ff3f28); font: 700 11px/1 var(--font-main); letter-spacing: .04em; }
.cntx-date-row.cntx-date-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; margin-bottom: 24px; }
.cntx-date-row label, .cntx-time-grid label { cursor: pointer; }
.cntx-date-row label > span { min-height: 72px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 8px 4px; border: 1px solid rgba(8,13,15,.1); border-radius: 13px; background: rgba(8,13,15,.02); transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-date-row small { color: rgba(8,13,15,.5); font: 700 9.5px/1 var(--font-main); letter-spacing: .04em; text-transform: uppercase; }
.cntx-date-row strong { font: 680 1.22rem/1 var(--font-display); color: #080d0f; }
.cntx-date-row label:hover > span { border-color: rgba(8,13,15,.28); background: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8,13,15,.04); }
.cntx-date-row input:checked + span { border-color: #080d0f; background: #080d0f; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8,13,15,.18); }
.cntx-date-row input:checked + span small { color: rgba(255,255,255,.65); }
.cntx-date-row input:checked + span strong { color: #fff; }
.cntx-time-grid-expanded { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.cntx-time-grid-expanded label > span { min-height: 44px; display: grid; place-items: center; border: 1px solid rgba(8,13,15,.1); border-radius: 12px; background: rgba(8,13,15,.02); color: #3b4348; font: 650 11.5px/1 var(--font-main); transition: all .25s cubic-bezier(.16,1,.3,1); }
.cntx-time-grid-expanded label:hover > span { border-color: rgba(8,13,15,.28); background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,13,15,.03); }
.cntx-time-grid-expanded input:checked + span { border-color: #080d0f; background: #080d0f; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8,13,15,.16); }
.cntx-booking-fields { margin-top: 24px; }
.cntx-book-submit { width: 100%; margin-top: 20px; }
.cntx-book-submit[hidden] { display: none; }
.cntx-booking-success { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(33,145,93,.09); color: #12623d; }
.cntx-booking-success[hidden] { display: none; }
.cntx-booking-success p { margin: 3px 0 0; font-size: 11px; }

.cntx-faq { padding: clamp(96px,11vw,160px) 0; background: #fbfbf9; border-top: 1px solid rgba(8,13,15,.08); }
.cntx-faq > .cntx-shell { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); gap: clamp(48px,8vw,130px); align-items: start; }
.cntx-faq-head { position: sticky; top: 120px; align-self: start; }
.cntx-faq-kicker { margin: 0 0 16px; color: var(--cntx-accent,#ff3f28); font: 750 11px/1.2 var(--font-main); letter-spacing: .12em; text-transform: uppercase; }
.cntx-faq-head h2 { margin: 0 0 20px; font: 600 clamp(2.4rem,4vw,3.6rem)/1.08 var(--font-display); letter-spacing: -.04em; color: #080d0f; }
.cntx-faq-intro { max-width: 420px; margin: 0 0 42px; color: #5a646a; font: 430 15px/1.65 var(--font-main); }
.cntx-faq-direct { display: grid; gap: 20px; padding-top: 32px; border-top: 1px solid rgba(8,13,15,.1); max-width: 380px; }
.cntx-faq-direct-item { display: grid; gap: 4px; }
.cntx-faq-direct-item span { color: rgba(8,13,15,.45); font: 700 10px/1.2 var(--font-main); letter-spacing: .08em; text-transform: uppercase; }
.cntx-faq-direct-item a { color: #080d0f; font: 580 14.5px/1.3 var(--font-main); text-decoration: none; transition: color .2s ease; }
.cntx-faq-direct-item a:hover { color: var(--cntx-accent,#ff3f28); }
.cntx-faq-direct-item p { margin: 0; color: #5a646a; font: 450 14px/1.3 var(--font-main); }
.cntx-faq-list { border-top: 1px solid rgba(8,13,15,.12); }
.cntx-faq-item { border-bottom: 1px solid rgba(8,13,15,.12); transition: background-color .25s ease; }
.cntx-faq-item button { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; align-items: center; gap: 20px; padding: 26px 0; border: 0; background: transparent; color: #080d0f; text-align: left; cursor: pointer; transition: color .2s ease; }
.cntx-faq-index { font: 500 12.5px/1 var(--font-main); color: rgba(8,13,15,.38); letter-spacing: .04em; font-feature-settings: "tnum"; }
.cntx-faq-title { font: 580 clamp(1.1rem,1.45vw,1.32rem)/1.32 var(--font-display); letter-spacing: -.02em; color: #080d0f; transition: color .2s ease; }
.cntx-faq-item:hover .cntx-faq-title, .cntx-faq-item.is-open .cntx-faq-title { color: var(--cntx-accent,#ff3f28); }
.cntx-faq-icon { width: 34px; height: 34px; min-width: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(8,13,15,.14); color: #080d0f; background: transparent; transition: all .25s ease; }
.cntx-faq-icon svg { width: 15px; height: 15px; stroke-width: 2.2; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.cntx-faq-item:hover .cntx-faq-icon, .cntx-faq-item.is-open .cntx-faq-icon { border-color: #080d0f; background: #080d0f; color: #fff; }
.cntx-faq-item.is-open .cntx-faq-icon svg { transform: rotate(45deg); }
.cntx-faq-answer { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.16,1,.3,1); }
.cntx-faq-answer > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 56px 0 56px; color: #555e64; font: 430 15px/1.72 var(--font-main); transition: padding-bottom .35s ease; }
.cntx-faq-item.is-open .cntx-faq-answer { grid-template-rows: 1fr; }
.cntx-faq-item.is-open .cntx-faq-answer > p { padding-bottom: 26px; }

@media (max-width: 1100px) {
  .cntx-contact-grid { grid-template-columns: 1fr; }
  .cntx-intro { position: static; }
  .cntx-intro h2 { max-width: 850px; }
  .cntx-intro-copy { max-width: 720px; }
  .cntx-direct-list { grid-template-columns: 1fr 1fr; gap: 24px; border-top: 0; }
  .cntx-direct-list a { grid-template-columns: 100px minmax(0,1fr) 24px; border-top: 1px solid var(--cntx-line); }
  .cntx-faq > .cntx-shell { grid-template-columns: 1fr; }
  .cntx-faq-head { position: static; }
  .cntx-faq-head > p:last-child { max-width: 670px; }
}

@media (max-width: 760px) {
  .cntx-shell { width: calc(100% - 32px); }
  .cntx-hero { min-height: auto; }
  .cntx-hero-inner { padding: 120px 0 44px; }
  .cntx-hero h1 { font-size: clamp(2.6rem, 11vw, 3.9rem); line-height: .96; letter-spacing: -.05em; margin-top: 18px; }
  .cntx-hero-bottom { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 32px; padding-top: 22px; }
  .cntx-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cntx-hero-primary-btn { justify-content: center; width: 100%; min-height: 48px; }
  .cntx-hero-stats-mini { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .cntx-hero-stat-pill { text-align: center; padding: 6px 10px; }
  .cntx-contact { padding: 52px 0 76px; }
  .cntx-intro h2 { font-size: clamp(2.3rem, 9.5vw, 3.2rem); line-height: 1.04; }
  .cntx-direct-list { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .cntx-direct-list a { grid-template-columns: 72px minmax(0,1fr) 20px; padding: 16px 0; }
  .cntx-direct-list strong { font-size: 13px; }
  .cntx-offices { margin-top: 18px; }
  .cntx-office-card { grid-template-columns: 30px minmax(0,1fr) 20px; padding: 15px 13px; gap: 10px; }
  .cntx-office-card p { font-size: 11px; }
  .cntx-trust-row { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .cntx-trust-row > div { min-height: 74px; padding: 10px 8px; border-radius: 12px; }
  .cntx-trust-row strong { font-size: 1.15rem; }
  .cntx-trust-row span { font-size: 8px; }
  .cntx-workspace { border-radius: 20px; }
  .cntx-workspace-top { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .cntx-tabs { width: 100%; }
  .cntx-tab { flex: 1; text-align: center; padding: 0 12px; font-size: 12px; }
  .cntx-panel { padding: 22px 16px 26px; }
  .cntx-panel-head { padding-bottom: 18px; }
  .cntx-fields-two { grid-template-columns: 1fr; gap: 14px; }
  .cntx-phone-input-wrap { display: flex; gap: 8px; width: 100%; }
  .cntx-country-select-wrap { flex: 0 0 104px; min-width: 95px; }
  .cntx-country-select-wrap select { padding: 0 24px 0 10px; font-size: 12px; }
  .cntx-booking { grid-template-columns: 1fr; border-radius: 20px; }
  .cntx-booking-summary { padding: 24px 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 20px 20px 0 0; }
  .cntx-booking-summary h4 { margin: 20px 0 10px; font-size: 1.45rem; }
  .cntx-booking-picker { padding: 24px 16px; }
  .cntx-date-row.cntx-date-week { display: grid; grid-template-columns: repeat(7, minmax(46px, 1fr)); gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .cntx-date-row label > span { min-height: 64px; padding: 6px 2px; border-radius: 11px; }
  .cntx-date-row strong { font-size: 1.1rem; }
  .cntx-time-grid-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cntx-faq { padding: 60px 0 80px; }
  .cntx-faq > .cntx-shell { grid-template-columns: 1fr; gap: 32px; }
  .cntx-faq-head h2 { font-size: clamp(2.3rem, 9.5vw, 3.1rem); }
  .cntx-faq-item button { grid-template-columns: 24px minmax(0,1fr) 30px; gap: 12px; padding: 18px 0; }
  .cntx-faq-title { font-size: 15px; }
  .cntx-faq-icon { width: 30px; height: 30px; }
  .cntx-faq-answer { overflow: hidden; }
  .cntx-faq-answer > p { padding: 0 0 0 36px; font-size: 13.5px; line-height: 1.6; }
  .cntx-faq-item.is-open .cntx-faq-answer > p { padding-bottom: 20px; }
  .cntx-form-footer { align-items: stretch; flex-direction: column; }
  .cntx-submit { width: 100%; }
}

/* Contact FAQ: touch-safe mobile accordion layout. */
@media (max-width: 760px) {
  .contact-page .cntx-faq > .cntx-shell {
    min-width: 0;
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .contact-page .cntx-faq-list,
  .contact-page .cntx-faq-item {
    min-width: 0;
    width: 100%;
  }

  .contact-page .cntx-faq-list {
    overflow: hidden;
  }

  .contact-page .cntx-faq-item > button {
    grid-template-columns: 28px minmax(0, 1fr) 40px;
    gap: 12px;
    min-height: 72px;
    padding: 18px 0;
    align-items: start;
    touch-action: manipulation;
  }

  .contact-page .cntx-faq-index {
    padding-top: 5px;
    font-size: 12px;
  }

  .contact-page .cntx-faq-title {
    padding-top: 1px;
    font-size: clamp(1rem, 4.4vw, 1.15rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .contact-page .cntx-faq-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    justify-self: end;
  }

  .contact-page .cntx-faq-answer > p {
    padding: 0 48px 0 40px;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .contact-page .cntx-faq-item.is-open .cntx-faq-answer > p {
    padding-bottom: 24px;
  }

  /* Prevent sticky touch-hover from making a closed item look open. */
  .contact-page .cntx-faq-item:not(.is-open) .cntx-faq-title {
    color: #080d0f;
  }

  .contact-page .cntx-faq-item:not(.is-open) .cntx-faq-icon {
    border-color: rgba(8, 13, 15, .14);
    background: transparent;
    color: #080d0f;
  }
}

@media (max-width: 380px) {
  .contact-page .cntx-faq-item > button {
    grid-template-columns: 24px minmax(0, 1fr) 36px;
    gap: 9px;
  }

  .contact-page .cntx-faq-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .contact-page .cntx-faq-answer > p {
    padding-right: 40px;
    padding-left: 33px;
  }
}

@media (max-width: 480px) {
  .cntx-trust-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cntx-hero-stats-mini { display: grid; grid-template-columns: 1fr 1fr; }
  .cntx-date-row.cntx-date-week { grid-template-columns: repeat(7, 50px); }
  .cntx-workspace-brand span { white-space: normal; }
}

/* Contact refinement — bright ANIDAM system and white liquid-glass header. */
.contact-page {
  --cntx-paper: #f7f7f3;
  background: #fff;
}

.contact-page .main-navbar-wrapper,
.contact-page .main-navbar-wrapper.at-top {
  padding: 0;
  background: rgba(255, 255, 255, 0.86);
  border: 0;
  border-bottom: 1px solid rgba(8, 13, 15, 0.08);
  box-shadow: 0 8px 32px rgba(8, 13, 15, 0.06);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

.contact-page .main-navbar-wrapper .main-navbar,
.contact-page .main-navbar-wrapper.at-top .main-navbar {
  max-width: 1720px;
  margin: 0 auto;
  padding: 16px 24px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-page .main-navbar-wrapper.scrolled {
  padding: 16px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-page .main-navbar-wrapper.scrolled .main-navbar {
  max-width: 1100px;
  padding: 8px 14px 8px 20px;
  border: 1px solid rgba(8, 13, 15, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 16px 42px rgba(8, 13, 15, 0.1), inset 0 1px rgba(255,255,255,.96);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.contact-page .main-navbar-wrapper .nav-item,
.contact-page .main-navbar-wrapper .dropdown-trigger,
.contact-page .main-navbar-wrapper.at-top .nav-item,
.contact-page .main-navbar-wrapper.at-top .dropdown-trigger { color: rgba(8, 13, 15, 0.66); }
.contact-page .main-navbar-wrapper .nav-item:hover,
.contact-page .main-navbar-wrapper .nav-item.active,
.contact-page .main-navbar-wrapper .dropdown-trigger:hover { color: #080d0f; }
.contact-page .main-navbar-wrapper .brand-header-logo-white { display: none !important; }
.contact-page .main-navbar-wrapper .brand-header-logo-dark { display: block !important; }
.contact-page .hamburger-btn,
.contact-page .hamburger-btn svg,
.contact-page .hamburger-btn i { color: #080d0f !important; stroke: #080d0f !important; }

.contact-page .cntx-hero {
  min-height: 740px;
  color: var(--cntx-ink);
  background:
    radial-gradient(circle at 14% 20%, rgba(255,63,40,.12) 0%, transparent 35%),
    radial-gradient(circle at 86% 68%, rgba(255,63,40,.08) 0%, transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #f9f9f6 58%, #f6f0ec 100%);
  border-bottom: 1px solid rgba(8,13,15,.07);
}

.contact-page .cntx-hero::before {
  opacity: .48;
  background-image: linear-gradient(rgba(8,13,15,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(8,13,15,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.contact-page .cntx-hero-inner { padding: clamp(170px, 17vh, 220px) 0 clamp(68px, 6vw, 96px); }
.contact-page .cntx-hero h1 { max-width: 1200px; font-size: clamp(3.6rem, 7.6vw, 8.4rem); line-height: .92; }
.contact-page .cntx-hero-bottom { border-top-color: rgba(8,13,15,.09); }
.contact-page .cntx-hero-desc { color: rgba(8,13,15,.62); }
.contact-page .cntx-orbit { border-color: rgba(8,13,15,.08); }
.contact-page .cntx-orbit-two { border-color: rgba(255,63,40,.16); }

.contact-page .cntx-contact { background: #fff; scroll-margin-top: 96px; }
.contact-page .cntx-contact::before { opacity: .36; }

.contact-page .cntx-tab:focus-visible,
.contact-page .cntx-hero-primary-btn:focus-visible,
.contact-page .cntx-submit:focus-visible,
.contact-page .cntx-time:focus-visible,
.contact-page .cntx-faq-item > button:focus-visible {
  outline: 2px solid #ff3b26;
  outline-offset: 3px;
}
.contact-page .cntx-intro h2 { max-width: 590px; font-size: clamp(2.9rem, 4.1vw, 4.65rem); line-height: 1; }
.contact-page .cntx-workspace {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,246,243,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 24px 70px rgba(8,13,15,.085);
}
.contact-page .cntx-workspace-top { background: rgba(255,255,255,.68); }
.contact-page .cntx-trust-row > div { background: rgba(248,248,245,.82); box-shadow: inset 0 1px #fff; }
.contact-page .cntx-booking-summary { background: #080d0f; color: #fff; }
.contact-page .cntx-booking-summary h4 { color: #fff; }
.contact-page .cntx-booking-summary > p { color: rgba(255,255,255,.7); }
.contact-page .cntx-booking-summary li { color: rgba(255,255,255,.85); }
.contact-page .cntx-booking-summary li svg { color: var(--cntx-accent,#ff3f28); }

.projects-page .wrk-studio-stats > .wrk-studio-stats-layout > .wrk-trusted-brands {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-top: clamp(60px, 7vw, 96px);
  padding-top: 0;
  overflow: hidden;
  text-align: center;
}

.projects-page .wrk-studio-stats > .wrk-studio-stats-layout {
  row-gap: 0;
}

.projects-page .wrk-studio-stats .wrk-trusted-logo-viewport {
  width: 100%;
  margin-inline: auto;
}

.projects-page .wrk-filter-section {
  display: flex;
  justify-content: center;
}

.projects-page .wrk-filter-section .prj-filter-bar {
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(239, 244, 243, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 34px rgba(14, 19, 20, 0.07);
  backdrop-filter: blur(22px) saturate(1.24);
  -webkit-backdrop-filter: blur(22px) saturate(1.24);
}

.projects-page .wrk-card-content > div p,
.projects-page .wrk-card-content > div::after {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(242, 246, 246, 0.46));
  color: rgba(10, 14, 16, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 22px rgba(18, 22, 24, 0.07);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.projects-page .wrk-grid > .wrk-card {
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 244, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 60px rgba(13, 18, 20, 0.065);
  backdrop-filter: blur(36px) saturate(1.18);
  -webkit-backdrop-filter: blur(36px) saturate(1.18);
}

@media (max-width: 800px) {
  .projects-page .wrk-studio-stats > .wrk-studio-stats-layout > .wrk-trusted-brands {
    margin-top: 48px;
  }
}
.about-reimagined{background:#f4f1e9;color:#f7f4ec}.abx-shell{width:min(1280px,calc(100% - 64px));margin:auto}.abx-hero{background:#071b18;overflow:hidden}.abx-hero-grid{min-height:610px;padding:190px 0 80px;display:grid;grid-template-columns:1.4fr .7fr;gap:8vw;align-items:end}.abx-eyebrow,.abx-index{margin:0 0 24px;font:700 11px/1.2 var(--font-main);letter-spacing:.16em;text-transform:uppercase}.abx-eyebrow{color:rgba(255,255,255,.62)}.abx-eyebrow span{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff4934}.abx-hero h1{max-width:850px;margin:0;font:500 clamp(4rem,7.5vw,8rem)/.9 var(--font-display);letter-spacing:-.065em}.abx-hero h1 em{display:block;font-family:Georgia,serif;font-weight:400;color:#ff5b43}.abx-hero-intro{padding-bottom:8px}.abx-hero-intro p{margin:0 0 30px;color:rgba(255,255,255,.68);font:400 16px/1.65 var(--font-main)}.abx-hero-intro a{display:inline-flex;align-items:center;gap:20px;padding:15px 22px;border-radius:999px;background:#ff4d36;color:#fff;font-weight:700;text-decoration:none}.abx-hero-intro svg{width:16px}.abx-hero-media{height:clamp(520px,62vw,820px);position:relative;background:#050706}.abx-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.85) contrast(1.08)}.abx-media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 40%)}.abx-media-note{position:absolute;left:max(32px,calc((100vw - 1280px)/2));bottom:38px;display:flex;flex-direction:column}.abx-media-note span{font:700 10px var(--font-main);letter-spacing:.15em;text-transform:uppercase;color:#ff604b}.abx-media-note strong{margin-top:6px;font:600 22px var(--font-display)}
.abx-manifesto{padding:clamp(100px,12vw,180px) 0;color:#0b1110}.abx-index{color:#ff4d36}.abx-manifesto-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:9vw}.abx-manifesto h2{margin:0;font:600 clamp(3rem,5.8vw,6.8rem)/.95 var(--font-display);letter-spacing:-.06em}.abx-manifesto h2 span{font-family:Georgia,serif;font-weight:400;font-style:italic;color:#ff4d36}.abx-manifesto-copy{padding-top:12px}.abx-manifesto-copy p{margin:0 0 24px;color:#59605d;font:400 16px/1.75 var(--font-main)}
.abx-proof{background:#0b1110}.abx-proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.abx-proof-grid div{min-height:230px;padding:42px 28px;border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:space-between}.abx-proof-grid strong{font:600 clamp(3.5rem,6vw,6.5rem)/1 var(--font-display);letter-spacing:-.07em}.abx-proof-grid span{color:rgba(255,255,255,.52);font:600 11px var(--font-main);letter-spacing:.1em;text-transform:uppercase}
.abx-principles{padding:clamp(100px,11vw,170px) 0;background:#eeece5;color:#0b1110}.abx-section-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:40px;align-items:start}.abx-section-head h2{max-width:850px;margin:0;font:600 clamp(3.4rem,6vw,6.7rem)/.94 var(--font-display);letter-spacing:-.06em}.abx-principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:70px}.abx-principle-grid article{min-height:430px;padding:26px;border:1px solid rgba(0,0,0,.08);border-radius:24px;background:#f8f6f0;display:flex;flex-direction:column}.abx-principle-grid article>span{font:700 11px var(--font-main);color:#ff4d36}.abx-principle-grid article>svg{width:36px;height:36px;margin-top:42px}.abx-principle-grid h3{margin:auto 0 16px;font:600 30px/1 var(--font-display);letter-spacing:-.045em}.abx-principle-grid p{margin:0;color:#606663;font:400 14px/1.6 var(--font-main)}.abx-principle-grid .is-dark{background:#071b18;color:#fff}.abx-principle-grid .is-dark p{color:rgba(255,255,255,.6)}.abx-principle-grid .is-coral{background:#ff4d36;color:#100}.abx-principle-grid .is-coral>span,.abx-principle-grid .is-coral p{color:rgba(0,0,0,.62)}
.abx-presence{padding:clamp(100px,11vw,170px) 0;background:#071b18}.abx-presence-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.abx-presence h2{margin:0;font:600 clamp(4rem,7vw,7.5rem)/.9 var(--font-display);letter-spacing:-.065em}.abx-presence h2 em{font-family:Georgia,serif;font-weight:400;color:#ff5b43}.abx-location-list{border-top:1px solid rgba(255,255,255,.18)}.abx-location-list a{position:relative;display:grid;grid-template-columns:110px 1fr;gap:8px 22px;padding:34px 45px 34px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none}.abx-location-list span{grid-row:1/3;color:#ff624d;font:700 10px var(--font-main);letter-spacing:.12em;text-transform:uppercase}.abx-location-list strong{font:600 30px var(--font-display)}.abx-location-list p{margin:0;color:rgba(255,255,255,.5);font-size:13px}.abx-location-list svg{position:absolute;right:0;top:38px;width:20px}.abx-location-list a:hover strong{color:#ff624d}
@media(max-width:900px){.abx-shell{width:calc(100% - 32px)}.abx-hero-grid{min-height:auto;padding:140px 0 58px;grid-template-columns:1fr;gap:40px}.abx-hero h1{font-size:clamp(3.4rem,14vw,5.5rem)}.abx-hero-media{height:72vh;min-height:520px}.abx-media-note{left:20px}.abx-manifesto-grid,.abx-presence-grid{grid-template-columns:1fr;gap:55px}.abx-proof-grid{grid-template-columns:1fr 1fr}.abx-proof-grid div{min-height:170px}.abx-section-head{grid-template-columns:1fr}.abx-principle-grid{grid-template-columns:1fr 1fr}.abx-principle-grid article{min-height:340px}}@media(max-width:560px){.abx-hero-grid{padding-top:120px}.abx-hero h1{font-size:clamp(3.25rem,15vw,4.4rem)}.abx-hero-media{height:60vh}.abx-manifesto,.abx-principles,.abx-presence{padding:82px 0}.abx-manifesto h2,.abx-section-head h2{font-size:clamp(2.8rem,13vw,4rem)}.abx-proof-grid{grid-template-columns:1fr 1fr}.abx-proof-grid div{padding:28px 15px;min-height:145px}.abx-proof-grid strong{font-size:3rem}.abx-principle-grid{grid-template-columns:1fr;margin-top:42px}.abx-principle-grid article{min-height:310px}.abx-location-list a{grid-template-columns:1fr;padding-right:35px}.abx-location-list span{grid-row:auto}.abx-presence h2{font-size:3.8rem}}

/* About hero — editorial statement, adapted to ANIDAM's visual system. */
.about-page .about-reimagined,
.about-page .abx-hero { background: #fff; color: #0b1110; }
.about-page .abx-hero-grid { min-height: 720px; padding: 168px 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
.about-page .abx-eyebrow { margin-bottom: 30px; color: #59605d; }
.about-page .abx-hero h1 { width: 100%; max-width: 1020px; margin: 0; font: 600 clamp(4.2rem, 7.15vw, 7.15rem)/.94 var(--font-display); letter-spacing: -.065em; text-transform: none; }
.about-page .abx-hero h1 span,
.about-page .abx-hero h1 em { display: block; }
.about-page .abx-hero h1 em { margin-top: .03em; color: #ff4d36; font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -.065em; }
.about-page .abx-mark { display: inline-grid; width: .78em; height: .78em; margin: 0 .02em; border: .055em solid currentColor; border-radius: 50%; place-items: center; font: 800 .48em/1 var(--font-display); letter-spacing: -.08em; vertical-align: .12em; transform: rotate(-8deg); }
.about-page .abx-hero-intro { width: min(720px, 100%); margin-top: 52px; padding: 0; }
.about-page .abx-hero-intro p { margin: 0; color: #3f4743; font-size: 17px; line-height: 1.65; }
.about-page .abx-hero-actions { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 34px; }
.about-page .abx-hero-actions > a { background: #0b1110; color: #fff; }
.about-page .abx-hero-actions .abx-text-link { padding: 10px 0 7px; border-bottom: 1px solid rgba(11,17,16,.34); border-radius: 0; background: transparent; color: #0b1110; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.about-page .abx-hero-actions .abx-text-link:hover { border-color: #ff4d36; color: #ff4d36; }
.about-page .main-navbar-wrapper.at-top { background: transparent; }
.about-page .main-navbar-wrapper.at-top .main-navbar { background: rgba(255,255,255,.9); border: 1px solid rgba(11,17,16,.07); box-shadow: 0 16px 44px rgba(11,17,16,.07); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.about-page .main-navbar-wrapper.at-top .nav-item,
.about-page .main-navbar-wrapper.at-top .dropdown-trigger-link { color: rgba(11,17,16,.68); }
.about-page .main-navbar-wrapper.at-top .nav-item:hover,
.about-page .main-navbar-wrapper.at-top .nav-item.active,
.about-page .main-navbar-wrapper.at-top .dropdown-trigger-link:hover { color: #0b1110; }
.about-page .main-navbar-wrapper.at-top .brand-header-logo-white { display: none !important; }
.about-page .main-navbar-wrapper.at-top .brand-header-logo-dark { display: block !important; }
.about-page .main-navbar-wrapper.at-top .hamburger-btn,
.about-page .main-navbar-wrapper.at-top .hamburger-btn svg,
.about-page .main-navbar-wrapper.at-top .hamburger-btn i { color: #0b1110 !important; stroke: #0b1110 !important; }

.about-page .abx-manifesto { padding: clamp(110px, 12vw, 180px) 0; background: #fff; }
.about-page .abx-manifesto-grid { display: grid; grid-template-columns: minmax(210px,.65fr) minmax(0,1.35fr); gap: clamp(56px,9vw,140px); align-items: start; }
.about-page .abx-manifesto .abx-index { display: flex; gap: 10px; align-items: center; margin: 9px 0 0; color: #8a8f8c; white-space: nowrap; }
.about-page .abx-manifesto .abx-index span { color: #0b1110; font-size: 17px; }
.about-page .abx-manifesto-content { max-width: 830px; }
.about-page .abx-manifesto h2 { margin: 0; font: 650 clamp(3.3rem,5vw,5.8rem)/.98 var(--font-display); letter-spacing: -.055em; }
.about-page .abx-manifesto h2 span { display: block; margin-top: .08em; color: #969b98; font-family: var(--font-display); font-style: normal; font-weight: 650; }
.about-page .abx-manifesto-copy { max-width: 570px; margin-top: 48px; padding: 0; }
.about-page .abx-manifesto-copy p { margin: 0; color: #303633; font-size: 17px; line-height: 1.65; }
.about-page .abx-manifesto-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.about-page .abx-manifesto-actions a { display: inline-flex; align-items: center; gap: 16px; color: #0b1110; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.about-page .abx-manifesto-actions a:first-child { padding: 15px 21px; border-radius: 999px; background: #0b1110; color: #fff; }
.about-page .abx-manifesto-actions a:last-child { padding: 9px 0 6px; border-bottom: 1px solid rgba(11,17,16,.3); }
.about-page .abx-manifesto-actions svg { width: 15px; }

.about-page .about-footer-actions { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; }
.about-page .about-footer-actions .pre-footer-btn { margin: 0; background: #fff; color: #0b1110; }
.about-page .about-footer-actions .pre-footer-btn svg { padding: 6px; border-radius: 50%; background: #15191c; color: #fff; stroke: #fff; box-sizing: content-box; }
.about-page .about-book-call { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 7px; border-bottom: 1px solid rgba(255,255,255,.34); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.about-page .about-book-call svg { width: 15px; color: #ff4d36; stroke: #ff4d36; }

/* About hero and story — split editorial composition. */
.about-page .abx-hero { padding-top: 1px; overflow: visible; background: #fff; color: #0b1110; }
.about-page .abx-hero-grid { width: min(1800px,calc(100% - 80px)); min-height: 560px; padding: 158px 0 70px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); grid-template-rows: auto 1fr; column-gap: clamp(52px,5vw,96px); align-items: end; text-align: left; }
.about-page .abx-eyebrow { grid-column: 1 / -1; align-self: end; margin: 0 0 24px; color: #626965; }
.about-page .abx-hero h1 { grid-column: 1; max-width: 1040px; color: #0b1110; font-family: var(--font-main); font-size: clamp(4.35rem,5.7vw,6.7rem); font-weight: 300; line-height: .9; letter-spacing: -.065em; }
.about-page .abx-hero h1 em { display: block; max-width: 860px; margin-top: .04em; color: #ff4d36; font-family: Georgia,serif; font-size: .94em; font-weight: 400; font-style: italic; line-height: .9; letter-spacing: -.055em; }
.about-page .abx-hero-intro { grid-column: 2; align-self: end; width: auto; margin: 0 0 6px; text-align: left; }
.about-page .abx-hero-intro p { color: #59605d; font-size: 15px; line-height: 1.65; }
.about-page .abx-hero-actions { justify-content: flex-start; margin-top: 28px; }
.about-page .abx-hero-actions > a { background: #ff5b43; color: #fff; }
.about-page .abx-hero-media { box-sizing: border-box; width: calc(100% - 48px); height: auto; margin: 24px auto 0; padding: 0; background: #fff; }
.about-page .abx-hero-media img { position: relative; display: block; width: 100%; height: auto; max-height: none; object-fit: contain; filter: none; }
.about-page .abx-media-shade,
.about-page .abx-media-note { display: none; }
.about-page .abx-manifesto { padding: 48px 0 110px; background: #fff; border-bottom: 1px solid #e1e3e1; color: #0b1110; }
.about-page .abx-manifesto-grid { width: calc(100% - 48px); max-width: none; padding-top: 42px; border-top: 1px solid #d9dcda; display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr); gap: clamp(50px,9vw,150px); }
.about-page .abx-manifesto h2 { margin: 0; font: 500 clamp(1.6rem,2vw,2.1rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.about-page .abx-manifesto-copy { max-width: 780px; margin: 0; }
.about-page .abx-manifesto-copy p { margin: 0 0 18px; color: #161b19; font-size: clamp(1.15rem,1.45vw,1.5rem); line-height: 1.35; letter-spacing: -.02em; }

/* White full-width header at the top; compact glass pill once it overlaps imagery. */
.about-page .main-navbar-wrapper.at-top { background: #fff; }
.about-page .main-navbar-wrapper.at-top .main-navbar { background: #fff; border-color: rgba(11,17,16,.07); box-shadow: 0 12px 30px rgba(11,17,16,.06); }
.about-page .main-navbar-wrapper.scrolled { background: transparent; }
.about-page .main-navbar-wrapper.scrolled .main-navbar { background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 18px 55px rgba(7,27,24,.14); backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15); }
.about-page .main-navbar-wrapper.scrolled .brand-header-logo-white { display: none !important; }
.about-page .main-navbar-wrapper.scrolled .brand-header-logo-dark { display: block !important; }
.about-page .main-navbar-wrapper.scrolled .nav-item,
.about-page .main-navbar-wrapper.scrolled .dropdown-trigger-link { color: rgba(11,17,16,.68); }
.about-page .main-navbar-wrapper.scrolled .nav-item:hover,
.about-page .main-navbar-wrapper.scrolled .nav-item.active,
.about-page .main-navbar-wrapper.scrolled .dropdown-trigger-link:hover { color: #0b1110; }

/* The team portrait holds under the floating header before releasing into the story. */
@media (min-width: 901px) {
  .about-page .abx-hero-media { height: 145vh; overflow: clip; }
  .about-page .abx-hero-media img { position: sticky; top: 92px; height: min(74vh,680px); object-fit: cover; object-position: center 42%; transform-origin: center center; will-change: transform; backface-visibility: hidden; }
}

/* About uses the same full-width-to-pill navbar behavior as Home. */
.about-page .main-navbar-wrapper.at-top { top: 0; height: 73px; background: transparent; }
.about-page .main-navbar-wrapper,
.about-page .main-navbar-wrapper.at-top,
.about-page .main-navbar-wrapper.scrolled { box-shadow: none !important; filter: none !important; }
.about-page .main-navbar-wrapper.at-top .main-navbar { width: 100%; max-width: none; height: 72px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.about-page .main-navbar-wrapper.at-top .nav-container { width: 100%; max-width: none; padding: 0 24px; }
.about-page .main-navbar-wrapper.scrolled .main-navbar { box-shadow: none; }

/* One navigation system across every route — Projects page is the reference. */
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper.at-top {
  padding: 0 !important;
  background: rgba(255,255,255,.82) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10,14,16,.08) !important;
  box-shadow: 0 8px 30px rgba(20,22,24,.075) !important;
  filter: none !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
}
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .main-navbar,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper.at-top .main-navbar {
  width: auto !important;
  max-width: 1720px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper.scrolled {
  padding: 16px 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper.scrolled .main-navbar {
  width: auto !important;
  max-width: 1100px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 8px 14px 8px 20px !important;
  border: 1px solid rgba(10,14,16,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.8) !important;
  box-shadow: 0 16px 42px rgba(24,20,18,.1), inset 0 1px 0 rgba(255,255,255,.94) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
}
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .nav-item,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .dropdown-trigger,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .dropdown-trigger-link { color: rgba(10,14,16,.68) !important; }
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .brand-header-logo-white { display: none !important; }
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .main-navbar-wrapper .brand-header-logo-dark { display: block !important; }
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .hamburger-btn,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .hamburger-btn svg,
body:is(.home-page,.about-page,.services-page,.projects-page,.process-page,.insights-page,.contact-page) .hamburger-btn i { color: #0a0d10 !important; stroke: #0a0d10 !important; }

/* Pinned text-only statement following the Studio Story. */
.about-page .abx-scroll-statement { background: #090a0a; color: #fff; }
.about-page .abx-statement-sequence { height: 260vh; }
.about-page .abx-statement-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 32px; text-align: center; }
.about-page .abx-statement-headline { grid-area: 1 / 1; display: grid; justify-items: center; will-change: transform,opacity; }
.about-page .abx-statement-headline > p { margin: 0 0 24px; color: #737675; font: 700 10px/1 var(--font-main); letter-spacing: .15em; text-transform: uppercase; }
.about-page .abx-statement-stage h2 { display: flex; flex-direction: column; align-items: center; margin: 0; color: #f7f7f5; font: 400 clamp(4rem,7vw,8rem)/.88 var(--font-main); letter-spacing: -.075em; }
.about-page .abx-statement-prefix { display: block; }
.about-page .abx-statement-word { position: relative; display: grid; min-width: 5.6em; min-height: .95em; }
.about-page .abx-word-layer { grid-area: 1 / 1; display: flex; justify-content: center; }
.about-page .abx-word-layer > span { display: inline-block; will-change: transform,opacity; }
.about-page .abx-statement-copy { grid-area: 1 / 1; max-width: 900px; margin: 0; font: 400 clamp(2.25rem,4vw,4.9rem)/1.02 var(--font-main); letter-spacing: -.055em; }
.about-page .abx-statement-copy > span { will-change: color; }
.about-page .abx-statement-editorial { padding: 0 0 clamp(150px, 15vw, 240px); background: #f7f7f4; color: #111; }
.about-page .abx-statement-editorial > .abx-shell,
.about-page .abx-white-chapter > .abx-shell { width: min(1800px, calc(100% - 80px)); }
.about-page .abx-editorial-scroll-stage { height: 175vh; }
.about-page .abx-editorial-intro { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(170px, 2fr) minmax(0, 10fr); gap: 32px; align-content: center; align-items: start; padding: 110px 0 70px; }
.about-page .abx-editorial-label { margin: .55em 0 0; color: #777b7b; font: 600 .74rem/1 var(--font-main); letter-spacing: .11em; text-transform: uppercase; }
.about-page .abx-editorial-copy { margin: 0; color: #111; font: 450 clamp(2.15rem, 3.15vw, 3.8rem)/1.04 var(--font-main); letter-spacing: -.052em; }
.about-page .abx-editorial-copy > span { color: #a2a5a3; will-change: color; }
.about-page .abx-editorial-media { display: grid; grid-template-columns: 1fr 1fr .68fr; gap: 14px; align-items: end; margin: 0 0 0 calc(16.667% + 27px); }
.about-page .abx-editorial-media img { width: 100%; aspect-ratio: 1.08 / 1; border-radius: 12px; object-fit: cover; object-position: center 38%; filter: grayscale(1); }
.about-page .abx-editorial-cta { padding: 0 0 8px clamp(10px, 1.2vw, 22px); }
.about-page .abx-editorial-cta > p { margin: 0 0 12px; color: #737773; font: 700 .68rem/1.1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; }
.about-page .abx-editorial-cta h3 { margin: 0 0 26px; color: #111; font: 500 clamp(1.25rem, 1.55vw, 1.75rem)/1.08 var(--font-main); letter-spacing: -.035em; }
.about-page .abx-editorial-cta a { display: inline-flex; align-items: center; gap: 26px; padding: 14px 18px; border-radius: 999px; background: var(--orange); color: #111; font: 700 .78rem/1 var(--font-main); text-transform: uppercase; }
.about-page .abx-editorial-cta a span { font-size: 1.05rem; transition: transform .25s ease; }
.about-page .abx-editorial-cta a:hover span { transform: translateX(4px); }
.about-page .abx-team-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid #c9cbc8; }
.about-page .abx-team-list article { min-width: 0; padding: 18px 20px 24px; border-bottom: 1px solid #c9cbc8; }
.about-page .abx-team-list article + article { padding-left: 20px; border-left: 1px solid #c9cbc8; }
.about-page .abx-team-photo { width: 100%; margin: 0 0 18px; overflow: hidden; border-radius: 10px; background: #dddeda; }
.about-page .abx-team-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; filter: grayscale(1); transition: filter .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.about-page .abx-team-list article:hover .abx-team-photo img { filter: grayscale(0); transform: scale(1.025); }
.about-page .abx-team-list span { display: block; margin-bottom: 24px; color: #777a77; font: 600 .68rem/1 var(--font-main); }
.about-page .abx-team-list h4 { margin: 0 0 7px; color: #111; font: 500 clamp(1rem, 1.25vw, 1.35rem)/1.12 var(--font-main); letter-spacing: -.035em; }
.about-page .abx-team-list p { margin: 0; color: #737773; font: 500 .82rem/1.35 var(--font-main); }
.about-page .abx-white-chapter { position: relative; z-index: 2; padding: clamp(120px, 13vw, 210px) 0 clamp(110px, 12vw, 190px); background: #f7f7f4; color: #111; }
.about-page .abx-white-heading { display: grid; grid-template-columns: minmax(170px, 2fr) minmax(0, 10fr); gap: 32px; align-items: start; }
.about-page .abx-white-heading > p { margin: .7em 0 0; color: #747676; font: 600 .74rem/1 var(--font-main); letter-spacing: .11em; text-transform: uppercase; }
.about-page .abx-white-heading h2 { width: 100%; max-width: 1080px; margin: 0; padding-right: 3vw; font: 450 clamp(3rem, 4.9vw, 6.4rem)/.94 var(--font-main); letter-spacing: -.065em; }
.about-page .abx-white-services { margin-top: clamp(100px, 12vw, 180px); border-top: 1px solid #c9cbca; }
.about-page .abx-white-services article { display: grid; grid-template-columns: minmax(170px, 2fr) minmax(0, 10fr); gap: 32px; padding: 34px 0 38px; border-bottom: 1px solid #c9cbca; }
.about-page .abx-white-services article > span { color: #888b8a; font: 600 .72rem/1 var(--font-main); text-decoration: underline; text-underline-offset: 4px; }
.about-page .abx-white-services article > div { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px, 5vw, 86px); }
.about-page .abx-white-services h3 { margin: 0; font: 500 clamp(1.55rem, 2.25vw, 2.8rem)/1 var(--font-main); letter-spacing: -.045em; }
.about-page .abx-white-services p { max-width: 560px; margin: 0; color: #5f6261; font: 400 clamp(1rem, 1.1vw, 1.2rem)/1.5 var(--font-main); }
.about-page .abx-white-link { display: inline-flex; align-items: center; gap: 20px; margin: 50px 0 0 calc(16.667% + 27px); padding-bottom: 7px; border-bottom: 1px solid #111; color: #111; font: 600 .82rem/1 var(--font-main); text-transform: uppercase; }
.about-page .abx-white-link span { font-size: 1.05rem; transition: transform .25s ease; }
.about-page .abx-white-link:hover span { transform: translate(3px,-3px); }

/* Proven Results — ANIDAM's editorial outcomes section. */
.about-page .abx-results { padding: clamp(68px,7vw,110px) 0 clamp(130px,14vw,220px); background: #fff; color: #0b1110; overflow: hidden; }
.about-page .abx-results > .abx-shell { width: min(1800px,calc(100% - 80px)); }
.about-page .abx-results-head { min-height: clamp(430px,43vw,650px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(44px,5vw,82px); align-items: start; }
.about-page .abx-results-head h2 { margin: 0; color: #050606; font: 500 clamp(5rem,8.6vw,10rem)/.88 var(--font-main); letter-spacing: -.078em; }
.about-page .abx-results-meta { display: grid; grid-template-columns: auto minmax(180px,1fr); gap: 34px; width: min(100%, 430px); justify-self: end; padding-top: 34px; }
.about-page .abx-results-meta p { margin: 0; color: #202321; font-size: 13px; font-weight: 600; white-space: nowrap; }
.about-page .abx-results-meta ul { margin: 0; padding: 0; list-style: none; }
.about-page .abx-results-meta li { color: #929793; font-size: 13px; line-height: 1.6; }
.about-page .abx-results-meta strong { font-weight: 500; }
.about-page .abx-results-line { width: 100%; height: 1px; margin-top: clamp(72px,8vw,120px); background: #aeb4b0; }
.about-page .abx-results-stats { display: grid; grid-template-columns: repeat(4,1fr); }
.about-page .abx-results-stats article { min-height: 180px; padding: 30px 24px 28px 0; border-right: 1px solid #d2d5d2; }
.about-page .abx-results-stats article:not(:first-child) { padding-left: 24px; }
.about-page .abx-results-stats article:last-child { border-right: 0; }
.about-page .abx-results-stats strong { display: block; font: 400 clamp(3.4rem,5vw,6rem)/1 var(--font-main); letter-spacing: -.07em; }
.about-page .abx-results-stats span { display: block; margin-top: 12px; color: #666d69; font-size: 13px; }
.about-page .abx-results-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: clamp(42px,5vw,76px); }
.about-page .abx-results-cards article { position: relative; min-height: 330px; padding: 28px; border: 1px solid #cfd3cf; border-radius: 8px; background: rgba(255,255,255,.42); }
.about-page .abx-results-cards article > span { font: 700 10px var(--font-main); text-decoration: underline; }
.about-page .abx-results-cards h3 { max-width: 330px; margin: 130px 0 18px; font: 500 clamp(2rem,3vw,3.5rem)/.95 var(--font-display); letter-spacing: -.055em; }
.about-page .abx-results-cards p { max-width: 410px; margin: 0; color: #626965; font-size: 14px; line-height: 1.55; }
.about-page .abx-results-cards article:nth-child(2) { background: #101211; color: #fff; border-color: #101211; }
.about-page .abx-results-cards article:nth-child(2) p { color: #aeb4b0; }
.about-page .abx-results-cards article:nth-child(3) { background: #ff4d36; color: #fff; border-color: #ff4d36; }
.about-page .abx-results-cards article:nth-child(3) p { color: rgba(255,255,255,.78); }

.about-page .abx-studio-story { padding: 38px 0 clamp(110px,11vw,170px); background: #fff; }
.about-page .abx-studio-story > .abx-shell { width: min(1800px,calc(100% - 80px)); }
.about-page .abx-story-stage { min-height: 100vh; padding-top: 12px; overflow: hidden; background: #fff; }
.about-page .abx-story-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0 44px; }
.about-page .abx-story-rule { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #bfc4c1; transform-origin: left center; }
.about-page .abx-story-head p { margin: 0; color: #777e7a; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.about-page .abx-story-head h2 { margin: 0; color: #0b1110; font: 500 clamp(2.2rem,3.2vw,3.8rem)/1 var(--font-display); letter-spacing: -.05em; }
.about-page .abx-story-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: start; }
.about-page .abx-story-card:nth-child(2),
.about-page .abx-story-card:nth-child(3) { margin-top: 0; }
.about-page .abx-story-card img { display: block; width: 100%; aspect-ratio: .88; border-radius: 8px; object-fit: cover; filter: grayscale(1); }
.about-page .abx-story-card-copy { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; padding-top: 20px; color: #0b1110; }
.about-page .abx-story-card-copy span { grid-row: 1 / 3; padding-top: 5px; font: 700 10px var(--font-main); text-decoration: underline; }
.about-page .abx-story-card-copy h3 { margin: 0; font: 500 clamp(1.45rem,2vw,2rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.about-page .abx-story-card-copy p { max-width: 430px; margin: 10px 0 0; color: #5e6561; font-size: 14px; line-height: 1.5; }
.about-page .abx-story-quote { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(44px,6vw,110px); align-items: center; margin-top: 150px; }
.about-page .abx-story-quote > img { display: block; width: 100%; aspect-ratio: 1.12; border-radius: 8px; object-fit: cover; filter: grayscale(1); }
.about-page .abx-story-quote blockquote { margin: 0; color: #0b1110; }
.about-page .abx-story-quote blockquote > p { margin: 0; font: 500 clamp(2rem,3.2vw,3.7rem)/1.08 var(--font-display); letter-spacing: -.045em; }
.about-page .abx-story-quote footer { display: flex; flex-direction: column; margin-top: 32px; }
.about-page .abx-story-quote footer strong { font-size: 13px; }
.about-page .abx-story-quote footer span { margin-top: 4px; color: #777e7a; font-size: 12px; }

@media (min-width: 901px) {
  .about-page .abx-story-stage { box-sizing: border-box; height: 100vh; min-height: 680px; padding-top: clamp(82px,10vh,104px); }
  .about-page .abx-story-cards { position: relative; display: block; height: calc(100vh - 237px); min-height: 520px; }
  .about-page .abx-story-card { position: absolute; top: 0; left: 0; width: calc((100% - 28px) / 3); transform-origin: center top; will-change: transform, opacity, clip-path; backface-visibility: hidden; transform-style: preserve-3d; }
  .about-page .abx-story-card img { height: clamp(280px,42vh,420px); aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .about-page .abx-hero-grid { min-height: auto; padding: 138px 0 72px; }
  .about-page .abx-hero h1 { max-width: 760px; font-size: clamp(3.5rem, 12.6vw, 6.2rem); line-height: .92; }
  .about-page .abx-hero-intro { margin-top: 38px; }
  .about-page .abx-manifesto-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-page .abx-manifesto .abx-index { margin-top: 0; }
  .about-page .abx-hero-grid { width: calc(100% - 32px); grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; padding: 130px 0 60px; }
  .about-page .abx-eyebrow,
  .about-page .abx-hero h1,
  .about-page .abx-hero-intro { grid-column: 1; }
  .about-page .abx-hero-intro { margin-top: 38px; max-width: 560px; }
}

@media (max-width: 560px) {
  .about-page .abx-hero-grid { padding: 116px 0 58px; text-align: left; align-items: flex-start; }
  .about-page .abx-eyebrow { margin-bottom: 24px; }
  .about-page .abx-hero h1 { font-size: clamp(3.25rem, 14.5vw, 4.4rem); letter-spacing: -.065em; }
  .about-page .abx-hero h1 em { display: block; }
  .about-page .abx-hero-intro { margin-top: 30px; }
  .about-page .abx-hero-intro p { font-size: 15px; }
  .about-page .abx-hero-actions { justify-content: flex-start; flex-wrap: wrap; gap: 18px 24px; margin-top: 26px; }
  .about-page .abx-hero-actions > a { padding: 14px 18px; }
  .about-page .abx-hero-actions .abx-text-link { padding: 9px 0 6px; }
  .about-page .abx-manifesto h2 { font-size: clamp(2.8rem,12vw,4rem); }
  .about-page .abx-manifesto-copy { margin-top: 32px; }
  .about-page .abx-manifesto-actions,
  .about-page .about-footer-actions { align-items: flex-start; flex-wrap: wrap; }
  .about-page .abx-hero-grid { padding-top: 112px; }
  .about-page .abx-hero h1 { font-size: clamp(3.4rem,14.4vw,4.45rem); line-height: .92; }
  .about-page .abx-hero h1 em { font-size: .98em; line-height: .92; }
  .about-page .abx-hero-media { width: calc(100% - 24px); height: auto; min-height: 0; margin-top: 12px; }
  .about-page .abx-manifesto { padding: 28px 0 76px; }
  .about-page .abx-manifesto-grid { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 34px; padding-top: 28px; }
  .about-page .abx-manifesto-copy p { font-size: 1.08rem; line-height: 1.45; }
  .about-page .abx-studio-story > .abx-shell { width: calc(100% - 32px); }
  .about-page .abx-story-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .about-page .abx-story-cards { grid-template-columns: 1fr; gap: 54px; }
  .about-page .abx-story-card:nth-child(2),
  .about-page .abx-story-card:nth-child(3) { margin-top: 0; }
  .about-page .abx-story-card img { aspect-ratio: 1 / 1.08; }
  .about-page .abx-story-quote { grid-template-columns: 1fr; gap: 42px; margin-top: 90px; }
  .about-page .abx-story-quote blockquote > p { font-size: clamp(2rem,9vw,3rem); }
  .about-page .abx-story-stage { min-height: auto; overflow: visible; }
  .about-page .abx-statement-sequence { height: 220vh; }
  .about-page .abx-statement-stage { padding: 24px; }
  .about-page .abx-statement-stage h2 { font-size: clamp(3.2rem,15vw,4.7rem); line-height: .92; }
  .about-page .abx-statement-copy { font-size: clamp(2rem,9vw,3.1rem); line-height: 1.05; }
  .about-page .abx-statement-editorial { padding-bottom: 120px; }
  .about-page .abx-statement-editorial > .abx-shell,
  .about-page .abx-white-chapter > .abx-shell { width: calc(100% - 32px); }
  .about-page .abx-editorial-intro { grid-template-columns: 1fr; gap: 34px; }
  .about-page .abx-editorial-scroll-stage { height: 150vh; }
  .about-page .abx-editorial-intro { padding: 96px 0 56px; }
  .about-page .abx-editorial-label { margin: 0; }
  .about-page .abx-editorial-copy { font-size: clamp(1.85rem, 7.8vw, 2.6rem); line-height: 1.06; letter-spacing: -.045em; }
  .about-page .abx-editorial-media { grid-template-columns: 1fr; gap: 14px; margin-top: 72px; }
  .about-page .abx-editorial-media { max-width: none; margin-left: 0; }
  .about-page .abx-editorial-media img { aspect-ratio: 1.24 / 1; object-position: center 36%; }
  .about-page .abx-editorial-cta { padding: 28px 0 0; }
  .about-page .abx-team-list { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .about-page .abx-team-list article { padding: 16px 14px 22px; }
  .about-page .abx-team-list article + article { padding-left: 14px; }
  .about-page .abx-team-list article:nth-child(3) { padding-left: 14px; border-left: 0; }
  .about-page .abx-team-list span { margin-bottom: 28px; }
  .about-page .abx-white-chapter { padding-top: 100px; padding-bottom: 110px; }
  .about-page .abx-white-heading { grid-template-columns: 1fr; gap: 34px; }
  .about-page .abx-white-heading > p { margin: 0; }
  .about-page .abx-white-heading h2 { max-width: 12ch; padding-right: 0; font-size: clamp(2.4rem, 10.5vw, 3.6rem); line-height: .96; letter-spacing: -.055em; }
  .about-page .abx-white-services { margin-top: 80px; }
  .about-page .abx-white-services article { grid-template-columns: 1fr; gap: 24px; padding: 28px 0 32px; }
  .about-page .abx-white-services article > div { grid-template-columns: 1fr; gap: 18px; }
  .about-page .abx-white-services h3 { font-size: 1.8rem; }
  .about-page .abx-white-link { margin: 42px 0 0; }
  .about-page .abx-results { padding: 76px 0 110px; }
  .about-page .abx-results > .abx-shell { width: calc(100% - 32px); }
  .about-page .abx-results-head { min-height: 580px; grid-template-columns: 1fr; gap: 44px; }
  .about-page .abx-results-head h2 { font-size: clamp(4.4rem,19vw,6.6rem); }
  .about-page .abx-results-meta { grid-template-columns: 1fr 1.35fr; gap: 20px; padding-top: 0; }
  .about-page .abx-results-meta li { white-space: normal; }
  .about-page .abx-results-stats { grid-template-columns: 1fr 1fr; }
  .about-page .abx-results-stats article { min-height: 145px; border-bottom: 1px solid #d2d5d2; }
  .about-page .abx-results-stats article:nth-child(2) { border-right: 0; }
  .about-page .abx-results-cards { grid-template-columns: 1fr; gap: 12px; }
  .about-page .abx-results-cards article { min-height: 290px; }
  .about-page .abx-results-cards h3 { margin-top: 90px; }
}

/* ==========================================================================
   CONTACT PAGE HERO — DARK STYLE (Premium, polished)
   ========================================================================== */

.contact-page .cntx-hero--dark {
  position: relative;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid rgba(9,13,17,.07);
  overflow: hidden;
}

/* Soft red glow top-center */
.contact-page .cntx-hero--dark::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,53,26,.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle grid texture */
.contact-page .cntx-hero--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(9,13,17,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,13,17,.032) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Inner container ---- */
.cntx-hero-dark-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(130px, 15vh, 190px);
  padding-bottom: clamp(52px, 6vw, 80px);
  width: 100%;
}

/* ---- Location pill ---- */
.cntx-hero-dark-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px 7px 10px;
  border-radius: 999px;
  background: rgba(255,53,26,.06);
  border: 1px solid rgba(255,53,26,.18);
  color: #cc2a0f;
  font: 600 11.5px/1 var(--font-main);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.cntx-hero-dark-pill svg {
  width: 13px;
  height: 13px;
  color: #ff351a;
  flex-shrink: 0;
}

.cntx-hero-dark-pill .cntx-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff351a;
  box-shadow: 0 0 0 0 rgba(255,53,26,.5);
  animation: pulse-ring 2s ease-out infinite;
  flex-shrink: 0;
}

/* ---- Heading ---- */
.cntx-hero-dark-heading {
  margin: 0 0 24px;
  font: 700 clamp(3.2rem, 7.5vw, 8rem)/.88 var(--font-display);
  letter-spacing: -.06em;
  color: #090d11;
  text-wrap: balance;
  max-width: 920px;
}

.cntx-hero-dark-accent {
  display: inline-block;
  background: linear-gradient(130deg, #ff351a 0%, #ff5c3a 60%, #ff8060 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -.04em;
}

/* ---- Description ---- */
.cntx-hero-dark-desc {
  margin: 0 0 44px;
  color: #626a70;
  font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.75 var(--font-main);
  max-width: 500px;
}

/* ---- CTA row — overridden for white background ---- */
.cntx-hero-dark-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* Primary button override — dark on white */
.cntx-hero-dark-cta-row .hero-primary-btn {
  background: #090d11;
  border: none;
  box-shadow: 0 8px 24px rgba(9,13,17,.18);
  color: #fff !important;
}

.cntx-hero-dark-cta-row .hero-primary-btn:hover {
  background: #ff351a;
  box-shadow: 0 10px 28px rgba(255,53,26,.3);
}

.cntx-hero-dark-cta-row .hero-primary-btn .arrow-circle {
  background: rgba(255,255,255,.15);
}

.cntx-hero-dark-cta-row .hero-primary-btn:hover .arrow-circle {
  background: rgba(255,255,255,.2);
}

/* Secondary button override — dark text on white */
.cntx-hero-dark-cta-row .hero-secondary-btn {
  color: #090d11 !important;
}

/* ---- Stats strip ---- */
.cntx-hero-dark-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 22px 40px;
  border-radius: 18px;
  background: #f5f6f6;
  border: 1px solid rgba(9,13,17,.08);
  flex-wrap: wrap;
  row-gap: 16px;
}

.cntx-hero-dark-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 32px;
}

a.cntx-hero-dark-stat {
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}

a.cntx-hero-dark-stat:hover {
  transform: translateY(-2px);
}

a.cntx-hero-dark-stat:hover strong {
  color: var(--brand-red, #ff351a);
}

a.cntx-hero-dark-stat span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

a.cntx-hero-dark-stat svg {
  width: 10px;
  height: 10px;
  color: var(--brand-red, #ff351a);
}

.cntx-hero-dark-stat strong {
  font: 700 1.55rem/1 var(--font-display);
  color: #090d11;
  letter-spacing: -.025em;
  transition: color .2s ease;
}

.cntx-hero-dark-stat span {
  font: 500 10px/1.2 var(--font-main);
  color: #8490a0;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cntx-hero-dark-stat-line {
  width: 1px;
  height: 28px;
  background: rgba(9,13,17,.1);
  flex-shrink: 0;
}

/* ---- Scroll indicator ---- */
.cntx-hero-dark-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(9,13,17,.3);
  font: 500 10px/1 var(--font-main);
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}

.cntx-hero-dark-scroll svg {
  width: 16px;
  height: 16px;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(5px); }
}

/* Dark mode overrides for cntx-hero--dark */
[data-theme="dark"] .contact-page .cntx-hero--dark {
  background: #090b0c;
  border-bottom-color: rgba(255,255,255,.07);
}

[data-theme="dark"] .cntx-hero-dark-heading {
  color: #f7f7f2;
}

[data-theme="dark"] .cntx-hero-dark-desc {
  color: #a4a9ac;
}

[data-theme="dark"] .cntx-hero-dark-cta-row .hero-primary-btn {
  background: #f7f7f2;
  color: #090b0c !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

[data-theme="dark"] .cntx-hero-dark-cta-row .hero-primary-btn:hover {
  background: #ff351a;
  color: #fff !important;
}

[data-theme="dark"] .cntx-hero-dark-cta-row .hero-secondary-btn {
  color: #f7f7f2 !important;
}

[data-theme="dark"] .cntx-hero-dark-stats {
  background: #111516;
  border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] .cntx-hero-dark-stat strong {
  color: #f7f7f2;
}

[data-theme="dark"] .cntx-hero-dark-stat-line {
  background: rgba(255,255,255,.1);
}

[data-theme="dark"] .cntx-hero-dark-scroll {
  color: rgba(255,255,255,.4);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .cntx-hero-dark-heading {
    font-size: clamp(2.8rem, 12vw, 4.2rem);
    letter-spacing: -.05em;
  }

  .cntx-hero-dark-stats {
    padding: 18px 20px;
    gap: 0;
  }

  .cntx-hero-dark-stat { padding: 0 18px; }
}

@media (max-width: 560px) {
  .cntx-hero-dark-cta-row {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .cntx-hero-dark-stats {
    gap: 12px;
    padding: 16px;
  }

  .cntx-hero-dark-stat-line { display: none; }
  .cntx-hero-dark-stat { padding: 0 12px; }

  .cntx-hero-dark-scroll { display: none; }
}



/* Honest form delivery status */
.site-form-status { margin: 14px 0 0; color: currentColor; font: 500 .82rem/1.45 var(--font-main, sans-serif); opacity: .78; }
.site-form-status.is-error { color: #ff5b47; opacity: 1; }

/* Contact page finishing pass — balanced editorial layout and responsive form. */
.contact-page .cntx-hero--dark {
  min-height: clamp(680px, 86vh, 800px);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 57, 30, .12), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  box-shadow: inset 0 -1px rgba(9, 13, 17, .07);
}

.contact-page .cntx-hero-dark-inner {
  width: min(1320px, calc(100% - 64px));
  padding-top: clamp(138px, 16vh, 180px);
  padding-bottom: clamp(58px, 7vh, 78px);
}

.contact-page .cntx-hero-dark-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  padding: 10px 16px;
  border: 1px solid rgba(9, 13, 17, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 34px rgba(9, 13, 17, .06);
  color: rgba(9, 13, 17, .68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-page .cntx-hero-dark-pill-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #ff391e;
  box-shadow: 0 0 0 5px rgba(255, 57, 30, .11);
}

.contact-page .cntx-hero-dark-pill-separator {
  width: 1px;
  height: 13px;
  background: rgba(9, 13, 17, .14);
}

.contact-page .cntx-hero-dark-heading {
  max-width: 1040px;
  margin-bottom: 26px;
  font-size: clamp(4rem, 7vw, 7.45rem);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.contact-page .cntx-hero-dark-accent {
  color: #ff391e;
  background: linear-gradient(110deg, #ff391e 8%, #ef2f16 52%, #ff765e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-page .cntx-hero-dark-desc {
  max-width: 620px;
  margin-bottom: 34px;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.65;
}

.contact-page .cntx-hero-dark-cta-row {
  margin-bottom: 48px;
}

.contact-page .cntx-hero-dark-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  width: min(1160px, 100%);
  padding: 22px 18px;
  border-radius: 20px;
  border: 1px solid rgba(9, 13, 17, .07);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 22px 70px rgba(9, 13, 17, .075);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.contact-page .cntx-hero-dark-stat {
  min-width: 0;
  padding: 0 14px;
}

.contact-page .cntx-contact {
  padding: clamp(92px, 9vw, 140px) 0;
  background: #f4f5f1;
}

.contact-page .cntx-contact-grid {
  grid-template-columns: minmax(300px, .78fr) minmax(620px, 1.22fr);
  gap: clamp(48px, 6vw, 88px);
}

.contact-page .cntx-intro {
  top: 108px;
  padding-top: 8px;
}

.contact-page .cntx-intro h2 {
  max-width: 560px;
  margin: 26px 0 20px;
  font-size: clamp(2.8rem, 3.8vw, 4.2rem);
  line-height: 1.01;
}

.contact-page .cntx-intro-copy {
  max-width: 500px;
  font-size: 15px;
  line-height: 1.68;
}

.contact-page .cntx-direct-list {
  margin-top: clamp(40px, 4vw, 58px);
}

.contact-page .cntx-direct-list a {
  grid-template-columns: 104px minmax(0, 1fr) 22px;
  padding: 20px 0;
}

.contact-page .cntx-workspace {
  border: 1px solid rgba(8, 13, 15, .08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 13, 15, .085);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-page .cntx-workspace-top {
  padding: 18px 20px;
  background: #fbfbf9;
}

.contact-page .cntx-panel {
  padding: clamp(30px, 3.5vw, 48px);
}

.contact-page .cntx-panel-head {
  padding-bottom: 24px;
}

.contact-page .cntx-panel-title-wrap h3 {
  font-size: clamp(2rem, 2.7vw, 2.85rem);
}

.contact-page .cntx-form {
  gap: 20px;
  margin-top: 28px;
}

.contact-page .cntx-field input,
.contact-page .cntx-field select,
.contact-page .cntx-field textarea,
.contact-page .cntx-country-select-wrap select {
  background-color: #fff;
}

.contact-page .cntx-field input,
.contact-page .cntx-field select,
.contact-page .cntx-country-select-wrap select {
  min-height: 54px;
  height: 54px;
}

.contact-page .cntx-field textarea {
  min-height: 132px;
}

.contact-page .cntx-booking {
  grid-template-columns: minmax(245px, .72fr) minmax(430px, 1.28fr);
  border-radius: 20px;
  box-shadow: none;
}

.contact-page .cntx-booking-summary,
.contact-page .cntx-booking-picker {
  padding: 30px 26px;
}

.contact-page .cntx-date-row label,
.contact-page .cntx-time-grid label {
  position: relative;
  display: block;
  min-width: 0;
}

.contact-page .cntx-date-row input[type="radio"],
.contact-page .cntx-time-grid input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-page .cntx-date-row input[type="radio"]:focus-visible + span,
.contact-page .cntx-time-grid input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--cntx-accent, #ff3f28);
  outline-offset: 3px;
}

.contact-page .cntx-time-grid-expanded label > span {
  width: 100%;
}

.contact-page .cntx-faq {
  padding: clamp(84px, 9vw, 132px) 0;
}

.contact-page .cntx-faq > .cntx-shell {
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(52px, 7vw, 104px);
}

@media (max-width: 1100px) {
  .contact-page .cntx-contact-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .contact-page .cntx-intro {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    column-gap: 56px;
    align-items: start;
  }

  .contact-page .cntx-intro .cntx-kicker,
  .contact-page .cntx-intro h2,
  .contact-page .cntx-intro-copy {
    grid-column: 1;
  }

  .contact-page .cntx-direct-list {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }

  .contact-page .cntx-social-row {
    grid-column: 1 / -1;
  }

  .contact-page .cntx-faq > .cntx-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .contact-page .cntx-workspace-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .contact-page .cntx-tabs {
    width: 100%;
  }

  .contact-page .cntx-tab {
    flex: 1;
  }

  .contact-page .cntx-booking {
    grid-template-columns: 1fr;
  }

  .contact-page .cntx-booking-summary {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
}

@media (max-width: 760px) {
  .contact-page .cntx-hero--dark {
    min-height: auto;
  }

  .contact-page .cntx-hero-dark-inner {
    width: calc(100% - 32px);
    padding: 118px 0 44px;
  }

  .contact-page .cntx-hero-dark-pill {
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 12px;
    font-size: 9px;
    letter-spacing: .055em;
  }

  .contact-page .cntx-hero-dark-heading {
    max-width: 560px;
    margin-bottom: 20px;
    font-size: clamp(2.75rem, 12vw, 4.25rem);
    line-height: .93;
  }

  .contact-page .cntx-hero-dark-heading br {
    display: none;
  }

  .contact-page .cntx-hero-dark-desc {
    max-width: 480px;
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.6;
  }

  .contact-page .cntx-hero-dark-desc br {
    display: none;
  }

  .contact-page .cntx-hero-dark-cta-row {
    width: 100%;
    margin-bottom: 34px;
  }

  .contact-page .cntx-hero-dark-cta-row .hero-primary-btn,
  .contact-page .cntx-hero-dark-cta-row .hero-secondary-btn {
    justify-content: center;
    width: 100%;
  }

  .contact-page .cntx-hero-dark-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
  }

  .contact-page .cntx-hero-dark-stat-line {
    display: none;
  }

  .contact-page .cntx-hero-dark-stat {
    min-height: 84px;
    justify-content: center;
    padding: 15px 10px;
    border-right: 1px solid rgba(9, 13, 17, .08);
    border-bottom: 1px solid rgba(9, 13, 17, .08);
  }

  .contact-page .cntx-hero-dark-stat:nth-child(3),
  .contact-page .cntx-hero-dark-stat:nth-child(7) {
    border-right: 0;
  }

  .contact-page .cntx-hero-dark-stat--link {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .contact-page .cntx-contact {
    padding: 64px 0 80px;
  }

  .contact-page .cntx-intro {
    display: block;
  }

  .contact-page .cntx-intro h2 {
    margin-top: 22px;
    font-size: clamp(2.35rem, 10vw, 3.25rem);
  }

  .contact-page .cntx-direct-list {
    margin-top: 30px;
  }

  .contact-page .cntx-workspace {
    border-radius: 20px;
  }

  .contact-page .cntx-workspace-top {
    padding: 15px;
  }

  .contact-page .cntx-panel {
    padding: 24px 16px 28px;
  }

  .contact-page .cntx-panel-title-wrap h3 {
    font-size: clamp(1.9rem, 8.5vw, 2.45rem);
  }

  .contact-page .cntx-field input,
  .contact-page .cntx-field select,
  .contact-page .cntx-field textarea,
  .contact-page .cntx-country-select-wrap select {
    font-size: 16px;
  }

  .contact-page .cntx-booking {
    grid-template-columns: 1fr;
  }

  .contact-page .cntx-booking-summary,
  .contact-page .cntx-booking-picker {
    padding: 24px 16px;
  }

  .contact-page .cntx-picker-header {
    align-items: flex-start;
    gap: 10px;
  }

  .contact-page .cntx-faq {
    padding: 68px 0 84px;
  }
}

@media (max-width: 430px) {
  .contact-page .cntx-phone-input-wrap {
    flex-direction: column;
  }

  .contact-page .cntx-country-select-wrap {
    flex-basis: auto;
    width: 100%;
  }

  .contact-page .cntx-social-row > span {
    flex-basis: 100%;
  }

  .contact-page .cntx-date-row.cntx-date-week {
    grid-template-columns: repeat(7, 52px);
  }
}

/* Homepage navigation: use the original black header only before scrolling. */
.home-page .main-navbar-wrapper.at-top {
  padding: 0 !important;
  background: rgba(7, 9, 10, .70) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
}

.home-page .main-navbar-wrapper.at-top .main-navbar {
  width: auto !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-page .main-navbar-wrapper.at-top .nav-item,
.home-page .main-navbar-wrapper.at-top .dropdown-trigger,
.home-page .main-navbar-wrapper.at-top .dropdown-trigger-link {
  color: rgba(255, 255, 255, .72) !important;
}

.home-page .main-navbar-wrapper.at-top .nav-item:hover,
.home-page .main-navbar-wrapper.at-top .nav-item.active,
.home-page .main-navbar-wrapper.at-top .dropdown-trigger:hover,
.home-page .main-navbar-wrapper.at-top .dropdown-trigger-link:hover {
  color: #fff !important;
}

.home-page .main-navbar-wrapper.at-top .brand-header-logo-white {
  display: block !important;
}

.home-page .main-navbar-wrapper.at-top .brand-header-logo-dark {
  display: none !important;
}

.home-page .main-navbar-wrapper.at-top .hamburger-btn,
.home-page .main-navbar-wrapper.at-top .hamburger-btn svg,
.home-page .main-navbar-wrapper.at-top .hamburger-btn i {
  color: #fff !important;
  stroke: #fff !important;
}

@media (max-width: 767px) {
  .home-page .main-navbar-wrapper.at-top .main-navbar {
    padding: 12px 18px !important;
  }
}

/* ========================================================================== 
   ABOUT PAGE FINISHING PASS — balanced spacing, shorter pins, cleaner mobile
   ========================================================================== */

/* Keep the About header consistent with the flat inner-page navigation. */
.about-page .main-navbar-wrapper,
.about-page .main-navbar-wrapper.at-top {
  box-shadow: none !important;
}

.about-page .main-navbar-wrapper.scrolled .main-navbar {
  box-shadow: none !important;
}

.about-page .abx-hero-grid,
.about-page .abx-results > .abx-shell,
.about-page .abx-studio-story > .abx-shell,
.about-page .abx-statement-editorial > .abx-shell,
.about-page .abx-white-chapter > .abx-shell {
  max-width: 1720px;
}

.about-page .abx-results-head {
  min-height: clamp(340px, 34vw, 500px);
}

.about-page .abx-results-head h2 {
  font-size: clamp(4.7rem, 7.6vw, 8.75rem);
}

.about-page .abx-story-quote {
  margin-top: clamp(92px, 9vw, 130px);
}

.about-page .abx-statement-sequence {
  height: 210vh;
}

.about-page .abx-editorial-scroll-stage {
  height: 150vh;
}

.about-page .abx-editorial-copy {
  max-width: 1280px;
}

.about-page .abx-white-chapter {
  padding-top: clamp(96px, 10vw, 160px);
  padding-bottom: clamp(96px, 10vw, 150px);
}

.about-page .abx-white-heading h2 {
  max-width: 980px;
  padding-right: 0;
  font-size: clamp(3rem, 4.25vw, 5.55rem);
}

.about-page .abx-white-services {
  margin-top: clamp(72px, 8vw, 120px);
}

@media (min-width: 901px) {
  .about-page .abx-hero-media {
    height: 124vh;
  }

  .about-page .abx-hero-media img {
    height: min(68vh, 620px);
  }
}

@media (max-width: 900px) {
  .about-page .abx-statement-sequence {
    height: 185vh;
  }

  .about-page .abx-editorial-scroll-stage {
    height: 135vh;
  }

  .about-page .abx-results-head {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 72px;
  }

  .about-page .abx-results-meta {
    justify-self: start;
    padding-top: 0;
  }

  .about-page .abx-editorial-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .about-page .abx-editorial-cta {
    grid-column: 1 / -1;
    padding: 28px 0 0;
  }
}

@media (max-width: 560px) {
  .about-page .abx-hero-grid {
    padding: 104px 0 48px;
  }

  .about-page .abx-hero h1 {
    max-width: 9.5ch;
    font-size: clamp(3rem, 13.4vw, 4.05rem);
    line-height: .94;
  }

  .about-page .abx-hero-intro {
    margin-top: 26px;
  }

  .about-page .abx-hero-media img {
    height: clamp(220px, 58vw, 310px);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 40%;
  }

  .about-page .abx-studio-story {
    padding-top: 24px;
    padding-bottom: 90px;
  }

  .about-page .abx-story-head {
    padding-bottom: 34px;
  }

  .about-page .abx-story-cards {
    gap: 46px;
  }

  .about-page .abx-story-quote {
    margin-top: 72px;
  }

  .about-page .abx-statement-sequence {
    height: 165vh;
  }

  .about-page .abx-statement-stage {
    padding: 20px;
  }

  .about-page .abx-statement-stage h2 {
    font-size: clamp(3rem, 13.5vw, 4.2rem);
  }

  .about-page .abx-statement-copy {
    max-width: 12ch;
    font-size: clamp(1.9rem, 8.4vw, 2.7rem);
  }

  .about-page .abx-statement-editorial {
    padding-bottom: 88px;
  }

  .about-page .abx-editorial-scroll-stage {
    height: 122vh;
  }

  .about-page .abx-editorial-intro {
    padding: 82px 0 48px;
  }

  .about-page .abx-editorial-copy {
    font-size: clamp(1.7rem, 7.25vw, 2.25rem);
    line-height: 1.08;
  }

  .about-page .abx-editorial-media {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 54px;
  }

  .about-page .abx-editorial-media img {
    aspect-ratio: 1.32 / 1;
  }

  .about-page .abx-editorial-cta {
    grid-column: auto;
  }

  .about-page .abx-team-list {
    margin-top: 42px;
  }

  .about-page .abx-white-chapter {
    padding-top: 82px;
    padding-bottom: 88px;
  }

  .about-page .abx-white-heading {
    gap: 28px;
  }

  .about-page .abx-white-heading h2 {
    max-width: 11ch;
    font-size: clamp(2.3rem, 9.8vw, 3.2rem);
  }

  .about-page .abx-white-services {
    margin-top: 62px;
  }

  .about-page .abx-results {
    padding: 68px 0 92px;
  }

  .about-page .abx-results-head {
    min-height: 0;
    gap: 36px;
    margin-bottom: 62px;
  }

  .about-page .abx-results-head h2 {
    font-size: clamp(3.8rem, 17vw, 5.35rem);
  }

  .about-page .abx-results-meta {
    width: 100%;
  }

  .about-page .abx-results-cards article {
    min-height: 255px;
  }

  .about-page .abx-results-cards h3 {
    margin-top: 68px;
  }
}

@media (max-width: 420px) {
  .about-page .abx-team-list {
    grid-template-columns: 1fr;
  }

  .about-page .abx-team-list article,
  .about-page .abx-team-list article + article,
  .about-page .abx-team-list article:nth-child(3) {
    padding: 18px 0 22px;
    border-left: 0;
  }

  .about-page .abx-team-list span {
    margin-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .abx-statement-sequence,
  .about-page .abx-editorial-scroll-stage {
    height: auto;
  }

  .about-page .abx-statement-stage {
    position: relative;
    min-height: 72vh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 52px;
  }

  .about-page .abx-statement-copy {
    opacity: 1;
  }

  .about-page .abx-editorial-intro {
    position: relative;
    min-height: 0;
  }

  .about-page .abx-editorial-copy > span {
    color: #111;
  }
}

/* ========================================================================== 
   SERVICES — editorial directory inspired by leading creative-service sites
   ========================================================================== */

.services-page {
  background: #f5f5f1;
  color: #0a0d0c;
}

.services-page main {
  overflow: clip;
  background: #f5f5f1;
}

.services-page .main-navbar-wrapper,
.services-page .main-navbar-wrapper.at-top {
  box-shadow: none !important;
}

.services-page .svc-hero {
  min-height: min(900px, 100svh);
  padding: 164px 0 94px;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(circle at 91% 12%, rgba(255, 76, 54, .42), transparent 28%),
    radial-gradient(circle at 68% 105%, rgba(255, 76, 54, .18), transparent 34%),
    #090b0b;
  color: #fff;
}

.services-page .svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.68), transparent 92%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.68), transparent 92%);
  pointer-events: none;
}

.services-page .svc-hero::after {
  display: none;
}

.services-page .svc-hero .pg-hero-container {
  position: relative;
  z-index: 1;
  width: min(1720px, calc(100% - 80px));
  min-height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .55fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(54px, 7vw, 130px);
  align-items: end;
}

.services-page .svc-hero .section-badge-label {
  grid-column: 1 / -1;
  align-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.services-page .svc-hero .badge-dot {
  background: #ff4d36;
  box-shadow: 0 0 0 5px rgba(255,77,54,.14);
}

.services-page .svc-hero .badge-text {
  color: rgba(255,255,255,.58);
}

.services-page .svc-hero .pg-hero-title {
  grid-column: 1;
  max-width: 11.5ch;
  margin: clamp(70px, 10vh, 120px) 0 0;
  color: #f7f7f3;
  font-family: var(--font-main);
  font-size: clamp(4.8rem, 7.7vw, 9.3rem);
  font-weight: 420;
  line-height: .86;
  letter-spacing: -.078em;
}

.services-page .svc-hero .pg-hero-title span {
  display: block;
  color: #ff5a43;
}

.services-page .svc-hero-aside {
  grid-column: 2;
  align-self: end;
  padding-bottom: 12px;
}

.services-page .svc-hero .pg-hero-desc {
  max-width: 510px;
  margin: 0;
  color: rgba(255,255,255,.67);
  font-size: clamp(.98rem, 1.12vw, 1.18rem);
  line-height: 1.65;
}

.services-page .svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.services-page .svc-hero-actions a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px;
  border-radius: 999px;
  font: 700 .8rem/1 var(--font-main);
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.services-page .svc-hero-actions a:hover {
  transform: translateY(-2px);
}

.services-page .svc-hero-primary {
  background: #ff4d36;
  color: #fff;
}

.services-page .svc-hero-secondary {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.services-page .svc-hero-actions svg {
  width: 16px;
  height: 16px;
}

.services-page .svc-hero .pg-hero-meta {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: clamp(70px, 9vh, 110px);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.services-page .svc-hero .pg-hero-meta span {
  color: rgba(255,255,255,.52);
}

.services-page .svc-hero .pg-hero-meta strong {
  color: #fff;
}

.services-page .svc-overview-intro {
  position: relative;
  z-index: 3;
  padding: clamp(100px, 11vw, 170px) 0 0;
  background: #f5f5f1;
}

.services-page .svc-overview-shell {
  width: min(1720px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(0, 10fr);
  gap: 36px;
  align-items: start;
}

.services-page .svc-overview-label,
.services-page .svc-difference-label {
  margin: .7em 0 0;
  color: #767a77;
  font: 700 .72rem/1 var(--font-main);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.services-page .svc-overview-copy h2 {
  max-width: 1100px;
  margin: 0;
  font: 450 clamp(3.1rem, 5vw, 6.1rem)/.93 var(--font-main);
  letter-spacing: -.066em;
}

.services-page .svc-overview-copy > p {
  max-width: 760px;
  margin: 38px 0 0;
  color: #5e6460;
  font: 400 clamp(1rem, 1.28vw, 1.24rem)/1.55 var(--font-main);
}

.services-page .svc-jump-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  margin-top: clamp(76px, 9vw, 130px);
  border-top: 1px solid #d1d4d0;
  border-bottom: 1px solid #d1d4d0;
  background: rgba(245,245,241,.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.services-page .svc-jump-inner {
  width: min(1720px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.services-page .svc-jump-nav a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-right: 1px solid #d1d4d0;
  color: #6c716d;
  font: 650 .74rem/1.15 var(--font-main);
  text-align: center;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.services-page .svc-jump-nav a:first-child {
  border-left: 1px solid #d1d4d0;
}

.services-page .svc-jump-nav a:hover,
.services-page .svc-jump-nav a.is-active {
  background: #0c0e0d;
  color: #fff;
}

.services-page .svc-list-section {
  padding: 0 0 clamp(120px, 13vw, 210px);
  background: #f5f5f1;
}

.services-page .svc-container {
  width: min(1720px, calc(100% - 80px));
  gap: 0;
}

.services-page .svc-detail-card {
  scroll-margin-top: 150px;
  position: relative;
  overflow: visible;
  padding: clamp(88px, 9vw, 145px) 0;
  border: 0;
  border-top: 1px solid #bfc3bf;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.services-page .svc-detail-card:first-child {
  border-top: 0;
}

.services-page .svc-detail-card::before {
  display: none;
}

.services-page .svc-detail-card:hover {
  transform: none;
  border-color: #bfc3bf;
  box-shadow: none;
}

.services-page .svc-card-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 clamp(52px, 6vw, 90px);
  padding: 0;
  border: 0;
}

.services-page .svc-title-wrapper {
  display: grid;
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1.58fr);
  gap: 32px;
  align-items: start;
}

.services-page .svc-num {
  padding-top: .65em;
  color: #777c78;
  font: 700 .72rem/1 var(--font-main);
  letter-spacing: .08em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.services-page .svc-category-pill {
  padding-top: .7em;
  color: #737874;
  font: 700 .72rem/1.25 var(--font-main);
  letter-spacing: .12em;
}

.services-page .svc-title {
  max-width: 930px;
  margin: 0;
  color: #0b0d0c;
  font: 470 clamp(2.8rem, 4.6vw, 5.8rem)/.92 var(--font-main);
  letter-spacing: -.064em;
}

.services-page .svc-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, .62fr);
  gap: clamp(42px, 6vw, 96px);
}

.services-page .svc-col-main {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(38px, 5vw, 84px);
  align-items: start;
}

.services-page .svc-overview {
  max-width: 450px;
  margin: 0;
  color: #5c625e;
  font: 400 clamp(1rem, 1.16vw, 1.16rem)/1.58 var(--font-main);
}

.services-page .svc-deliverables h4,
.services-page .svc-benefits-box h4 {
  margin: 0 0 18px;
  color: inherit;
  font: 700 .7rem/1 var(--font-main);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.services-page .svc-deliverables ul {
  gap: 0;
}

.services-page .svc-deliverables li {
  position: relative;
  min-height: 68px;
  padding: 21px 46px 21px 0;
  border-top: 1px solid #c9ccc9;
  color: #111412;
  font: 520 clamp(1rem, 1.22vw, 1.28rem)/1.25 var(--font-main);
  opacity: 1;
  transition: padding-left .25s ease, color .25s ease;
}

.services-page .svc-deliverables li:last-child {
  border-bottom: 1px solid #c9ccc9;
}

.services-page .svc-deliverables li::after {
  content: "↗";
  position: absolute;
  top: 50%;
  right: 4px;
  color: #8a8e8b;
  transform: translateY(-50%);
  transition: color .25s ease, transform .25s ease;
}

.services-page .svc-deliverables li:hover {
  padding-left: 10px;
  color: #ff4d36;
}

.services-page .svc-deliverables li:hover::after {
  color: #ff4d36;
  transform: translate(3px, calc(-50% - 3px));
}

.services-page .svc-deliverables li svg {
  display: none;
}

.services-page .svc-benefits-box {
  min-height: 290px;
  padding: 28px;
  border: 0;
  border-radius: 10px;
  background: #0b0d0c;
  color: #fff;
}

.services-page .svc-detail-card:nth-child(even) .svc-benefits-box {
  background: #ff4d36;
  color: #111;
}

.services-page .svc-benefits-box p {
  margin: 0 0 36px;
  color: rgba(255,255,255,.68);
  font-size: .96rem;
  line-height: 1.58;
  opacity: 1;
}

.services-page .svc-detail-card:nth-child(even) .svc-benefits-box p {
  color: rgba(17,17,17,.7);
}

.services-page .svc-cta-link {
  justify-content: space-between;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.2);
  color: #fff !important;
  font: 700 .76rem/1 var(--font-main);
  text-transform: uppercase;
}

.services-page .svc-detail-card:nth-child(even) .svc-cta-link {
  border-color: rgba(17,17,17,.22);
  color: #111 !important;
}

.services-page .svc-cta-link:hover {
  gap: 20px;
}

.services-page .svc-difference {
  padding: clamp(110px, 12vw, 190px) 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,77,54,.26), transparent 32%),
    #0a0c0b;
  color: #fff;
}

.services-page .svc-difference-shell {
  width: min(1720px, calc(100% - 80px));
  margin: 0 auto;
}

.services-page .svc-difference-label {
  color: rgba(255,255,255,.45);
}

.services-page .svc-difference h2 {
  max-width: 1240px;
  margin: 34px 0 0;
  color: #f5f5f1;
  font: 430 clamp(3.1rem, 5.5vw, 7rem)/.91 var(--font-main);
  letter-spacing: -.068em;
}

.services-page .svc-difference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(90px, 10vw, 150px);
  border-top: 1px solid rgba(255,255,255,.2);
}

.services-page .svc-difference-grid article {
  min-height: 270px;
  padding: 26px 28px 30px 0;
  border-right: 1px solid rgba(255,255,255,.2);
}

.services-page .svc-difference-grid article + article {
  padding-left: 28px;
}

.services-page .svc-difference-grid article:last-child {
  border-right: 0;
}

.services-page .svc-difference-grid span {
  color: #ff5a43;
  font: 700 .7rem/1 var(--font-main);
}

.services-page .svc-difference-grid h3 {
  margin: 86px 0 16px;
  font: 500 clamp(1.4rem, 2vw, 2.2rem)/1 var(--font-main);
  letter-spacing: -.04em;
}

.services-page .svc-difference-grid p {
  max-width: 340px;
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: .94rem;
  line-height: 1.55;
}

.services-page .svc-difference-cta {
  width: fit-content;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 34px;
  margin-top: 58px;
  padding: 15px 20px;
  border-radius: 999px;
  background: #ff4d36;
  color: #fff;
  font: 700 .8rem/1 var(--font-main);
  text-decoration: none;
}

.services-page .svc-difference-cta svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 1180px) {
  .services-page .svc-title-wrapper {
    grid-template-columns: 145px minmax(0, 1fr);
  }

  .services-page .svc-card-grid {
    grid-template-columns: 1fr;
  }

  .services-page .svc-benefits-box {
    min-height: 240px;
  }
}

@media (max-width: 900px) {
  .services-page .svc-hero {
    min-height: 0;
    padding: 140px 0 82px;
  }

  .services-page .svc-hero .pg-hero-container {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
  }

  .services-page .svc-hero .pg-hero-title,
  .services-page .svc-hero-aside {
    grid-column: 1;
  }

  .services-page .svc-hero .pg-hero-title {
    max-width: 12ch;
    margin-top: 72px;
    font-size: clamp(4rem, 11.5vw, 7rem);
  }

  .services-page .svc-hero-aside {
    margin-top: 44px;
    padding: 0;
  }

  .services-page .svc-overview-shell {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .services-page .svc-overview-label {
    margin: 0;
  }

  .services-page .svc-jump-inner {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .services-page .svc-jump-inner::-webkit-scrollbar {
    display: none;
  }

  .services-page .svc-jump-nav a {
    flex: 0 0 auto;
    min-width: 176px;
  }

  .services-page .svc-container,
  .services-page .svc-difference-shell {
    width: calc(100% - 40px);
  }

  .services-page .svc-title-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .services-page .svc-col-main {
    grid-template-columns: 1fr;
  }

  .services-page .svc-overview {
    max-width: 700px;
  }

  .services-page .svc-difference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-page .svc-difference-grid article:nth-child(2) {
    border-right: 0;
  }

  .services-page .svc-difference-grid article:nth-child(3),
  .services-page .svc-difference-grid article:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,.2);
  }

  .services-page .svc-difference-grid article:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .services-page .svc-hero {
    padding: 112px 0 66px;
  }

  .services-page .svc-hero .pg-hero-container,
  .services-page .svc-overview-shell,
  .services-page .svc-container,
  .services-page .svc-difference-shell {
    width: calc(100% - 32px);
  }

  .services-page .svc-hero .section-badge-label {
    align-items: center;
  }

  .services-page .svc-hero .pg-hero-title {
    margin-top: 54px;
    font-size: clamp(3.35rem, 14.5vw, 4.8rem);
    line-height: .9;
  }

  .services-page .svc-hero .pg-hero-desc {
    font-size: .96rem;
  }

  .services-page .svc-hero-actions {
    flex-direction: column;
  }

  .services-page .svc-hero-actions a {
    width: 100%;
  }

  .services-page .svc-hero .pg-hero-meta {
    margin-top: 58px;
  }

  .services-page .svc-overview-intro {
    padding-top: 82px;
  }

  .services-page .svc-overview-copy h2 {
    font-size: clamp(2.65rem, 11.7vw, 3.75rem);
  }

  .services-page .svc-overview-copy > p {
    margin-top: 28px;
  }

  .services-page .svc-jump-nav {
    top: 64px;
    margin-top: 72px;
  }

  .services-page .svc-jump-nav a {
    min-width: 158px;
    min-height: 58px;
  }

  .services-page .svc-detail-card {
    scroll-margin-top: 128px;
    padding: 72px 0;
  }

  .services-page .svc-card-header {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 46px;
  }

  .services-page .svc-num {
    padding-top: 0;
  }

  .services-page .svc-category-pill {
    padding-top: 0;
  }

  .services-page .svc-title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
    line-height: .94;
  }

  .services-page .svc-col-main,
  .services-page .svc-card-grid {
    gap: 38px;
  }

  .services-page .svc-deliverables li {
    min-height: 62px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 1rem;
  }

  .services-page .svc-benefits-box {
    min-height: 250px;
    padding: 24px;
  }

  .services-page .svc-difference {
    padding: 88px 0;
  }

  .services-page .svc-difference h2 {
    font-size: clamp(2.65rem, 11vw, 3.8rem);
  }

  .services-page .svc-difference-grid {
    grid-template-columns: 1fr;
    margin-top: 68px;
  }

  .services-page .svc-difference-grid article,
  .services-page .svc-difference-grid article + article,
  .services-page .svc-difference-grid article:nth-child(3) {
    min-height: 220px;
    padding: 24px 0 26px;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.2);
  }

  .services-page .svc-difference-grid h3 {
    margin-top: 60px;
  }

  .services-page .svc-difference-cta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .svc-hero-actions a,
  .services-page .svc-deliverables li,
  .services-page .svc-deliverables li::after {
    transition: none;
  }
}

/* ========================================================================== 
   SITE TYPOGRAPHY — one consistent family across every page and component
   ========================================================================== */
html,
body,
body * {
  font-family: var(--font-main) !important;
}

body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ========================================================================== 
   INSIGHTS — editorial redesign
   ========================================================================== */
.insights-page {
  --ins-ink: #101414;
  --ins-paper: #f2f0e9;
  --ins-coral: #ff4934;
}

.insights-page .ins-editorial-hero {
  min-height: min(880px, 94vh);
  padding: 0;
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 73, 52, .15), transparent 25%),
    #ece9e0;
  color: var(--ins-ink);
  overflow: hidden;
}

.insights-page .ins-editorial-hero::before {
  top: 12%;
  right: -10%;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(16, 20, 20, .09);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
}

.insights-page .ins-editorial-hero::after {
  content: "JOURNAL";
  right: -0.035em;
  bottom: -.12em;
  left: auto;
  color: rgba(16, 20, 20, .045);
  font-size: clamp(8rem, 20vw, 22rem);
  letter-spacing: -.09em;
}

.insights-page .ins-editorial-hero .pg-hero-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
  align-content: center;
  column-gap: clamp(48px, 8vw, 130px);
  width: min(1380px, calc(100% - 64px));
  min-height: inherit;
  padding: 150px 0 94px;
}

.insights-page .ins-editorial-hero .section-badge-label,
.insights-page .ins-editorial-hero .pg-hero-title,
.insights-page .ins-editorial-hero .pg-hero-desc,
.insights-page .ins-editorial-hero .pg-hero-meta {
  grid-column: 1;
}

.insights-page .ins-editorial-hero .pg-hero-title {
  max-width: 1040px;
  margin: 34px 0 30px;
  color: var(--ins-ink);
  font-size: clamp(4rem, 7vw, 8.2rem);
  font-weight: 520;
  line-height: .9;
  letter-spacing: -.075em;
}

.insights-page .ins-editorial-hero .pg-hero-desc {
  max-width: 720px;
  color: #5d6461;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
}

.insights-page .ins-editorial-hero .pg-hero-meta {
  width: min(720px, 100%);
  margin-top: 50px;
  padding-top: 18px;
  border-top-color: rgba(16, 20, 20, .14);
}

.insights-page .ins-hero-edition {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  padding: 30px;
  border: 1px solid rgba(16, 20, 20, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.insights-page .ins-hero-edition span,
.insights-page .ins-library-index {
  color: var(--ins-coral);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.insights-page .ins-hero-edition strong {
  display: block;
  margin: 70px 0 18px;
  font-size: clamp(1.55rem, 2.25vw, 2.5rem);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.insights-page .ins-hero-edition p {
  margin: 0;
  color: #626865;
  font-size: 14px;
  line-height: 1.6;
}

.insights-page .ins-topic-bar {
  position: relative;
  z-index: 5;
  width: min(940px, calc(100% - 48px));
  margin: -29px auto 0;
  border: 1px solid rgba(16, 20, 20, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 50px rgba(16, 20, 20, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.insights-page .ins-featured-section {
  padding: clamp(96px, 10vw, 150px) 0 64px;
  background: var(--ins-paper);
}

.insights-page .ins-hero-card {
  grid-template-columns: minmax(0, 1.22fr) minmax(380px, .78fr);
  min-height: 650px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--ins-ink);
  color: #fff;
  box-shadow: 0 30px 80px rgba(16, 20, 20, .13);
}

.insights-page .ins-hero-media {
  min-height: 650px;
}

.insights-page .ins-hero-content {
  justify-content: center;
  padding: clamp(40px, 5vw, 76px);
}

.insights-page .ins-hero-content h2,
.insights-page .ins-hero-content p,
.insights-page .ins-hero-content .ins-meta {
  color: inherit;
}

.insights-page .ins-hero-content h2 {
  margin-top: 28px;
  font-weight: 520;
}

.insights-page .ins-hero-content p,
.insights-page .ins-hero-content .ins-meta {
  color: rgba(255, 255, 255, .64);
}

.insights-page .ins-grid-section {
  padding: 64px 0 clamp(110px, 12vw, 180px);
  background: var(--ins-paper);
}

.insights-page .ins-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-top: 36px;
  border-top: 1px solid rgba(16, 20, 20, .16);
}

.insights-page .ins-library-head h2 {
  max-width: 780px;
  margin: 18px 0 0;
  color: var(--ins-ink);
  font-size: clamp(3rem, 5.5vw, 6.6rem);
  font-weight: 520;
  line-height: .92;
  letter-spacing: -.07em;
}

.insights-page .ins-library-head > p {
  max-width: 470px;
  margin: 0;
  color: #626865;
  font-size: 15px;
  line-height: 1.7;
}

.insights-page .ins-grid {
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}

.insights-page .ins-card {
  overflow: hidden;
  border: 1px solid rgba(16, 20, 20, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
  box-shadow: none;
}

.insights-page .ins-card:first-child {
  grid-row: span 3;
}

.insights-page .ins-card:first-child .ins-card-media {
  height: 520px;
}

.insights-page .ins-card:not(:first-child) {
  display: grid;
  grid-template-columns: 42% 58%;
}

.insights-page .ins-card:not(:first-child) .ins-card-media {
  height: 100%;
  min-height: 310px;
}

.insights-page .ins-card-body {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.insights-page .ins-card-title {
  margin-top: 24px;
  font-weight: 550;
}

.insights-page .ins-card .ins-meta {
  margin-top: auto;
  padding-top: 26px;
}

.insights-page .ins-card-link {
  display: inline-flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 20, 20, .11);
  color: var(--ins-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.insights-page .ins-card-link span {
  transition: transform .25s ease;
}

.insights-page .ins-card:hover .ins-card-link span {
  transform: translate(3px, -3px);
}

/* The compact editorial library replaces the repeated cinematic carousel. */
.insights-page .fp-section--insights {
  display: none;
}

.insights-page .ins-newsletter-section {
  padding: clamp(90px, 10vw, 150px) 0;
  background: #fff;
}

.insights-page .ins-nl-card {
  position: relative;
  max-width: 1180px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 73, 52, .34), transparent 34%),
    var(--ins-ink);
}

@media (max-width: 980px) {
  .insights-page .ins-editorial-hero .pg-hero-container {
    grid-template-columns: 1fr;
  }

  .insights-page .ins-hero-edition {
    grid-column: 1;
    grid-row: auto;
    width: min(520px, 100%);
    margin-top: 42px;
  }

  .insights-page .ins-hero-edition strong {
    margin-top: 35px;
  }

  .insights-page .ins-hero-card {
    grid-template-columns: 1fr;
  }

  .insights-page .ins-hero-media {
    min-height: 480px;
  }

  .insights-page .ins-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insights-page .ins-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .insights-page .ins-card:not(:first-child) {
    display: block;
  }

  .insights-page .ins-card:not(:first-child) .ins-card-media {
    height: 300px;
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .insights-page .ins-editorial-hero {
    min-height: auto;
  }

  .insights-page .ins-editorial-hero .pg-hero-container {
    width: calc(100% - 32px);
    padding: 128px 0 78px;
  }

  .insights-page .ins-editorial-hero .pg-hero-title {
    margin: 26px 0 24px;
    font-size: clamp(3.25rem, 15vw, 5rem);
  }

  .insights-page .ins-editorial-hero .pg-hero-meta {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .insights-page .ins-hero-edition {
    margin-top: 32px;
    padding: 24px;
    border-radius: 18px;
  }

  .insights-page .ins-topic-bar {
    justify-content: flex-start;
    width: calc(100% - 24px);
    margin-top: -25px;
    padding-inline: 8px;
    border-radius: 16px;
  }

  .insights-page .ins-featured-section {
    padding-top: 72px;
  }

  .insights-page .ins-hero-card,
  .insights-page .ins-card,
  .insights-page .ins-nl-card {
    border-radius: 6px;
  }

  .insights-page .ins-hero-media {
    min-height: 340px;
  }

  .insights-page .ins-hero-content {
    padding: 32px 24px 36px;
  }

  .insights-page .ins-hero-content h2 {
    font-size: clamp(2.3rem, 10.5vw, 3.25rem);
  }

  .insights-page .ins-library-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .insights-page .ins-library-head h2 {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
  }

  .insights-page .ins-grid {
    grid-template-columns: 1fr;
  }

  .insights-page .ins-card:first-child .ins-card-media,
  .insights-page .ins-card:not(:first-child) .ins-card-media {
    height: 270px;
  }

  .insights-page .ins-card-body {
    padding: 24px 20px;
  }

  .insights-page .ins-nl-card {
    padding: 52px 22px;
  }
}

/* Insights experimental layer — bold motion with mobile restraint. */
.insights-page .ins-editorial-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 83% 23%, rgba(255, 63, 40, .4), transparent 22%),
    radial-gradient(circle at 66% 72%, rgba(170, 112, 255, .19), transparent 27%),
    linear-gradient(125deg, #f3f0e5 0%, #eee9dc 58%, #ffd7ca 100%);
}

.insights-page .ins-editorial-hero .pg-hero-container {
  z-index: 3;
}

.insights-page .ins-editorial-hero .pg-hero-title {
  max-width: 1120px;
  text-transform: uppercase;
  text-shadow: 0 .04em 0 rgba(255, 255, 255, .65);
}

.insights-page .ins-editorial-hero .pg-hero-title::first-line {
  color: #ff3f28;
}

.insights-page .ins-hero-orbit {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.insights-page .ins-hero-orbit--one {
  top: 13%;
  right: 7%;
  width: clamp(170px, 22vw, 360px);
  aspect-ratio: 1;
  border: clamp(22px, 4vw, 64px) solid rgba(255, 63, 40, .82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 40px 100px rgba(255,63,40,.25);
  animation: ins-orbit-float 7s ease-in-out infinite;
}

.insights-page .ins-hero-orbit--two {
  right: 28%;
  bottom: 8%;
  width: clamp(70px, 9vw, 145px);
  aspect-ratio: 1;
  background: #101414;
  box-shadow: 0 0 0 14px rgba(255,255,255,.28);
  animation: ins-orbit-float 5s ease-in-out -2s infinite reverse;
}

@keyframes ins-orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -22px, 0) rotate(12deg); }
}

.insights-page .ins-hero-edition {
  transform: rotate(2.5deg);
  border: 2px solid #101414;
  background: rgba(255, 255, 255, .78);
  box-shadow: 14px 14px 0 #101414;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}

.insights-page .ins-hero-edition:hover {
  transform: rotate(0deg) translate(-5px, -5px);
  box-shadow: 20px 20px 0 #ff3f28;
}

.insights-page .ins-signal-ticker {
  position: relative;
  z-index: 4;
  overflow: hidden;
  padding: 18px 0;
  border-block: 2px solid #101414;
  background: #ff3f28;
  color: #101414;
  transform: rotate(-1.2deg) scale(1.02);
}

.insights-page .ins-signal-track {
  display: flex;
  gap: 28px;
  align-items: center;
  width: max-content;
  font-size: clamp(1rem, 1.7vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -.03em;
  white-space: nowrap;
  animation: ins-signal-move 22s linear infinite;
}

.insights-page .ins-signal-track i {
  font-style: normal;
}

@keyframes ins-signal-move {
  to { transform: translateX(-50%); }
}

.insights-page .ins-hero-card {
  position: relative;
  box-shadow: 18px 18px 0 #ff3f28, 0 35px 90px rgba(16,20,20,.2);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}

.insights-page .ins-hero-card:hover {
  transform: translate(-7px, -7px);
  box-shadow: 28px 28px 0 #ff3f28, 0 45px 110px rgba(16,20,20,.24);
}

.insights-page .ins-hero-content::before {
  content: "TOP STORY";
  position: absolute;
  top: 24px;
  right: -42px;
  padding: 9px 54px;
  background: #e8ff47;
  color: #101414;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  transform: rotate(35deg);
}

.insights-page .ins-card {
  position: relative;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}

.insights-page .ins-card::after {
  content: attr(data-ins-index);
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(16,20,20,.86);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.insights-page .ins-card:first-child {
  transform: rotate(-.65deg);
}

.insights-page .ins-card:nth-child(2) {
  transform: rotate(.65deg);
}

.insights-page .ins-card:nth-child(3) {
  transform: rotate(-.4deg);
}

.insights-page .ins-card:hover {
  z-index: 2;
  transform: rotate(0deg) translateY(-10px);
  box-shadow: 12px 16px 0 rgba(16,20,20,.95);
}

.insights-page .ins-card:nth-child(2) .ins-card-body {
  background: #e8ff47;
}

.insights-page .ins-card:nth-child(3) .ins-card-body {
  background: #ffd8ef;
}

.insights-page .ins-card:nth-child(4) .ins-card-body {
  background: #d8ebff;
}

.insights-page .ins-library-head h2 {
  text-transform: uppercase;
}

.insights-page .ins-nl-card {
  box-shadow: 18px 18px 0 #e8ff47;
}

@media (max-width: 680px) {
  .insights-page .ins-editorial-hero .pg-hero-title {
    font-size: clamp(3rem, 14vw, 4.7rem);
    letter-spacing: -.08em;
  }

  .insights-page .ins-hero-orbit--one {
    top: 17%;
    right: -23%;
    opacity: .28;
  }

  .insights-page .ins-hero-orbit--two {
    display: none;
  }

  .insights-page .ins-hero-edition,
  .insights-page .ins-hero-edition:hover {
    transform: none;
    box-shadow: 8px 8px 0 #101414;
  }

  .insights-page .ins-signal-ticker {
    padding: 13px 0;
    transform: none;
  }

  .insights-page .ins-hero-card,
  .insights-page .ins-hero-card:hover {
    transform: none;
    box-shadow: 7px 9px 0 #ff3f28;
  }

  .insights-page .ins-hero-content::before {
    display: none;
  }

  .insights-page .ins-card,
  .insights-page .ins-card:first-child,
  .insights-page .ins-card:nth-child(2),
  .insights-page .ins-card:nth-child(3),
  .insights-page .ins-card:nth-child(4),
  .insights-page .ins-card:hover {
    transform: none;
    box-shadow: none;
  }

  .insights-page .ins-nl-card {
    box-shadow: 8px 8px 0 #e8ff47;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insights-page .ins-hero-orbit,
  .insights-page .ins-signal-track {
    animation: none;
  }
}

/* Shared pre-footer CTA — final alignment lock across every page. */
.pre-footer-cta-strip {
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 34vw, 500px);
  padding: clamp(82px, 9vw, 132px) 24px !important;
  overflow: hidden;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 57, 30, .18), transparent 38%),
    linear-gradient(180deg, #0a0d0e 0%, #06090a 100%) !important;
}

.pre-footer-cta-strip::before {
  content: "LET'S BUILD WHAT'S NEXT";
  position: absolute;
  top: clamp(42px, 5vw, 68px);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  color: #ff4a31;
  font: 750 10px/1 var(--font-main);
  letter-spacing: .22em;
  white-space: nowrap;
}

.pre-footer-cta-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.035) 50%, transparent);
}

.pre-footer-cta-strip .pre-footer-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  max-width: none;
  margin: 0 auto;
}

.pre-footer-cta-strip .pre-footer-content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  gap: 0;
  text-align: center;
}

.pre-footer-cta-strip .pre-footer-title {
  max-width: 15ch;
  margin: 0 auto clamp(20px, 2.2vw, 28px) !important;
  color: #fff !important;
  font-size: clamp(2.8rem, 5.6vw, 6.5rem) !important;
  font-weight: 560;
  line-height: .92 !important;
  letter-spacing: -.065em;
  text-align: center;
  text-wrap: balance;
}

.pre-footer-cta-strip .pre-footer-sub {
  max-width: 52ch;
  margin: 0 auto clamp(30px, 3.2vw, 42px) !important;
  color: rgba(247,247,242,.64) !important;
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

.pre-footer-cta-strip .pre-footer-btn {
  min-height: 56px;
  margin: 0 auto !important;
  padding: 7px 8px 7px 24px;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: #ff3b22;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}

.pre-footer-cta-strip .pre-footer-btn svg {
  width: 40px;
  height: 40px;
  padding: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #111;
  stroke: #111;
  box-sizing: border-box;
}

.pre-footer-cta-strip .pre-footer-btn:hover {
  background: #ff4b34;
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(0,0,0,.3);
}

@media (max-width: 640px) {
  .pre-footer-cta-strip {
    min-height: 420px;
    padding: 92px 20px 72px !important;
  }

  .pre-footer-cta-strip::before {
    top: 48px;
  }

  .pre-footer-cta-strip .pre-footer-title {
    max-width: 10ch;
    font-size: clamp(2.65rem, 12.5vw, 4rem) !important;
    line-height: .94 !important;
  }

  .pre-footer-cta-strip .pre-footer-sub {
    max-width: 31ch;
    font-size: .95rem;
  }
}

/* ========================================================================== 
   INSIGHTS — Projects-page editorial language for the ANIDAM journal
   ========================================================================== */
.insights-page main {
  background: #fff;
  color: #080c10;
}

.insights-page .ins-blog-hero {
  min-height: 100svh;
  padding: clamp(150px, 17vh, 205px) 24px clamp(72px, 8vw, 120px);
  background:
    radial-gradient(circle at 88% 10%, rgba(255,57,30,.04), transparent 24%),
    #fff;
}

.insights-page .ins-blog-shell,
.insights-page .ins-container,
.insights-page .fp-section--insights {
  width: min(1480px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

.insights-page .ins-blog-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(44px, 6vw, 84px);
  color: #62686b;
  font: 700 10px/1 var(--font-main);
  letter-spacing: .18em;
}

.insights-page .ins-blog-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4a31;
}

.insights-page .ins-blog-hero h1 {
  margin: 0;
  color: #080c10;
  font: 500 clamp(4.3rem, 8.1vw, 8.7rem)/.91 var(--font-main);
  letter-spacing: -.068em;
}

.insights-page .ins-blog-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .12em;
  white-space: nowrap;
}

.insights-page .ins-blog-line:nth-child(2) { padding-left: 12%; }
.insights-page .ins-blog-line--soft {
  color: #ff543b;
  font-size: .72em;
  font-style: italic;
  line-height: 1.02;
  white-space: normal;
}

.insights-page .ins-blog-line i {
  display: inline-flex;
  width: clamp(120px, 14vw, 220px);
  height: .68em;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(12,18,20,.14);
  transform: rotate(-1.2deg);
}

.insights-page .ins-blog-line i img { width: 100%; height: 100%; object-fit: cover; }

.insights-page .ins-blog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
  width: min(760px, 70%);
  margin: clamp(54px, 7vw, 96px) 0 0 auto;
  padding-top: 26px;
  border-top: 1px solid rgba(8,12,16,.16);
}

.insights-page .ins-blog-intro p { margin: 0; color: #62686b; font-size: clamp(.98rem,1.2vw,1.12rem); line-height: 1.65; }
.insights-page .ins-blog-intro a { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 5px; border-bottom: 1px solid #080c10; color: #080c10; font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }

.insights-page .ins-topic-bar {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 4vw, 58px);
  padding: 22px 24px;
  border-block: 1px solid rgba(8,12,16,.12);
  background: #fff;
}
.insights-page .ins-topic-bar span { color: #9a9e9f; }
.insights-page .ins-topic-bar a { color: #080c10; font-weight: 650; }
.insights-page .ins-signal-ticker { display: none; }

.insights-page .ins-featured-section { padding: clamp(82px,9vw,140px) 0; background: #fff; }
.insights-page .ins-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(8,12,16,.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: none !important;
  transform: none !important;
}
.insights-page .ins-hero-media { min-height: 620px; }
.insights-page .ins-hero-img { width:100%; height:100%; object-fit:cover; }
.insights-page .ins-hero-content { display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(36px,4vw,68px); background:#0a0d0e; color:#fff; }
.insights-page .ins-hero-content::before { display:none; }
.insights-page .ins-hero-content h2 { max-width:12ch; color:#fff; font-size:clamp(2.6rem,4.2vw,5rem); line-height:.94; letter-spacing:-.055em; }
.insights-page .ins-hero-content p { color:rgba(255,255,255,.62); }
.insights-page .ins-hero-content .ins-meta { color:rgba(255,255,255,.48); }
.insights-page .ins-pill { color:#ff5a43 !important; background:transparent !important; border:0 !important; padding:0 !important; }
.insights-page .ins-btn { align-self:flex-start; border-radius:999px; background:#ff4a31; color:#fff; }

.insights-page .ins-grid-section { padding: clamp(100px,10vw,160px) 0; background:#f5f5f2; }
.insights-page .ins-library-head { display:grid; grid-template-columns:1.35fr .65fr; gap:64px; align-items:end; margin-bottom:clamp(64px,7vw,100px); }
.insights-page .ins-library-head h2 { max-width:12ch; font-size:clamp(3.4rem,6vw,7rem); line-height:.9; letter-spacing:-.065em; }
.insights-page .ins-library-head > p { color:#666c6e; font-size:1rem; line-height:1.65; }
.insights-page .ins-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(48px,6vw,92px) 16px; }
.insights-page .ins-card,
.insights-page .ins-card:first-child,
.insights-page .ins-card:nth-child(2),
.insights-page .ins-card:nth-child(3),
.insights-page .ins-card:nth-child(4) {
  display:block;
  min-height:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.insights-page .ins-card::after { display:none; }
.insights-page .ins-card-media,
.insights-page .ins-card:first-child .ins-card-media,
.insights-page .ins-card:not(:first-child) .ins-card-media { height:auto; aspect-ratio: 4 / 3; overflow:hidden; border-radius:8px; }
.insights-page .ins-card-img { width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.insights-page .ins-card:hover .ins-card-img { transform:scale(1.035); }
.insights-page .ins-card-body,
.insights-page .ins-card:nth-child(2) .ins-card-body,
.insights-page .ins-card:nth-child(3) .ins-card-body,
.insights-page .ins-card:nth-child(4) .ins-card-body { padding:24px 0 0; background:transparent; }
.insights-page .ins-card-title { max-width:18ch; margin-top:16px; color:#080c10; font-size:clamp(1.75rem,2.7vw,3.3rem); line-height:.98; letter-spacing:-.05em; }
.insights-page .ins-card-excerpt { max-width:58ch; color:#656b6d; }
.insights-page .ins-card .ins-meta { color:#8a8f90; }
.insights-page .ins-card-link { color:#080c10; border-color:rgba(8,12,16,.18); }

.insights-page .fp-section--insights { display:none; }
.insights-page .ins-newsletter-section { padding:clamp(80px,9vw,130px) 0; background:#fff; }
.insights-page .ins-nl-card { border-radius:10px; background:#0a0d0e; box-shadow:none; transform:none; }

@media (max-width: 900px) {
  .insights-page .ins-blog-hero { min-height:0; padding-top:140px; }
  .insights-page .ins-blog-line { white-space:normal; }
  .insights-page .ins-blog-line:nth-child(2) { padding-left:0; }
  .insights-page .ins-blog-intro { width:100%; }
  .insights-page .ins-hero-card { grid-template-columns:1fr; }
  .insights-page .ins-hero-media { min-height:0; aspect-ratio:16/10; }
  .insights-page .ins-library-head { grid-template-columns:1fr; }
}

@media (max-width: 1200px) {
  .insights-page .ins-blog-line { white-space: normal; }
  .insights-page .ins-blog-hero h1 { font-size: clamp(4rem, 8vw, 6.7rem); }
}

@media (max-width: 640px) {
  .insights-page .ins-blog-hero { padding:120px 16px 72px; }
  .insights-page .ins-blog-shell,
  .insights-page .ins-container { width:100%; }
  .insights-page .ins-blog-hero h1 { font-size:clamp(3.25rem,15vw,4.6rem); }
  .insights-page .ins-blog-line i { width:94px; border-radius:10px; }
  .insights-page .ins-blog-line--soft { font-size:.72em; line-height:1.02; margin-top:12px; }
  .insights-page .ins-blog-intro { grid-template-columns:1fr; gap:24px; margin-top:48px; }
  .insights-page .ins-topic-bar { justify-content:flex-start; overflow-x:auto; white-space:nowrap; }
  .insights-page .ins-topic-bar span { display:none; }
  .insights-page .ins-featured-section,
  .insights-page .ins-grid-section,
  .insights-page .ins-newsletter-section { padding-inline:16px; }
  .insights-page .ins-hero-content { padding:30px 24px; }
  .insights-page .ins-hero-content h2 { font-size:2.55rem; }
  .insights-page .ins-library-head h2 { font-size:3.3rem; }
  .insights-page .ins-grid { grid-template-columns:1fr; gap:58px; }
}

/* Insights 2026 — stable editorial hero, working filter and news grid. */
.insights-page .ins-news-hero {
  padding: clamp(148px, 15vw, 190px) 24px clamp(72px, 8vw, 112px);
  background: #fff;
}

.insights-page .ins-news-hero__inner {
  width: min(1420px, calc(100% - 48px));
  margin-inline: auto;
}

.insights-page .ins-news-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(42px, 5vw, 72px);
  color: #73797c;
  font: 700 10px/1 var(--font-main);
  letter-spacing: .18em;
}

.insights-page .ins-news-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4a31;
}

.insights-page .ins-news-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 27vw, 410px);
  align-items: end;
  gap: clamp(36px, 6vw, 92px);
}

.insights-page .ins-news-heading h1 {
  max-width: 10ch;
  margin: 0;
  color: #080c10;
  font: 500 clamp(4.8rem, 9.2vw, 9.4rem)/.86 var(--font-main);
  letter-spacing: -.075em;
}

.insights-page .ins-news-heading h1 em {
  display: block;
  color: #ff5239;
  font-family: var(--font-accent, var(--font-main));
  font-size: .69em;
  font-weight: 500;
  letter-spacing: -.055em;
}

.insights-page .ins-news-visual {
  aspect-ratio: 4 / 3;
  margin: 0 0 .5rem;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 52px rgba(7, 13, 16, .14);
  transform: rotate(1.2deg);
}

.insights-page .ins-news-visual img { width: 100%; height: 100%; object-fit: cover; }

.insights-page .ins-news-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  width: min(760px, 62%);
  margin: clamp(56px, 6vw, 88px) 0 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(8, 12, 16, .18);
}

.insights-page .ins-news-intro p { margin: 0; color: #62696c; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.65; }
.insights-page .ins-news-intro a { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid #080c10; color: #080c10; font-size: 11px; font-weight: 750; text-transform: uppercase; white-space: nowrap; }

.insights-page .ins-topic-wrap {
  padding: 0 24px clamp(58px, 6vw, 88px);
  background: #fff;
}

.insights-page .ins-topic-bar {
  width: min(1420px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1.3fr repeat(5, auto);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(8, 12, 16, .13);
  border-radius: 999px;
  box-shadow: 0 18px 45px rgba(8, 12, 16, .07);
}

.insights-page .ins-topic-bar > span {
  padding-left: 22px;
  color: #969b9d;
  font: 700 10px/1 var(--font-main);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.insights-page .ins-topic-bar button {
  appearance: none;
  padding: 14px 19px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #080c10;
  cursor: pointer;
  font: 700 12px/1 var(--font-main);
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.insights-page .ins-topic-bar button:hover { background: #ececea; transform: translateY(-1px); }
.insights-page .ins-topic-bar button[aria-pressed="true"] { background: #080c10; color: #fff; }
.insights-page .ins-topic-bar button:focus-visible { outline: 2px solid #ff4a31; outline-offset: 3px; }
.insights-page .ins-filter-status { width: min(1420px, calc(100% - 48px)); margin: 14px auto 0; color: #858b8d; font-size: 11px; text-align: right; }
.insights-page .ins-card[hidden] { display: none !important; }

.insights-page .ins-featured-section { padding-top: clamp(58px, 7vw, 104px); }
.insights-page .ins-grid-section { padding-top: clamp(78px, 8vw, 126px); }
.insights-page .ins-card-title { text-wrap: balance; }
.insights-page .ins-card-body { border-top: 1px solid rgba(8, 12, 16, .16); margin-top: 20px; }

/* Neutralize the former masonry experiment so every story stays balanced. */
.insights-page .ins-grid > .ins-card,
.insights-page .ins-grid > .ins-card:first-child,
.insights-page .ins-grid > .ins-card:nth-child(2),
.insights-page .ins-grid > .ins-card:nth-child(3),
.insights-page .ins-grid > .ins-card:nth-child(4) {
  grid-column: auto;
  grid-row: auto;
  align-self: start;
}

.insights-page .ins-grid > .ins-card .ins-card-media,
.insights-page .ins-grid > .ins-card:first-child .ins-card-media,
.insights-page .ins-grid > .ins-card:not(:first-child) .ins-card-media {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: #e9e9e5;
}

.insights-page .ins-grid > .ins-card::before { content: none; display: none; }

.insights-page .ins-grid > .ins-card::after {
  content: attr(data-ins-index);
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: auto;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(8, 12, 16, .78);
  color: #fff;
  font: 700 10px/1 var(--font-main);
  backdrop-filter: blur(10px);
}

.insights-page .ins-grid > .ins-card .ins-card-body {
  min-height: 330px;
  display: flex;
  flex-direction: column;
}

.insights-page .ins-grid > .ins-card .ins-meta { margin-top: auto; }
.insights-page .ins-grid > .ins-card .ins-card-link { margin-top: 22px; }

@media (max-width: 980px) {
  .insights-page .ins-news-heading { grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; }
  .insights-page .ins-news-heading h1 { font-size: clamp(4.5rem, 11vw, 7rem); }
  .insights-page .ins-news-intro { width: 100%; }
  .insights-page .ins-topic-bar { display: flex; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .insights-page .ins-topic-bar::-webkit-scrollbar { display: none; }
  .insights-page .ins-topic-bar > span { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .insights-page .ins-news-hero { padding: 118px 16px 60px; }
  .insights-page .ins-news-hero__inner { width: 100%; }
  .insights-page .ins-news-kicker { margin-bottom: 34px; }
  .insights-page .ins-news-heading { grid-template-columns: 1fr; gap: 28px; }
  .insights-page .ins-news-heading h1 { max-width: 100%; font-size: clamp(3.9rem, 19vw, 5.3rem); }
  .insights-page .ins-news-visual { width: 78%; margin: 0 0 0 auto; }
  .insights-page .ins-news-intro { grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
  .insights-page .ins-news-intro a { justify-self: start; }
  .insights-page .ins-topic-wrap { padding: 0 12px 54px; }
  .insights-page .ins-topic-bar { width: 100%; padding: 10px; border-radius: 20px; }
  .insights-page .ins-topic-bar > span { display: none; }
  .insights-page .ins-topic-bar button { padding: 13px 17px; }
  .insights-page .ins-filter-status { width: 100%; padding-right: 8px; }
  .insights-page .ins-card-body { margin-top: 14px; }
  .insights-page .ins-grid > .ins-card .ins-card-body { min-height: 0; }
}

/* Local ANIDAM editorial article pages. */
.insight-article-page { margin: 0; background: #f5f5f2; color: #080c10; font-family: var(--font-main, Inter, sans-serif); }
.article-site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 0 clamp(22px, 4vw, 64px); border-bottom: 1px solid rgba(8,12,16,.12); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.article-site-header > a img { width: 142px; display: block; }
.article-site-header nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.article-site-header nav a { color: #080c10; font-size: 13px; font-weight: 650; text-decoration: none; }
.article-header-cta { padding: 13px 18px; border-radius: 999px; background: #080c10; color: #fff !important; }
.article-root { min-height: 70vh; }
.article-story { width: min(1380px, calc(100% - 48px)); margin-inline: auto; padding: clamp(70px, 9vw, 130px) 0 0; }
.article-back { display: inline-block; margin-bottom: clamp(54px, 7vw, 100px); color: #656b6d; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.article-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 40px; }
.article-eyebrow { grid-column: 1 / -1; margin: 0 0 18px; color: #ff5139; font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.article-eyebrow span { color: #080c10; }
.article-hero h1 { max-width: 11ch; margin: 0; font-size: clamp(4rem, 8.2vw, 8.4rem); font-weight: 520; line-height: .87; letter-spacing: -.07em; text-wrap: balance; }
.article-meta { display: flex; gap: 14px; padding-bottom: 10px; color: #777d7f; font-size: 12px; }
.article-cover { margin: clamp(58px, 7vw, 96px) 0 0; aspect-ratio: 16/8.6; overflow: hidden; border-radius: 18px; background: #e7e7e3; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(50px, 8vw, 130px); padding: clamp(78px, 9vw, 140px) 0; }
.article-layout aside { padding-top: 8px; border-top: 1px solid rgba(8,12,16,.2); color: #7d8385; }
.article-layout aside span { color: #ff5139; font-size: 11px; font-weight: 800; }
.article-layout aside p { line-height: 1.5; }
.article-copy { max-width: 800px; }
.article-lead { margin: 0 0 clamp(70px, 8vw, 110px); font-size: clamp(2rem, 3.6vw, 4rem); line-height: 1.04; letter-spacing: -.045em; }
.article-copy section { position: relative; padding: 34px 0 50px 70px; border-top: 1px solid rgba(8,12,16,.18); }
.article-copy section > span { position: absolute; top: 39px; left: 0; color: #ff5139; font-size: 11px; font-weight: 800; }
.article-copy h2 { margin: 0 0 18px; font-size: clamp(1.65rem, 2.5vw, 2.8rem); line-height: 1; letter-spacing: -.045em; }
.article-copy section p { max-width: 62ch; margin: 0; color: #646a6c; font-size: 1rem; line-height: 1.75; }
.article-next { display: flex; justify-content: space-between; margin-top: 36px; padding: 24px 0; border-block: 1px solid rgba(8,12,16,.2); color: #080c10; font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 700; text-decoration: none; }
.article-footer { padding: clamp(70px, 8vw, 120px) max(24px, calc((100vw - 1380px)/2)); background: #080c10; color: #fff; }
.article-footer > p { color: #ff5139; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.article-footer h2 { max-width: 12ch; margin: 30px 0 70px; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: .92; letter-spacing: -.06em; }
.article-footer > div { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.62); font-size: 12px; }
.article-footer a { color: #fff; }
@media (max-width: 700px) {
  .article-site-header { min-height: 70px; padding-inline: 18px; }
  .article-site-header > a img { width: 125px; }
  .article-site-header nav > a:not(.article-header-cta) { display: none; }
  .article-header-cta { padding: 11px 14px; }
  .article-story { width: calc(100% - 32px); padding-top: 48px; }
  .article-back { margin-bottom: 52px; }
  .article-hero { grid-template-columns: 1fr; gap: 26px; }
  .article-hero h1 { font-size: clamp(3.6rem, 17vw, 5.2rem); }
  .article-meta { flex-wrap: wrap; padding: 0; }
  .article-cover { margin-top: 48px; aspect-ratio: 4/3; border-radius: 12px; }
  .article-layout { grid-template-columns: 1fr; gap: 50px; padding: 70px 0 90px; }
  .article-layout aside { display: none; }
  .article-lead { font-size: 2.15rem; }
  .article-copy section { padding-left: 44px; }
  .article-footer > div { flex-direction: column; }
}

/* Compact professional sizing for the shared CTA. */
.pre-footer-cta-strip {
  min-height: 0;
  padding: clamp(76px, 6.5vw, 104px) 24px clamp(62px, 5.5vw, 88px) !important;
}

.pre-footer-cta-strip::before {
  top: clamp(28px, 2.5vw, 40px);
}

.pre-footer-cta-strip .pre-footer-title {
  max-width: 18ch;
  margin-bottom: clamp(16px, 1.6vw, 22px) !important;
  font-size: clamp(2.6rem, 4.3vw, 4.8rem) !important;
  font-weight: 600;
  line-height: .96 !important;
  letter-spacing: -.052em;
}

.pre-footer-cta-strip .pre-footer-sub {
  margin-bottom: clamp(24px, 2.3vw, 32px) !important;
  font-size: clamp(.92rem, 1vw, 1rem);
}

.pre-footer-cta-strip .pre-footer-btn {
  min-height: 52px;
  padding: 6px 7px 6px 21px;
  font-size: .9rem;
}

.pre-footer-cta-strip .pre-footer-btn svg {
  width: 38px;
  height: 38px;
  padding: 10px;
}

@media (max-width: 640px) {
  .pre-footer-cta-strip {
    min-height: 0;
    padding: 78px 20px 62px !important;
  }

  .pre-footer-cta-strip::before {
    top: 34px;
  }

  .pre-footer-cta-strip .pre-footer-title {
    max-width: 12ch;
    font-size: clamp(2.35rem, 10.8vw, 3.2rem) !important;
    line-height: .98 !important;
    letter-spacing: -.048em;
  }
}