/* ========================================
   DK Consulting Group of NY - Master CSS
   Brand: Navy + Gold | Local SEO Brooklyn
   ======================================== */

/* ===== PAGE HERO BACKGROUND IMAGES (additive layer) ===== */
/* Each page-hero gets a representative background image with overlay
   so existing copy stays fully readable */
.page-hero {
  position: relative;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--white);
  isolation: isolate;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,23,48,.88) 0%, rgba(15,29,61,.78) 60%, rgba(36,58,111,.65) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-hero .page-hero-inner,
.page-hero > .container { position: relative; z-index: 1; }

/* Per-page hero images (URLs are local — works offline + caches well) */
body.page-about    .page-hero { background-image: url('../images/pages/about-brooklyn.jpg'); }
body.page-services .page-hero { background-image: url('../images/pages/services-business.jpg'); }
body.page-svc-website .page-hero { background-image: url('../images/pages/website-design.jpg'); }
body.page-svc-gbp .page-hero { background-image: url('../images/pages/gbp-maps.jpg'); }
body.page-svc-ads .page-hero { background-image: url('../images/pages/ads-analytics.jpg'); }
body.page-svc-reputation .page-hero { background-image: url('../images/pages/reputation-reviews.jpg'); }
body.page-svc-manhattan .page-hero { background-image: url('../images/pages/manhattan-skyline.jpg'); }
body.page-svc-queens .page-hero { background-image: url('../images/pages/queens-borough.jpg'); }
body.page-svc-bronx .page-hero { background-image: url('../images/pages/bronx-yankee.jpg'); }
body.page-svc-li .page-hero { background-image: url('../images/pages/long-island.jpg'); }
body.page-svc-lawyers .page-hero { background-image: url('../images/pages/industry-lawyers.jpg'); }
body.page-svc-hvac .page-hero { background-image: url('../images/pages/industry-hvac.jpg'); }
body.page-svc-dentists .page-hero { background-image: url('../images/pages/industry-dentists.jpg'); }
body.page-blog .page-hero { background-image: url('../images/pages/services-business.jpg'); }
body.page-blog-post .page-hero { background-image: url('../images/pages/gbp-maps.jpg'); }
body.page-how-we-help .page-hero { background-image: url('../images/pages/how-we-help.jpg'); }
body.page-faq .page-hero { background-image: url('../images/pages/faq-questions.jpg'); }
body.page-contact .page-hero { background-image: url('../images/pages/contact-office.jpg'); }

/* ============================================================
   HOME HERO — vivid NYC at dusk with video-like motion
   GPU-accelerated transforms only. No performance hit.
   ============================================================ */
body.page-home .flower-hero {
  background: var(--navy-900);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}

/* Video background (desktop). Mobile uses the poster image via fallback. */
body.page-home .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -2;
  pointer-events: none;
}
/* Mobile: hide video AND any background — clean white hero with just the design */
@media (max-width: 900px) {
  body.page-home .hero-video { display: none !important; }
  body.page-home .flower-hero {
    background: linear-gradient(180deg, #fdfbf5 0%, #ffffff 100%) !important;
    background-image: none !important;
  }
  body.page-home .flower-hero::before { display: none !important; }
  body.page-home .flower-hero::after { display: none !important; }
  /* Flip hero text back to dark since background is now light */
  body.page-home .flower-eyebrow { color: var(--gold-600) !important; text-shadow: none !important; }
  body.page-home .flower-content h1 { color: var(--navy-900) !important; text-shadow: none !important; }
  body.page-home .flower-content h1 .gold-text { color: var(--gold-600) !important; }
  body.page-home .flower-content p.lead { color: var(--slate-700) !important; text-shadow: none !important; }
  body.page-home .flower-stats { border-top-color: var(--border) !important; }
  body.page-home .flower-stats .num { color: var(--gold-600) !important; text-shadow: none !important; }
  body.page-home .flower-stats .label { color: var(--slate-500) !important; }
  /* Hide orbit cards entirely on mobile (override nuclear rules above) */
  body.page-home .flower-stage .orbit-card,
  body.page-home .flower-hero .flower-stage .orbit-card,
  body.page-home .flower-hero .flower-stage a.orbit-card { display: none !important; }
  /* Hide the dashed orbit rings on mobile too */
  body.page-home .flower-stage::before,
  body.page-home .flower-stage::after { display: none !important; }
}

/* MECHANICAL ORBIT RINGS — dashed, spinning, in front of video / behind hexagon */
body.page-home .flower-stage::before,
body.page-home .flower-stage::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body.page-home .flower-stage::before {
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,255,255,.28);
  animation: spin-cw 55s linear infinite;
}
body.page-home .flower-stage::after {
  width: 980px;
  height: 980px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(212,168,75,.30);
  animation: spin-ccw 85s linear infinite;
}
/* Hex SVG + orbit cards above the rings */
body.page-home .flower-svg,
body.page-home .orbit-card { z-index: 2; }
/* Make hex layers visible on dark NYC background */
body.page-home .hex-layer-1,
body.page-home .hex-layer-2,
body.page-home .hex-layer-3,
body.page-home .hex-layer-4 { filter: brightness(1.4) contrast(1.1); }

/* Mobile: disable spinning rings (save battery) */
@media (max-width: 900px) {
  body.page-home .flower-stage::before,
  body.page-home .flower-stage::after { animation: none; opacity: .4; }
}

/* Layer 2: minimal veil — let the photography BREATHE.
   Dark only at the top (so header floats) and at bottom (so stats are legible).
   Gold tint adds vibrance without blocking the city. */
