@font-face {
  font-family: 'Oxanium';
  src: url('../assets/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   CSS VARIABLES & RESET
============================================ */
:root {
  --white: #F5F5F5;
  --navy: #000A1F;
  --bronze: #B8956A;
  --bronze-light: #D4AF8A;
  --bronze-dark: #8A6B4A;
  --sapphire: #1E3A72;
  --grid-color: rgba(184, 149, 106, 0.06);
  --grid-line: rgba(184, 149, 106, 0.12);
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-body: 'Exo 2', sans-serif;
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s var(--ease-smooth);
  --transition-med: 0.5s var(--ease-smooth);
  /* GHL widget brand tokens */
  --ghl-primary: #B8956A;
  --ghl-primary-hover: #D4AF8A;
  --ghl-bg: #F5F5F5;
  --ghl-text: #000A1F;
  --ghl-border: rgba(0, 10, 31, 0.12);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
  cursor: none;
}

/* Restore default cursor inside the contact form panel */
.contact-form-panel,
.contact-form-panel * {
  cursor: auto;
}
.contact-form-panel a,
.contact-form-panel .btn-form-submit {
  cursor: pointer;
}

/* ============================================
   CUSTOM CURSOR
============================================ */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--bronze);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s var(--ease-smooth), height 0.3s var(--ease-smooth), background 0.3s;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(184, 149, 106, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease-smooth), width 0.4s var(--ease-smooth), height 0.4s var(--ease-smooth), opacity 0.3s;
}

.cursor.hover { width: 16px; height: 16px; background: var(--bronze-light); }
.cursor-ring.hover { width: 56px; height: 56px; opacity: 0.6; }

/* ============================================
   GEOMETRIC GRID BACKGROUND MIXIN
============================================ */
.geo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.geo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.geo-bg-dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.geo-bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184, 149, 106, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 149, 106, 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}

/* ============================================
   NAVIGATION
============================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 60px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transition-med), backdrop-filter var(--transition-med), border-bottom 0.3s;
}

nav.scrolled {
  background: rgba(0, 10, 31, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184, 149, 106, 0.15);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Footer logo */
.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 20px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

/* nav layout: logo left, About/Services centred, CTA right (desktop) */
.nav-menu { display: contents; }
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.nav-links a {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.65);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--bronze);
  transition: width var(--transition-med);
}

.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy) !important;
  background: var(--bronze);
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s var(--ease-smooth) !important;
}

.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--bronze-light); transform: translateY(-1px); }

/* ============================================
   HERO SECTION
============================================ */
#hero {
  min-height: 100vh;
  background: var(--navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 80px 100px 80px;
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s var(--ease-smooth) 0.3s forwards;
}

.hero-eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--bronze);
}

.hero-eyebrow-text {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bronze);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 100px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease-smooth) 0.5s forwards;
}

.hero-headline .accent {
  color: var(--bronze);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: clamp(70px, 7.5vw, 108px);
  letter-spacing: 0;
}

.hero-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.6);
  max-width: 440px;
  margin-bottom: 52px;
  font-weight: 300;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease-smooth) 0.7s forwards;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease-smooth) 0.9s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bronze);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bronze-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-primary:hover::before { transform: scaleX(1); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary span { position: relative; z-index: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 245, 245, 0.6);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
}

.btn-ghost:hover { color: var(--white); }

.btn-ghost .arrow {
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.3s var(--ease-smooth);
}

.btn-ghost .arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn-ghost:hover .arrow { width: 36px; }

.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid rgba(184, 149, 106, 0.15);
  opacity: 0;
  animation: fadeUp 1.1s var(--ease-smooth) 1.1s forwards;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 0.03em;
  color: var(--white);
  line-height: 1;
}

.hero-stat-number span {
  color: var(--bronze);
}

.hero-stat-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.4);
  margin-top: 6px;
}

/* Hero Right Panel */
.hero-right {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-right-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fadeIn 1.5s var(--ease-smooth) 0.4s forwards;
}

/* Geometric architectural composition */
.hero-geo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-ring {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  animation: rotateSlow linear infinite;
}

.geo-ring-1 {
  width: 420px;
  height: 420px;
  border-color: rgba(184, 149, 106, 0.12);
  animation-duration: 60s;
}

.geo-ring-2 {
  width: 320px;
  height: 320px;
  border-color: rgba(184, 149, 106, 0.18);
  animation-duration: 45s;
  animation-direction: reverse;
}

.geo-ring-3 {
  width: 200px;
  height: 200px;
  border-color: rgba(184, 149, 106, 0.3);
  animation-duration: 30s;
}

.geo-ring::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: var(--bronze);
  border-radius: 50%;
}

.geo-center {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(184, 149, 106, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.geo-center::before, .geo-center::after {
  content: '';
  position: absolute;
  background: var(--bronze);
}

.geo-center::before {
  width: 1px;
  height: 100%;
}

.geo-center::after {
  width: 100%;
  height: 1px;
}

.geo-diamond {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bronze);
  transform: rotate(45deg);
  z-index: 3;
}

/* Vertical text */
.hero-vertical-text {
  position: absolute;
  right: 40px;
  bottom: 120px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(184, 149, 106, 0.4);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Diagonal divider between hero panels */
.hero-divider {
  position: absolute;
  left: -30px;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 3;
}

.hero-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184, 149, 106, 0.2) 30%, rgba(184, 149, 106, 0.2) 70%, transparent);
}

/* ============================================
   SECTION COMMONS
============================================ */
section {
  position: relative;
  overflow: hidden;
}

.section-inner {
  position: relative;
  z-index: 2;
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.section-tag-line {
  width: 32px;
  height: 1px;
}

.section-tag-text {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.section-heading {
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.02em;
}

/* ============================================
   ABOUT SECTION
============================================ */
#about {
  background: var(--white);
  padding: 140px 80px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}

.about-left .section-tag-line { background: var(--navy); }
.about-left .section-tag-text { color: var(--bronze); }

.about-heading {
  font-size: clamp(52px, 5vw, 80px);
  color: var(--navy);
  margin-bottom: 40px;
}

.about-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.about-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 10, 31, 0.65);
  font-weight: 300;
  margin-bottom: 20px;
}

.about-signature {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 10, 31, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.about-sig-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
}

.about-sig-title {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}

.about-right {
  position: relative;
}

.about-manifesto {
  font-family: var(--font-serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 40px;
}

.about-manifesto em {
  color: var(--bronze);
  font-style: normal;
}

/* ============================================
   PROBLEM SECTION
============================================ */
#problems {
  background: var(--navy);
  padding: 140px 80px;
}

.problems-inner {
  max-width: 1300px;
  margin: 0 auto;
}

#problems .section-tag-line { background: var(--bronze); }
#problems .section-tag-text { color: var(--bronze); }

.problems-heading {
  font-size: clamp(56px, 5.5vw, 88px);
  color: var(--white);
  margin-bottom: 80px;
  max-width: 800px;
}

.problems-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(184, 149, 106, 0.12);
  margin-bottom: 80px;
}

.problem-card {
  background: var(--navy);
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-med);
}

.problem-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-smooth);
}

.problem-card:hover { background: rgba(184, 149, 106, 0.04); }
.problem-card:hover::before { transform: scaleX(1); }

.problem-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
  position: relative;
}

.problem-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--bronze);
  fill: none;
  stroke-width: 1;
}

.problem-num {
  font-family: var(--font-display);
  font-size: 64px;
  letter-spacing: 0.02em;
  color: rgba(184, 149, 106, 0.17);
  position: absolute;
  top: 24px;
  right: 28px;
  line-height: 1;
}

.problem-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.1;
}

.problem-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.5);
  font-weight: 300;
}

.problem-pain {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(184, 149, 106, 0.1);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bronze);
  opacity: 0.8;
}

.problems-cta-block {
  text-align: center;
  padding: 64px;
  border: 2px solid rgba(184, 149, 106, 0.45);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problems-cta-block .geo-bg-dark { opacity: 0.5; }

.problems-cta-text {
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  color: var(--white);
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.problems-cta-text strong {
  color: var(--bronze);
  font-style: normal;
}

/* ============================================
   DIFFERENCE SECTION (THE VANGUARD DIFFERENCE)
============================================ */
#difference {
  background: var(--white);
  padding: 140px 80px;
}

.difference-inner {
  max-width: 1300px;
  margin: 0 auto;
}

#difference .section-tag-line { background: var(--navy); }
#difference .section-tag-text { color: var(--bronze); }

.difference-heading {
  font-size: clamp(52px, 5vw, 80px);
  color: var(--navy);
  margin-bottom: 16px;
}

.difference-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.difference-subhead {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0, 10, 31, 0.55);
  max-width: 560px;
  margin-bottom: 80px;
  font-weight: 300;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 80px;
  border: 2px solid var(--navy);
  box-shadow: 0 24px 80px rgba(0, 10, 31, 0.12);
}

.comparison-table thead th {
  padding: 28px 36px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: left;
  font-weight: 600;
  border: 1px solid rgba(0, 10, 31, 0.12);
}

.comparison-table thead th:first-child {
  color: rgba(0, 10, 31, 0.5);
  width: 32%;
  background: rgba(0, 10, 31, 0.03);
  border-right: 1px solid rgba(0, 10, 31, 0.12);
}

.comparison-table thead th:nth-child(2) {
  background: rgba(0, 10, 31, 0.06);
  color: var(--navy);
  border-left: 1px solid rgba(0, 10, 31, 0.12);
  border-right: 1px solid rgba(0, 10, 31, 0.12);
}

.comparison-table thead th:nth-child(3) {
  background: rgba(0, 10, 31, 0.06);
  color: var(--navy);
  border-right: 1px solid rgba(0, 10, 31, 0.12);
}

.comparison-table thead th:nth-child(4) {
  background: var(--navy);
  color: var(--bronze);
  letter-spacing: 0.22em;
  border-left: 3px solid var(--bronze);
  font-size: 11px;
}

.comparison-table tbody tr {
  border-top: 1px solid rgba(0, 10, 31, 0.08);
  transition: background 0.3s;
}

.comparison-table tbody tr:hover { background: rgba(0, 10, 31, 0.025); }
.comparison-table tbody tr:nth-child(even) { background: rgba(0, 10, 31, 0.018); }
.comparison-table tbody tr:nth-child(even):hover { background: rgba(0, 10, 31, 0.035); }

.comparison-table td {
  padding: 26px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  vertical-align: middle;
  border: 1px solid rgba(0, 10, 31, 0.1);
}

.comparison-table td:first-child {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 13px;
  background: rgba(0, 10, 31, 0.015);
  border: 1px solid rgba(0, 10, 31, 0.1);
}

.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3) {
  color: var(--navy);
  background: rgba(0, 10, 31, 0.02);
  font-size: 13px;
  border: 1px solid rgba(0, 10, 31, 0.1);
}

.comparison-table td:nth-child(4) {
  background: rgba(0, 10, 31, 0.04);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(0, 10, 31, 0.12);
  border-left: 3px solid var(--bronze);
}

.check {
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.check::before {
  content: '✦';
  color: var(--bronze);
  font-size: 12px;
  flex-shrink: 0;
}

.cross { color: var(--navy); opacity: 0.45; font-size: 13px; }
.partial { color: var(--navy); opacity: 0.6; font-style: italic; font-size: 13px; }

.difference-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 10, 31, 0.12);
  margin-top: 0;
}

.diff-pillar {
  background: var(--white);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-med);
}

/* Bronze bottom border sweep, matches problem cards */
.diff-pillar::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-smooth);
}

.diff-pillar:hover { background: rgba(0, 10, 31, 0.03); }
.diff-pillar:hover::before { transform: scaleX(1); }

.diff-pillar-num {
  font-family: var(--font-display);
  font-size: 80px;
  color: rgba(0, 10, 31, 0.12);
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 24px;
  transition: opacity 0.3s;
}

.diff-pillar:hover .diff-pillar-num { opacity: 0.5; }

.diff-pillar-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
}

.diff-pillar-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--bronze);
  fill: none;
  stroke-width: 1.25;
}

.diff-pillar-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.1;
}

.diff-pillar-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(0, 10, 31, 0.58);
  font-weight: 300;
}

.diff-pillar-accent {
  display: inline-block;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 10, 31, 0.08);
  width: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bronze);
  opacity: 0.85;
}

/* ============================================
   SERVICES SECTION
============================================ */
#services {
  background: var(--navy);
  padding: 140px 80px;
}

.services-inner {
  max-width: 1300px;
  margin: 0 auto;
}

#services .section-tag-line { background: var(--bronze); }
#services .section-tag-text { color: var(--bronze); }

.services-heading {
  font-size: clamp(52px, 5vw, 80px);
  color: var(--white);
  margin-bottom: 16px;
}

.services-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.services-intro {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(245, 245, 245, 0.5);
  max-width: 46ch;
  margin-bottom: 80px;
  font-weight: 300;
}

.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(184, 149, 106, 0.1);
}

.service-item {
  background: var(--navy);
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-med);
}

.service-item:hover { background: rgba(184, 149, 106, 0.04); }

.service-item-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 70%, rgba(184, 149, 106, 0.03) 100%);
}

.service-num {
  font-family: var(--font-display);
  font-size: 80px;
  color: rgba(184, 149, 106, 0.15);
  line-height: 1;
  position: absolute;
  top: 24px;
  right: 36px;
  transition: opacity 0.3s;
}

.service-item:hover .service-num { opacity: 0.5; }

.service-icon-wrap {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(184, 149, 106, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  transition: border-color 0.3s;
}

.service-item:hover .service-icon-wrap { border-color: rgba(184, 149, 106, 0.5); }

.service-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: var(--bronze);
  fill: none;
  stroke-width: 1.2;
}

.service-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.05;
}

.service-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.5);
  font-weight: 300;
  margin-bottom: 32px;
}

.service-tag {
  display: inline-block;
  margin-top: 36px;
  padding: 6px 16px;
  border: 1px solid rgba(184, 149, 106, 0.2);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ============================================
   PROCESS SECTION
============================================ */
#process {
  background: var(--white);
  padding: 140px 80px;
}

.process-inner {
  max-width: 1300px;
  margin: 0 auto;
}

#process .section-tag-line { background: var(--navy); }
#process .section-tag-text { color: var(--bronze); }

.process-heading {
  font-size: clamp(52px, 5vw, 80px);
  color: var(--navy);
  margin-bottom: 16px;
}

.process-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.process-intro {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0, 10, 31, 0.55);
  max-width: 520px;
  margin-bottom: 100px;
  font-weight: 300;
}

.process-timeline {
  position: relative;
}

.process-timeline-line {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: rgba(0, 10, 31, 0.1);
}

.process-timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--bronze);
  width: 0%;
  transition: width 1.5s var(--ease-smooth);
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  position: relative;
  border-top: 1px solid rgba(0, 10, 31, 0.08);
  transition: background 0.4s var(--ease-smooth);
  cursor: default;
}

.process-step:last-child {
  border-bottom: 1px solid rgba(0, 10, 31, 0.08);
}

.process-step:hover {
  background: rgba(0, 10, 31, 0.02);
}

/* Left column: big number */
.process-step-left {
  padding: 48px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.process-step-num {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.1;
  color: var(--bronze);
  letter-spacing: 0.02em;
  transition: opacity 0.3s;
  opacity: 0.7;
  padding-top: 4px;
}

.process-step:hover .process-step-num {
  opacity: 1;
}

/* Vertical connector line between steps */
.process-step-left::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, var(--bronze), transparent);
  transition: height 0.5s var(--ease-smooth);
}

.process-step:not(:last-child):hover .process-step-left::after {
  height: 32px;
}

