/* ═══════════════════════════════════════════════════
   TrueComply — Complete Stylesheet
   Upload to GoDaddy alongside index.php
   ═══════════════════════════════════════════════════ */

/* ─── CSS Variables ─── */
:root {
  --ink: #18212f;
  --muted-color: #667085;
  --surface: #fffdfa;
  --muted: #f5f8fc;
  --surface-2: #f6f1e8;
  --panel: rgba(255, 255, 255, 0.86);
  --line: rgba(24, 33, 47, 0.11);
  --navy: #10243f;
  --teal: #0b6c74;
  --gold: #d79b31;
  --mint: #dff4ef;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(16, 36, 63, 0.13);
  --destructive: #a52b3f;
  --radius: 0.625rem;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 28%, #f5f8fc 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

main { flex: 1; }

/* Simple visual explanation of TrueComply's work */
.what-we-do-section { background: #ffffff; }
.what-we-do-visual {
  max-width: 850px;
  margin: 2.5rem auto 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(16, 36, 63, 0.09);
}
.what-we-do-visual img { width: 100%; height: auto; }
.what-we-do-mobile { display: none; }
.what-we-do-note {
  max-width: 850px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(11, 108, 116, 0.18);
  border-radius: 10px;
  background: #f0faf8;
  color: #36515a;
  font-size: 0.94rem;
  line-height: 1.7;
}
.what-we-do-note strong { color: var(--navy); }
.what-we-do-note a { display: inline-block; margin-left: .5rem; color: var(--teal); font-weight: 800; }

@media (max-width: 640px) {
  .what-we-do-visual { display: none; }
  .what-we-do-mobile { display: grid; gap: .75rem; margin: 1.5rem 0 1.25rem; }
  .what-we-do-mobile > div { position: relative; padding: 1rem 1rem 1rem 1.25rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(16, 36, 63, .05); }
  .what-we-do-mobile strong { display: block; color: var(--navy); font-size: .93rem; }
  .what-we-do-mobile p { margin-top: .2rem; color: var(--muted-color); font-size: .83rem; line-height: 1.55; }
  .what-dot { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; }
  .dot-blue { background: #2563eb; } .dot-green { background: #16a34a; } .dot-orange { background: #d97706; } .dot-purple { background: #9333ea; } .dot-red { background: #e11d48; }
  .what-we-do-note { font-size: .88rem; }
  .what-we-do-note a { margin-left: 0; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

::selection {
  background: rgba(11, 108, 116, 0.15);
  color: var(--navy);
}

*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Serif Heading ─── */
.tc-serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f8fc; }
::-webkit-scrollbar-thumb { background: #c5cdd8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9aa5b4; }

/* ─── Animations ─── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(11, 108, 116, 0.3); }
  70% { box-shadow: 0 0 0 12px rgba(11, 108, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 108, 116, 0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes counterGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(11, 108, 116, 0); }
  50% { text-shadow: 0 0 20px rgba(11, 108, 116, 0.3); }
}
@keyframes breatheGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 108, 116, 0); }
  50% { box-shadow: 0 0 24px 4px rgba(11, 108, 116, 0.08); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: floatSlow 8s ease-in-out infinite; }
.number-ticker { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }

/* ─── Scroll Progress ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─── Page Skeleton ─── */
.page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a1628;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.page-skeleton.hidden { opacity: 0; }
.page-skeleton .skel-bar {
  position: relative;
  width: 224px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  margin-bottom: 2rem;
}
.page-skeleton .skel-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b6c74, #d79b31);
  animation: barFill 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes barFill { from { width: 0; } to { width: 100%; } }
.page-skeleton .skel-line {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  animation: pulseLine 1.5s ease-in-out infinite;
}
@keyframes pulseLine { 0%,100%{opacity:0.3} 50%{opacity:0.6} }

/* ─── Header ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.top-bar {
  background: #103050;
  padding: 10px 4.5%;
}
.top-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-bar p {
  color: white;
  font-size: 0.88rem;
  line-height: 1.4;
}
.top-bar a {
  color: white;
  font-size: 0.88rem;
  font-weight: 500;
}
.top-bar a:hover { text-decoration: underline; }

.nav-bar {
  background: rgba(248, 251, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(24, 33, 47, 0.08);
  transition: box-shadow 0.3s;
}
.nav-bar.scrolled {
  box-shadow: 0 4px 24px rgba(16, 36, 63, 0.08);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4.5%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1.1rem;
}
.brand-name {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Desktop Nav */
.desktop-nav {
  display: none;
  gap: 28px;
  align-items: center;
}
@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
}
.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-color);
  position: relative;
  transition: color 0.2s;
  padding-bottom: 4px;
}
.nav-link.active { color: var(--teal); }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 999px;
}
.nav-link:hover { color: var(--teal); }

.nav-actions {
  display: none;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1024px) {
  .nav-actions { display: flex; }
}

/* Mobile Hamburger */
.mobile-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1024px) {
  .mobile-toggle { display: none; }
}
.mobile-toggle button {
  padding: 8px;
  color: var(--ink);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  background: rgba(248, 251, 255, 0.98);
  backdrop-filter: blur(16px);
}
.mobile-menu.open {
  display: block;
  max-height: 500px;
  opacity: 1;
}
.mobile-menu nav {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 4.5%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu .nav-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--ink);
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
  background: var(--mint);
  color: var(--teal);
}