body.page-home .flower-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 20% 25%, rgba(255,142,60,.20) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 80% 75%, rgba(212,168,75,.18) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(10,23,48,.55) 0%,
      rgba(10,23,48,.30) 22%,
      rgba(10,23,48,.25) 60%,
      rgba(10,23,48,.70) 100%);
  z-index: -1;
  animation: lights-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.10) translate(-2.5%, -1.5%); }
}
@keyframes lights-drift {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(2%, -1%); opacity: .92; }
}

/* Hero text — switch to vivid white/gold on dark NYC backdrop */
body.page-home .flower-eyebrow { color: var(--gold-400); text-shadow: 0 2px 12px rgba(212,168,75,.4); }
body.page-home .flower-content h1 { color: var(--white); text-shadow: 0 4px 30px rgba(0,0,0,.5); }
body.page-home .flower-content h1 .gold-text { color: var(--gold-400); }
body.page-home .flower-content p.lead { color: rgba(255,255,255,.92); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
body.page-home .flower-stats { border-top-color: rgba(255,255,255,.18); }
body.page-home .flower-stats .num { color: var(--gold-400); text-shadow: 0 2px 12px rgba(212,168,75,.5); }
body.page-home .flower-stats .label { color: rgba(255,255,255,.75); }

/* Orbit cards over dark hero — give them strong shadow + slight glass effect */
body.page-home .orbit-card {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}

/* Mobile: KILL the kenburns + light-drift animations entirely (battery + jank) */
@media (max-width: 900px) {
  body.page-home .flower-hero::before,
  body.page-home .flower-hero::after {
    animation: none !important;
  }
  body.page-home .flower-hero::before { inset: 0; }
}

@media (max-width: 700px) {
  .page-hero { background-attachment: scroll; }
  /* Mobile-friendly heros: tighter top padding, larger background contrast */
  .page-hero::after { background: linear-gradient(135deg, rgba(10,23,48,.92) 0%, rgba(15,29,61,.85) 100%); }
}

/* ===== Service page "what you get" — show feature image with text ===== */
.service-feature-image {
  width: 100%;
  height: clamp(220px, 35vw, 400px);
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center center;
  margin: 32px 0;
  box-shadow: var(--shadow-md);
}

/* ===== Inline SVG icon system ===== */
.svg-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.card .icon,
.industry .ico,
.contact-info .info-item .ico,
.info-item .ico {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .icon svg { width: 26px; height: 26px; }
.industry .ico svg { width: 36px; height: 36px; }
.info-item .ico svg { width: 22px; height: 22px; }

/* ===== Cinematic Pin Section (Page 39 → Page 4) ===== */
.cinematic-pin {
  position: relative;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--white);
  overflow: hidden;
  min-height: 100vh;
  padding: 80px 0;
}
.cinematic-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(212,168,75,.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(36,58,111,.30) 0%, transparent 60%);
  pointer-events: none;
}
.cinematic-pin .container { position: relative; z-index: 1; }
.cinematic-pin .pin-eyebrow {
  font-size: .85rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 24px; display: block;
}
.cinematic-pin .pin-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 56px;
  max-width: 900px;
}
.cinematic-pin .pin-headline .accent { color: var(--gold-500); }
.pin-progress-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}
@media (max-width: 900px) { .pin-progress-stage { grid-template-columns: 1fr; gap: 40px; } }

.pin-big-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--gold-500);
}
.pin-big-number .label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,255,255,.6);
  margin-top: 16px;
}
.pin-arrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0;
}
.pin-arrow .arrow-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500) 0%, transparent 100%);
}
.pin-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pin-detail-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
  color: rgba(255,255,255,.85);
}
.pin-detail-list li::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--gold-500);
  border-radius: 50%;
  flex-shrink: 0;
}
.pin-final-cta {
  text-align: center;
  margin-top: 40px;
}
.pin-final-cta p {
  font-size: 1.2rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

:root {
  --navy-900: #0a1730;
  --navy-800: #0f1d3d;
  --navy-700: #1a2c5b;
  --navy-600: #243a6f;
  --gold-500: #d4a84b;
  --gold-400: #e0b860;
  --gold-600: #b8902f;
  --cream: #faf6ee;
  --ink: #0d0d0d;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;
  --white: #ffffff;
  --bg: #fafafa;
  --border: #e5e7eb;
  --success: #16a34a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 14px rgba(10,23,48,.08);
  --shadow-lg: 0 20px 50px rgba(10,23,48,.18);
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1200px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}
/* Final safety net: anything wider than viewport gets clipped at top level */
@media (max-width: 900px) {
  section, header, footer, .container { max-width: 100vw; overflow-x: hidden; }
  .flower-stage { width: 100%; max-width: 100%; padding: 0 16px; box-sizing: border-box; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }

/* ===== Typography ===== */
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--navy-900); }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.15rem; font-family: 'Inter', sans-serif; font-weight: 700; }
p { color: var(--slate-700); }
.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 1rem;
  display: inline-block;
}
.gold-text { color: var(--gold-500); }