/* Right column: content */
.process-step-right {
  padding: 48px 0 48px 48px;
  border-left: 1px solid rgba(0, 10, 31, 0.08);
  position: relative;
}

.process-step-right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bronze);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-smooth);
}

.process-step:hover .process-step-right::before {
  transform: scaleY(1);
}

.process-step-phase {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 10px;
}

.process-step-title {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.0;
}

.process-step-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(0, 10, 31, 0.58);
  font-weight: 300;
  max-width: 780px;
}

.process-step-deliverables {
  display: none;
}

/* Timeline line removed, vertical layout doesn't use it */
.process-timeline-line { display: none; }

.process-cta {
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy);
  overflow: hidden;
}

.process-cta-left {
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
}

.process-cta-left .geo-bg-dark { opacity: 0.8; }

.process-cta-heading {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  line-height: 1;
}

.process-cta-heading .accent { color: var(--bronze); }

.process-cta-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245, 245, 245, 0.55);
  margin-bottom: 36px;
  font-weight: 300;
  position: relative;
  z-index: 2;
}

.process-cta-right {
  background: var(--bronze);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.process-cta-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-light) 100%);
}

.cta-badge {
  position: relative;
  z-index: 2;
}

.cta-badge-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--navy);
  margin-bottom: 16px;
  opacity: 0.7;
}

.cta-badge-main {
  font-family: var(--font-display);
  font-size: 52px;
  letter-spacing: 0.03em;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}

.cta-badge-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(0, 10, 31, 0.6);
  margin-bottom: 36px;
}

/* ============================================
   BOOKING SECTION
============================================ */
#booking {
  background: var(--navy);
  padding: 140px 80px 0;
}

/* booking-inner defined below with calendar section */

.booking-heading {
  font-size: clamp(48px, 4.5vw, 72px);
  color: var(--white);
  margin-bottom: 24px;
  line-height: 0.92;
}

.booking-heading .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
}

.booking-body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.5);
  font-weight: 300;
  margin-bottom: 48px;
}

.booking-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}

.booking-detail {
  display: flex;
  align-items: center;
  gap: 16px;
}

.booking-detail-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(184, 149, 106, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.booking-detail-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--bronze);
  fill: none;
  stroke-width: 1.5;
}

.booking-detail-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(245, 245, 245, 0.6);
}

.booking-detail-text strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.35);
  margin-bottom: 3px;
}

.booking-guarantee {
  padding: 28px 32px;
  border: 1px solid rgba(184, 149, 106, 0.15);
  position: relative;
  overflow: hidden;
}

.booking-guarantee .geo-bg-dark { opacity: 0.4; }

.booking-guarantee-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(245, 245, 245, 0.7);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.booking-guarantee-text strong {
  color: var(--bronze);
  font-style: normal;
}

/* ============================================
   CONTACT FORM
============================================ */

/* Booking section tags */
#booking .section-tag-line { background: var(--bronze); }
#booking .section-tag-text { color: var(--bronze); }

.booking-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
}

/* Left info column */
.booking-info {}

/* Contact form panel */
.contact-form-panel {
  background: rgba(245, 245, 245, 0.03);
  border: 1px solid rgba(184, 149, 106, 0.15);
  padding: 52px;
  position: relative;
}

.contact-form-panel .geo-bg-dark { opacity: 0.4; pointer-events: none; }

.form-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(184, 149, 106, 0.1);
  position: relative;
  z-index: 2;
}

.form-panel-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--white);
}

.form-panel-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
}

.form-panel-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--bronze);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* Form fields */
.vcl-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-field.full { grid-column: 1 / -1; }

.form-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.4);
  margin-bottom: 10px;
}

.form-input,
.form-select,
.form-textarea {
  background: rgba(245, 245, 245, 0.04);
  border: 1px solid rgba(184, 149, 106, 0.15);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.3s var(--ease-smooth), background 0.3s;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(245, 245, 245, 0.2);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--bronze);
  background: rgba(184, 149, 106, 0.04);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8956A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
  color: rgba(245, 245, 245, 0.6);
}

.form-select option {
  background: var(--navy);
  color: var(--white);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Submit row */
.form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 20px;
}

.form-disclaimer {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(245, 245, 245, 0.25);
  letter-spacing: 0.02em;
  line-height: 1.5;
  max-width: 200px;
}

.btn-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bronze);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-smooth);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bronze-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-form-submit:hover::before { transform: scaleX(1); }
.btn-form-submit:hover { transform: translateY(-2px); }
.btn-form-submit span { position: relative; z-index: 1; }

/* Form states */
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.form-success.visible { display: block; }
.vcl-form.hidden { display: none; }

.form-success-icon {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(184, 149, 106, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.form-success-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--bronze);
  fill: none;
  stroke-width: 1.5;
}

.form-success-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 12px;
}

.form-success-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245, 245, 245, 0.5);
}

.form-error-msg {
  display: none;
  font-family: var(--font-body);
  font-size: 11px;
  color: #E07070;
  margin-top: 16px;
  letter-spacing: 0.05em;
}

.form-error-msg.visible { display: block; }

/* Input validation states */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: rgba(224, 112, 112, 0.5);
}

/* ============================================
   FOOTER
============================================ */
footer {
  background: var(--navy);
  border-top: 1px solid rgba(184, 149, 106, 0.12);
  padding: 80px 80px 48px;
}

.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(184, 149, 106, 0.08);
  margin-bottom: 48px;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.15em;
  color: var(--white);
  margin-bottom: 6px;
}

.footer-brand-sub {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 20px;
}

.footer-brand-desc {
  font-size: 12px;
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.35);
  font-weight: 300;
  max-width: 280px;
  margin-bottom: 32px;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 20px;
}

.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-links a {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(245, 245, 245, 0.4);
  text-decoration: none;
  transition: color 0.3s;
  letter-spacing: 0.02em;
}

.footer-col-links a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copyright {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.25);
  letter-spacing: 0.05em;
}

.footer-copyright span { color: var(--bronze); }

.footer-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.25);
}

.footer-location::before {
  content: '';
  width: 20px;
  height: 1px;
  background: rgba(184, 149, 106, 0.3);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   KEYFRAMES
============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   TICKER BAND
============================================ */
.ticker {
  background: var(--bronze);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}

.ticker-track {
  display: flex;
  gap: 0;
  animation: ticker 30s linear infinite;
  width: max-content;
}

.ticker-item {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--navy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 0;
  position: relative;
}

/* Dot as CSS ::after on each item, perfectly centred between text */
.ticker-item::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--navy);
  border-radius: 50%;
  opacity: 0.45;
  /* equal margin both sides → dot sits centred between the two words */
  margin: 0 44px;
  flex-shrink: 0;
}

/* ============================================
   SCROLL PROGRESS
============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--bronze);
  z-index: 1001;
  transition: width 0.1s linear;
  width: 0%;
}

/* ============================================
   SECTION NUMBERS
============================================ */
.section-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: 200px;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   BTN SECONDARY (light version)
============================================ */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(184, 149, 106, 0.4);
  color: var(--bronze);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease-smooth), border-color 0.4s;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-secondary:hover { color: var(--navy); border-color: var(--bronze); }
.btn-secondary:hover::before { transform: scaleX(1); }
.btn-secondary span { position: relative; z-index: 1; }

.btn-primary-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--bronze);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-primary-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}

.btn-primary-dark:hover::before { transform: scaleX(1); }
.btn-primary-dark:hover { transform: translateY(-2px); }
.btn-primary-dark span { position: relative; z-index: 1; color: var(--navy); }
.btn-primary-dark:hover span { color: var(--white); }
/* ============================================
   MOTION LAYER, added for awwwards rebuild
============================================ */

/* Process section heading grid (was an inline style → now responsive) */
.process-head-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: end;
  margin-bottom: 80px;
}
@media (max-width: 960px) {
  .process-head-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
}

/* Three.js network canvas behind the hero */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-smooth);
}
.hero-canvas.is-ready { opacity: 1; }

/* Keep hero text/visual above the canvas */
#hero .hero-left { z-index: 3; }
#hero .hero-right { z-index: 2; }

/* Masked line reveal for the hero headline */
.hero-headline .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em; /* room for descenders / italic */
}
.hero-headline .line-inner {
  display: block;
  will-change: transform;
}

/* When GSAP drives the page, it sets initial states itself.
   .js-anim on <html> lets us hide pre-animation flicker safely. */
html.js-anim .hero-headline,
html.js-anim .hero-eyebrow,
html.js-anim .hero-body,
html.js-anim .hero-actions,
html.js-anim .hero-stats { opacity: 1; animation: none; }

/* GSAP-controlled reveal base (overrides the old IO transitions when active) */
html.js-anim .reveal,
html.js-anim .reveal-left { transition: none; }

/* Magnetic / interactive button helper */
.btn-primary, .btn-secondary, .nav-cta, .btn-ghost { will-change: transform; }

/* Animated stat numbers keep layout stable while counting */
.hero-stat-number { font-variant-numeric: tabular-nums; }

/* Table horizontal-scroll wrapper (mobile-safe comparison table) */
.table-scroll { width: 100%; }

/* ============================================
   MOBILE NAV TOGGLE (hamburger)
============================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--white);
  transition: transform 0.4s var(--ease-smooth), opacity 0.3s, background 0.3s;
}
nav:not(.scrolled) .nav-toggle span { background: var(--white); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================
   CUSTOM CURSOR, only on precise pointers
============================================ */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none !important; }
}

/* ============================================
   REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ticker-track { animation: none !important; }
  .geo-ring { animation: none !important; }
  .reveal, .reveal-left { opacity: 1 !important; transform: none !important; }
  .hero-canvas { opacity: 0.5; }
  .cursor, .cursor-ring { display: none !important; }
  body { cursor: auto; }
}

/* ============================================
   RESPONSIVE LAYER  (file shipped with none)
============================================ */

/* --- Large desktop down to laptop --- */
@media (max-width: 1200px) {
  .hero-left { padding: 130px 56px 90px; }
  #about, #problems, #difference, #services, #process { padding: 120px 56px; }
  .section-inner { padding: 0; }
  .problems-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet --- */
@media (max-width: 960px) {
  nav { padding: 0 24px; height: 64px; }
  .nav-menu {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: rgba(0, 10, 31, 0.97);
    backdrop-filter: blur(24px);
    transform: translateX(100%);
    transition: transform 0.55s var(--ease-smooth);
    z-index: 1001;
  }
  .nav-menu.open { transform: translateX(0); }
  /* the ul is absolutely centred on desktop; reset it inside the drawer */
  .nav-menu .nav-links { position: static; transform: none; flex-direction: column; align-items: center; gap: 26px; }
  .nav-menu .nav-links li,
  .nav-menu .nav-cta { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth); }
  .nav-menu.open .nav-links li,
  .nav-menu.open .nav-cta { opacity: 1; transform: translateY(0); }
  .nav-menu.open .nav-links li:nth-child(1) { transition-delay: .12s; }
  .nav-menu.open .nav-links li:nth-child(2) { transition-delay: .18s; }
  .nav-menu.open .nav-cta { transition-delay: .26s; }
  .nav-links a { font-size: 14px; letter-spacing: 0.25em; }
  .nav-menu .nav-cta { font-size: 13px; padding: 16px 34px; margin-top: 14px; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }

  /* Hero collapses to a single column; canvas remains the backdrop */
  #hero { grid-template-columns: 1fr; min-height: 100svh; }
  .hero-left { padding: 120px 40px 80px; }
  .hero-right { display: none; }
  .hero-headline { font-size: clamp(52px, 11vw, 84px); }
  .hero-headline .accent { font-size: clamp(56px, 12vw, 90px); }
  .hero-body { max-width: 540px; }
  .hero-stats { gap: 36px; flex-wrap: wrap; }

  /* Stacked content grids */
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .difference-pillars { grid-template-columns: 1fr; gap: 32px; }
  .services-list { grid-template-columns: 1fr; }
  .booking-inner { grid-template-columns: 1fr; gap: 56px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Grid items must be allowed to shrink below their content's intrinsic size */
  .about-grid > *, .booking-inner > *, .services-list > *,
  .difference-pillars > *, .problems-grid > * { min-width: 0; }

  /* Comparison table scrolls horizontally instead of overflowing */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -40px;
    padding: 0 40px 8px;
  }
  .comparison-table { min-width: 640px; }
}

/* --- Phone --- */
@media (max-width: 640px) {
  nav { padding: 0 18px; }
  #about, #problems, #difference, #services, #process, #booking { padding: 84px 22px; }
  .hero-left { padding: 110px 22px 64px; }
  .hero-headline { font-size: clamp(42px, 13vw, 60px); line-height: 0.96; }
  .hero-headline .accent { font-size: clamp(44px, 14vw, 64px); }
  .hero-body { font-size: 15px; margin-bottom: 40px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-stats { gap: 28px 32px; margin-top: 48px; padding-top: 36px; }
  .hero-stat-number { font-size: 34px; }

  /* Scale display headings down so long single words fit narrow screens */
  .about-heading, .difference-heading, .services-heading,
  .process-heading { font-size: clamp(38px, 10vw, 52px); }
  .problems-heading { font-size: clamp(40px, 10.5vw, 56px); margin-bottom: 48px; }
  .booking-heading { font-size: clamp(38px, 10vw, 50px); }
  .about-heading, .problems-heading, .difference-heading, .services-heading,
  .process-heading, .booking-heading { overflow-wrap: break-word; }

  .problems-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Process steps: tighter rail on small screens */
  .process-step { grid-template-columns: 48px 1fr; gap: 20px; }
  .section-number { font-size: 120px; }
}

/* ============================================
   INTERIOR PAGES, supplementary (multi-page)
   Same visual language: Bebas display, serif accents,
   bronze rule, geo grid. Added for services/work/about/contact.
============================================ */

/* Safety: if GSAP fails to load, the JS fallback adds .revealed */
.reveal.revealed, .reveal-left.revealed { opacity: 1 !important; transform: none !important; }

/* ---- Interior page hero / header ---- */
.page-hero {
  background: var(--navy);
  padding: 180px 80px 110px;
  position: relative;
  overflow: hidden;
}
.page-hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.breadcrumb {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.4);
  margin-bottom: 30px;
}
.breadcrumb a { color: var(--bronze); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--bronze-light); }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(58px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
}
.page-hero-title .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
  letter-spacing: 0;
  font-weight: 400;
}
.page-hero-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(245, 245, 245, 0.62);
  max-width: 620px;
  margin-top: 30px;
}

/* ---- Generic light/dark content sections for interior pages ---- */
.section-pad { padding: 140px 80px; position: relative; overflow: hidden; }
.section-pad.light { background: var(--white); }
.section-pad.dark  { background: var(--navy); }
.section-pad .section-inner-wide { max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }
.section-pad.dark .section-tag-line { background: var(--bronze); }

/* ---- Work / case study cards ---- */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1300px;
  margin: 56px auto 0;
}
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 48px;
  background: linear-gradient(150deg, rgba(30,58,114,0.55) 0%, var(--navy) 62%);
  border: 1px solid rgba(184, 149, 106, 0.16);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.4s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}
.work-card:nth-child(even) { background: linear-gradient(150deg, rgba(74,106,138,0.45) 0%, var(--navy) 66%); }
.work-card:hover { border-color: rgba(184, 149, 106, 0.45); transform: translateY(-6px); }
.work-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(184,149,106,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,106,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.work-card-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.work-card-tag { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.work-card-year { font-family: var(--font-body); font-size: 11px; color: rgba(245,245,245,0.4); letter-spacing: 0.05em; }
.work-card-body { margin-top: auto; position: relative; z-index: 2; }
.work-card-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 16px;
}
.work-card-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; font-weight: 300; color: rgba(245,245,245,0.6); max-width: 44ch; }
.work-card-stats { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.work-card-stat b { display: block; font-family: var(--font-display); font-size: 34px; color: var(--bronze); line-height: 1; letter-spacing: 0.02em; }
.work-card-stat span { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,245,245,0.4); margin-top: 6px; display: block; }