/* ─── Premium Button ─── */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--navy), var(--teal));
  box-shadow: 0 16px 35px rgba(11, 108, 116, 0.22);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(11, 108, 116, 0.32);
}
.btn-premium:active { transform: translateY(0); }
.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transition: left 0.6s ease;
  border-radius: inherit;
}
.btn-premium:hover::before { left: 100%; }

.btn-premium-sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9rem;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  transition: all 0.3s;
  text-decoration: none;
}
.btn-outline:hover { background: var(--surface-2); }

/* ─── Premium Input ─── */
.input-premium {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  outline: none;
}
.input-premium:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11, 108, 116, 0.1);
  background: white;
}
.input-premium::placeholder { color: #9ca3af; }

/* ─── Section Utilities ─── */
.section-alt {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
.section-warm {
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4.5%;
}

.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ─── Kicker Label ─── */
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--teal);
  display: block;
}
.kicker-light {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}

/* ─── Premium Card ─── */
.premium-card {
  background: #ffffff;
  border: 1px solid rgba(24, 33, 47, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,36,63,0.04), 0 4px 12px rgba(16,36,63,0.04), 0 12px 32px rgba(16,36,63,0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.premium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(16,36,63,0.04), 0 8px 24px rgba(16,36,63,0.07), 0 24px 56px rgba(16,36,63,0.1);
  border-color: rgba(11, 108, 116, 0.2);
}
.premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,108,116,0), transparent);
  transition: background 0.4s ease;
  border-radius: inherit;
}
.premium-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(11,108,116,0.15), transparent);
}

.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 24px 70px rgba(16, 36, 63, 0.13);
}

.card-hover {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(16, 36, 63, 0.12);
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(16, 36, 63, 0.1);
}

/* ─── Card Gradient Border ─── */
.card-gradient-border {
  position: relative;
  background: white;
  border-radius: 12px;
  z-index: 0;
  border: 1px solid var(--line);
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--teal), var(--gold), var(--teal));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: gradientShift 4s ease infinite;
}
.card-gradient-border:hover::before { opacity: 1; }

/* ─── Tags & Badges ─── */
.tag-teal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--mint);
  color: var(--teal);
}
.tag-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(215, 155, 49, 0.12);
  color: var(--gold);
}

.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid;
  transition: all 0.3s ease;
}
.badge-premium-teal {
  background: rgba(11, 108, 116, 0.06);
  color: var(--teal);
  border-color: rgba(11, 108, 116, 0.15);
}

/* ─── Dividers ─── */
.premium-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(11,108,116,0.12) 30%, rgba(11,108,116,0.12) 70%, transparent 100%);
  margin: 0 auto;
  max-width: 200px;
}

/* ─── Links ─── */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--teal);
  transition: width 0.3s ease;
  border-radius: 1px;
}
.link-underline:hover::after { width: 100%; }

.hover-underline-expand {
  position: relative;
  display: inline-block;
}
.hover-underline-expand::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 1px;
  transition: width 0.3s ease;
}
.hover-underline-expand:hover::after { width: 100%; }

/* ─── Section Accent Line ─── */
.section-accent-line {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
}
.section-accent-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}

/* ─── Text Utilities ─── */
.text-gradient-teal {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Section Headings ─── */
.section-heading {
  margin-bottom: 3.5rem;
}
.section-heading .kicker { margin-bottom: 12px; }
.section-heading h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 42rem;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .section-heading h2 {
    font-size: 2.75rem;
  }
}
.section-heading p {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted-color);
  max-width: 40rem;
  line-height: 1.7;
}

/* ─── Responsive Grids ─── */
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-2 { gap: 20px; }
  .grid-3 { gap: 20px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.grid-split {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .grid-split {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

/* ─── Touch Device Override ─── */
@media (hover: none) and (pointer: coarse) {
  .premium-card:hover { transform: none; }
  .card-hover:hover { transform: none; }
  .btn-premium:hover { transform: none; }
  .hover-lift:hover { transform: none; }
}

/* ─── Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 36, 63, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 580px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 25px 60px -12px rgba(16,36,63,0.25);
  position: relative;
  animation: scaleIn 0.3s ease;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  transition: all 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}
.modal-close:hover { background: var(--mint); color: var(--teal); }

/* ─── FAQ Accordion ─── */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-trigger {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-trigger svg {
  transition: transform 0.3s;
  flex-shrink: 0;
  color: var(--muted-color);
}
.faq-item.open .faq-trigger svg { transform: rotate(180deg); }
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-body { max-height: 300px; }
.faq-body-inner {
  padding-bottom: 20px;
  font-size: 0.875rem;
  color: var(--muted-color);
  line-height: 1.7;
}

/* ─── Toast ─── */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(16,36,63,0.15);
  animation: slideInUp 0.3s ease;
  max-width: 380px;
}
.toast-success { background: #065f46; color: white; }
.toast-error { background: #991b1b; color: white; }

/* ─── Pricing Toggle ─── */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px;
  background: var(--line);
  position: relative;
}
.pricing-toggle-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--ink);
  width: calc(50% - 4px);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-toggle button {
  position: relative;
  z-index: 1;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
}
.pricing-toggle button.active { color: white; }
.pricing-toggle button:not(.active) { color: var(--muted-color); }

/* ─── Stagger Animation ─── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(12px);
  animation: slideInUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }

/* ─── Scroll-triggered fade-in ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Dot Pattern ─── */
.dot-pattern {
  background-image: radial-gradient(circle, rgba(11, 108, 116, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Admin dashboard */
body[data-page="admin"] {
  background: #f7fbff;
  color: var(--ink);
}

body[data-page="admin"] .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4.5%;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

body[data-page="admin"] .brand,
body[data-page="admin"] .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="admin"] .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--teal), var(--gold));
}

body[data-page="admin"] .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: white;
  background: var(--teal);
  text-decoration: none;
  font-weight: 700;
}

body[data-page="admin"] .inner-page {
  min-height: calc(100vh - 78px);
  display: grid;
  align-items: center;
  padding: 48px 4.5%;
}

body[data-page="admin"] .contact-section {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
}

body[data-page="admin"] .contact-copy,
body[data-page="admin"] .contact-form {
  padding: 28px;
  border-radius: 24px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(16, 36, 63, 0.08);
}

body[data-page="admin"] .contact-copy h2 {
  margin: 12px 0;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 2.4rem;
  line-height: 1.05;
}

body[data-page="admin"] .contact-copy p {
  color: var(--muted-color);
  line-height: 1.7;
}

body[data-page="admin"] .contact-form {
  display: grid;
  gap: 16px;
}

body[data-page="admin"] .contact-form label {
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
}

body[data-page="admin"] .contact-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
}