/* ===== Layout helpers ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-dark { background: var(--navy-800); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,.85); }
.section-cream { background: var(--cream); }
.section-slate { background: var(--slate-100); }
.text-center { text-align: center; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  transition: all var(--transition);
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1;
}
.btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: 0 4px 14px rgba(212,168,75,.4);
}
.btn-primary:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,168,75,.5); }
.btn-secondary {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--navy-900);
}
.btn-secondary:hover { background: var(--navy-900); color: var(--white); }
.btn-dark-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-dark-ghost:hover { background: var(--white); color: var(--navy-900); }
.btn-lg { padding: 20px 40px; font-size: 1.1rem; }
.btn-block { width: 100%; }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(10,23,48,.08);
}
/* Logo always crisp + always visible above any hero background */
.logo, .logo * { position: relative; z-index: 2; }
.logo-mark { box-shadow: 0 4px 12px rgba(10,23,48,.18); border-radius: 4px; }
.logo-text { color: var(--navy-900) !important; }
.logo-text small { color: var(--slate-500) !important; }
/* Native breathing gap between sticky header and the first section */
.site-header + section,
.site-header + .mobile-menu + section,
.flower-hero,
.page-hero {
  padding-top: 112px;
}
.flower-hero { padding-bottom: 100px; }
.page-hero { padding-bottom: 80px; }
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  flex-wrap: nowrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy-900);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-mark {
  width: 44px;
  height: 50px;
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 50%, rgba(212,168,75,.35) 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.logo-mark span {
  color: var(--gold-500);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.05rem;
  z-index: 2;
  letter-spacing: -.02em;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text small { font-size: .7rem; font-weight: 500; color: var(--slate-500); letter-spacing: .04em; }

.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  white-space: nowrap;
}
.nav-links > li { position: relative; }
.nav-links a {
  padding: 10px 12px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy-800);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--slate-100); color: var(--navy-900); }
.nav-links a.active { color: var(--gold-600); }

.has-dropdown > a::after {
  content: '▾';
  font-size: .7rem;
  margin-left: 2px;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
  border: 1px solid var(--border);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.dropdown a small { display: block; font-weight: 400; font-size: .8rem; color: var(--slate-500); margin-top: 2px; }
.dropdown a:hover { background: var(--cream); }

.nav-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-phone {
  font-weight: 700;
  color: var(--navy-900);
  font-size: .92rem;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--gold-600); }
.nav-cta .btn { padding: 12px 18px; font-size: .9rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--navy-800);
  color: var(--white);
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1180px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { padding: 12px 20px; font-size: .9rem; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  color: var(--white);
  padding: 100px 24px 40px;
  z-index: 99;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  display: block;
  padding: 16px 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-menu a:hover { color: var(--gold-500); }
.mobile-menu .sub-link { padding-left: 16px; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.8); }
.mobile-menu .btn { margin-top: 24px; }

/* ===== Hero (LIGHT version) ===== */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,168,75,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(36,58,111,.06) 0%, transparent 60%),
    linear-gradient(180deg, #fdfbf5 0%, #ffffff 100%);
  color: var(--ink);
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero h1 { color: var(--navy-900); }
.hero h1 .gold-text { color: var(--gold-600); }
.hero p.lead { color: var(--slate-700); }
.hero .hero-stat .num { color: var(--gold-600); }
.hero .hero-stat .label { color: var(--slate-500); }
.hero .hero-stats { border-top: 1px solid var(--border); }
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 35%, rgba(36,58,111,.04) 35.5%, transparent 36%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-content h1 { color: var(--white); margin-bottom: 24px; }
.hero-content h1 .gold-text { color: var(--gold-500); }
.hero-content p.lead { font-size: 1.2rem; color: rgba(255,255,255,.85); margin-bottom: 36px; max-width: 580px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 32px;
}
.hero-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--gold-500); font-family: 'Playfair Display', serif; }
.hero-stat .label { font-size: .8rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }

.hero-card {
  background: var(--white);
  color: var(--navy-900);
  padding: 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-card h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); margin-bottom: 16px; font-family: 'Inter', sans-serif; }
.gmap-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--slate-100);
}
.gmap-result.featured { background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%); color: var(--navy-900); }
.gmap-result .rank {
  width: 30px;
  height: 30px;
  background: var(--white);
  color: var(--navy-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  font-size: .85rem;
}
.gmap-result.featured .rank { background: var(--navy-900); color: var(--gold-500); }
.gmap-result .info { flex: 1; }
.gmap-result .name { font-weight: 700; font-size: .95rem; }
.gmap-result .stars { font-size: .8rem; color: var(--slate-500); }
.gmap-result.featured .stars { color: var(--navy-800); }
.gmap-result.featured .name { color: var(--navy-900); }

.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.mini-stat {
  background: var(--cream);
  padding: 14px;
  border-radius: 10px;
  text-align: center;
}
.mini-stat .v { font-weight: 800; color: var(--gold-600); font-size: 1.05rem; }
.mini-stat .l { font-size: .75rem; color: var(--slate-500); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero { padding: 60px 0 80px; }
}

/* ===== FLOWER HERO (light, layered, pointy, ANIMATED) ===== */
.flower-hero {
  position: relative;
  padding: 80px 0 100px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(212,168,75,.10) 0%, transparent 60%),
    linear-gradient(180deg, #fdfbf5 0%, #ffffff 100%);
  overflow: hidden;
}
.flower-hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(36, 58, 111, .12);
  border-radius: 50%;
  pointer-events: none;
  animation: spin-cw 60s linear infinite;
}
.flower-hero::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 1200px; height: 1200px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(36, 58, 111, .06);
  border-radius: 50%;
  pointer-events: none;
  animation: spin-ccw 90s linear infinite;
}

@keyframes spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* =========================================================
   SVG HEX FLOWER — OPENABLE LAYERS + LIVING BREATH
   Phase 1: layers explode out from center, staggered (1.5s)
   Phase 2: idle breathing loop kicks in
   ========================================================= */