/* ---- Simple values grid (about) reusing diff-pillar look on light ---- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; max-width: 1300px; margin: 56px auto 0; }
.value-block { border-top: 2px solid var(--bronze); padding-top: 22px; }
.value-block h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.02em; color: var(--navy); margin-bottom: 12px; }
.section-pad.dark .value-block h3 { color: var(--white); }
.value-block p { font-family: var(--font-body); font-size: 14px; line-height: 1.65; font-weight: 300; color: rgba(0,10,31,0.62); }
.section-pad.dark .value-block p { color: rgba(245,245,245,0.6); }

/* ---- Founder block ---- */
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: center; max-width: 1300px; margin: 0 auto; }
.founder-portrait { aspect-ratio: 4/5; position: relative; overflow: hidden; border: 1px solid rgba(184,149,106,0.18); background: linear-gradient(150deg, rgba(30,58,114,0.6), var(--navy)); display: grid; place-items: center; }
.founder-portrait img { width: 44%; opacity: 0.16; }
.founder-role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin: 8px 0 24px; }

@media (max-width: 960px) {
  .page-hero { padding: 140px 56px 80px; }
  .section-pad { padding: 100px 56px; }
  .work-grid { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: 1fr; gap: 36px; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 120px 22px 64px; }
  .section-pad { padding: 72px 22px; }
  .work-card { padding: 32px; min-height: 320px; }
  .work-card-stats { gap: 28px; }
}

/* ============================================
   USER REVISIONS, 2026-06-29
   (a) Buttons: colour change on hover only (no movement / fill-slide)
   (b) Hero text: +25% size, extended across the left half of the hero
============================================ */

/* (a) Buttons, bronze wipes left→right between SOLID and OUTLINE (per video).
   Shapes unchanged: the outline edge is an inset box-shadow, so no size change. */
.btn-primary, .btn-secondary, .btn-primary-dark, .nav-cta {
  will-change: auto;
  position: relative;
  overflow: hidden;
}
.btn-primary span, .btn-secondary span, .btn-primary-dark span, .nav-cta span,
.btn-primary .arrow, .btn-secondary .arrow { position: relative; z-index: 2; }

.btn-primary::before, .btn-secondary::before, .btn-primary-dark::before, .nav-cta::before {
  content: ''; display: block !important; position: absolute; inset: 0; z-index: 1;
  background: var(--bronze);
  transition: transform 0.55s var(--ease-smooth);
}

/* Solid-at-rest (primary / dark / nav CTA): bronze fill empties left→right on
   hover to reveal a bronze outline; refills left→right on mouse-out. */
.btn-primary, .btn-primary-dark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bronze);
  color: var(--navy);
  transition: color 0.5s var(--ease-smooth);
}
.btn-primary::before, .btn-primary-dark::before { transform: scaleX(1); transform-origin: left center; }
.btn-primary:hover::before, .btn-primary-dark:hover::before { transform: scaleX(0); transform-origin: right center; }
.btn-primary:hover, .btn-primary-dark:hover { color: var(--bronze); }
.btn-primary-dark:hover span { color: var(--bronze); }

.nav-cta {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bronze);
  color: var(--navy) !important;
  transition: color 0.5s var(--ease-smooth) !important;
}
.nav-cta::before { transform: scaleX(1); transform-origin: left center; }
.nav-cta:hover::before { transform: scaleX(0); transform-origin: right center; }
.nav-cta:hover { color: var(--bronze) !important; }

/* Outline-at-rest (secondary): bronze fills in left→right on hover. */
.btn-secondary { transition: color 0.5s var(--ease-smooth); }
.btn-secondary::before { transform: scaleX(0); transform-origin: right center; }
.btn-secondary:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn-secondary:hover { color: var(--navy); }

/* btn-ghost has no fill, simple colour fade to bronze */
.btn-ghost { will-change: auto; transition: color 0.4s var(--ease-smooth); }
.btn-ghost:hover { color: var(--bronze); }
.btn-ghost:hover .arrow { width: 24px; }

/* (b) Hero text, extended across the left half ------------------- */
#hero .hero-eyebrow-text { font-size: 12.5px; }
#hero .hero-body { font-size: 20px; line-height: 1.7; max-width: 100%; }
#hero .hero-stat-number { font-size: 50px; }
#hero .hero-stat-label { font-size: 12.5px; }
#hero .btn-primary, #hero .btn-ghost { font-size: 13.5px; }
#hero .hero-left { padding-right: 40px; max-width: none; }
/* Give the text column more room (right half is now just the network) so the
   wider Exo 2 headline keeps its intended line breaks */
#hero { grid-template-columns: 1.25fr 0.75fr; }

/* (c) About visual block, larger -------------------------------- */
.about-grid { grid-template-columns: 1fr 1.15fr; gap: 90px; }
.about-manifesto { font-size: 33px; line-height: 1.5; margin-bottom: 52px; }

/* (d) Problem cards, larger cards + text ------------------------ */
.problem-card { padding: 64px 48px; }
.problem-icon { width: 60px; height: 60px; margin-bottom: 40px; }
.problem-num { font-size: 84px; top: 30px; right: 34px; }
.problem-title { font-size: 27px; margin-bottom: 20px; line-height: 1.12; }
.problem-desc { font-size: 16px; line-height: 1.8; }
.problem-pain { font-size: 17px; margin-top: 30px; padding-top: 24px; }

/* (e) Typography, headers in Oxanium, body in Exo 2 (Cormorant kept for accents) */
:root { --font-display: 'Oxanium', 'Exo 2', system-ui, sans-serif; }

.hero-headline, .section-heading, .page-hero-title, .about-heading, .problems-heading,
.services-heading, .difference-heading, .process-heading, .booking-heading,
.problem-title, .service-title, .diff-pillar-title, .process-step-title,
.work-card-title, .value-block h3, .form-panel-title, .form-success-title,
.footer-cta-title, .hero-stat-number {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.problem-num, .service-num, .diff-pillar-num, .process-step-num,
.work-card-stat b, .ticker-item { font-weight: 700; }

/* Re-tune large display sizes for Exo 2 (wider than the old condensed face) */
#hero .hero-headline { font-size: clamp(50px, 5.8vw, 86px); line-height: 1.03; }
#hero .hero-headline .accent { font-size: clamp(56px, 6.4vw, 96px); }
.page-hero-title { font-size: clamp(44px, 5.6vw, 82px); }
.about-heading { font-size: clamp(38px, 4.2vw, 60px); }
.problems-heading { font-size: clamp(40px, 4.4vw, 66px); }
.services-heading { font-size: clamp(40px, 4.4vw, 66px); }
.difference-heading { font-size: clamp(38px, 4.2vw, 60px); }
.process-heading { font-size: clamp(38px, 4.2vw, 60px); }
.booking-heading { font-size: clamp(38px, 4.2vw, 62px); }

@media (max-width: 960px) {
  #hero .hero-headline { font-size: clamp(40px, 9vw, 64px); }
  #hero .hero-headline .accent { font-size: clamp(44px, 9.5vw, 70px); }
  #hero .hero-body { font-size: 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .problem-card { padding: 44px 32px; }
}

/* ============================================
   USER REVISIONS, nav +25% & gold labels +25%
============================================ */
/* Nav bar elements +25% */
nav { height: 90px; }
.nav-logo-img { height: 40px; }
.nav-links { gap: 50px; }
.nav-links a { font-size: 13.75px; }
.nav-cta { font-size: 13.75px; padding: 13px 28px; }
.nav-toggle { width: 55px; height: 55px; }
@media (max-width: 960px) {
  nav { height: 80px; padding: 0 30px; }
  .nav-logo-img { height: 36px; }
}

/* Small gold section labels +25% (hero eyebrow + section tags) */
.section-tag-text, .hero-eyebrow-text { font-size: 12.5px; }

/* ============================================
   USER REVISIONS (round 2)
   1. Fix button hover lift/glitch (kill the translateY)
   2. Body text +50% site-wide
   3. Tech-stack section
   4. "And so much more" service CTA card
============================================ */

/* 1. Buttons must not move on hover (only the colour wipe) ---------- */
.btn-primary:hover, .btn-primary-dark:hover, .btn-secondary:hover { transform: none !important; }
.nav-cta:hover { transform: none !important; background: transparent !important; }

/* 2. Body text +50% ------------------------------------------------- */
#hero .hero-body { font-size: 30px; line-height: 1.55; }
.page-hero-sub { font-size: 25.5px; }
.about-body { font-size: 24px; }
.problem-desc { font-size: 24px; }
.service-desc { font-size: 21px; }
.services-intro { font-size: 24px; }
.difference-subhead { font-size: 24px; }
.process-intro { font-size: 24px; }
.process-step-desc { font-size: 21px; }
.booking-body { font-size: 22.5px; }
.booking-detail-text { font-size: 19.5px; }
.work-card-desc { font-size: 21px; }
.value-block p { font-size: 21px; }
.footer-brand-desc { font-size: 18px; }
.footer-col-links a { font-size: 18px; }
.comparison-table td { font-size: 21px; }
.form-input, .form-select, .form-textarea { font-size: 19.5px; }
.form-disclaimer { font-size: 15px; }
/* bigger body text needs more room in the 4-up problem cards → go 2-up */
.problems-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px){ .problems-grid { grid-template-columns: 1fr; } }

/* 3. TECH-STACK SECTION (light, logos grid, like the inspiration) -- */
.stack-section { background: var(--white); padding: clamp(80px,11vw,130px) 60px; position: relative; overflow: hidden; }
.stack-inner { max-width: 1120px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.stack-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--navy); margin-bottom: 22px; max-width: 18ch; margin-inline: auto;
}
.stack-sub { font-family: var(--font-body); font-weight: 300; font-size: 21px; line-height: 1.65; color: rgba(0,10,31,0.62); max-width: 70ch; margin: 0 auto clamp(48px,6vw,72px); }
.stack-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(20px,2.4vw,34px); align-items: center; justify-items: center; max-width: 940px; margin: 0 auto; }
.stack-logo { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px; transition: background 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth); }
.stack-logo img { width: clamp(38px, 4.6vw, 56px); height: auto; transition: transform 0.4s var(--ease-smooth); }
.stack-logo:hover { background: rgba(0,10,31,0.04); }
.stack-logo:hover img { transform: scale(1.16); }
@media (max-width: 900px){ .stack-section { padding: 80px 28px; } .stack-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } .stack-sub { font-size: 18px; } }
@media (max-width: 460px){ .stack-grid { grid-template-columns: repeat(3, 1fr); } }

/* 4. "And so much more" service CTA card --------------------------- */
.service-cta {
  grid-column: auto;
  background: var(--bronze);
  color: var(--navy);
  padding: clamp(40px,4.5vw,60px) clamp(40px,4vw,56px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  position: relative; overflow: hidden;
}
.service-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px,3.4vw,52px); line-height: 1; color: var(--navy); letter-spacing: -0.01em; }
.service-cta p { font-family: var(--font-body); font-weight: 400; font-size: 21px; line-height: 1.55; color: rgba(0,10,31,0.72); max-width: 52ch; }
.service-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  background: var(--navy); color: var(--white);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 100px; text-decoration: none;
  transition: background 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth);
}
.service-cta-btn:hover { background: var(--navy-90); color: var(--bronze); }

/* ============================================
   USER REVISIONS (round 3)
   1. All body text → uniform 24px
   2. Tech-stack section → orbiting logos around the bronze V mark
============================================ */
/* 1. Uniform 24px body text ------------------------------------- */
#hero .hero-body,
.page-hero-sub,
.about-body,
.problem-desc,
.service-desc,
.services-intro,
.difference-subhead,
.process-intro,
.process-step-desc,
.booking-body,
.booking-detail-text,
.work-card-desc,
.value-block p,
.footer-brand-desc,
.footer-col-links a,
.comparison-table td,
.form-input, .form-select, .form-textarea,
.stack-sub,
.service-cta p { font-size: 24px; }

/* 2. Tech-stack ORBIT, software logos orbit the bronze V mark ----- */
.stack-section { background: var(--navy); }
.stack-heading { color: var(--white); }
.stack-sub { color: rgba(245, 245, 245, 0.6); }
.stack-grid { display: none; }   /* superseded by the orbit */

.orbit {
  --size: clamp(330px, 58vw, 600px);
  position: relative; width: var(--size); height: var(--size);
  margin: clamp(24px,3vw,44px) auto 0;
}
.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(98px, 15vw, 150px); height: auto; border-radius: 20px; z-index: 4;
  box-shadow: 0 0 70px rgba(184,149,106,0.28);
}
.orbit-ring-line {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(184,149,106,0.16); border-radius: 50%; pointer-events: none;
}
.orbit-ring-line.r-inner { width: calc(var(--size) * 0.46); height: calc(var(--size) * 0.46); }
.orbit-ring-line.r-outer { width: calc(var(--size) * 0.82); height: calc(var(--size) * 0.82); }

.rotor { position: absolute; inset: 0; }
.rotor--inner { animation: orbit-ccw 46s linear infinite; }
.rotor--outer { animation: orbit-cw 64s linear infinite; }

.orbit-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.rotor--inner .orbit-item { transform: rotate(var(--a)) translateY(calc(var(--size) * -0.23)); }
.rotor--outer .orbit-item { transform: rotate(var(--a)) translateY(calc(var(--size) * -0.41)); }

.orbit-chip {
  position: absolute; top: 0; left: 0; display: grid; place-items: center;
  background: var(--white); border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.38);
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
}
.rotor--inner .orbit-chip { width: clamp(44px, 7vw, 58px); height: clamp(44px, 7vw, 58px); }
.rotor--outer .orbit-chip { width: clamp(46px, 7.4vw, 62px); height: clamp(46px, 7.4vw, 62px); }
.orbit-logo { width: 58%; height: 58%; object-fit: contain; }
.rotor--inner .orbit-logo { animation: orbit-cw 46s linear infinite; }
.rotor--outer .orbit-logo { animation: orbit-ccw 64s linear infinite; }

.orbit:hover .rotor, .orbit:hover .orbit-logo { animation-play-state: paused; }

@keyframes orbit-cw  { to { transform: rotate(360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) { .rotor, .orbit-logo { animation: none !important; } }
@media (max-width: 600px) { .orbit { --size: 90vw; } .stack-section { padding: 80px 18px; } }

/* ============================================
   USER REVISIONS (round 4), 3D logo sphere
============================================ */
.stack-section { background: var(--navy); position: relative; min-height: 100vh; padding: 0; overflow: hidden; display: block; }
.logo-sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.stack-heading-wrap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  text-align: center; padding: clamp(44px, 8vh, 96px) 24px 90px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--navy) 8%, rgba(0,10,31,0.5) 40%, transparent 82%);
}
.stack-heading-wrap .stack-heading { margin: 0 auto 18px; }
.stack-heading-wrap .stack-sub { margin: 0 auto; }

/* Fallback grid, shown only when WebGL is unavailable */
.stack-fallback { display: none; }
.stack-section.no-webgl { min-height: 0; padding: clamp(80px,11vw,130px) 30px; }
.stack-section.no-webgl .logo-sphere-canvas { display: none; }
.stack-section.no-webgl .stack-heading-wrap { position: static; background: none; padding: 0 0 56px; }
.stack-section.no-webgl .stack-fallback {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(20px,2.4vw,34px);
  align-items: center; justify-items: center; max-width: 940px; margin: 0 auto;
}
.stack-section.no-webgl .stack-fallback img { width: clamp(38px,4.6vw,56px); height: auto; }
@media (max-width: 900px){ .stack-section.no-webgl .stack-fallback { grid-template-columns: repeat(4,1fr); } }

