/* =============================================================
   CSS VARIABLES
============================================================= */
:root {
  --surface:         #F4F2ED;
  --white:           #FFFFFF;
  --text-dark:       #1A1B1C;
  --text-mid:        #5C5A57;
  --dark:            #0F1011;
  --border:          #DEDAD3;
  --court-blue:      #1565C0;
  --court-blue-dk:   #0D47A1;
  --court-blue-pale: #E3F0FF;
  --court-red:       #C62828;
  --court-red-pale:  #FEECEC;
  --court-green:     #2E7D32;
  --court-green-pale:#EBF5EC;
}

/* =============================================================
   RESET + BASE
============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; }

/* =============================================================
   LAYOUT CONTAINERS
============================================================= */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}

/* =============================================================
   TYPOGRAPHY UTILITIES
============================================================= */
.eyebrow {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--court-blue);
  margin-bottom: 12px;
}
.bebas {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* =============================================================
   BUTTON SYSTEM
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.btn-blue      { background: var(--court-blue); color: #fff; padding: 13px 26px; }
.btn-blue:hover{ background: var(--court-blue-dk); }
.btn-blue-lg   { background: var(--court-blue); color: #fff; padding: 18px 36px; font-size: 16px; }
.btn-blue-lg:hover { background: var(--court-blue-dk); }
.btn-red       { background: var(--court-red); color: #fff; padding: 13px 26px; }
.btn-red:hover { background: #B71C1C; }
.btn-red-lg    { background: var(--court-red); color: #fff; padding: 18px 36px; font-size: 16px; }
.btn-red-lg:hover { background: #B71C1C; }
.btn-ghost-lg  { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.60); padding: 18px 36px; font-size: 16px; }
.btn-ghost-lg:hover { background: rgba(255,255,255,0.08); }
.btn-outline-blue { background: transparent; color: var(--court-blue); border: 1.5px solid var(--court-blue); padding: 12px 24px; }
.btn-outline-blue:hover { background: var(--court-blue); color: #fff; }
.btn-text { background: none; border: none; padding: 0; font-size: 16px; letter-spacing: 0.08em; }
.btn-text-blue { color: var(--court-blue); }
.btn-text-blue:hover { color: var(--court-blue-dk); }
.btn-text-red  { color: var(--court-red); }
.btn-text-green{ color: var(--court-green); }

/* =============================================================
   BADGE / CHIP SYSTEM
============================================================= */
.badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
}
.badge-red   { background: var(--court-red);   color: #fff; }
.badge-blue  { background: var(--court-blue);  color: #fff; }
.badge-green { background: var(--court-green); color: #fff; }

.chip {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--court-blue);
  color: var(--court-blue);
}

/* =============================================================
   IMAGE PLACEHOLDER
============================================================= */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161616;
  width: 100%;
  height: 100%;
}
.img-ph span {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-align: center;
  padding: 20px;
  line-height: 1.8;
}

/* =============================================================
   SCROLL REVEAL
============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* =============================================================
   01 — NAVIGATION
============================================================= */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: 72px;
  background: var(--white);
  transition: box-shadow 0.3s;
}
#nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.09); }
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.nav-logo img {
  height: 50px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--court-blue);
  border-bottom-color: var(--court-blue);
}
/* --- Nav dropdown --- */
.nav-dd { position: relative; }
.nav-dd-toggle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark);
  padding-bottom: 3px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-dd-toggle::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s;
}
.nav-dd:hover .nav-dd-toggle,
.nav-dd.open .nav-dd-toggle {
  color: var(--court-blue);
  border-bottom-color: var(--court-blue);
}
.nav-dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  z-index: 100;
}
.nav-dd-menu-inner {
  background: #2A2A2C;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
  min-width: 280px;
  padding: 12px 0;
}
.nav-dd-menu a {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.72);
  padding: 13px 24px 13px 28px;
  border-bottom: none;
  border-left: 3px solid transparent !important;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.nav-dd-menu a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-left-color: var(--court-blue) !important;
}
.nav-dd-menu a:nth-child(4) { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08) !important; padding-top: 18px; }
.nav-dd-menu a:last-child { border-top: 1px solid rgba(255,255,255,0.08) !important; margin-top: 8px; padding-top: 18px; }
.nav-dd:hover .nav-dd-menu,
.nav-dd.open .nav-dd-menu { display: block; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.nav-phone {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--text-dark);
}
.nav-phone:hover { color: var(--court-blue); }
.nav-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  transition: all 0.25s;
}
.nav-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ham.open span:nth-child(2) { opacity: 0; }
.nav-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
#nav-mobile {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: var(--white);
  padding: 16px 24px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 899;
  flex-direction: column;
  gap: 0;
}
#nav-mobile.open { display: flex; }
#nav-mobile a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
#nav-mobile a:hover { color: var(--court-blue); }
#nav-mobile .mob-phone {
  color: var(--court-blue);
  font-weight: 600;
  border-bottom: none;
  padding-top: 20px;
}
#nav-mobile .btn-blue { margin-top: 16px; justify-content: center; }