/* --- OPEN keyframes (one-shot expansion from scale 0) --- */
@keyframes open-layer-1 {
  0%   { transform: rotate(0deg) scale(0); opacity: 0; }
  70%  { transform: rotate(28deg) scale(1.10); opacity: .55; }
  100% { transform: rotate(30deg) scale(1); opacity: .5; }
}
@keyframes open-layer-2 {
  0%   { transform: rotate(0deg) scale(0); opacity: 0; }
  70%  { transform: rotate(-2deg) scale(1.10); opacity: .65; }
  100% { transform: rotate(0deg) scale(1); opacity: .55; }
}
@keyframes open-layer-3 {
  0%   { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }
  70%  { transform: translate(-34px,-12px) rotate(28deg) scale(1.10); opacity: .85; }
  100% { transform: translate(-30px,-10px) rotate(30deg) scale(1); opacity: .75; }
}
@keyframes open-layer-4 {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  70%  { transform: translate(34px,12px) scale(1.10); opacity: .90; }
  100% { transform: translate(30px,10px) scale(1); opacity: .8; }
}
@keyframes open-navy {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  70%  { transform: translate(-22px,10px) scale(1.08); opacity: 1; }
  100% { transform: translate(-20px,8px) scale(1); opacity: .92; }
}
@keyframes open-gold {
  0%   { transform: translate(0,0) scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: translate(32px,-7px) scale(1.10) rotate(2deg); opacity: 1; }
  100% { transform: translate(30px,-5px) scale(1) rotate(0deg); opacity: 1; }
}

/* --- BREATHE keyframes (infinite idle pulse around resting transform) --- */
@keyframes breathe-1 {
  0%, 100% { transform: rotate(30deg) scale(1); opacity: .5; }
  50%      { transform: rotate(36deg) scale(1.07); opacity: .68; }
}
@keyframes breathe-2 {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: .55; }
  50%      { transform: rotate(-4deg) scale(1.06); opacity: .72; }
}
@keyframes breathe-3 {
  0%, 100% { transform: translate(-30px,-10px) rotate(30deg) scale(1); opacity: .75; }
  50%      { transform: translate(-24px,-16px) rotate(35deg) scale(1.07); opacity: .92; }
}
@keyframes breathe-4 {
  0%, 100% { transform: translate(30px,10px) rotate(0deg) scale(1); opacity: .8; }
  50%      { transform: translate(36px,16px) rotate(-4deg) scale(1.07); opacity: .98; }
}
@keyframes breathe-navy {
  0%, 100% { transform: translate(-20px,8px) scale(1); }
  50%      { transform: translate(-24px,4px) scale(1.05); }
}
@keyframes breathe-gold {
  0%, 100% { transform: translate(30px,-5px) scale(1) rotate(0deg); }
  50%      { transform: translate(26px,-9px) scale(1.07) rotate(-2deg); }
}

/* --- SPARK (gold orbit dots) --- */
@keyframes spark-fade {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* --- Apply: chain open(once) → breathe(loop). transform-box: fill-box critical for SVG --- */
.hex-layer-1 {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-layer-1 1.1s cubic-bezier(.34,1.56,.64,1) .15s both,
    breathe-1 6s ease-in-out 1.5s infinite;
}
.hex-layer-2 {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-layer-2 1.1s cubic-bezier(.34,1.56,.64,1) .30s both,
    breathe-2 6.5s ease-in-out 1.65s infinite;
}
.hex-layer-3 {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-layer-3 1.1s cubic-bezier(.34,1.56,.64,1) .45s both,
    breathe-3 5.5s ease-in-out 1.8s infinite;
}
.hex-layer-4 {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-layer-4 1.1s cubic-bezier(.34,1.56,.64,1) .60s both,
    breathe-4 6s ease-in-out 1.95s infinite;
}
.hex-navy {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-navy 1.1s cubic-bezier(.34,1.56,.64,1) .80s both,
    breathe-navy 5s ease-in-out 2.1s infinite;
}
.hex-gold {
  transform-origin: center; transform-box: fill-box;
  animation:
    open-gold 1.1s cubic-bezier(.34,1.56,.64,1) 1s both,
    breathe-gold 4.5s ease-in-out 2.3s infinite;
}
.hex-spark   { transform-origin: center; transform-box: fill-box; animation: spark-fade 3s ease-in-out 2s infinite; }
.hex-spark.s2 { animation-delay: 3s; }
.hex-spark.s3 { animation-delay: 4s; }

/* DK monogram + arrow inside SVG — fade in after gold lands */
.hex-monogram, .hex-arrow {
  opacity: 0;
  animation: rise-in .8s ease-out 1.7s forwards;
}

/* --- Floating orbit cards: spring in AFTER hexagons settle, then bob --- */
@keyframes orbit-spring-in {
  0%   { opacity: 0; transform: translate(0, 30px) scale(.85); }
  70%  { opacity: 1; transform: translate(0, -6px) scale(1.02); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.orbit-card.top-left   { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 1.6s both,  float-bob 5s ease-in-out 2.6s infinite; }
.orbit-card.top-right  { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 1.75s both, float-bob 5s ease-in-out 2.75s infinite; }
.orbit-card.mid-left   { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 1.9s both,  float-bob 5s ease-in-out 2.9s infinite; }
.orbit-card.mid-right  { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 2.05s both, float-bob 5s ease-in-out 3.05s infinite; }
.orbit-card.bot-left   { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 2.2s both,  float-bob 5s ease-in-out 3.2s infinite; }
.orbit-card.bot-right  { animation: orbit-spring-in .9s cubic-bezier(.34,1.56,.64,1) 2.35s both, float-bob 5s ease-in-out 3.35s infinite; }

/* Hero copy entrance */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flower-eyebrow { animation: rise-in .9s ease-out both; }
.flower-content { animation: rise-in 1.1s ease-out 2.4s both; }
.flower-stats   { animation: rise-in 1.1s ease-out 2.6s both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flower-hero::before, .flower-hero::after,
  .hex-layer-1, .hex-layer-2, .hex-layer-3, .hex-layer-4,
  .hex-navy, .hex-gold, .hex-spark,
  .orbit-card, .flower-eyebrow, .flower-content, .flower-stats {
    animation: none !important;
  }
}
.flower-eyebrow {
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-600);
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}
.flower-stage {
  position: relative;
  height: 680px;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1;
}
.flower-svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  max-width: 90%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Floating service cards orbiting the flower */
.orbit-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 12px 30px rgba(10,23,48,.10), 0 2px 6px rgba(10,23,48,.04);
  z-index: 2;
  max-width: 280px;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.orbit-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px rgba(212,168,75,.25), 0 4px 10px rgba(10,23,48,.08);
  border-color: var(--gold-500);
}
.orbit-card .title { font-weight: 800; color: var(--gold-600); font-size: 1.1rem; line-height: 1.15; }
.orbit-card .sub { color: var(--slate-500); font-size: .85rem; margin-top: 4px; }
.orbit-card .arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px; height: 24px;
  background: var(--cream);
  color: var(--gold-600);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .75rem;
  opacity: 0; transform: translateX(-6px);
  transition: all var(--transition);
}
.orbit-card:hover .arrow { opacity: 1; transform: translateX(0); }