/* Mobile: stack the heading above the sphere instead of overlaying it */
@media (max-width: 760px){
  .stack-section { min-height: 0; display: flex; flex-direction: column; }
  .stack-heading-wrap { position: static; background: none; padding: clamp(56px,11vw,86px) 22px 6px; order: 1; }
  .logo-sphere-canvas { position: relative; inset: auto; width: 100%; height: 66vh; order: 2; }
  .stack-fallback { order: 3; }
}

/* ============================================
   USER REVISIONS (round 5), light bg + logos kept below the heading text
============================================ */
.stack-section { background: var(--white); position: relative; min-height: 100vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.stack-heading-wrap { position: static; background: none; order: 1; z-index: 3; text-align: center; padding: clamp(48px,8vh,96px) 24px clamp(16px,3vh,36px); pointer-events: none; }
.stack-heading-wrap .stack-heading { color: var(--navy); margin: 0 auto 18px; }
.stack-heading-wrap .stack-sub { color: rgba(0,10,31,0.62); margin: 0 auto; }
.logo-sphere-canvas { position: relative; inset: auto; order: 2; width: 100%; flex: 1 1 auto; min-height: 0; display: block; z-index: 1; }
.stack-fallback { order: 3; }
@media (max-width: 760px){
  .stack-section { min-height: 0; }
  .logo-sphere-canvas { flex: none; height: 58vh; }
  .stack-heading-wrap { padding: clamp(56px,11vw,86px) 22px 6px; }
}

/* ============================================ USER REVISIONS (round 6), body text 22px ============================================ */
#hero .hero-body, .page-hero-sub, .about-body, .problem-desc,
.service-desc, .services-intro, .difference-subhead, .process-intro,
.process-step-desc, .booking-body, .booking-detail-text, .work-card-desc, .value-block p,
.footer-brand-desc, .footer-col-links a, .comparison-table td, .form-input, .form-select,
.form-textarea, .stack-sub, .service-cta p { font-size: 22px; }

/* ============================================ MINIMAL FOOTER (Option A) ============================================ */
footer { padding: 56px 80px 40px; }
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 30px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(184, 149, 106, 0.14);
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand .footer-logo-img { height: 34px; margin-bottom: 0; }
.footer-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(245, 245, 245, 0.55);
  margin: 0;
  max-width: 420px;
}
.footer-tagline .serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--bronze);
}
.footer-cta { display: inline-flex; flex-shrink: 0; }
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 680px) {
  footer { padding: 44px 24px 32px; }
  .footer-main { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .footer-cta { width: 100%; justify-content: center; }
  .footer-legal { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
}

/* ============================================ FAQ (about page) ============================================ */
.faq-list { max-width: 940px; margin: 52px auto 0; }
.faq-item { border-bottom: 1px solid rgba(184, 149, 106, 0.18); }
.faq-item:first-child { border-top: 1px solid rgba(184, 149, 106, 0.18); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--white);
  transition: color 0.3s var(--ease-smooth);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover,
.faq-item[open] summary { color: var(--bronze); }
.faq-plus { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.faq-plus::before, .faq-plus::after {
  content: '';
  position: absolute;
  background: var(--bronze);
  transition: transform 0.35s var(--ease-smooth);
}
.faq-plus::before { top: 10px; left: 0; width: 22px; height: 2px; }
.faq-plus::after { top: 0; left: 10px; width: 2px; height: 22px; }
.faq-item[open] .faq-plus::after { transform: scaleY(0); }
.faq-answer {
  padding: 0 4px 30px;
  max-width: 780px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(245, 245, 245, 0.6);
}
@media (max-width: 680px) {
  .faq-item summary { font-size: 18px; padding: 24px 2px; }
  .faq-answer { font-size: 16px; }
}

/* ============================================ ABOUT HERO, TRIAD (Option B) ============================================ */
.about-hero-b { text-align: center; padding: 170px 80px 120px; }
.about-hero-b .breadcrumb { text-align: left; }
.about-hero-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--bronze);
  margin: 26px 0 46px;
}
.about-hero-eyebrow .l { width: 30px; height: 1px; background: var(--bronze); display: inline-block; }
.triad {
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(24px, 5vw, 56px);
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(46px, 9vw, 110px); line-height: 1; letter-spacing: 0.02em;
  color: var(--white);
}
.triad-word { opacity: 0; transform: translateY(30px); animation: triadIn 0.7s var(--ease-smooth) forwards; }
.triad-word:nth-child(1) { animation-delay: 0.15s; }
.triad-word:nth-child(2) { animation-delay: 0.30s; }
.triad-word:nth-child(3) { animation-delay: 0.45s; }
.triad-funnel { width: 100%; max-width: 440px; height: auto; margin: 12px auto 4px; display: block; }
.triad-funnel .draw, .triad-funnel .stem {
  stroke: var(--bronze); stroke-width: 1.5; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: funnelDraw 0.55s ease forwards;
}
.triad-funnel .dot { fill: var(--bronze); opacity: 0; animation: dotIn 0.3s ease forwards; }
@keyframes triadIn { to { opacity: 1; transform: none; } }
@keyframes funnelDraw { to { stroke-dashoffset: 0; } }
@keyframes dotIn { to { opacity: 1; } }
/* Ambient signal pulse, flows down the funnel on a loop */
.triad-funnel .pulse {
  stroke: var(--bronze-light); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 0.16 0.84; stroke-dashoffset: 1; opacity: 0;
  animation: pulseDown 3s linear infinite; animation-delay: 1.8s;
}
.triad-funnel .pulse-stem { animation-name: pulseStem; }
.triad-funnel .dot-glow {
  fill: var(--bronze-light); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: dotGlow 3s ease-in-out infinite; animation-delay: 1.8s;
}
@keyframes pulseDown {
  0% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  48% { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pulseStem {
  0%, 40% { stroke-dashoffset: 1; opacity: 0; }
  44% { opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  70% { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes dotGlow {
  0%, 36% { opacity: 0; transform: scale(1); }
  42% { opacity: 0.85; transform: scale(1.9); }
  54% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .triad-funnel .pulse, .triad-funnel .dot-glow { animation: none; opacity: 0; }
}

/* ============================================ ABOUT HERO, CIRCUIT BOARD ============================================ */
.circuit-hero { overflow: hidden; }
.circuit-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.circuit-bg .ct-trace { fill: none; stroke: #B8956A; stroke-width: 1.4; opacity: 0.14; }
.circuit-bg .ct-pulse {
  fill: none; stroke: var(--bronze-light); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 0.08 0.92; stroke-dashoffset: 1; opacity: 0;
  animation-name: ctFlow; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ctFlow {
  0% { stroke-dashoffset: 1; opacity: 0; }
  6% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.circuit-channels { display: block; width: 100%; max-width: 1000px; margin: 34px auto 8px; overflow: visible; }
.circuit-channels .ch-trace { fill: none; stroke: #B8956A; stroke-width: 2; opacity: 0.32; }
.circuit-channels .ch-via circle { fill: var(--navy); stroke: #B8956A; stroke-width: 2; }
.circuit-channels .ch-pad circle { fill: #B8956A; }
.circuit-channels .ch-label {
  font-family: var(--font-display); font-weight: 800; font-size: 60px; letter-spacing: 0.04em; fill: var(--white);
}
.circuit-channels .ch-pulse {
  fill: none; stroke: var(--bronze-light); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 0.16 0.84; stroke-dashoffset: 1; opacity: 0;
  animation: chFlow 2.8s linear infinite;
}
@keyframes chFlow {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-bg .ct-pulse, .circuit-channels .ch-pulse { animation: none; opacity: 0; }
}
@media (max-width: 680px) {
  .circuit-channels { margin-top: 20px; }
  .circuit-channels .ch-label { font-size: 68px; }
}
.about-hero-payoff {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 5.5vw, 74px); line-height: 1.03; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--white);
  opacity: 0; transform: translateY(24px);
  animation: triadIn 0.8s var(--ease-smooth) forwards; animation-delay: 0.35s;
}
.about-hero-payoff .serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); letter-spacing: 0; }
.about-hero-sub {
  font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.65;
  color: rgba(245, 245, 245, 0.58); max-width: 560px; margin: 26px auto 0;
  opacity: 0; animation: triadIn 0.8s ease forwards; animation-delay: 0.55s;
}
.about-hero-cta {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 38px;
  opacity: 0; animation: triadIn 0.8s ease forwards; animation-delay: 0.70s;
}
@media (prefers-reduced-motion: reduce) {
  .triad-word, .about-hero-payoff, .about-hero-sub, .about-hero-cta { opacity: 1; transform: none; animation: none; }
  .triad-funnel .draw, .triad-funnel .stem { stroke-dashoffset: 0; animation: none; }
  .triad-funnel .dot { opacity: 1; animation: none; }
}
@media (max-width: 680px) {
  .about-hero-b { padding: 130px 22px 80px; }
  .about-hero-sub { font-size: 16px; }
}

/* ============================================ WHAT'S DIFFERENT, PILLARS ============================================ */
.wd-pillars { position: relative; margin-top: 44px; }
.wd-flow { position: relative; height: 26px; margin: 0 10px 6px; }
.wd-flow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wd-flow-base { stroke: rgba(184, 149, 106, 0.25); stroke-width: 2; }
.wd-flow-pulse { stroke: var(--bronze); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.14 0.86; stroke-dashoffset: 1; animation: wdFlow 3.2s linear infinite; }
@keyframes wdFlow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.wd-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wd-pillar {
  position: relative; overflow: hidden; padding: 40px 32px 36px;
  border: 1px solid rgba(184, 149, 106, 0.22); background: rgba(184, 149, 106, 0.03);
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth), background 0.4s var(--ease-smooth);
}
.wd-pillar:hover { transform: translateY(-8px); border-color: rgba(184, 149, 106, 0.6); background: rgba(184, 149, 106, 0.08); }
.wd-pillar-num {
  position: absolute; top: -20px; right: 4px; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 120px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(184, 149, 106, 0.32);
}
.wd-pillar-icon { position: relative; width: 42px; height: 42px; margin-bottom: 22px; color: var(--bronze); }
.wd-pillar-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd-pillar-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); line-height: 1.12; margin-bottom: 12px; }
.wd-pillar-desc { position: relative; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(245, 245, 245, 0.5); }
.wd-closer { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(184, 149, 106, 0.14); font-family: var(--font-body); font-weight: 300; font-size: 18px; color: rgba(245, 245, 245, 0.6); }
.wd-closer strong { color: var(--white); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .wd-flow-pulse { animation: none; } }
@media (max-width: 820px) {
  .wd-pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .wd-flow { display: none; }
  .wd-pillar-num { font-size: 96px; }
}

/* ============================================ WHAT'S DIFFERENT, US VS THEM ============================================ */
.vs-table { margin-top: 52px; border: 1px solid rgba(184, 149, 106, 0.18); display: grid; grid-template-columns: 1fr 1fr; }
.vs-head { padding: 22px 28px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.vs-head.them { color: rgba(245, 245, 245, 0.4); border-right: 1px solid rgba(184, 149, 106, 0.14); border-bottom: 1px solid rgba(184, 149, 106, 0.18); }
.vs-head.us { color: var(--bronze); font-weight: 600; background: rgba(184, 149, 106, 0.06); border-bottom: 1px solid rgba(184, 149, 106, 0.18); }
.vs-cell { padding: 20px 28px; font-family: var(--font-body); font-size: 17px; font-weight: 300; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; }
.vs-cell.them { color: rgba(245, 245, 245, 0.42); border-right: 1px solid rgba(184, 149, 106, 0.14); border-bottom: 1px solid rgba(184, 149, 106, 0.1); }
.vs-cell.us { color: var(--white); background: rgba(184, 149, 106, 0.06); border-bottom: 1px solid rgba(184, 149, 106, 0.1); }
.vs-cell.vs-last { border-bottom: none; }
.vs-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.vs-cell.them .vs-icon { color: rgba(245, 245, 245, 0.3); }
.vs-cell.us .vs-icon { color: var(--bronze); }
@media (max-width: 760px) {
  .vs-table { grid-template-columns: 1fr; }
  .vs-cell.them, .vs-head.them { border-right: none; }
  .vs-cell { font-size: 15px; }
}

/* ---- What's Different on a light background (inverted) ---- */
.section-pad.light .wd-pillar { border-color: rgba(0, 10, 31, 0.12); background: rgba(0, 10, 31, 0.015); }
.section-pad.light .wd-pillar:hover { border-color: rgba(184, 149, 106, 0.6); background: rgba(184, 149, 106, 0.06); }
.section-pad.light .wd-pillar-num { -webkit-text-stroke-color: rgba(184, 149, 106, 0.4); }
.section-pad.light .wd-flow-base { stroke: rgba(0, 10, 31, 0.14); }
.section-pad.light .wd-pillar-title { color: var(--navy); }
.section-pad.light .wd-pillar-desc { color: rgba(0, 10, 31, 0.6); }
.section-pad.light .wd-closer { color: rgba(0, 10, 31, 0.65); border-top-color: rgba(0, 10, 31, 0.12); }
.section-pad.light .wd-closer strong { color: var(--navy); }
.section-pad.light .vs-table { border-color: rgba(0, 10, 31, 0.14); }
.section-pad.light .vs-head { border-color: rgba(0, 10, 31, 0.14); }
.section-pad.light .vs-head.them { color: rgba(0, 10, 31, 0.45); }
.section-pad.light .vs-head.us { color: var(--bronze); background: rgba(184, 149, 106, 0.10); }
.section-pad.light .vs-cell.them { color: rgba(0, 10, 31, 0.5); border-color: rgba(0, 10, 31, 0.1); }
.section-pad.light .vs-cell.us { color: var(--navy); background: rgba(184, 149, 106, 0.10); border-color: rgba(0, 10, 31, 0.1); }
.section-pad.light .vs-cell.them .vs-icon { color: rgba(0, 10, 31, 0.3); }
.section-pad.light .vs-cell.us .vs-icon { color: var(--bronze); }

/* ============================================ PAGE-WIDE GOLD CIRCUIT OVERLAY (about page) ============================================ */
.page-circuit { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.page-circuit svg { width: 100%; height: 100%; display: block; }
.page-circuit .pc-trace { fill: none; stroke: #B8956A; stroke-width: 1.4; opacity: 0.2; }
.page-circuit .pc-dots circle { fill: #B8956A; opacity: 0.35; }
.page-circuit .pc-pulse {
  fill: none; stroke: var(--bronze-light); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 0.06 0.94; stroke-dashoffset: 1; opacity: 0;
  animation-name: pcFlow; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes pcFlow {
  0% { stroke-dashoffset: 1; opacity: 0; }
  5% { opacity: 0.95; }
  88% { opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-circuit .pc-pulse { animation: none; opacity: 0; }
}
/* Keep all about-page content above the circuit overlay */
.about-page .page-hero-inner,
.about-page .section-inner,
.about-page .section-inner-wide,
.about-page .footer-inner { position: relative; z-index: 2; }

/* ============================================ TWO WORLDS (about page, section 02) ============================================ */
.two-worlds .tw-intro { font-family: var(--font-body); font-weight: 300; font-size: 20px; line-height: 1.6; color: rgba(245,245,245,0.6); max-width: 640px; margin-top: 20px; }
.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.tw-card {
  position: relative; overflow: hidden; padding: 48px 44px;
  border: 1px solid rgba(184,149,106,0.22); background: rgba(184,149,106,0.03);
  transition: transform 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth), background 0.4s var(--ease-smooth);
}
.tw-card:hover { transform: translateY(-8px); border-color: rgba(184,149,106,0.6); background: rgba(184,149,106,0.08); }
.tw-num {
  position: absolute; top: -30px; right: 6px; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 180px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(184,149,106,0.24);
}
.tw-icon { position: relative; width: 48px; height: 48px; margin-bottom: 26px; color: var(--bronze); }
.tw-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tw-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.tw-desc { position: relative; font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(245,245,245,0.55); max-width: 44ch; }
@media (max-width: 760px) {
  .tw-grid { grid-template-columns: 1fr; }
  .tw-num { font-size: 140px; }
}

/* ============================================ ABOUT PAGE, INVERTED SECTION VARIANTS ============================================ */
/* Two Worlds on light */
.section-pad.light .tw-intro { color: rgba(0,10,31,0.6); }
.section-pad.light .tw-title { color: var(--navy); }
.section-pad.light .tw-desc { color: rgba(0,10,31,0.55); }
.section-pad.light .tw-card { border-color: rgba(0,10,31,0.12); background: rgba(0,10,31,0.015); }
.section-pad.light .tw-card:hover { border-color: rgba(184,149,106,0.6); background: rgba(184,149,106,0.06); }
.section-pad.light .tw-num { -webkit-text-stroke-color: rgba(184,149,106,0.32); }

/* FAQ on light */
.section-pad.light .faq-item { border-color: rgba(0,10,31,0.12); }
.section-pad.light .faq-item:first-child { border-top-color: rgba(0,10,31,0.12); }
.section-pad.light .faq-item summary { color: var(--navy); }
.section-pad.light .faq-item summary:hover,
.section-pad.light .faq-item[open] summary { color: var(--bronze); }
.section-pad.light .faq-answer { color: rgba(0,10,31,0.62); }

/* Process on dark */
#process.proc-dark { background: var(--navy); }
#process.proc-dark .process-heading { color: var(--white); }
#process.proc-dark .process-intro { color: rgba(245,245,245,0.55); }
#process.proc-dark .process-step { border-top-color: rgba(184,149,106,0.14); }
#process.proc-dark .process-step:last-child { border-bottom-color: rgba(184,149,106,0.14); }
#process.proc-dark .process-step:hover { background: rgba(184,149,106,0.04); }
#process.proc-dark .process-step-right { border-left-color: rgba(184,149,106,0.14); }
#process.proc-dark .process-step-title { color: var(--white); }
#process.proc-dark .process-step-desc { color: rgba(245,245,245,0.55); }

/* ============================================ SERVICES PAGE ============================================ */
.svc-num-wm {
  position: absolute; top: -34px; right: 0; pointer-events: none; z-index: -1;
  font-family: var(--font-display); font-weight: 800; font-size: 200px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(184,149,106,0.16);
}
/* DIP */
.dip-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; margin-top: 48px; align-items: start; }
.dip-lead { font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--navy); margin-bottom: 20px; }
.dip-left p { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.7; color: rgba(0,10,31,0.62); }
.dip-panel { border: 1px solid rgba(0,10,31,0.12); background: rgba(0,10,31,0.02); padding: 40px 36px; }
.dip-panel-title { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin-bottom: 24px; }
.dip-list { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-bottom: 24px; }
.dip-list li { position: relative; padding-left: 26px; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.5; color: rgba(0,10,31,0.72); }
.dip-list li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border: 1.5px solid var(--bronze); transform: rotate(45deg); }
.dip-note { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(0,10,31,0.5); border-top: 1px solid rgba(0,10,31,0.1); padding-top: 18px; margin: 0; }
@media (max-width: 820px) { .dip-grid { grid-template-columns: 1fr; gap: 32px; } }
/* Services flat grid */
.svc-intro { position: relative; z-index: 1; font-family: var(--font-body); font-weight: 300; font-size: 20px; line-height: 1.6; color: rgba(245,245,245,0.6); max-width: 640px; margin-top: 20px; }
.svc-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(184,149,106,0.1); margin-top: 48px; }
.svc-card { background: var(--navy); padding: 34px 30px; transition: background 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth); }
.svc-card:hover { background: rgba(184,149,106,0.06); transform: translateY(-4px); }
.svc-card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; line-height: 1.12; }
.svc-card-desc { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(245,245,245,0.55); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } .svc-num-wm { font-size: 130px; top: -12px; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ============================================ SERVICES PAGE, INVERTED VARIANTS + MODAL ============================================ */
/* DIP on dark */
.section-pad.dark .dip-lead { color: var(--white); }
.section-pad.dark .dip-left p { color: rgba(245,245,245,0.62); }
.section-pad.dark .dip-panel { border-color: rgba(184,149,106,0.28); background: rgba(184,149,106,0.05); }
.section-pad.dark .dip-list li { color: rgba(245,245,245,0.75); }
.section-pad.dark .dip-note { color: rgba(245,245,245,0.5); border-top-color: rgba(245,245,245,0.12); }

/* Services grid on light */
.section-pad.light .svc-intro { color: rgba(0,10,31,0.6); }
.section-pad.light .svc-grid { background: rgba(0,10,31,0.1); }
.section-pad.light .svc-card { background: var(--white); }
.section-pad.light .svc-card:hover { background: rgba(184,149,106,0.08); }
.section-pad.light .svc-card-title { color: var(--navy); }
.section-pad.light .svc-card-desc { color: rgba(0,10,31,0.6); }

/* Card affordance */
.svc-card { cursor: pointer; }
.svc-card:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.svc-card-more { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth); }
.svc-card:hover .svc-card-more, .svc-card:focus-visible .svc-card-more { opacity: 1; transform: none; }

/* Modal */
.svc-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.svc-modal[hidden] { display: none; }
.svc-modal-overlay { position: absolute; inset: 0; background: rgba(0,10,31,0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; }
.svc-modal.open .svc-modal-overlay { opacity: 1; }
.svc-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto; background: var(--navy); border: 1px solid rgba(184,149,106,0.3); padding: 48px 48px 40px; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth); }
.svc-modal.open .svc-modal-panel { opacity: 1; transform: none; }
.svc-modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: rgba(245,245,245,0.6); font-size: 30px; line-height: 1; cursor: pointer; transition: color 0.3s; }
.svc-modal-close:hover { color: var(--bronze); }
.svc-modal-eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; }
.svc-modal-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3.4vw,38px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 22px; }
.svc-modal-body p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.7; color: rgba(245,245,245,0.68); margin-bottom: 24px; }
.svc-modal-body ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 32px; }
.svc-modal-body li { position: relative; padding-left: 26px; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.5; color: rgba(245,245,245,0.82); }
.svc-modal-body li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border: 1.5px solid var(--bronze); transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .svc-modal-overlay, .svc-modal-panel { transition: none; }
}
@media (max-width: 560px) { .svc-modal-panel { padding: 44px 26px 32px; } }