/* =============================================================
   02 — HERO
============================================================= */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 72px;
  background-color: #0d1a2e;
  background-image: url('images/optimized/20240613_132714.jpg');
  image-orientation: none;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Dark overlay */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,10,20,0.70) 0%, rgba(8,10,20,0.58) 45%, rgba(8,10,20,0.82) 100%);
  z-index: 0;
}
/* Color-washed court-line texture */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(21,101,192,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(198,40,40,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 90%, rgba(46,125,50,0.14) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255,255,255,0.03) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.03) 80px);
  z-index: 0;
}
/* HERO PLACEHOLDER note */
.hero-bg-note {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.40);
  padding: 6px 14px;
  white-space: nowrap;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 64px;
  width: 100%;
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #7FD0FF;
  line-height: 1.7;
  margin-bottom: 20px;
}
.hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 5.25vw, 75px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 28px;
}
.hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.70;
  color: rgba(255,255,255,0.82);
  margin-bottom: 44px;
  max-width: 520px;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Gradient accent text */
.hero-accent {
  background: linear-gradient(90deg, #7FD0FF 0%, #A8E6A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Blue left-border on eyebrow */
.hero-eyebrow-bar {
  padding-left: 14px;
  border-left: 3px solid var(--court-blue);
}
/* Hero sub bold treatment */
.hero-sub strong { color: #fff; font-weight: 600; }
/* Credential chips below CTAs */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.hero-chip-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.dot-blue  { background: var(--court-blue); }
.dot-red   { background: var(--court-red); }
.dot-green { background: var(--court-green); }

/* Credential Card */
.cred-card {
  background: var(--white);
  padding: 40px;
  position: relative;
}
.cred-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--court-blue) 0%, var(--court-red) 50%, var(--court-green) 100%);
}
.cred-stat {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--court-blue);
  margin-bottom: 8px;
}
.cred-body {
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 28px;
}
.cred-certs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cred-cert-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cred-cert-row .chip { flex-shrink: 0; min-width: 58px; text-align: center; }
.cred-cert-label { font-size: 16px; color: var(--text-mid); line-height: 1.4; }

/* =============================================================
   03 — TRUST BAR
============================================================= */
#trust {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-stat {
  padding: 40px 32px;
  position: relative;
}
.trust-stat + .trust-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 2px;
  background: var(--border);
}
.trust-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 45px;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.trust-lbl {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-mid);
  letter-spacing: 0.02em;
}
.c-blue  { color: var(--court-blue); }
.c-red   { color: var(--court-red); }
.c-green { color: var(--court-green); }

/* =============================================================
   04 — SERVICES GRID
============================================================= */
#services {
  background: var(--surface);
  padding: 48px 0 72px;
}
.services-hd { margin-bottom: 52px; }
.services-hd h2 { color: var(--text-dark); font-size: clamp(40px, 5vw, 56px); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* G-Max spans 2 cols in row 2 */
.svc-card-gmax { grid-column: span 2; }

.svc-card {
  background: var(--white);
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.10);
  z-index: 2;
}
.svc-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.icon-bp { background: var(--court-blue-pale); }
.icon-rp { background: var(--court-red-pale); }
.icon-gp { background: var(--court-green-pale); }
.icon-bc { background: rgba(21,101,192,0.12); color: var(--court-blue); font-size: 22px; }