/* Positions */
.orbit-card.top-left { top: 12%; left: 4%; }
.orbit-card.top-right { top: 12%; right: 4%; }
.orbit-card.mid-left { top: 44%; left: 0%; }
.orbit-card.mid-right { top: 44%; right: 0%; }
.orbit-card.bot-left { bottom: 12%; left: 6%; }
.orbit-card.bot-right { bottom: 12%; right: 6%; }

@media (max-width: 1000px) {
  .flower-hero::before, .flower-hero::after { display: none; }
  .flower-stage {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 32px;
    padding: 0 4px;
  }
  .flower-svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 12px !important;
    display: block;
    width: 280px;
    max-width: 70%;
    height: auto;
    order: -1;
  }
  .orbit-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    padding: 18px 22px;
    /* Kill the desktop float-bob & spring-in transforms that overflow on mobile */
    animation: orbit-spring-in .7s ease-out both !important;
    opacity: 1;
  }
  .orbit-card.top-left   { animation-delay: 1.4s !important; }
  .orbit-card.top-right  { animation-delay: 1.5s !important; }
  .orbit-card.mid-left   { animation-delay: 1.6s !important; }
  .orbit-card.mid-right  { animation-delay: 1.7s !important; }
  .orbit-card.bot-left   { animation-delay: 1.8s !important; }
  .orbit-card.bot-right  { animation-delay: 1.9s !important; }
  .orbit-card .arrow { opacity: 1; transform: none; right: 18px; top: 18px; }
}

@media (max-width: 600px) {
  /* Tighter, less-crowded mobile hero */
  .flower-hero { padding-top: 88px !important; padding-bottom: 40px !important; }
  .flower-svg { width: 200px !important; margin: 0 auto 8px !important; }
  .flower-stage { gap: 10px !important; margin-bottom: 16px !important; }
  .flower-eyebrow { font-size: .68rem; letter-spacing: .22em; margin-bottom: 4px; }

  .flower-content h1 { font-size: 1.85rem; line-height: 1.12; margin-bottom: 12px; }
  .flower-content p.lead {
    font-size: .95rem;
    line-height: 1.45;
    margin-bottom: 20px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .flower-content .actions { flex-direction: column; gap: 10px; }
  .flower-content .actions .btn { width: 100%; padding: 14px 20px; }

  .flower-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding-top: 20px !important;
    margin-top: 24px !important;
  }
  .flower-stats .num { font-size: 1.35rem; }
  .flower-stats .label { font-size: .68rem; letter-spacing: .06em; }

  /* Hide the 6 orbit cards on mobile — they crowd the small screen, and the
     hexagon flower + headline carry the visual weight cleanly. */
  body.page-home .flower-stage .orbit-card { display: none; }

  /* Nav: tighten everything. Hide the gold "Free Video Audit" button from
     the mobile header — it's already in the hamburger menu + floating pill,
     so removing it gives the hamburger room and prevents the right-edge clip. */
  .nav-wrap { padding: 14px 0; gap: 8px; }
  .nav-cta { gap: 8px; padding-left: 0; }
  .nav-cta .btn { display: none !important; }
  .nav-phone { display: none !important; }
  .logo-text { font-size: .82rem; line-height: 1.05; }
  .logo-text small { font-size: .62rem; }
  .logo-mark { width: 34px; height: 40px; }
  .logo-mark span { font-size: .85rem; }
  .nav-toggle { width: 40px; height: 40px; font-size: 1.25rem; }
  .container { padding: 0 16px; }

  /* Marquee tighter on tiny screens */
  .marquee { padding: 10px 0; }
  .marquee span { font-size: .78rem; }
}

@media (max-width: 380px) {
  /* Tiny phones — shorten button label */
  .nav-cta .btn { padding: 8px 10px; font-size: .75rem; }
}