body[data-page="admin"] .contact-form input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11, 108, 116, 0.12);
}

body[data-page="admin"] .flash-error {
  padding: 12px 14px;
  border-radius: 14px;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  font-size: 0.875rem;
}

body[data-page="admin"] .app-shell {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: 320px 1fr;
}

body[data-page="admin"] .app-sidebar {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #10243f 0%, #0b3141 100%);
  color: #fff;
}

body[data-page="admin"] .sidebar-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}

body[data-page="admin"] .app-sidebar h1 {
  margin: 12px 0;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 2.35rem;
  line-height: 1;
}

body[data-page="admin"] .app-sidebar p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

body[data-page="admin"] .sidebar-nav {
  margin-top: 34px;
  display: grid;
  gap: 10px;
}

body[data-page="admin"] .sidebar-nav a {
  padding: 13px 14px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  text-decoration: none;
}

body[data-page="admin"] .sidebar-nav a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

body[data-page="admin"] .app-main {
  padding: 28px;
  display: grid;
  gap: 18px;
  min-width: 0;
  width: 100%;
}

body[data-page="admin"] .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-page="admin"] .app-card,
body[data-page="admin"] .panel-block {
  padding: 24px;
  border-radius: 22px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(16, 36, 63, 0.08);
  min-width: 0;
}

body[data-page="admin"] .mini-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
}

body[data-page="admin"] .app-card h2 {
  margin: 8px 0 4px;
  font-size: 2rem;
}

body[data-page="admin"] .app-card p,
body[data-page="admin"] .panel-title span {
  color: var(--muted-color);
}

body[data-page="admin"] .panel-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

body[data-page="admin"] .table-wrap {
  margin-top: 18px;
  overflow-x: auto;
}

body[data-page="admin"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

body[data-page="admin"] th,
body[data-page="admin"] td {
  padding: 14px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

body[data-page="admin"] th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-color);
}