/* ============================================ SERVICES 3D SPHERE ============================================ */
.service-sphere { display: none; position: relative; width: 100%; height: min(72vh, 660px); margin-top: 28px; }
#services.sphere-on .service-sphere { display: block; }
.service-sphere canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.svc-hover-label {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3;
  padding: 9px 16px; background: var(--navy); border: 1px solid rgba(184,149,106,0.5);
  color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 16px)); opacity: 0; transition: opacity 0.18s ease;
}
.svc-hover-label.show { opacity: 1; }
/* When the sphere is active, keep the grid for keyboard/AT + as data source, visually hidden */
#services.sphere-on .svc-grid { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================ SERVICES HERO, STRIKETHROUGH REVEAL ============================================ */
.strike-hero .strike { position: relative; white-space: nowrap; }
.strike-hero .strike::after {
  content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 0.08em;
  background: var(--bronze); transform: scaleX(0); transform-origin: left center;
  animation: strikeIn 0.5s var(--ease-smooth) forwards; animation-delay: 1.2s;
}
.strike-hero .strike-2::after { animation-delay: 1.65s; }
@keyframes strikeIn { to { transform: scaleX(1); } }
.strike-hero .resolve { display: inline-block; opacity: 0.45; animation: resolveIn 0.7s var(--ease-smooth) forwards; animation-delay: 2.15s; }
@keyframes resolveIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .strike-hero .strike::after { transform: scaleX(1); animation: none; }
  .strike-hero .resolve { opacity: 1; animation: none; }
}

/* ============================================ FOOTER, OPTION B (giant outlined wordmark) ============================================ */
.footer-b { padding-bottom: 0; overflow: hidden; }
.footer-b .footer-legal { align-items: center; }
.footer-b .footer-nav { display: flex; gap: 26px; }
.footer-b .footer-nav a { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,245,0.6); text-decoration: none; transition: color 0.3s; }
.footer-b .footer-nav a:hover { color: var(--white); }
.footer-b .footer-legal .footer-copyright { font-size: 11px; letter-spacing: 0.05em; color: rgba(245,245,245,0.4); }
.footer-giant { text-align: center; margin-top: 22px; }
.footer-giant-eyebrow { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--bronze); margin-bottom: 2px; }
.footer-giant-word {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 19vw, 232px);
  line-height: 0.86; letter-spacing: 0.01em; white-space: nowrap; user-select: none;
  color: transparent; -webkit-text-stroke: 2px rgba(184,149,106,0.55);
  margin-bottom: -2.6%;
}
@media (max-width: 680px) {
  .footer-b .footer-legal { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .footer-giant-word { -webkit-text-stroke-width: 1.5px; }
}

/* ==================================================================
   SHARED INNER-PAGE HERO, "SPEC SHEET" FRAME + APERTURE + WIREFRAME
   Used by about.html, services.html, work.html
   ================================================================== */
.spec-hero {
  --fi: clamp(22px, 3.2vw, 58px);           /* frame inset, sides & bottom */
  --fiT: clamp(116px, 14vh, 142px);         /* top inset, clears the fixed 90px nav */
  position: relative;
  min-height: 88vh;
  padding: 0;
  overflow: hidden;
  background: var(--navy);
}

/* ---- dimension rules, outside the frame ---- */
.sh-ruler {
  position: absolute;
  opacity: 0;
  animation: shFade 0.7s linear 0.95s forwards;
  z-index: 3;
}
.sh-ruler-x {
  left: var(--fi); right: var(--fi);
  top: calc(var(--fiT) - 22px);
  height: 11px;
  border-top: 1px solid rgba(184,149,106,0.26);
  background-image: linear-gradient(90deg, rgba(184,149,106,0.4) 0 1px, transparent 1px);
  background-size: 9.3% 100%;
}
.sh-ruler-y {
  top: var(--fiT); bottom: var(--fi);
  left: calc(var(--fi) - 22px);
  width: 11px;
  border-left: 1px solid rgba(184,149,106,0.26);
  background-image: linear-gradient(180deg, rgba(184,149,106,0.4) 0 1px, transparent 1px);
  background-size: 100% 20%;
}

/* ---- the hairline frame, drawn in ---- */
.sh-frame { position: absolute; inset: var(--fiT) var(--fi) var(--fi); z-index: 8; pointer-events: none; }
.sh-frame i { position: absolute; background: rgba(184,149,106,0.42); display: block; }
.sh-frame i.t  { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left center; }
.sh-frame i.r  { top: 0; right: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top center; }
.sh-frame i.b  { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right center; }
.sh-frame i.lf { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: bottom center; }
.sh-frame i.t  { animation: shScaleX 0.7s var(--ease-smooth) 0.15s forwards; }
.sh-frame i.r  { animation: shScaleY 0.7s var(--ease-smooth) 0.32s forwards; }
.sh-frame i.b  { animation: shScaleX 0.7s var(--ease-smooth) 0.15s forwards; }
.sh-frame i.lf { animation: shScaleY 0.7s var(--ease-smooth) 0.32s forwards; }
@keyframes shScaleX { to { transform: scaleX(1); } }
@keyframes shScaleY { to { transform: scaleY(1); } }
@keyframes shFade   { to { opacity: 1; } }

/* ---- corner registration ticks ---- */
.sh-tick {
  position: absolute; width: 34px; height: 34px; z-index: 9;
  opacity: 0; animation: shFade 0.6s linear 0.85s forwards;
  pointer-events: none;
}
.sh-tick::before, .sh-tick::after { content: ''; position: absolute; background: rgba(184,149,106,0.65); }
.sh-tick::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.sh-tick::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; }
.sh-tick.tl { left: calc(var(--fi) - 17px); top: calc(var(--fiT) - 17px); }
.sh-tick.tr { right: calc(var(--fi) - 17px); top: calc(var(--fiT) - 17px); }
.sh-tick.bl { left: calc(var(--fi) - 17px); bottom: calc(var(--fi) - 17px); }
.sh-tick.br { right: calc(var(--fi) - 17px); bottom: calc(var(--fi) - 17px); }

/* ---- everything inside the frame is clipped to it ---- */
.sh-stage {
  position: absolute; inset: var(--fiT) var(--fi) var(--fi);
  overflow: hidden;
  z-index: 4;
  display: flex; align-items: center;
}

/* ---- the rotating wireframe solid, right side, inside the frame ---- */
.sh-object {
  position: absolute;
  right: 5%; top: 2%;
  width: 54%; height: 96%;
  z-index: 1;
  opacity: 0;
  animation: shFade 1.6s linear 0.5s forwards;
  pointer-events: none;
}

/* ---- text block: option-01 layout, left aligned ---- */
.sh-inner {
  position: relative; z-index: 5;
  width: 100%;
  max-width: 1180px;
  padding: 0 clamp(26px, 5vw, 76px);
}
.sh-inner .breadcrumb { margin-bottom: 26px; }

.sh-reveal { position: relative; }
.sh-window { clip-path: inset(50% 0 50% 0); animation: shOpen 1.5s var(--ease-smooth) 0.5s forwards; }
@keyframes shOpen { to { clip-path: inset(0% 0 0% 0); } }

.sh-edge {
  position: absolute; top: 50%; left: -120vw; right: -120vw; height: 1px;
  background: var(--bronze);
  box-shadow: 0 0 22px 3px rgba(184,149,106,0.55);
  z-index: 7; pointer-events: none;
}
.sh-edge.a { animation: shEdgeUp 1.5s var(--ease-smooth) 0.5s forwards; }
.sh-edge.b { animation: shEdgeDn 1.5s var(--ease-smooth) 0.5s forwards; }
@keyframes shEdgeUp { to { transform: translateY(-46vh); opacity: 0; } }
@keyframes shEdgeDn { to { transform: translateY(46vh);  opacity: 0; } }

.sh-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 88px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 22ch;
}
.sh-title .serif-em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; color: var(--bronze); letter-spacing: 0;
}

.sh-rule {
  height: 1px; background: var(--bronze); width: 0;
  margin-top: clamp(26px, 4vh, 42px);
  animation: shRule 1s var(--ease-smooth) 1.55s forwards;
}
@keyframes shRule { to { width: min(460px, 62%); } }

.sh-sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65;
  color: rgba(245,245,245,0.68);
  max-width: 46ch;
  margin-top: 24px;
  opacity: 0; transform: translateY(14px);
  animation: shUp 0.8s var(--ease-smooth) 1.75s forwards;
}
.sh-cta {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 34px;
  opacity: 0; transform: translateY(14px);
  animation: shUp 0.8s var(--ease-smooth) 1.9s forwards;
}
@keyframes shUp { to { opacity: 1; transform: translateY(0); } }

/* ---- title block, bottom-right inside the frame ---- */
.sh-block {
  position: absolute; z-index: 6;
  right: clamp(26px, 5vw, 76px);
  bottom: clamp(28px, 5vh, 52px);
  text-align: right;
  border-right: 1px solid rgba(184,149,106,0.4);
  padding-right: 16px;
  opacity: 0;
  animation: shFade 0.8s linear 2s forwards;
}
.sh-block div {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,245,245,0.42); line-height: 2.1;
  white-space: nowrap;
}
.sh-block div b { color: var(--bronze); font-weight: 500; }

