/* ============================================================
   SERP Squad — homepage styles (v3)
   Brand (from live site hero): cyan #29c5f6 → blue #2b7ff0 → purple #8b3ff0
   with teal #35dfd4 highlights. Google accent palette for map/search visuals.
   ============================================================ */

:root {
  --brand: #2b7ff0;
  --cyan: #29c5f6;
  --teal: #35dfd4;
  --purple: #8b3ff0;
  --ink: #0e1b33;
  --ink-2: #13224a;
  --g-blue: #4285F4;
  --g-red: #EA4335;
  --g-yellow: #FBBC05;
  --g-green: #34A853;
  --muted: #55617c;
  --bg: #ffffff;
  --bg-soft: #f2f7fd;
  --line: #dfe7f3;
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/%3E%3C/svg%3E");
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 927 1000'%3E%3Cpath d='M462.6,0.0 L542.6,154.9 L554.5,169.8 L561.9,172.7 L576.0,169.8 L659.7,120.8 L604.2,372.9 L603.4,384.0 L607.1,393.6 L619.7,401.8 L630.8,400.3 L640.5,394.4 L752.4,273.5 L782.1,341.7 L791.7,350.6 L813.9,350.6 L915.5,329.1 L877.7,457.4 L876.2,474.4 L886.6,490.0 L925.9,509.3 L704.2,697.6 L699.8,707.9 L700.5,720.5 L727.9,799.9 L512.2,756.9 L495.9,758.3 L484.1,767.2 L480.4,777.6 L480.4,791.7 L488.5,999.3 L437.4,999.3 L445.5,794.7 L445.5,776.9 L440.3,765.0 L427.7,757.6 L413.6,756.9 L197.9,799.9 L225.4,721.3 L226.1,707.2 L222.4,698.3 L0.0,509.3 L38.5,490.7 L46.0,483.3 L49.7,474.4 L48.2,457.4 L7.4,329.1 L111.9,350.6 L134.2,350.6 L143.8,341.7 L173.5,273.5 L285.4,394.4 L295.0,400.3 L306.2,401.8 L318.8,393.6 L322.5,384.0 L321.7,372.9 L266.1,120.8 L349.9,169.8 L359.5,172.7 L371.4,169.8 L387.7,146.8 L462.6,0.0 Z' fill='%237A0C12'/%3E%3C/svg%3E");
  --jack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6' stroke-opacity='1'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23c)' stroke='%23C8102E' stroke-width='4' stroke-opacity='1'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10' stroke-opacity='1'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6' stroke-opacity='1'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='708 67 359 472'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cg id='a' transform='translate(0,-0.324925)'%3E%3Cpath d='M0,0 L0,0.5 L1,0 z'/%3E%3Cpath d='M0,0 L0,-0.5 L1,0 z' transform='rotate(-36,1,0)'/%3E%3C/g%3E%3Cuse href='%23a' transform='scale(-1,1)'/%3E%3Cuse href='%23a' transform='rotate(72,0,0)'/%3E%3Cuse href='%23a' transform='rotate(-72,0,0)'/%3E%3Cuse href='%23a' transform='rotate(-72,0,0) scale(-1,1)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' fill='%23fff' transform='translate(900,120) scale(45.4)'/%3E%3Cuse href='%23p' fill='%23C8102E' transform='translate(900,120) scale(30)'/%3E%3Cg transform='rotate(82,900,240)'%3E%3Cuse href='%23p' fill='%23fff' transform='translate(900,120) rotate(-82) scale(40.4)'/%3E%3Cuse href='%23p' fill='%23C8102E' transform='translate(900,120) rotate(-82) scale(25)'/%3E%3Cuse href='%23p' fill='%23fff' transform='translate(900,380) rotate(-82) scale(45.4)'/%3E%3Cuse href='%23p' fill='%23C8102E' transform='translate(900,380) rotate(-82) scale(30)'/%3E%3C/g%3E%3Cuse href='%23p' fill='%23fff' transform='translate(900,480) scale(50.4)'/%3E%3Cuse href='%23p' fill='%23C8102E' transform='translate(900,480) scale(35)'/%3E%3C/svg%3E");
  --nlflag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='200' fill='%23AE1C28'/%3E%3Crect width='900' height='200' y='200' fill='%23FFFFFF'/%3E%3Crect width='900' height='200' y='400' fill='%2321468B'/%3E%3Cg transform='translate(252,84) scale(1.2819)'%3E%3Cpath d='M0,0 L308,0 L308,51 L305,63 L296,70 L297,78 L302,84 L302,94 L304,97 L308,97 L308,176 L299,177 L297,195 L291,201 L291,208 L282,220 L287,221 L290,226 L296,228 L303,240 L308,240 L308,290 L295,306 L280,316 L260,325 L217,336 L87,336 L38,322 L17,310 L6,300 L0,291 L0,245 L11,245 L15,232 L20,231 L25,224 L30,223 L21,212 L21,205 L16,198 L0,198 L0,143 L8,142 L8,124 L0,122 L0,89 L10,88 L16,79 L16,74 L7,67 L6,57 L1,52 L0,0 Z' fill='%23003CAA'/%3E%3Cg fill='%23F9D616'%3E%3Crect x='17' y='8' width='13' height='26'/%3E%3Crect x='247' y='118' width='12' height='28'/%3E%3Crect x='70' y='301' width='12' height='25'/%3E%3Crect x='124' y='8' width='12' height='21'/%3E%3C/g%3E%3Cpath d='M215,8 L243,8 L243,34 L232,34 L231,8 L226,13 L164,39 L159,44 L167,45 L172,50 L172,45 L176,46 L175,51 L182,51 L187,57 L189,52 L193,54 L190,58 L199,59 L199,85 L194,86 L194,92 L189,97 L190,121 L193,129 L199,134 L184,134 L184,145 L179,155 L187,166 L182,168 L201,207 L202,193 L210,192 L202,170 L201,136 L207,141 L213,141 L224,117 L250,86 L250,77 L242,75 L242,71 L247,67 L257,69 L266,49 L271,54 L276,68 L276,83 L273,96 L268,103 L269,112 L263,117 L260,110 L252,109 L244,115 L229,135 L224,157 L233,188 L236,187 L241,173 L250,191 L251,211 L241,223 L239,233 L257,226 L254,235 L246,242 L263,246 L263,276 L251,277 L251,254 L237,253 L236,266 L228,277 L224,256 L196,228 L194,254 L206,264 L217,266 L212,276 L215,278 L206,288 L210,290 L199,300 L200,310 L193,312 L193,326 L151,328 L150,310 L144,307 L156,299 L165,299 L178,281 L171,272 L162,285 L161,294 L155,287 L156,271 L147,266 L146,260 L153,262 L159,257 L161,241 L141,245 L140,275 L127,275 L121,272 L123,278 L115,278 L118,283 L105,274 L100,281 L91,286 L92,281 L86,274 L77,280 L70,277 L67,279 L66,267 L60,263 L59,256 L55,253 L69,247 L74,242 L74,236 L87,245 L89,253 L104,251 L112,230 L100,227 L84,229 L93,219 L108,216 L109,211 L116,206 L122,207 L119,211 L123,214 L160,213 L151,201 L156,200 L131,181 L128,184 L129,191 L122,185 L116,189 L115,197 L109,187 L103,191 L105,188 L99,186 L89,199 L86,200 L87,197 L84,195 L80,201 L78,200 L75,209 L59,211 L57,208 L55,212 L53,209 L42,207 L42,202 L39,207 L38,202 L31,203 L32,200 L29,200 L25,192 L46,174 L44,172 L35,176 L22,190 L11,190 L14,190 L36,166 L27,159 L25,169 L16,147 L26,148 L25,135 L35,139 L39,127 L47,134 L53,123 L61,135 L70,126 L74,138 L84,134 L83,147 L93,145 L94,137 L85,129 L79,130 L82,121 L77,113 L81,114 L82,110 L79,107 L75,110 L69,108 L75,107 L74,99 L67,99 L68,91 L59,83 L56,84 L60,81 L54,79 L47,87 L41,86 L37,81 L38,76 L45,71 L45,57 L53,61 L57,58 L56,49 L63,53 L66,60 L72,55 L73,47 L79,55 L88,55 L80,34 L82,30 L87,29 L90,33 L85,41 L91,53 L215,8 Z' fill='%23F9D616'/%3E%3C/g%3E%3C/svg%3E");
  --usflag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7410 3900'%3E%3Cpath d='M0,0h7410v3900H0' fill='%23b31942'/%3E%3Cpath d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0' stroke='%23FFF' stroke-width='300'/%3E%3Cpath d='M0,0h2964v2100H0' fill='%230a3161'/%3E%3Cg fill='%23FFF'%3E%3Cg id='s18'%3E%3Cg id='s9'%3E%3Cg id='s5'%3E%3Cg id='s4'%3E%3Cpath id='s' d='M247,90 317.53423,307.082039 132.873218,172.917961H361.126782L176.46577,307.082039z'/%3E%3Cuse href='%23s' y='420'/%3E%3Cuse href='%23s' y='840'/%3E%3Cuse href='%23s' y='1260'/%3E%3C/g%3E%3Cuse href='%23s' y='1680'/%3E%3C/g%3E%3Cuse href='%23s4' x='247' y='210'/%3E%3C/g%3E%3Cuse href='%23s9' x='494'/%3E%3C/g%3E%3Cuse href='%23s18' x='988'/%3E%3Cuse href='%23s9' x='1976'/%3E%3Cuse href='%23s5' x='2470'/%3E%3C/g%3E%3C/svg%3E");
  --radius: 18px;
  --shadow: 0 10px 40px rgba(14, 40, 90, 0.10);
  --shadow-lg: 0 24px 70px rgba(14, 40, 90, 0.18);
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  /* the brand gradient, matching the live hero: cyan top-right → blue → purple bottom-left */
  --grad: radial-gradient(900px 620px at 88% 8%, rgba(53,223,212,0.75), transparent 55%),
          radial-gradient(820px 640px at 0% 100%, rgba(139,63,240,0.8), transparent 55%),
          linear-gradient(120deg, #1fa3ee, #2b7ff0 55%, #35c6e8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; }

.container { width: min(1180px, 92%); margin-inline: auto; }
.container.narrow { width: min(820px, 92%); }

/* ---------- shared text bits ---------- */
.kicker {
  display: inline-block; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
  background: rgba(43, 127, 240, 0.09); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.kicker.light { background: rgba(255,255,255,0.18); color: #fff; }
.section { padding: 96px 0; }
.section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.section-sub { color: var(--muted); font-size: 1.08rem; max-width: 680px; margin-bottom: 44px; }
.hl-blue { color: var(--brand); }
.hl-glow {
  font-style: normal;
  background: linear-gradient(92deg, #aef3ff, #fff 50%, #e2c9ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-family: var(--font-body);
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 13px 28px; font-size: 1rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--purple));
  color: #fff; box-shadow: 0 8px 24px rgba(43, 127, 240, 0.38);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(43, 127, 240, 0.5); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 28px rgba(4, 14, 36, 0.35); }
.btn-dark:hover { transform: translateY(-2px); background: #1a2c55; }
.btn-glass { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.5); backdrop-filter: blur(4px); }
.btn-glass:hover { background: rgba(255,255,255,0.28); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 28px rgba(4,14,36,.25); }
.btn-light:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.page-hero.light .btn-ghost { color: var(--ink); border-color: rgba(14,40,90,0.22); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
/* Client Login: white pill with animated logo-gradient ring + gradient text */
.btn-login { padding: 9px 20px; font-size: 0.92rem; font-weight: 800; color: var(--ink); border: 2.5px solid transparent; white-space: nowrap;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #EA4335, #fbbc05, #34A853, #4285F4, #EA4335) border-box;
  background-size: auto, 250% 100%;
  animation: tbFlow 4.5s linear infinite; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .btn-login .cl-text { background: linear-gradient(90deg, #EA4335, #fbbc05, #34A853, #4285F4, #EA4335);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: tbFlow 4.5s linear infinite; }
}
.btn-login:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(66,133,244,0.55)); }
@media (prefers-reduced-motion: reduce) { .btn-login, .btn-login .cl-text { animation: none; } }
.btn-lg { padding: 16px 34px; font-size: 1.06rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-arrow { transition: transform .18s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* no backdrop-filter here: it would block the glass blur of the dropdown
     panels nested inside (nested backdrop filters don't compose) */
  background: linear-gradient(120deg, rgba(31,163,238,0.96), rgba(43,127,240,0.96) 55%, rgba(53,198,232,0.96));
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: box-shadow .25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 30px rgba(10, 40, 100, 0.35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand-logo { height: 38px; width: auto; }
@media (max-width: 900px) { .brand-logo { height: 30px; } }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links > li { position: relative; }
.nav-links > li > a:not(.btn) {
  display: inline-block; color: #f2f8ff; font-weight: 700; font-size: 0.94rem;
  padding: 10px 13px; border-radius: 10px; transition: background .15s, color .15s;
}
.nav-links > li > a:not(.btn):hover { background: rgba(255,255,255,0.14); color: #fff; }
.caret { font-size: 0.7rem; opacity: .8; margin-left: 2px; }
.nav-cta { margin-left: 10px; }

/* dropdowns */
.sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  list-style: none; padding: 10px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sub-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu, .has-sub.open .sub-menu {
  opacity: 1; visibility: visible; transform: none;
}
.sub-menu a {
  display: block; padding: 9px 14px; border-radius: 9px; color: var(--ink);
  font-weight: 600; font-size: 0.9rem; transition: background .12s, color .12s;
}
.sub-menu a:hover { background: rgba(43,127,240,0.1); color: var(--brand); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .25s; }

/* mega menus */
.has-sub.mega { position: static; }
.sub-menu.mega-panel {
  left: 50%; transform: translate(-50%, 8px);
  width: min(1100px, 94vw); max-height: calc(100vh - 90px); overflow-y: auto;
  display: grid; gap: 8px 44px; padding: 26px 34px 30px;
  border-radius: 0 0 18px 18px;
}
.has-sub.mega:hover .sub-menu, .has-sub.mega:focus-within .sub-menu, .has-sub.mega.open .sub-menu {
  transform: translate(-50%, 0);
}
.sub-menu.mega-panel.mega-2col { grid-template-columns: 1fr 1fr; width: min(580px, 94vw); }
.mega-3col { grid-template-columns: 1fr 1fr 1fr; }
.mega-col { display: flex; flex-direction: column; gap: 2px; align-content: start; }
.mg-head {
  font-family: var(--font-display); font-size: 0.95rem; color: var(--ink);
  margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--bg-soft);
}
.mg-head:first-child { margin-top: 0; }
a.mg-head-link { display: block; text-decoration: none; transition: color .12s; }
a.mg-head-link:hover { color: var(--brand); }
.mg-strong, .mg-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px;
  color: var(--ink); font-size: 0.87rem; transition: background .12s, color .12s, transform .12s;
}
.mg-strong { font-weight: 700; }
.mg-item { font-weight: 500; color: #3c4a66; }
.mg-strong:hover, .mg-item:hover { background: rgba(43,127,240,0.1); color: var(--brand); transform: translateX(3px); }
/* Pay for performance: highlighted in the menu with the moving logo gradient.
   Text only - no border, no pill. */
.mg-hot { font-weight: 800; }
.mg-hot i { color: #EA4335; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mg-hot .mh-text { background: linear-gradient(90deg, #EA4335, #fbbc05, #34A853, #4285F4, #EA4335);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tbFlow 4.5s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .mg-hot .mh-text { animation: none; } }
.mg-strong i, .mg-item i {
  font-style: normal; width: 20px; text-align: center; flex-shrink: 0; font-size: 0.88rem;
  color: var(--brand);
}
.mg-flag { font-size: 1rem !important; }

/* compact variant (Industries) */
.sub-menu.mega-panel.mega-compact { gap: 2px 28px; padding: 18px 26px 22px; width: min(960px, 94vw); }
.mega-compact .mg-item, .mega-compact .mg-strong { padding: 3px 8px; font-size: 0.8rem; gap: 8px; }
.mega-compact .mg-item i, .mega-compact .mg-strong i { font-size: 0.78rem; width: 18px; }
.mega-compact .mg-head { margin: 9px 0 4px; font-size: 0.84rem; padding-bottom: 4px; }
.mega-compact .mg-gap { height: 6px; }
.mg-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 18px; padding-left: 10px; border-left: 2px solid var(--bg-soft); }
.mg-sub .mg-item { font-size: 0.84rem; }
.mg-gap { height: 10px; }
.mg-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px;
  font-size: 0.85rem; font-weight: 800; color: #fff; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--purple)); width: max-content;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mg-more:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(43,127,240,.4); }

/* Portfolio + Resources: two-column panels with described links and real results.
   Scoped under .mega-panel so they outrank the generic ".sub-menu a" block rule. */
.sub-menu.mega-panel.mega-2col.mega-wide { width: min(740px, 94vw); grid-template-columns: 1.05fr 1fr; gap: 8px 36px; }
.mega-panel .mg-card {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
  color: var(--ink); font-size: 0.9rem; transition: background .12s, transform .12s;
}
.mega-panel .mg-card i {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  background: rgba(43,127,240,0.1); color: var(--brand); font-size: 0.95rem; transition: background .12s, color .12s;
}
.mega-panel .mg-card b { display: block; font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.mega-panel .mg-card small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.mega-panel .mg-card:hover { background: rgba(43,127,240,0.08); color: var(--ink); transform: translateX(3px); }
.mega-panel .mg-card:hover b { color: var(--brand); }
.mega-panel .mg-card:hover i { background: var(--brand); color: #fff; }
.mega-panel .mg-stat {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
  color: var(--ink); transition: background .12s, transform .12s;
}
.mega-panel .mg-stat .ms-num {
  flex-shrink: 0; min-width: 78px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.02em; line-height: 1; color: var(--brand);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mega-panel .mg-stat .ms-num { background: linear-gradient(135deg, var(--brand), var(--purple));
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.mega-panel .mg-stat .ms-label { display: block; font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.mega-panel .mg-stat .ms-who { display: block; font-size: 0.74rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.mega-panel .mg-stat:hover { background: rgba(43,127,240,0.08); color: var(--ink); transform: translateX(3px); }
.mega-panel .mg-stat:hover .ms-label { color: var(--brand); }

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--grad);
  padding: 48px 0 64px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-circle {
  position: absolute; right: -6%; top: 8%; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.08) 60%);
  filter: blur(2px);
}
.hero-rings {
  position: absolute; right: -140px; bottom: -180px; width: 520px; height: 520px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 0 60px rgba(255,255,255,0.05), 0 0 0 130px rgba(255,255,255,0.04);
}
.bubble {
  position: absolute; width: 62px; height: 62px; border-radius: 50%;
  box-shadow: 0 12px 30px rgba(10,40,100,0.25);
  animation: floaty 6s ease-in-out infinite;
}
.bubble img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.bubble-1 { left: 46%; top: 34%; animation-delay: 0s; }
.bubble-2 { right: 26%; top: 10%; animation-delay: -1.6s; }
.bubble-3 { right: 6%; top: 16%; animation-delay: -3.1s; }
.bubble-4 { left: 52%; top: 10%; animation-delay: -4.4s; }
@keyframes floaty { 50% { transform: translateY(-14px); } }

.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: .1em; text-transform: uppercase; color: #eaf6ff; margin-bottom: 20px; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #b7ff5e; box-shadow: 0 0 0 0 rgba(183,255,94,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(183,255,94,0); } 100% { box-shadow: 0 0 0 0 rgba(183,255,94,0); } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 800; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(10,40,100,.25); }
.hero h1 .line { display: block; }
.hero h1 .sub-line { font-size: 0.6em; font-weight: 700; color: #eaf6ff; margin-top: 14px; }
.hero-sub { color: #e6f3ff; font-size: 1.12rem; max-width: 540px; margin-bottom: 32px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-proof { display: flex; gap: 36px; list-style: none; flex-wrap: wrap; }
.hero-proof li { display: flex; align-items: center; gap: 10px; }
.hero-proof strong { font-family: var(--font-display); font-size: 1.7rem; color: #fff; }
.hero-proof span { font-size: 0.8rem; color: #d8ecff; line-height: 1.3; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: 0.85rem; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- hero journey animation ---------- */
.journey {
  position: relative; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 22px; padding: 22px; backdrop-filter: blur(8px); min-height: 500px;
  box-shadow: var(--shadow-lg);
}
.jstage { position: absolute; inset: 22px 22px 42px; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.jstage.active { opacity: 1; transform: none; }
html:not(.js) .jstage[data-stage="0"] { opacity: 1; transform: none; }
html:not(.js) .gsuggest li, html:not(.js) .gtyped::before { opacity: 1; transform: none; }
.jcard { background: #fff; color: var(--ink); border-radius: 16px; padding: 20px; height: 100%; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.jcard-head { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.jcard-title { font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-left: 4px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: var(--g-red); } .dot.y { background: var(--g-yellow); } .dot.g { background: var(--g-green); }
.map-glyph { font-size: 1.1rem; }

/* stage 0 — Google search */
.gsearch { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 10px; }
.glogo { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -1px; }
.glogo b { font-weight: 800; }
.gb { color: #4285F4; } .gr { color: #EA4335; } .gy { color: #FBBC05; } .gg { color: #34A853; } .grd { color: #EA4335; }
.gbar {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 12px 18px;
  box-shadow: 0 4px 14px rgba(14,40,90,0.08); font-size: 0.95rem;
}
.gtyped { font-weight: 600; white-space: nowrap; overflow: hidden; }
.gcaret { width: 2px; height: 1.15em; background: var(--brand); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.gmag { opacity: .6; } .gmic { margin-left: auto; }
.gsuggest { list-style: none; width: 100%; max-width: 360px; display: grid; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.gsuggest li { padding: 8px 14px; border-radius: 10px; background: var(--bg-soft); opacity: 0; transform: translateY(8px); }
.jstage.active .gsuggest li { animation: slideUp .4s ease forwards; }
.jstage.active .gsuggest li:nth-child(1) { animation-delay: 2.2s; }
.jstage.active .gsuggest li:nth-child(2) { animation-delay: 2.6s; }
@keyframes slideUp { to { opacity: 1; transform: none; } }
.gsuggest em { font-style: normal; font-weight: 700; color: var(--ink); }

/* stage 1 — organic keywords climbing */
.kw-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kw-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; font-size: 0.86rem;
  opacity: 0; transform: translateY(40px);
}
.jstage.active .kw-row, .seo-panel.active .kw-row { animation: kwRise .7s cubic-bezier(.2,1.2,.4,1) forwards; }
.jstage.active .kw-row:nth-child(1), .seo-panel.active .kw-row:nth-child(1) { animation-delay: .15s; }
.jstage.active .kw-row:nth-child(2), .seo-panel.active .kw-row:nth-child(2) { animation-delay: .35s; }
.jstage.active .kw-row:nth-child(3), .seo-panel.active .kw-row:nth-child(3) { animation-delay: .55s; }
.jstage.active .kw-row:nth-child(4), .seo-panel.active .kw-row:nth-child(4) { animation-delay: .75s; }
@keyframes kwRise { to { opacity: 1; transform: none; } }
.kw { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .kw-row { padding: 9px 10px; gap: 7px; font-size: 0.8rem; }
  .kw-pos { min-width: 36px; font-size: 0.85rem; padding: 3px 6px; }
  .kw-delta { font-size: 0.62rem; padding: 3px 6px; }
}
.kw-pos {
  margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  min-width: 44px; text-align: center; padding: 3px 8px; border-radius: 9px;
  color: var(--g-red); background: rgba(234,67,53,0.1); transition: color .3s, background .3s;
}
.kw-pos.mid { color: #a2701b; background: rgba(251,188,5,0.16); }
.kw-pos.top { color: var(--g-green); background: rgba(52,168,83,0.12); }
.kw-delta {
  font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--g-green);
  padding: 3px 8px; border-radius: 99px; opacity: 0; transform: scale(.6);
}
.jstage.active .kw-delta { animation: popIn .4s cubic-bezier(.2,1.6,.4,1) forwards 2.4s; }
.kw-delta.show { opacity: 1; transform: none; }
@keyframes popIn { to { opacity: 1; transform: none; } }
.kw-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.kw-foot-note { font-weight: 800; font-size: 0.85rem; color: var(--g-green); }
.kw-foot-tag { font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--bg-soft); padding: 4px 10px; border-radius: 99px; }

/* stage 2 — geo-grid (hero, abstract) */
.geo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  width: 100%; max-width: 300px; margin: 0 auto 12px;
  padding: 12px; border-radius: 12px;
  background-image: linear-gradient(rgba(43,127,240,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(43,127,240,.10) 1px, transparent 1px), linear-gradient(135deg, #e8f0e4, #dce8f5);
  background-size: 22px 22px, 22px 22px, cover;
}
.geo-grid i {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.82rem;
  color: #fff; background: var(--g-red); box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  transition: background .35s ease, transform .35s ease;
}
.geo-grid i.mid { background: var(--g-yellow); color: #5c4503; }
.geo-grid i.good { background: var(--g-green); }
.geo-grid i.flip { animation: cellFlip .45s ease; }
@keyframes cellFlip { 40% { transform: scale(1.28); } }
.geo-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.geo-win { font-weight: 800; font-size: 0.88rem; color: var(--ink); }
.tag-up { font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--g-green); padding: 3px 9px; border-radius: 99px; }

/* stage 3 — AI search visibility */
.ai-query {
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 12px 16px; margin-bottom: 14px;
}
.ai-list { list-style: none; display: grid; gap: 10px; }
.ai-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  opacity: 0; transform: translateX(24px);
}
.jstage.active .ai-item { animation: slideIn .5s ease forwards; }
.jstage.active .ai-item:nth-child(1) { animation-delay: .4s; }
.jstage.active .ai-item:nth-child(2) { animation-delay: 1.1s; }
.jstage.active .ai-item:nth-child(3) { animation-delay: 1.8s; }
@keyframes slideIn { to { opacity: 1; transform: none; } }
.ai-logo {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  font-size: 1.05rem; font-style: normal; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
}
.ai-body { display: grid; line-height: 1.35; }
.ai-body strong { font-size: 0.88rem; }
.ai-body em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.ai-check { margin-left: auto; font-weight: 900; color: var(--g-green); font-size: 1.05rem; }

/* stage 4 — leads */
.leads-total { text-align: center; margin-bottom: 8px; }
.leads-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--brand); }
.leads-total small { display: block; color: var(--muted); font-weight: 600; }
.lead-feed { list-style: none; display: grid; gap: 8px; }
.lead-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.83rem; opacity: 0; transform: translateX(24px); }
.jstage.active .lead-item { animation: slideIn .5s ease forwards; }
.jstage.active .lead-item:nth-child(1) { animation-delay: .4s; }
.jstage.active .lead-item:nth-child(2) { animation-delay: .9s; }
.jstage.active .lead-item:nth-child(3) { animation-delay: 1.4s; }
.jstage.active .lead-item:nth-child(4) { animation-delay: 1.9s; }
.li-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-soft); }
.journey-progress { position: absolute; left: 22px; right: 22px; bottom: 18px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.35); overflow: hidden; }
.journey-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff, #b7ff5e); transition: width .2s linear; }

/* ---------- trust bar ---------- */
.trustbar { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 22px 0; }
.trust-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.trust-inner p { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.platforms { display: flex; gap: 12px; list-style: none; flex-wrap: wrap; justify-content: center; }
.platforms li {
  font-size: 0.82rem; font-weight: 700; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); padding: 7px 16px; border-radius: 999px;
  transition: transform .15s ease, border-color .15s ease;
}
.platforms li:hover { transform: translateY(-2px); border-color: var(--cyan); }

/* ---------- video reviews ---------- */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.review-quotes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: center; margin-top: 8px; }
.video-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.video-card figcaption { padding: 16px 20px; }
.video-card figcaption strong { display: block; font-family: var(--font-display); margin-bottom: 4px; }
.video-card figcaption span { color: var(--muted); font-size: 0.92rem; font-style: italic; }
.yt-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; border-radius: inherit; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: transform .3s ease, opacity .3s ease; }
.yt-thumb:hover img { transform: scale(1.04); opacity: 1; }
.yt-play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 1.5rem; color: #fff; padding-left: 5px;
  background: rgba(234, 67, 53, 0.94); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform .2s ease, background .2s ease;
}
.yt-thumb:hover .yt-play { transform: scale(1.12); background: var(--g-red); }
.yt-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quote-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.stars { color: var(--g-yellow); letter-spacing: 3px; margin-bottom: 8px; }
.quote-card p { font-size: 0.95rem; }
.quote-card footer { margin-top: 10px; font-weight: 700; font-size: 0.85rem; }
.quote-src { color: var(--muted); font-weight: 500; }

/* ---------- service sections (shared) ---------- */
.svc-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.svc-inner > * { min-width: 0; }
.svc-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 26px; max-width: 560px; }
.svc-points { list-style: none; display: grid; gap: 16px; margin-bottom: 30px; }
.svc-points li { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; border-radius: 12px; transition: transform .18s ease; }
.svc-points li:hover { transform: translateX(6px); }
.pt-icon {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.2rem;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
}
.svc-points strong { display: block; font-size: 0.98rem; }
.svc-points em { font-style: normal; font-size: 0.88rem; color: var(--muted); }
.svc-points.on-dark strong { color: #fff; }
.svc-points.on-dark em { color: #dcefff; }
.svc-points.on-dark .pt-icon { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.media-frame { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); width: 100%; }

/* website design section */
.svc-web { background: #fff; }
.marquee { overflow: hidden; margin-top: 16px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 24s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  white-space: nowrap; font-size: 0.82rem; font-weight: 700; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* SEO section */
.svc-seo { background: var(--bg-soft); }
.seo-demo { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.seo-tabs { display: flex; border-bottom: 1px solid var(--line); background: #fbfdff; flex-wrap: wrap; }
.seo-tab {
  flex: 1; min-width: 160px; padding: 16px 12px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.94rem; color: var(--muted);
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s, background .15s;
}
.seo-tab:hover { background: var(--bg-soft); color: var(--ink); }
.seo-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.seo-panels { position: relative; }
.seo-panel { display: none; grid-template-columns: 1fr 1.1fr; gap: 40px; padding: 36px; align-items: center; }
.seo-panel.active { display: grid; animation: panelIn .4s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.panel-copy h3 { font-size: 1.35rem; margin-bottom: 10px; }
.panel-copy p { color: var(--muted); font-size: 0.96rem; margin-bottom: 16px; }
.mini-points { list-style: none; display: grid; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.kw-list.light .kw-row { opacity: 1; transform: none; }

/* 3-pack visual — styled like a real Google "Businesses" local pack */
.gpack {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; font-family: arial, var(--font-body);
}
.gpack-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.gpack-glogo { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.5px; }
.gpack-glogo b { font-weight: 800; }
.gpack-query {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 1px 5px rgba(14,40,90,0.08);
}
.gpack-query i { font-style: normal; color: #9aa4b8; font-size: 0.7rem; }
.gpack-head { font-size: 1.05rem; font-weight: 700; color: #202124; padding: 12px 16px 4px; }
.gpack-list { display: grid; }
.gpack-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #ebedf0;
}
.gpack-item.you {
  border: 2.5px solid #a45df0; border-radius: 10px; margin: 2px 8px 6px;
  background: #fdfbff; box-shadow: 0 4px 14px rgba(164,93,240,0.15);
}
.you-flag {
  position: absolute; top: -10px; right: 10px; font-size: 0.62rem; font-weight: 800;
  font-family: var(--font-body); color: #fff; background: #a45df0; padding: 2px 9px; border-radius: 99px;
}
.gpack-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gpack-info h4, .gpack-info .gpack-name { font-family: arial, var(--font-body); font-weight: 400; font-size: 0.98rem; color: #202124; }
.gpack-item.you .gpack-info h4, .gpack-info .gpack-name { font-weight: 700; }
.gpack-rating { font-size: 0.74rem; color: #70757a; }
.gpack-rating .gstars { color: #fbbc04; letter-spacing: 1px; }
.gstar-dim { color: #dadce0; letter-spacing: 1px; }
.gcount { color: #70757a; }
.gpack-meta { font-size: 0.74rem; color: #70757a; }
.gopen { color: #188038; font-weight: 600; }
.gpack-quote { font-size: 0.73rem; color: #4d5156; margin-top: 3px; }
.gpack-actions { display: flex; gap: 12px; flex-shrink: 0; }
.gact { display: grid; justify-items: center; gap: 3px; cursor: pointer; }
.gact i {
  width: 36px; height: 36px; display: grid; place-items: center; font-style: normal;
  border: 1px solid #dadce0; border-radius: 50%; font-size: 0.85rem; color: #1a73e8;
  background: #fff; transition: box-shadow .15s ease, transform .15s ease;
}
.gact:hover i { box-shadow: 0 2px 8px rgba(26,115,232,0.3); transform: translateY(-1px); }
.gact em { font-style: normal; font-size: 0.66rem; font-weight: 600; color: #1a73e8; }
.gpack-more {
  margin: 10px auto 14px; width: max-content; font-size: 0.8rem; font-weight: 600; color: #202124;
  background: #f1f3f4; padding: 8px 22px; border-radius: 999px; cursor: pointer; transition: background .15s;
}
.gpack-more:hover { background: #e4e7ea; }

/* geo map (Google-Maps style, in SEO section) */
.geo-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.geo-map-svg { display: block; width: 100%; height: auto; }
.geo-pins {
  position: absolute; inset: 0 0 34px 0; display: grid;
  grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  place-items: center; padding: 10px;
}
.gp {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.3); border: 2px solid #fff;
  transition: transform .15s ease;
}
.gp:hover { transform: scale(1.25); z-index: 2; }
.gp.good { background: var(--g-green); }
.gp.mid { background: var(--g-yellow); color: #5c4503; }
.gp.bad { background: var(--g-red); }
.gp.you-cell { background: var(--brand); font-size: 1rem; }
.geo-legend {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; flex-wrap: wrap;
  background: rgba(255,255,255,0.94); padding: 7px 12px; font-size: 0.72rem; font-weight: 700; color: var(--ink-2);
}
.geo-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg.good { background: var(--g-green); } .lg.mid { background: var(--g-yellow); } .lg.bad { background: var(--g-red); }

/* AI section (gradient background) */
.svc-ai { background: var(--grad); color: #fff; position: relative; overflow: hidden; }
.svc-ai h2 { color: #fff; }
.svc-ai .svc-lead { color: #e6f3ff; }
.ai-chat-demo { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 18px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.ai-providers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-prov {
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; padding: 7px 13px; border-radius: 999px;
  cursor: pointer; transition: background .15s, transform .15s;
}
.ai-prov:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.ai-prov.active { background: #fff; color: var(--ink); }
.ai-chat { background: #fff; color: var(--ink); border-radius: 14px; padding: 18px; display: grid; gap: 12px; }
.chat-q {
  justify-self: end; max-width: 85%; background: var(--brand); color: #fff; font-weight: 600; font-size: 0.92rem;
  padding: 10px 16px; border-radius: 16px 16px 4px 16px;
}
.chat-a { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 14px 16px; }
.chat-a-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prov-dot { width: 12px; height: 12px; border-radius: 50%; background: #10A37F; }
.prov-name { font-weight: 800; font-size: 0.88rem; }
.prov-badge { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--g-green); padding: 3px 9px; border-radius: 99px; }
.chat-a-text { font-size: 0.92rem; }
.chat-note { font-size: 0.8rem; color: var(--muted); text-align: center; }

/* listings section */
.svc-listings { background: #fff; }
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.listing-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.listing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.listing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.listing-card:hover::before { transform: scaleX(1); }
.lc-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; font-size: 1.4rem; border-radius: 13px; background: color-mix(in srgb, var(--accent) 12%, #fff); margin-bottom: 14px; }
.listing-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.listing-card p { color: var(--muted); font-size: 0.9rem; }

/* brand section */
.svc-brand { background: var(--bg-soft); }
.brand-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.bstat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: transform .18s ease; }
.bstat:hover { transform: translateY(-4px); }
.bstat strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--brand); }
.bstat span { font-size: 0.8rem; color: var(--muted); font-weight: 600; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin-top: 42px; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.step-num {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff;
  background: var(--accent); border-radius: 50%; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .2s ease;
}
.step:hover .step-num { transform: scale(1.12); }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.88rem; color: var(--muted); }

/* ---------- case studies ---------- */
.case-studies { background: #fff; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 34px; }
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.case-body { padding: 22px 24px; }
.case-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); padding: 4px 12px; border-radius: 99px; margin-bottom: 10px; }
.case-body h3 { font-size: 1.25rem; margin-bottom: 8px; }
.case-body > p { color: var(--muted); font-size: 0.94rem; margin-bottom: 16px; }
.case-stats { list-style: none; display: flex; gap: 26px; border-top: 1px solid var(--line); padding-top: 16px; flex-wrap: wrap; }
.case-stats strong { display: block; font-family: var(--font-display); font-size: 1.45rem; color: var(--brand); }
.case-stats span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.case-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-shots img { border-radius: 14px; border: 1px solid var(--line); width: 100%; }

/* ---------- results band ---------- */
.results-band { background: var(--grad); color: #fff; padding: 56px 0; }
.results-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.result strong { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; color: #fff; text-shadow: 0 2px 16px rgba(10,40,100,.3); }
.result span { color: #e6f3ff; font-size: 0.9rem; font-weight: 600; }

/* ---------- audit / form ---------- */
.audit { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.audit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 480px at 90% 0%, rgba(43,127,240,0.35), transparent 60%),
              radial-gradient(600px 480px at 0% 100%, rgba(139,63,240,0.3), transparent 55%);
}
.audit-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.audit h2 { color: #fff; }
.audit-copy > p { color: #c4d6f2; font-size: 1.05rem; margin-bottom: 22px; max-width: 500px; }
.audit-points { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; }
.audit-points li { color: #e2eeff; font-size: 0.96rem; }
.audit-figure img { border-radius: 14px; border: 1px solid rgba(255,255,255,0.15); }
.lead-form { background: #fff; color: var(--ink); border-radius: 20px; padding: 30px; box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.lead-form h3, .lead-form .form-title { font-family: var(--font-display); line-height: 1.15; font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-form label { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.lead-form input, .lead-form select, .lead-form textarea {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease; width: 100%;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41,197,246,0.18); background: #fff;
}
.form-note { font-size: 0.78rem; color: var(--muted); text-align: center; }
.form-status { font-weight: 700; font-size: 0.9rem; text-align: center; min-height: 1.2em; }
.form-status.ok { color: var(--g-green); }
.form-status.err { color: var(--g-red); }

/* ---------- FAQ ---------- */
.faq { background: var(--bg-soft); }
.faq-list { display: grid; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .2s; }
.faq-item[open] { border-color: var(--cyan); box-shadow: var(--shadow); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { font-size: 1.3rem; color: var(--brand); transition: transform .25s ease; flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--muted); }

/* ---------- final CTA ---------- */
.final-cta { background: var(--grad); padding: 90px 0; text-align: center; color: #fff; }
.final-inner h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: 14px; color: #fff; text-shadow: 0 2px 24px rgba(10,40,100,.25); }
.final-inner > p { color: #e6f3ff; font-size: 1.08rem; margin-bottom: 30px; }
.inline-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; background: none; box-shadow: none; padding: 0; }
.inline-form input { max-width: 240px; background: #fff; border-radius: 999px; }
.inline-form .form-status { flex-basis: 100%; color: #fff; }
.inline-form .form-status.ok { color: #b7ff5e; }
.inline-form .form-status.err { color: #ffd7d7; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #b9c8e4; padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.05fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .contact-list { margin: 14px 0 16px; }
.footer-brand img { margin-bottom: 16px; }
.footer-brand p { font-size: 0.92rem; margin-bottom: 16px; }
.social-link { color: #fff; font-weight: 700; font-size: 0.9rem; background: rgba(255,255,255,0.08); padding: 8px 16px; border-radius: 10px; display: inline-block; }
.social-link:hover { background: var(--g-red); }
.site-footer h3 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer ul a { color: #b9c8e4; font-size: 0.92rem; }
.site-footer ul a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.85rem; flex-wrap: wrap; gap: 10px; }
.back-top { color: #b9c8e4; font-weight: 600; }
.back-top:hover { color: #fff; }

/* ---------- hero mini 3-pack ---------- */
.gpack.mini { border: 1px solid var(--line); box-shadow: none; border-radius: 12px; display: flex; flex-direction: column; }
.gpack.mini .gpack-head { padding: 8px 14px 2px; font-size: 0.92rem; }
.gpack.mini .gpack-item { padding: 8px 14px; gap: 8px; }
.gpack.mini .gpack-item.you { margin: 2px 6px 4px; padding: 10px 14px; }
.gpack.mini .gpack-info h4, .gpack-info .gpack-name { font-size: 0.9rem; }
.gpack.mini .gact i { width: 30px; height: 30px; font-size: 0.75rem; }
.gpack.mini .gpack-more { margin: 8px auto 10px; padding: 6px 18px; font-size: 0.75rem; }
.jstage .gpack-item { opacity: 0; transform: translateY(18px); }
.jstage.active .gpack-item { animation: kwRise .55s cubic-bezier(.2,1.2,.4,1) forwards; }
.jstage.active .gpack-item:nth-child(1) { animation-delay: .2s; }
.jstage.active .gpack-item:nth-child(2) { animation-delay: .55s; }
.jstage.active .gpack-item:nth-child(3) { animation-delay: .85s; }

/* ---------- hero geo-grid on a real map ---------- */
.hero-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.hero-map-svg { display: block; width: 100%; height: auto; }
.hmap-pins { position: absolute; inset: 4px 0; display: flex; flex-direction: column; justify-content: space-around; }
.hrow { display: flex; justify-content: center; gap: 26px; }
.hrow:nth-child(even) { gap: 30px; }
.hp {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem;
  color: #fff; background: var(--g-green); border: 2.5px solid #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
  opacity: 0; transform: scale(0);
}
.hp.o { background: #F7A400; }
.hp.you { outline: 3px solid rgba(43,127,240,0.55); outline-offset: 1px; }
.jstage.active .hp { animation: pinPop .4s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay: var(--d, 0s); }
@keyframes pinPop { to { opacity: 1; transform: scale(1); } }

/* ---------- website-features animated showcase ---------- */
.web-demo { display: grid; gap: 10px; }
.wd-frame { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.wd-head { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.wd-url { margin-left: 8px; font-size: 0.8rem; font-weight: 700; color: var(--muted); background: var(--bg-soft); padding: 4px 14px; border-radius: 999px; }
.wd-scenes { position: relative; height: 250px; }
.wd-scene {
  position: absolute; inset: 0; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.wd-scene.active { opacity: 1; transform: none; }
.wd-score { text-align: center; font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--g-green); line-height: 1; }
.wd-score small { font-size: 1.4rem; }
.wd-score-cap { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 18px; }
.wd-bars { display: grid; gap: 10px; }
.wd-bar { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.wd-bar i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--g-green)); width: 0; }
.wd-scene.active .wd-bar i { animation: barFill 1s ease forwards .3s; }
@keyframes barFill { to { width: var(--w); } }
.wd-bar em { font-style: normal; color: var(--g-green); font-weight: 800; text-align: right; }
.wd-checks { list-style: none; display: grid; gap: 11px; font-size: 0.92rem; font-weight: 600; }
.wd-checks li { opacity: 0; transform: translateX(16px); }
.wd-scene.active .wd-checks li { animation: slideIn .4s ease forwards; }
.wd-scene.active .wd-checks li:nth-child(1) { animation-delay: .1s; }
.wd-scene.active .wd-checks li:nth-child(2) { animation-delay: .35s; }
.wd-scene.active .wd-checks li:nth-child(3) { animation-delay: .6s; }
.wd-scene.active .wd-checks li:nth-child(4) { animation-delay: .85s; }
.wd-scene.active .wd-checks li:nth-child(5) { animation-delay: 1.1s; }
.wd-cta-demo { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 16px; }
.wd-cta-btn {
  display: inline-block; font-weight: 800; font-size: 1rem; color: #fff; padding: 13px 34px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--purple)); box-shadow: 0 8px 22px rgba(43,127,240,.4);
}
.wd-cta-btn.alt { background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; font-size: 0.9rem; padding: 10px 26px; }
.wd-cta-btn.pulse { animation: ctaPulse 1.6s ease-in-out infinite; }
@keyframes ctaPulse { 50% { transform: scale(1.06); box-shadow: 0 12px 30px rgba(43,127,240,.55); } }
.wd-cap { text-align: center; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.wd-booking { display: grid; gap: 10px; margin-bottom: 14px; }
.wd-row { display: flex; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 0.88rem; color: var(--muted); }
.wd-row b { color: var(--ink); }
.wd-confirm { text-align: center; font-weight: 800; color: #fff; background: var(--g-green); border-radius: 10px; padding: 11px; }
.wd-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.wd-label { font-weight: 800; font-size: 0.9rem; color: var(--ink); }
.wd-dots { display: flex; gap: 7px; }
.wd-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c6d4ea; transition: background .2s, transform .2s; }
.wd-dots i.active { background: var(--brand); transform: scale(1.3); }

/* ---------- apple-style glass for tinted sections ---------- */
.svc-seo, .svc-brand, .faq {
  background:
    radial-gradient(700px 380px at 92% 0%, rgba(41,197,246,0.18), transparent 60%),
    radial-gradient(620px 380px at 2% 100%, rgba(139,63,240,0.13), transparent 55%),
    linear-gradient(180deg, #f7fbff, #edf3fc);
}
.seo-demo, .faq-item, .bstat, .quote-card {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-color: rgba(255,255,255,0.8);
}
.seo-tabs { background: rgba(255,255,255,0.4); }
.trustbar {
  background:
    radial-gradient(500px 200px at 80% 0%, rgba(41,197,246,0.12), transparent 60%),
    linear-gradient(180deg, #f5faff, #eff5fd);
}

/* ---------- inner pages ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--grad); color: #fff; padding: 60px 0 56px; }
.page-hero h1 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); max-width: 880px; margin: 12px 0 14px; }
.page-hero .lead { color: #e6f3ff; font-size: 1.08rem; max-width: 660px; }
.page-hero.dark { background: var(--ink); }
.page-hero.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 420px at 90% 0%, rgba(43,127,240,.42), transparent 60%), radial-gradient(520px 360px at 0% 100%, rgba(139,63,240,.35), transparent 55%); }
.page-hero.dark .container { position: relative; }

/* Canada: the field IS the flag red, FIP Pantone 032 / RGB 235,45,55. White on flat
   #EB2D37 measures 4.23:1, just under AA for body text, so one soft vignette sits
   behind the copy on the left and lifts it past 4.5:1. Everything from mid-page
   rightward stays exactly #EB2D37. Overlay is the flag's own maple leaf. */
.page-hero.flag-ca { background: #EB2D37; }
.page-hero.flag-ca::before { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 120% at -8% 45%, rgba(122,12,18,.15), rgba(122,12,18,0) 70%); }
.page-hero.flag-ca .container { position: relative; z-index: 1; }
.page-hero.flag-ca::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -6%; top: 50%; transform: translateY(-50%); width: min(660px, 48%); aspect-ratio: 927 / 1000;
  background: var(--leaf) center/contain no-repeat; opacity: .30; }
@media (max-width: 900px) { .page-hero.flag-ca::after { left: 50%; width: 116%; opacity: .20; transform: translate(-50%, -50%); } }
.wl-theme .page-hero.flag-ca::after { opacity: .10; }
.page-hero.flag-ca .lead { color: #fff; }
.page-hero.flag-ca .breadcrumbs { color: #fff; }
.page-hero.flag-ca .stat-chips li { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
/* Netherlands: the royal orange, Pantone 165 (#FF8200), with DARK type. White on this
   orange measures only 2.49:1 and darkening the field enough to fix that would destroy the
   colour, so the text goes dark instead (6.9:1) and the orange stays exactly as it is.
   Overlay is the national flag with the arms on it, as on a state flag. */
.page-hero.flag-nl { background: #FF8200; color: var(--ink); }
.page-hero.flag-nl .container { position: relative; z-index: 1; }
.page-hero.flag-nl .lead { color: #2a1400; }
.page-hero.flag-nl .hero-kw { color: #3b1d00; }
.page-hero.flag-nl .breadcrumbs, .page-hero.flag-nl .breadcrumbs a { color: var(--ink); }
.page-hero.flag-nl .kicker.light { background: rgba(20,10,0,.14); color: var(--ink); }
.page-hero.flag-nl .stat-chips li { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.85); color: var(--ink); }
.page-hero.flag-nl .btn-ghost { color: var(--ink); border-color: rgba(20,10,0,.38); }
.page-hero.flag-nl .btn-ghost:hover { background: rgba(20,10,0,.10); }
.page-hero.flag-nl::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -6%; top: -12%; width: min(940px, 62%); aspect-ratio: 3 / 2;
  -webkit-mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  background: var(--nlflag) center/contain no-repeat; opacity: .20; }
@media (max-width: 900px) { .page-hero.flag-nl::after { left: -12%; top: -5%; width: 122%; opacity: .15; } }
.wl-theme .page-hero.flag-nl { background: transparent; }
.wl-theme .page-hero.flag-nl::after { opacity: .10; }

/* Legibility over the flag overlays. Backgrounds are unchanged; the light tints used for
   the lead, keyword line and breadcrumbs go to pure white, and a soft shadow separates the
   type from the pattern behind it. */
.page-hero[class*="flag-"] .lead,
.page-hero[class*="flag-"] .hero-kw,
.page-hero[class*="flag-"] .breadcrumbs,
.page-hero[class*="flag-"] .breadcrumbs a { color: #fff; }
.page-hero.flag-nl .lead, .page-hero.flag-nl .hero-kw,
.page-hero.flag-nl .breadcrumbs, .page-hero.flag-nl .breadcrumbs a { color: var(--ink); }
.page-hero.flag-nl h1, .page-hero.flag-nl .lead, .page-hero.flag-nl .hero-kw,
.page-hero.flag-nl .breadcrumbs { text-shadow: none; }
.page-hero.flag-nl .stat-chips li { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.85); color: var(--ink); }
.page-hero[class*="flag-"] h1,
.page-hero[class*="flag-"] .lead,
.page-hero[class*="flag-"] .hero-kw,
.page-hero[class*="flag-"] .breadcrumbs { text-shadow: 0 1px 3px rgba(4,14,36,.38); }
.page-hero[class*="flag-"] .stat-chips li { background: rgba(6,22,58,.30); border-color: rgba(255,255,255,.30); color: #fff; }

/* Flag-derived hero variants. Names are namespaced (flag-*) because a bare word like
   "stars" collides with the site's star-rating class and silently inherits its styles. */
/* Australia + New Zealand: Australian/NZ flag blue, Pantone 280 = #012169. */
.page-hero.flag-au, .page-hero.flag-nz { background: #012169; }
.page-hero.flag-au::before, .page-hero.flag-nz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 108% 110%, rgba(0,10,45,.55), rgba(0,10,45,0) 72%); }
.page-hero.flag-au .container, .page-hero.flag-nz .container { position: relative; z-index: 1; }
/* Australia: Union Jack from the canton, top-left, masked so it dissolves into the hero. */
.page-hero.flag-au::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -8%; top: -14%; width: min(960px, 64%); aspect-ratio: 2 / 1;
  -webkit-mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  background: var(--jack) center/contain no-repeat; opacity: .17; }
@media (max-width: 900px) { .page-hero.flag-au::after { left: -14%; top: -6%; width: 128%; opacity: .13; } }
/* New Zealand: Southern Cross instead of the Jack. Star centres, radii and the 82-degree
   short-limb rotation follow the statutory construction. */
.page-hero.flag-nz::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 1%; top: 50%; transform: translateY(-50%); width: min(470px, 34%); aspect-ratio: 359 / 472;
  background: var(--cross) center/contain no-repeat; opacity: .17; }
@media (max-width: 900px) { .page-hero.flag-nz::after { left: 6%; top: 8%; transform: none; width: 60%; opacity: .16; } }
.wl-theme .page-hero.flag-au, .wl-theme .page-hero.flag-nz { background: transparent; color: var(--ink); }
.wl-theme .page-hero.flag-au::before, .wl-theme .page-hero.flag-nz::before { background: none; }
.wl-theme .page-hero.flag-au::after, .wl-theme .page-hero.flag-nz::after { opacity: .10; }
.wl-theme .page-hero.flag-au .lead, .wl-theme .page-hero.flag-nz .lead { color: var(--muted); }
/* United Kingdom: our own brand blue (--brand #2b7ff0) rather than a flag colour, with the
   Union Jack behind the content. Flat brand blue gives white text only 3.89:1, so a soft
   left vignette lifts the text column over AA while the rest of the field stays #2b7ff0. */
.page-hero.flag-uk { background: var(--brand); }
.page-hero.flag-uk::before { content: ""; position: absolute; inset: 0; background: radial-gradient(84% 128% at -6% 45%, rgba(8,42,102,.62), rgba(8,42,102,0) 74%); }
.page-hero.flag-uk .container { position: relative; z-index: 1; }
.page-hero.flag-uk::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -8%; top: -14%; width: min(960px, 64%); aspect-ratio: 2 / 1;
  -webkit-mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(115% 125% at 0% 0%, #000 28%, rgba(0,0,0,0) 76%);
  background: var(--jack) center/contain no-repeat; opacity: .17; }
@media (max-width: 900px) { .page-hero.flag-uk::after { left: -14%; top: -6%; width: 128%; opacity: .13; } }
.page-hero.flag-uk .lead, .page-hero.flag-uk .hero-kw, .page-hero.flag-uk .breadcrumbs { color: #fff; }
.wl-theme .page-hero.flag-uk { background: transparent; color: var(--ink); }
.wl-theme .page-hero.flag-uk::before { background: none; }
.wl-theme .page-hero.flag-uk::after { opacity: .10; }
.wl-theme .page-hero.flag-uk .lead { color: var(--muted); }
/* United States: hero gradient left exactly as it was. The national flag sits
   behind the content, top-left, from the EO 10834 construction: 7410x3900 field, 13 stripes,
   union 2964x2100, 50 stars in the 6/5 offset grid. Masked so it dissolves into the hero. */
.page-hero.flag-us .container { position: relative; z-index: 2; }
.page-hero.flag-us::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(92% 142% at -8% 40%, rgba(6,30,82,.58), rgba(6,30,82,0) 76%); }
.page-hero.flag-us::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -7%; top: -13%; width: min(1000px, 66%); aspect-ratio: 7410 / 3900;
  -webkit-mask-image: radial-gradient(115% 125% at 0% 0%, #000 30%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(115% 125% at 0% 0%, #000 30%, rgba(0,0,0,0) 78%);
  background: var(--usflag) center/contain no-repeat; opacity: .16; }
@media (max-width: 900px) { .page-hero.flag-us::after { left: -10%; top: -5%; width: 118%; opacity: .20; } }
.wl-theme .page-hero.flag-us::after { opacity: .10; }
/* Pay for performance hero: the homepage blue gradient. The bare gradient leaves
   body copy at ~3.1:1, so a soft left vignette lifts the text column over AA while
   the rest of the field keeps the homepage colour exactly. */
.page-hero.p4p::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(92% 142% at -8% 40%, rgba(6,30,82,.58), rgba(6,30,82,0) 76%); }
.page-hero.p4p .container { position: relative; z-index: 2; }
.page-hero.p4p .lead, .page-hero.p4p .hero-kw,
.page-hero.p4p .breadcrumbs, .page-hero.p4p .breadcrumbs a { color: #fff; }
.page-hero.p4p h1, .page-hero.p4p .lead { text-shadow: 0 1px 3px rgba(4,14,36,.38); }
.page-hero.p4p .stat-chips li { background: rgba(6,22,58,.30); border-color: rgba(255,255,255,.30); color: #fff; }
.page-hero.light { background: linear-gradient(180deg, #f2f9ff, #e8f2fd); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero.light .lead { color: var(--muted); }
.breadcrumbs { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a { color: #fff; }
.breadcrumbs a:hover { text-decoration: underline; }
/* Active breadcrumb item: the moving brand gradient, minus the blue stop.
   Most heroes are blue, and a blue stop disappears into them - measured at
   1.0-1.1:1 on the mid-blue grounds. Two palettes instead, chosen by how light
   the hero is, so the item always clears the ground it sits on. */
.breadcrumbs [aria-current="page"],
.breadcrumbs > span:not([aria-hidden]):last-child { font-weight: 800; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .breadcrumbs [aria-current="page"],
  .breadcrumbs > span:not([aria-hidden]):last-child {
    background: linear-gradient(90deg, #B3261E, #8A5300, #1B5E20, #B3261E);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tbFlow 4.5s linear infinite; }
  /* coloured and dark hero grounds: a warm white shimmer, so the crumb reads with
     the same contrast as the rest of the hero copy */
  .page-hero:not(.light) .breadcrumbs [aria-current="page"],
  .page-hero:not(.light) .breadcrumbs > span:not([aria-hidden]):last-child {
    background: linear-gradient(90deg, #fff, #FFF3D6, #fff, #FFE9B0, #fff);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; }
  /* the Netherlands hero is a light orange and carries dark type throughout */
  .page-hero.flag-nl .breadcrumbs [aria-current="page"],
  .page-hero.flag-nl .breadcrumbs > span:not([aria-hidden]):last-child {
    background: linear-gradient(90deg, #5A2600, #3D1A00, #5A2600);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; }
  /* white-label heroes sit on the white wl-theme ground, so they take the dark
     shimmer rather than the white one the other heroes use */
  .wl-theme .page-hero .breadcrumbs [aria-current="page"],
  .wl-theme .page-hero .breadcrumbs > span:not([aria-hidden]):last-child {
    background: linear-gradient(90deg, #B3261E, #8A5300, #1B5E20, #B3261E);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; }
}
@media (prefers-reduced-motion: reduce) {
  .breadcrumbs [aria-current="page"],
  .breadcrumbs > span:not([aria-hidden]):last-child { animation: none; }
}
.page-hero.light .breadcrumbs { color: var(--muted); }
/* separators inherit the nav colour rather than the white default, so they stay
   visible on light and glass hero grounds */
.breadcrumbs > span[aria-hidden] { color: currentColor; opacity: .6; }
.page-hero.light .breadcrumbs a { color: var(--brand); }
.two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.two-col > * { min-width: 0; }
.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { padding-left: 32px; position: relative; font-size: 0.97rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(52,168,83,0.12); color: var(--g-green); font-weight: 800; display: grid; place-items: center; font-size: 0.78rem; }
.city-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.city-chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); transition: transform .15s, border-color .15s; }
.city-chips span:hover { transform: translateY(-2px); border-color: var(--cyan); }
.country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.country-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; color: var(--ink); }
.country-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cc-flag { font-size: 2.3rem; display: block; margin-bottom: 10px; }
.country-card h2, .country-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.country-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
.cc-link { font-weight: 700; color: var(--brand); font-size: 0.9rem; }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; text-align: center; }
.stat-strip strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--brand); }
.stat-strip span { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.aside-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.aside-layout > * { min-width: 0; }
.prose h2 { font-size: 1.5rem; margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 0; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .2s; }
.value-card:hover { transform: translateY(-5px); }
.value-card .vc-icon { font-size: 1.7rem; display: block; margin-bottom: 10px; }
.value-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.value-card p { color: var(--muted); font-size: 0.9rem; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow); }
.contact-card .ct-icon { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.contact-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-card a, .contact-card p { font-size: 0.9rem; color: var(--muted); }
.contact-card a { color: var(--brand); font-weight: 700; }
@media (max-width: 1000px) {
  .two-col, .aside-layout { grid-template-columns: 1fr; }
  .country-grid, .value-grid, .contact-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .country-grid, .value-grid, .contact-cards, .stat-strip { grid-template-columns: 1fr; }
}

/* ---------- location pages v2 ---------- */
.glass-band {
  background:
    radial-gradient(700px 380px at 92% 0%, rgba(41,197,246,0.18), transparent 60%),
    radial-gradient(620px 380px at 2% 100%, rgba(139,63,240,0.13), transparent 55%),
    linear-gradient(180deg, #f7fbff, #edf3fc);
}
.glass-band .value-card, .glass-band .contact-card, .glass-band .country-card,
.glass-card {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-color: rgba(255,255,255,0.8);
}
.hero-cols { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; }
.hero-cols > * { min-width: 0; }
.hero-ctas-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.stat-chips li {
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px); border-radius: 12px; padding: 9px 16px; font-size: 0.82rem; color: #eaf6ff;
}
.stat-chips strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.page-hero.light .stat-chips li { background: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.9); color: var(--muted); }
.page-hero.light .stat-chips strong { color: var(--brand); }

/* looping local-search demo */
.loc-demo { background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg); color: var(--ink); }
.ld-glogo { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.5px; margin-bottom: 10px; text-align: center; }
.ld-bar {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-size: 0.9rem; box-shadow: 0 2px 8px rgba(14,40,90,0.08); margin-bottom: 14px;
}
.ld-typed { font-weight: 600; white-space: nowrap; overflow: hidden; }
.ld-caret { width: 2px; height: 1.1em; background: var(--brand); animation: blink 1s steps(1) infinite; flex-shrink: 0; }
.ld-mic { margin-left: auto; }
.ld-head { font-weight: 700; font-size: 0.9rem; color: #202124; margin-bottom: 8px; font-family: arial, var(--font-body); }
.ld-pack { display: grid; gap: 8px; }
.ld-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px;
  transition: opacity .45s ease, transform .45s ease;
}
html.js .ld-item { opacity: 0; transform: translateY(14px); }
.loc-demo.done .ld-item:nth-child(2) { transition-delay: .1s; }
.loc-demo.done .ld-item:nth-child(3) { transition-delay: .45s; }
.loc-demo.done .ld-item:nth-child(4) { transition-delay: .8s; }
.loc-demo.done .ld-item { opacity: 1; transform: none; }
.ld-item b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-family: var(--font-display); background: var(--bg-soft); color: #9aa4b8; flex-shrink: 0; }
.ld-item.you { border-color: #a45df0; background: #fdfbff; box-shadow: 0 4px 12px rgba(164,93,240,0.14); }
.ld-item.you b { background: rgba(52,168,83,0.14); color: var(--g-green); }
.ld-item strong { display: block; font-size: 0.86rem; }
.ld-item em { font-style: normal; font-size: 0.73rem; color: #70757a; }
.ld-item em .st { color: #fbbc04; }
.ld-flag { margin-left: auto; font-size: 0.64rem; font-weight: 800; color: #fff; background: #a45df0; padding: 2px 9px; border-radius: 99px; }

/* feature → benefit */
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fb-card {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
  box-shadow: var(--shadow); transition: transform .18s ease;
}
.fb-card:hover { transform: translateY(-4px); }
.fb-card .fb-icon { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 12px; background: rgba(43,127,240,0.1); }
.fb-card h3 { font-size: 0.98rem; margin-bottom: 3px; }
.fb-card p { font-size: 0.86rem; color: var(--muted); }
.fb-card p strong { color: var(--g-green); }
.glass-band .fb-card { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }

/* mini service cards */
.svc-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-mini {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden;
}
.svc-mini::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--brand)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.svc-mini:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-mini:hover::before { transform: scaleX(1); }
.svc-mini .sm-icon { font-size: 1.4rem; display: block; margin-bottom: 10px; }
.svc-mini h3 { font-size: 1.02rem; margin-bottom: 8px; }
.svc-mini ul { list-style: none; display: grid; gap: 5px; }
.svc-mini li { font-size: 0.83rem; color: var(--muted); padding-left: 18px; position: relative; }
.svc-mini li::before { content: "✓"; position: absolute; left: 0; color: var(--accent, var(--brand)); font-weight: 800; }
.glass-band .svc-mini { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }

/* detailed states / regions */
.state-groups { display: grid; gap: 26px; }
.state-group h3 { font-size: 1.02rem; margin-bottom: 12px; color: var(--ink); }
.state-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.state-grid span {
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 15px; font-size: 0.82rem; font-weight: 600; color: var(--ink-2);
  box-shadow: 0 2px 8px rgba(14,40,90,0.06);
  transition: transform .15s, border-color .15s;
}
.state-grid span:hover { transform: translateY(-2px); border-color: var(--cyan); }

/* case stat mini */
.case-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.case-mini div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.case-mini strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--brand); }
.case-mini span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

@media (max-width: 1000px) {
  .hero-cols { grid-template-columns: 1fr; }
  .svc-mini-grid { grid-template-columns: 1fr 1fr; }
  .fb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .svc-mini-grid { grid-template-columns: 1fr; }
  .case-mini { grid-template-columns: 1fr; }
}

.ind-links a span { cursor: pointer; }
.ind-links a:hover span { border-color: var(--brand); color: var(--brand); }
.svc-mini h3 a { color: inherit; }
.svc-mini h3 a:hover { color: var(--brand); }

/* ---------- service pages v2 ---------- */
/* organic SERP variant of the search demo */
.ld-res { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  transition: opacity .45s ease, transform .45s ease; }
html.js .ld-res { opacity: 0; transform: translateY(14px); }
.loc-demo.done .ld-res { opacity: 1; transform: none; }
.loc-demo.done .ld-res:nth-child(2) { transition-delay: .12s; }
.loc-demo.done .ld-res:nth-child(3) { transition-delay: .5s; }
.loc-demo.done .ld-res:nth-child(4) { transition-delay: .85s; }
.ld-res .r-url { font-size: 0.68rem; color: #202124; display: flex; align-items: center; gap: 6px; }
.ld-res .r-url i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; font-size: 0.6rem; font-style: normal; }
.ld-res .r-url em { font-style: normal; color: #4d5156; }
.ld-res .r-title { font-family: arial, var(--font-body); color: #1a0dab; font-size: 0.92rem; font-weight: 500; }
.ld-res .r-desc { font-size: 0.72rem; color: #4d5156; }
.ld-res.you { border-color: #a45df0; background: #fdfbff; position: relative; box-shadow: 0 4px 12px rgba(164,93,240,0.14); }
.ld-res.you .r-flag { position: absolute; top: -9px; right: 10px; font-size: 0.62rem; font-weight: 800; color: #fff; background: #a45df0; padding: 2px 9px; border-radius: 99px; }

/* why-buy pain cards */
.why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); transition: transform .18s ease; }
.why-card:hover { transform: translateY(-4px); }
.why-card .wn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--font-display); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--purple)); margin-bottom: 12px; }
.why-card h3 { font-size: 1rem; margin-bottom: 6px; }
.why-card p { font-size: 0.88rem; color: var(--muted); }
.why-card p b { color: var(--g-green); }
.glass-band .why-card { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }

/* menu-style industry columns */
.ind-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 40px; }
.ind-cols .mg-head { font-size: 0.95rem; }
.ind-cols .mg-item { font-size: 0.9rem; padding: 7px 10px; }
.ind-cols .mg-item i { color: var(--brand); }
.ind-cols-wrap { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 34px; box-shadow: var(--shadow); }
.glass-band .ind-cols-wrap { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }

@media (max-width: 1000px) { .why-grid, .ind-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .why-grid, .ind-cols { grid-template-columns: 1fr; } .ind-cols-wrap { padding: 22px; } }

/* ---------- real brand icons ---------- */
.cc-brand { width: 38px; height: 38px; object-fit: contain; display: block; margin-bottom: 10px; }
.lc-icon img { width: 26px; height: 26px; object-fit: contain; }
.ai-logo img { width: 19px; height: 19px; object-fit: contain; }
.ai-prov img { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; margin-right: 6px; }
.ai-prov.active .wlogo { filter: brightness(0); }
.chip-brand { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; margin-right: 5px; display: inline-block; }
.mi-brand { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* ---------- local seo: ranking signal bars ---------- */
.factor-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 34px; }
.factor-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.factor-card .fc-num { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; color: var(--brand); letter-spacing: .08em; text-transform: uppercase; }
.factor-card h3 { font-size: 1.05rem; margin: 6px 0; }
.factor-card p { font-size: 0.88rem; color: var(--muted); }
.glass-band .factor-card { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }
.sig-bars { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); }
.glass-band .sig-bars { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }
.sig-bar { display: grid; grid-template-columns: 190px 1fr 48px; align-items: center; gap: 14px; font-size: 0.88rem; font-weight: 700; }
.sig-bar i { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--brand)); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.3,1); }
.sig-bar.lead i { background: linear-gradient(90deg, var(--brand), var(--purple)); }
.sig-bar em { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; color: var(--brand); font-family: var(--font-display); }
.sig-bars.in .sig-bar i { width: var(--w); }
html:not(.js) .sig-bar i { width: var(--w); }
.sig-src { font-size: 0.76rem; color: var(--muted); margin-top: 6px; }
.price-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); text-align: center; }
.price-card.mid { border-color: var(--brand); box-shadow: 0 12px 40px rgba(43,127,240,0.18); }
.price-card .pc-tier { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.price-card .pc-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--brand); margin: 8px 0 2px; }
.price-card .pc-per { font-size: 0.76rem; color: var(--muted); }
.price-card ul { list-style: none; margin-top: 14px; display: grid; gap: 7px; text-align: left; font-size: 0.85rem; color: var(--ink-2); }
.price-card li { padding-left: 20px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--g-green); font-weight: 800; }
@media (max-width: 900px) { .factor-cards, .price-band { grid-template-columns: 1fr; } .sig-bar { grid-template-columns: 130px 1fr 44px; } }

/* ---------- "what works now" channel cards ---------- */
.now-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.now-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden;
}
.now-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--brand), var(--purple)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.now-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.now-card:hover::before { transform: scaleX(1); }
.now-logos { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; min-height: 26px; }
.now-logos img { width: 22px; height: 22px; object-fit: contain; }
.now-card h3 { font-size: 1rem; margin-bottom: 6px; }
.now-card p { font-size: 0.87rem; color: var(--muted); }
.glass-band .now-card { background: rgba(255,255,255,0.62); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,0.8); }
@media (max-width: 1000px) { .now-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .now-grid { grid-template-columns: 1fr; } }

/* ---------- local seo: grouped includes accordions ---------- */
.inc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.inc-group {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 22px 16px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.inc-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--brand), var(--purple)); }
.inc-group:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.inc-group.wide { grid-column: 1 / -1; }
.inc-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.inc-num {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--font-display); font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--purple));
}
.inc-group-head h3 { font-size: 1.08rem; flex: 1; }
.inc-group-head .now-logos { margin-bottom: 0; }
.inc-group .faq-item { border-radius: 11px; margin-bottom: 8px; background: var(--bg-soft); border-color: transparent; }
.inc-group .faq-item[open] { background: #fff; border-color: var(--brand); }
.inc-group .faq-item summary { font-size: 0.92rem; padding: 13px 16px; }
.inc-group .faq-item p { font-size: 0.88rem; padding: 0 16px 14px; }
.inc-acc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: start; }
.inc-acc-grid .faq-item { margin-bottom: 0; }
@media (max-width: 900px) { .inc-groups { grid-template-columns: 1fr; } .inc-acc-grid { grid-template-columns: 1fr; } }

/* ---------- client results / benefits cards ---------- */
.result-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.result-card { text-align: center; }
.result-card img { width: 100%; height: auto; border: 2px solid var(--brand); border-radius: 14px; box-shadow: var(--shadow); background: #fff; }
.result-card h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.result-card p { font-size: 0.92rem; color: var(--muted); max-width: 46ch; margin: 0 auto; }
.glass-band .result-card img { border-color: rgba(43,127,240,0.6); }
@media (max-width: 800px) { .result-cards { grid-template-columns: 1fr; } }

/* ---------- window-fit heroes ---------- */
.hero { min-height: calc(100svh - 118px); display: flex; align-items: center; }
.hero > .container.hero-inner { flex: 0 0 min(1180px, 92%); margin-inline: auto; }
.page-hero:has(.hero-cols) { min-height: calc(100svh - 118px); display: flex; align-items: center; }
.page-hero:has(.hero-cols) > .container { flex: 0 0 min(1180px, 92%); margin-inline: auto; }

/* ---------- trustbar rating badges ---------- */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 18px 0 0; padding: 0; }
.trust-badges a, .trust-badges .tb-static { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(15,40,80,0.1); border-radius: 12px; padding: 8px 16px; box-shadow: 0 4px 14px rgba(15,40,80,0.06); text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.trust-badges a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,40,80,0.12); }
.trust-badges img { width: 26px; height: 26px; }
.trust-badges .tp-star { font-size: 24px; color: #00B67A; }
.trust-badges strong { display: block; font-size: 0.86rem; line-height: 1.2; }
.trust-badges em { display: block; font-style: normal; font-size: 0.74rem; color: var(--muted); line-height: 1.3; }
.trust-badges .stars { font-style: normal; color: #f5a623; letter-spacing: 1px; }
.trust-badges .tb-img img { display: block; width: auto; height: 52px; border-radius: 10px; box-shadow: 0 4px 14px rgba(15,40,80,0.06); }

/* ---------- founder profile card (about page) ---------- */
.founder-card { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid rgba(15,40,80,0.1); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); max-width: 720px; margin: 30px auto 0; }
.founder-card img { width: 100%; height: auto; border-radius: 14px; display: block; }
.founder-card h3 { font-size: 1.25rem; margin-bottom: 2px; }
.founder-card .fc-role { color: var(--brand); font-weight: 700; font-size: 0.88rem; margin-bottom: 10px; }
.founder-card p { color: var(--muted); font-size: 0.92rem; }
.founder-card .social-links { margin-top: 14px; }
@media (max-width: 640px) { .founder-card { grid-template-columns: 1fr; text-align: center; } .founder-card img { max-width: 260px; margin: 0 auto; } .founder-card .social-links { justify-content: center; } }

/* ---------- social link icon rows (footer, about, contact) ---------- */
.social-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.social-links .sl { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 1.05rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.social-links .sl:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); }
.social-links .yt { background: #FF0000; }
.social-links .fb { background: #1877F2; }
.social-links .li { background: #0A66C2; }
.social-links .wa { background: #25D366; }
.social-links-light { margin-top: 12px; }

/* ---------- FA icons replacing emojis: inherit container accents ---------- */
.cc-flag i, .fb-icon i, .vc-icon i, .li-icon i, .map-glyph i, .seo-tab i { color: var(--brand); }
.pt-icon i { color: var(--accent, var(--brand)); font-size: 0.9em; }
.audit-points i.fa-circle-check { color: #4ade80; margin-right: 6px; }
.marquee-track i { color: var(--brand); margin-right: 5px; }
.contact-list i { color: #7fb4ff; margin-right: 6px; width: 16px; text-align: center; }
.wd-label i, .lr-url i { margin-right: 4px; }
.gmag i, .gmic i { color: #9aa0a6; }
.gact i.fa-solid { font-style: normal; }

/* ---------- real WhatsApp review screenshots ---------- */
.chat-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; margin-top: 26px; }
.chat-shot { margin: 0; background: #17101d; border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 14px 14px 12px; box-shadow: 0 12px 32px rgba(10,10,30,0.25); }
.chat-shot img { width: 100%; height: auto; border-radius: 10px; display: block; }
.chat-shot figcaption { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.8rem; color: #b9c3d6; }
.chat-shot figcaption i { color: #25D366; font-size: 1rem; }
.wl-theme .chat-shot { background: #1a1322; }

/* ---------- media-swap: two media blocks alternating in one box ---------- */
.media-swap { position: relative; }
.media-swap .ms-item { transition: opacity .6s ease; }
.media-swap .ms-item:not(.active) { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.media-swap .ms-item.active { opacity: 1; }
.media-swap .traffic-proof { margin-top: 0; }

/* ---------- traffic-sources proof figure (brand + AI sections) ---------- */
.traffic-proof { margin: 0; text-align: center; }
.ai-chat-demo + .traffic-proof { margin-top: 20px; }
.traffic-proof img { width: 100%; max-width: 460px; height: auto; background: #fff; }
.tsrc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.tsrc-chips span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; padding: 4px 12px; border-radius: 999px; color: var(--c); background: #fff; border: 1.5px solid var(--c); box-shadow: 0 2px 8px rgba(15,40,80,0.08); }
.traffic-proof figcaption { font-size: 0.85rem; color: var(--muted); max-width: 52ch; margin: 12px auto 0; }
.svc-ai .traffic-proof figcaption { color: rgba(255,255,255,0.82); }

/* ---------- receipts proof cards (homepage) ---------- */
.receipts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.receipt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, rgba(15,40,80,0.1)); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.receipt-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,40,80,0.14); }
.receipt-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(160deg, rgba(43,127,240,0.07), rgba(43,127,240,0.02)); border-bottom: 1px solid rgba(15,40,80,0.08); }
.receipt-media img { position: absolute; inset: 16px; margin: auto; max-width: calc(100% - 32px); max-height: calc(100% - 32px); width: auto; height: auto; object-fit: contain; border-radius: 10px; border: 1px solid rgba(15,40,80,0.12); box-shadow: 0 6px 18px rgba(15,40,80,0.1); background: #fff; }
.receipt-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; text-align: left; flex: 1; }
.receipt-src { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--brand); background: rgba(43,127,240,0.1); border-radius: 999px; padding: 5px 12px; }
.receipt-src i { color: #1e9e5a; }
.receipt-stat { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--ink, #0f2850); margin: 2px 0 0; }
.receipt-stat small { display: block; font-size: 0.95rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.receipt-body p:not(.receipt-stat) { font-size: 0.92rem; color: var(--muted); margin: 0; }
.receipt-link { margin-top: auto; padding-top: 10px; align-self: flex-start; font-size: 0.92rem; font-weight: 700; color: var(--brand); text-decoration: none; }
.receipt-link:hover { text-decoration: underline; }
.glass-band .receipt-card { border-color: rgba(43,127,240,0.25); }
@media (max-width: 800px) { .receipts-grid { grid-template-columns: 1fr; } }

#reporting .faq-item { margin-bottom: 10px; background: var(--bg-soft); border-color: transparent; border-radius: 12px; }
#reporting .faq-item[open] { background: #fff; border-color: var(--brand); }

/* ---------- reveal-on-scroll ---------- */
/* content is visible by default; animation applies only when JS marks <html class="js"> */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
/* Above the fold paints immediately. Hero content used to sit at opacity 0 until the
   deferred script ran, which pushed LCP out and left readable text invisible if the
   script was slow or blocked. */
html.js .page-hero .reveal, html.js .hero .reveal,
html.js .page-hero .reveal.in, html.js .hero .reveal.in { opacity: 1; transform: none; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .nav-links { gap: 0; }
  .nav-links > li > a:not(.btn) { padding: 10px 9px; font-size: 0.88rem; }
}
@media (max-width: 1000px) {
  .hero-inner, .audit-inner, .svc-inner { grid-template-columns: 1fr; }
  .journey { min-height: 500px; max-width: 560px; }
  .seo-panel { grid-template-columns: 1fr; gap: 24px; }
  .listing-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 34px; }
  .steps::before { display: none; }
  .results-inner { grid-template-columns: 1fr 1fr; }
  .review-quotes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bubble-1, .bubble-4 { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* the header's own backdrop-filter would block the menu's glass blur (nested
     backdrop filters don't compose), so disable it on mobile — the header's
     gradient is near-opaque anyway */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    padding: 18px 6%; gap: 2px; display: none; border-bottom: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 24px 50px rgba(14,40,90,0.18); max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a:not(.btn) { display: block; padding: 12px 6px; font-size: 1rem; color: var(--ink); }
  .nav-links > li > a:not(.btn):hover { background: rgba(43,127,240,0.08); color: var(--brand); }
  .sub-menu, .sub-menu.mega-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: rgba(43,127,240,0.07); box-shadow: none; display: none; padding: 6px 10px; margin: 2px 0 8px;
    width: auto; max-height: none; overflow: visible; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.8);
  }
  .has-sub.open .sub-menu { display: block; }
  .has-sub.open .sub-menu.mega-panel { display: grid; grid-template-columns: 1fr; gap: 4px; max-height: 60vh; overflow-y: auto; }
  .has-sub.open .sub-menu, .has-sub.mega.open .sub-menu.mega-panel,
  .has-sub.mega:hover .sub-menu, .has-sub.mega:focus-within .sub-menu { transform: none; }
  .sub-menu a { color: var(--ink-2); font-size: 0.9rem; }
  .sub-menu a:hover { background: rgba(43,127,240,0.1); color: var(--brand); }
  .mega-panel .mg-head { color: var(--ink); border-bottom-color: rgba(14,40,90,0.1); }
  .mega-panel .mg-item, .mega-panel .mg-strong { color: var(--ink-2); }
  .mega-panel .mg-card, .mega-panel .mg-stat { color: var(--ink); }
  .mega-panel .mg-stat .ms-num { min-width: 70px; }
  .mega-panel .mg-item:hover, .mega-panel .mg-strong:hover { background: rgba(43,127,240,0.1); color: var(--brand); }
  .mg-sub { border-left-color: rgba(14,40,90,0.12); }
  .nav-toggle span { background: #fff; }
  .nav-cta { margin: 12px 0 0; }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .video-grid, .case-grid, .case-shots, .listing-grid, .brand-stats { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 90px; }
  .hero-proof { gap: 22px; }
  .steps { grid-template-columns: 1fr; }
  .inline-form input { max-width: none; width: 100%; }
  .seo-tab { min-width: 100%; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; text-align: left; padding: 13px 16px; }
  .seo-tab.active { border-left-color: var(--brand); border-bottom-color: var(--line); }
  .seo-panel { padding: 22px; }
  .bubble { display: none; }
}

/* Proof screenshots inside tabbed demo panels (outcomes sections) */
.panel-visual .proof-shot { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #cfe0ff; box-shadow: 0 12px 32px rgba(14, 40, 90, 0.10); }

/* Screen-reader-only utility (used for structural headings that stay invisible) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Lead-form spam protection */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.captcha-row { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.captcha-row .captcha-q { font-weight: 600; color: var(--ink); font-size: 0.92rem; }

/* ============ Red flags: what bad SEO agencies do ============ */
.flags-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.flag-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid #e5484d; border-radius: 14px; padding: 20px 20px 18px; box-shadow: 0 4px 14px rgba(14,40,90,0.05); }
.flag-card h3 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 9px; }
.flag-card h3 i { color: #e5484d; font-size: 0.95rem; margin-top: 3px; flex: none; }
.flag-card p { color: var(--muted); font-size: 0.9rem; }
.flag-answer { margin-top: 18px; background: #f0faf3; border: 1px solid #bfe6cb; border-left: 4px solid #1f9d55; border-radius: 14px; padding: 20px; }
.flag-answer h3 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.flag-answer h3 i { color: #1f9d55; }
.flag-answer p { color: var(--ink); font-size: 0.92rem; }
@media (max-width: 900px) { .flags-grid { grid-template-columns: 1fr; } }

/* ============ SEO vs alternatives comparison ============ */
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.vs-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 4px 14px rgba(14,40,90,0.05); display: flex; flex-direction: column; }
.vs-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.vs-card h3 .vs-mark { color: var(--brand); font-weight: 800; }
.vs-verdict { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft, #e8f1fe); border-radius: 999px; padding: 3px 10px; align-self: flex-start; margin-bottom: 10px; background: #e8f1fe; }
.vs-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.vs-card ul { list-style: none; display: grid; gap: 6px; font-size: 0.86rem; color: var(--ink); margin-top: auto; }
.vs-card ul li::before { content: "·"; color: var(--brand); font-weight: 800; margin-right: 7px; }
@media (max-width: 900px) { .vs-grid { grid-template-columns: 1fr; } }

/* ============ Workflow infographic (vertical numbered flow) ============ */
.flow { margin-top: 38px; position: relative; max-width: 780px; }
.flow-step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 16px 0; position: relative; }
.flow-step::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #22c1f0, #2b7ff0, #7c3aed); opacity: 0.25; }
.flow-step:first-child::before { top: 24px; }
.flow-step:last-child::before { bottom: auto; height: 24px; }
.fs-num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #22c1f0, #2b7ff0 55%, #7c3aed); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(43,127,240,0.35); position: relative; z-index: 1; }
.fs-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
.fs-body p { color: var(--muted); font-size: 0.92rem; }
.fs-logos { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.fs-logos img { width: 20px; height: 20px; object-fit: contain; }
html.js .flow-step.reveal { transition-delay: calc(var(--fi, 0) * 60ms); }

/* Inline (footer CTA) captcha: render as a white pill matching the row */
.inline-form .captcha-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 4px 6px 4px 18px; margin: 0; }
.inline-form .captcha-row .captcha-t { display: none; }
.inline-form .captcha-row .captcha-q { color: var(--ink); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.inline-form .captcha-row input { max-width: 96px; border: none; background: #f2f6fd; border-radius: 999px; }

/* Floating nav toggles, bottom-left */
.scroll-toggles { position: fixed; left: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.scroll-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--brand); font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(14,40,90,0.14); transition: opacity .25s, transform .25s, background .2s; }
.scroll-toggle:hover { background: #fff; transform: translateY(-2px); }
.scroll-toggle.is-off { opacity: 0; pointer-events: none; transform: translateY(6px); }

/* WhatsApp widget, bottom-right */
.wa-widget { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa-fab { height: 56px; padding: 0 20px 0 16px; border-radius: 999px; border: none; background: #25D366;
  color: #fff; font-size: 1.7rem; cursor: pointer; box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .2s, box-shadow .2s; font-family: var(--font-body); }
.wa-fab-label { font-size: 0.92rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.wa-fab:hover { box-shadow: 0 14px 32px rgba(37,211,102,.55); }
/* collapse to the icon on small screens, and whenever the chat panel is open */
@media (max-width: 620px) {
  .wa-fab { width: 56px; padding: 0; border-radius: 50%; gap: 0; }
  .wa-fab-label { display: none; }
}
.wa-open .wa-fab { width: 56px; padding: 0; border-radius: 50%; gap: 0; }
.wa-open .wa-fab-label { display: none; }
.wa-fab:hover { transform: scale(1.07); }
.wa-panel { width: min(320px, calc(100vw - 36px)); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(14,40,90,0.28); border: 1px solid var(--line); }
.wa-head { background: #075E54; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.wa-head > i { font-size: 1.6rem; color: #25D366; background: #fff; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex: none; }
.wa-head strong { display: block; font-size: 0.95rem; }
.wa-head span { font-size: 0.75rem; opacity: 0.85; }
.wa-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; opacity: 0.8; }
.wa-body { padding: 14px; background: #e9f2ec; }
.wa-bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: 0.88rem; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin-bottom: 12px; }
.wa-form { display: flex; gap: 8px; }
.wa-form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 0.88rem; font-family: inherit; min-width: 0; }
.wa-form button { border: none; background: #25D366; color: #fff; border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 0.84rem; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
/* On phones the arrows sat at bottom-left over the hero's full-width CTA button.
   A scroll-to-top control earns little on a screen this short, so it goes; the
   WhatsApp button on the right stays. */
@media (max-width: 700px) { .scroll-toggles { display: none; } }

/* Workflow section: flow left, sticky CTA form right */
.workflow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; margin-top: 38px; }
.workflow-grid .flow { margin-top: 0; max-width: none; }
.workflow-cta { position: sticky; top: 96px; }
.workflow-cta .lead-form { border: 1px solid var(--line); }
@media (max-width: 980px) { .workflow-grid { grid-template-columns: 1fr; } .workflow-cta { position: static; } }

/* ============ White-label announcement top bar ============ */
.topbar { background: #0c1327; color: #dbe7ff; font-size: 0.84rem; position: relative; z-index: 1001; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; flex-wrap: wrap; text-align: center; }
.topbar .tb-tag { background: linear-gradient(90deg, #22c1f0, #2b7ff0 55%, #7c3aed); color: #fff; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.topbar a.tb-link { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.topbar a.tb-link:hover { text-decoration: underline; }
.topbar a.tb-link .tb-arrow { color: #22c1f0; }
@media (max-width: 700px) {
  .topbar-inner { font-size: 0.78rem; gap: 8px; flex-wrap: nowrap; justify-content: space-between; padding: 7px 12px; }
  .topbar-inner > span:not(.tb-tag) { display: none; }
  .topbar .tb-tag { font-size: 0.62rem; padding: 3px 8px; }
  .topbar a.tb-link { font-size: 0.8rem; }
}

/* White-label dashboard feature cards */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 4px 14px rgba(14,40,90,0.05); }
.dash-card i { color: var(--brand); font-size: 1.2rem; margin-bottom: 10px; display: block; }
.dash-card h3 { font-size: 1rem; margin-bottom: 6px; }
.dash-card p { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ============ White-label hero demo (cycling scenes) ============ */
.wl-demo { position: relative; }
.wl-scene { display: none; }
.wl-scene.active { display: block; animation: panelIn .45s ease; }
.wl-scene.active .kw-row { animation: kwRise .7s cubic-bezier(.2,1.2,.4,1) forwards; }
.wl-scene.active .kw-row:nth-child(1) { animation-delay: .15s; }
.wl-scene.active .kw-row:nth-child(2) { animation-delay: .35s; }
.wl-scene.active .kw-row:nth-child(3) { animation-delay: .55s; }
.wl-scene.active .kw-row:nth-child(4) { animation-delay: .75s; }
.wl-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 6px 2px; }
.wl-grid span { aspect-ratio: 1; border-radius: 50%; background: #34A853; color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); }
.wl-scene.active .wl-grid span { animation: wlPop .4s ease forwards; }
.wl-grid span.y { background: #fbbc05; }
.wl-grid span.r { background: #EA4335; }
@keyframes wlPop { to { opacity: 1; transform: scale(1); } }
.wl-log { list-style: none; display: grid; gap: 9px; padding: 4px 2px; }
.wl-log li { background: #f4f8ff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 0.85rem; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; opacity: 0; transform: translateY(8px); }
.wl-scene.active .wl-log li { animation: wlRise .5s ease forwards; }
.wl-log li:nth-child(1) { animation-delay: .1s; } .wl-log li:nth-child(2) { animation-delay: .3s; }
.wl-log li:nth-child(3) { animation-delay: .5s; } .wl-log li:nth-child(4) { animation-delay: .7s; }
.wl-log .ok { color: #1f9d55; font-weight: 800; }
@keyframes wlRise { to { opacity: 1; transform: none; } }
.wl-report { text-align: center; padding: 8px 4px; }
.wl-logo-slot { border: 2px dashed #b9c9e8; border-radius: 10px; padding: 10px 18px; display: inline-block; font-weight: 800; letter-spacing: .12em; color: #6d82a8; font-size: .8rem; margin-bottom: 14px; }
.wl-report .stat-strip { margin: 0 0 10px; }
.wl-rep-note { font-size: .78rem; color: var(--muted); }
.wl-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.wl-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c7d6ef; transition: .2s; }
.wl-dots i.active { background: var(--brand); width: 20px; border-radius: 999px; }

/* WL mid-page CTA band */
.wl-cta-band { text-align: center; }
.wl-cta-band .hero-ctas-row { justify-content: center; margin-top: 22px; }

/* ==================================================================
   WHITE-LABEL THEME (.wl-theme on <body>): white glass design system
   Light header + white background with logo-color glows, glass blocks,
   Google-palette heading accents. Scoped to /white-label-seo/ pages.
   ================================================================== */
.wl-theme { background: #fff; }
.wl-theme::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 8% 4%, rgba(234,67,53,0.07), transparent 60%),
    radial-gradient(560px 420px at 94% 10%, rgba(66,133,244,0.09), transparent 60%),
    radial-gradient(520px 420px at 10% 92%, rgba(52,168,83,0.07), transparent 60%),
    radial-gradient(480px 380px at 92% 90%, rgba(251,188,5,0.08), transparent 60%); }

/* --- white glass header --- */
.wl-theme .site-header { background: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(14,40,90,0.08); }
.wl-theme .site-header.scrolled { box-shadow: 0 6px 26px rgba(14,40,90,0.10); background: rgba(255,255,255,0.94); }
.wl-theme .nav-links > li > a { color: var(--ink); }
.wl-theme .nav-links > li > a:hover { color: var(--brand); }
.wl-theme .nav-toggle span { background: var(--ink); }
.wl-theme .btn-login { border-color: var(--brand); color: var(--brand); background: transparent; }
.wl-theme .btn-login:hover { background: var(--brand); color: #fff; }
.wl-theme .brand img { filter: none; }
@media (max-width: 900px) {
  .wl-theme .nav-links { background: rgba(255,255,255,0.96); }
  .wl-theme .nav-links a { color: var(--ink); }
}

/* --- light heroes --- */
.wl-theme .page-hero, .wl-theme .page-hero.dark { background: transparent; color: var(--ink); }
.wl-theme .page-hero.dark::before { background:
  radial-gradient(640px 420px at 90% 0%, rgba(66,133,244,0.12), transparent 60%),
  radial-gradient(520px 360px at 0% 100%, rgba(234,67,53,0.08), transparent 55%); }
.wl-theme .page-hero.flag-ca { background: transparent; color: var(--ink); }
.wl-theme .page-hero.flag-ca::before { background:
  radial-gradient(640px 420px at 90% 0%, rgba(235,45,55,0.12), transparent 60%),
  radial-gradient(520px 360px at 0% 100%, rgba(66,133,244,0.08), transparent 55%); }
.wl-theme .page-hero.flag-ca .lead { color: var(--muted); }
.wl-theme .page-hero.flag-ca .stat-chips li { background: rgba(255,255,255,0.7); border-color: rgba(14,40,90,0.1); }
.wl-theme .page-hero .lead { color: var(--muted); }
.wl-theme .page-hero .breadcrumbs, .wl-theme .page-hero .breadcrumbs a { color: var(--muted); }
.wl-theme .page-hero h1 { position: relative; padding-bottom: 16px; }
.wl-theme .page-hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 130px; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #EA4335 0 25%, #fbbc05 25% 50%, #34A853 50% 75%, #4285F4 75% 100%); }
.wl-theme .btn-glass { background: rgba(14,40,90,0.05); color: var(--ink); border-color: rgba(14,40,90,0.18); }
.wl-theme .btn-glass:hover { background: rgba(14,40,90,0.1); }
.wl-theme .btn-ghost { color: var(--ink); border-color: rgba(14,40,90,0.22); }
.wl-theme .btn-ghost:hover { background: rgba(14,40,90,0.06); }
.wl-theme .btn-dark { background: var(--ink); color: #fff; }
.wl-theme .stat-chips li { background: rgba(255,255,255,0.7); border: 1px solid rgba(14,40,90,0.1); backdrop-filter: blur(8px); color: var(--ink); box-shadow: 0 4px 14px rgba(14,40,90,0.06); }
.wl-theme .stat-chips li span { color: var(--muted); }
.wl-theme .stat-chips li:nth-child(4n+1) strong { color: #EA4335; }
.wl-theme .stat-chips li:nth-child(4n+2) strong { color: #4285F4; }
.wl-theme .stat-chips li:nth-child(4n+3) strong { color: #34A853; }
.wl-theme .stat-chips li:nth-child(4n+4) strong { color: #b8860b; }

/* --- glass trustbar + sections --- */
.wl-theme .trustbar { background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(14,40,90,0.07); }
.wl-theme .section { background: transparent; }
.wl-theme .section.glass-band { background: rgba(255,255,255,0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(14,40,90,0.06); border-bottom: 1px solid rgba(14,40,90,0.06); }
.wl-theme .section.faq { background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* --- glass content blocks --- */
.wl-theme .vs-card, .wl-theme .dash-card, .wl-theme .flag-card, .wl-theme .value-card,
.wl-theme .inc-group, .wl-theme .jcard, .wl-theme .country-card, .wl-theme .lead-form,
.wl-theme .quote-card, .wl-theme .result-card, .wl-theme .case-card, .wl-theme .seo-demo, .wl-theme .video-card {
  background: rgba(255,255,255,0.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 8px 28px rgba(14,40,90,0.08); }
.wl-theme .faq-item { background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wl-theme .faq-item[open] { background: #fff; }

/* --- logo-color heading accents --- */
.wl-theme h2.reveal { position: relative; padding-bottom: 14px; }
.wl-theme h2.reveal::after { content: ""; position: absolute; left: 0; bottom: 0; width: 88px; height: 5px; border-radius: 4px;
  background: linear-gradient(90deg, #EA4335 0 25%, #fbbc05 25% 50%, #34A853 50% 75%, #4285F4 75% 100%); }
.wl-theme .container.narrow h2.reveal::after, .wl-theme .wl-cta-band h2.reveal::after { left: 50%; transform: translateX(-50%); }
.wl-theme section:nth-of-type(4n+1) .kicker { color: #c5221f; background: rgba(234,67,53,0.1); }
.wl-theme section:nth-of-type(4n+2) .kicker { color: #1a5fd0; background: rgba(66,133,244,0.1); }
.wl-theme section:nth-of-type(4n+3) .kicker { color: #1e7e34; background: rgba(52,168,83,0.1); }
.wl-theme section:nth-of-type(4n) .kicker { color: #9a6d00; background: rgba(251,188,5,0.14); }
.wl-theme .inc-num { background: linear-gradient(135deg, #EA4335, #fbbc05 40%, #34A853 70%, #4285F4); }
.wl-theme .fs-num { background: linear-gradient(135deg, #EA4335, #fbbc05 40%, #34A853 70%, #4285F4); box-shadow: 0 8px 20px rgba(66,133,244,0.3); }

/* Topbar link: moving glowing gradient in logo brand colors */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .topbar a.tb-link {
    background: linear-gradient(90deg, #EA4335, #fbbc05, #34A853, #4285F4, #EA4335);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: tbFlow 4.5s linear infinite, tbPulse 2.4s ease-in-out infinite alternate;
  }
  .topbar a.tb-link:hover { text-decoration: none; filter: brightness(1.3) drop-shadow(0 0 10px rgba(66,133,244,0.8)); }
  .topbar a.tb-link .tb-arrow { color: transparent; }
}
@keyframes tbFlow { to { background-position: 250% 0; } }
@keyframes tbPulse {
  from { filter: drop-shadow(0 0 3px rgba(66,133,244,0.35)); }
  to   { filter: drop-shadow(0 0 9px rgba(234,67,53,0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar a.tb-link { animation: none; }
}


/* WhatsApp-style client message testimonials */
.chat-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 34px; }
.chat-quote { background: #0b141a; border-radius: 16px; padding: 18px; box-shadow: 0 8px 26px rgba(14,40,90,0.15); }
.chat-quote .cq-bubble { background: #202c33; color: #e9edef; border-radius: 4px 12px 12px 12px; padding: 10px 13px; font-size: 0.9rem; line-height: 1.5; margin-bottom: 8px; max-width: 95%; }
.chat-quote .cq-bubble + .cq-bubble { border-radius: 12px; }
.chat-quote .cq-time { display: block; text-align: right; font-size: 0.66rem; color: #8696a0; margin-top: 4px; }
.chat-quote .cq-src { color: var(--muted); font-size: 0.78rem; margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.chat-quote .cq-src i { color: #25D366; }
.wl-theme .chat-quote { border: 1px solid rgba(255,255,255,0.1); }

/* Before/after image pair */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-pair figure { margin: 0; }
.ba-pair img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(14,40,90,0.10); }
@media (max-width: 600px) { .ba-pair { grid-template-columns: 1fr; } }

/* ============ Website portfolio showcase ============ */
.showcase { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; margin-top: 38px; }
.showcase.flip .sc-shot { order: 2; }
.sc-shot { position: relative; }
.sc-shot .sc-desktop { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(14,40,90,0.16); display: block; }
.sc-shot .sc-phone { position: absolute; right: -14px; bottom: -26px; width: 24%; border-radius: 14px; border: 3px solid #10233f; box-shadow: 0 14px 34px rgba(14,40,90,0.3); background: #fff; }
.sc-copy h3 { font-size: 1.4rem; margin-bottom: 4px; }
.sc-meta { color: var(--muted); font-size: 0.86rem; font-weight: 600; margin-bottom: 12px; }
.sc-copy p { color: var(--muted); margin-bottom: 14px; }
.sc-points { list-style: none; display: grid; gap: 7px; font-size: 0.9rem; font-weight: 600; margin-bottom: 16px; }
.sc-points li::before { content: "✓"; color: #1f9d55; font-weight: 800; margin-right: 8px; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } .showcase.flip .sc-shot { order: 0; } }

/* ============ Long-screenshot site rotator (homepage website section) ============ */
.long-rotator { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.lr-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f4f7fc; border-bottom: 1px solid var(--line); }
.lr-head .lr-url { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-left: 6px; }
.lr-stage { position: relative; height: 470px; overflow: hidden; }
.lr-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.lr-slide.active { opacity: 1; pointer-events: auto; }
.lr-slide img { width: 100%; height: auto; display: block; }
.lr-slide.active img { animation: lrPan 5s linear forwards; }
@keyframes lrPan { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 470px)); } }
@media (prefers-reduced-motion: reduce) { .lr-slide.active img { animation: none; } }
.lr-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f4f7fc; border-top: 1px solid var(--line); }
.lr-label { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.lr-label span { color: var(--muted); font-weight: 600; }
.lr-dots { display: flex; gap: 6px; }
.lr-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c7d6ef; transition: .2s; cursor: pointer; }
.lr-dots i.active { background: var(--brand); width: 20px; border-radius: 999px; }

/* Short screenshots inside the long rotator: fill the stage, no pan */
.lr-slide.lr-short img { height: 100%; width: 100%; object-fit: cover; object-position: top center; }
.lr-slide.lr-short.active img { animation: none; }

/* ==========================================================================
   EDITORIAL: /blog/ guides, /question/ answers, /news/ updates
   Archives, post templates and the post sidebar. Mobile-first, then two
   breakpoints: 760px (cards go multi-column) and 1040px (sidebar appears).
   ========================================================================== */

/* ---------- archive hero + type switcher ---------- */
.arc-hero .lead { max-width: 62ch; }
.arc-switch { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.arc-switch a {
  display: inline-block; padding: 9px 18px; border-radius: 999px; text-decoration: none;
  font-size: 0.9rem; font-weight: 700; color: #eaf3ff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.arc-switch a:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.arc-switch a.on { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- topic filter chips ---------- */
.arc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 34px; }
.arc-filters-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.arc-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.arc-chip b { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.arc-chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.arc-chip:hover b { color: var(--brand); }
.arc-empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* ---------- post cards (blog archive + topic pages) ---------- */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.arc-lead { margin-bottom: 26px; }

.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 10px rgba(14,40,90,0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c9dcf6; }
.post-card .pc-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.post-card:hover .pc-media img { transform: scale(1.04); }
.pc-media-blank {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(43,127,240,0.10), rgba(139,63,240,0.10));
}
.pc-media-blank span {
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand);
}
.pc-body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; flex: 1; }
.pc-meta { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin: 0; }
.pc-title { font-size: 1.12rem; line-height: 1.35; margin: 0; }
.pc-title a { color: var(--ink); text-decoration: none; }
.pc-title a:hover { color: var(--brand); }
.pc-excerpt { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* the newest guide gets a wider, image-led treatment */
.post-card-lead .pc-title { font-size: 1.5rem; }
.post-card-lead .pc-excerpt { font-size: 0.97rem; }

/* tag pills shared by cards, rows and post headers */
.pc-tags, .qa-tags, .nr-tags, .post-tags {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0;
}
.pc-tags span, .qa-tags span, .nr-tags span, .post-tags span,
.pc-tags a, .qa-tags a, .nr-tags a {
  display: inline-block; padding: 3px 10px; border-radius: 999px; text-decoration: none;
  font-size: 0.72rem; font-weight: 700; color: var(--brand); background: rgba(43,127,240,0.09);
  transition: background .15s ease;
}
.pc-tags a:hover, .qa-tags a:hover, .nr-tags a:hover { background: rgba(43,127,240,0.18); }
/* a tag with no archive of its own is a label, not a link, so it drops the brand blue */
.pc-tags span, .qa-tags span, .nr-tags span, .post-tags span {
  color: var(--muted); background: rgba(14,27,51,0.06); }
.pc-tags { margin-top: auto; padding-top: 4px; }

/* ---------- /question/ archive: question-led rows ---------- */
.qa-list { display: flex; flex-direction: column; gap: 12px; }
.qa-row {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qa-row:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.qa-link { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; text-decoration: none; }
.qa-mark {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--purple));
}
.qa-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qa-q { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.4; }
.qa-a { font-size: 0.89rem; color: var(--muted); }
.qa-row:hover .qa-q { color: var(--brand); }
.qa-go { margin-left: auto; align-self: center; color: var(--brand); font-size: 1.1rem; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.qa-row:hover .qa-go { opacity: 1; transform: translateX(3px); }
.qa-tags { padding: 0 22px 16px 72px; }

/* ---------- /news/ archive: dated timeline ---------- */
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-row {
  display: flex; gap: 20px; padding: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.news-row:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.nr-date {
  flex-shrink: 0; width: 68px; text-align: center; padding: 10px 0; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line); align-self: flex-start;
}
.nr-day { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--brand); line-height: 1; }
.nr-mon { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nr-body { min-width: 0; }
.nr-body h3 { font-size: 1.12rem; line-height: 1.35; margin: 0 0 6px; }
.nr-body h3 a { color: var(--ink); text-decoration: none; }
.nr-body h3 a:hover { color: var(--brand); }
.nr-body p { font-size: 0.9rem; color: var(--muted); margin: 0 0 8px; }

/* ---------- topic archive ---------- */
.topic-h { font-size: 1.2rem; margin: 34px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--bg-soft); }
.topic-h:first-child { margin-top: 0; }

/* ---------- post pages ---------- */
.post-hero .breadcrumbs { margin-bottom: 14px; }
.post-hero h1 { max-width: 20ch; }
.post-hero .lead { max-width: 62ch; }
.post-meta { color: #d8ecff; font-size: 0.85rem; font-weight: 600; margin-top: 14px; }
.post-hero .post-tags { margin-top: 16px; }
.post-hero .post-tags a, .post-hero .post-tags span { color: #fff; background: rgba(255,255,255,0.18); }
.post-hero .post-tags span { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.10); }
.post-hero .post-tags a:hover { background: rgba(255,255,255,0.3); }

/* question hero: the Q badge sits inline with the headline */
.post-hero-qa h1 { display: flex; align-items: flex-start; gap: 14px; max-width: 26ch; }
.qh-mark {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
  font-size: 1.2rem; font-weight: 800;
}
.qa-short { background: rgba(255,255,255,0.12); border-left: 3px solid #fff; padding: 14px 18px; border-radius: 0 12px 12px 0; }

/* featured image sits between hero and body */
.post-feature { margin-top: -34px; margin-bottom: 6px; }
.post-feature img {
  width: 100%; height: auto; border-radius: 18px; display: block;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff;
}

.post-body-wrap { padding-top: 40px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }

/* article typography */
.post-article { min-width: 0; font-size: 1.02rem; line-height: 1.75; color: #24324d; }
.post-article > h2 {
  font-size: 1.55rem; line-height: 1.3; margin: 40px 0 14px; color: var(--ink);
  padding-top: 6px; border-top: 2px solid var(--bg-soft);
}
.post-article > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.post-article h3 { font-size: 1.2rem; margin: 28px 0 10px; color: var(--ink); }
.post-article h4 { font-size: 1.04rem; margin: 22px 0 8px; color: var(--ink); }
.post-article p { margin: 0 0 18px; }
.post-article ul, .post-article ol { margin: 0 0 20px; padding-left: 22px; }
.post-article li { margin-bottom: 9px; }
.post-article a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.post-article a:hover { text-decoration-thickness: 2px; }
.post-article strong { color: var(--ink); font-weight: 700; }
.post-article figure { margin: 26px 0; }
.post-article img {
  max-width: 100%; height: auto; border-radius: 14px; display: block;
  border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(14,40,90,0.08);
}
.post-article figcaption { font-size: 0.84rem; color: var(--muted); text-align: center; margin-top: 10px; }
.post-article blockquote {
  margin: 24px 0; padding: 16px 22px; border-left: 4px solid var(--brand);
  background: var(--bg-soft); border-radius: 0 12px 12px 0; color: #2b3a57;
}
.post-article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.92rem; }
.post-article th, .post-article td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.post-article th { background: var(--bg-soft); font-weight: 700; }
.post-tags-foot { margin: 30px 0 0; }
.post-foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }

/* ---------- post sidebar ---------- */
.post-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.post-side .side-h, .side-card .side-h {
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px; line-height: 1.4;
}
.side-author { display: flex; gap: 16px; align-items: flex-start; }
.side-author img { width: 84px; height: 112px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.sa-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); margin: 0; }
.sa-role { font-size: 0.8rem; color: var(--brand); font-weight: 700; margin: 2px 0 8px; }
.sa-bio { font-size: 0.83rem; color: var(--muted); margin: 0 0 8px; line-height: 1.55; }
.sa-link { font-size: 0.83rem; font-weight: 700; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.side-list li { padding: 11px 0; border-bottom: 1px solid var(--bg-soft); }
.side-list li:first-child { padding-top: 0; }
.side-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-list a { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.4; }
.side-list a:hover { color: var(--brand); }
.side-list span { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 3px; }
.side-cta { background: linear-gradient(140deg, rgba(43,127,240,0.07), rgba(139,63,240,0.07)); border-color: rgba(43,127,240,0.22); }
.side-cta p { font-size: 0.88rem; color: var(--muted); margin: 0 0 14px; }
.side-cta .btn { width: 100%; text-align: center; }

/* ---------- breakpoints ---------- */
@media (min-width: 760px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card-lead { flex-direction: row; }
  .post-card-lead .pc-media { flex: 0 0 52%; aspect-ratio: auto; }
  .post-card-lead .pc-body { justify-content: center; padding: 28px 30px; }
  .post-article { font-size: 1.06rem; }
  .post-feature { margin-top: -48px; }
}
@media (min-width: 1040px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .post-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 52px; }
  .post-side { position: sticky; top: 96px; }
}
@media (max-width: 560px) {
  .qa-link { padding: 16px; gap: 12px; }
  .qa-tags { padding: 0 16px 14px 16px; }
  .news-row { padding: 16px; gap: 14px; }
  .nr-date { width: 56px; }
  .side-author { flex-direction: column; }
  .side-author img { width: 100%; height: 200px; }
  .post-hero-qa h1 { font-size: 1.55rem; }
}

/* ==========================================================================
   US STATE LOCATION PAGES  /locations/usa/<state>/
   ========================================================================== */

.hero-kw { color: #d8ecff; font-size: 0.92rem; margin: 14px 0 4px; }

/* proof screenshots with their own caption per page */
.proof-figure { margin: 0; }
.proof-figure img { width: 100%; height: auto; display: block; background: #fff; }
.proof-figure figcaption {
  font-size: 0.86rem; color: var(--muted); margin-top: 12px; line-height: 1.55;
  max-width: 56ch;
}
.glass-band .proof-figure figcaption { color: var(--muted); }

/* service link grids with vector icons */
.svc-icons a { display: flex; align-items: center; gap: 9px; }
.svc-icons a i { width: 17px; text-align: center; color: var(--brand); font-size: 0.9rem; flex-shrink: 0; }
.svc-note { font-size: 0.88rem; color: var(--muted); margin: 0 0 10px; }
.state-group h3 i { color: var(--brand); margin-right: 8px; }

/* three-column latest content lists */
.latest-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.latest-col {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column;
}
.latest-col h3 {
  font-size: 1rem; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--bg-soft); display: flex; align-items: center; gap: 9px;
}
.latest-col h3 i { color: var(--brand); }
.latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.latest-list li { padding: 9px 0; border-bottom: 1px solid var(--bg-soft); }
.latest-list li:first-child { padding-top: 0; }
.latest-list li:last-child { border-bottom: 0; }
.latest-list a {
  font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.45;
}
.latest-list a:hover { color: var(--brand); }
.latest-list .lt-empty { color: var(--muted); font-size: 0.88rem; padding: 6px 0; border: 0; }
.latest-more {
  margin-top: 14px; font-size: 0.85rem; font-weight: 700; color: var(--brand); text-decoration: none;
}
.latest-more:hover { text-decoration: underline; }

@media (min-width: 760px) {
  .latest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .latest-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- state pages: workflow + sticky contact card ---------- */
.work-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; margin-top: 28px; }
.work-cta { display: flex; flex-direction: column; gap: 16px; }
.wc-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.wc-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.wc-card > p { font-size: 0.9rem; color: var(--muted); margin: 0 0 14px; }
.lead-form.compact { display: flex; flex-direction: column; gap: 10px; }
.lead-form.compact input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.92rem;
}
.lead-form.compact input:focus { outline: none; border-color: var(--brand); }
.lead-form.compact .btn { width: 100%; margin-top: 2px; }
.wc-contact .wc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wc-list li { border-bottom: 1px solid var(--bg-soft); }
.wc-list li:last-child { border-bottom: 0; }
.wc-list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; text-decoration: none; color: var(--ink); }
.wc-list a i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: rgba(43,127,240,0.09); color: var(--brand); font-size: 0.95rem; }
.wc-list a:hover i { background: var(--brand); color: #fff; }
.wc-list strong { display: block; font-size: 0.9rem; }
.wc-list em { display: block; font-style: normal; font-size: 0.78rem; color: var(--muted); }

/* ---------- state pages: split service sections ---------- */
.svc-split { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin: 14px 0 42px; }
.svc-split:last-of-type { margin-bottom: 30px; }
.svc-copy .section-sub { margin-bottom: 16px; }
.svc-shot .proof-figure img { border-radius: 14px; }
.ind-icon-grid { margin-top: 18px; }

/* Industry directories: a real grid rather than a wrapped chip cloud, so the
   columns re-flow with the window instead of leaving a ragged last row. The
   pill moves from the label to the whole link, which makes every cell the same
   size whatever the name's length. */
/* The tabbed services card is followed straight by the "Industries we serve"
   heading, which has no top margin of its own, so the two were touching. Match
   the 44px the section intro already leaves above the card. */
.svc-demo { margin-bottom: 52px; }
@media (max-width: 760px) { .svc-demo { margin-bottom: 34px; } }

.state-grid.ind-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px; align-items: stretch; }
.state-grid.ind-grid a {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 2px 8px rgba(14,40,90,0.06);
  transition: transform .15s, border-color .15s; }
.state-grid.ind-grid a:hover { transform: translateY(-2px); border-color: var(--cyan); }
.state-grid.ind-grid a span {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  font-size: 0.85rem; line-height: 1.35; white-space: normal; }
.state-grid.ind-grid a:hover span { transform: none; }
@media (max-width: 520px) {
  .state-grid.ind-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .state-grid.ind-grid a { padding: 9px 11px; }
}

@media (min-width: 1000px) {
  .work-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 44px; }
  .work-cta { position: sticky; top: 96px; }
  .svc-split { grid-template-columns: minmax(0,1fr) minmax(0,0.85fr); gap: 40px; }
}
.flow .fs-body h3 i { color: var(--brand); margin-right: 9px; font-size: 0.92em; }

/* ---------- Canada pages: geo-grid scan in the measurement section ---------- */
.geo-map { margin: 0; }
.geo-map img { width: 100%; height: auto; display: block; background: #fff; }
.geo-map figcaption {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; font-size: 0.84rem; line-height: 1.55; color: var(--muted);
}
.geo-map figcaption i { margin-top: 3px; color: var(--brand); flex-shrink: 0; }

/* ===========================================================================
   Google Business Profile page: animated geo-grid.
   Pins start outside the top 20 and climb to the top 3 over one loop, with the
   call and direction-request counters stepping up alongside them. Pure CSS, so
   there is no GIF to download and it stays sharp at any size.
   =========================================================================== */
.gbp-grid { position: relative; width: 100%; aspect-ratio: 900 / 647; border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-lg); background: #e8eef3 center/cover no-repeat; }
.gbp-grid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gbp-grid i { position: absolute; width: 5.6%; aspect-ratio: 1; margin: -2.8% 0 0 -2.8%;
  border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-weight: 800; color: #fff; font-size: clamp(9px, 1.35vw, 15px);
  box-shadow: 0 2px 6px rgba(4,14,36,.35);
  background: #d93025; animation: gbpPin 12s var(--d, 0s) infinite; }
.gbp-grid i { --d: calc(var(--i) * 60ms); }
.gbp-grid i b { grid-area: 1 / 1; opacity: 0; animation: gbpNum 12s var(--d, 0s) infinite; }
.gbp-grid i .p2 { animation-name: gbpNum2; }
.gbp-grid i .p3 { animation-name: gbpNum3; }
@keyframes gbpPin {
  0%, 22%   { background: #d93025; }
  38%, 55%  { background: #f5a623; }
  72%, 94%  { background: #1e8e3e; }
  100%      { background: #d93025; }
}
@keyframes gbpNum  { 0%, 24% { opacity: 1 } 34%, 96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes gbpNum2 { 0%, 30% { opacity: 0 } 40%, 57% { opacity: 1 } 67%, 100% { opacity: 0 } }
@keyframes gbpNum3 { 0%, 63% { opacity: 0 } 73%, 96% { opacity: 1 } 100% { opacity: 0 } }
/* the two live counters sitting over the map */
.gbp-stats { position: absolute; left: 3.2%; bottom: 3.6%; display: flex; gap: 10px; z-index: 2; }
.gbp-stat { background: rgba(255,255,255,.94); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 6px 20px rgba(4,14,36,.22); min-width: 116px; }
.gbp-stat span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.gbp-stat u { display: grid; text-decoration: none; font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gbp-stat u b { grid-area: 1 / 1; opacity: 0; animation: gbpNum 12s infinite; }
.gbp-stat u .p2 { animation-name: gbpNum2 }
.gbp-stat u .p3 { animation-name: gbpNum3 }
.gbp-stat i { font-style: normal; font-size: .72rem; font-weight: 700; color: #1e8e3e; }
.gbp-legend { position: absolute; right: 3.2%; top: 3.6%; z-index: 2; display: flex; gap: 6px;
  background: rgba(255,255,255,.94); border-radius: 999px; padding: 6px 10px;
  box-shadow: 0 6px 20px rgba(4,14,36,.22); font-size: .68rem; font-weight: 700; color: var(--muted); }
.gbp-legend em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.gbp-legend s { text-decoration: none; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .gbp-grid i, .gbp-grid i b, .gbp-stat u b { animation: none; }
  .gbp-grid i { background: #1e8e3e; }
  .gbp-grid i .p1, .gbp-grid i .p2, .gbp-stat u .p1, .gbp-stat u .p2 { display: none; }
  .gbp-grid i .p3, .gbp-stat u .p3 { opacity: 1; }
}

/* Dashboard screenshot cards. The source images range from 1.03 to 2.10 in aspect,
   so each sits contained inside a fixed 16:10 frame on a neutral ground rather than
   being forced to a single ratio - that mismatch was making the grid look ragged. */
.shot-grid { display: grid; gap: 20px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shot-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; box-shadow: 0 8px 26px rgba(14,40,90,.07); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease; }
.shot-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(14,40,90,.13); }
.shot-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; }
.shot-meta strong { font-family: var(--font-display); font-size: 1.24rem; font-weight: 800;
  color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.shot-meta span { font-size: .78rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
.shot-frame { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; }
.shot-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.shot-note { margin: 12px 2px 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .shot-grid { grid-template-columns: repeat(3, 1fr); } }

/* Slim cross-link bar, used where a page already carries a full promo band. */
.xlink-bar { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center;
  background: linear-gradient(180deg, #f6faff, #eef5fe); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px; }
.xlink-bar p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.xlink-bar .btn { grid-column: 2; justify-self: start; }
.xlink-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(43,127,240,.12); color: var(--brand); font-size: 1.05rem; grid-row: span 2; }
@media (min-width: 860px) {
  .xlink-bar { grid-template-columns: auto 1fr auto; }
  .xlink-bar .btn { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
  .xlink-ico { grid-row: 1; }
}
.wl-theme .xlink-bar { background: rgba(14,40,90,.04); }

/* Two business shapes side by side */
.biz-split { display: grid; gap: 22px; margin-top: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .biz-split { grid-template-columns: 1fr 1fr; } }
.biz-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 8px 26px rgba(14,40,90,.07); }
.biz-card h3 { font-size: 1.14rem; margin: 14px 0 6px; }
.biz-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(43,127,240,.12); color: var(--brand); font-size: 1.15rem; }
.biz-who { font-size: .82rem; font-weight: 700; color: var(--brand); margin: 0 0 12px; }
.biz-card p { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.biz-card p strong { color: var(--ink); }
.biz-card .check-list { margin-top: 14px; }
.biz-card .check-list li { font-size: .9rem; }
/* Accordion carrying the long-form factors. Headings stay real headings inside summary. */
.acc-list summary { align-items: flex-start; }
.acc-list summary h3 { font-size: 1.02rem; font-weight: 700; margin: 0; line-height: 1.45;
  font-family: var(--font-body); color: inherit; display: inline; }
.acc-list details[open] summary h3 { color: var(--brand); }

/* White-label country heroes keep the white wl-theme ground; the country flag sits
   behind the copy as a quiet mark. Opacity is tuned for white rather than reused
   from the coloured heroes, where the same artwork needs to be far fainter. */
.wl-theme .page-hero.wl-flag { position: relative; overflow: hidden; }
.wl-theme .page-hero.wl-flag > .container { position: relative; z-index: 1; }
.wl-theme .page-hero.wl-flag::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -4%; top: 50%; transform: translateY(-50%);
  width: min(460px, 38%); aspect-ratio: 3 / 2;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 50%, #000 30%, rgba(0,0,0,0) 78%),
    linear-gradient(to bottom, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(120% 120% at 100% 50%, #000 30%, rgba(0,0,0,0) 78%),
    linear-gradient(to bottom, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  mask-composite: intersect;
  opacity: .17; }
.wl-theme .page-hero.wl-flag.wl-us::after { background-image: var(--usflag); aspect-ratio: 19 / 10; }
.wl-theme .page-hero.wl-flag.wl-uk::after,
.wl-theme .page-hero.wl-flag.wl-au::after { background-image: var(--jack); aspect-ratio: 2 / 1; }
.wl-theme .page-hero.wl-flag.wl-nz::after { background-image: var(--cross); aspect-ratio: 359 / 472;
  width: min(300px, 26%); right: 3%; opacity: .24; }   /* the cross is four small stars, so it needs
     more of the field and more weight than a solid flag does to read at all */
.wl-theme .page-hero.wl-flag.wl-ca::after { background-image: var(--leaf); aspect-ratio: 927 / 1000; width: min(260px, 24%); opacity: .13; }
.wl-theme .page-hero.wl-flag.wl-nl::after { background-image: var(--nlflag); aspect-ratio: 3 / 2; }
.wl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.wl-hero-cta .wl-cta-note { font-size: .86rem; color: var(--muted); }
@media (max-width: 760px) {
  .wl-theme .page-hero.wl-flag::after { right: -12%; width: 60%; opacity: .10; }
}

/* ---- Country hub map -----------------------------------------------------
   A static map with every region name laid over it as a real link. Positions
   are percentages worked out at build time (gen_hub_overlay.py), so nothing is
   measured or positioned by script at page load. Labels are sized in px for a
   1100px-wide map, which is the width the layout was solved for. */
.cmap { position: relative; margin: 26px 0 10px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: #eef6ff; box-shadow: var(--shadow); }
.cmap-bg { display: block; width: 100%; height: auto; }
.cmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cmap-lines line { stroke: #6f9fd8; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .8; }
.cmap-dot { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 2px rgba(255,255,255,.95); }
.cmap-tag { position: absolute; left: var(--x); top: var(--y);
  transform: translate(-11px, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 9px 3px 6px; border-radius: 999px; text-decoration: none;
  font-size: 12px; font-weight: 700; line-height: 15px;
  color: var(--ink); background: rgba(255,255,255,.93);
  border: 1px solid rgba(43,127,240,.3); box-shadow: 0 1px 3px rgba(14,27,51,.13);
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.cmap-tag::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--brand);
  -webkit-mask: var(--pin) center/contain no-repeat; mask: var(--pin) center/contain no-repeat; }
.cmap-tag.flip { flex-direction: row-reverse; padding: 3px 6px 3px 9px;
  transform: translate(calc(-100% + 11px), -50%); }
.cmap-tag:hover, .cmap-tag:focus-visible { background: var(--brand); color: #fff;
  border-color: var(--brand); z-index: 4; }
/* an explicit ring: over a busy map the UA outline alone is easy to lose */
.cmap-tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmap-tag:hover::before, .cmap-tag:focus-visible::before { background: #fff; }
/* regions that fall outside the frame (Alaska, Hawaii) sit in an inset, the way
   a printed atlas handles them, rather than being dropped from the map */
.cmap-inset { position: absolute; left: 2.4%; bottom: 9%; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 44%;
  padding: 7px 10px; border-radius: 14px; background: rgba(255,255,255,.82);
  border: 1px solid var(--line); }
.cmap-inset > span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.cmap-inset .cmap-tag { position: static; transform: none; box-shadow: none; }
.cmap-note { font-size: .88rem; color: var(--muted); margin-bottom: 22px; }
.cmap-note-sm { display: none; }
/* The labels on the map ARE the list, so the A-Z grid is only rendered where
   the map cannot show names. Both carry the same links; only one shows at a
   time, and the mobile one is what Google indexes. */
.state-groups.cmap-list { display: none; }

/* Narrower than the width the labels were placed for they would pile on top of
   each other, so the map becomes a picture and the full list below does the
   navigating - every link there is the same link. */
@media (max-width: 900px) {
  .cmap-tag, .cmap-lines, .cmap-inset, .cmap-note { display: none; }
  .cmap-note-sm, .state-groups.cmap-list { display: block; }
  .state-groups.cmap-list { display: grid; }
  .cmap-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.95); }
  .cmap { margin-top: 20px; }
}

/* Region maps are silhouettes on a transparent ground: the blank around the
   shape is the point, so they take no frame, panel or shadow - inside one, the
   empty area reads as an empty card instead of as sea and neighbouring states. */
.proof-figure img.region-map {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  max-width: 795px; margin: 0 auto; }