.svc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; min-height: 22px; }
.svc-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  margin-bottom: 12px;
  line-height: 1;
}
.svc-body {
  font-size: 19px;
  color: var(--text-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 24px;
}

/* G-Max Featured Card */
.svc-card-gmax {
  background: var(--dark);
  background-image: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.72)), url('images/optimized/gmax-testing-3.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(21,101,192,0.35);
  padding: 48px;
}
.svc-card-gmax:hover { transform: none; box-shadow: none; }
.svc-card-gmax .svc-name { color: #fff; font-size: 36px; }
.svc-card-gmax .svc-body { color: rgba(255,255,255,0.78); }
.gmax-proof {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.gmax-proof-item {
  padding: 12px 24px 12px 0;
  margin-right: 24px;
  border-top: 2px solid rgba(255,255,255,0.12);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gmax-proof-item:first-child { border-top-color: var(--court-blue); color: var(--court-blue); }
.gmax-proof-item:nth-child(2) { border-top-color: var(--court-red); color: var(--court-red); }
.gmax-proof-item:last-child { border-top-color: var(--court-green); color: var(--court-green); margin-right: 0; }

/* =============================================================
   04b — HOW WE WORK / PROCESS
============================================================= */
/* Scope section (construction page) — white bg between hero and process */
#scope {
  background: var(--white, #fff);
  border-top: 1px solid var(--border);
  padding: 96px 0;
}
/* Net systems section (construction page) */
#netsystems {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 96px 0;
}

#process {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 72px 0;
}
.process-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}
.process-hd {
  max-width: 820px;
  margin-bottom: 56px;
}
.process-h2 {
  font-size: clamp(40px, 5vw, 60px);
  color: var(--text-dark);
  line-height: 0.98;
  margin-top: 14px;
  margin-bottom: 22px;
}
.process-lede {
  font-size: 20px;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 720px;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--border);
  border-top: 3px solid var(--court-blue);
}
.process-card {
  background: var(--white);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
}
.process-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--court-blue);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.process-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.process-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0;
}
.process-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.process-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* =============================================================
   04c — LANDING PAGE: PRICE-VS-VALUE COMPARE GRID
============================================================= */
#pricevalue {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 96px 0;
}
.compare-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 64px;
}
.compare-hd {
  max-width: 820px;
  margin-bottom: 48px;
}
.compare-h2 {
  font-size: clamp(40px, 5vw, 56px);
  color: var(--text-dark);
  line-height: 0.98;
  margin-top: 14px;
  margin-bottom: 22px;
}
.compare-lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 760px;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
}
.compare-card {
  background: var(--white);
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--border);
}
.compare-card.bad { border-top-color: var(--court-red); }
.compare-card.good { border-top-color: var(--court-green); }
.compare-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.03em;
  color: var(--text-dark);
  margin-bottom: 6px;
  line-height: 1.05;
}
.compare-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 22px;
}
.compare-card.bad .compare-sub { color: var(--court-red); }
.compare-card.good .compare-sub { color: var(--court-green); }
.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.compare-list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-mid);
  padding: 14px 0 14px 32px;
  border-top: 1px solid var(--border);
  position: relative;
}
.compare-list li:first-child { border-top: none; }
.compare-list li::before {
  position: absolute;
  left: 0;
  top: 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.compare-card.bad .compare-list li::before { content: '✕'; color: var(--court-red); }
.compare-card.good .compare-list li::before { content: '✓'; color: var(--court-green); }

/* =============================================================
   04d — LANDING PAGE: HERO VARIANT (dark image hero + 3 tiles)
============================================================= */
#hero.hero-lp {
  min-height: auto;
  display: block;
  padding: 0;
  align-items: stretch;
}
#hero.hero-lp::after {
  background:
    linear-gradient(180deg, rgba(8,10,20,0.72) 0%, rgba(8,10,20,0.62) 45%, rgba(8,10,20,0.88) 100%);
}
#hero.hero-lp::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(21,101,192,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 72%, rgba(198,40,40,0.22) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255,255,255,0.03) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.03) 80px);
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 132px 64px 72px;
  width: 100%;
}
.lp-hero-hd {
  max-width: 900px;
  margin-bottom: 56px;
}
.lp-eyebrow {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7FD0FF;
  line-height: 1.7;
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--court-blue);
}
.lp-hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(39px, 4.8vw, 69px);
  line-height: 0.94;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 26px 0;
}
.lp-hero-accent {
  background: linear-gradient(90deg, #7FD0FF 0%, #A8E6A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lp-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.68;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px 0;
  max-width: 720px;
}
.lp-hero-sub strong {
  color: #fff;
  font-weight: 600;
}
#hero.hero-lp .hero-ctas {
  margin-bottom: 36px;
}
.lp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.lp-chip-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.lp-dot-blue  { background: var(--court-blue); }
.lp-dot-red   { background: var(--court-red); }
.lp-dot-green { background: var(--court-green); }