@media (max-width: 860px) {
  .spec-hero { min-height: 78vh; --fiT: clamp(100px, 13vh, 120px); }
  .sh-ruler, .sh-tick { display: none; }
  .sh-object { width: 92%; right: 4%; top: 4%; height: 92%; opacity: 0; animation: shFadeHalf 1.6s linear 0.5s forwards; }
  @keyframes shFadeHalf { to { opacity: 0.4; } }
  .sh-title { max-width: 100%; }
  .sh-block { position: static; text-align: left; border-right: 0; border-left: 1px solid rgba(184,149,106,0.4); padding: 0 0 0 14px; margin: 34px 0 0 clamp(26px,5vw,76px); }
  .sh-stage { flex-direction: column; justify-content: center; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .spec-hero * { animation: none !important; }
  .sh-frame i { transform: none !important; }
  .sh-ruler, .sh-tick, .sh-block, .sh-sub, .sh-cta, .sh-object { opacity: 1 !important; transform: none !important; }
  .sh-window { clip-path: none !important; }
  .sh-edge { display: none; }
  .sh-rule { width: min(460px, 62%) !important; }
}

/* ==================================================================
   SERVICES, DIP FLAGSHIP SLAB
   ================================================================== */
.dip-slab { background: var(--navy); position: relative; --slab-w: min(1040px, 100%); }
.slab-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.94; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--white);
  max-width: var(--slab-w); margin-top: 24px;
}
.slab-h .serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); letter-spacing: 0; }
.slab-lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(21px, 2.3vw, 32px); line-height: 1.45;
  color: var(--bronze-light, #D4AF8A);
  max-width: var(--slab-w); margin-top: 42px;
}
.slab-body {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.75;
  color: rgba(245,245,245,0.6);
  max-width: var(--slab-w); margin-top: 26px;
}
.slab-rows { margin-top: 68px; border-top: 1px solid rgba(184,149,106,0.28); }
.slab-row {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 30px; align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid rgba(184,149,106,0.16);
  transition: background 0.4s var(--ease-smooth), padding-left 0.4s var(--ease-smooth);
}
.slab-row:hover { background: rgba(184,149,106,0.05); padding-left: 18px; }
.slab-row b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.16em; color: var(--bronze); font-weight: 500; }
.slab-row span { font-family: var(--font-display); font-size: clamp(19px, 2.1vw, 30px); color: var(--white); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.15; }
.slab-row em { font-style: normal; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,245,0.32); white-space: nowrap; }
.slab-foot { margin-top: 54px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.slab-foot p { font-family: var(--font-body); font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.45); max-width: 56ch; }

/* ==================================================================
   SERVICES, RADIAL DIAGRAM
   ================================================================== */
.radial-wrap { margin: 46px auto 0; max-width: 1080px; }
.radial-svg { width: 100%; height: auto; display: block; overflow: visible; }

.rad-spoke { fill: none; stroke: rgba(184,149,106,0.8); stroke-width: 2.6; }
.rad-pulse {
  /* bronze on bronze was invisible; sapphire reads clearly against both the
     gold channels and the white ground */
  fill: none; stroke: var(--sapphire); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 0.9;
  animation: radPulse 5s linear infinite;
}
@keyframes radPulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.rad-core-ring { fill: none; stroke: var(--bronze); stroke-width: 2.4; }
.rad-core-ring-2 { opacity: 0.45; stroke-width: 1.8; stroke-dasharray: 5 9; }
.rad-core-a {
  font-family: var(--font-display); font-weight: 600;
  font-size: 27px; letter-spacing: 0.055em;
  fill: var(--navy);
}
.rad-core-b {
  font-family: var(--font-serif); font-style: italic;
  font-size: 34px; fill: var(--bronze);
}

.rad-node { cursor: pointer; outline: none; }
.rad-hit { fill: transparent; }
.rad-dot { fill: var(--bronze); transition: r 0.3s var(--ease-smooth); }
.rad-halo { fill: none; stroke: var(--bronze); stroke-width: 1.6; opacity: 0.5; transition: opacity 0.3s, stroke-width 0.3s; }
.rad-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; letter-spacing: 0.015em;
  fill: var(--navy); text-transform: uppercase;
  transition: fill 0.3s var(--ease-smooth);
}
.rad-num {
  font-family: var(--font-body); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  fill: rgba(0,10,31,0.38);
  opacity: 0; transition: opacity 0.3s var(--ease-smooth);
}
.rad-node:hover .rad-dot, .rad-node:focus-visible .rad-dot { r: 9; }
.rad-node:hover .rad-halo, .rad-node:focus-visible .rad-halo { opacity: 1; stroke-width: 2.4; }
.rad-node:hover .rad-label, .rad-node:focus-visible .rad-label { fill: var(--bronze); }
.rad-node:hover .rad-num, .rad-node:focus-visible .rad-num { opacity: 1; }
.rad-node:focus-visible .rad-halo { stroke-dasharray: 3 4; }

@media (prefers-reduced-motion: reduce) { .rad-pulse { animation: none; opacity: 0; } }

@media (max-width: 1100px) {
  .rad-label { font-size: 24px; }
  .rad-num { font-size: 13px; }
  .rad-core-a { font-size: 31px; }
  .rad-core-b { font-size: 38px; }
}
/* the ten cards stay in the DOM purely as data for the modal */
.svc-data { display: none; }

@media (max-width: 760px) {
  .slab-row { grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; }
  /* the diagram can't hold ten labels at phone width, show the cards instead */
  .radial-wrap { display: none; }
  .svc-data {
    display: grid; grid-template-columns: 1fr; gap: 1px;
    margin-top: 34px;
    background: rgba(0,10,31,0.12);
    border: 1px solid rgba(0,10,31,0.12);
  }
  .svc-data .svc-card { padding: 24px 20px; }
  .svc-data .svc-card-more { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   The homepage's legacy `#services { background: navy }` is an ID rule,
   so it outranks `.section-pad.light` and forces every #services section
   dark. These put the light/dark modifiers back in charge.
   ------------------------------------------------------------------ */
#services.section-pad.light { background: var(--white); }
#services.section-pad.dark  { background: var(--navy); }

/* ==================================================================
   CASE STUDIES, CHAMFERED CARD GRID + SLIDE-OVER PANEL
   ================================================================== */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
}

/* the notched top-left corner, shared by the card and its media */
.cs-card {
  --cut: 46px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 30px;
  cursor: pointer;
  background: linear-gradient(150deg, rgba(30,58,114,0.4) 0%, var(--navy) 62%);
  border: 1px solid rgba(184,149,106,0.18);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  transition: border-color 0.4s var(--ease-smooth), transform 0.5s var(--ease-smooth), background 0.4s var(--ease-smooth);
}
.cs-card:nth-child(even) { background: linear-gradient(150deg, rgba(74,106,138,0.34) 0%, var(--navy) 66%); }
.cs-card:hover,
.cs-card:focus-visible {
  border-color: rgba(184,149,106,0.5);
  transform: translateY(-6px);
  outline: none;
}
/* a bronze hairline along the chamfer, so the cut reads as deliberate */
.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--cut) * 1.42);
  height: 1px;
  background: rgba(184,149,106,0.4);
  transform-origin: left center;
  transform: rotate(-45deg) translateX(-1px);
  pointer-events: none;
  transition: background 0.4s var(--ease-smooth);
  z-index: 4;
}
.cs-card:hover::before { background: rgba(184,149,106,0.8); }

.cs-card-media {
  --cut: 42px;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(150deg, rgba(30,58,114,0.7) 0%, #04102b 70%);
}
.cs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-smooth); }
.cs-card:hover .cs-card-media img { transform: scale(1.04); }

/* placeholder until real photography is dropped in */
.cs-media-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image:
    linear-gradient(rgba(184,149,106,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,106,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.cs-media-n {
  font-family: var(--font-display); font-weight: 800;
  font-size: 96px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(184,149,106,0.34);
  transition: -webkit-text-stroke-color 0.4s var(--ease-smooth);
}
.cs-card:hover .cs-media-n { -webkit-text-stroke-color: rgba(184,149,106,0.6); }

.cs-card-body { padding: 26px 12px 0; display: flex; flex-direction: column; flex: 1; }
.cs-card-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cs-card-tag { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); }
.cs-card-year { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.05em; color: rgba(245,245,245,0.4); }
.cs-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--white);
  margin-top: 16px;
}
.cs-card-points { list-style: none; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cs-card-points li {
  position: relative; padding-left: 20px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6; color: rgba(245,245,245,0.6);
}
.cs-card-points li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--bronze);
}
.cs-card-stats { display: flex; gap: 36px; margin-top: 24px; flex-wrap: wrap; }
.cs-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--bronze); letter-spacing: 0.02em; }
.cs-stat span { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,245,245,0.4); margin-top: 6px; }
.cs-card-more {
  margin-top: auto; padding-top: 26px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}
.cs-card:hover .cs-card-more, .cs-card:focus-visible .cs-card-more { opacity: 1; transform: none; }

/* ---------------- slide-over ---------------- */
.cs-panel-wrap { position: fixed; inset: 0; z-index: 2000; overflow: hidden; }
/* belt and braces: even if something focuses inside the off-screen panel,
   the wrapper cannot scroll to chase it */
.cs-panel-wrap { overscroll-behavior: contain; }
.cs-panel { will-change: transform; }
.cs-panel-wrap[hidden] { display: none; }
.cs-panel-overlay {
  position: absolute; inset: 0;
  background: rgba(0,10,31,0.7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.45s var(--ease-smooth);
}
.cs-panel-wrap.open .cs-panel-overlay { opacity: 1; }
.cs-panel {
  --pcut: clamp(44px, 4.4vw, 84px);
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 70vw;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-smooth);
  display: flex; flex-direction: column;
  clip-path: polygon(var(--pcut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--pcut));
}
.cs-panel-wrap.open .cs-panel { transform: none; }
.cs-panel-scroll { overflow-y: auto; height: 100%; padding: clamp(70px,7vw,116px) clamp(30px,4vw,76px) 0; }

.cs-panel-close {
  position: absolute; top: 34px; right: 34px; z-index: 3;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(0,10,31,0.16);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-smooth);
}
.cs-panel-close svg { width: 25px; height: 25px; stroke: var(--navy); stroke-width: 1.6; fill: none; }
.cs-panel-close:hover { border-color: var(--bronze); background: rgba(184,149,106,0.08); transform: rotate(90deg); }

.cs-panel-eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); }
.cs-panel-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(36px, 3.6vw, 66px); line-height: 1.02;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--navy); margin-top: 14px; max-width: 20ch;
}
.cs-panel-sector { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,10,31,0.45); margin-top: 14px; }

.cs-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: clamp(40px,4vw,64px); }
.cs-box { border: 1px solid rgba(0,10,31,0.14); padding: clamp(28px,2.8vw,44px); }
.cs-box h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,2.4vw,40px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); margin-bottom: 20px; }
.cs-box p { font-family: var(--font-body); font-weight: 300; font-size: 17.5px; line-height: 1.72; color: rgba(0,10,31,0.7); }
.cs-res { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.cs-res li {
  position: relative; padding-left: 26px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 17.5px; line-height: 1.6; color: rgba(0,10,31,0.78);
}
.cs-res li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--bronze); }

.cs-block { margin-top: clamp(48px,5.5vw,80px); }
.cs-block-cap { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,10,31,0.4); padding-bottom: 16px; border-bottom: 1px solid rgba(0,10,31,0.14); }

.cs-steps { display: flex; flex-direction: column; }
.cs-step { display: grid; grid-template-columns: 74px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid rgba(0,10,31,0.09); }
.cs-step-n { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; color: var(--bronze); padding-top: 4px; }
.cs-step-t h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,1.9vw,27px); text-transform: uppercase; letter-spacing: 0.015em; color: var(--navy); }
.cs-step-t p { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.68; color: rgba(0,10,31,0.64); margin-top: 10px; max-width: 62ch; }

.cs-tools { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.cs-tool { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(0,10,31,0.14); padding: 14px 24px 14px 18px; transition: border-color 0.3s var(--ease-smooth); }
.cs-tool:hover { border-color: rgba(184,149,106,0.6); }
.cs-tool img { width: 30px; height: 30px; object-fit: contain; }
.cs-tool span { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: var(--navy); }

.cs-panel-cta {
  margin-top: clamp(50px,6vw,80px);
  padding: clamp(34px,4vw,52px) 0 clamp(40px,5vw,64px);
  border-top: 1px solid rgba(0,10,31,0.14);
  text-align: center;
}
.cs-panel-cta p { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(0,10,31,0.55); margin-bottom: 28px; }
.cs-panel-cta .btn-primary { display: inline-flex; }

body.cs-locked { overflow: hidden; }

@media (max-width: 1240px) {
  .cs-panel { width: 92vw; }
}
@media (max-width: 1000px) {
  .cs-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
  .cs-card { --cut: 34px; }
  .cs-card-media { --cut: 30px; }
  .cs-boxes { grid-template-columns: 1fr; }
  .cs-step { grid-template-columns: 40px 1fr; gap: 14px; }
  .cs-card-more { opacity: 1; transform: none; }

  /* 4. two stats side by side; the long labels wrap to two lines within
        their column instead of forcing the pair to stack */
  .cs-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }

  /* 3. on mobile the case study opens as a centred modal, matching the
        services popup, rather than a slide-over from the right */
  .cs-panel-wrap { display: flex; align-items: center; justify-content: center; padding: 16px; }
  .cs-panel {
    position: relative; top: auto; right: auto; bottom: auto;
    width: 100%; max-width: 560px; height: auto; max-height: 90vh;
    --pcut: 30px;
    transform: translateY(22px) scale(0.98); opacity: 0;
    transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
  }
  .cs-panel-wrap.open .cs-panel { transform: none; opacity: 1; }
  .cs-panel-scroll { flex: 1; min-height: 0; height: auto; padding: 54px 22px 0; }
  .cs-panel-close { top: 14px; right: 14px; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-panel, .cs-panel-overlay, .cs-panel-close, .cs-card-media img { transition: none; }
}

/* ==================================================================
   TESTIMONIALS, SPEC-SHEET CARDS
   ================================================================== */
.tc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; margin-top: 52px; }
.tc-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(30px,2.6vw,42px);
}
.section-pad.light .tc-card { background: rgba(0,10,31,0.015); }
.section-pad.dark  .tc-card { background: linear-gradient(150deg, rgba(30,58,114,0.34) 0%, var(--navy) 64%); }

.tc-frame { position: absolute; inset: 0; border: 1px solid rgba(184,149,106,0.45); pointer-events: none; transition: border-color 0.4s var(--ease-smooth); }
.tc-card:hover .tc-frame { border-color: rgba(184,149,106,0.9); }
.tc-tick { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.tc-tick::before, .tc-tick::after { content: ''; position: absolute; background: rgba(184,149,106,0.75); }
.tc-tick::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.tc-tick::after  { top: 50%; left: 0; right: 0; height: 1px; }
.tc-tick.tl { left: -12px; top: -12px; }  .tc-tick.tr { right: -12px; top: -12px; }
.tc-tick.bl { left: -12px; bottom: -12px; } .tc-tick.br { right: -12px; bottom: -12px; }

.tc-sheet {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  padding-bottom: 20px; border-bottom: 1px solid rgba(184,149,106,0.3);
}
.tc-sheet b { color: var(--bronze); font-weight: 500; }
.section-pad.light .tc-sheet { color: rgba(0,10,31,0.42); }
.section-pad.dark  .tc-sheet { color: rgba(245,245,245,0.4); }

.tc-q { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px,1.7vw,25px); line-height: 1.45; margin: 26px 0 auto; }
.section-pad.light .tc-q { color: var(--navy); }
.section-pad.dark  .tc-q { color: var(--white); }