/* Hero content under flower */
.flower-content {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.flower-content h1 { color: var(--navy-900); margin-bottom: 18px; }
.flower-content h1 .gold-text { color: var(--gold-600); }
.flower-content p.lead { font-size: 1.2rem; color: var(--slate-700); margin-bottom: 32px; }
.flower-content .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.flower-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.flower-stats .s { text-align: center; }
.flower-stats .num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; color: var(--gold-600); line-height: 1; }
.flower-stats .label { font-size: .8rem; color: var(--slate-500); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
@media (max-width: 800px) { .flower-stats { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* ===== Marquee ===== */
.marquee {
  background: var(--navy-900);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee-track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.marquee span {
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
}
.marquee .dot { color: var(--gold-500); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Mobile: even faster + tighter spacing so it doesn't feel like a crawl */
@media (max-width: 900px) {
  .marquee { padding: 14px 0; }
  .marquee-track { animation-duration: 14s; gap: 24px; }
  .marquee span { font-size: .85rem; }
}
@media (max-width: 600px) {
  .marquee-track { animation-duration: 11s; gap: 20px; }
}

/* ============================================================
   TOOLS STRIP — "The Tools We Use" logo bar under hero
   Light cream background, grayscale logos, hover restores color
   ============================================================ */
.tools-strip {
  background: var(--cream);
  padding: 44px 0 48px;
  border-bottom: 1px solid var(--border);
}
.tools-strip-eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate-500);
  margin: 0 0 28px;
}
.tools-strip-logos {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 18px;
}
.tools-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  opacity: 0.45;
  filter: grayscale(100%);
  color: var(--slate-700);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.tools-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}
.tools-logo img {
  max-height: 32px;
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}
.tools-logo-wordmark img {
  max-height: 22px;
}
@media (max-width: 900px) {
  .tools-strip { padding: 32px 0 36px; }
  .tools-strip-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 18px;
  }
  .tools-strip-eyebrow { font-size: 0.65rem; letter-spacing: 0.14em; margin-bottom: 22px; }
}
@media (max-width: 480px) {
  .tools-strip-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 14px;
  }
  .tools-logo { height: 30px; }
  .tools-logo img { max-height: 26px; }
  .tools-logo-wordmark img { max-height: 18px; }
}

/* ===== Cards ===== */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-500); transform: translateY(-4px); }
.card h3 { margin-bottom: 12px; }
.card .icon {
  width: 52px;
  height: 52px;
  background: var(--cream);
  color: var(--gold-600);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
  font-weight: 800;
}

/* ===== Section header ===== */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head p { font-size: 1.1rem; margin-top: 16px; }

/* ===== Service Block (alt rows) ===== */
.service-block {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }
.service-block .num { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 800; color: var(--gold-500); line-height: 1; }
.service-block h3 { margin-bottom: 8px; }
.service-block .arrow {
  width: 48px; height: 48px; border-radius: 50%; background: var(--cream);
  color: var(--navy-900); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; transition: all var(--transition);
}
.service-block:hover .arrow { background: var(--gold-500); color: var(--white); transform: translateX(6px); }
@media (max-width: 700px) {
  .service-block { grid-template-columns: 60px 1fr; }
  .service-block .arrow { display: none; }
}

/* ===== Steps (timeline) ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.step {
  background: var(--white);
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
}
.step .step-num {
  position: absolute;
  top: -22px;
  left: 28px;
  width: 44px;
  height: 44px;
  background: var(--gold-500);
  color: var(--navy-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md);
}
.step h3 { margin-top: 12px; margin-bottom: 10px; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ===== Testimonial ===== */
.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  border-top: 3px solid var(--gold-500);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.testimonial .quote-mark { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--gold-500); line-height: 1; }
.testimonial .body { font-size: 1.05rem; color: var(--slate-700); margin-bottom: 18px; }
.testimonial .author { font-weight: 700; color: var(--navy-900); font-size: .95rem; }
.testimonial .stars { color: var(--gold-500); font-size: 1rem; letter-spacing: 2px; margin-top: 6px; }

/* ===== Pricing ===== */
.pricing-block { margin-bottom: 56px; }
.pricing-block > h3 {
  background: var(--navy-800);
  color: var(--white);
  padding: 16px 24px;
  border-radius: 12px 12px 0 0;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.price-tier {
  background: var(--white);
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  position: relative;
}
.price-tier:last-child { border-right: none; }
.price-tier.popular {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.price-tier.popular::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: .65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .08em;
}
.price-tier h4 { font-family: 'Inter', sans-serif; font-size: .85rem; text-transform: uppercase; color: var(--slate-500); letter-spacing: .08em; margin-bottom: 6px; }
.price-tier .tier-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 800; color: var(--navy-900); margin-bottom: 18px; }
.price-tier .price { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.price-tier .period { color: var(--slate-500); font-size: .9rem; margin-bottom: 24px; display: block; }
.price-tier ul.feats { list-style: none; padding: 0; margin: 0 0 24px; }
.price-tier ul.feats li { padding: 8px 0; padding-left: 26px; position: relative; font-size: .92rem; color: var(--slate-700); }
.price-tier ul.feats li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px; height: 18px;
  background: var(--gold-500);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
}
.price-tier .note { font-size: .8rem; color: var(--slate-500); margin-top: 8px; font-style: italic; }