.lp-hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.10);
  margin-top: 8px;
}
.lp-card {
  background: rgba(10,12,18,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 32px 30px 36px;
  border-top: 4px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  position: relative;
}
.lp-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.lp-card-blue  { border-top-color: var(--court-blue); }
.lp-card-red   { border-top-color: var(--court-red); }
.lp-card-green { border-top-color: var(--court-green); }

.lp-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.lp-card-blue  .lp-num { color: #7FD0FF; }
.lp-card-red   .lp-num { color: #FFB3B3; }
.lp-card-green .lp-num { color: #A8E6A8; }

.lp-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 14px 0;
}
.lp-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.lp-body strong { color: #fff; font-weight: 600; }

.lp-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.45);
  z-index: 2;
  pointer-events: none;
}
.lp-hero-scroll-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lp-hero-scroll-arr {
  font-size: 18px;
  animation: lp-bounce 2.2s ease-in-out infinite;
}
@keyframes lp-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --- COLORED PROCESS CARDS (shared with homepage .process-grid) --- */
.process-grid.process-grid-colored {
  border-top: none;
}
.process-grid-colored .process-card {
  border-top: 3px solid var(--border);
}
.process-grid-colored .pc-blue  { border-top-color: var(--court-blue); }
.process-grid-colored .pc-red   { border-top-color: var(--court-red); }
.process-grid-colored .pc-green { border-top-color: var(--court-green); }
.process-grid-colored .pc-blue  .process-num { color: var(--court-blue); }
.process-grid-colored .pc-red   .process-num { color: var(--court-red); }
.process-grid-colored .pc-green .process-num { color: var(--court-green); }

/* =============================================================
   05 — JAZZ BANNER
============================================================= */
#jazz {
  background: var(--white);
  border-top: 3px solid var(--court-blue);
  padding: 80px 0;
}
.jazz-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.jazz-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.jazz-img img, .jazz-img .img-ph { width: 100%; height: 100%; object-fit: cover; }
.jazz-h2 { font-size: clamp(32px, 4vw, 48px); color: var(--text-dark); margin-bottom: 18px; }
.jazz-body { font-size: 19px; color: var(--text-mid); line-height: 1.70; margin-bottom: 28px; }

/* =============================================================
   06 — G-MAX DIFFERENTIATOR (dark section 1)
============================================================= */
#gmax {
  background: var(--dark);
  padding: 0 0 120px 0;
}
.gmax-banner {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  margin-bottom: 80px;
  position: relative;
}
.gmax-banner img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.gmax-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,16,17,0) 60%, rgba(15,16,17,0.85) 100%);
  pointer-events: none;
}
.gmax-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 64px;
}
.gmax-badge-row { margin-bottom: 16px; }
.gmax-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 24px;
  margin-top: 14px;
}
.gmax-body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  margin-bottom: 40px;
}
.gmax-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 44px;
}
.gp-item {
  padding: 16px 16px 16px 0;
  border-top: 2px solid rgba(255,255,255,0.10);
}
.gp-item:nth-child(1) { border-top-color: var(--court-blue); }
.gp-item:nth-child(2) { border-top-color: var(--court-red); }
.gp-item:nth-child(3) { border-top-color: var(--court-green); }
.gp-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gp-item:nth-child(1) .gp-label { color: var(--court-blue); }
.gp-item:nth-child(2) .gp-label { color: var(--court-red); }
.gp-item:nth-child(3) .gp-label { color: var(--court-green); }
.gp-sub { font-size: 15px; color: rgba(255,255,255,0.38); margin-top: 5px; }
.gmax-spec {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* =============================================================
   07 — GALLERY
============================================================= */
#gallery {
  background: var(--surface);
  padding: 48px 0;
}
.gallery-hd {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
.gallery-hd h2 { font-size: clamp(36px, 5vw, 56px); color: var(--text-dark); }
.gallery-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 320px 320px 200px;
  gap: 2px;
}
.gslot {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.gslot-large { grid-row: span 2; }
.gslot-wide  { grid-column: span 3; }
.gslot img, .gslot .img-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.gslot:hover img, .gslot:hover .img-ph { transform: scale(1.04); }
.gslot-ov {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: background 0.3s;
}
.gslot:hover .gslot-ov { background: rgba(0,0,0,0.42); }
.gslot-lbl {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s, transform 0.28s;
}
.gslot:hover .gslot-lbl { opacity: 1; transform: translateY(0); }

/* =============================================================
   08 — CERTIFICATIONS
============================================================= */
#certs {
  background: var(--surface);
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.certs-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: center;
}
.certs-h2 { font-size: clamp(28px, 3vw, 42px); color: var(--text-dark); margin-bottom: 20px; }
.certs-body { font-size: 19px; color: var(--text-mid); line-height: 1.70; }
.cert-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.ctile {
  background: var(--white);
  padding: 24px 18px;
  transition: transform 0.2s;
}
.ctile:hover { transform: translateY(-3px); }
.ct-b { border-top: 3px solid var(--court-blue); }
.ct-r { border-top: 3px solid var(--court-red); }
.ct-g { border-top: 3px solid var(--court-green); }
.ctile-code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.cc-b { color: var(--court-blue); }
.cc-r { color: var(--court-red); }
.cc-g { color: var(--court-green); }
.ctile-name { font-size: 15px; font-weight: 500; color: var(--text-dark); line-height: 1.4; margin-bottom: 4px; }
.ctile-org  { font-size: 14px; color: var(--text-mid); }