.tc-metric { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(184,149,106,0.3); }
.tc-metric b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--bronze); letter-spacing: 0.02em; }
.tc-metric span { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.section-pad.light .tc-metric span { color: rgba(0,10,31,0.42); }
.section-pad.dark  .tc-metric span { color: rgba(245,245,245,0.4); }

.tc-who { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.75; margin-top: 18px; }
.section-pad.light .tc-who { color: rgba(0,10,31,0.5); }
.section-pad.dark  .tc-who { color: rgba(245,245,245,0.5); }

@media (max-width: 980px) {
  .tc-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ==================================================================
   BOOKING PANEL, frame around the GoHighLevel calendar embed
   NOTE: the widget itself is a cross-origin iframe. Nothing here can
   reach inside it, its colours and fonts are set in GHL's own
   Calendar > Customisations screen. This styles the chrome only.
   ================================================================== */
.booking-panel {
  position: relative;
  background: transparent;
  border: 2px solid rgba(184,149,106,0.65);
  padding: clamp(16px,1.8vw,26px);
}
.bk-tick { position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 3; }
.bk-tick::before, .bk-tick::after { content: ''; position: absolute; background: rgba(184,149,106,0.95); }
.bk-tick::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.bk-tick::after  { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.bk-tick.tl { left: -12px; top: -12px; }  .bk-tick.tr { right: -12px; top: -12px; }
.bk-tick.bl { left: -12px; bottom: -12px; } .bk-tick.br { right: -12px; bottom: -12px; }

.bk-header {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(184,149,106,0.24);
}
.bk-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white);
}
.bk-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,245,245,0.55);
}
.bk-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); animation: bkPulse 2.4s ease-in-out infinite; }
@keyframes bkPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

/* the embed ships on a white ground, so give it a clean plate to sit on */
.bk-frame {
  position: relative; z-index: 2;
  background: var(--navy);
  min-height: 640px;
  overflow: hidden;
}
.bk-frame iframe {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
/* shown until the iframe paints over it */
.bk-loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.bk-loading span {
  width: 8px; height: 8px; background: var(--bronze);
  animation: bkDots 1.2s ease-in-out infinite;
}
.bk-loading span:nth-child(2) { animation-delay: 0.15s; }
.bk-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bkDots { 0%,100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

.bk-note {
  position: relative; z-index: 2;
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.6;
  color: rgba(245,245,245,0.5);
  margin-top: 20px;
}

@media (max-width: 600px) {
  .booking-panel { padding: 18px; }
  .bk-frame, .bk-frame iframe { min-height: 720px; }
  .bk-tick { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-badge-dot, .bk-loading span { animation: none; }
}

/* ==================================================================
   CONTACT, centred lead + full-width booking widget
   ================================================================== */
.contact-lead {
  position: relative;
  padding: clamp(150px,17vh,190px) clamp(24px,6vw,80px) clamp(28px,3.4vh,42px);
  background: var(--navy);
  overflow: hidden;
  text-align: center;
}
.contact-lead-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.contact-lead .breadcrumb { text-align: left; margin-bottom: clamp(40px,6vh,70px); }

.cl-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; }
.cl-eyebrow::before, .cl-eyebrow::after { content: ''; width: 44px; height: 1px; background: var(--bronze); }
.cl-eyebrow span { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); }

.cl-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(42px, 6.4vw, 94px);
  line-height: 0.96; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--white);
  margin-top: 26px;
}
.cl-title .serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); letter-spacing: 0; }

.cl-sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.7;
  color: rgba(245,245,245,0.62);
  max-width: 62ch; margin: 28px auto 0;
}

.cl-meta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(28px,5vw,70px);
  margin-top: clamp(34px,4.5vh,50px);
  padding-top: clamp(28px,3.5vh,38px);
  border-top: 1px solid rgba(184,149,106,0.22);
}
.cl-meta span { display: block; }
.cl-meta b {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--bronze);
}
.cl-meta span { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,245,0.38); line-height: 2.2; }

/* `#booking { padding: 140px 80px 0 }` is an ID rule from the homepage and
   outranks this class, so the id is repeated here to win the padding back.
   No `overflow: hidden` here, it would clip the panel's corner ticks, which
   sit 12px outside the frame. */
.book-sec, #booking.book-sec {
  position: relative;
  background: var(--navy);
  padding: clamp(30px,4vh,48px) clamp(20px,5vw,70px) clamp(80px,10vh,130px);
  overflow: visible;
}
.book-wrap {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  scroll-margin-top: 120px;     /* the fixed nav must not cover it on #book */
}
.book-sec .bk-note { text-align: center; margin-top: 26px; }

@media (max-width: 600px) {
  .contact-lead { padding-top: 130px; }
  .cl-meta { gap: 22px; flex-direction: column; }
}

/* ------------------------------------------------------------------
   The custom cursor is driven by mousemove on this document. A
   cross-origin iframe swallows those events, so the dot would freeze
   at the widget's edge. Over the booking panel we hide it and give
   the real cursor back.
   ------------------------------------------------------------------ */
body.native-cursor { cursor: auto; }
body.native-cursor .cursor,
body.native-cursor .cursor-ring { opacity: 0 !important; }
.bk-frame, .bk-frame iframe { cursor: auto; }

/* ==================================================================
   CONTACT, APERTURE REVEAL (whole page, on load)
   Two shutters part from the centre of the VIEWPORT. Clipping the
   document instead would open from the middle of the scroll height,
   which is off-screen on a tall page.
   ================================================================== */
.ap-shutter {
  position: fixed; inset: 0;
  z-index: 3000;
  pointer-events: none;
  overflow: hidden;
}
.ap-shutter.done { display: none; }
.ap-half {
  position: absolute; left: 0; right: 0;
  height: 50.2vh;                 /* slight overlap so no hairline gap shows */
  background: var(--navy);
  will-change: transform;
}
.ap-half.top { top: 0;    animation: apTop 1.5s var(--ease-smooth) 0.15s forwards; }
.ap-half.bot { bottom: 0; animation: apBot 1.5s var(--ease-smooth) 0.15s forwards; }
@keyframes apTop { to { transform: translateY(-100%); } }
@keyframes apBot { to { transform: translateY(100%); } }

.ap-edge {
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--bronze);
  box-shadow: 0 0 26px 4px rgba(184,149,106,0.7);
  top: 50%;
}
.ap-edge.a { animation: apEdgeUp 1.5s var(--ease-smooth) 0.15s forwards; }
.ap-edge.b { animation: apEdgeDn 1.5s var(--ease-smooth) 0.15s forwards; }
@keyframes apEdgeUp { 60% { opacity: 1; } to { transform: translateY(-50vh); opacity: 0; } }
@keyframes apEdgeDn { 60% { opacity: 1; } to { transform: translateY(50vh);  opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ap-shutter { display: none; }
}

/* ==================================================================
   CONTACT, PAGE-WIDE SPECIFICATION FRAME
   Fixed to the viewport, so it holds as a window border while the
   page scrolls. Sits above the nav so the border stays unbroken.
   ================================================================== */
.framed-region { position: relative; }
.page-frame {
  --pfi: clamp(14px, 2vw, 30px);        /* sides and bottom */
  --pfT: clamp(104px, 12vh, 128px);     /* top, clears the fixed 90px nav */
  position: absolute;
  inset: var(--pfT) var(--pfi) var(--pfi);
  z-index: 5;
  pointer-events: none;
}
.page-frame i { position: absolute; background: rgba(184,149,106,0.55); display: block; }
.page-frame i.t  { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left center; }
.page-frame i.b  { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right center; }
.page-frame i.r  { top: 0; right: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top center; }
.page-frame i.lf { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: bottom center; }
/* begins as the aperture finishes parting */
.page-frame i.t, .page-frame i.b  { animation: shScaleX 0.9s var(--ease-smooth) 1.5s forwards; }
.page-frame i.r, .page-frame i.lf { animation: shScaleY 0.9s var(--ease-smooth) 1.7s forwards; }

.pf-tick { position: absolute; width: 30px; height: 30px; opacity: 0; animation: shFade 0.6s linear 2.3s forwards; }
.pf-tick::before, .pf-tick::after { content: ''; position: absolute; background: rgba(184,149,106,0.85); }
.pf-tick::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.pf-tick::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; }
.pf-tick.tl { left: -15px; top: -15px; }   .pf-tick.tr { right: -15px; top: -15px; }
.pf-tick.bl { left: -15px; bottom: -15px; } .pf-tick.br { right: -15px; bottom: -15px; }
/* the lead section clips its own background; the frame must not be clipped with it */
.framed-region > .page-frame { overflow: visible; }

@media (max-width: 600px) {
  .page-frame { --pfi: 18px; --pfT: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-frame i { transform: none !important; animation: none !important; }
  .pf-tick { opacity: 1 !important; animation: none !important; }
}

/* ==================================================================
   CONTACT, INVERTED LEAD (preview variant, body.lead-invert)
   Light ground for the header block; the booking section stays dark.
   ================================================================== */
body.lead-invert .contact-lead { background: var(--white); }
body.lead-invert .contact-lead .breadcrumb { color: rgba(0,10,31,0.45); }
body.lead-invert .cl-title { color: var(--navy); }
body.lead-invert .cl-sub { color: rgba(0,10,31,0.62); }
body.lead-invert .cl-meta { border-top-color: rgba(0,10,31,0.16); }
body.lead-invert .cl-meta span { color: rgba(0,10,31,0.42); }
/* the frame crosses both grounds, so it needs to read on white too */
body.lead-invert .page-frame i { background: rgba(184,149,106,0.7); }
body.lead-invert .pf-tick::before,
body.lead-invert .pf-tick::after { background: rgba(184,149,106,0.9); }

/* ------------------------------------------------------------------
   Homepage booking section, same panel as contact, with a heading
   block above it instead of a page lead.
   ------------------------------------------------------------------ */
#booking.home-book {
  padding: clamp(90px,11vh,140px) clamp(20px,5vw,70px) clamp(90px,11vh,140px);
  text-align: center;
}
.home-book-head { max-width: 900px; margin: 0 auto clamp(46px,6vh,72px); position: relative; z-index: 2; }
.home-book-head .section-tag { justify-content: center; }
.home-book .cl-title { font-size: clamp(38px, 5.4vw, 78px); margin-top: 24px; }
.home-book .cl-meta { margin-top: clamp(30px,4vh,44px); padding-top: clamp(24px,3vh,34px); }

/* shown if the third-party widget never arrives */
.bk-fallback {
  position: absolute; inset: 0; z-index: 3;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 40px; text-align: center;
  background: var(--navy);
}
.bk-frame.failed .bk-fallback { display: flex; }
.bk-frame.failed .bk-loading { display: none; }
.bk-fallback p { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(245,245,245,0.6); max-width: 44ch; }
.bk-frame.loaded .bk-loading { display: none; }

/* the serif italic sets larger than the sans, so its line needs its own
   descender room inside the overflow mask */
.hero-headline .line-mask.has-accent { padding-bottom: 0.16em; }
.hero-headline .line-inner.accent { line-height: 1; }

/* ==================================================================
   ABOUT VCL, right column: vertical spine
   Four nodes on a bronze circuit line with a signal travelling down it.
   ================================================================== */
.about-right .about-manifesto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.45;
  color: var(--navy);
  margin-bottom: clamp(36px, 4vw, 48px);
}
.about-right .about-manifesto em { font-style: italic; color: var(--bronze); }

.about-spine { position: relative; padding-left: 46px; }

.spine-line {
  position: absolute;
  left: 5px; top: 7px; bottom: 7px;
  width: 2px;
  background: rgba(184,149,106,0.35);
  overflow: hidden;             /* clips the pulse at both ends */
}
.spine-pulse {
  position: absolute;
  left: 0; width: 100%;
  height: 74px; top: -74px;
  background: linear-gradient(180deg, transparent, var(--bronze), transparent);
  animation: spineFlow 4.8s linear infinite;
}
@keyframes spineFlow { from { top: -74px; } to { top: 100%; } }

.spine-node { position: relative; padding-bottom: 34px; }
.spine-node:last-child { padding-bottom: 0; }
.spine-node::before {
  content: '';
  position: absolute;
  left: -46px; top: 6px;
  width: 12px; height: 12px;
  background: var(--bronze);
  transition: transform 0.35s var(--ease-smooth);
}
.spine-node:hover::before { transform: scale(1.35); }
.spine-node b {
  display: block;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze);
}
.spine-node h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; text-transform: uppercase;
  letter-spacing: 0.015em; color: var(--navy);
  margin-top: 8px;
}
.spine-node p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14.5px; line-height: 1.65;
  color: rgba(0,10,31,0.6);
  margin-top: 8px;
}