/* Multi-page website and SEO service pages */
.top-links { display: flex; gap: 22px; }
.desktop-nav { gap: 17px; }
.desktop-nav > .nav-link,
.nav-dropdown-trigger { font-size: .78rem; white-space: nowrap; }
.nav-dropdown { position: relative; display: flex; align-items: center; height: 72px; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-trigger svg { transition: transform .2s ease; }
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: var(--dropdown-left, 50%);
  width: min(780px, 92vw);
  padding: 22px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 60px rgba(16,36,63,.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--dropdown-translate-x, -50%), -8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--dropdown-translate-x, -50%), 0);
  pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-intro { padding: 18px; border-radius: 13px; background: linear-gradient(145deg,#eff8f7,#f4f7fb); }
.nav-dropdown-intro p { margin: 10px 0 16px; font-size: .82rem; color: var(--muted-color); line-height: 1.65; }
.nav-dropdown-intro a { color: var(--teal); font-size: .8rem; font-weight: 800; }
.nav-dropdown-services { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 16px; align-content: start; }
.nav-dropdown-services a { padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: .78rem; font-weight: 650; line-height: 1.4; }
.nav-dropdown-services a:hover { color: var(--teal); background: var(--mint); }

.mobile-menu.open { max-height: calc(100vh - 92px); overflow-y: auto; }
.mobile-main-link { display: block; padding: 10px 12px; border-radius: 8px; font-weight: 700; }
.mobile-category { border-top: 1px solid var(--line); }
.mobile-category summary { padding: 12px; cursor: pointer; font-weight: 750; color: var(--navy); }
.mobile-category a { display: block; padding: 8px 12px 8px 24px; font-size: .84rem; color: var(--muted-color); }
.mobile-category .mobile-category-all { color: var(--teal); font-weight: 800; }

.inner-main { padding-top: 112px; }
.inner-hero,
.service-hero { position: relative; overflow: hidden; padding: 5.5rem 0; background: linear-gradient(135deg,#f4f9fc 0%,#fff 52%,#eef8f5 100%); }
.inner-hero::before,
.service-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(16,36,63,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,63,.035) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to right,#000,transparent 80%); }
.inner-hero-grid,
.service-hero-grid { position: relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:5rem; align-items:center; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:1.7rem; font-size:.76rem; color:var(--muted-color); }
.breadcrumbs a:hover { color:var(--teal); }
.inner-hero h1,
.service-hero h1 { margin:12px 0 18px; max-width:850px; color:var(--navy); font-size:clamp(2.7rem,5vw,4.7rem); line-height:1.02; letter-spacing:-.025em; }
.inner-hero p,
.service-lead { max-width:760px; color:var(--muted-color); font-size:1.05rem; line-height:1.8; }
.inner-hero-aside { padding:26px; display:flex; flex-direction:column; gap:10px; border:1px solid rgba(11,108,116,.17); border-radius:16px; background:rgba(255,255,255,.8); box-shadow:0 18px 42px rgba(16,36,63,.08); }
.inner-hero-aside strong { color:var(--navy); font-family:'Cormorant Garamond',serif; font-size:1.45rem; line-height:1.2; }
.inner-hero-aside span { color:var(--muted-color); font-size:.86rem; line-height:1.65; }
.inner-hero-aside a { margin-top:6px; color:var(--teal); font-weight:800; font-size:.84rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.service-directory { display:grid; gap:5rem; }
.directory-group { scroll-margin-top:130px; }
.directory-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.directory-heading h2 { margin:8px 0; color:var(--navy); font-size:clamp(2rem,3vw,2.8rem); line-height:1.1; }
.directory-heading p { max-width:680px; color:var(--muted-color); }
.service-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.seo-service-card { position:relative; min-height:260px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 9px 28px rgba(16,36,63,.055); transition:.25s ease; }
.seo-service-card:hover { transform:translateY(-4px); border-color:rgba(11,108,116,.28); box-shadow:0 18px 42px rgba(16,36,63,.1); }
.service-card-number { margin-bottom:28px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--teal); background:var(--mint); font-size:.72rem; font-weight:800; }
.seo-service-card h3 { color:var(--navy); font-size:1rem; line-height:1.5; }
.seo-service-card p { margin:10px 0 22px; color:var(--muted-color); font-size:.83rem; line-height:1.7; }
.service-card-link { margin-top:auto; color:var(--teal); font-size:.78rem; font-weight:800; }

.service-summary-card { padding:28px; border-radius:16px; color:#fff; background:linear-gradient(155deg,var(--navy),#0b4653); box-shadow:var(--shadow); }
.service-summary-card .kicker { color:#83d7cf; }
.service-summary-card dl { margin:18px 0; }
.service-summary-card dl div { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.service-summary-card dt { font-size:.69rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.58); }
.service-summary-card dd { margin-top:4px; font-size:.86rem; line-height:1.55; }
.service-summary-card > a { color:#8fe0d7; font-weight:800; font-size:.84rem; }
.service-trust-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; color:var(--teal); font-size:.76rem; font-weight:750; }
.service-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:5rem; align-items:start; }
.service-article { display:grid; gap:4.5rem; min-width:0; }
.service-article h2 { margin:10px 0 18px; color:var(--navy); font-size:clamp(2rem,3.5vw,3rem); line-height:1.1; }
.service-article p,
.content-copy { color:var(--muted-color); font-size:.97rem; line-height:1.85; }
.service-article p + p { margin-top:14px; }
.check-list { margin-top:22px; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:30px; color:var(--ink); line-height:1.65; }
.check-list li::before { content:'✓'; position:absolute; left:0; top:0; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:var(--teal); background:var(--mint); font-size:.72rem; font-weight:900; }
.check-list.large { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.included-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.included-grid div { padding:20px; display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; background:#fff; }
.included-grid span { color:var(--teal); font-size:.7rem; font-weight:800; }
.included-grid strong { color:var(--navy); font-size:.88rem; line-height:1.55; }
.document-list { margin-top:22px; display:grid; gap:10px; }
.document-list li { padding:14px 16px; display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:.88rem; }
.document-list span { padding:4px 7px; border-radius:5px; color:var(--teal); background:var(--mint); font-size:.6rem; font-weight:900; }
.process-list { margin-top:24px; display:grid; }
.process-list li { position:relative; display:grid; grid-template-columns:42px 1fr; gap:16px; padding-bottom:24px; }
.process-list li:not(:last-child)::before { content:''; position:absolute; left:20px; top:42px; bottom:0; width:1px; background:var(--line); }
.process-list li > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--navy),var(--teal)); font-weight:800; }
.process-list strong { display:block; color:var(--navy); font-size:.95rem; }
.process-list p { margin-top:4px; font-size:.84rem; }
.service-faqs { display:grid; border-top:1px solid var(--line); }
.service-faqs details { border-bottom:1px solid var(--line); }
.service-faqs summary { padding:20px 34px 20px 0; position:relative; cursor:pointer; color:var(--navy); font-weight:750; list-style:none; }
.service-faqs summary::after { content:'+'; position:absolute; right:6px; color:var(--teal); font-size:1.25rem; }
.service-faqs details[open] summary::after { content:'−'; }
.service-faqs details p { padding:0 30px 20px 0; font-size:.9rem; }
.service-sidebar { position:sticky; top:136px; display:grid; gap:16px; }
.sidebar-cta { padding:28px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 50px rgba(16,36,63,.09); }
.sidebar-cta h2 { margin:10px 0; color:var(--navy); font-size:2rem; line-height:1.05; }
.sidebar-cta p { margin-bottom:20px; color:var(--muted-color); font-size:.86rem; line-height:1.7; }
.sidebar-cta .btn-premium { width:100%; }
.sidebar-cta small { margin-top:12px; display:block; text-align:center; color:var(--muted-color); }
.sidebar-note { padding:20px; border-radius:12px; color:#5f4a21; background:#fff7e4; border:1px solid #f1dfb4; }
.sidebar-note p { margin-top:6px; font-size:.76rem; line-height:1.65; }
.related-grid .seo-service-card { min-height:210px; }

.content-grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6rem; }
.content-grid-two h2 { margin:10px 0 18px; color:var(--navy); font-size:2.5rem; line-height:1.1; }
.principles-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.principles-grid article { padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.principles-grid span { color:var(--teal); font-size:.7rem; font-weight:900; }
.principles-grid h3 { margin:22px 0 8px; color:var(--navy); }
.principles-grid p { color:var(--muted-color); font-size:.84rem; line-height:1.7; }
.home-cta-card { padding:42px; display:flex; align-items:center; justify-content:space-between; gap:32px; border-radius:18px; color:#fff; background:linear-gradient(140deg,var(--navy),#0b5962); box-shadow:var(--shadow); }
.home-cta-card .kicker { color:#8fe0d7; }
.home-cta-card h2 { margin:8px 0; color:#fff; font-size:2.4rem; }
.home-cta-card p { max-width:720px; color:rgba(255,255,255,.7); }
.home-cta-card .btn-premium { flex-shrink:0; background:linear-gradient(135deg,#fff,#dff4ef); color:var(--navy); }
.resource-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.resource-category-grid a { padding:28px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:.25s ease; }
.resource-category-grid a:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(16,36,63,.09); }
.resource-category-grid span { color:var(--teal); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.resource-category-grid h2 { margin:20px 0 8px; color:var(--navy); font-size:1.2rem; }
.resource-category-grid p { margin-bottom:22px; color:var(--muted-color); font-size:.84rem; line-height:1.7; }
.resource-category-grid strong { color:var(--teal); font-size:.8rem; }
.faq-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:5rem; }
.faq-layout h2 { margin:10px 0 18px; font-size:2.7rem; color:var(--navy); line-height:1.08; }
.contact-intro { padding:4.5rem 0 1rem; text-align:center; }
.contact-intro .breadcrumbs { justify-content:center; }
.contact-intro h1 { margin:10px 0; color:var(--navy); font-size:clamp(2.7rem,5vw,4.5rem); }
.contact-intro p { max-width:680px; margin:0 auto; color:var(--muted-color); }
.contact-page #contact { padding-top:3rem; }
.empty-state { min-height:65vh; display:grid; place-items:center; padding:6rem 0; text-align:center; }
.empty-state h1 { margin:12px 0; font-size:3rem; color:var(--navy); }
.empty-state p { margin-bottom:24px; color:var(--muted-color); }

.site-footer { margin-top:auto; color:#fff; background:linear-gradient(180deg,#0f2034,#08121f); }
.footer-inner { max-width:1320px; margin:0 auto; padding:4.5rem 4.5% 2rem; }
.footer-main-grid { display:grid; grid-template-columns:1.3fr .9fr .8fr 1.2fr; gap:3rem; }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-logo span { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,var(--teal),var(--gold)); font-weight:900; }
.footer-logo strong { font-size:1.25rem; }
.footer-brand p,
.footer-action p { color:rgba(255,255,255,.58); font-size:.84rem; line-height:1.75; }
.footer-contact-link { margin-top:16px; display:inline-block; color:#8fe0d7; font-size:.85rem; font-weight:700; }
.footer-main-grid h2 { margin-bottom:16px; color:#fff; font-size:.88rem; }
.footer-main-grid ul { display:grid; gap:10px; }
.footer-main-grid li a { color:rgba(255,255,255,.56); font-size:.82rem; }
.footer-main-grid li a:hover { color:#fff; }
.footer-action .btn-premium { margin-top:20px; }
.footer-bottom { margin-top:3.5rem; padding-top:1.5rem; display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.38); font-size:.72rem; }

@media (max-width:1179px) {
  .desktop-nav,.nav-actions { display:none !important; }
  .mobile-toggle { display:flex !important; }
}
@media (min-width:1180px) {
  .desktop-nav,.nav-actions { display:flex; }
  .mobile-toggle { display:none; }
}
@media (max-width:960px) {
  .top-links { display:none; }
  .inner-main { padding-top:108px; }
  .inner-hero-grid,.service-hero-grid,.service-layout,.content-grid-two,.faq-layout { grid-template-columns:1fr; gap:2.5rem; }
  .service-sidebar { position:static; }
  .service-card-grid,.resource-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .principles-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .top-bar { padding:8px 4.5%; }
  .top-bar p { font-size:.72rem; }
  .nav-inner { height:64px; }
  .inner-main { padding-top:98px; }
  .inner-hero,.service-hero { padding:3.8rem 0; }
  .inner-hero h1,.service-hero h1 { font-size:2.55rem; }
  .service-card-grid,.resource-category-grid,.principles-grid,.footer-main-grid,.included-grid,.check-list.large { grid-template-columns:1fr; }
  .directory-heading,.home-cta-card,.footer-bottom { align-items:flex-start; flex-direction:column; }
  .seo-service-card { min-height:220px; }
  .home-cta-card { padding:28px; }
  .home-cta-card h2 { font-size:2rem; }
  .content-grid-two { gap:3.5rem; }
  .footer-inner { padding-top:3.5rem; }
}

@media (max-width: 960px) {
  body[data-page="admin"] .app-shell,
  body[data-page="admin"] .dashboard-grid,
  body[data-page="admin"] .contact-section {
    grid-template-columns: 1fr;
  }

  body[data-page="admin"] .app-sidebar {
    border-right: 0;
  }
}

/* Secure booking, order status and payment administration */
.payment-main { background:linear-gradient(180deg,#f5fbfc 0%,#fff 62%); }
.payment-section { padding:3rem 0 5.5rem; }
.payment-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.payment-copy h1 { margin:1rem 0; font-size:clamp(3rem,6vw,5.5rem); line-height:.92; color:var(--navy); }
.payment-copy > p { max-width:650px; color:var(--muted-color); font-size:1.05rem; line-height:1.8; }
.payment-service-card { margin:2rem 0; padding:1.25rem 1.4rem; display:grid; gap:.25rem; border:1px solid rgba(11,108,116,.16); border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(16,36,63,.06); }
.payment-service-card span,.payment-service-card small { color:var(--muted-color); }
.payment-service-card strong { color:var(--navy); font-size:1.05rem; }
.payment-assurances { list-style:none; display:grid; gap:1rem; }
.payment-assurances li { display:grid; grid-template-columns:42px 1fr; gap:1rem; align-items:start; }
.payment-assurances li > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--teal); font-weight:800; }
.payment-assurances strong { display:block; color:var(--navy); }
.payment-assurances p { margin-top:.15rem; color:var(--muted-color); font-size:.9rem; }
.payment-form,.payment-status-card { padding:clamp(1.5rem,4vw,2.35rem); border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow); }
.payment-form { display:grid; gap:1.1rem; position:sticky; top:104px; }
.payment-form-head { display:flex; justify-content:space-between; gap:1rem; align-items:start; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.payment-form-head h2 { margin-top:.35rem; font-size:2.5rem; color:var(--navy); }
.secure-chip { padding:.45rem .65rem; border-radius:999px; background:#e9f8f3; color:#08745e; font-size:.7rem; font-weight:800; white-space:nowrap; }
.payment-form > label:not(.payment-consent) { display:grid; gap:.45rem; font-size:.82rem; font-weight:800; color:var(--navy); }
.payment-form label span small { color:var(--muted-color); font-weight:500; }
.payment-form input[type="text"],.payment-form input[type="tel"],.payment-form input[type="email"] { width:100%; min-height:50px; padding:.8rem .9rem; border:1px solid var(--line); border-radius:12px; outline:none; font:inherit; }
.payment-form input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(11,108,116,.1); }
.payment-consent { display:grid; grid-template-columns:18px 1fr; gap:.65rem; align-items:start; color:var(--muted-color); font-size:.78rem; line-height:1.55; }
.payment-consent input { margin-top:.2rem; accent-color:var(--teal); }
.payment-consent a,.payment-secondary-link,.sidebar-text-link { color:var(--teal); font-weight:700; }
.sidebar-text-link { display:block; margin-top:1rem; text-align:center; text-decoration:none; }
.payment-submit { width:100%; border:0; cursor:pointer; font:inherit; }
.payment-submit:disabled { opacity:.65; cursor:wait; }
.payment-fine-print { color:var(--muted-color); font-size:.72rem; line-height:1.55; text-align:center; }
.field-error { color:#a52b3f; font-size:.75rem; }
.honeypot-field { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; }
.payment-alert,.admin-alert { padding:.85rem 1rem; border-radius:12px; font-size:.84rem; line-height:1.5; }
.payment-alert.error,.admin-alert.error { color:#8f1d2c; background:#fff0f1; border:1px solid #f4c6cb; }
.payment-alert.success,.admin-alert.success { color:#08634f; background:#ecfaf5; border:1px solid #bce8da; }
.payment-alert.neutral,.admin-alert.warning { color:#6e5419; background:#fff9e9; border:1px solid #eedba5; }
.payment-status-section { min-height:70vh; display:grid; place-items:center; padding:4rem 0 6rem; }
.narrow-payment-container { width:min(100%,760px); }
.payment-status-card { text-align:center; }
.payment-status-card h1 { margin:.65rem 0 1rem; font-size:clamp(2.5rem,6vw,4.5rem); line-height:.95; color:var(--navy); }
.payment-status-card > p { max-width:570px; margin:0 auto 1.5rem; color:var(--muted-color); line-height:1.75; }
.status-icon { width:64px; height:64px; margin:0 auto 1.25rem; display:grid; place-items:center; border-radius:50%; font-size:1.7rem; font-weight:800; }
.status-icon.success { color:#08745e; background:#dff7ee; }
.status-icon.error { color:#9c2535; background:#fee7ea; }
.status-icon.pending { color:#8a651a; background:#fff2c9; }
.checkout-summary { margin:1.5rem 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:left; }
.checkout-summary > div { padding:1rem; display:grid; gap:.25rem; }
.checkout-summary > div + div { border-left:1px solid var(--line); }
.checkout-summary span,.orders-table small { color:var(--muted-color); font-size:.72rem; }
.checkout-summary strong { color:var(--navy); overflow-wrap:anywhere; }
.checkout-launch-card .payment-submit,.payment-status-card > .btn-premium { max-width:420px; margin-inline:auto; }
.payment-secondary-link { display:block; margin-top:1rem; text-decoration:none; }
.order-card { text-align:left; }
.order-card > h1,.order-card > p { margin-left:0; text-align:left; }
.order-reference { margin:1.5rem 0; padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center; border:1px solid var(--line); border-radius:16px; }
.order-reference span { color:var(--muted-color); font-size:.75rem; }
.order-reference strong { color:var(--navy); }
.order-status { margin-left:auto; padding:.4rem .65rem; border-radius:999px; background:var(--mint); color:var(--teal); font-size:.72rem; font-style:normal; font-weight:800; }
.order-progress { margin:1.5rem 0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.45rem; }
.order-progress-step { position:relative; min-width:0; display:grid; justify-items:center; gap:.45rem; text-align:center; color:var(--muted-color); }
.order-progress-step::after { content:""; position:absolute; top:15px; left:calc(50% + 18px); width:calc(100% - 36px); height:2px; background:var(--line); }
.order-progress-step:last-child::after { display:none; }
.order-progress-step > span { position:relative; z-index:1; width:32px; height:32px; display:grid; place-items:center; border:2px solid var(--line); border-radius:50%; background:#fff; font-size:.7rem; font-weight:800; }
.order-progress-step strong { font-size:.63rem; line-height:1.35; }
.order-progress-step.complete,.order-progress-step.current { color:var(--teal); }
.order-progress-step.complete > span { border-color:var(--teal); color:#fff; background:var(--teal); }
.order-progress-step.complete::after { background:var(--teal); }
.order-progress-step.current > span { border-color:var(--teal); color:var(--teal); box-shadow:0 0 0 4px rgba(8,119,126,.1); }
.order-next-action { margin:1.2rem 0; padding:1rem 1.1rem; display:grid; gap:.25rem; border-left:4px solid var(--gold); border-radius:0 12px 12px 0; background:#fffaf0; }
.order-next-action span { color:var(--muted-color); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.order-next-action strong { color:var(--navy); }
.order-next-action small { color:var(--muted-color); }
.customer-order-history { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.customer-order-events { margin-top:1rem; display:grid; }
.customer-order-events article { position:relative; padding:0 0 1.25rem 1.6rem; display:grid; grid-template-columns:1fr; }
.customer-order-events article > span { position:absolute; top:.3rem; left:0; width:10px; height:10px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--mint); }
.customer-order-events article:not(:last-child)::before { content:""; position:absolute; top:.8rem; bottom:-.2rem; left:4px; width:2px; background:var(--line); }
.customer-order-events strong { color:var(--navy); font-size:.88rem; }
.customer-order-events p { margin:.25rem 0; color:var(--ink); font-size:.8rem; line-height:1.55; }
.customer-order-events small { color:var(--muted-color); font-size:.68rem; }
.legal-page { background:#fff; }
.legal-container { max-width:850px; }
.legal-container h1 { margin:.75rem 0 2rem; font-size:clamp(3rem,7vw,5rem); color:var(--navy); }
.legal-container h2 { margin:2rem 0 .6rem; color:var(--navy); font-size:1.3rem; }
.legal-container p { color:#526173; line-height:1.85; }
.legal-container a { color:var(--teal); }
body[data-page="admin"] { overflow-x:hidden; }
body[data-page="admin"] .app-shell { grid-template-columns:280px minmax(0,1fr); }
body[data-page="admin"] .payment-dashboard-grid,
body[data-page="admin"] .dashboard-grid { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
body[data-page="admin"] .gateway-mode { font-size:1.35rem; }
body[data-page="admin"] .admin-alert { max-width:100%; font-weight:600; overflow-wrap:anywhere; }
body[data-page="admin"] .admin-orders-list { margin-top:1.25rem; display:grid; gap:1rem; }
body[data-page="admin"] .admin-empty-state { min-height:110px; padding:1.5rem; display:grid; place-content:center; gap:.3rem; text-align:center; border:1px dashed var(--line); border-radius:16px; color:var(--muted-color); }
body[data-page="admin"] .admin-empty-state strong { color:var(--navy); }
body[data-page="admin"] .admin-order-card { padding:1.2rem; border:1px solid var(--line); border-radius:18px; background:#fbfdff; min-width:0; }
body[data-page="admin"] .admin-order-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
body[data-page="admin"] .admin-order-head h3 { margin:.3rem 0 .15rem; color:var(--navy); font-size:1.1rem; }
body[data-page="admin"] .admin-order-head small { color:var(--muted-color); }
body[data-page="admin"] .admin-status-pill { flex-shrink:0; padding:.45rem .7rem; border-radius:999px; color:var(--teal); background:var(--mint); font-size:.7rem; font-weight:800; }
body[data-page="admin"] .admin-order-facts { margin-top:1rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
body[data-page="admin"] .admin-order-facts > div { padding:.9rem; min-width:0; display:grid; gap:.2rem; }
body[data-page="admin"] .admin-order-facts > div + div { border-left:1px solid var(--line); }
body[data-page="admin"] .admin-order-facts span,body[data-page="admin"] .admin-action-box > span { color:var(--muted-color); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
body[data-page="admin"] .admin-order-facts strong { color:var(--navy); overflow-wrap:anywhere; }
body[data-page="admin"] .admin-order-facts small,body[data-page="admin"] .admin-action-box small { color:var(--muted-color); font-size:.7rem; overflow-wrap:anywhere; }
body[data-page="admin"] .admin-order-actions { margin-top:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
body[data-page="admin"] .admin-action-box { min-width:0; padding:.85rem; display:grid; align-content:start; gap:.55rem; border-radius:14px; background:#fff; border:1px solid var(--line); }
body[data-page="admin"] .admin-workflow-box { grid-column:1 / -1; }
body[data-page="admin"] .admin-workflow-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; align-items:end; }
body[data-page="admin"] .admin-workflow-form label { min-width:0; display:grid; gap:.3rem; color:var(--muted-color); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
body[data-page="admin"] .admin-workflow-form input,body[data-page="admin"] .admin-workflow-form select,body[data-page="admin"] .admin-workflow-form textarea { width:100%; min-width:0; min-height:40px; padding:.55rem .65rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--navy); font:inherit; font-size:.78rem; font-weight:600; letter-spacing:0; text-transform:none; resize:vertical; }
body[data-page="admin"] .admin-workflow-form .workflow-next-action,body[data-page="admin"] .admin-workflow-form .workflow-note { grid-column:span 2; }
body[data-page="admin"] .admin-workflow-form .workflow-visible { display:flex; flex-direction:row; align-items:center; align-self:center; text-transform:none; letter-spacing:0; }
body[data-page="admin"] .admin-workflow-form .workflow-visible input { width:16px; min-height:16px; }
body[data-page="admin"] .admin-workflow-form button { min-height:40px; padding:.6rem .8rem; border:0; border-radius:9px; color:#fff; background:var(--teal); font-weight:800; cursor:pointer; }
body[data-page="admin"] .admin-order-statuses { display:grid; justify-items:end; gap:.35rem; }
body[data-page="admin"] .admin-payment-state { color:var(--muted-color); font-size:.65rem; font-weight:700; }
body[data-page="admin"] .admin-inline-form { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; }
body[data-page="admin"] .admin-inline-form select,body[data-page="admin"] .admin-inline-form input,.copy-link-row input { min-height:38px; padding:.5rem .6rem; border:1px solid var(--line); border-radius:9px; background:#fff; }
body[data-page="admin"] .admin-inline-form button,.copy-link-row button { min-height:36px; padding:.45rem .7rem; border:0; border-radius:9px; color:#fff; background:var(--teal); font-weight:800; cursor:pointer; }
.copy-link-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem; }
.copy-link-row input { min-width:0; width:100%; font-size:.7rem; }

@media (max-width:1100px) {
  .payment-layout { grid-template-columns:1fr; }
  .payment-form { position:static; max-width:620px; }
  body[data-page="admin"] .payment-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="admin"] .admin-order-actions { grid-template-columns:1fr 1fr; }
  body[data-page="admin"] .admin-action-box:last-child { grid-column:1 / -1; }
  body[data-page="admin"] .admin-order-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="admin"] .admin-order-facts > div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  body[data-page="admin"] .admin-order-facts > div:nth-child(4) { border-top:1px solid var(--line); }
  body[data-page="admin"] .admin-workflow-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:960px) {
  body[data-page="admin"] .app-shell { grid-template-columns:1fr; }
  body[data-page="admin"] .app-sidebar { padding:24px; }
  body[data-page="admin"] .sidebar-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
  .payment-section { padding:2rem 0 4rem; }
  .payment-copy h1 { font-size:3.2rem; }
  .payment-form,.payment-status-card { border-radius:18px; }
  .payment-form-head { align-items:center; }
  .checkout-summary { grid-template-columns:1fr; }
  .checkout-summary > div + div { border-left:0; border-top:1px solid var(--line); }
  .order-reference { align-items:flex-start; flex-wrap:wrap; }
  .order-status { margin-left:0; }
  .order-progress { grid-template-columns:1fr; gap:0; }
  .order-progress-step { min-height:46px; grid-template-columns:32px 1fr; align-items:start; justify-items:start; text-align:left; gap:.7rem; }
  .order-progress-step::after { top:32px; bottom:0; left:15px; width:2px; height:auto; }
  .order-progress-step strong { padding-top:.45rem; font-size:.72rem; }
  body[data-page="admin"] .payment-dashboard-grid { grid-template-columns:1fr; }
  body[data-page="admin"] .admin-order-facts,body[data-page="admin"] .admin-order-actions { grid-template-columns:1fr; }
  body[data-page="admin"] .admin-order-facts > div + div { border-left:0; border-top:1px solid var(--line); }
  body[data-page="admin"] .admin-action-box:last-child { grid-column:auto; }
  body[data-page="admin"] .admin-order-head { flex-direction:column; }
  body[data-page="admin"] .admin-order-statuses { justify-items:start; }
  body[data-page="admin"] .admin-workflow-form { grid-template-columns:1fr; }
  body[data-page="admin"] .admin-workflow-form .workflow-next-action,body[data-page="admin"] .admin-workflow-form .workflow-note { grid-column:auto; }
  body[data-page="admin"] .sidebar-nav { grid-template-columns:1fr; }
}