/* =============================================================
   09 — TESTIMONIALS
============================================================= */
#testimonials {
  background: var(--dark);
  padding: 72px 0;
}
.test-hd { margin-bottom: 48px; }
.test-hd h2 { font-size: clamp(36px, 4vw, 48px); color: #fff; }
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tcard {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 3px solid var(--court-blue) !important;
  padding: 36px;
}
.tcard:nth-child(2) { border-top-color: var(--court-red) !important; }
.tcard:nth-child(3) { border-top-color: var(--court-green) !important; }
.tcard-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--court-blue);
  margin-bottom: 16px;
}
.tcard:nth-child(2) .tcard-num { color: var(--court-red); }
.tcard:nth-child(3) .tcard-num { color: var(--court-green); }
.tcard-quote {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  font-style: italic;
  margin-bottom: 24px;
}
.tcard-name { font-weight: 600; font-size: 16px; color: #fff; letter-spacing: 0.04em; }
.tcard-org  { font-size: 15px; color: rgba(255,255,255,0.5); margin-top: 3px; }

/* =============================================================
   09b — FAQ
============================================================= */
#faq {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 96px 0;
}
.faq-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 64px;
}
.faq-hd {
  max-width: 760px;
  margin-bottom: 48px;
}
.faq-h2 {
  font-size: clamp(40px, 5vw, 60px);
  color: var(--text-dark);
  line-height: 0.98;
  margin-top: 14px;
  margin-bottom: 22px;
}
.faq-lede {
  font-size: 20px;
  line-height: 1.65;
  color: var(--text-mid);
}
.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--court-blue); }
.faq-q {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  line-height: 1.15;
  flex: 1;
  transition: color .15s ease;
}
.faq-toggle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--court-blue);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  transition: transform .25s ease;
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 0 32px 0;
  max-width: 820px;
}
.faq-a p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 16px 0;
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--text-dark); font-weight: 600; }
.faq-causes {
  margin: 0 0 16px 0;
  padding: 0 0 0 22px;
}
.faq-causes li {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-mid);
  margin-bottom: 10px;
}
.faq-causes li:last-child { margin-bottom: 16px; }