@media (max-width: 600px) {
  .about-spine { padding-left: 34px; }
  .spine-node::before { left: -34px; width: 10px; height: 10px; }
  .spine-line { left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .spine-pulse { animation: none; display: none; }
}

/* the services intro reads as one short statement now, so give it room */
.services-intro { max-width: 46ch; }

/* 6. CTA buttons were 11px at 0.22em tracking, too light to read
   against bronze; heavier and a size up across both variants */
.btn-primary, .btn-secondary, .btn-ghost {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.btn-primary { padding: 18px 40px; }
.service-cta-btn { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; }

/* ==================================================================
   MOBILE PASS
   Audited at 375x812. Fixes, in order: body copy scaled back from the
   desktop 22-24px overrides, headings that were clipping, the spec
   hero's stage/solid, footer wordmark overflow, and tap targets.
   ================================================================== */
@media (max-width: 760px) {

  /* ---- 1. body copy. The desktop pass pushed everything to 22-24px
       with no mobile counterpart, which made the homepage 15,000px tall
       and pushed every CTA far below the fold. ---- */
  #hero .hero-body,
  .page-hero-sub,
  .about-body,
  .problem-desc,
  .services-intro,
  .difference-subhead,
  .process-intro,
  .process-step-desc,
  .booking-body,
  .booking-detail-text,
  .work-card-desc,
  .value-block p,
  .footer-brand-desc,
  .comparison-table td,
  .stack-sub,
  .service-cta p,
  .svc-card-desc,
  .service-desc,
  .faq-answer,
  .wd-pillar-desc,
  .tw-desc { font-size: 16.5px !important; line-height: 1.7; }

  .problems-cta-text { font-size: 19px; }
  .slab-lead        { font-size: 19px; }
  .about-manifesto  { font-size: 20px; }
  .cs-box p, .cs-res li, .cs-step-t p { font-size: 16px; }
  .footer-col-links a { font-size: 15px; }

  /* ---- 2. headings that overflowed their column ---- */
  .slab-h            { font-size: clamp(30px, 8.4vw, 42px); }
  .slab-row span     { font-size: 17px; }
  .footer-giant-word { font-size: clamp(38px, 13.5vw, 64px); -webkit-text-stroke-width: 1.5px; }

  /* ---- 3. spec hero. The stage was absolutely positioned with a fixed
       height, so the title block was being clipped off the bottom. Let
       it flow instead and the hero grows to fit. ---- */
  .spec-hero { min-height: 0; }
  .sh-stage {
    position: static;
    inset: auto;
    overflow: visible;
    display: block;
    /* equal gap between the frame edge and the content, top and bottom */
    padding: calc(var(--fiT) + 26px) var(--fi) calc(var(--fi) + 26px);
  }
  .sh-inner { padding: 0 12px; }

  /* the solid sat on top of the body copy at 40%; drop it well back */
  .sh-object {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 18%; right: auto;
    width: 86%; height: 58%;
    z-index: 0;
    opacity: 0;
    animation: shFadeFaint 1.6s linear 0.5s forwards;
  }
  @keyframes shFadeFaint { to { opacity: 0.16; } }
  .sh-inner { position: relative; z-index: 2; }
  /* it is static in flow here, so the desktop right/bottom offsets must be
     cleared or they drag it back over the CTA */
  .sh-block {
    position: relative; z-index: 2;
    right: auto; bottom: auto; left: auto;
    margin: 30px 0 0 12px;
  }

  /* ---- 4. give the booking widget back the width the frame ate ---- */
  .book-sec, #booking.book-sec { padding-left: 10px; padding-right: 10px; }
  .booking-panel { padding: 10px; }
  /* ticks sit 15px outside the frame, so the inset has to exceed that
     or they push the page into horizontal scroll */
  .page-frame { --pfi: 18px; }
  .pf-tick { width: 22px; height: 22px; }
  .pf-tick.tl { left: -11px; top: -11px; }   .pf-tick.tr { right: -11px; top: -11px; }
  .pf-tick.bl { left: -11px; bottom: -11px; } .pf-tick.br { right: -11px; bottom: -11px; }

  /* ---- 5. tap targets. The menu links, footer links and breadcrumb
       were 12-17px tall: the spacing sat on the list item, so only the
       text line itself was tappable. All now clear 44px. ---- */
  #navLinks li { display: block; }
  #navLinks a { display: block; padding: 16px 24px; }
  #navLinks .nav-cta { display: inline-flex; }

  .footer-b .footer-nav { gap: 2px; }
  .footer-b .footer-nav a,
  .footer-col-links a,
  .footer-legal a { display: inline-block; padding: 16px 6px; }
  .breadcrumb a { display: inline-block; padding: 16px 8px; margin: -16px -8px; }
  .btn-ghost { padding: 14px 4px; }

  /* both were wrapping at 375px: the eyebrow onto two lines beside a
     single-line rule, and the primary CTA mid-phrase */
  /* #hero .hero-eyebrow-text is an ID rule at 12.5px, so this has to
     match its specificity to win */
  #hero .hero-eyebrow-text,
  .hero-eyebrow-text { font-size: 10px; letter-spacing: 0.14em; }
  .btn-primary { padding: 17px 24px; letter-spacing: 0.14em; }

  /* the testimonial cards' corner ticks sit 12px outside the card, which
     pushed them past the section edge once the grid went single-column */
  .tc-grid { padding: 0 12px; }
  .nav-logo { padding: 6px 0; }
}

/* four principles: was an inline style on the element, which no media
   query could override, so it stayed 4-up at 375px */
.values-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .values-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .values-grid-4 { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  /* process steps: the title's min-content width burst the grid track */
  .process-step { grid-template-columns: 44px 1fr; }
  .process-step-left { padding: 34px 0; }
  .process-step-right { padding: 34px 0 34px 18px; min-width: 0; }
  .process-step-title { font-size: 20px; overflow-wrap: anywhere; }
  .process-step-num { font-size: 30px; }
  .tw-title { font-size: 21px; }
  .breadcrumb a { padding: 16px 8px; margin: -16px -8px; }
}

@media (max-width: 460px) {
  .slab-h { font-size: clamp(27px, 8.2vw, 34px); }
  .footer-b { text-align: center; }
  /* break the wordmark out of the footer's 24px side padding so it spans
     the full screen width edge to edge */
  .footer-giant { margin: 30px -24px 0; }
  .footer-giant-word {
    /* Oxanium 800 renders VANGUARD at ~5.48x the font size, so this fills
       the 375px viewport at ~18vw. The div box is clipped by the footer's
       overflow:hidden, which is why a larger value shows the word cut off
       even though the box still measured full-width. */
    font-size: 18vw;
    -webkit-text-stroke-width: 1px;
    margin-bottom: -1.5%;
  }
  .sh-title { font-size: clamp(30px, 9.4vw, 40px); }
}

/* ==================================================================
   4. Service card feature lists: drop the bronze dash markers.
   Desktop and mobile, so this sits outside any media query.
   ================================================================== */

/* ==================================================================
   NAV OVERLAY HARDENING (all viewports where the drawer is used)
   The drawer was translucent and relied on body{overflow:hidden},
   which iOS Safari ignores, so the page kept moving behind it once
   scrolled. Opaque ground + a real scroll lock in main.js.
   ================================================================== */
@media (max-width: 960px) {
  .nav-menu {
    background: var(--navy);
    -webkit-backdrop-filter: blur(24px);
    height: 100vh;
    height: 100dvh;          /* survives the iOS URL bar collapsing */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open { position: fixed; width: 100%; overflow: hidden; }
}

/* ==================================================================
   MOBILE ONLY (1, 2, 3) — centred hero, horizontal stats, centred headings
   ================================================================== */
@media (max-width: 760px) {

  /* ---- 1. centred hero, no standfirst ---- */
  .hero-left { text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow-line { display: none; }
  .hero-body { display: none; }
  .hero-actions { flex-direction: column; align-items: center; gap: 20px; }
  .hero-headline { margin-bottom: 26px; }

  /* ---- 2. stats in a row, small enough to clear the section below ---- */
  .hero-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 18px;
    margin-top: 44px;
    padding-top: 30px;
  }
  .hero-stat { flex: 1 1 0; min-width: 0; }
  /* #hero .hero-stat-* are ID rules at 50px/12.5px, so these have to
     match that specificity to win */
  #hero .hero-stat-number,
  .hero-stat-number { font-size: 30px; letter-spacing: 0.01em; }
  #hero .hero-stat-label,
  .hero-stat-label {
    font-size: 10px; letter-spacing: 0.1em;
    line-height: 1.4; margin-top: 8px;
  }

  /* ---- 3. centred headings (headings only; body copy stays ranged left) ---- */
  .hero-headline,
  .page-hero-title,
  .section-heading,
  .about-heading,
  .problems-heading,
  .services-heading,
  .difference-heading,
  .process-heading,
  .booking-heading,
  .stack-heading,
  .sh-title,
  .cl-title,
  .slab-h,
  .cs-panel-title { text-align: center; }
  /* centre the CLIENT eyebrow and the sector line to match the title */
  .cs-panel-head { text-align: center; }
  .cs-panel-eyebrow, .cs-panel-sector { text-align: center; }
  .cs-panel-title { margin-left: auto; margin-right: auto; }

  /* long single words (INFRASTRUCTURE.) were breaking mid-word at the
     40px clamp minimum. Several of these headings carry an inline
     font-size, so !important is the only thing that reaches them. */
  .section-heading,
  .about-heading,
  .problems-heading,
  .services-heading,
  .difference-heading,
  .process-heading,
  .booking-heading,
  .stack-heading { font-size: clamp(26px, 7.4vw, 34px) !important; line-height: 1.08; }
  .page-hero-title { font-size: clamp(30px, 9vw, 40px); }

  /* the eyebrow rules sit beside those headings, so they centre too */
  .section-tag,
  .to-eyebrow,
  .tm-eyebrow { justify-content: center; }
  .section-tag-line { display: none; }
  .cl-eyebrow { justify-content: center; }
}

/* ---- case study: live site link ---- */
.cs-visit {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 24px;
  padding: 18px 26px;
  border: 1px solid rgba(0,10,31,0.16);
  text-decoration: none;
  transition: border-color 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth);
}
.cs-visit:hover { border-color: var(--bronze); background: rgba(184,149,106,0.07); }
.cs-visit-url {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: 0.02em; color: var(--navy);
}
.cs-visit-arrow { font-size: 17px; color: var(--bronze); transition: transform 0.35s var(--ease-smooth); }
.cs-visit:hover .cs-visit-arrow { transform: translate(3px, -3px); }

/* ==================================================================
   PROBLEM CARDS, bronze frame per card
   The grid used a 1px gap over a bronze background to fake hairlines
   between cards, which reads as a divided table rather than four
   separate cards. Real gap + a border on each card instead.
   ================================================================== */
.problems-grid {
  gap: clamp(14px, 1.4vw, 22px);
  background: none;
}
.problem-card {
  border: 1px solid rgba(184, 149, 106, 0.34);
  transition: background var(--transition-med), border-color 0.4s var(--ease-smooth);
}
.problem-card:hover { border-color: rgba(184, 149, 106, 0.75); }

/* the hover underline sat on the card's outer edge, where it now collides
   with the frame; inset it so it reads as a fill inside the border */
.problem-card::before { left: 1px; right: 1px; bottom: 1px; }

/* ------------------------------------------------------------------
   Services hero: the headline is three deliberate lines. Its longest,
   "+ EXECUTIVE-LEVEL", was wrapping at the shared mobile cap, so this
   scales it to the measure rather than letting it break mid-word.
   ------------------------------------------------------------------ */
.spec-hero[data-solid="nested"] .sh-title { max-width: 24ch; }

@media (max-width: 760px) {
  .spec-hero[data-solid="nested"] .sh-title {
    font-size: clamp(23px, 7.2vw, 34px) !important;
    letter-spacing: 0;
  }
  /* give the copy the full width of the frame on small screens */
  .sh-inner { padding: 0 4px; }
}

/* ------------------------------------------------------------------
   Nested cubes sit in a larger canvas than the other heroes: they are
   meant to fill most of the frame, not sit beside the copy.
   ------------------------------------------------------------------ */
.spec-hero[data-solid="nested"] .sh-object {
  right: 0; top: 0;
  width: 60%; height: 100%;
}
@media (max-width: 760px) {
  .spec-hero[data-solid="nested"] .sh-object {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 94%; height: 62%; top: 16%;
  }
}

/* ==================================================================
   ACCENT WORDS, one rule for the whole site
   .serif-em was only styled when scoped to one of twelve specific
   parent classes, so any heading using another class (.section-heading
   above all) rendered its accent as plain navy title case. That is why
   some headings showed a gold italic word and others just looked like
   they had a stray lowercase word in them.
   This is the base rule: the accent is always bronze Cormorant italic,
   whatever heading it sits in.
   ================================================================== */
.serif-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--bronze);
  letter-spacing: 0;
}
/* the footer wordmark sets slightly heavier to hold up at its size */
.footer-tagline .serif-em { font-weight: 500; }

/* every display heading is set in caps; the accent span opts back out of
   that via text-transform above, so the two never disagree */
.section-heading,
.stack-heading,
.about-heading,
.problems-heading,
.services-heading,
.difference-heading,
.process-heading,
.booking-heading { text-transform: uppercase; }

/* the case studies standfirst is far longer than the other heroes', and ran
   to six lines at the shared 46ch measure */
.sh-sub-wide { max-width: 74ch; }

/* ==================================================================
   RESPONSIVE LINE BREAKS
   Desktop headings want three lines; mobile wants two. These let one
   piece of markup serve both instead of the copy being duplicated.
   ================================================================== */
.br-m { display: none; }
@media (max-width: 760px) {
  .br-m { display: inline; }
  .br-d { display: none; }
}

@media (max-width: 760px) {
  /* Headings fill the content measure at a big size. The long ones use their
     full desktop line breaks here (br-d shown) so they run three short,
     balanced lines that fill the width, rather than two long ones that would
     force the font small. */
  .section-heading,
  .about-heading,
  .problems-heading,
  .services-heading,
  .difference-heading,
  .process-heading,
  .booking-heading,
  .stack-heading,
  .slab-h { font-size: clamp(30px, 8.8vw, 40px) !important; line-height: 1.05; }
  /* the manual line breaks were tuned for the old small size and now fight
     the bigger font; drop them inside headings and let the text wrap to fill
     the measure on its own */
  .section-heading br,
  .about-heading br,
  .problems-heading br,
  .services-heading br,
  .difference-heading br,
  .process-heading br,
  .booking-heading br,
  .stack-heading br,
  .slab-h br { display: none; }

  /* the hero grid kept a second column for the vertical wordmark even
     though it is hidden, so the copy was boxed into 302px of 375 and
     read as off-centre. One column gives it the full width. */
  #hero { grid-template-columns: 1fr; min-height: auto; }
  #hero .hero-left { max-width: 100%; justify-content: flex-start; padding: 96px 22px 60px; }

  /* the About CTA was the only control still ranged left */
  .about-cta-wrap { text-align: center; }

  /* .hero-left carried asymmetric padding (40px right, 22px left) from the
     old two-column layout, so centred copy still sat 9px left of true */
  #hero .hero-left { padding-left: 22px; padding-right: 22px; }

  /* the tech-stack heading keeps an 18ch cap for the desktop centred block,
     which on mobile squeezed it to 238px and forced a third and fourth line */
  .stack-heading { max-width: 100%; }
}

/* ==================================================================
   MOBILE HERO + SECTION CLEANUP (batch)
   ================================================================== */
@media (max-width: 760px) {
  /* 2. about-style hero: drop the breadcrumb and the gold rule, centre
        the standfirst and the CTA row */
  .spec-hero .breadcrumb { display: none; }
  .spec-hero .sh-rule { display: none; }
  .spec-hero .sh-sub { margin-left: auto; margin-right: auto; text-align: center; }
  .spec-hero .sh-cta { justify-content: center; }

  /* 3. the SHEET / SUBJECT / REV title block adds nothing on a phone */
  .spec-hero .sh-block { display: none; }

  /* 4. the giant outline numerals bled off the top of each card and read as
        cut off; pull them fully inside */
  .wd-pillar-num { font-size: 92px; top: 6px; right: 8px; }
  .tw-num { font-size: 104px; top: 6px; }

  /* 5. the process (Five Phases) intro sits under a centred heading, so it
        centres too */
  .process-intro { text-align: center; margin-left: auto; margin-right: auto; }
}

/* ------------------------------------------------------------------
   Services DIP slab: centre the sole CTA on mobile
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .slab-foot { justify-content: center; }
}

/* ==================================================================
   FOUNDER SECTION (Option A: framed portrait + signed statement)
   ================================================================== */
.fdr-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
  max-width: 1200px; margin: 0 auto; position: relative; z-index: 2;
}
.fdr-portrait { position: relative; }
.fdr-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center 22%;
}
.fdr-frame { position: absolute; inset: -12px; border: 1px solid rgba(184,149,106,0.5); pointer-events: none; }
.fdr-tick { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.fdr-tick::before, .fdr-tick::after { content: ''; position: absolute; background: var(--bronze); }
.fdr-tick::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.fdr-tick::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -0.5px; }
.fdr-tick.tl { left: -12px; top: -12px; } .fdr-tick.tr { right: -12px; top: -12px; }
.fdr-tick.bl { left: -12px; bottom: -12px; } .fdr-tick.br { right: -12px; bottom: -12px; }

.fdr-body {
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.75;
  color: rgba(0,10,31,0.68); margin-top: 22px; max-width: 46ch;
}
.section-pad.dark .fdr-body { color: rgba(245,245,245,0.65); }
.fdr-sig { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(0,10,31,0.14); }
.section-pad.dark .fdr-sig { border-top-color: rgba(184,149,106,0.28); }
.fdr-sig-name { font-family: var(--font-serif); font-style: italic; font-size: 30px; color: var(--navy); line-height: 1; }
.section-pad.dark .fdr-sig-name { color: var(--white); }
.fdr-sig-role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); margin-top: 8px; }

@media (max-width: 860px) {
  .fdr-grid { grid-template-columns: 1fr; gap: 40px; }
  .fdr-portrait { max-width: 360px; }
}
@media (max-width: 760px) {
  .fdr-grid { text-align: center; }
  .fdr-portrait { margin: 0 auto; }
  .fdr-body { margin-left: auto; margin-right: auto; }
  .fdr-sig { display: inline-block; }
}