/* ===== FAQ Accordion ===== */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all var(--transition);
}
.faq-item.open { border-color: var(--gold-500); box-shadow: var(--shadow-md); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  width: 100%;
  text-align: left;
  font-weight: 700;
  color: var(--navy-900);
  font-size: 1.05rem;
  background: transparent;
}
.faq-q .plus { color: var(--gold-500); font-size: 1.5rem; flex-shrink: 0; margin-left: 16px; transition: transform var(--transition); }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 24px;
}
.faq-item.open .faq-a { max-height: 800px; padding: 0 24px 24px; }
.faq-a p { color: var(--slate-700); line-height: 1.7; }

/* ===== Final CTA Block ===== */
.final-cta {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(212,168,75,.12) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(212,168,75,.08) 0%, transparent 50%);
  pointer-events: none;
}
.final-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.final-cta h2 { color: var(--white); margin-bottom: 20px; }
.final-cta h2 .gold-text { color: var(--gold-500); }
.final-cta p { color: rgba(255,255,255,.85); font-size: 1.15rem; margin-bottom: 36px; }
.final-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.final-cta .note { font-size: .85rem; color: rgba(255,255,255,.6); }

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.7);
  padding: 64px 0 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.site-footer h5 { color: var(--white); font-size: .95rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a { display: block; padding: 6px 0; color: rgba(255,255,255,.7); font-size: .92rem; }
.site-footer a:hover { color: var(--gold-500); }
.footer-tag { font-size: .92rem; margin: 12px 0 18px; line-height: 1.6; }
.footer-contact-item {
  padding: 12px 0;
  font-size: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-contact-item:last-child { border-bottom: none; }
.footer-contact-item strong {
  color: rgba(255,255,255,.5);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  min-width: 0;
}
.footer-contact-item .val,
.footer-contact-item a {
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  word-break: break-word;
  font-weight: 500;
  padding: 0 !important;
  display: inline-block !important;
}
.footer-contact-item a:hover { color: var(--gold-500); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Floating Audit Button (sticky CTA) ===== */
.floating-audit {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  background: var(--gold-500);
  color: var(--navy-900);
  padding: 14px 22px;
  border-radius: 50px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(10,23,48,.3), 0 0 0 8px rgba(212,168,75,.18);
  animation: pulse-cta 2.4s ease-in-out infinite;
  transition: transform var(--transition);
  font-size: .95rem;
  cursor: pointer;
}
.floating-audit:hover { transform: translateY(-3px) scale(1.04); }
.floating-audit::before {
  content: '✉';
  font-size: 1.2rem;
}
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 10px 30px rgba(10,23,48,.3), 0 0 0 0 rgba(212,168,75,.6); }
  50% { box-shadow: 0 10px 30px rgba(10,23,48,.3), 0 0 0 18px rgba(212,168,75,0); }
}
@media (max-width: 900px) {
  /* Floating CTA — lift above marquee + safe area */
  .floating-audit {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    padding: 11px 18px;
    font-size: .82rem;
    box-shadow: 0 10px 24px rgba(10,23,48,.4), 0 0 0 6px rgba(212,168,75,.15);
  }
}
@media (max-width: 600px) {
  .floating-audit {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    padding: 10px 14px;
    font-size: .76rem;
  }
}

/* ===== Differentiators / mission strip ===== */
.diff-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.diff-cell {
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.diff-cell:last-child { border-right: none; }
.diff-cell .big-num { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 800; color: var(--gold-500); line-height: 1; }
.diff-cell .lbl { font-weight: 700; color: var(--navy-900); margin-top: 8px; }
.diff-cell p { font-size: .9rem; margin-top: 8px; }
@media (max-width: 800px) {
  .diff-row { grid-template-columns: 1fr 1fr; }
  .diff-cell { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .diff-cell:nth-last-child(-n+2) { border-bottom: none; }
  .diff-cell:nth-child(even) { border-right: none; }
}

/* ===== Case study card ===== */
.case-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold-500); }
.case-card .top {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 32px 28px;
}
.case-card .top .badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-500); margin-bottom: 8px; text-transform: uppercase; }
.case-card .top h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 4px; }
.case-card .top .loc { font-size: .85rem; color: rgba(255,255,255,.7); }
.case-card .top .result-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--gold-500);
  line-height: 1;
  margin-top: 20px;
}
.case-card .top .result-label { font-size: .9rem; color: rgba(255,255,255,.8); margin-top: 4px; }
.case-card .body { padding: 28px; flex: 1; }
.case-card .body p { font-size: .95rem; margin-bottom: 16px; }
.case-card .body h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); margin-bottom: 12px; }
.case-card ul.did { list-style: none; padding: 0; }
.case-card ul.did li { padding: 6px 0; padding-left: 22px; position: relative; font-size: .9rem; color: var(--slate-700); }
.case-card ul.did li::before { content: '→'; position: absolute; left: 0; color: var(--gold-500); font-weight: 800; }
.case-card .stat-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  background: var(--slate-100); padding: 18px; border-radius: 10px; margin-bottom: 18px;
}
.case-card .stat-row .s { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; color: var(--navy-900); }
.case-card .stat-row .s small { display: block; font-size: .7rem; font-weight: 400; color: var(--slate-500); text-transform: uppercase; letter-spacing: .06em; font-family: 'Inter', sans-serif; }

/* ===== Industries grid ===== */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
.industry {
  background: var(--white);
  padding: 28px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.industry:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); transform: translateY(-4px); }
.industry:hover h3, .industry:hover p { color: var(--white); }
.industry h3 { font-size: 1.15rem; margin-bottom: 8px; }
.industry .ico { font-size: 2rem; margin-bottom: 16px; }
.industry p { font-size: .9rem; }