/* --- FAQ Enhanced (landing pages) --- */
.faq-enhanced .faq-a {
  max-width: 100%;
}
.faq-causes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.faq-cause-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 28px 24px 24px;
  position: relative;
}
.faq-cause-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--court-blue);
  margin-bottom: 8px;
}
.faq-cause-card h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.faq-cause-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}
.faq-cause-card.cause-red .faq-cause-num { color: var(--court-red); }
.faq-cause-card.cause-green .faq-cause-num { color: var(--court-green); }
.faq-callout {
  background: var(--dark);
  color: rgba(255,255,255,0.85);
  padding: 32px 36px;
  margin: 28px 0 0;
  border-left: 4px solid var(--court-red);
}
.faq-callout-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court-red);
  margin-bottom: 12px;
}
.faq-callout p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 12px;
}
.faq-callout p:last-child { margin-bottom: 0; }
.faq-callout strong { color: #fff; font-weight: 600; }

@media (max-width: 600px) {
  .faq-causes-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   AUDIENCE CARDS — "Who Needs This" (G-Max page)
============================================================= */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.audience-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 32px 28px 28px;
  position: relative;
  border-left: 4px solid var(--court-blue) !important;
}
.audience-card.ac-red    { border-left-color: var(--court-red) !important; }
.audience-card.ac-green  { border-left-color: var(--court-green) !important; }
.audience-card.ac-blue   { border-left-color: var(--court-blue) !important; }
.audience-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 0.12em;
  color: var(--court-blue);
  margin-bottom: 8px;
}
.audience-card.ac-red .audience-num   { color: var(--court-red); }
.audience-card.ac-green .audience-num { color: var(--court-green); }
.audience-card h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.audience-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
}
.audience-highlight {
  grid-column: 1 / -1;
  background: var(--dark);
  border: none !important;
  border-left: 4px solid var(--court-red) !important;
  padding: 36px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.audience-highlight .audience-num { color: var(--court-red); }
.audience-highlight h4 { color: #fff; margin-bottom: 6px; }
.audience-highlight p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.audience-highlight-badge {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  color: var(--court-red);
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.9;
}
@media (max-width: 700px) {
  .audience-grid { grid-template-columns: 1fr; }
  .audience-highlight { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* =============================================================
   10 — ESTIMATE FORM (dark section 2)
============================================================= */
#estimate {
  background: var(--dark);
  padding: 120px 0;
}
.est-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 80px;
  align-items: start;
}
.est-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 20px;
  margin-top: 14px;
}
.est-body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.70;
  color: rgba(255,255,255,0.68);
  margin-bottom: 44px;
}
.est-phone-lbl {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--court-blue);
  display: block;
  margin-bottom: 8px;
}
.est-phone {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: 0.02em;
  color: #fff;
  display: block;
}
.est-phone:hover { color: var(--court-blue); }

