/*
 * ACG Digital Theme - Main Stylesheet
 * Source of truth: digital-pr-services-hifi.html & homepage-hifi.html
 */

:root {
  --navy:         #152A3A;
  --navy-deep:    #0D1B26;
  --navy-soft:    #33495A;
  --teal:         #1AA3A6;
  --teal-dark:    #138385;
  --teal-bright:  #2BD4C8;
  --teal-light:   #E3F6F4;
  --blue-bg:      #D9E9FB;
  --coral:        #FF6B57;
  --ink:          #1C2B33;
  --muted:        #5C7080;
  --line:         #E3E9ED;
  --bg:           #FFFFFF;
  --glow:         rgba(26, 163, 166, 0.35);
}

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

body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .brand {
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.18;
}

h1 { font-size: 46px; font-weight: 800; }
h2 { font-size: 34px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }

p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }

/* Global Wrapper - Standardized 1180px Max-Width with 24px Side Padding */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.section { padding: 84px 0; }
.section.tight { padding: 56px 0; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-dark);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.grad-text {
  background: linear-gradient(92deg, var(--teal) 0%, var(--teal-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.crumbs { font-size: 13px; color: var(--muted); padding: 18px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--teal-dark); }
.crumbs .sep { margin: 0 6px; color: #c7d2d8; }
.crumbs .here { color: var(--navy); font-weight: 600; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: .2s;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn:hover {
  background: var(--teal-dark);
  box-shadow: 0 14px 30px -10px var(--glow);
  transform: translateY(-2px);
  color: #fff;
}

.btn.lg { padding: 16px 28px; font-size: 16px; }
.btn.on-dark { background: var(--coral); }
.btn.on-dark:hover { background: #e8553f; box-shadow: 0 14px 30px -10px rgba(255,107,87,.4); }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--navy); box-shadow: none; transform: none; }
.btn.ghost-dark { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.btn.ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.14); box-shadow: none; transform: none; }
.btn.block { width: 100%; justify-content: center; }

/* Header & Topbar */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

body.admin-bar header { top: 32px; }

.topbar {
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar a { color: #7fe0e0; font-weight: 600; }
.topbar .tb-phone { color: #fff; font-weight: 700; margin-left: auto; text-decoration: none; }
.topbar .tb-phone:hover { color: #7fe0e0; }

.topbar .live { display: inline-flex; align-items: center; gap: 6px; color: #9fd9d8; }
.topbar .live .blip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3be07f;
  box-shadow: 0 0 0 3px rgba(59,224,127,.25);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59,224,127,.25); }
  50% { box-shadow: 0 0 0 6px rgba(59,224,127,.10); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
  gap: 14px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo .mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.navlinks .item {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.navlinks .item:hover,
.navlinks .item:focus-within { color: var(--teal-dark); }
.navlinks .item.active { color: var(--teal-dark); }
.navlinks .item .care { font-size: 10px; transition: .15s; }
.navlinks .item:hover .care { transform: rotate(180deg); }

.navcta {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mega Navigation Panels */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 60px -25px rgba(21,42,58,.28);
  padding: 24px 16px;
  display: none;
  z-index: 500;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
  margin-top: 0;
}

/* Invisible hover "bridge": keeps the dropdown open while the cursor travels
   from the nav item down into the panel, so it no longer vanishes in the gap. */
.mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 12px;
}

.mega-panel.cols-3-featured { grid-template-columns: repeat(3, 200px) 220px; width: 840px; gap: 0; }
.mega-panel.cols-3 { grid-template-columns: repeat(3, 200px) 220px; width: 840px; gap: 0; }
.mega-panel.cols-2 { grid-template-columns: repeat(2, 200px); width: 420px; gap: 0; }
.mega-panel.align-right { left: auto; right: 0; }
.mega-panel.align-center { left: 50%; transform: translateX(-35%); }

.navlinks .item:hover .mega-panel,
.navlinks .item:focus-within .mega-panel { display: grid; }
.navlinks:hover .item:not(:hover) .mega-panel { display: none; }

.mega-col { padding: 4px 18px; border-right: 1px solid var(--line); box-sizing: border-box; overflow: hidden; }
.mega-col:last-child { border-right: none; }
.mega-col h4 { font-family: 'Inter', Arial, sans-serif; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 14px; white-space: nowrap; }

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.mega-link:hover { color: var(--teal-dark); }
.mega-link .dot-sm { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-top: 6px; flex-shrink: 0; }

.mega-feature { background: var(--navy); border-radius: 10px; padding: 20px; color: #fff; margin-left: 14px; }
.mega-feature h4 { font-family: 'Inter', Arial, sans-serif; color: #8fe9e6; margin-bottom: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.mega-feature p { color: #C9D8E0; font-size: 13px; margin-bottom: 14px; line-height: 1.5; white-space: normal; }
.mega-feature .stat { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; color: #fff; display: block; margin-bottom: 4px; }

/* ============ HOMEPAGE HERO (Light Blue-White Gradient) ============ */
.hero {
  background: linear-gradient(160deg, var(--blue-bg) 0%, #EFF6FD 60%);
  position: relative;
  overflow: hidden;
}
.hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
  background: var(--teal);
  width: 420px; height: 420px;
  top: -180px; right: -120px;
}
.hero .blob.b2 {
  background: var(--coral);
  width: 300px; height: 300px;
  bottom: -140px; left: -80px;
  opacity: .18;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
  padding: 70px 0 50px;
  position: relative;
  z-index: 1;
}
.hero h1 { font-size: 48px; }
.hero h1 .hl { color: var(--teal-dark); }
.hero .lede { font-size: 18px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero-proof .p-item { font-size: 13px; color: var(--navy-soft); font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* AI Engine Badges Row */
.ai-badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy-soft);
  box-shadow: 0 6px 16px -10px rgba(21,42,58,.18);
}
.ai-badge .swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Compare Card Widget (Search Comparison Mock) */
.compare-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(21,42,58,.25);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.mini-browser { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mini-browser .bar { background: #F3F5F7; padding: 8px 12px; display: flex; gap: 6px; align-items: center; }
.mini-browser .bar span { width: 8px; height: 8px; border-radius: 50%; background: #D7DDE2; }
.mini-browser .body { padding: 14px; font-size: 12.5px; }
.g-result { padding: 6px 0; }
.g-result .url { color: #1a5e2f; font-size: 11.5px; }
.g-result .title { color: #1558d6; font-size: 14px; margin: 2px 0; font-weight: 600; }
.g-result.you { background: var(--teal-light); border-radius: 6px; padding: 8px; margin: 0 -8px; }
.chat-bubble { background: var(--navy); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; }
.chat-bubble b { color: #8fe9e6; }
.badge-pill { display: inline-block; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .03em; }

/* Trust Bar (Homepage Version) */
.trust-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 0; }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--navy); text-decoration: none; }
.trust-item:hover { color: var(--teal-dark); }
.trust-item .t-stars { color: #FFB400; font-size: 12px; letter-spacing: 1px; }
.trust-item .t-logo { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; }
.trust-item .t-logo.green { color: #00B67A; }
.trust-item .t-logo.gblu { color: #4285F4; }
.trust-sep { width: 1px; height: 22px; background: var(--line); }
.guarantee-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--teal-light); color: var(--teal-dark); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; }

/* Stat Strip (Homepage Dark Blue Band) */
.stat-strip { background: radial-gradient(ellipse at top, #1d3b4d 0%, var(--navy) 65%); position: relative; overflow: hidden; }
.stat-strip .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
.stat-item { text-align: center; padding: 34px 10px; }
.stat-item .num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 34px; color: #fff; display: block; }
.stat-item .num .accent { color: #8fe9e6; }
.stat-item .lbl { font-size: 13px; color: #9fb3bf; margin-top: 6px; }

/* Logos Wall Strip (Exact homepage-hifi.html Styling) */
.logos-strip { padding: 46px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos-lead { text-align: center; margin: 0 0 28px; font-weight: 600; color: var(--navy-soft); font-size: 14.5px; }
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px 16px; }
.logo-chip { display: flex; align-items: center; gap: 10px; transition: .15s; cursor: pointer; }
.logo-chip .mono { width: 36px; height: 36px; border-radius: 9px; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .01em; }
.logo-chip .lname { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: var(--navy-soft); line-height: 1.2; }
.logo-chip:hover { transform: translateY(-1px); }
.logo-chip:hover .lname { color: var(--navy); }

/* Old vs New Reality */
.compare-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.compare-box { border-radius: 14px; padding: 30px; }
.compare-box.old { background: #F4F6F7; border: 1px solid var(--line); }
.compare-box.new { background: var(--navy); color: #fff; }
.compare-box.new h3, .compare-box.new p { color: #fff !important; }
.compare-box ul { padding-left: 0; margin: 0; list-style: none; }
.compare-box li { margin-bottom: 12px; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.compare-box.new li { color: #C9D8E0; }
.compare-box .x { color: #C0473A; flex-shrink: 0; font-weight: bold; }
.compare-box .ok { color: #8fe9e6; flex-shrink: 0; font-weight: bold; }

/* The ACG Method (Exact Ditto Wireframe Dimensions & Height) */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.method-card { border-radius: 16px; padding: 26px 24px; position: relative; overflow: hidden; }
.method-card.m1 { background: var(--teal-light); }
.method-card.m2 { background: var(--blue-bg); }
.method-card.m3 { background: #FFE9E4; }
.method-letter { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 42px; color: rgba(21,42,58,.10); position: absolute; top: 14px; right: 18px; line-height: 1; }
.method-card h3 { font-size: 20px; margin-bottom: 12px; }
.method-card ul { list-style: none; padding: 0; margin: 0; }
.method-card ul li { font-size: 14px; color: var(--navy-soft); margin-bottom: 8px; padding-left: 18px; position: relative; line-height: 1.45; }
.method-card ul li:last-child { margin-bottom: 0; }
.method-card ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-dark); }

/* Spotlight & AI Chat Bubble (Exact homepage-hifi.html line 191 styling) */
.spotlight { background: radial-gradient(circle at 20% 20%, #1d3b4d 0%, var(--navy) 55%); color: #fff; border-radius: 24px; padding: 60px; position: relative; overflow: hidden; }
.spotlight::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.spotlight h2 { color: #ffffff !important; }
.spotlight p { color: #C9D8E0 !important; }

.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 26px; }
.pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 12.5px; font-weight: 600; color: #cdeceb; padding: 7px 14px; border-radius: 20px; }

/* Process Section (Connecting Horizontal Line - homepage-hifi.html line 199) */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; position: relative; }
.process::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 2px; background: var(--line); z-index: 0; }
.p-step { position: relative; z-index: 1; text-align: center; padding: 0 14px; }
.p-num { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 17px; border: 5px solid #fff; }

/* Featured Case Study (Exact homepage-hifi.html line 204 styling) */
.featured-case { background: linear-gradient(120deg,var(--navy) 0%,#0E5C5E 100%); border-radius: 20px; padding: 46px; color: #fff; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; margin-top: 36px; margin-bottom: 32px; position: relative; overflow: hidden; }
.featured-case::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.featured-case h3 { color: #ffffff !important; font-size: 24px; margin-bottom: 12px; }
.featured-case p { color: #C9D8E0 !important; line-height: 1.6; }
.featured-case .big-stat { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 52px; color: #8fe9e6; line-height: 1; display: block; }
.featured-case .big-stat-lbl { font-size: 13px; color: #C9D8E0; margin-top: 6px; }

/* Case Study Cards (Exact homepage-hifi.html line 214 styling) */
.cs-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.cs-top { height: 120px; display: flex; align-items: flex-end; padding: 16px; color: #fff; }
.cs-top.cs1 { background: linear-gradient(135deg,#1AA3A6,#0D6E70); }
.cs-top.cs2 { background: linear-gradient(135deg,#33495A,#152A3A); }
.cs-top.cs3 { background: linear-gradient(135deg,#FF8A6E,#FF6B57); }
.cs-stat { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; color: #fff; }
.cs-body { padding: 20px; background: #fff; }
.cs-body h3 { font-size: 16px; margin-bottom: 6px; color: var(--navy); }
.cs-body p { font-size: 13.5px; margin-bottom: 8px; color: var(--muted); }

/* Icons & Cards Grid */
.icon { width: 46px; height: 46px; border-radius: 10px; background: var(--teal-light); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.icon svg { width: 24px; height: 24px; stroke: var(--teal-dark); fill: none; stroke-width: 1.8; }
.icon.dark { background: rgba(255,255,255,.12); }
.icon.dark svg { stroke: #8fe9e6; }
.icon.coral { background: #FFE9E4; }
.icon.coral svg { stroke: var(--coral); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; transition: .15s; position: relative; }
.card:hover { box-shadow: 0 18px 40px -22px rgba(21,42,58,.22); transform: translateY(-2px); border-color: #cfe6e6; }

/* Link styling inside cards and case studies (Teal Dark Link) */
a.link, .card .link, .cs-body .link {
  color: var(--teal-dark) !important;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  text-decoration: none;
}
a.link:hover, .card .link:hover, .cs-body .link:hover {
  color: var(--teal) !important;
}

.card .tag { position: absolute; top: 18px; right: 18px; background: var(--teal-light); color: var(--teal-dark); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .03em; }

/* Industry Grid (Exact homepage-hifi.html line 223 styling - Clean background with border) */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.ind-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
  display: block;
  transition: .15s;
}

.ind-item:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  box-shadow: 0 8px 20px -10px rgba(26,163,166,.3);
  transform: translateY(-1px);
}

/* Testimonials */
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 15px; flex-shrink: 0; }
.t-head { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.t-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.t-role { font-size: 12.5px; color: var(--muted); }
.stars { color: #FFB400; font-size: 14px; margin-bottom: 10px; }

/* ICP Qualifier Section */
.icp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.icp-card { border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: #fff; }
.icp-card .icp-icon { font-size: 26px; margin-bottom: 12px; }
.icp-card h3 { font-size: 16px; margin-bottom: 6px; color: var(--navy); }
.icp-card.not { opacity: .72; border-color: #E2E8ED; }
.icp-card.not h3 { color: var(--navy-soft); }
.icp-card.not p { color: var(--muted); }
.icp-check { color: var(--teal-dark); font-size: 13px; font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.icp-x { color: #c84632; font-size: 13.5px; font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 6px; }

/* Final CTA Banner (Exact homepage-hifi.html line 288 styling) */
.final-cta { background: linear-gradient(120deg,var(--navy),#0E5C5E); border-radius: 24px; padding: 60px; color: #fff; text-align: center; }
.final-cta h2 { color: #ffffff !important; }
.final-cta p { color: #C9D8E0 !important; }

/* Trust Strip (Sub-pages Version) */
.trust-strip { border-bottom: 1px solid var(--line); background: #fff; padding: 22px 0; }
.trust-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.trust-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand-pill { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: #8ba0ac; letter-spacing: .02em; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 0 auto; transition: .2s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Footer & Social Icons (Exact homepage-hifi.html lines 293-303) */
footer { background: #10202C; color: #9FB3BF; padding: 60px 0 0; }
.f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; }
.f-grid h3 { color: #fff !important; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }
.f-grid a { display: block; color: #9FB3BF; font-size: 13.5px; margin-bottom: 10px; }
.f-grid a:hover { color: #fff; }

.f-social { display: flex; gap: 10px; margin-top: 16px; }
.f-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  text-decoration: none;
}
.f-social a:hover { background: var(--teal); transform: translateY(-2px); }
.f-social svg {
  width: 16px; height: 16px;
  fill: #9FB3BF;
  transition: .2s;
}
.f-social a:hover svg { fill: #ffffff; }

.f-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 34px; padding-top: 28px; border-top: 1px solid #1c2e3a; }
.f-badge { font-size: 11.5px; font-weight: 700; color: #7c919c; border: 1px solid #243440; border-radius: 20px; padding: 6px 14px; }
.f-bottom { border-top: 1px solid #243440; margin-top: 24px; padding: 20px 0 24px; display: flex; justify-content: space-between; font-size: 12.5px; flex-wrap: wrap; gap: 10px; }

.quote-pill {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 16px 40px -12px rgba(13,27,38,.5);
  opacity: 0;
  transform: translateY(16px);
  transition: .35s;
  pointer-events: none;
}
.quote-pill.show { opacity: 1; transform: none; pointer-events: auto; }
.quote-pill:hover { background: var(--teal-dark); }

/* Animations */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;} *{animation:none!important;}}

/* Media Queries */
@media(max-width:1150px){
  .navlinks { gap: 14px; font-size: 13.5px; }
  .logo-text { font-size: 13px; }
  .btn { padding: 10px 18px; font-size: 13.5px; }
}
@media(max-width:980px){
  .mega-panel.cols-3, .mega-panel.cols-3-featured, .mega-panel.cols-2 { width: 280px; grid-template-columns: 1fr; }
  .mega-col { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
  .hero-grid { grid-template-columns: 1fr; }
  .stat-strip .grid-4 { grid-template-columns: 1fr 1fr; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .grid-3, .method-grid, .icp-grid, .process { grid-template-columns: 1fr; }
  .process::before { display: none; }
  .featured-case { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:900px){
  /* Layout collapses to a single column */
  .grid-2, .grid-3, .grid-4, .f-grid, .compare-2col, .method-grid, .icp-grid, .process, .featured-case, .hero-grid { grid-template-columns: 1fr; }
  .process::before { display: none; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }

  /* Mobile navigation — tap-to-open accordion (ported from homepage-hifi.html) */
  .hamburger { display: flex; order: 2; }
  .nav { flex-wrap: wrap; }
  .navcta { display: none; }
  .navlinks {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
  header.nav-open .navlinks { display: flex; }
  .navlinks .item {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    font-weight: 600;
  }
  .navlinks .item .care { margin-left: auto; }
  .navlinks .item > a { color: var(--navy) !important; }
  /* Mega panels become tap-to-open accordions on mobile */
  .mega-panel,
  .navlinks .item:hover .mega-panel,
  .navlinks .item:focus-within .mega-panel {
    position: static;
    display: none !important;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 6px 0 4px;
    width: auto !important;
    max-width: 100% !important;
  }
  .navlinks .item.open .mega-panel { display: block !important; }
  .mega-panel.cols-2, .mega-panel.cols-3, .mega-panel.cols-3-featured { width: auto !important; grid-template-columns: 1fr; }
  .mega-feature { margin-top: 10px; }
  .mega-panel::before { display: none; } /* no hover bridge needed on tap accordions */
}
@media(max-width:600px){
  .logo-wall { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .f-grid { grid-template-columns: 1fr; }
}

/* ============ V2 — dark-hero SUB-PAGE component library ============
 * These classes style the dark-hero sub-pages (e.g. digital-pr, tech-seo).
 * IMPORTANT: generic components (.card, .icon, .grid, .reveal, .trust-strip,
 * .quote-pill, footer, .f-social, .final-cta) are defined ONCE above. Do not
 * re-declare them here — an appended duplicate silently overrode the homepage's
 * canonical styling (it is what made the footer social icons render invisible).
 * ================================================================== */
.hero-dark{background:radial-gradient(1200px 600px at 80% -10%,rgba(26,163,166,.28),transparent 60%),radial-gradient(900px 500px at 5% 110%,rgba(43,212,200,.16),transparent 55%),linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 70%);color:#fff;position:relative;overflow:hidden;}
.hero-dark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(900px 500px at 60% 30%,#000 30%,transparent 75%);pointer-events:none;}
.hero-dark .crumbs,.hero-dark .crumbs a{color:#8fa5b3;}
.hero-dark .crumbs .here{color:#fff;}
.hero-dark h1{color:#fff;font-size:50px;letter-spacing:-.5px;}
.hero-dark .lede{color:#C9D8E0;font-size:18px;max-width:720px;}
/* Dark-hero layout overrides — SCOPED to .hero-dark so they don't leak onto the light homepage hero */
.hero-dark .hero-grid{grid-template-columns:1.25fr .9fr;padding:56px 0 64px;}
.hero-dark .hero-actions{margin-top:14px;}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hstat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;backdrop-filter:blur(6px);transition:.25s;}
.hstat:hover{transform:translateY(-4px);border-color:rgba(43,212,200,.45);}
.hstat b{font-family:'Poppins',sans-serif;font-size:28px;color:#fff;display:block;}
.hstat span{font-size:12.5px;color:#9fb8c4;line-height:1.45;display:block;margin-top:4px;}
.hstat .up{color:var(--teal-bright);font-size:12px;font-weight:700;}

/* pain cards */
.pain-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:14px;padding:24px;transition:.25s;}
.pain-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.pain-card .q{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--navy);font-style:italic;margin-bottom:10px;display:block;}
.pain-card p{margin-bottom:0;font-size:13.5px;}

.factor-list{display:flex;flex-direction:column;gap:14px;margin-top:30px;}
.factor-item{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;}
.factor-item .fnum{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;color:var(--teal-light);background:var(--navy);width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.factor-item h3{font-size:16px;margin-bottom:4px;} .factor-item p{margin-bottom:0;font-size:14px;}

/* 12-step process */
.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;counter-reset:step;}
.step-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;position:relative;transition:.25s;overflow:hidden;}
.step-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.25);border-color:#cfe6e6;}
.step-card::after{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;right:16px;top:6px;font-family:'Poppins',sans-serif;font-weight:800;font-size:52px;color:rgba(26,163,166,.10);line-height:1;}
/* When a template supplies its own editable number (.step-num), suppress the
   CSS counter so the two don't overlap; the counter stays as the default for
   any not-yet-templated page. */
.step-card.has-num::after{content:none;}
.step-num{position:absolute;right:16px;top:6px;font-family:'Poppins',sans-serif;font-weight:800;font-size:52px;color:rgba(26,163,166,.10);line-height:1;}
/* Comparison table (Enterprise vs Managed) — used on page-enterprise-seo. */
.compare-table{width:100%;border-collapse:collapse;margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.compare-table th{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-align:left;padding:12px 14px;}
.compare-table td{padding:11px 14px;border-bottom:1px solid #F1F4F6;font-size:13.5px;color:var(--ink);vertical-align:top;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table td:first-child{color:var(--muted);white-space:nowrap;}
/* ===== Local SEO page components. The wireframe reuses generic names
   (.hero, .stat-strip, .process, .p-step, .p-num) that already mean something
   ELSE in this theme (homepage hero / dark stat band / timeline process), so
   the page-specific versions are namespaced under .lsp-* to avoid collisions.
   .tag-grid/.tag-pill/.pricing-card/.price were unused, so they're global. */
.lsp-hero{background:linear-gradient(180deg,var(--teal-light) 0%, #fff 100%);position:relative;overflow:hidden;}
.lsp-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(21,42,58,.05) 1px, transparent 1px);background-size:22px 22px;opacity:.6;pointer-events:none;}
.lsp-hero .hero-inner{position:relative;z-index:1;padding:48px 0 56px;max-width:740px;}
.lsp-hero .lede{font-size:17.5px;}
.lsp-stats{display:flex;gap:36px;margin-top:34px;flex-wrap:wrap;position:relative;z-index:1;}
.lsp-stats .s{display:flex;flex-direction:column;}
.lsp-stats .s b{font-family:'Poppins',sans-serif;font-size:24px;color:var(--navy);}
.lsp-stats .s span{font-size:12.5px;color:var(--muted);}
.lsp-process{display:flex;gap:18px;margin-top:36px;}
.lsp-pstep{flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;position:relative;}
.lsp-pnum{font-family:'Poppins',sans-serif;font-weight:800;font-size:30px;color:var(--teal-light);margin-bottom:10px;}
.tag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.tag-pill{background:var(--teal-light);color:var(--teal-dark);text-align:center;font-size:13px;font-weight:600;padding:12px;border-radius:8px;}
.pricing-card{background:var(--navy);border-radius:20px;padding:42px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.pricing-card h2{color:#fff;margin-bottom:8px;}
.pricing-card p{color:#C9D8E0;margin-bottom:0;max-width:480px;}
.pricing-card .price{font-family:'Poppins',sans-serif;font-size:34px;font-weight:800;color:#8fe9e6;}
@media(max-width:900px){.lsp-process{flex-direction:column;}.tag-grid{grid-template-columns:1fr 1fr;}.pricing-card{flex-direction:column;text-align:center;}}
/* ===== Free Audit / lead-capture components. Light hero + light stat strip are
   namespaced .fa-* so they don't collide with the homepage's .hero / .stat-strip
   (dark). Report-mock children are scoped under .report-mock. Form styles are
   generic and shared with the contact page. ===== */
.fa-hero{background:linear-gradient(180deg,var(--teal-light) 0%, #fff 100%);position:relative;overflow:hidden;}
.fa-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle, rgba(21,42,58,.05) 1px, transparent 1px);background-size:22px 22px;opacity:.6;pointer-events:none;}
.fa-hero .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;padding:50px 0 60px;position:relative;z-index:1;}
.fa-hero .lede{font-size:17.5px;max-width:520px;}
.fa-badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.fa-badge{background:rgba(21,42,58,.06);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--navy-soft);padding:8px 15px;border-radius:20px;}
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 30px 60px -30px rgba(21,42,58,.25);}
.form-card h3{font-size:20px;}
.form-card .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-soft);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:14.5px;font-family:'Inter',sans-serif;color:var(--ink);background:#FAFBFC;}
.field textarea{resize:vertical;min-height:100px;}
.field input::placeholder,.field textarea::placeholder{color:#9aacb5;}
.field .opt{color:#9aacb5;font-weight:500;}
.form-note{font-size:11.5px;color:#9aacb5;margin-top:10px;text-align:center;}
.report-mock{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 30px 70px -35px rgba(21,42,58,.3);}
.report-mock .bar{background:var(--navy);color:#fff;padding:14px 22px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.report-mock .bar .dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);margin-left:5px;}
.report-mock .body{padding:30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.report-mock .score{background:var(--teal-light);border-radius:12px;padding:20px;text-align:center;}
.report-mock .score b{font-family:'Poppins',sans-serif;font-size:30px;color:var(--teal-dark);display:block;}
.report-mock .score span{font-size:12px;color:var(--navy-soft);font-weight:600;}
.report-mock .row{grid-column:1/-1;background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--navy-soft);font-weight:600;}
.report-mock .row .flag{background:#FFE9E4;color:var(--coral);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.report-mock .row .ok{background:var(--teal-light);color:var(--teal-dark);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.fa-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fa-stats .s{text-align:center;border:1px solid var(--line);border-radius:14px;padding:28px 16px;background:#fff;}
.fa-stats .s b{display:block;font-family:'Poppins',sans-serif;font-size:32px;font-weight:800;color:var(--teal-dark);}
.fa-stats .s span{font-size:13px;color:var(--muted);}
.final-cta .field{max-width:380px;margin:0 auto 14px;}
.final-cta .field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
.final-cta .field input::placeholder{color:rgba(255,255,255,.55);}
@media(max-width:900px){.fa-hero .hero-grid,.fa-stats,.report-mock .body{grid-template-columns:1fr;}}
/* ===== AI Visibility Checker tool. Checker-card form (light + dark-glass
   variant used in the hero) and the NAVY result report, namespaced .vc-report
   so it doesn't collide with Free Audit's white .report-mock. ===== */
.checker-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 30px 60px -30px rgba(21,42,58,.25);}
.checker-card .field{margin-bottom:14px;}
.checker-card label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.checker-card input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:14.5px;font-family:'Inter',sans-serif;color:var(--ink);}
.checker-card .platforms{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px;}
.plat-chip{background:var(--teal-light);color:var(--teal-dark);font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;}
.checker-card.on-dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);}
.checker-card.on-dark .form-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:#fff;margin:0 0 16px;}
.checker-card.on-dark label{color:#C9D8E0;}
.checker-card.on-dark input{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);color:#fff;}
.checker-card.on-dark input::placeholder{color:#8fa5b3;}
.checker-card.on-dark input:focus{outline:none;border-color:var(--teal-bright);}
.checker-card.on-dark .plat-chip{background:rgba(43,212,200,.14);color:var(--teal-bright);border:1px solid rgba(43,212,200,.35);}
.checker-card.on-dark .micro{font-size:11.5px;color:#9fb8c4;margin:10px 0 0;text-align:center;}
.vc-report{background:var(--navy);border-radius:14px;padding:22px;color:#fff;margin-top:18px;}
.vc-report .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.vc-report .rh b{font-family:'Poppins',sans-serif;font-size:15px;}
.vc-report .report-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;}
.vc-report .report-row:last-child{border-bottom:none;}
.vc-report .report-row .score{font-family:'Poppins',sans-serif;font-weight:800;color:#8fe9e6;}
.score-big{display:flex;align-items:center;gap:18px;background:var(--teal-light);border-radius:14px;padding:22px;margin-top:18px;}
.score-big .num{font-family:'Poppins',sans-serif;font-size:42px;font-weight:800;color:var(--teal-dark);}
/* Checker page: its hero right column is a FORM, so the wireframe widens it to
   1.15fr 1fr (vs the service pages' 1.25fr .9fr). Scoped to #checker so only
   this page changes; the ID keeps it above the generic .hero-dark .hero-grid. */
#checker .hero-grid{grid-template-columns:1.15fr 1fr;gap:48px;}
/* ===== Scroll-reveal animation (matches the wireframes). theme.js already runs
   an IntersectionObserver that adds .in to every .reveal when it scrolls into
   view; this is the CSS half. Elements marked "reveal in" render visible from
   the start (hero); elements marked only "reveal" fade up on scroll. ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
.step-card h3{font-size:16.5px;margin-bottom:8px;position:relative;z-index:1;}
.step-card p{font-size:14px;margin-bottom:0;position:relative;z-index:1;}

/* case study band */
.cs-band{background:linear-gradient(140deg,var(--navy-deep),#0E4B4D);border-radius:24px;padding:52px;color:#fff;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;position:relative;overflow:hidden;}
.cs-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(600px 400px at 85% 20%,#000 20%,transparent 70%);pointer-events:none;}
.cs-band h3{color:#fff;font-size:26px;}
.cs-band p{color:#C9D8E0;}
.cs-band .big{font-family:'Poppins',sans-serif;font-size:72px;font-weight:800;color:var(--teal-bright);line-height:1;display:block;text-align:center;}
.cs-band .big-lbl{font-size:13.5px;color:#9fb8c4;text-align:center;display:block;margin-top:8px;}
.cs-mini{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;}
.cs-mini .card .stat{font-family:'Poppins',sans-serif;font-size:34px;font-weight:800;color:var(--teal-dark);display:block;margin-bottom:6px;}

/* tiers — quote-driven */
.tier-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:38px;}
.tier-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:32px;display:flex;flex-direction:column;transition:.25s;position:relative;}
.tier-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.tier-card.featured{border-color:var(--teal);box-shadow:0 22px 50px -25px var(--glow);}
.tier-card.featured::before{content:"Most Popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;}
/* When a template supplies its own editable badge element, it adds .has-badge
   to suppress the CSS-generated label above (so the two never double up). */
.tier-card.featured.has-badge::before{content:none;}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;white-space:nowrap;}
.tier-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;color:var(--navy);}
.tier-for{font-size:13px;color:var(--muted);margin:4px 0 18px;}
.tier-scope{display:flex;flex-direction:column;gap:0;border-top:1px solid #F1F4F6;margin-bottom:18px;}
.tier-scope .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F1F4F6;font-size:13.5px;}
.tier-scope .row span{color:var(--muted);} .tier-scope .row b{color:var(--navy);}
.tier-card ul{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;}
.tier-card li{font-size:13.5px;color:var(--ink);padding-left:22px;position:relative;}
.tier-card li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--teal-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138385' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center;}
.tier-card .btn{margin-top:auto;justify-content:center;}

/* deliverables table */
.deliv-wrap{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:16px;}
.deliv{width:100%;border-collapse:collapse;background:#fff;min-width:720px;}
.deliv th{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;text-align:left;padding:16px 18px;}
.deliv th.c{text-align:center;width:110px;}
.deliv td{padding:13px 18px;border-bottom:1px solid #F1F4F6;font-size:13.5px;color:var(--ink);}
.deliv td.c{text-align:center;}
.deliv tr.cat td{background:var(--teal-light);color:var(--teal-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;padding:10px 18px;}
.deliv .yes{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--teal-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138385' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center;}
.deliv .no{color:#c7d2d8;font-weight:700;}
.deliv td small{display:block;color:var(--muted);font-size:12px;margin-top:2px;}

.not-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.not-item{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink);}
.not-item svg{width:18px;height:18px;stroke:var(--coral);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px;}

.faq-list{max-width:820px;margin:34px auto 0;}
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;}
.faq-item summary{padding:18px 22px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:15px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .care{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.2s;}
.faq-item[open] summary .care{transform:rotate(45deg);}
.faq-item .a{padding:0 22px 20px;font-size:14.5px;color:var(--muted);}

.dev-note{background:#FFF8E6;border:1px dashed #E0B23A;border-radius:10px;padding:14px 18px;font-size:12.5px;color:#7a5a14;margin-top:18px;}

/* Sub-page responsive (homepage + mobile-nav responsive lives in the media block above) */
@media(max-width:900px){
  .tier-grid, .steps-grid, .cs-band, .cs-mini, .factor-item, .track-grid, .guarantee .inner { grid-template-columns: 1fr; }
  .hero-dark .hero-grid { grid-template-columns: 1fr; }
  .hero-dark h1 { font-size: 36px; }
  .cs-band { padding: 34px; }
  .final-cta { padding: 40px 26px; }
  .guarantee { padding: 34px; }
}

/* ===== Agency Partner Program (agency-partner-program) — two-track cards,
   the non-solicitation guarantee band, and the .who persona label on that
   page's pain-cards. Scoped names; reuse everything else from the new-gen set. */
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px;}
.track-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;transition:.25s;position:relative;}
.track-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.track-card.wl{border-color:var(--teal);box-shadow:0 22px 50px -25px var(--glow);}
.track-tag{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dark);background:var(--teal-light);border-radius:20px;padding:5px 12px;margin-bottom:14px;}
.track-card h3{font-size:22px;}
.track-card ul{display:flex;flex-direction:column;gap:9px;margin:14px 0 24px;}
.track-card li{font-size:13.5px;color:var(--ink);padding-left:22px;position:relative;}
.track-card li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--teal-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138385' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center;}
.track-card .btn{margin-top:auto;justify-content:center;}
.pain-card .who{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dark);background:var(--teal-light);border-radius:20px;padding:3px 10px;margin-bottom:10px;}
.guarantee{background:linear-gradient(140deg,var(--navy-deep),var(--navy));border-radius:24px;padding:52px;color:#fff;position:relative;overflow:hidden;}
.guarantee::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(600px 400px at 15% 20%,#000 20%,transparent 70%);}
.guarantee h2{color:#fff;} .guarantee p{color:#C9D8E0;}
.guarantee .inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;}
.g-list{display:flex;flex-direction:column;gap:14px;}
.g-item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;font-size:14px;color:#E7F0F4;line-height:1.55;}
.g-item svg{width:20px;height:20px;stroke:var(--teal-bright);fill:none;stroke-width:2;flex-shrink:0;margin-top:1px;}
/* The two-track "how it works" table reuses .deliv but holds real text, not
   yes/no marks — so its columns need balanced, readable widths instead of the
   narrow 110px mark columns. Scoped modifier; the yes/no deliverables matrices
   are untouched. */
.deliv.tracks-compare{table-layout:fixed;}
.deliv.tracks-compare th.c{width:33%;text-align:left;}
.deliv.tracks-compare td.c{text-align:left;}

/* ===== Case Studies index (case-studies) — hero filter bar + case-study
   cards. The card is namespaced .csi-card because the homepage's simpler
   .cs-card (.cs-top/.cs-body) is a different component; do not merge them.
   .filter-* are unique. Reuses .cs-band, .compare-table, .final-cta. */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1;padding:0 0 46px;}
.filter-pill{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);font-size:13.5px;font-weight:600;color:#C9D8E0;padding:9px 18px;border-radius:20px;cursor:pointer;transition:.2s;}
.filter-pill.active{background:var(--teal-bright);border-color:var(--teal-bright);color:var(--navy-deep);}
.filter-pill:hover{border-color:var(--teal-bright);color:#fff;}
.filter-pill.active:hover{color:var(--navy-deep);}
.csi-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.csi-card:hover{box-shadow:0 22px 48px -24px rgba(21,42,58,.25);transform:translateY(-4px);border-color:#cfe6e6;}
.csi-card .top{background:linear-gradient(135deg,var(--teal-light),#F0FAF9);padding:26px 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);}
.csi-card .top .vert{font-size:11px;font-weight:700;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.03em;background:#fff;padding:4px 11px;border-radius:20px;white-space:nowrap;}
.csi-card .top .big-stat{font-family:'Poppins',sans-serif;font-weight:800;font-size:38px;color:var(--navy);line-height:1;}
.csi-card .body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;}
.csi-card h3{font-size:17px;margin-bottom:8px;}
.csi-card p{font-size:13.5px;margin-bottom:14px;flex:1;}
.csi-card .link{color:var(--teal-dark);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:5px;}
.csi-card .link:hover{color:var(--teal);}

/* ===== Pricing (/pricing/) — older-gen light page. Reuses .smm-hero (teal),
   .tier-grid/.tier-card/.featured shell + .tier-badge, and .final-cta. Adds the
   big .tprice; restores the wireframe's divider + stroke-check list style on the
   pricing tiers ONLY (scoped under .pr-tiers, so the global ::before-circle tier
   lists on the SEO pages are untouched); and a .price-table for the a-la-carte
   table (the global .compare-table nowraps its first column — wrong for the long
   service names here). ===== */
.tprice{font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;color:var(--navy);margin:6px 0 14px;}
.tprice span{font-size:13px;font-weight:500;color:var(--muted);}
.pr-tiers .tier-card li{padding:7px 0;padding-left:0;border-bottom:1px solid #F1F4F6;display:flex;gap:8px;align-items:flex-start;}
.pr-tiers .tier-card li:last-child{border-bottom:none;}
.pr-tiers .tier-card li::before{content:none;}
.pr-tiers .tier-card li svg{width:15px;height:15px;stroke:var(--teal-dark);fill:none;stroke-width:2;margin-top:2px;flex-shrink:0;}
.price-table{width:100%;border-collapse:collapse;margin-top:34px;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.price-table th,.price-table td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);}
.price-table th{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;}
.price-table td:first-child{font-weight:600;color:var(--navy);}
.price-table tr:last-child td{border-bottom:none;}
.price-table td.price{color:var(--teal-dark);font-weight:700;}

/* ===== Contact (/contact/) — older-gen light page. Reuses .smm-hero, the global
   form styles (.form-card/.field/.field-row/.form-note/.btn.block) and .grid-3/
   .card/.icon. Adds the 2-col split, the navy info panel, and the map placeholder. ===== */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
.info-card{background:var(--navy);border-radius:16px;padding:32px;color:#fff;}
.info-card h3{color:#fff;}
.info-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.info-row .ic{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-row .ic svg{width:18px;height:18px;stroke:#8fe9e6;fill:none;stroke-width:1.8;}
.info-row .t{font-size:13px;color:#9FB3BF;margin-bottom:2px;}
.info-row .v{font-size:14.5px;color:#fff;font-weight:600;}
.info-card .f-social{display:flex;gap:10px;margin-top:24px;}
.info-card .f-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.info-card .f-social svg{width:16px;height:16px;fill:#fff;}
.map-ph{height:220px;border-radius:14px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;color:var(--teal-dark);font-weight:600;font-size:13.5px;margin-top:22px;}

/* ===== SEO Services hub (/seo-services/) — older-gen light hub page. Reuses
   .smm-hero, .hero-grid, .process/.p-num, .featured-case/.big-stat, .card/.icon/
   .card .tag, .faq-list, .final-cta, .logos-strip. Adds the compact hero stat
   card (.svc-stats — the global .stat-strip is the homepage's full-bleed band),
   a LIGHT hero pill (.svc-pill/.svc-pill-row — the global .pill is a dark-hero
   pill), the logo wordmark row (.logos-row/.l), the industries badge row, and
   the pricing teaser (.price-card). ===== */
.svc-stats{background:var(--navy);border-radius:18px;padding:34px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:1;}
.svc-stats .s{text-align:center;color:#fff;}
.svc-stats .s b{display:block;font-family:'Poppins',sans-serif;font-size:30px;font-weight:800;color:#8fe9e6;}
.svc-stats .s span{font-size:12.5px;color:#C9D8E0;}
.svc-pill-row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0;}
.svc-pill{background:rgba(21,42,58,.06);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--navy-soft);padding:7px 14px;border-radius:20px;}
.logos-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;margin-top:18px;opacity:.7;}
.logos-row .l{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--navy-soft);letter-spacing:.02em;}
.badge-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;}
.badge{background:#fff;border:1px solid var(--line);border-radius:30px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--navy-soft);}
.badge:hover{border-color:var(--teal);color:var(--teal-dark);}
.price-card{background:var(--blue-bg);border-radius:20px;padding:50px;text-align:center;}
.price-card h2{margin-bottom:10px;}
.price-card p{max-width:560px;margin:0 auto 22px;}
.price-card .from{font-family:'Poppins',sans-serif;font-weight:800;font-size:32px;color:var(--navy);margin:0 0 4px;}
.price-card .from span{font-size:15px;font-weight:600;color:var(--muted);}

/* ===== About Us (/about-us/) — new-gen hero-dark. Reuses hero-dark, trust-strip,
   cs-band/cs-mini, factor-list, faq-list, badge-row, card/icon, grad-text. Adds the
   story timeline, team cards, value cards, and certification badge cards. ===== */
.timeline{max-width:820px;margin:36px auto 0;position:relative;padding-left:34px;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--teal),var(--teal-light));}
.t-item{position:relative;padding:0 0 34px;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{content:"";position:absolute;left:-31px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--teal);}
.t-item .t-year{font-family:'Poppins',sans-serif;font-weight:800;font-size:14px;color:var(--teal-dark);letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:6px;}
.t-item h3{font-size:17px;margin-bottom:6px;}
.t-item p{font-size:14.5px;margin-bottom:0;}
.team-card{text-align:center;}
.team-photo{height:150px;border-radius:12px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;color:var(--teal-dark);font-family:'Poppins',sans-serif;font-weight:800;font-size:30px;margin-bottom:14px;}
.team-card h3{margin-bottom:2px;}
.team-card .role{font-size:13.5px;color:var(--teal-dark);font-weight:600;margin-bottom:10px;}
.name-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;}
.name-chip{font-size:13px;font-weight:600;color:var(--navy-soft);border:1.5px solid var(--line);border-radius:20px;padding:8px 16px;background:#fff;}
.name-chip small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;}
.value-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:26px;transition:.25s;}
.value-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.value-card h3{font-size:16.5px;margin-bottom:8px;}
.value-card p{font-size:14px;margin-bottom:0;}
.badge-card{border:1.5px solid var(--line);border-radius:14px;padding:18px 28px;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--navy);background:#fff;display:flex;align-items:center;gap:10px;transition:.25s;}
.badge-card:hover{transform:translateY(-3px);border-color:#cfe6e6;box-shadow:0 18px 40px -22px rgba(21,42,58,.22);}
.badge-card .bdot{width:9px;height:9px;border-radius:50%;background:var(--teal);}

/* ===== Why Us (/why-us/) — new-gen hero-dark. Reuses hero-dark, trust-strip,
   pain-card, factor-list, steps-grid/step-card (.has-num watermark), cs-band/
   cs-mini, quote, faq-list, final-cta, compare-table (dark spec table). Adds the
   navy "what we won't promise" honesty band + the vs-table tick/cross + wrap. ===== */
.honesty{background:linear-gradient(140deg,var(--navy-deep),var(--navy));border-radius:24px;padding:52px;color:#fff;position:relative;overflow:hidden;}
.honesty::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(600px 400px at 85% 20%,#000 20%,transparent 70%);pointer-events:none;}
.honesty h2{color:#fff;} .honesty p{color:#C9D8E0;}
.honesty .inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
.wont-list{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.wont-item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#E7F0F4;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 18px;}
.wont-item svg{width:18px;height:18px;stroke:var(--coral);fill:none;stroke-width:2;flex-shrink:0;margin-top:2px;}
.wont-item b{color:#fff;font-weight:600;}
.compare-wrap{overflow-x:auto;}
.vs-table td:first-child{color:var(--navy);white-space:normal;}
.compare-table td .tick{color:var(--teal-dark);font-weight:700;}
.compare-table td .cross{color:#c7d2d8;font-weight:700;}
@media(max-width:900px){.honesty .inner{grid-template-columns:1fr;}.honesty{padding:34px;}}

/* ===== Our Process (/our-process/) — new-gen hero-dark. Reuses hero-dark,
   pain-card, deliv, cs-band/cs-mini, card, faq-list, final-cta. Adds the ACG-method
   cards (.pm-* — the global .method-card is the homepage's colored A/C/G card), the
   5 methodology phase blocks, and the responsibilities duty split. ===== */
.pm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:30px;}
.pm-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;transition:.25s;}
.pm-card:hover{box-shadow:0 22px 48px -24px rgba(21,42,58,.22);transform:translateY(-4px);}
.pm-card .letter{width:50px;height:50px;border-radius:12px;background:var(--navy);color:#8fe9e6;font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.phase-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;margin-top:22px;position:relative;overflow:hidden;transition:.25s;}
.phase-block:hover{box-shadow:0 22px 48px -24px rgba(21,42,58,.22);border-color:#cfe6e6;}
.phase-block::after{content:attr(data-num);position:absolute;right:20px;top:8px;font-family:'Poppins',sans-serif;font-weight:800;font-size:64px;color:rgba(26,163,166,.09);line-height:1;pointer-events:none;}
.phase-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;position:relative;z-index:1;}
.phase-head .pnum{font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;color:#fff;background:var(--navy);width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.phase-head h3{font-size:21px;margin:0;}
.phase-when{font-size:12px;color:var(--teal-dark);font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--teal-light);padding:6px 13px;border-radius:20px;}
.phase-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:20px;position:relative;z-index:1;}
.phase-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-dark);margin:0 0 10px;font-weight:700;font-family:'Poppins',sans-serif;}
.phase-col ul{display:flex;flex-direction:column;gap:8px;}
.phase-col li{font-size:13.5px;color:var(--ink);padding-left:20px;position:relative;line-height:1.55;}
.phase-col li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:var(--teal-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138385' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:8px;background-repeat:no-repeat;background-position:center;}
.duty-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;}
.duty-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:32px;}
.duty-card.ours{border-color:var(--teal);box-shadow:0 22px 50px -25px var(--glow);}
.duty-card h3{font-size:20px;}
.duty-card .sub{font-size:13px;color:var(--muted);margin-bottom:18px;}
.duty-card ul{display:flex;flex-direction:column;gap:11px;}
.duty-card li{font-size:14px;color:var(--ink);padding-left:24px;position:relative;line-height:1.6;}
.duty-card li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;background:var(--teal-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23138385' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center;}
.duty-card li b{color:var(--navy);}
@media(max-width:900px){.pm-grid,.phase-cols,.duty-grid{grid-template-columns:1fr;}}

/* ===== Team (/team/) — new-gen hero-dark. Reuses hero-dark, value-card, factor-list,
   not-list, card/icon, faq-item, final-cta. Adds the founder band, the photo team
   grid (.tm-* — About Us owns .team-card for its monogram cards), and careers band. ===== */
.founder-band{background:linear-gradient(140deg,var(--navy-deep),#0E4B4D);border-radius:24px;padding:52px;color:#fff;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;}
.founder-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(600px 400px at 85% 20%,#000 20%,transparent 70%);pointer-events:none;}
.founder-band h3{color:#fff;font-size:26px;}
.founder-band p{color:#C9D8E0;}
.founder-avatar{width:150px;height:150px;border-radius:50%;background:rgba(43,212,200,.16);border:2px solid rgba(43,212,200,.5);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:44px;font-weight:800;color:var(--teal-bright);position:relative;z-index:1;flex-shrink:0;}
.founder-role{display:inline-block;background:rgba(43,212,200,.14);border:1px solid rgba(43,212,200,.4);color:var(--teal-bright);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:5px 14px;margin-bottom:12px;}
.tm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:36px;}
.tm-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;}
.tm-card:hover{box-shadow:0 22px 48px -24px rgba(21,42,58,.25);transform:translateY(-4px);border-color:#cfe6e6;}
.tm-card .photo{width:100%;aspect-ratio:3/3.4;overflow:hidden;background:var(--teal-light);}
.tm-card .photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:.35s;}
.tm-card:hover .photo img{transform:scale(1.04);}
.tm-card .meta{padding:20px 22px 22px;}
.tm-card .meta h3{font-size:17px;margin-bottom:3px;}
.tm-card .meta .role{font-size:13px;font-weight:600;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.05em;}
.careers-band{background:linear-gradient(140deg,var(--navy-deep),#0E4B4D);border-radius:24px;padding:52px;color:#fff;position:relative;overflow:hidden;}
.careers-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(600px 400px at 85% 20%,#000 20%,transparent 70%);pointer-events:none;}
.careers-band h2{color:#fff;} .careers-band p{color:#C9D8E0;}
.benefit-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:26px;position:relative;z-index:1;}
.benefit{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;}
.benefit h3{color:#fff;font-size:15px;margin-bottom:6px;}
.benefit p{font-size:13px;margin-bottom:0;color:#9fb8c4;}
@media(max-width:900px){.tm-grid,.benefit-grid,.founder-band{grid-template-columns:1fr;}}

/* ===== FAQ (/faq/) — older-gen light page. Reuses .smm-hero + global .faq-list/
   .faq-item + .final-cta. Adds the FAQ category grouping. ===== */
.faq-cat{margin-top:46px;}
.faq-cat:first-child{margin-top:0;}
.faq-cat h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--teal-dark);margin-bottom:18px;}

/* ===== Case-study DETAIL pages (10, one shared older-gen light template) — hero +
   3 stats, challenge grid-2, strategy factor-list, results grid-4 + pull-quote, CTA.
   Reuses .smm-hero, .not-list/.not-item, .factor-list/.factor-item/.fnum, .card,
   .grid-2/.grid-4, .hero-actions, .final-cta. Adds the LIGHT inline hero stat strip
   (.csd-stats — the global .stat-strip is the homepage full-bleed band) and the
   border-left pull-quote (.csd-quote). ALSO defines the base .quote (teal-light band)
   that why-us.php referenced but was never in main.css — this finally styles it. ===== */
.csd-stats{display:flex;gap:36px;margin-top:34px;flex-wrap:wrap;position:relative;z-index:1;}
.csd-stats .s{display:flex;flex-direction:column;}
.csd-stats .s b{font-family:'Poppins',sans-serif;font-size:24px;color:var(--navy);}
.csd-stats .s span{font-size:12.5px;color:var(--muted);}
.csd-quote{border-left:3px solid var(--teal);padding-left:20px;font-size:16px;color:var(--ink);font-style:italic;margin:16px 0;}
.quote{background:var(--teal-light);border-left:4px solid var(--teal);border-radius:0 10px 10px 0;padding:22px 26px;font-size:16px;color:var(--navy);font-weight:500;font-style:italic;}

/* ===== Guest Post Shop (/guest-post-shop/) — the domain marketplace (VISUAL DEMO;
   no live inventory/cart — the real purchasable flow is the managed packages). Its
   own layout (no standard .hero): a page-header, a "no time?" banner, a filter bar,
   a sortable domain-listing table, and pagination. All shop-scoped classes; the
   crumb is .shop-crumb (the global .breadcrumb is checkout-only, under .acg-co).
   Coral buttons reuse .btn.on-dark. ===== */
.no-time-banner{background:linear-gradient(135deg,var(--navy) 0%,#1d3d52 100%);border-radius:14px;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:22px 0 20px;position:relative;overflow:hidden;}
.no-time-banner::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:rgba(26,163,166,.18);pointer-events:none;}
.no-time-banner::after{content:'';position:absolute;left:-30px;bottom:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,107,87,.10);pointer-events:none;}
.no-time-inner{position:relative;z-index:1;}
.no-time-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(26,163,166,.2);color:#7fe0e0;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:8px;}
.no-time-badge .dot{width:6px;height:6px;border-radius:50%;background:#3be07f;}
.no-time-banner h3{color:#fff;font-size:19px;font-weight:700;margin:0 0 5px;font-family:'Poppins',sans-serif;}
.no-time-banner p{color:#C9D8E0;font-size:13.5px;margin:0;line-height:1.5;}
.no-time-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;position:relative;z-index:1;}
.no-time-actions .or-text{color:#8fa8be;font-size:12.5px;white-space:nowrap;}
.page-header{background:#fff;border-bottom:1px solid var(--line);padding:20px 0 0;}
.shop-crumb{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.shop-crumb a{color:var(--teal-dark);}
.shop-crumb span{margin:0 5px;}
.page-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.page-title-row h1{margin:0 0 6px;}
.shop-intro{font-size:14px;color:var(--muted);line-height:1.6;max-width:680px;}
.shop-bullets{margin:10px 0 0;display:flex;gap:20px;flex-wrap:wrap;}
.shop-bullet{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--navy-soft);font-weight:500;}
.shop-bullet .check{width:18px;height:18px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.shop-body{padding:24px 0 60px;}
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;background:#F3F6F9;border:1px solid var(--line);border-radius:7px;padding:7px 13px;font-size:13px;color:var(--ink);font-weight:500;cursor:pointer;white-space:nowrap;}
.filter-chip:hover{border-color:var(--teal);color:var(--teal-dark);}
.filter-chip .care{font-size:9px;color:var(--muted);}
.filter-chip.active{background:var(--teal-light);border-color:var(--teal);color:var(--teal-dark);}
.filter-chip.spam{background:#FFF0EE;border-color:#f9ccc6;color:#c0392b;}
.search-sort-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
.results-count{font-size:13.5px;color:var(--muted);}
.results-count strong{color:var(--ink);}
.search-box{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;flex:1;max-width:300px;}
.search-box input{border:none;outline:none;padding:9px 14px;font-size:13.5px;width:100%;color:var(--ink);font-family:'Inter',sans-serif;}
.search-box button{background:var(--teal);border:none;padding:9px 14px;cursor:pointer;color:#fff;font-size:14px;}
.sort-select{border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:13.5px;color:var(--ink);font-family:'Inter',sans-serif;background:#fff;cursor:pointer;outline:none;}
.shop-table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto;}
.shop-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px;}
.shop-table thead tr{background:#F7F9FB;border-bottom:2px solid var(--line);}
.shop-table th{padding:12px 14px;text-align:left;font-weight:600;color:var(--navy);font-size:12.5px;white-space:nowrap;}
.shop-table th.sort-active{color:var(--teal-dark);}
.shop-table th .sort-icon{font-size:10px;margin-left:3px;color:var(--muted);}
.shop-table tbody tr{border-bottom:1px solid var(--line);transition:.1s;}
.shop-table tbody tr:last-child{border-bottom:none;}
.shop-table tbody tr:hover{background:#F9FBFC;}
.shop-table td{padding:12px 14px;vertical-align:middle;color:var(--ink);}
.domain-name{color:var(--teal-dark);font-weight:600;font-size:13.5px;}
.domain-name:hover{color:var(--teal);}
.badge-tag{display:inline-block;padding:3px 8px;border-radius:5px;font-size:11.5px;font-weight:600;}
.badge-tag.dofollow{background:#E3F6F4;color:var(--teal-dark);}
.badge-tag.nofollow{background:#F3F5F7;color:var(--muted);}
.badge-tag.cat{background:#EFF3FE;color:#3b5bdb;}
.spam-score{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;}
.spam-dot{width:8px;height:8px;border-radius:50%;}
.spam-dot.low{background:#22c55e;}
.spam-dot.med{background:#f59e0b;}
.spam-dot.high{background:#ef4444;}
.price-cell{font-weight:700;color:var(--navy);font-size:14px;}
.add-cart-btn{background:var(--coral);color:#fff;border:none;border-radius:7px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;transition:.15s;}
.add-cart-btn:hover{background:#e8553f;}
.da-val{font-weight:700;color:var(--navy);}
.combo-tag{display:inline-block;background:#FFF7E0;color:#92550a;border-radius:5px;padding:3px 8px;font-size:11.5px;font-weight:600;margin-bottom:3px;}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:#fff;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px;}
.page-info{font-size:13px;color:var(--muted);}
.page-btns{display:flex;gap:6px;flex-wrap:wrap;}
.page-btn{width:34px;height:34px;border-radius:7px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);cursor:pointer;font-family:'Inter',sans-serif;}
.page-btn:hover{border-color:var(--teal);color:var(--teal-dark);}
.page-btn.active{background:var(--teal);border-color:var(--teal);color:#fff;}
.page-btn.arrow{color:var(--muted);}
.packages-strip{background:var(--teal-light);border:1px solid rgba(26,163,166,.25);border-radius:12px;padding:20px 26px;margin-top:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.packages-strip-icon{font-size:28px;flex-shrink:0;}
.packages-strip-copy{flex:1;}
.packages-strip-copy h3{font-size:15px;color:var(--navy);margin:0 0 4px;}
.packages-strip-copy p{font-size:13px;color:var(--muted);margin:0;line-height:1.5;}

/* ===== AI Search cluster — older-gen LIGHT pages (ai-seo-services, ai-brand-visibility,
   llmo-services). Shared .sub-tag hero pill. ai-seo-services: navy .ais-stats band (the
   global .stat-strip is the homepage band), .compare-panel + .cp-vs table (the global
   .vs-table is why-us's override), .aitool-grid/.aitool-card (the global .tool-card is
   the AI-hub's). ai-brand-visibility: .platform-row/.plat-card, navy .monitor-box +
   .monitor-row/.monitor-item, and the .sov-* share-of-voice bars. ===== */
.sub-tag{display:inline-block;background:var(--teal-light);color:var(--teal-dark);font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:16px;letter-spacing:.02em;}
.ais-stats{background:var(--navy);border-radius:16px;padding:34px 42px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.ais-stats .sval{font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;color:#fff;display:block;}
.ais-stats .slbl{font-size:13px;color:#9FB3BF;margin-top:4px;}
.compare-panel{background:var(--navy);border-radius:20px;padding:42px;color:#fff;}
.compare-panel h2{color:#fff;} .compare-panel p{color:#C9D8E0;}
.cp-vs{width:100%;border-collapse:collapse;margin-top:24px;}
.cp-vs th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;text-align:left;}
.cp-vs th:first-child{color:#9FB3BF;} .cp-vs th:nth-child(2){color:#8fe9e6;} .cp-vs th:last-child{color:#ff9f94;}
.cp-vs td{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#C9D8E0;vertical-align:top;}
.cp-vs td:nth-child(2){color:#8fe9e6;} .cp-vs td:last-child{color:#ff9f94;}
.aitool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
.aitool-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;}
.aitool-card .tname{font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:4px;}
.aitool-card .trole{font-size:12px;color:var(--muted);}
.platform-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;}
.plat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;}
.plat-card .pname{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--navy);margin-bottom:6px;}
.plat-card .ptype{font-size:12px;color:var(--muted);margin-bottom:12px;}
.plat-card .pshare{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--teal);}
.plat-card .psub{font-size:11px;color:var(--muted);}
.monitor-box{background:var(--navy);border-radius:20px;padding:42px;color:#fff;}
.monitor-box h2{color:#fff;} .monitor-box p{color:#C9D8E0;}
.monitor-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;}
.monitor-item{background:rgba(255,255,255,.06);border-radius:14px;padding:24px;border:1px solid rgba(255,255,255,.08);}
.monitor-item h3{color:#fff;font-size:16px;margin-bottom:8px;}
.monitor-item p{color:#C9D8E0;font-size:14px;margin:0;}
.sov-bar{margin-top:20px;}
.sov-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.sov-label{font-size:13px;color:#9FB3BF;width:110px;flex-shrink:0;}
.sov-track{flex:1;background:rgba(255,255,255,.08);border-radius:6px;height:10px;overflow:hidden;}
.sov-fill{height:100%;border-radius:6px;background:var(--teal);}
.sov-pct{font-size:13px;font-weight:700;color:#fff;width:36px;text-align:right;}
@media(max-width:900px){.ais-stats,.aitool-grid,.platform-row,.monitor-row{grid-template-columns:1fr;}}

/* ===== LLMO services (llmo-services) — navy signal panel + JSON code block ===== */
.signal-panel{background:var(--navy);border-radius:20px;padding:42px;color:#fff;}
.signal-panel h2{color:#fff;}
.signal-panel p{color:#C9D8E0;}
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;}
.sig-item{background:rgba(255,255,255,.06);border-radius:12px;padding:22px;border:1px solid rgba(255,255,255,.08);}
.sig-item .sig-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8fe9e6;font-weight:700;margin-bottom:8px;}
.sig-item .sig-score{font-family:'Poppins',sans-serif;font-size:28px;font-weight:800;color:#fff;margin-bottom:4px;}
.sig-item h3{color:#fff;font-size:15px;margin-bottom:6px;}
.sig-item p{color:#C9D8E0;font-size:13.5px;margin:0;}
.code-block{background:#0D1B24;border-radius:12px;padding:22px;font-family:monospace;font-size:13px;color:#8fe9e6;line-height:1.8;margin-top:20px;overflow-x:auto;white-space:pre;}
.code-block .cm{color:#5c7a8a;}
.code-block .ck{color:#ff9f94;}
.code-block .cv{color:#9fd9d8;}
.code-block .cs{color:#ffd87a;}
@media(max-width:900px){.signal-grid{grid-template-columns:1fr;}}

/* ===== Founder (/founder/) — dark JSON-LD Person schema illustration ===== */
.schema-box{background:#0F1E27;border-radius:14px;padding:22px;color:#9fd9d8;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.7;overflow-x:auto;margin-top:18px;}

/* ===== AI Search Hub (ai-search-hub) — hero citation stack, split, stat callouts, tool teaser ===== */
.citation-stack { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.cite-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 18px 20px; backdrop-filter: blur(6px); transition: .25s; }
.cite-card:hover { transform: translateY(-4px); border-color: rgba(43,212,200,.45); }
.cite-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cite-head .swatch { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.cite-head .name { font-size: 13px; font-weight: 700; color: #fff; }
.cite-card p { font-size: 13px; color: #C9D8E0; margin: 0; line-height: 1.6; }
.cite-card b { color: #8fe9e6; }
.note { font-size: 11.5px; color: var(--muted); font-style: italic; }
.split-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; margin-top: 30px; }
.stat-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-callout { background: var(--teal-light); border-radius: 14px; padding: 22px; }
.stat-callout .num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 30px; color: var(--teal-dark); display: block; }
.stat-callout .label { font-size: 12.5px; color: var(--navy-soft); margin-top: 6px; display: block; }
.tool-card { background: var(--blue-bg); border-radius: 20px; padding: 50px; text-align: center; }
.tool-card h2 { margin-bottom: 10px; }
.tool-card p { max-width: 560px; margin: 0 auto 22px; }
@media(max-width:900px){
  .split-grid, .stat-callouts { grid-template-columns: 1fr; }
}

/* "Which service do I need?" decision table — namespaced from the global
   .compare-table (a dark-header spec table used by 7 service pages) so it can
   match the ai-search-hub wireframe's light-header decision-table styling
   without disturbing those pages. */
.decide-table { width: 100%; border-collapse: collapse; margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.decide-table th { background: #FAFBFC; text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--line); }
.decide-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); vertical-align: top; }
.decide-table tr:last-child td { border-bottom: none; }
.decide-table td a { color: var(--teal-dark); font-weight: 600; }
.decide-table td small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; font-weight: 400; }

/* ===== Google Ads / PPC Management (google-ads-ppc-management) — older-gen light page.
   .ppc-hero / .ppc-stats / .ppc-process are namespaced to dodge the homepage's
   .hero + .stat-strip and the timeline .process/.p-step/.p-num already in main.css
   (same collision the free-audit .fa-* page had). Everything else (trust-bar,
   factor-item, pricing-card, testimonials, logo-wall, tag-pill, cards, faq) reuses
   the existing digital-pr-derived classes, which match this wireframe. ===== */
.ppc-hero { background: linear-gradient(180deg, var(--blue-bg) 0%, #fff 100%); position: relative; overflow: hidden; }
.ppc-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(21,42,58,.05) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; pointer-events: none; }
.ppc-hero-inner { position: relative; z-index: 1; padding: 48px 0 56px; max-width: 760px; }
.ppc-hero .lede { font-size: 17.5px; }
.ppc-stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; position: relative; z-index: 1; }
.ppc-stats .s { display: flex; flex-direction: column; }
.ppc-stats .s b { font-family: 'Poppins', sans-serif; font-size: 24px; color: var(--navy); }
.ppc-stats .s span { font-size: 12.5px; color: var(--muted); }
.lead-copy { max-width: 760px; }
.lead-copy p { font-size: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid #F1F4F6; }
.checklist li:last-child { border-bottom: none; }
.checklist li svg { width: 18px; height: 18px; stroke: var(--teal-dark); fill: none; stroke-width: 2.2; flex-shrink: 0; margin-top: 2px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.kpi { background: var(--navy); color: #fff; border-radius: 14px; padding: 26px 22px; }
.kpi b { font-family: 'Poppins', sans-serif; font-size: 30px; color: #8fe9e6; display: block; line-height: 1; }
.kpi span { font-size: 13px; color: #C9D8E0; margin-top: 8px; display: block; }
.ppc-process { display: flex; gap: 18px; margin-top: 36px; }
.ppc-pstep { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; position: relative; }
.ppc-pnum { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 30px; color: var(--teal-light); margin-bottom: 10px; }
.ppc-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
@media(max-width:900px){
  .split, .kpi-grid, .ppc-tags { grid-template-columns: 1fr; }
  .ppc-process { flex-direction: column; }
  .ppc-stats { gap: 24px; }
}

/* ===== Paid Social Advertising (paid-social-advertising) — same older-gen light
   design as PPC, but a PURPLE hero. Below the hero it reuses the shared
   .ppc-stats / .ppc-process / .ppc-tags (identical across Digital Marketing pages,
   despite the ppc- name). New: the full-funnel (TOF/MOF/BOF) component. ===== */
.psa-hero { background: linear-gradient(180deg, #EDE7FB 0%, #fff 100%); position: relative; overflow: hidden; }
.psa-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(21,42,58,.05) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; pointer-events: none; }
.psa-hero-inner { position: relative; z-index: 1; padding: 48px 0 56px; max-width: 760px; }
.psa-hero .lede { font-size: 17.5px; }
.funnel { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.funnel-row { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px; padding: 22px 26px; }
.funnel-row.tof { border-left-color: #4285F4; }
.funnel-row.mof { border-left-color: var(--teal); }
.funnel-row.bof { border-left-color: var(--coral); }
.funnel-row .stage { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.funnel-row h3 { margin: 4px 0 6px; }
.funnel-row p { margin-bottom: 0; font-size: 14px; }

/* ===== Social Media Management (social-media-management) — older-gen light, TEAL hero.
   No new components; reuses the shared .ppc-stats/.ppc-process/.ppc-tags below the hero. ===== */
.smm-hero { background: linear-gradient(180deg, var(--teal-light) 0%, #fff 100%); position: relative; overflow: hidden; }
.smm-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(21,42,58,.05) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; pointer-events: none; }
.smm-hero-inner { position: relative; z-index: 1; padding: 48px 0 56px; max-width: 760px; }
.smm-hero .lede { font-size: 17.5px; }
/* DM older-gen light heroes: h1 at the wireframe's 44px (not the global 46px), so long
   headlines wrap in 2 lines like the wireframe instead of 3. */
.ppc-hero h1, .psa-hero h1, .smm-hero h1 { font-size: 44px; }

/* ===== Custom Web Development (custom-web-development) — reuses .smm-hero (teal) + the
   shared DM classes. New: the "Two ways to work" engagement cards, namespaced .dtier —
   the wireframe's tier-card uses inline-<svg> checkmark <li>s + h3/.tsub, which would
   double up against main.css's ::before-checkmark .tier-card from the SEO pages. The
   "Most Popular" badge is an editable .tier-badge span (reused), not the CSS ::before. */
.dtier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.dtier { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 30px; position: relative; }
.dtier.featured { border-color: var(--teal); box-shadow: 0 20px 45px -25px var(--glow); }
.dtier h3 { font-size: 17px; }
.dtier .tsub { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.dtier ul { margin-top: 10px; }
.dtier li { font-size: 13.5px; color: var(--ink); padding: 7px 0; border-bottom: 1px solid #F1F4F6; display: flex; gap: 8px; align-items: flex-start; }
.dtier li:last-child { border-bottom: none; }
.dtier li svg { width: 15px; height: 15px; stroke: var(--teal-dark); fill: none; stroke-width: 2; margin-top: 2px; flex-shrink: 0; }
@media(max-width:900px){ .dtier-grid { grid-template-columns: 1fr; } }

/* ===== White Label Development (white-label-development) — the only DM page with a DARK
   navy hero. Namespaced .wl-hero + .wl-stats (light text on navy). Reuses .dtier for the
   3 engagement tiers (.dtier-grid.three = 3-col), plus .ppc-process/.ppc-tags/.pricing-card
   and standards. ===== */
.wl-hero { background: linear-gradient(180deg, var(--navy) 0%, #12303f 100%); position: relative; overflow: hidden; }
.wl-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; opacity: .6; pointer-events: none; }
.wl-hero-inner { position: relative; z-index: 1; padding: 48px 0 56px; max-width: 770px; }
.wl-hero .crumbs, .wl-hero .crumbs a { color: #9fb6c2; }
.wl-hero .crumbs .here { color: #fff; }
.wl-hero .eyebrow { color: #8fe9e6; }
.wl-hero .eyebrow .dot { background: #8fe9e6; }
.wl-hero h1 { color: #fff; font-size: 44px; }
.wl-hero .lede { font-size: 17.5px; color: #C9D8E0; }
.wl-stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; position: relative; z-index: 1; }
.wl-stats .s { display: flex; flex-direction: column; }
.wl-stats .s b { font-family: 'Poppins', sans-serif; font-size: 24px; color: #fff; }
.wl-stats .s span { font-size: 12.5px; color: #9fb6c2; }
.dtier-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media(max-width:900px){ .dtier-grid.three { grid-template-columns: 1fr; } }

/* ============ LINK BUILDING PACKAGES (/link-building-packages/) ============
   Namespaced .pkg-* — the wireframe's tier-* classes collide with the SEO
   tier-card set (different badge/grid semantics). The featured "Most Popular"
   floating badge is a real editable .pkg-pop span (no CSS-generated text). */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.pkg-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;transition:.25s;position:relative;}
.pkg-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.pkg-card.featured{border-color:var(--teal);box-shadow:0 20px 50px -20px var(--glow);}
.pkg-pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:4px 16px;border-radius:20px;white-space:nowrap;}
.pkg-badge{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;border-radius:20px;padding:4px 12px;margin-bottom:14px;background:var(--teal-light);color:var(--teal-dark);}
.pkg-card.featured .pkg-badge{background:rgba(255,107,87,.12);color:var(--coral);}
.pkg-name{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--navy);}
.pkg-posts{font-size:13px;color:var(--muted);margin-top:2px;margin-bottom:20px;}
.pkg-price-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:20px;}
.pkg-price{font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;color:var(--navy);}
.pkg-price-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.pkg-features{flex:1;list-style:none;margin:0;padding:0;}
.pkg-features li{font-size:13px;color:var(--ink);padding:7px 0;border-bottom:1px solid #F1F4F6;display:flex;gap:8px;align-items:flex-start;}
.pkg-features li:last-child{border-bottom:none;}
.pkg-features li svg{width:15px;height:15px;stroke:var(--teal-dark);fill:none;stroke-width:2.2;margin-top:2px;flex-shrink:0;}
.pkg-cta{margin-top:24px;}
.pkg-cta .btn{width:100%;justify-content:center;}
.pkg-grid.three{grid-template-columns:repeat(3,1fr);} /* 3-package pages (guest posts) */

/* custom order band + instant calculator */
.custom-order{background:linear-gradient(135deg,var(--navy) 0%,#0D3D3D 100%);border-radius:24px;padding:52px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.custom-order h2{color:#fff;}
.custom-order p{color:#C9D8E0;margin-top:12px;}
.custom-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
.custom-spec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 18px;}
.custom-spec span{display:block;font-size:11px;color:#7c919c;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;}
.custom-spec b{font-family:'Poppins',sans-serif;font-size:16px;color:#fff;font-weight:700;}
.calc-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px;}
.calc-box h3{color:#fff;font-size:17px;margin-bottom:20px;}
.calc-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.calc-label{font-size:13px;color:#9FB3BF;flex:1;}
.calc-input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 14px;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;width:80px;text-align:center;}
.calc-input:focus{outline:none;border-color:var(--teal);}
/* custom -/+ stepper (replaces the tiny native number-input spinner) */
.calc-input::-webkit-outer-spin-button,.calc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.calc-input[type=number]{-moz-appearance:textfield;}
.calc-stepper{display:inline-flex;align-items:stretch;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.06);}
.calc-step{width:38px;background:transparent;border:none;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;line-height:1;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;}
.calc-step:hover{background:rgba(255,255,255,.18);}
.calc-step:active{background:rgba(255,255,255,.28);}
.calc-stepper .calc-input{width:66px;height:auto;border:none;border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);border-radius:0;background:transparent;}
.calc-total{background:var(--teal);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.calc-total span{font-size:13px;color:rgba(255,255,255,.85);}
.calc-total b{font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;color:#fff;}

/* purchase modal */
.modal-overlay{position:fixed;inset:0;background:rgba(21,42,58,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:20px;padding:38px;max-width:480px;width:100%;position:relative;box-shadow:0 40px 80px -30px rgba(21,42,58,.4);}
.modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--line);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);transition:.15s;}
.modal-close:hover{background:var(--teal-light);color:var(--teal-dark);}
.modal-plan-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-dark);margin-bottom:6px;}
.modal-plan-title{font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.modal-plan-desc{font-size:14px;color:var(--muted);margin-bottom:24px;}
.modal-toggle{display:flex;gap:0;background:var(--teal-light);border-radius:10px;padding:4px;margin-bottom:24px;}
.modal-toggle label{flex:1;text-align:center;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);transition:.15s;user-select:none;}
.modal-toggle input[type="radio"]{display:none;}
.modal-toggle input[type="radio"]:checked + label{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(21,42,58,.12);}
.modal-price-display{text-align:center;padding:20px;background:var(--teal-light);border-radius:12px;margin-bottom:24px;}
.modal-price-display .price-main{font-family:'Poppins',sans-serif;font-size:42px;font-weight:800;color:var(--navy);}
.modal-price-display .price-orig{font-size:18px;text-decoration:line-through;color:var(--muted);margin-right:8px;display:none;}
.modal-price-display .price-period{font-size:14px;color:var(--muted);margin-top:4px;}
/* the saving pill always occupies its line (visibility, not display) so the
   modal height does NOT jump when toggling one-time <-> subscription */
.modal-price-display .price-saving{background:var(--teal-dark);color:#fff;font-size:12px;font-weight:700;border-radius:20px;padding:4px 12px;margin-top:8px;display:inline-block;visibility:hidden;}
.modal-price-display.sub-mode .price-orig{display:inline;}
.modal-price-display.sub-mode .price-saving{visibility:visible;}
.modal-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;}

@media(max-width:1040px){.pkg-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){
  .pkg-grid,.pkg-grid.three,.custom-order{grid-template-columns:1fr;}
  .custom-order{padding:32px;}
  .custom-specs{grid-template-columns:1fr 1fr;}
}

/* ============ CART + CHECKOUT (custom Stripe flow, /cart/ + /checkout/) ============
   Step indicator + trust badges namespaced .co-* (main.css already uses
   .step-num for process watermarks and .trust-row/.trust-item on the homepage). */
.btn.coral{background:var(--coral);}
.btn.coral:hover{background:#e85440;}
.btn.outline{background:transparent;border:1.5px solid var(--teal);color:var(--teal-dark);}
.btn.outline:hover{background:var(--teal-light);}
body.acg-co{background:#F7FAFB;}
/* match the sitewide .crumbs look exactly, for breadcrumb consistency */
.acg-co .breadcrumb{padding:18px 0;font-size:13px;color:var(--muted);}
.acg-co .breadcrumb a{color:var(--muted);}
.acg-co .breadcrumb a:hover{color:var(--teal-dark);}
.acg-co .breadcrumb span{margin:0 6px;color:#c7d2d8;}
.acg-co .breadcrumb strong{color:var(--navy);font-weight:600;}
.co-steps{display:flex;align-items:center;gap:0;margin-bottom:32px;}
.co-step{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--muted);}
.co-step.active{color:var(--navy);}
.co-step.done{color:var(--teal-dark);}
.co-step-num{width:28px;height:28px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.co-step.active .co-step-num{background:var(--teal);color:#fff;}
.co-step.done .co-step-num{background:var(--teal-dark);color:#fff;}
.co-connector{flex:1;height:1px;background:var(--line);margin:0 14px;min-width:40px;}
.co-connector.done{background:var(--teal-dark);}

/* cart */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:flex-start;padding:8px 0 64px;}
.cart-box{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.cart-box-head{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.cart-box-head h2{font-size:18px;}
.cart-box-head .item-count{font-size:13px;color:var(--muted);background:var(--teal-light);border-radius:20px;padding:4px 12px;font-weight:600;}
.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:14px 28px;text-align:left;border-bottom:1px solid var(--line);background:#FAFBFC;}
.cart-table td{padding:20px 28px;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-table tr:last-child td{border-bottom:none;}
.item-name{font-weight:600;color:var(--navy);font-size:15px;margin-bottom:4px;}
.item-meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;}
.item-badge{background:var(--teal-light);color:var(--teal-dark);font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;}
.item-badge.coral{background:rgba(255,107,87,.12);color:var(--coral);}
.qty-wrap{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content;}
.qty-btn{width:32px;height:32px;background:#fff;border:none;cursor:pointer;font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.1s;}
.qty-btn:hover{background:var(--teal-light);color:var(--teal-dark);}
.qty-val{width:40px;text-align:center;font-weight:600;font-size:14px;color:var(--navy);border:none;outline:none;background:#fff;}
.item-price{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--navy);}
.item-price .orig{font-size:13px;text-decoration:line-through;color:var(--muted);display:block;font-weight:400;}
.remove-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:6px;transition:.15s;}
.remove-btn:hover{background:#FEE2E2;color:#DC2626;}
.remove-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.sub-toggle-row{background:var(--teal-light);border-radius:0 0 16px 16px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.sub-toggle-row p{font-size:13.5px;color:var(--ink);margin:0;}
.sub-toggle-row strong{color:var(--teal-dark);}
.toggle-switch{display:flex;gap:0;background:#fff;border-radius:8px;padding:3px;border:1px solid var(--line);}
.toggle-switch label{padding:7px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);transition:.15s;user-select:none;white-space:nowrap;}
.toggle-switch input[type="radio"]{display:none;}
.toggle-switch input[type="radio"]:checked + label{background:var(--teal);color:#fff;box-shadow:0 2px 6px var(--glow);}
.coupon-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 28px;margin-top:16px;}
.coupon-box h3{font-size:15px;margin-bottom:14px;}
.coupon-row{display:flex;gap:10px;}
.coupon-input{flex:1;border:1.5px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);outline:none;transition:.15s;}
.coupon-input:focus{border-color:var(--teal);}
.coupon-status{display:none;font-size:13px;margin-top:8px;padding:8px 12px;border-radius:8px;}
.coupon-status.success{display:flex;align-items:center;gap:6px;background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;}
.coupon-status.error{display:flex;align-items:center;gap:6px;background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;}
.empty-cart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:64px 24px;text-align:center;}
.empty-cart svg{width:64px;height:64px;stroke:var(--line);fill:none;stroke-width:1.2;margin:0 auto 20px;display:block;}
.empty-cart h2{font-size:22px;margin-bottom:10px;}
.empty-cart p{margin-bottom:24px;}
.secure-badge{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:var(--muted);margin-top:10px;}
.secure-badge svg{width:14px;height:14px;stroke:var(--teal-dark);fill:none;stroke-width:2;}
.pay-icons{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.pay-icon{height:22px;background:#F1F4F6;border-radius:4px;padding:3px 8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted);}

/* order summary (shared; .cart-page / .checkout-page scope the differences) */
.order-summary{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;position:sticky;top:90px;}
.os-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.os-head h3{font-size:17px;}
.cart-page .os-body{padding:20px 24px;}
.cart-page .os-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:8px 0;border-bottom:1px solid #F1F4F6;}
.cart-page .os-line:last-of-type{border-bottom:none;}
.os-line .label{color:var(--muted);}
.os-line .val{font-weight:600;color:var(--navy);}
.os-line .val.teal{color:var(--teal-dark);}
.os-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;margin-top:8px;border-top:2px solid var(--navy);}
.os-total .label{font-weight:700;color:var(--navy);font-size:16px;}
.os-total .amount{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--navy);}
.cart-page .os-foot{padding:0 24px 22px;}
.os-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;}

/* checkout */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:flex-start;padding:8px 0 64px;}
.form-box{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:18px;}
.form-box-head{padding:18px 28px;border-bottom:1px solid var(--line);background:#FAFBFC;display:flex;align-items:center;gap:10px;}
.form-box-head h3{font-size:16px;}
.form-box-head .step-badge{width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.form-box-body{padding:24px 28px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field-row.single{grid-template-columns:1fr;}
.field-group{display:flex;flex-direction:column;gap:6px;}
.field-group label{font-size:13px;font-weight:600;color:var(--navy);}
.field-group label .req{color:var(--coral);}
.field-input{border:1.5px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14px;color:var(--ink);outline:none;transition:.15s;width:100%;font-family:'Inter',sans-serif;background:#fff;}
.field-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,163,166,.12);}
.field-input.error{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.1);}
.field-error{font-size:12px;color:#DC2626;display:none;}
.field-error.show{display:block;}
textarea.field-input{resize:vertical;min-height:80px;}
.login-prompt{background:#D9E9FB;border-radius:10px;padding:14px 18px;font-size:13.5px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.login-prompt p{margin:0;color:var(--ink);}
.payment-methods{display:flex;flex-direction:column;gap:0;}
.pm-option{border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden;transition:.15s;}
.pm-option.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(26,163,166,.18);}
.pm-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;background:#fff;user-select:none;}
.pm-header input[type="radio"]{width:18px;height:18px;accent-color:var(--teal);flex-shrink:0;}
.pm-title{font-weight:600;font-size:14.5px;color:var(--navy);flex:1;}
.pm-logos{display:flex;gap:6px;align-items:center;}
.pm-logo{height:20px;background:#F1F4F6;border-radius:3px;padding:2px 7px;font-size:9px;font-weight:800;color:var(--muted);white-space:nowrap;display:flex;align-items:center;}
/* real brand logos (assets/img/pay). Header shows the company logo sized by
   height; the method strips + cart use a uniform box so mixed logos align. */
/* Uniform logo chips: every brand logo sits centered in an identical white
   rounded box, so mixed-ratio logos (wide wordmarks vs square icons) all read
   as the same size. */
.pm-logo-img{display:block;flex-shrink:0;object-fit:contain;box-sizing:border-box;background:#fff;border:1px solid #E6EBEF;border-radius:7px;}
.pm-header .pm-logos .pm-logo-img{height:38px;width:104px;padding:5px 9px;}
.pm-methods{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.pm-methods-lbl{font-size:12px;color:var(--muted);margin-right:2px;}
.pm-methods .pm-logo-img,.pay-icons .pm-logo-img{height:34px;width:54px;padding:4px 7px;}
.pay-icons{gap:10px;}
@media(max-width:520px){.pm-header .pm-logos .pm-logo-img{height:32px;width:90px;}}
.pm-body{display:none;padding:0 18px 18px;background:#FAFBFC;border-top:1px solid var(--line);}
.pm-option.selected .pm-body{display:block;}
.pm-desc{font-size:13.5px;color:var(--muted);padding-top:14px;}
#acg-payment-element{margin-top:16px;min-height:64px;}
.pm-pay-note{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;color:var(--muted);}
.pm-pay-note svg{width:14px;height:14px;stroke:var(--teal-dark);fill:none;stroke-width:2;flex-shrink:0;}
.pm-config-warn{margin-top:14px;font-size:13px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;border-radius:8px;padding:10px 14px;}
.bank-details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-top:14px;}
.bank-detail-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid #F1F4F6;font-size:13.5px;}
.bank-detail-row:last-child{border-bottom:none;}
.bank-detail-row .bk-label{font-weight:600;color:var(--navy);min-width:120px;flex-shrink:0;}
.bank-detail-row .bk-val{color:var(--muted);}
.os-item{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;}
.os-item-info{flex:1;}
.os-item-name{font-weight:700;font-size:14px;color:var(--navy);}
.os-item-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.os-item-qty{font-size:12px;color:var(--muted);font-weight:600;}
.os-item-price{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap;}
.os-lines{padding:12px 24px;}
.checkout-page .os-body{padding:0;}
.checkout-page .os-line{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-bottom:1px solid #F1F4F6;}
.checkout-page .os-line:last-of-type{border-bottom:none;}
.os-line .lb{color:var(--muted);}
.os-line .vl{font-weight:600;color:var(--navy);}
.os-line .vl.teal{color:var(--teal-dark);}
.os-total-row{padding:14px 24px 0;border-top:2px solid var(--navy);margin:0 24px;display:flex;justify-content:space-between;align-items:center;}
.os-total-row .tlabel{font-weight:700;color:var(--navy);font-size:15px;}
.os-total-row .tamount{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--navy);}
.checkout-page .os-foot{padding:18px 24px 22px;}
.checkout-page .os-foot .btn{width:100%;justify-content:center;font-size:16px;padding:15px;}
.os-secure{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:var(--muted);margin-top:10px;}
.os-secure svg{width:14px;height:14px;stroke:var(--teal-dark);fill:none;stroke-width:2;}
.os-terms{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6;}
.co-trust-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px 24px;border-top:1px solid var(--line);}
.co-trust-item{text-align:center;font-size:11px;color:var(--muted);}
.co-trust-item svg{width:20px;height:20px;stroke:var(--teal-dark);fill:none;stroke-width:1.8;display:block;margin:0 auto 4px;}

/* confirmation state */
.confirm-page{text-align:center;padding:64px 24px;}
.confirm-icon{width:80px;height:80px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;}
.confirm-icon svg{width:40px;height:40px;stroke:var(--teal-dark);fill:none;stroke-width:2;}
.confirm-page h1{font-size:32px;margin-bottom:12px;color:var(--navy);}
.confirm-page p{max-width:500px;margin:0 auto 28px;font-size:16px;}
.confirm-order-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;max-width:520px;margin:0 auto 28px;text-align:left;}
.confirm-order-box h3{margin-bottom:16px;font-size:16px;}
.confirm-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px solid #F1F4F6;gap:16px;}
.confirm-row:last-child{border-bottom:none;}
.confirm-row .cl{color:var(--muted);flex-shrink:0;}
.confirm-row .cv{font-weight:600;color:var(--navy);text-align:right;word-break:break-word;}
.confirm-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

@media(max-width:860px){
  .cart-layout,.checkout-layout{grid-template-columns:1fr;}
  .order-summary{position:static;}
  .co-steps{display:none;}
  .field-row{grid-template-columns:1fr;}
  .co-trust-row{grid-template-columns:1fr 1fr;}
}

/* checkout-flow polish (1.3.1): lift the boxes to match the site's card feel,
   full-width cart CTA (wireframe rule), hide the payment-element slot until
   Stripe actually mounts into it, hover states, mobile breathing room */
.cart-box,.coupon-box,.order-summary,.form-box,.empty-cart,.confirm-order-box{box-shadow:0 14px 36px -26px rgba(21,42,58,.18);}
.cart-page .os-foot .btn{width:100%;justify-content:center;font-size:15px;padding:15px 28px;}
#acg-payment-element:empty{display:none;}
.pm-option{background:#fff;}
.pm-header:hover{background:#FAFBFC;}
.acg-co .breadcrumb{padding:20px 0 14px;}
.co-steps{margin-bottom:36px;}
.qty-val:focus{outline:none;}
/* constant-height price cells so the cart row doesn't jump when the
   strikethrough original price appears in subscription mode */
.cart-table .item-price{min-height:46px;display:flex;flex-direction:column;justify-content:center;}
/* LOCK the cart column widths (fixed table layout) so switching one-time <->
   monthly never reflows the Price/Qty/Total columns to the right */
@media(min-width:641px){
  .cart-table{table-layout:fixed;}
  .cart-table th,.cart-table td{padding-left:16px;padding-right:16px;}
  .cart-table th:nth-child(1),.cart-table td:nth-child(1){width:36%;}
  .cart-table th:nth-child(2),.cart-table td:nth-child(2){width:18%;white-space:nowrap;}
  .cart-table th:nth-child(3),.cart-table td:nth-child(3){width:22%;}
  .cart-table th:nth-child(4),.cart-table td:nth-child(4){width:16%;white-space:nowrap;}
  .cart-table th:nth-child(5),.cart-table td:nth-child(5){width:8%;}
}
/* searchable country selector (custom combobox with flags) */
.country-select{position:relative;}
.country-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;background:#fff;}
.country-trigger .cs-cur{display:flex;align-items:center;gap:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.country-trigger .cs-cur.placeholder{color:var(--muted);}
.country-trigger .cs-chev{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0;transition:.2s;}
.country-select.open .cs-chev{transform:rotate(180deg);}
.country-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 22px 48px -18px rgba(21,42,58,.3);overflow:hidden;}
.country-pop[hidden]{display:none;}
.country-search-wrap{padding:10px;border-bottom:1px solid var(--line);}
.country-search-input{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:9px 12px;font-size:14px;font-family:'Inter',sans-serif;outline:none;}
.country-search-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,163,166,.12);}
.country-options{max-height:244px;overflow-y:auto;margin:0;padding:6px;list-style:none;}
.country-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);}
.country-opt:hover,.country-opt.active{background:var(--teal-light);color:var(--navy);}
.country-opt .flag{font-size:18px;line-height:1;width:22px;text-align:center;flex-shrink:0;}
.country-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px;}
@media(max-width:640px){
  .cart-table th,.cart-table td{padding:14px 12px;}
  .cart-box-head,.sub-toggle-row{padding:16px;}
  .form-box-head{padding:16px;}
  .form-box-body{padding:20px 16px;}
  .os-head,.os-lines,.os-item{padding-left:18px;padding-right:18px;}
  .checkout-page .os-foot,.cart-page .os-foot{padding-left:18px;padding-right:18px;}
  .os-total-row{margin:0 18px;}
  .confirm-page{padding:40px 16px;}
}

/* ============ GUEST POST SERVICES (/guest-post-services/) ============
   Reuses .pkg-* / .custom-order / .calc-box / modal from Link Building
   Packages. Below are the components unique to this page. */
.big-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
.big-stats .big-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center;}
.big-stats .big-stat b{display:block;font-family:'Poppins',sans-serif;font-size:38px;font-weight:800;color:var(--teal-dark);}
.big-stats .big-stat span{font-size:14px;color:var(--muted);margin-top:4px;display:block;}

/* navy brands band — scoped .brand-pill override (the global one is text-only) */
.brands-section{background:var(--navy);padding:48px 0;}
.brands-inner{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center;}
.brands-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7c919c;white-space:nowrap;}
.brands-section .brand-pill{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:#C9D8E0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:8px 18px;white-space:nowrap;}

/* features grid */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;gap:16px;align-items:flex-start;transition:.25s;}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(21,42,58,.22);}
.feat-icon{width:44px;height:44px;border-radius:10px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feat-icon svg{width:22px;height:22px;stroke:var(--teal-dark);fill:none;stroke-width:1.8;}
.feat-card h3{font-size:15px;margin-bottom:4px;}
.feat-card p{font-size:13.5px;margin:0;}

/* coverage pills */
.coverage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
.coverage-pill{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center;font-size:13.5px;font-weight:600;color:var(--navy);}
.coverage-pill .cov-sub{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px;}

/* testimonials */
.testimonials-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;}
.tcard .stars{color:#F59E0B;font-size:16px;margin-bottom:14px;letter-spacing:2px;}
.tcard blockquote{font-size:15px;color:var(--ink);line-height:1.7;font-style:italic;margin:0 0 18px;}
.tcard-author{display:flex;align-items:center;gap:12px;}
.tcard-avatar{width:40px;height:40px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;color:var(--teal-dark);font-size:14px;flex-shrink:0;}
.tcard-name{font-weight:700;font-size:14px;color:var(--navy);}
.tcard-role{font-size:12.5px;color:var(--muted);}

@media(max-width:900px){
  .big-stats,.features-grid,.coverage-grid,.testimonials-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){ .brands-inner{gap:18px;} }

/* --- menu refresh + footer link subtext (synced from sir's revised hi-fi set, 2026-09-24) --- */
.mega-link{align-items:flex-start;}
.mega-link .dot-sm{margin-top:8px;}
.mega-link .ml{display:flex;flex-direction:column;}
.mega-link .ml small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.35;}
.mega-link:hover .ml small{color:var(--teal-dark);opacity:.85;}
footer .f-grid a{display:block;}
footer .f-grid a small{display:block;font-size:11px;color:#7C919C;margin-top:1px;line-height:1.3;}
footer .f-grid a:hover small{color:#8fe9e6;}
.rel-strip{margin:0 0 8px;}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rel-card{display:block;padding:18px 20px;border:1px solid var(--line,#E3EAEE);border-radius:12px;background:#fff;text-decoration:none;color:inherit;}
.rel-card b{display:block;color:var(--teal-dark,#0E7C7B);font-size:15px;margin-bottom:4px;}
.rel-card span{font-size:13px;color:#5F7280;}
.rel-card:hover{border-color:var(--teal-dark,#0E7C7B);}
@media(max-width:900px){.rel-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.rel-grid{grid-template-columns:1fr;}}

/* --- Family tabs (Link Building Packages page, 2026-09-24) --- */
.fam-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;border-bottom:1px solid var(--line);padding-bottom:0;}
.fam-tab{background:transparent;border:none;border-bottom:3px solid transparent;padding:14px 18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-family:inherit;}
.fam-tab b{font-size:15px;color:var(--navy);font-weight:700;}
.fam-tab small{font-size:12px;color:var(--muted);}
.fam-tab.active{border-bottom-color:var(--teal);}
.fam-tab.active b{color:var(--teal-dark);}
.fam-tab:hover:not(.active){border-bottom-color:var(--line);}
.fam-panel{display:none;}
.fam-panel.active{display:block;}
.fam-intro{max-width:760px;margin:24px auto 0;text-align:center;font-size:14.5px;}
@media(max-width:640px){.fam-tabs{overflow-x:auto;flex-wrap:nowrap;}.fam-tab{flex-shrink:0;}}

/* --- Comparison table (Niche Edits vs Guest Posts, 2026-09-24) --- */
.cmp-wrap{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:16px;}
.cmp{width:100%;border-collapse:collapse;background:#fff;min-width:640px;}
.cmp th{background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-align:left;padding:14px 16px;}
.cmp td{padding:12px 16px;border-bottom:1px solid #F1F4F6;font-size:13.5px;color:var(--ink);vertical-align:top;}
.cmp td:first-child{font-weight:600;color:var(--navy);width:200px;}
.cmp tr:last-child td{border-bottom:none;}
.cmp .hi{background:var(--teal-light);}

/* --- Format picker radio cards (Brand Mentions, 2026-09-24) --- */
.pw-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff;transition:.15s;}
.pw-opt:hover{border-color:var(--teal);}
.pw-opt.on{border-color:var(--teal);background:var(--teal-light);}
.pw-opt input{margin-top:4px;accent-color:var(--teal);}
.pw-opt b{display:block;font-size:14.5px;color:var(--navy);}
.pw-opt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;}

/* --- Local SEO "what's included" cards (page-local-seo-services.php, 2026-09-24) --- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;}
.svc ul{margin:14px 0;padding-left:20px;}
.svc li{font-size:13.5px;color:var(--ink);margin-bottom:6px;line-height:1.5;}
.svc-from{display:block;font-size:12.5px;font-weight:600;color:var(--teal-dark);margin-top:4px;}
@media(max-width:800px){.svc-grid{grid-template-columns:1fr;}}

/* --- Price-table category divider rows (page-google-business-profile-management.php, 2026-09-24) --- */
.price-table tr.cat td{background:var(--teal-light);color:var(--teal-dark);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;padding:10px 20px;border-bottom:none;}
.price-table td small{display:block;color:var(--muted);font-size:12px;margin-top:2px;font-weight:400;}

/* menu-fix: match wireframe mega-menu sizing (desktop only) */
@media(min-width:901px){
  .navlinks{position:relative;}
  .navlinks .item:has(> .mega-panel.cols-3),.navlinks .item:has(> .mega-panel.cols-3-featured){position:static;}
  .mega-panel{white-space:normal;}
  .mega-panel.cols-3,.mega-panel.cols-3-featured,.mega-panel.cols-3.align-right{left:0;right:auto;width:min(980px,calc(100vw - 48px));grid-template-columns:repeat(3,minmax(0,1fr)) 240px;}
  .mega-panel.cols-2{width:min(500px,calc(100vw - 48px));grid-template-columns:repeat(2,minmax(0,1fr));}
  .mega-panel.cols-2.align-right{left:auto;right:0;}
  .mega-col{min-width:0;padding:0 18px;overflow:visible;}
  .mega-link{overflow-wrap:anywhere;}
  .mega-feature{margin-left:0;min-width:0;}
  .mega-feature p{overflow-wrap:anywhere;}
}
.f-social-txt a{color:inherit;text-decoration:none;}
.f-social-txt a:hover{color:#8fe9e6;text-decoration:underline;}
.map-ph{overflow:hidden;}
.map-ph iframe{display:block;width:100%;height:100%;border:0;}