/* ===== Founder section ===== */
.founder-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .founder-wrap { grid-template-columns: 1fr; } }
.founder-card {
  background: linear-gradient(160deg, var(--cream) 0%, var(--white) 100%);
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-500);
  position: relative;
}
.founder-photo {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 30px rgba(10,23,48,.18);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.founder-photo .fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  font-weight: 800;
}
.founder-photo img + .fallback { display: none; }
.founder-card .badge {
  display: inline-block;
  background: var(--navy-900);
  color: var(--gold-500);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.founder-card h3 { font-size: 1.4rem; margin-bottom: 4px; }
.founder-card .title { color: var(--slate-500); font-size: .9rem; margin-bottom: 16px; }
.founder-card .signature { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.3rem; color: var(--gold-600); margin-top: 18px; }

.diff-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.diff-list li {
  padding: 12px 0 12px 36px;
  position: relative;
  font-size: 1rem;
  color: var(--slate-700);
  border-bottom: 1px solid var(--border);
}
.diff-list li:last-child { border-bottom: none; }
.diff-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 14px;
  width: 24px; height: 24px;
  background: var(--gold-500);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
}

/* ===== Contact page styles ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info .info-item {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.contact-info .info-item .ico {
  width: 48px; height: 48px;
  background: var(--cream);
  color: var(--gold-600);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  font-weight: 800;
}
.contact-info .info-item h4 { font-size: .85rem; text-transform: uppercase; color: var(--slate-500); letter-spacing: .08em; margin-bottom: 4px; }
.contact-info .info-item .val { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); }
.contact-info .info-item a:hover { color: var(--gold-600); }

.booking-card {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.booking-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(212,168,75,.2) 0%, transparent 60%);
  border-radius: 50%;
}
.booking-card > * { position: relative; z-index: 1; }
.booking-card h2 { color: var(--white); margin-bottom: 12px; }
.booking-card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.booking-card .badges span {
  background: rgba(212,168,75,.18);
  border: 1px solid rgba(212,168,75,.35);
  color: var(--gold-500);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
}
.booking-card .booking-steps {
  background: rgba(255,255,255,.05);
  padding: 20px;
  border-radius: 12px;
  margin: 24px 0;
}
.booking-card .booking-steps .s {
  display: flex; align-items: center; gap: 14px; padding: 8px 0; color: rgba(255,255,255,.85);
}
.booking-card .booking-steps .s .n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold-500); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
}

/* ===== Page hero (interior) ===== */
.page-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212,168,75,.15) 0%, transparent 60%);
  border-radius: 50%;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 780px; }
.page-hero h1 { color: var(--white); margin-bottom: 20px; }
.page-hero h1 .gold-text { color: var(--gold-500); }
.page-hero p { color: rgba(255,255,255,.85); font-size: 1.2rem; max-width: 680px; }
.page-hero .stats-inline {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.page-hero .stats-inline .si .v { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; color: var(--gold-500); }
.page-hero .stats-inline .si .l { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ===== Service deep-dive deliverable cards ===== */
.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .deliverables { grid-template-columns: 1fr; } }
.deliv {
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold-500);
}
.deliv h4 { font-size: 1.05rem; margin-bottom: 8px; color: var(--navy-900); font-family: 'Playfair Display', serif; font-weight: 700; }
.deliv p { font-size: .92rem; }

/* ===== Trust strip ===== */
.trust-strip {
  background: var(--cream);
  padding: 32px 0;
  text-align: center;
}
.trust-strip .stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 700px) { .trust-strip .stat-row { grid-template-columns: 1fr; } }
.trust-strip .big { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 800; color: var(--gold-600); line-height: 1; }
.trust-strip .lab { color: var(--slate-700); font-weight: 600; margin-top: 6px; }

/* ===== Service hub mini cards ===== */
.svc-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .svc-hub-grid { grid-template-columns: 1fr; } }
.svc-hub-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.svc-hub-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.svc-hub-card:hover::before { transform: scaleY(1); }
.svc-hub-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.svc-hub-card .num { font-family: 'Playfair Display', serif; color: var(--gold-500); font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
.svc-hub-card h3 { margin-bottom: 12px; }
.svc-hub-card .link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--navy-900); margin-top: 16px;
}
.svc-hub-card .link:hover { color: var(--gold-600); }

/* ===== Bullet list with checks ===== */
.bullet-checks { list-style: none; padding: 0; }
.bullet-checks li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--slate-700);
}
.bullet-checks li::before {
  content: '✓';
  position: absolute; left: 0; top: 12px;
  width: 20px; height: 20px;
  background: var(--gold-500); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
}

/* ===== Util ===== */
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.no-border { border: none !important; }
.show-mobile { display: none; }
@media (max-width: 700px) { .hide-mobile { display: none; } .show-mobile { display: block; } }

/* =========================================================
   NUCLEAR MOBILE OVERRIDES — appended at end for max specificity
   ========================================================= */
@media (max-width: 1000px) {
  body .flower-hero .flower-stage .orbit-card,
  body .flower-hero .flower-stage a.orbit-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    transform: none !important;
    animation: orbit-spring-in .6s ease-out both !important;
    opacity: 1 !important;
  }
  body .flower-hero .flower-stage {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  body .flower-hero .flower-stage .flower-svg {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 auto 8px !important;
    width: 240px !important;
    max-width: 70% !important;
    order: -1 !important;
  }
  body .founder-photo { position: relative !important; }
  body .founder-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }
}