/* Form */
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.ffield { display: flex; flex-direction: column; gap: 7px; }
.ffield.fw { grid-column: 1 / -1; }
.flabel {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.req { color: var(--court-red); margin-left: 2px; }
.finput, .fselect, .ftextarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.finput::placeholder, .ftextarea::placeholder { color: rgba(255,255,255,0.26); }
.finput:focus, .fselect:focus, .ftextarea:focus {
  border-color: var(--court-blue);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.22);
}
.fselect { 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='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.fselect option { background: #1a1a1a; color: #fff; }
.ftextarea { resize: vertical; min-height: 108px; }
.fsubmit {
  grid-column: 1 / -1;
  background: var(--court-blue);
  color: #fff;
  border: none;
  padding: 18px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  margin-top: 10px;
}
.fsubmit:hover { background: var(--court-blue-dk); }
.fsubmit:disabled {
  background: var(--court-green);
  cursor: default;
}

/* =============================================================
   11 — FOOTER
============================================================= */
#footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 64px 0 0;
}
.foot-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: 48px;
}
.foot-logo {
  display: inline-block;
  margin-bottom: 14px;
  line-height: 0;
}
.foot-logo img {
  height: 48px;
  width: auto;
  display: block;
}
.foot-tag {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.60;
  margin-bottom: 22px;
}
.foot-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-mid);
}
.fcol-lbl {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--court-blue);
  display: block;
  margin-bottom: 16px;
}
.flinks { display: flex; flex-direction: column; gap: 10px; }
.flinks a {
  font-size: 18px;
  color: var(--text-mid);
  transition: color 0.2s;
}
.flinks a:hover { color: var(--court-blue); }
.fcontact-line {
  font-size: 18px;
  color: var(--text-mid);
  line-height: 1.70;
}
.fcontact-line a { color: var(--text-mid); }
.fcontact-line a:hover { color: var(--court-blue); }
.foot-bottom {
  max-width: 1280px;
  margin: 40px auto 0;
  padding: 20px 64px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.foot-copy { font-size: 16px; color: var(--text-mid); }
.astm-chips { display: flex; gap: 8px; }
.achip {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(198,40,40,0.45);
  color: var(--court-red);
}

/* =============================================================
   12 — STICKY CALL BAR
============================================================= */
.sticky-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  background: var(--dark);
  border-top: 3px solid var(--court-blue);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.35);
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.sticky-call.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-call-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.sticky-call-avatar {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  border-radius: 50% !important;
  border: 2px solid var(--court-blue);
  box-shadow: 0 0 0 3px rgba(21,101,192,0.25);
  overflow: hidden;
}
.sticky-call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sticky-call-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.sticky-call-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--court-blue);
}
.sticky-call-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.05;
}
.sticky-call-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--court-blue);
  color: #fff;
  padding: 16px 28px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.18s, transform 0.18s;
}
.sticky-call-cta:hover {
  background: var(--court-blue-dk);
  transform: translateY(-1px);
}
.sticky-call-icon {
  font-size: 18px;
  line-height: 1;
}
.sticky-call-num {
  font-feature-settings: 'tnum';
}
.sticky-call-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.sticky-call-close:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

/* =============================================================
   RESPONSIVE — 1024px
============================================================= */
@media (max-width: 1024px) {
  .container,
  .nav-inner,
  .hero-inner,
  .trust-inner,
  .services-inner,
  .process-inner,
  .jazz-inner,
  .gmax-inner,
  .gallery-hd,
  .gallery-grid,
  .certs-inner,
  .testimonials-inner,
  .faq-inner,
  .est-inner,
  .foot-inner,
  .foot-bottom { padding-left: 32px; padding-right: 32px; }
  .cert-tiles { grid-template-columns: repeat(2, 1fr); }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .process-grid,
  .process-grid.cols-3,
  .process-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .compare-inner { padding-left: 32px; padding-right: 32px; }
  .lp-hero-inner { padding: 116px 32px 64px; }
  .lp-hero-cards { grid-template-columns: 1fr; }
  .lp-hero-h1 { font-size: clamp(33px, 4.5vw, 54px); }
}

/* =============================================================
   RESPONSIVE — 768px
============================================================= */
@media (max-width: 768px) {
  .nav-links, .nav-phone, .nav-btn-desk { display: none; }
  .nav-ham { display: flex; }

  .container,
  .nav-inner,
  .hero-inner,
  .trust-inner,
  .jazz-inner,
  .gmax-inner,
  .gallery-hd,
  .gallery-grid,
  .certs-inner,
  .faq-inner,
  .est-inner,
  .foot-inner,
  .foot-bottom { padding-left: 24px; padding-right: 24px; }

  .services-inner,
  .process-inner,
  .compare-inner,
  .lp-hero-inner { padding: 0 24px; }
  .lp-hero-inner { padding-top: 96px; padding-bottom: 56px; }
  .lp-hero-hd { margin-bottom: 40px; }
  .lp-hero-h1 { font-size: 33px; }
  .lp-hero-sub { font-size: 17px; }
  .lp-hero-chips { gap: 10px 16px; padding-top: 20px; }
  .lp-chip { font-size: 11px; }
  .lp-hero-scroll { display: none; }
  #faq { padding: 64px 0; }
  .faq-hd { margin-bottom: 32px; }
  .faq-q { font-size: 22px; }
  .process-grid,
  .process-grid.cols-3,
  .process-grid.cols-2,
  .compare-grid { grid-template-columns: 1fr; }
  #process, #scope, #netsystems { padding: 64px 0; }
  .process-hd { margin-bottom: 36px; }
  #pricevalue { padding: 64px 0; }
  .compare-hd { margin-bottom: 32px; }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 48px 24px 64px;
  }
  .hero-h1 { font-size: 39px; }
  .hero-chips { gap: 10px 16px; padding-top: 20px; margin-top: 28px; }
  .hero-chip { font-size: 11px; }
  .cred-card { margin-top: 8px; }
  .cred-stat { font-size: 60px; }

  .trust-inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }
  .trust-stat + .trust-stat::before { display: none; }
  .trust-stat { border-bottom: 1px solid var(--border); padding: 28px 0; }

  .svc-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .svc-card-gmax { grid-column: span 1; }
  .gmax-proof { gap: 0; }
  .gmax-proof-item { padding: 12px 16px 12px 0; }

  .jazz-inner { grid-template-columns: 1fr; gap: 32px; }
  .gmax-banner { max-height: 320px; margin-bottom: 48px; }
  .gmax-banner img { max-height: 320px; }
  .gmax-proof-row { grid-template-columns: 1fr; }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 180px);
  }
  .gslot-large { grid-row: span 1; }
  .gslot-wide  { grid-column: span 2; }

  .certs-inner { grid-template-columns: 1fr; gap: 36px; }
  .cert-tiles  { grid-template-columns: repeat(2, 1fr); }

  .test-grid { grid-template-columns: 1fr; }

  .est-inner { grid-template-columns: 1fr; gap: 48px; }
  .fgrid { grid-template-columns: 1fr; }

  .foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 40px; }

  .sticky-call-inner { padding: 14px 24px; gap: 16px; }
  .sticky-call-headline { font-size: 20px; }
  .sticky-call-cta { padding: 14px 22px; font-size: 18px; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-stat { border-right: none; }
  .foot-inner { grid-template-columns: 1fr; }
  .cert-tiles  { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 220px);
  }
  .gslot-wide { grid-column: span 1; }

  .sticky-call-inner {
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sticky-call-avatar { width: 48px; height: 48px; order: 0; }
  .sticky-call-text { flex: 1 1 0; order: 1; }
  .sticky-call-eyebrow { font-size: 11px; }
  .sticky-call-headline { font-size: 15px; }
  .sticky-call-cta {
    flex: 1 1 auto;
    order: 2;
    padding: 12px 18px;
    font-size: 18px;
    justify-content: center;
  }
  .sticky-call-close { order: 3; }
}

/* Services section needs its own inner container class */
.services-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}
.testimonials-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}

/* =============================================================
   13 — FULL GALLERY CAROUSEL (in-page, full bleed)
============================================================= */
#fullgallery {
  background: var(--surface);
  padding: 80px 0;
}
.fg-hd {
  max-width: 1280px;
  margin: 0 auto 40px;
  padding: 0 64px;
}
.fg-hd .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.fg-hd h2 {
  font-size: clamp(36px, 5vw, 56px);
  color: var(--text-dark);
}
.fg-stage {
  position: relative;
  width: 100vw;
  height: 70vh;
  min-height: 480px;
  max-height: 760px;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.fg-img.loaded {
  opacity: 1;
}
.fg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 2;
}
.fg-nav:hover {
  background: var(--court-blue);
  border-color: var(--court-blue);
}
.fg-prev { left: 32px; }
.fg-next { right: 32px; }
.fg-meta {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 64px;
  display: flex;
  justify-content: flex-end;
}
.fg-counter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--text-mid);
}
@media (max-width: 768px) {
  #fullgallery { padding: 56px 0; }
  .fg-hd { padding: 0 24px; margin-bottom: 28px; }
  .fg-stage {
    height: 56vh;
    min-height: 320px;
  }
  .fg-nav {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
  .fg-prev { left: 14px; }
  .fg-next { right: 14px; }
  .fg-meta { padding: 0 24px; margin-top: 16px; }
}

/* Inline photo carousel (for landing page photo breaks) */
.lp-photo-carousel { position: relative; }
.lp-photo-carousel .fg-stage {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 21 / 9;
}
@media (max-width: 768px) {
  .lp-photo-carousel .fg-stage { aspect-ratio: 4 / 3; }
}