/* ==== TOKENS ==== */
  :root {
    --blue: #155EEF;
    --blue-dark: #0B45CC;
    --blue-light: #4A83F5;
    --blue-50: rgba(21, 94, 239, 0.08);
    --blue-glow: rgba(21, 94, 239, 0.35);

    --ink: #E8ECF2;
    --ink-soft: #C8CFDA;
    --muted: #8B95A8;
    --faint: #5B6475;

    --bg: #0B1220;
    --bg-deep: #070A13;
    --surface: #111827;
    --surface-2: #1A2233;
    --surface-3: #232B3D;
    --line: #223049;

    --success: #10B981;
    --warn: #F59E0B;
    --danger: #EF4444;

    --container: 1240px;
    --gutter: 28px;
    --section-pad: 120px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Aliases — preserve naming consistency across ~51 references that use the
       semantic names rather than the palette names. Without these aliases the
       referenced rules silently render with no fill (e.g. .floor-value gradient
       text became fully transparent because var(--ultra-blue) was undefined). */
    --ultra-blue: var(--blue);
    --border: var(--line);
    --text: var(--ink);
  }

  /* ==== RESET ==== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  ::selection { background: var(--blue); color: #fff; }

  /* ==== TYPE ==== */
  .display, h1, h2, h3 {
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    /* Auto-balance line lengths so no orphan word lands on its own line.
       Modern browsers: Chrome 114+, Safari 17.4+, Firefox 121+ (all shipping since 2023). */
    text-wrap: balance;
  }
  h1 { font-size: clamp(34px, 4.3vw, 50px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; }
  h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -0.028em; }
  h3 { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.22; letter-spacing: -0.02em; font-weight: 600; }
  p { margin: 0 0 16px; text-wrap: pretty; }
  .mono {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-light);
    font-weight: 500;
    margin-bottom: 20px;
    display: inline-block;
  }
  .eyebrow::before { content: "// "; opacity: 0.6; }

  /* ==== LAYOUT ==== */
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
  .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
  section { padding: var(--section-pad) 0; position: relative; }
  .section-intro { max-width: 820px; margin: 0 auto 56px; text-align: center; }
  .section-intro.align-left { text-align: left; margin-left: 0; }
  .section-intro .eyebrow { margin-bottom: 24px; }
  .section-intro h2 { margin: 0 0 26px; }
  .section-intro .lede {
    font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-soft); max-width: 620px; line-height: 1.6;
    margin-top: 26px;
    text-wrap: pretty;
  }
  .section-intro.align-left .lede { max-width: 720px; }
  .section-intro.align-left.full-width, .section-intro.align-left.full-width .lede { max-width: none; }

  /* ==== SKIP LINK ==== */
  .skip-link {
    position: absolute; top: -40px; left: 12px; background: var(--blue); color: #fff;
    padding: 8px 12px; border-radius: 6px; z-index: 100; transition: top 180ms var(--ease);
  }
  .skip-link:focus { top: 12px; }

  /* ==== NAV ==== */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(11, 18, 32, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(34, 48, 73, 0);
    transition: border-color 220ms var(--ease), background 220ms var(--ease);
  }
  .nav.scrolled { border-bottom-color: var(--line); background: rgba(11, 18, 32, 0.9); }

  /* WP admin-bar accounting — when logged in as admin, WP pushes <html> down 32px
     (46px on narrow viewports). Our fixed-position .nav must offset the same amount
     or it renders UNDER the admin bar, clipping the logo. Matches WP core behavior. */
  body.admin-bar .nav { top: 32px; }
  body.admin-bar .mobile-menu { top: 32px; }
  @media screen and (max-width: 782px) {
    body.admin-bar .nav { top: 46px; }
    body.admin-bar .mobile-menu { top: 46px; }
  }
  @media screen and (max-width: 600px) {
    body.admin-bar .nav { top: 0; } /* admin bar itself auto-hides at this breakpoint */
    body.admin-bar .mobile-menu { top: 0; }
  }
  .nav-inner {
    max-width: 1440px; margin: 0 auto; padding: 14px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 10px; font-family: "Poppins";
    font-weight: 700; font-size: 19px; letter-spacing: -0.025em; color: #fff; line-height: 1;
  }
  .nav-brand img { height: 30px; width: auto; display: block; }
  .nav-brand .wordmark { display: flex; align-items: baseline; gap: 6px; }
  .nav-brand .wordmark .accent { color: var(--blue-light); font-weight: 500; }

  .nav-links { display: flex; gap: 4px; align-items: center; }
  .nav-item { position: relative; }
  .nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 13px; border-radius: 8px;
    font-size: 14.5px; color: var(--ink-soft); font-weight: 500;
    font-family: "Manrope", sans-serif;
    background: transparent; border: 0; cursor: pointer;
    transition: color 160ms var(--ease), background 160ms var(--ease);
    line-height: 1; text-decoration: none;
    outline: none;
  }
  /* Animated underline — 2px Ultra Blue line grows from center on hover/open */
  .nav-link::after {
    content: ""; position: absolute; left: 50%; right: 50%;
    bottom: 1px; height: 2px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%);
    border-radius: 2px;
    transition: left 220ms var(--ease), right 220ms var(--ease), opacity 160ms var(--ease);
    opacity: 0;
  }
  .nav-link:hover, .nav-item.open > .nav-link {
    color: #fff; background: rgba(74,131,245,0.06);
  }
  .nav-link:hover::after, .nav-item.open > .nav-link::after {
    left: 12px; right: 12px; opacity: 1;
  }
  /* Keyboard focus — explicit visible ring, distinct from hover treatment */
  .nav-link:focus-visible {
    color: #fff;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue-light);
  }
  .nav-link .chev {
    font-size: 10px; opacity: 0.55; transition: transform 200ms var(--ease), opacity 160ms var(--ease);
    display: inline-block;
  }
  .nav-item.open > .nav-link .chev { transform: rotate(180deg); opacity: 1; }
  .nav-link:hover .chev { opacity: 1; }

  /* Consistent focus ring utility for all interactive elements in the nav surface */
  .btn:focus-visible,
  .dropdown a:focus-visible,
  .mega a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue-light);
  }

  /* Standard dropdown */
  .dropdown {
    position: absolute; top: calc(100% + 8px); left: -4px;
    min-width: 280px; padding: 8px;
    background: rgba(17, 24, 39, 0.96);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 24px 64px -10px rgba(0,0,0,0.65);
    opacity: 0; transform: translateY(-6px);
    pointer-events: none; visibility: hidden;
    transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
  }
  .nav-item.open > .dropdown {
    opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible;
    transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s;
  }
  .dropdown a {
    display: block; padding: 10px 12px; border-radius: 8px;
    color: var(--ink-soft); transition: all 140ms var(--ease); text-decoration: none;
  }
  .dropdown a:hover {
    background: rgba(21,94,239,0.1); color: #fff;
  }
  .dropdown .dd-item-title {
    font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3;
  }
  .dropdown a:hover .dd-item-title { color: var(--blue-light); }
  .dropdown .dd-item-desc {
    font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 400; line-height: 1.4;
  }
  .dropdown .dd-divider {
    height: 1px; background: var(--line); margin: 6px 4px;
  }
  .dropdown .dd-footer {
    padding: 8px 12px 4px;
  }
  .dropdown .dd-footer a {
    color: var(--blue-light); font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600; padding: 0;
  }
  .dropdown .dd-footer a:hover { background: transparent; color: #fff; }

  /* Mega menu (Services) */
  .mega {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(1040px, calc(100vw - 48px));
    padding: 26px;
    background: rgba(17, 24, 39, 0.96);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 32px 80px -10px rgba(0,0,0,0.7);
    opacity: 0;
    pointer-events: none; visibility: hidden;
    transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
  }
  .nav-item.open > .mega {
    opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; visibility: visible;
    transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 0s;
  }
  .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .mega-col h4 {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light);
    font-weight: 500; margin: 0 0 12px; padding: 0 10px;
  }
  .mega-col ul { padding: 0; margin: 0; list-style: none; }
  .mega-col li { margin: 0; }
  .mega-col a {
    display: block; padding: 8px 10px; border-radius: 6px;
    font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
    transition: all 120ms var(--ease); text-decoration: none; line-height: 1.3;
  }
  .mega-col a:hover { background: rgba(21,94,239,0.1); color: #fff; }
  .mega-col .all-link {
    margin-top: 10px; padding: 10px 10px 0; border-top: 1px solid var(--line);
    color: var(--blue-light); font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    display: block;
  }
  .mega-col .all-link:hover { color: #fff; background: transparent; }
  .mega-col.featured {
    background: linear-gradient(135deg, rgba(21,94,239,0.14) 0%, var(--surface-2) 100%);
    border: 1px solid rgba(21,94,239,0.3); border-radius: 12px;
    padding: 20px;
  }
  .mega-col.featured .labs-badge {
    display: inline-block; font-family: "JetBrains Mono"; font-size: 10px;
    font-weight: 600; letter-spacing: 0.14em;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(21,94,239,0.25); color: var(--blue-light);
    border: 1px solid rgba(21,94,239,0.45); margin-bottom: 12px;
  }
  .mega-col.featured h5 { font-family: "Poppins"; font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.2; }
  .mega-col.featured p { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
  .mega-col.featured a { padding: 0; color: var(--blue-light); font-family: "JetBrains Mono"; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
  .mega-col.featured a:hover { background: transparent; color: #fff; }

  /* Phone + CTA */
  .nav-cta-row { display: flex; gap: 12px; align-items: center; }
  .nav-phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "JetBrains Mono", monospace; font-size: 13.5px; font-weight: 600;
    color: var(--ink); letter-spacing: 0.01em; line-height: 1;
    padding: 8px 12px; border-radius: 8px;
    transition: all 160ms var(--ease); text-decoration: none;
  }
  .nav-phone:hover { color: var(--blue-light); background: rgba(255,255,255,0.04); }
  .nav-phone svg { width: 14px; height: 14px; flex-shrink: 0; color: #fff; }
  .nav-phone:hover svg { color: var(--blue-light); }

  /* Mobile phone CTA button — always visible on mobile header */
  .nav-phone-btn {
    display: none;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 180ms var(--ease);
    box-shadow: 0 6px 20px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,0.08);
    position: relative;
  }
  .nav-phone-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
  .nav-phone-btn:active { transform: scale(0.96); }
  .nav-phone-btn svg { width: 18px; height: 18px; color: #fff; }
  .nav-phone-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: 10px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none;
  }
  .nav-phone-btn:hover::after { opacity: 1; }

  /* Mobile toggle button */
  .nav-toggle {
    display: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    width: 44px; height: 44px;
    padding: 0;
    align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 180ms var(--ease);
    position: relative;
  }
  .nav-toggle:hover { border-color: var(--blue-light); background: rgba(21,94,239,0.08); }
  .nav-toggle .bars { display: block; width: 20px; height: 14px; position: relative; }
  .nav-toggle .bars span {
    display: block; position: absolute; left: 0; right: 0;
    height: 2px; background: #fff; border-radius: 1px;
    transition: transform 280ms var(--ease-out-expo), opacity 180ms var(--ease), top 220ms var(--ease);
    transform-origin: center;
  }
  .nav-toggle .bars span:nth-child(1) { top: 0; }
  .nav-toggle .bars span:nth-child(2) { top: 6px; }
  .nav-toggle .bars span:nth-child(3) { top: 12px; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); background: var(--blue-light); }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); background: var(--blue-light); }

  /* Mobile menu overlay + panel */
  .mobile-backdrop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(7, 10, 19, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity 300ms var(--ease);
  }
  .mobile-backdrop.open { opacity: 1; pointer-events: auto; }

  .mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: min(440px, 100vw);
    background: var(--bg-deep);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 340ms var(--ease-out-expo);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--bg-deep); z-index: 2; flex-shrink: 0;
  }
  .mobile-menu-head .nav-brand { font-size: 17px; }
  .mobile-menu-head .nav-brand img { height: 26px; }
  .mobile-close {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    width: 40px; height: 40px; border-radius: 10px;
    color: var(--ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 180ms var(--ease);
  }
  .mobile-close:hover { border-color: var(--blue-light); color: var(--blue-light); }
  .mobile-close svg { width: 18px; height: 18px; }

  .mobile-cta-stack {
    padding: 22px; display: flex; flex-direction: column; gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-cta-phone {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 12px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    box-shadow: 0 12px 32px -6px var(--blue-glow);
    color: #fff; text-decoration: none;
    transition: transform 180ms var(--ease), box-shadow 220ms var(--ease);
    position: relative; overflow: hidden;
  }
  .mobile-cta-phone::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
  }
  .mobile-cta-phone:active { transform: scale(0.985); }
  .mobile-cta-phone .phone-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    position: relative; z-index: 1;
  }
  .mobile-cta-phone svg { width: 22px; height: 22px; color: #fff; }
  .mobile-cta-phone .cta-text { position: relative; z-index: 1; }
  .mobile-cta-phone .cta-text .num {
    font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px;
    color: #fff; letter-spacing: -0.015em; line-height: 1; margin-bottom: 5px;
  }
  .mobile-cta-phone .cta-text .avail {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    color: rgba(255,255,255,0.88); letter-spacing: 0.04em; line-height: 1.35;
  }
  .mobile-cta-stack .btn {
    padding: 14px 22px; justify-content: center; font-size: 15px;
  }

  .mobile-nav { padding: 10px 22px; flex: 1; }
  .mobile-nav details { border-bottom: 1px solid var(--line); }
  .mobile-nav details:last-of-type { border-bottom: none; }
  .mobile-nav details summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; cursor: pointer;
    font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px;
    color: #fff; letter-spacing: -0.01em;
    user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav details summary::-webkit-details-marker { display: none; }
  .mobile-nav details summary::marker { display: none; content: ""; }
  .mobile-nav details summary .plus {
    width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--blue-light); line-height: 1;
    transition: transform 260ms var(--ease-out-expo), border-color 180ms var(--ease), color 180ms var(--ease);
    font-family: "Manrope"; font-weight: 300;
  }
  .mobile-nav details[open] summary .plus {
    transform: rotate(45deg); border-color: var(--blue-light); color: var(--blue-light);
  }
  .mobile-nav details[open] summary { color: var(--blue-light); }
  .mobile-nav details ul {
    padding: 0 0 14px; margin: 0; list-style: none;
  }
  .mobile-nav details li { margin: 0; }
  .mobile-nav details a {
    display: block; padding: 12px 0 12px 14px;
    font-size: 14.5px; color: var(--ink-soft); font-weight: 500;
    border-left: 2px solid var(--line); text-decoration: none;
    transition: all 140ms var(--ease);
  }
  .mobile-nav details a:hover, .mobile-nav details a:focus {
    color: var(--blue-light); border-left-color: var(--blue-light);
  }

  .mobile-footer {
    padding: 24px 22px 40px; border-top: 1px solid var(--line);
    background: var(--bg); flex-shrink: 0;
  }
  .mobile-footer .nap {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted);
    line-height: 1.8; letter-spacing: 0.02em; margin-bottom: 18px;
  }
  .mobile-footer .nap strong { color: var(--ink); font-weight: 600; }
  .mobile-footer .socials {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .mobile-footer .socials a {
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-family: "JetBrains Mono"; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-light);
    text-decoration: none; transition: all 160ms var(--ease);
  }
  .mobile-footer .socials a:hover { border-color: var(--blue-light); background: rgba(21,94,239,0.08); }

  /* Breakpoints — switch to mobile menu mode at 1080px (before labels crowd) */
  @media (max-width: 1080px) {
    .nav-links { display: none; }
    .nav-phone { display: none; }
    .nav-cta-row > .btn-primary { display: none; }
    .nav-phone-btn { display: inline-flex; }
    .nav-toggle { display: inline-flex; }
  }

  /* Lock body scroll when mobile menu is open */
  body.mobile-menu-open { overflow: hidden; }

  /* ==== BUTTONS ==== */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: all 180ms var(--ease); position: relative; overflow: hidden;
    font-family: "Manrope", sans-serif; letter-spacing: -0.005em;
    line-height: 1; white-space: nowrap;
  }
  .btn-primary {
    background: var(--blue); color: #fff;
    box-shadow: 0 8px 24px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .btn-primary:hover {
    background: var(--blue-dark);
    box-shadow: 0 14px 32px -6px var(--blue-glow), inset 0 0 0 1px rgba(255,255,255,0.14);
    transform: translateY(-1px);
  }
  .btn-ghost {
    background: transparent; color: var(--ink); border-color: var(--line);
  }
  .btn-ghost:hover { border-color: var(--blue-light); color: var(--blue-light); }
  .btn-lg { padding: 16px 28px; font-size: 15.5px; }
  .arr { display: inline-block; transition: transform 180ms var(--ease); }
  .btn:hover .arr { transform: translateX(3px); }

  /* ==== HERO ==== */
  .hero {
    padding: calc(var(--section-pad) + 10px) 0 60px;
    position: relative; overflow: hidden;
    min-height: 100vh;
    display: flex; align-items: center;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(21,94,239,0.18) 0%, transparent 45%),
      radial-gradient(circle at 85% 70%, rgba(74,131,245,0.10) 0%, transparent 50%);
    pointer-events: none;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  }
  .hero-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    position: relative; z-index: 2;
  }
  @media (max-width: 980px) {
    .hero { padding: calc(var(--section-pad) - 20px) 0 60px; min-height: auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { max-width: 540px; margin: 0 auto; }
  }
  .hero-eyebrow {
    display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 28px;
    font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .hero-eyebrow span { position: relative; }
  .hero-eyebrow span::before { content: "// "; color: var(--blue-light); opacity: 0.8; }
  .hero h1 {
    margin-bottom: 28px;
    /* Tuned with 1440 container + 1fr/1fr grid: text column ~636px at 1920vw,
       H1 at 56px fits "We engineer the systems they run on." in clean 2-line balance.
       Combined with first sentence's 2-line balance = 4 balanced lines, no orphan. */
    font-size: clamp(38px, 4.8vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.035em;
  }
  .hero h1 .gradient {
    background: linear-gradient(135deg, #fff 0%, #8FB4FF 50%, var(--blue-light) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .hero-sub {
    font-size: clamp(16px, 1.3vw, 18.5px); color: var(--ink-soft);
    margin-bottom: 36px; max-width: 620px; line-height: 1.6;
    text-wrap: pretty;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
  .hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    padding: 28px 0 0; border-top: 1px solid var(--line);
  }
  .hero-stats > div { min-width: 0; }
  .hero-stats .stat-num {
    font-family: "Poppins"; font-weight: 700; font-size: 30px;
    letter-spacing: -0.025em; color: #fff; line-height: 1;
  }
  .hero-stats .stat-lbl {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px;
  }

  .hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 880px;                /* bumped 780 \u2192 880 (R5 2026-04-21) */
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    /* R11 2026-04-21: removed `transform-style: preserve-3d` from this parent so the
       .hero-intro-monitor <img> (now a sibling of .tilt, not a child) sits in a flat
       stacking context where z-index reliably wins over the SVG's center-glow filter
       stacking. Perspective remains for the children's 3D transforms (.tilt's cursor
       parallax still reads as true 3D). */
    perspective: 1400px;
    will-change: transform;
  }
  .hero-visual .tilt {
    position: relative;              /* anchor for .hero-intro-monitor absolute positioning */
    width: 100%; height: 100%;
    transition: transform 700ms var(--ease-out-expo);
    will-change: transform;
    transform-style: preserve-3d;
  }

  /* ===== NETWORK HUB SVG (v2 — curved web, icon nodes, 3D monitor center) ===== */
  .net-svg {
    width: 100%; height: 100%; display: block; overflow: visible;
    /* position + z-index so the SVG stacks DETERMINISTICALLY below the HTML intro
       monitor. Without `position: absolute`, the SVG is static and its z-index is
       ignored \u2014 which caused the center-glow's drop-shadow filter to paint on top
       of the img inside the .tilt's `transform-style: preserve-3d` context
       (R9 layering bug 2026-04-21). */
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* =========================================================================
   * HERO NETWORK \u2014 CINEMATIC ENTRANCE (R6 2026-04-21)
   *
   * Three-phase storytelling sequence designed around an ultra-premium "flagship
   * art piece" that communicates "we build YOUR NEW WEBSITE, connected to every
   * platform that matters." Replaces the fast/cheap cascade from R5.
   *
   *   0.0s  \u2192 1.5s   Phase A \u2014 HOLD. Giant "YOUR NEW WEBSITE" monitor fills the hero
   *                              visual. Central node + network are hidden. User reads
   *                              the message. Subtle 3D tilt on the monitor sells depth.
   *   1.5s  \u2192 2.3s   Phase B \u2014 DESCEND. Giant monitor scales from 1.0 \u2192 0.28, passes
   *                              through a 3D rotate midpoint (rotateX 12deg, rotateY -18deg),
   *                              flattens back to 0deg at end, fades opacity 1 \u2192 0.
   *                              Simultaneously, stationary central node (ring + glow +
   *                              small clipped monitor) fades in at its final position.
   *   2.3s  \u2192 8.3s   Phase C \u2014 CASCADE. Each of 8 connection lines + terminal nodes
   *                              appears in sequential pairs, 750ms per pair, STRICTLY
   *                              sequential (no overlap between pairs). Line fades in
   *                              first (450ms), node pops 300ms later (350ms, slight
   *                              overshoot). User registers each tentacle as a separate
   *                              important piece of the network.
   *   8.3s+             Phase D \u2014 STEADY STATE. Particles, halos, rings begin ambient
   *                              cycling. Cursor-parallax tilt remains.
   *
   * Total intro: 8.3s. Honors prefers-reduced-motion by collapsing to a 400ms fade.
   * ====================================================================== */

  /* =========================================================================
   * HERO INTRO VIDEO \u2014 REMOVED R15 2026-04-21.
   *
   * The R6-R14 monitor-intro-animation arc (CSS entrance, Imagen frames,
   * Kling video integration) was scrapped as a failed attempt. See
   * memory/decisions.md "Hero intro animation paused" entry for the full
   * diagnosis and what to do differently next time. Hero monitor is now
   * just the static SVG clipped monitor in the center-group, with the
   * ambient SVG network + cursor parallax + all other animations intact.
   * ====================================================================== */

  /* =========================================================================
   * HERO INTRO MONITOR \u2014 REMOVED R12 2026-04-21.
   *
   * The CSS/image-alpha approach hit an irreparable wall: AI-generated still
   * images aren't sprite-quality assets (alpha extraction always breaks at
   * either the screen content or the bezel boundaries), and CSS 3D rotation
   * on a flat image reads as "2D card tilting" because baked-in lighting
   * doesn't update with rotation. Moved to a Kling 3.0 video pipeline \u2014 see
   * skills/kling-video-workflow.md for the new pattern.
   *
   * The keyframes + .hero-intro-monitor rules below are PRESERVED as dead code
   * for reference. They can be deleted once the Kling video is integrated.
   * ====================================================================== */
  @keyframes heroIntroSequence {
    /* All keyframes use circle() clip-path so the radius interpolates smoothly.
       Mixing inset() and circle() in one animation forces a step-change between
       shape functions (spec-defined: CSS can only tween between same-shape functions),
       which would cause a visible clip-path "snap" mid-animation. */

    /* Phase A: hold full size, subtle tilt. circle(100%) = effectively no clip. */
    0% {
      transform: translate3d(0, 0, 0) scale(1) rotateX(4deg) rotateY(-6deg);
      clip-path: circle(100% at 50% 50%);
      opacity: 1;
    }
    /* Phase B start (at 1.5s): begin the descent, clip just starts tightening */
    20% {
      transform: translate3d(0, 0, 0) scale(0.72) rotateX(6deg) rotateY(-8deg);
      clip-path: circle(92% at 50% 50%);
      opacity: 1;
    }
    /* Phase B midpoint: softer rotation peak, element is ~half-size */
    60% {
      transform: translate3d(0, 0, 0) scale(0.45) rotateX(4deg) rotateY(-6deg);
      clip-path: circle(65% at 50% 50%);
      opacity: 1;
    }
    /* Phase B end: locked into central node \u2014 small, flat, circularly clipped.
       Final scale 0.33 \u00d7 element 880px \u00d7 circle(42%) = 122px visible radius,
       matching the SVG center-ring (r=135 in 800 viewBox = 148.5px at 880 viewport,
       so ring sits ~26px outside the clipped monitor = visible frame around it). */
    100% {
      transform: translate3d(0, 0, 0) scale(0.33) rotateX(0deg) rotateY(0deg);
      clip-path: circle(42% at 50% 50%);
      opacity: 1;
    }
  }
  .hero-intro-monitor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    transform-origin: 50% 50%;
    /* GPU compositor hints \u2014 dedicate a layer for silky 3D transforms */
    will-change: transform, clip-path;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0) scale(1) rotateX(4deg) rotateY(-6deg);
    clip-path: circle(100% at 50% 50%);
    /* R11: radial mask REMOVED \u2014 the flood-alpha PNG already has clean transparent
       background around the monitor silhouette (preserved by flood-fill from edges,
       stopping at the bezel color boundary). No additional mask needed. */
    animation: heroIntroSequence 900ms cubic-bezier(0.6, 0, 0.25, 1) 1500ms both;
    z-index: 10;  /* explicitly above .tilt (auto z-index) \u2014 flat stacking in .hero-visual */
  }

  /* =========================================================================
   * HERO ENTRANCE ANIMATION (R16 2026-04-21)
   *
   * Sequence (quick + fluid, ~3.1s total):
   *   t=0ms     Left-column text + buttons fade in (via existing .reveal)
   *   t=1000ms  Central node fades in (500ms duration)
   *   t=1500ms  First connection line draws from center out to ADS node (400ms)
   *   t=1700ms  ADS subnode activates (opacity 0 + scale 0.6 \u2192 opacity 1 + scale 1)
   *   ...stagger 150ms between each pair, CCW from 3 o'clock\u2026
   *   t=3100ms  All subnodes activated; ambient animations (rings, particles,
   *             node halos) begin pulsing.
   *
   * Honors prefers-reduced-motion \u2014 all entrance animations collapse to visible
   * final state instantly.
   * ====================================================================== */

  /* Central node: fade in at 1s + breathe after entrance */
  @keyframes centerReveal { to { opacity: 1; } }
  @keyframes centerBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
  }
  .net-svg .center-group {
    transform-origin: 400px 400px; transform-box: fill-box;
    opacity: 0;
    animation:
      centerReveal 500ms ease-out 1000ms both,
      centerBreathe 5s ease-in-out 1500ms infinite;
  }
  .net-svg .center-glow {
    filter: drop-shadow(0 0 40px rgba(21, 94, 239, 0.6));
  }
  .net-svg .center-ring {
    fill: none; stroke: var(--blue-light); stroke-width: 1.5; opacity: 0.4;
  }

  /* Connection paths: draw from center outward, starting at 1500ms with 150ms stagger.
     stroke-dasharray: 400 + stroke-dashoffset: 400 \u2192 0 animates the stroke from the
     END of the path (which is the center, since paths go node\u2192center) backward toward
     the start (node). Net effect: line appears to extend from center outward. */
  @keyframes connDraw { to { stroke-dashoffset: 0; } }
  .net-svg .conn {
    fill: none;
    stroke: rgba(74, 131, 245, 0.38);
    stroke-width: 1.2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: connDraw 400ms ease-out both;
  }
  .net-svg .conn:nth-of-type(1) { animation-delay: 1500ms; }  /* ADS        (0\u00b0 right) */
  .net-svg .conn:nth-of-type(2) { animation-delay: 1650ms; }  /* GOOGLE     (45\u00b0) */
  .net-svg .conn:nth-of-type(3) { animation-delay: 1800ms; }  /* META       (90\u00b0 top) */
  .net-svg .conn:nth-of-type(4) { animation-delay: 1950ms; }  /* TIKTOK     (135\u00b0) */
  .net-svg .conn:nth-of-type(5) { animation-delay: 2100ms; }  /* AI INT.    (180\u00b0 left, was DIRECT) */
  .net-svg .conn:nth-of-type(6) { animation-delay: 2250ms; }  /* EMAIL      (225\u00b0) */
  .net-svg .conn:nth-of-type(7) { animation-delay: 2400ms; }  /* CRM        (270\u00b0 bottom) */
  .net-svg .conn:nth-of-type(8) { animation-delay: 2550ms; }  /* ANALYTICS  (315\u00b0) */

  /* Subnodes: fade in + slight scale overshoot 200ms after their line starts drawing */
  @keyframes nodeActivate {
    0%   { opacity: 0; transform: scale(0.55); }
    65%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }
  .net-svg .node {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: nodeActivate 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .net-svg .node[data-i="0"] { animation-delay: 1700ms; }  /* ADS */
  .net-svg .node[data-i="1"] { animation-delay: 1850ms; }  /* GOOGLE */
  .net-svg .node[data-i="2"] { animation-delay: 2000ms; }  /* META */
  .net-svg .node[data-i="3"] { animation-delay: 2150ms; }  /* TIKTOK */
  .net-svg .node[data-i="4"] { animation-delay: 2300ms; }  /* AI INT. */
  .net-svg .node[data-i="5"] { animation-delay: 2450ms; }  /* EMAIL */
  .net-svg .node[data-i="6"] { animation-delay: 2600ms; }  /* CRM */
  .net-svg .node[data-i="7"] { animation-delay: 2750ms; }  /* ANALYTICS */

  /* Node internals (visuals inside each subnode circle) */
  .net-svg .node-core {
    fill: #0B1220; stroke: var(--blue-light); stroke-width: 1.5;
    filter: drop-shadow(0 0 8px rgba(74, 131, 245, 0.4));
  }
  .net-svg .node-label {
    fill: var(--ink-soft); font-family: "JetBrains Mono", monospace;
    font-size: 14px; letter-spacing: 0.22em; font-weight: 500;
  }

  /* Subnode halo pulses \u2014 ambient, start AFTER their parent node activates.
     Each delay = node activation + 350ms settle. */
  @keyframes nodeHalo {
    0%, 100% { transform: scale(0.7); opacity: 0; }
    30%      { opacity: 0.7; }
    100%     { transform: scale(2.2); opacity: 0; }
  }
  .net-svg .node-halo {
    fill: none; stroke: var(--blue-light); stroke-width: 1.2; opacity: 0;
    transform-origin: center; transform-box: fill-box;
    animation: nodeHalo 2.8s ease-out infinite;
  }
  .net-svg .node[data-i="0"] .node-halo { animation-delay: 2050ms; }
  .net-svg .node[data-i="1"] .node-halo { animation-delay: 2200ms; }
  .net-svg .node[data-i="2"] .node-halo { animation-delay: 2350ms; }
  .net-svg .node[data-i="3"] .node-halo { animation-delay: 2500ms; }
  .net-svg .node[data-i="4"] .node-halo { animation-delay: 2650ms; }
  .net-svg .node[data-i="5"] .node-halo { animation-delay: 2800ms; }
  .net-svg .node[data-i="6"] .node-halo { animation-delay: 2950ms; }
  .net-svg .node[data-i="7"] .node-halo { animation-delay: 3100ms; }

  /* Expanding pulse rings from center \u2014 start at 1.2s (just after central node fades in) */
  @keyframes ringPulse {
    0%   { transform: scale(0.55); opacity: 0.65; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  .net-svg .ring {
    fill: none; stroke: var(--blue-light); stroke-width: 1.2;
    transform-origin: 400px 400px; transform-box: fill-box;
    opacity: 0;
    animation: ringPulse 3.6s var(--ease-out-expo) 1200ms infinite;
  }
  .net-svg .ring-2 { animation-delay: 2400ms; }
  .net-svg .ring-3 { animation-delay: 3600ms; }

  /* Central halo breathing \u2014 fade in at 1s with the central node, then pulse ambient */
  @keyframes haloFadeIn { to { opacity: 0.55; } }
  @keyframes haloBreathe {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.08); }
  }
  .net-svg .halo {
    transform-origin: 400px 400px; transform-box: fill-box;
    opacity: 0;
    animation:
      haloFadeIn 600ms ease-out 1000ms both,
      haloBreathe 5s ease-in-out 1600ms infinite;
  }

  /* Particles \u2014 hidden until all nodes activate, then fade in as data starts flowing.
     The SMIL animateMotion inside each particle runs continuously from page load
     but is invisible while opacity is 0 on the parent .particles group. */
  @keyframes particlesFadeIn { to { opacity: 1; } }
  .net-svg .particles {
    opacity: 0;
    animation: particlesFadeIn 500ms ease-out 3000ms both;
  }
  .net-svg .particle {
    fill: #60A5FA;
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.95));
  }

  /* Reduced-motion: skip all entrance delays, show final state immediately */
  @media (prefers-reduced-motion: reduce) {
    .net-svg .center-group,
    .net-svg .conn,
    .net-svg .node,
    .net-svg .node-halo,
    .net-svg .ring,
    .net-svg .halo,
    .net-svg .particles {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      stroke-dashoffset: 0 !important;
    }
  }

  /* Background grid dots */
  .net-svg .bg-dot { fill: var(--blue-light); opacity: 0.15; }

  /* Reduced-motion: collapse entire entrance to a 400ms fade of the FINAL state.
     Giant intro monitor is hidden entirely (skip the "descent" animation). */
  @media (prefers-reduced-motion: reduce) {
    .hero-intro-monitor { display: none !important; }
    .net-svg * { animation: none !important; }
    .net-svg .center-group,
    .net-svg .node,
    .net-svg .conn,
    .net-svg .particles,
    .net-svg .ring,
    .net-svg .halo {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* ==== CREDIBILITY MARQUEE ==== */
  .marquee-wrap {
    padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--bg-deep);
    overflow: hidden;
    position: relative;
  }
  .marquee-wrap::before, .marquee-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
  }
  .marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
  .marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--bg-deep), transparent); }
  .marquee {
    display: flex; gap: 36px; white-space: nowrap; align-items: center;
    animation: scroll-x 58s linear infinite;
    width: max-content;
  }
  .marquee:hover { animation-play-state: paused; }
  .marquee-item {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
    font-size: 13px; color: var(--ink-soft); font-weight: 500;
    height: 56px;
    flex-shrink: 0;
  }
  .marquee-item strong {
    font-family: "Poppins"; font-weight: 700; color: #fff;
  }
  .marquee-item .dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
  .marquee-badge {
    height: 40px; width: auto; object-fit: contain; display: block;
  }
  .marquee-badge.circle {
    height: 44px; width: 44px; border-radius: 50%;
    object-fit: contain;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 3px;
  }
  .marquee-badge.sck { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; padding: 0; background: var(--surface-2); border: 1px solid var(--line); }
  @keyframes scroll-x {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ==== SERVICES ==== */
  /* Tighter top padding so that when user clicks "See What We Build"
     (scrolls to marquee), the core service boxes fit in one viewport below */
  #services { padding-top: 72px; }
  @media (max-width: 900px) { #services { padding-top: 60px; } }

  .services-tier-label {
    display: flex; align-items: center; gap: 16px; margin: 0 0 32px;
    font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .services-tier-label::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
  }
  .services-tier-label .badge {
    padding: 4px 10px; background: var(--blue-50); color: var(--blue-light);
    border: 1px solid rgba(21,94,239,0.3); border-radius: 999px; font-size: 10px;
  }

  .services-tier-1 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-bottom: 80px;
  }
  @media (max-width: 880px) { .services-tier-1 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .services-tier-1 { grid-template-columns: 1fr; } }
  .svc-tile {
    position: relative; padding: 28px 24px 26px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform 420ms var(--ease-out-expo), border-color 260ms var(--ease), box-shadow 360ms var(--ease);
    overflow: hidden;
    /* a.svc-tile reset — element was article, now clickable link.
       Flex column so the .svc-link anchors to the bottom regardless of
       description length — keeps all 4 cards' Explore links aligned. */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .svc-tile:hover { text-decoration: none; }
  .svc-tile::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 30% 0%, rgba(21,94,239,0.12) 0%, transparent 55%);
    opacity: 0; transition: opacity 320ms var(--ease);
  }
  .svc-tile::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,131,245,0.5), transparent);
    transform: scaleX(0); transform-origin: center;
    transition: transform 500ms var(--ease-out-expo);
  }
  .svc-tile:hover {
    border-color: rgba(21,94,239,0.45); transform: translateY(-6px);
    box-shadow: 0 28px 56px -14px rgba(0,0,0,0.55), 0 0 0 1px rgba(21,94,239,0.25);
  }
  .svc-tile:hover::before { opacity: 1; }
  .svc-tile:hover::after { transform: scaleX(1); }
  .svc-tile > * { position: relative; z-index: 1; }
  .svc-icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    position: relative;
    transition: border-color 260ms var(--ease), transform 420ms var(--ease-out-expo), background 260ms var(--ease);
  }
  .svc-tile:hover .svc-icon {
    border-color: rgba(21,94,239,0.4);
    background: radial-gradient(circle at center, rgba(21,94,239,0.14) 0%, var(--surface-2) 70%);
    transform: scale(1.04);
  }
  .svc-icon svg { display: block; }
  .svc-tile h3 {
    color: #fff; margin-bottom: 6px; font-size: 18px;
    transition: color 200ms var(--ease);
  }
  .svc-tile:hover h3 { color: var(--blue-light); }
  .svc-tile p { color: var(--muted); font-size: 14px; margin: 0; }
  .svc-link {
    margin-top: auto; padding-top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    font-size: 13px; font-weight: 600; color: var(--blue-light);
    font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em;
    transition: gap 240ms var(--ease);
  }
  .svc-tile:hover .svc-link { gap: 10px; }
  .svc-link .arr { font-size: 14px; transition: transform 240ms var(--ease); }
  .svc-tile:hover .svc-link .arr { transform: translateX(2px); }

  /* Labs Tier */
  .services-tier-2 {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  }
  @media (max-width: 780px) { .services-tier-2 { grid-template-columns: 1fr; } }
  .labs-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform 500ms var(--ease-out-expo), border-color 280ms var(--ease), box-shadow 400ms var(--ease);
    /* a.labs-card needs reset since the element was an article before */
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .labs-card:hover { text-decoration: none; }
  .labs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--blue-light);
    margin-top: 4px;
    opacity: 0.7;
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  }
  .labs-card:hover .labs-card-link {
    opacity: 1;
    transform: translateX(4px);
  }
  .labs-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(21,94,239,0.22) 0%, transparent 40%);
    opacity: 0; transition: opacity 400ms var(--ease);
  }
  .labs-card:hover {
    transform: translateY(-6px);
    border-color: rgba(21,94,239,0.55);
    box-shadow: 0 40px 80px -16px rgba(0,0,0,0.55), 0 0 0 1px rgba(21,94,239,0.3);
  }
  .labs-card:hover::after { opacity: 1; }
  .labs-card > * { position: relative; z-index: 1; }
  .labs-card .art {
    aspect-ratio: 3/2; background: var(--bg-deep) center/cover no-repeat;
    border-bottom: 1px solid var(--line);
    position: relative; overflow: hidden;
    transition: transform 700ms var(--ease-out-expo);
  }
  .labs-card .art::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,0.1) 0%, rgba(11,18,32,0.6) 100%);
    transition: opacity 400ms var(--ease);
  }
  .labs-card:hover .art { transform: scale(1.04); }
  .labs-card:hover .art::after { opacity: 0.3; }
  .labs-card .body { padding: 28px 28px 30px; }
  .labs-card .tag-labs {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.14em; color: var(--blue-light);
    padding: 4px 10px; border-radius: 999px;
    background: var(--blue-50); border: 1px solid rgba(21,94,239,0.3);
    display: inline-block; margin-bottom: 14px;
  }
  .labs-card h3 { color: #fff; margin-bottom: 10px; }
  .labs-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.55; }
  .labs-card ul { padding: 0; margin: 0 0 18px; list-style: none; }
  .labs-card li {
    font-size: 13.5px; color: var(--muted); padding: 4px 0 4px 18px; position: relative;
  }
  .labs-card li::before {
    content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1.5px;
    background: var(--blue-light);
  }

  /* ==== WORK / CASE STUDIES ==== */
  .work-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  }
  @media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; } }
  .work-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    transition: all 260ms var(--ease);
  }
  .work-card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -12px rgba(0,0,0,0.5); }
  .work-card .art {
    aspect-ratio: 16/9; background-size: cover; background-position: center;
    position: relative;
  }
  .work-card .art::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11,18,32,0.95) 100%);
  }
  .work-card .tag {
    position: absolute; top: 18px; left: 18px; z-index: 1;
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.14em; color: #fff; padding: 5px 12px; border-radius: 999px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    text-transform: uppercase;
  }
  .work-card .body { padding: 28px 28px 30px; }
  .work-card h3 { font-size: 22px; color: #fff; margin-bottom: 4px; letter-spacing: -0.02em; }
  .work-card .industry { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }
  .work-card .metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px;
  }
  .work-card .metric {
    padding: 14px 12px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); text-align: left;
  }
  .work-card .metric .big {
    font-family: "Poppins"; font-weight: 700; font-size: 24px; color: var(--blue-light);
    line-height: 1; letter-spacing: -0.02em;
    display: block;
  }
  .work-card .metric .lbl {
    font-family: "JetBrains Mono", monospace; font-size: 9.5px;
    letter-spacing: 0.1em; color: var(--muted); margin-top: 6px; text-transform: uppercase;
    display: block;
  }
  .work-card .summary { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.55; }
  .work-card .readlink {
    font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--blue-light);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  }

  /* ==== PROCESS ==== */
  .process-wrap { position: relative; padding: 40px 0 0; }
  .process-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative;
  }
  @media (max-width: 880px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
  @media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }
  .process-step {
    padding: 28px 22px 26px; border-radius: var(--radius); position: relative;
    text-align: left;
    border: 1px solid transparent;
    transition: border-color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
  }
  .process-step:hover {
    border-color: rgba(74,131,245,0.25);
    background: rgba(74,131,245,0.03);
    transform: translateY(-2px);
  }
  .process-step .step-n {
    font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--blue-light);
    letter-spacing: 0.14em; margin-bottom: 14px;
    transition: color 180ms var(--ease);
  }
  .process-step .step-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--blue); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line);
    margin-bottom: 20px; position: relative; z-index: 2;
    transition: box-shadow 240ms var(--ease), background 240ms var(--ease);
  }
  .process-step:hover .step-dot {
    background: var(--blue-light);
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--blue-light), 0 0 18px 3px rgba(74,131,245,0.5);
  }
  .process-step h3 { font-size: 17px; margin-bottom: 10px; letter-spacing: -0.015em; }
  .process-step p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
  .process-step .step-deliverable {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--faint);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding-top: 14px; border-top: 1px dashed var(--line);
    display: block;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .process-step:hover .step-deliverable {
    color: var(--blue-light); border-color: rgba(74,131,245,0.4);
  }

  .process-schematic {
    position: absolute; top: 92px; left: 0; right: 0; height: 2px; z-index: 1;
    overflow: hidden;
  }
  .process-schematic svg {
    width: 100%; height: 2px; display: block;
  }
  .process-line {
    fill: none; stroke: var(--blue); stroke-width: 2;
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1500ms var(--ease-out-expo);
  }
  .process-wrap.in-view .process-line { stroke-dashoffset: 0; }
  @media (max-width: 880px) { .process-schematic { display: none; } }

  /* ==== INDUSTRIES ==== */
  .industries-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  }
  @media (max-width: 880px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .industries-grid { grid-template-columns: 1fr; } }
  .ind-tile {
    position: relative;
    padding: 28px 24px 56px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); transition: all 220ms var(--ease);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .ind-tile::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%);
    transform: scaleX(0); transform-origin: left;
    transition: transform 360ms var(--ease);
  }
  .ind-tile:hover { border-color: rgba(74,131,245,0.5); transform: translateY(-3px); }
  .ind-tile:hover::before { transform: scaleX(1); }
  .ind-tile .ind-num {
    font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--blue-light);
    letter-spacing: 0.1em; margin-bottom: 14px;
    transition: letter-spacing 220ms var(--ease);
  }
  .ind-tile:hover .ind-num { letter-spacing: 0.18em; }
  .ind-tile h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.015em; }
  .ind-tile p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }
  .ind-tile .ind-arrow {
    position: absolute; bottom: 20px; right: 22px;
    font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--blue-light);
    opacity: 0; transform: translateX(-6px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
    letter-spacing: 0.04em;
  }
  .ind-tile:hover .ind-arrow { opacity: 1; transform: translateX(0); }

  /* ==== COVERAGE MAP ==== */
  .coverage-wrap {
    display: grid; grid-template-columns: 0.95fr 1.1fr; gap: 48px; align-items: start;
    position: relative;
  }
  @media (max-width: 900px) {
    .coverage-wrap { grid-template-columns: 1fr; gap: 40px; align-items: start; }
    .map-container { aspect-ratio: 4/5; }
  }
  .coverage-list-wrap {
    position: relative;
    align-self: stretch;
  }
  .coverage-list {
    will-change: transform;
    transition: transform 60ms linear;
  }
  @media (max-width: 900px) {
    .coverage-list { transform: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .coverage-list { transform: none !important; transition: none; }
  }
  .map-container {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(135deg, #111827 0%, #0B1220 100%);
    border: 1px solid var(--line);
    padding: 0;
    min-height: 100%;
    display: flex; align-items: stretch; justify-content: stretch;
  }
  .map-svg {
    width: 100%; height: 100%; display: block;
    min-height: 520px;
  }
  .map-marker {
    fill: var(--blue); stroke: #fff; stroke-width: 1; cursor: pointer;
  }
  .map-marker.featured { fill: var(--blue-light); r: 6; }
  .pulse-ring {
    fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0;
    animation: pulse-map 2.8s infinite;
  }
  .pulse-ring.delayed { animation-delay: 1.4s; }
  .pulse-ring.delayed-2 { animation-delay: 0.7s; }
  .pulse-ring.delayed-3 { animation-delay: 2.1s; }
  @keyframes pulse-map {
    0% { r: 3; opacity: 0.7; }
    100% { r: 30; opacity: 0; }
  }
  .coverage-list { }
  .coverage-county {
    padding: 20px 0; border-bottom: 1px solid var(--line);
  }
  .coverage-county:last-child { border-bottom: none; }
  .coverage-county h4 {
    font-family: "Poppins"; font-weight: 700; font-size: 17px; color: #fff;
    letter-spacing: -0.015em; margin: 0 0 8px;
  }
  .coverage-county .cities {
    font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--muted);
    letter-spacing: 0.02em;
  }
  .coverage-county .cities .primary { color: var(--blue-light); }

  /* ==== TEAM / ABOUT ==== */
  /* align-items: center so the right-column team-cards visually center
     against the (now longer) about-copy on the left — avoids dead-space
     gap below the cards when the copy column outgrows the team column. */
  .about-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  }
  @media (max-width: 900px) { .about-wrap { grid-template-columns: 1fr; gap: 40px; } }
  .about-copy .eyebrow { margin-bottom: 20px; }
  .about-copy h2 { margin: 0 0 28px; }
  .about-copy p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; }
  .about-copy p strong { color: #fff; font-weight: 600; }
  .about-copy .attrib {
    margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);
    letter-spacing: 0.04em;
  }
  .team-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-content: start; }

  /* Platform Partnerships band — below about-wrap, full width of About section.
     Houses the Google Partner + Meta Business Partner badges at their real size,
     now that they're out of the scrolling marquee where they were shrunk. */
  .partnerships-band {
    margin-top: 64px;
    padding: 36px 40px;
    background:
      radial-gradient(ellipse 600px 240px at 50% 0%, rgba(21,94,239,0.10) 0%, rgba(21,94,239,0) 70%),
      rgba(17,24,39,0.55);
    border: 1px solid rgba(74,131,245,0.22);
    border-radius: var(--radius-lg);
    display: grid; grid-template-columns: auto 1fr; gap: 40px;
    align-items: center;
    position: relative; overflow: hidden;
  }
  .partnerships-band::before {
    content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74,131,245,0.5) 50%, transparent 100%);
    pointer-events: none;
  }
  @media (max-width: 820px) {
    .partnerships-band { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; text-align: center; }
  }
  .partnerships-band .copy .eyebrow {
    margin-bottom: 10px;
  }
  .partnerships-band .copy h4 {
    font-family: "Poppins"; font-weight: 700; font-size: 20px;
    color: #fff; margin: 0 0 6px; letter-spacing: -0.015em;
  }
  .partnerships-band .copy p {
    font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55;
    max-width: 340px;
  }
  @media (max-width: 820px) {
    .partnerships-band .copy p { margin-left: auto; margin-right: auto; }
  }
  .partnerships-band .badges {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 48px; flex-wrap: wrap;
  }
  @media (max-width: 820px) {
    .partnerships-band .badges { justify-content: center; }
  }
  .partnerships-band .badges img {
    height: 92px; width: auto; max-width: 100%; display: block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
    transition: transform 240ms var(--ease);
  }
  .partnerships-band .badges a { display: inline-block; }
  .partnerships-band .badges a:hover img { transform: translateY(-2px) scale(1.02); }
  .partnerships-band .badge-cap {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
    text-align: center; margin-top: 10px;
  }
  .team-card {
    padding: 24px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); display: flex; gap: 20px; align-items: flex-start;
  }
  .team-card img {
    width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--blue-50); flex-shrink: 0;
  }
  .team-card .role {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    letter-spacing: 0.1em; color: var(--blue-light); text-transform: uppercase;
    margin-bottom: 4px;
  }
  .team-card h3 {
    font-size: 20px; margin: 0 0 6px;
  }
  .team-card .position { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
  .team-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.55; }
  .team-card .socials {
    display: flex; gap: 14px;
    font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted);
    letter-spacing: 0.04em;
  }
  .team-card .socials a { color: var(--blue-light); }

  /* ==== INSIGHTS / GUIDES ==== */
  .blog-grid {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px;
  }
  @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
  .insight-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); transition: all 240ms var(--ease);
    display: flex; flex-direction: column; overflow: hidden;
    text-decoration: none;
    min-height: 460px;
  }
  .insight-card:hover { border-color: var(--blue-light); transform: translateY(-3px); }
  .insight-card.featured {
    background: linear-gradient(160deg, rgba(21,94,239,0.14) 0%, var(--surface) 60%);
    border-color: rgba(21,94,239,0.45);
  }
  .insight-thumb {
    position: relative; aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0f1a2e 0%, #0B1220 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    display: flex; align-items: stretch; justify-content: stretch;
  }
  .insight-card.featured .insight-thumb { aspect-ratio: 16/10; }
  .insight-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 420ms var(--ease);
  }
  .insight-card:hover .insight-thumb img { transform: scale(1.04); }
  /* Soft darken overlay — keeps the image moody so card UI stays legible on top */
  .insight-thumb::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.15) 60%, rgba(11,18,32,0.55) 100%);
  }
  .insight-body {
    padding: 24px 26px 26px; display: flex; flex-direction: column;
    flex: 1 1 auto;
  }
  .insight-card .cat {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--blue-light);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
  }
  .insight-card h3 {
    font-size: 19px; margin: 0 0 14px; letter-spacing: -0.015em; color: #fff;
    text-wrap: balance;
  }
  .insight-card.featured h3 { font-size: 24px; }
  .insight-card .excerpt {
    font-size: 14px; color: var(--ink-soft); line-height: 1.6;
    margin: 0 0 20px; text-wrap: pretty;
  }
  .insight-card.featured .excerpt { font-size: 15px; }
  .insight-card .meta-row {
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    flex-wrap: wrap;
  }
  .insight-card .by {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted);
    letter-spacing: 0.02em;
  }
  .insight-card .by .name { color: #fff; font-weight: 600; }
  .insight-card .read-more {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    color: var(--blue-light); letter-spacing: 0.04em; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 180ms var(--ease);
  }
  .insight-card:hover .read-more { gap: 10px; }
  .insight-card .read-more .arr { transition: transform 180ms var(--ease); }
  .insight-card:hover .read-more .arr { transform: translateX(3px); }
  .guides-cta-row {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 56px; flex-wrap: wrap;
  }
  .guides-cta-row .meta {
    font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* ==== FAQ SECTION (R17 2026-04-21, re-backgrounded R18 after swap) ==== */
  /* FAQ sits between #about (bg-deep = #070A13) and #blog (starts at var(--bg)
     = #0B1220). Bridge gradient provides a smooth tonal transition across the
     boundary. No finale-matching glows needed now \u2014 #blog handles that since it
     swapped back to being the last section before the finale. */
  #faq {
    position: relative;
    background: linear-gradient(180deg, var(--bg-deep) 0%, #08101c 35%, var(--bg) 100%);
  }
  #faq .section-intro {
    margin-bottom: 48px;
    /* Match the accordion list's 880px centered width so the eyebrow/H2/lede
       left-align with the FAQ items' left border (R18.1 2026-04-21). */
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }

  .faq-list {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid rgba(74, 131, 245, 0.18);
  }

  .faq-item {
    border-bottom: 1px solid rgba(74, 131, 245, 0.18);
    transition: background 240ms var(--ease);
  }
  .faq-item:hover { background: rgba(74, 131, 245, 0.03); }
  .faq-item[open]  { background: rgba(74, 131, 245, 0.04); }

  .faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 24px 28px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 180ms var(--ease);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ""; }

  .faq-q {
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.4;
    flex: 1;
    text-wrap: balance;
  }
  .faq-item:hover .faq-q,
  .faq-item[open] .faq-q { color: var(--blue-light); }

  .faq-chev {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(74, 131, 245, 0.08);
    color: var(--blue-light);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background 180ms var(--ease);
  }
  .faq-item[open] .faq-chev {
    transform: rotate(180deg);
    background: rgba(74, 131, 245, 0.18);
  }
  .faq-item:hover .faq-chev { background: rgba(74, 131, 245, 0.14); }

  .faq-a {
    padding: 0 28px 28px 28px;
    max-width: 720px;
  }
  .faq-a p {
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
    text-wrap: pretty;
  }

  /* When the details element opens, smoothly fade + slide the answer in */
  .faq-item[open] .faq-a {
    animation: faqAnswerReveal 280ms ease-out;
  }
  @keyframes faqAnswerReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Bottom CTA row below the list — styled box so it has presence in the
     section instead of reading as naked text floating in the void between
     the FAQ accordion and the next section (Guides/Blog). */
  .faq-cta {
    max-width: 880px;
    margin: 40px auto 0;
    padding: 22px 32px;
    display: flex; align-items: center; justify-content: center; gap: 20px;
    flex-wrap: wrap;
    background: rgba(74, 131, 245, 0.05);
    border: 1px solid rgba(74, 131, 245, 0.18);
    border-radius: 14px;
  }
  .faq-cta-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Narrow viewports: tighten padding + wrap layout */
  @media (max-width: 640px) {
    .faq-item summary { padding: 20px 20px; gap: 16px; }
    .faq-q { font-size: 15.5px; }
    .faq-a { padding: 0 20px 22px 20px; }
    .faq-cta { padding: 18px 20px; text-align: center; }
  }

  /* ==== BLOG/GUIDES SECTION: blend into finale background ==== */
  /* #blog bottom gradient mirrors the TOP of .finale — same colors, same radial
     ellipse dimensions, just anchored at "50% 100%" instead of "50% 0%". Effect: the
     two gradients meet at the boundary and the glow is continuous across both sections. */
  #blog {
    position: relative;
    background:
      /* PRIMARY blue atmospheric glow — mirrors finale's top radial exactly */
      radial-gradient(ellipse 1400px 900px at 50% 100%, rgba(21,94,239,0.18) 0%, rgba(21,94,239,0) 60%),
      radial-gradient(ellipse 900px 600px at 80% 100%, rgba(21,94,239,0.12) 0%, rgba(21,94,239,0) 65%),
      radial-gradient(ellipse 900px 500px at 20% 100%, rgba(74,131,245,0.08) 0%, rgba(74,131,245,0) 70%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg) 45%, #0d1a30 80%, #101e36 100%);
  }
  #blog::after {
    /* Carry a few constellation dots into the last ~180px of the section for continuity */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 12% 45%, rgba(74,131,245,0.55) 1px, transparent 2px),
      radial-gradient(circle at 34% 75%, rgba(74,131,245,0.45) 1px, transparent 2px),
      radial-gradient(circle at 62% 30%, rgba(74,131,245,0.5) 1px, transparent 2px),
      radial-gradient(circle at 88% 70%, rgba(74,131,245,0.55) 1px, transparent 2px);
    background-size: 180px 220px, 260px 220px, 200px 220px, 240px 220px;
    mask-image: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 60%, black 100%);
    opacity: 0.7;
  }

  /* ==== FINALE: CTA + FOOTER merged with shared artistic background ==== */
  .finale {
    position: relative;
    /* Top gradient stack MUST mirror #blog's bottom gradient stack exactly — same
       3 radials at the same offsets (50%, 80%, 20%) — so the shared boundary has
       matching luminosity on both sides. Previously the boundary showed a visible step
       because #blog had 3 stacked blue glows at y=100% while .finale top only had 1,
       making #blog bottom read ~0.29 opacity of blue vs .finale top ~0.18. */
    background:
      radial-gradient(ellipse 1400px 900px at 50% 0%, rgba(21,94,239,0.18) 0%, rgba(21,94,239,0) 60%),
      radial-gradient(ellipse 900px 600px  at 80% 0%, rgba(21,94,239,0.12) 0%, rgba(21,94,239,0) 65%),
      radial-gradient(ellipse 900px 500px  at 20% 0%, rgba(74,131,245,0.08) 0%, rgba(74,131,245,0) 70%),
      radial-gradient(ellipse 1200px 700px at 50% 100%, rgba(21,94,239,0.12) 0%, rgba(21,94,239,0) 65%),
      linear-gradient(180deg, #101e36 0%, #0d1a30 30%, #0a1627 65%, #0c1a30 100%);
    overflow: hidden;
    isolation: isolate;
  }
  .finale-bg {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .finale-bg svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
  }
  .finale-bg .glow-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55;
    pointer-events: none;
  }
  /* CTA-area orbs */
  .finale-bg .orb-a { width: 620px; height: 620px; left: -120px; top: 3%;  background: radial-gradient(circle, rgba(21,94,239,0.55) 0%, rgba(21,94,239,0) 70%); }
  .finale-bg .orb-b { width: 560px; height: 560px; right: -80px; top: 22%; background: radial-gradient(circle, rgba(74,131,245,0.42) 0%, rgba(74,131,245,0) 70%); }
  /* Mid-finale orbs — straddle the CTA/footer transition */
  .finale-bg .orb-c { width: 780px; height: 780px; left: 22%;  top: 44%;  background: radial-gradient(circle, rgba(21,94,239,0.30) 0%, rgba(21,94,239,0) 70%); opacity: 0.7; }
  /* Footer-area orbs — ensure the artistic background is VISIBLE through the footer */
  .finale-bg .orb-d { width: 560px; height: 560px; left: -100px; top: 66%; background: radial-gradient(circle, rgba(74,131,245,0.38) 0%, rgba(74,131,245,0) 70%); opacity: 0.65; }
  .finale-bg .orb-e { width: 680px; height: 680px; right: -140px; top: 72%; background: radial-gradient(circle, rgba(21,94,239,0.34) 0%, rgba(21,94,239,0) 70%); opacity: 0.7; }
  .finale-bg .orb-f { width: 520px; height: 520px; left: 38%;  bottom: -140px; background: radial-gradient(circle, rgba(74,131,245,0.28) 0%, rgba(74,131,245,0) 70%); opacity: 0.6; }
  .finale-bg .grain {
    position: absolute; inset: 0; opacity: 0.04;
    background-image:
      radial-gradient(circle at 25% 15%, #fff 0.5px, transparent 1px),
      radial-gradient(circle at 75% 35%, #fff 0.5px, transparent 1px),
      radial-gradient(circle at 40% 65%, #fff 0.5px, transparent 1px),
      radial-gradient(circle at 85% 80%, #fff 0.5px, transparent 1px),
      radial-gradient(circle at 15% 85%, #fff 0.5px, transparent 1px),
      radial-gradient(circle at 60% 92%, #fff 0.5px, transparent 1px);
    background-size: 140px 140px, 200px 200px, 180px 180px, 220px 220px, 190px 190px, 240px 240px;
    mix-blend-mode: screen;
  }

  /* ==== CLOSING CTA — homepage variant (with inline strategy-call form) ==== */
  .cta-close {
    background: transparent; position: relative; overflow: visible;
    padding: 120px 0 100px;
    z-index: 1;
  }

  /* ==== CLOSING CTA — simple centered variant (all non-homepage pages) ==== */
  .cta-close--simple { padding: 112px 0 96px; }
  .cta-close-simple-inner {
    max-width: 780px; margin: 0 auto; text-align: center;
    position: relative;
  }
  .cta-close-simple-inner .eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 18px; display: inline-block;
  }
  .cta-close-simple-inner h2 {
    font-family: 'Poppins', sans-serif; font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08;
    letter-spacing: -0.025em; text-wrap: balance;
    margin: 0 0 24px; color: #fff;
  }
  .cta-close-lede {
    font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.55;
    color: var(--ink-soft); text-wrap: pretty;
    max-width: 58ch; margin: 0 auto 40px;
  }
  .cta-close-buttons {
    display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .cta-close-buttons .btn-lg { min-width: 220px; justify-content: center; }
  .cta-call-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(74, 131, 245, 0.08);
    border-color: rgba(74, 131, 245, 0.5);
    color: var(--blue-light);
  }
  .cta-call-btn:hover {
    background: rgba(74, 131, 245, 0.18);
    border-color: var(--ultra-blue);
    color: #fff;
  }
  .cta-call-btn .tl-phone-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(74, 131, 245, 0.14);
    transition: background 0.25s ease;
  }
  .cta-call-btn:hover .tl-phone-icon { background: var(--ultra-blue); color: #fff; }
  .cta-close-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--faint); letter-spacing: 0.04em;
    margin: 16px 0 0;
  }
  @media (max-width: 540px) {
    .cta-close-buttons { flex-direction: column; align-items: stretch; }
    .cta-close-buttons .btn-lg { width: 100%; }
  }
  .cta-close .inner {
    position: relative;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px;
    align-items: center;
    max-width: 1120px; margin: 0 auto;
  }
  @media (max-width: 960px) {
    .cta-close .inner { grid-template-columns: 1fr; gap: 48px; }
    .cta-close .inner .left-col { text-align: center; }
  }
  .cta-close .left-col .eyebrow { margin-bottom: 22px; }
  .cta-close h2 {
    font-size: clamp(32px, 3.9vw, 46px); letter-spacing: -0.03em;
    margin: 0 0 22px;
    font-weight: 800; line-height: 1.08;
    text-wrap: balance;
  }
  .cta-close .lede-copy {
    font-size: clamp(15.5px, 1.15vw, 17.5px); color: var(--ink-soft);
    line-height: 1.6; margin: 0 0 28px; max-width: 480px;
    text-wrap: pretty;
  }
  @media (max-width: 960px) { .cta-close .lede-copy { margin-left: auto; margin-right: auto; } }

  .cta-reviews {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(17,24,39,0.55);
    border: 1px solid rgba(74,131,245,0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 24px;
  }
  .cta-reviews img {
    display: block; height: 40px; width: auto; max-width: 100%;
  }
  /* .cta-alt-contact deprecated — replaced by .talk-live-cta partial.
     Styles for the new block live in the dedicated TALK-LIVE section below. */

  /* Form card — premium dark surface on the finale background */
  .strategy-form {
    position: relative;
    background: rgba(17,24,39,0.76);
    border: 1px solid rgba(74,131,245,0.28);
    border-radius: 20px;
    padding: 32px 32px 28px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
      0 30px 80px -30px rgba(0,0,0,0.6),
      0 0 0 1px rgba(74,131,245,0.05) inset;
  }
  .strategy-form::before {
    content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(74,131,245,0.6) 50%, transparent 100%);
    pointer-events: none;
  }
  .strategy-form h2 {
    font-size: 18px; letter-spacing: -0.015em; margin: 0 0 4px; color: #fff;
  }
  .strategy-form .form-sub {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    color: var(--blue-light); letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0 0 20px;
  }

  .form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px;
  }
  .form-grid .full { grid-column: 1 / -1; }
  @media (max-width: 520px) {
    .form-grid { grid-template-columns: 1fr; }
  }

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-family: "JetBrains Mono", monospace; font-size: 10.5px;
    color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 500;
  }
  .field label .req { color: var(--blue-light); margin-left: 3px; }
  .field label .opt { color: var(--faint); margin-left: 6px; text-transform: none; letter-spacing: 0.04em; }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    background: rgba(7,10,19,0.8);
    border: 1px solid rgba(74,131,245,0.18);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink);
    font-family: "Manrope", sans-serif; font-size: 14.5px;
    line-height: 1.4;
    transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
    outline: none;
  }
  .field textarea { resize: vertical; min-height: 92px; font-family: "Manrope", sans-serif; }
  .field input::placeholder,
  .field textarea::placeholder { color: var(--faint); }
  .field select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%234A83F5' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--blue-light);
    background: rgba(7,10,19,0.9);
    box-shadow: 0 0 0 3px rgba(74,131,245,0.18);
  }
  /* Honeypot — hide from real users, catch bots */
  .hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
  }

  .form-submit-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    margin-top: 22px;
  }
  .form-submit-row .privacy {
    width: 100%;
    margin: 0;
    font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--faint);
    letter-spacing: 0.03em; line-height: 1.5;
    text-align: center;
  }
  .form-submit-row .privacy a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
  .form-submit-row .btn,
  .form-submit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
  }
  .form-submit-btn .btn-label { line-height: 1; }
  .form-submit-btn .arr { display: inline-block; transition: transform 0.25s ease; }
  .form-submit-btn:hover .arr { transform: translateX(4px); }

  /* Success state — replaces the form on submit */
  .form-success {
    display: none; text-align: center; padding: 12px 0 8px;
  }
  .strategy-form.is-submitted .form-grid,
  .strategy-form.is-submitted .form-submit-row,
  .strategy-form.is-submitted .form-sub,
  .strategy-form.is-submitted h3 { display: none; }
  .strategy-form.is-submitted .form-success { display: block; }
  .form-success .checkmark {
    width: 56px; height: 56px; margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(21,94,239,0.18);
    border: 2px solid var(--blue-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-light); font-size: 28px; font-weight: 700;
    box-shadow: 0 0 0 6px rgba(74,131,245,0.1);
  }
  .form-success h4 {
    font-size: 22px; margin: 0 0 10px; color: #fff; letter-spacing: -0.015em;
  }
  .form-success p {
    font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.55;
  }
  .form-success .meta {
    font-family: "JetBrains Mono", monospace; font-size: 11.5px;
    color: var(--muted); letter-spacing: 0.04em;
  }

  /* Footer — transparent on finale background, no hard border line */
  footer {
    background: transparent; border-top: none;
    padding: 80px 0 40px;
    position: relative; z-index: 1;
  }
  /* Subtle divider between CTA + footer — gradient fade, not a hard line */
  .finale-divider {
    position: relative; z-index: 1;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(74,131,245,0.22) 25%,
      rgba(74,131,245,0.35) 50%,
      rgba(74,131,245,0.22) 75%,
      transparent 100%);
    margin: 0 auto;
    max-width: 1100px;
  }
  .footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 48px;
  }
  @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; } }
  @media (max-width: 680px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
  .footer-brand-col { grid-column: span 1; }
  @media (max-width: 1100px) { .footer-brand-col { grid-column: 1 / -1; } }
  .footer-brand-col .footer-brand {
    display: flex; align-items: center; gap: 12px;
    font-family: "Poppins"; font-weight: 700; font-size: 24px;
    letter-spacing: -0.025em; color: #fff; line-height: 1;
    margin-bottom: 22px;
  }
  .footer-brand-col .footer-brand img { height: 38px; width: auto; display: block; }
  .footer-brand-col .footer-brand .wordmark { display: flex; align-items: baseline; gap: 7px; }
  .footer-brand-col .footer-brand .wordmark .accent { color: var(--blue-light); font-weight: 500; }
  .footer-brand-col p { font-size: 14px; color: var(--muted); max-width: 380px; line-height: 1.6; text-wrap: pretty; }
  .footer-nap {
    margin-top: 20px; font-family: "JetBrains Mono", monospace; font-size: 12.5px;
    color: var(--muted); letter-spacing: 0.02em; line-height: 1.8;
  }
  .footer-nap strong { color: var(--ink); }
  .footer-col h3 {
    font-family: "Poppins"; font-size: 14px; font-weight: 600; color: #fff;
    margin: 0 0 18px; letter-spacing: -0.01em;
  }
  .footer-col ul { padding: 0; margin: 0; list-style: none; }
  .footer-col li { margin: 0 0 10px; }
  .footer-col a {
    font-size: 13.5px; color: var(--muted);
    transition: color 160ms var(--ease);
  }
  .footer-col a:hover { color: var(--blue-light); }
  .footer-map {
    margin: 8px 0 40px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(74,131,245,0.25);
    background: rgba(17, 24, 39, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
  }
  .footer-map .map-frame {
    display: block; width: 100%; aspect-ratio: 16/5;
    background: var(--surface);
  }
  .footer-map iframe {
    display: block; width: 100%; height: 100%; border: 0;
  }
  .footer-map .map-label {
    position: absolute; top: 16px; right: 18px; z-index: 2;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(11, 18, 32, 0.82);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid var(--line);
    font-family: "JetBrains Mono", monospace; font-size: 11px;
    color: #fff; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
    pointer-events: none;
  }
  .footer-map .map-label .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue-light); margin-right: 8px;
    box-shadow: 0 0 0 3px rgba(74, 131, 245, 0.15);
    vertical-align: middle;
  }
  @media (max-width: 680px) {
    .footer-map .map-frame { aspect-ratio: 4/3; }
    .footer-map .map-label { top: 12px; right: 12px; font-size: 10px; padding: 6px 10px; }
  }

  .footer-bottom {
    padding: 28px 0 0; border-top: none; position: relative;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--faint); letter-spacing: 0.02em;
  }
  .footer-bottom::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(74,131,245,0.18) 20%,
      rgba(74,131,245,0.28) 50%,
      rgba(74,131,245,0.18) 80%,
      transparent 100%);
  }
  .footer-bottom a { color: var(--muted); text-decoration: none; }
  .footer-bottom a:hover { color: var(--blue-light); }
  .footer-bottom .legal-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .footer-bottom .legal-row .sep {
    color: var(--line); font-size: 10px;
  }
  .footer-bottom .legal-row .tax-link {
    color: var(--faint); font-size: 10px; opacity: 0.45;
    margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line);
    letter-spacing: 0.04em;
  }
  .footer-bottom .legal-row .tax-link:hover { color: var(--muted); opacity: 0.9; }

  /* ==== REVEAL ANIMATIONS ==== */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo); }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
    .marquee { animation: none; }
  }



/* ===========================================================================
   PAGE-SERVICE.PHP — shared service pillar styles (R2 — split hero + video feature)
   =========================================================================== */

.service-page .section-head {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 56px;
}
.service-page .section-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
.service-page .section-head .section-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  color: var(--blue-light);
  letter-spacing: 0.1em;
}
.service-page section {
  padding: 112px 0;
}

/* =====  HERO — split layout, form above fold (Tier-A)  ===== */
.hero--split {
  padding-top: 120px;
  padding-bottom: 88px;
  position: relative;
  background:
    radial-gradient(ellipse 1100px 700px at 75% 30%, rgba(74, 131, 245, 0.08) 0%, transparent 70%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.hero-copy {
  padding-top: 12px;
  max-width: 620px;
  min-width: 0;               /* allow flex/grid children to wrap rather than force overflow */
}
.hero-copy > * { max-width: 100%; }
.hero-h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 20px 0 22px;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.35;
}
.hero-proof li strong {
  color: var(--text);
  font-weight: 600;
}
.hp-stars {
  color: #FFC94D;
  letter-spacing: 1px;
  font-size: 0.9rem;
}
/* ===========================================================================
   TALK-LIVE CTA — prominent "Call us" button block
   Shared between hero (Tier-A pages) + homepage closing CTA.
   =========================================================================== */
.talk-live-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 22px;
  margin-top: 24px;
  border-top: 1px dashed var(--border);
  max-width: 100%;
}
.talk-live-cta--center {
  align-items: center;
  text-align: center;
}
.talk-live-cta .tl-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.talk-live-cta .tl-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.btn-talk-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(74, 131, 245, 0.08);
  border: 1.5px solid rgba(74, 131, 245, 0.5);
  color: var(--ultra-blue);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  position: relative;
}
.btn-talk-live:hover {
  background: rgba(74, 131, 245, 0.18);
  border-color: var(--ultra-blue);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -14px rgba(74, 131, 245, 0.6);
}
.btn-talk-live:active { transform: translateY(0); }
.btn-talk-live .tl-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(74, 131, 245, 0.14);
  color: var(--ultra-blue);
  transition: background 0.25s ease, color 0.25s ease;
}
.btn-talk-live:hover .tl-phone-icon {
  background: var(--ultra-blue);
  color: #ffffff;
}
.btn-talk-live .tl-label {
  line-height: 1;
  white-space: nowrap;
}

/* In the homepage closing-CTA dark panel, tint for visibility */
.cta-inner .talk-live-cta { border-top-color: rgba(255, 255, 255, 0.12); }

@media (max-width: 520px) {
  .btn-talk-live { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* Hero form column */
.hero-form-col {
  position: relative;
}
/* The strategy-form partial provides most styles; override for hero context */
.hero-form-col .strategy-form {
  background: linear-gradient(180deg, rgba(22, 32, 56, 0.72) 0%, rgba(12, 20, 38, 0.92) 100%);
  border: 1px solid rgba(74, 131, 245, 0.25);
  padding: 32px 32px 28px;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -20px rgba(4, 8, 20, 0.7),
    0 0 0 1px rgba(74, 131, 245, 0.08);
  backdrop-filter: blur(12px);
}
.hero-form-col .strategy-form h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  margin: 0 0 4px;
}
.hero-form-col .form-sub {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 20px;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 100%; }
}
@media (max-width: 640px) {
  .hero--split { padding-top: 96px; padding-bottom: 64px; }
  .hero-form-col .strategy-form { padding: 24px 20px 22px; }
}

/* =====  VIDEO FEATURE SECTION (standalone)  ===== */
.video-feature {
  background:
    radial-gradient(ellipse 900px 500px at 50% 40%, rgba(74, 131, 245, 0.1) 0%, transparent 70%),
    var(--bg-deep);
  border-block: 1px solid rgba(74, 131, 245, 0.08);
  padding: 120px 0 !important;
  position: relative;
  overflow: hidden;
}
.video-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74, 131, 245, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 131, 245, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 800px 400px at 50% 50%, black 0%, transparent 80%);
}
.video-feature-inner {
  position: relative;
  z-index: 2;
}
.video-feature-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.video-feature-head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.video-feature-head .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ultra-blue);
  letter-spacing: 0.15em;
  display: inline-block;
  margin-bottom: 16px;
}
.video-feature-h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 20px;
}
.video-feature-sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}

/* The video frame */
.video-feature-frame {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s,
              transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.video-feature-frame.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.vf-screen {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(74, 131, 245, 0.25),
    0 30px 100px -30px rgba(74, 131, 245, 0.4),
    0 20px 60px -20px rgba(4, 8, 20, 0.9);
}
.vf-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.vf-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse at center, rgba(74, 131, 245, 0.35) 0%, transparent 55%);
  filter: blur(30px);
  z-index: -1;
  animation: vfGlowPulse 6s ease-in-out infinite;
}
@keyframes vfGlowPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
/* Corner accents — engineering-blueprint aesthetic */
.vf-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ultra-blue);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
.vf-corner-tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.vf-corner-tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }
.vf-corner-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
.vf-corner-br { bottom: -10px; right: -10px; border-left: none; border-top: none; }
.video-feature-frame:hover .vf-corner { opacity: 1; }

@media (max-width: 900px) {
  .video-feature { padding: 80px 0 !important; }
  .video-feature-frame { margin: 0 -12px; }
  .vf-corner { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-feature-head, .video-feature-frame { opacity: 1; transform: none; transition: none; }
  .vf-glow { animation: none; }
}

/* =====  FEATURE GRID  ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.feature-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 28, 48, 0.4) 0%, rgba(10, 16, 28, 0.2) 100%);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.feature-card:hover {
  border-color: var(--ultra-blue);
  transform: translateY(-3px);
}
.feature-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 12px 0 10px;
  text-wrap: balance;
}
.feature-card p {
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}
.feature-icon svg {
  width: 32px;
  height: 32px;
  color: var(--ultra-blue);
}

/* =====  PROCESS STEPS  ===== */
.process-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  counter-reset: step-counter;
}
.process-step {
  padding: 32px 28px;
  background: rgba(15, 24, 40, 0.5);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: var(--ultra-blue);
}
.process-step .step-n {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--blue-light);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.process-step h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  margin: 12px 0 10px;
}
.process-step p { color: var(--muted); line-height: 1.55; margin: 0 0 16px; text-wrap: pretty; }
.step-output {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--blue-light);
  padding-top: 12px;
  border-top: 1px dashed rgba(74, 131, 245, 0.25);
}

/* =====  PRICING BAND  ===== */
.pricing-band {
  background: linear-gradient(180deg, var(--bg) 0%, #08101c 100%);
  border-block: 1px solid var(--border);
}
.pricing-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.pricing-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  margin: 12px 0;
}
.pricing-note {
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}

/* =====  CASE STUDY STRIP  ===== */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.case-study-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgba(15, 24, 40, 0.5);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.case-study-card:hover { transform: translateY(-4px); border-color: var(--ultra-blue); }
.case-study-card .cs-thumb {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.case-study-card .cs-body { padding: 24px; }
.case-study-card h3 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; margin: 8px 0; }
.case-study-card .cs-metric { color: var(--ultra-blue); font-weight: 600; margin-top: 12px; }
.case-study-card .cs-link { color: var(--muted); font-size: 0.95rem; margin-top: 16px; display: inline-block; }

/* FAQ inherits .faq from homepage */
.service-page .faq { background: linear-gradient(180deg, var(--bg-deep) 0%, #08101c 35%, var(--bg) 100%); }

/* =====  RELATED LINKS  ===== */
.related {
  padding: 56px 0 !important;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}
.related-h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--muted);
}
.related-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
}
.related-list a {
  color: var(--blue-light);
  text-decoration: none;
  font-weight: 500;
}
.related-list a:hover { text-decoration: underline; }

/* ===========================================================================
   R3 SERVICE PAGE MODULES — Trust bar, Problem cards, Approach, Comparison,
   Investment guide, Process-flow, Feature-card numbered variant
   Added 2026-04-22 per reference-page redesign.
   =========================================================================== */

/* ==============  02 · TRUST BAR  ============== */
.trust-bar {
  padding: 48px 0 !important;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.trust-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ultra-blue);
  text-transform: uppercase;
}
.trust-bar-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1100px;
}
.trust-bar-item {
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(74, 131, 245, 0.04);
  border: 1px solid rgba(74, 131, 245, 0.12);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.trust-bar-item:hover {
  background: rgba(74, 131, 245, 0.08);
  border-color: rgba(74, 131, 245, 0.25);
}
.trust-bar-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 4px;
}
.trust-bar-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ==============  03 · PROBLEM CARDS  ============== */
.problem-section {
  background:
    radial-gradient(ellipse 900px 500px at 20% 30%, rgba(255, 123, 123, 0.06) 0%, transparent 70%),
    var(--bg-deep);
}
.problem-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-red, #FF7B7B) !important;
}
.problem-section .section-intro {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.55;
  margin-bottom: 48px;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.problem-card {
  padding: 28px 24px 26px;
  background: linear-gradient(180deg, rgba(35, 22, 22, 0.5) 0%, rgba(20, 14, 14, 0.3) 100%);
  border: 1px solid rgba(255, 123, 123, 0.15);
  border-radius: 14px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
}
.problem-card:hover {
  border-color: rgba(255, 123, 123, 0.4);
  transform: translateY(-3px);
}
.problem-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255, 123, 123, 0.14);
  color: #FF7B7B;
  margin-bottom: 16px;
}
.problem-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--text);
  margin: 0 0 10px;
  text-wrap: balance;
  line-height: 1.3;
}
.problem-card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0 0 14px;
}
.problem-signal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: rgba(255, 123, 123, 0.9);
  font-style: italic;
  line-height: 1.5;
  padding: 10px 12px;
  border-left: 2px solid rgba(255, 123, 123, 0.4);
  background: rgba(255, 123, 123, 0.05);
  border-radius: 0 6px 6px 0;
}

/* ==============  04 · APPROACH / METHODOLOGY  ============== */
.approach-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  border-top: 1px solid var(--border);
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; gap: 40px; }
}
.approach-head {
  position: sticky;
  top: 120px;
}
.approach-head .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ultra-blue);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 16px;
}
.approach-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.approach-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.approach-copy {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.65;
}
.approach-copy p {
  margin: 0 0 18px;
  text-wrap: pretty;
}
.approach-copy p:last-child { margin-bottom: 0; }
.approach-copy strong { color: var(--blue-light); font-weight: 600; }
.approach-bullets {
  list-style: none;
  padding: 28px 0 0;
  margin: 0;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.5;
}
.bullet-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(74, 131, 245, 0.15);
  color: var(--ultra-blue);
  margin-top: 1px;
}

/* ==============  05 · FEATURE CARDS — numbered variant  ============== */
.feature-card {
  padding: 32px 28px;
  position: relative;
}
.feature-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: rgba(74, 131, 245, 0.6);
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(74, 131, 245, 0.2);
}

/* ==============  06 · PROCESS FLOW  ============== */
.process--flow .process-flow {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  counter-reset: step;
}
.process-step-flow {
  position: relative;
  padding: 32px 28px;
  background: rgba(15, 24, 40, 0.5);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0 4px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.process-step-flow:hover { border-color: var(--ultra-blue); transform: translateY(-3px); }
.process-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.process-step-flow .step-n {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--blue-light);
  font-size: 16px;
  letter-spacing: 0.08em;
}
.step-arrow {
  color: rgba(74, 131, 245, 0.4);
  position: absolute;
  top: 32px;
  right: -16px;
  background: var(--bg-deep);
  padding: 4px;
  z-index: 2;
  border-radius: 50%;
}
@media (max-width: 800px) {
  .step-arrow { display: none; }
}
.process-step-flow h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  margin: 0 0 10px;
  text-wrap: balance;
}
.process-step-flow p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 16px;
  text-wrap: pretty;
  font-size: 0.95rem;
}

/* ==============  07 · COMPARISON TABLE  ============== */
.comparison-section {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}
.comparison-section .section-intro {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 68ch;
  line-height: 1.55;
  margin-bottom: 40px;
}
.comparison-table {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 24, 40, 0.5);
}
.comparison-header,
.comparison-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  align-items: stretch;
}
.comparison-header {
  background: linear-gradient(180deg, rgba(22, 32, 56, 0.8) 0%, rgba(15, 24, 40, 0.6) 100%);
  border-bottom: 1px solid rgba(74, 131, 245, 0.2);
}
.comparison-col-label {
  padding: 16px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.comparison-col-label:last-child { border-right: none; }
.comparison-col-right { color: var(--ultra-blue); }
.comparison-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.25s ease;
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row:hover { background: rgba(74, 131, 245, 0.04); }
.comparison-cell {
  padding: 20px;
  line-height: 1.5;
  font-size: 0.95rem;
  border-right: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comparison-cell:last-child { border-right: none; }
.comparison-topic {
  font-weight: 600;
  color: var(--text);
  background: rgba(11, 18, 32, 0.4);
}
.comparison-left { color: rgba(255, 255, 255, 0.55); }
.comparison-right { color: var(--text); background: rgba(74, 131, 245, 0.03); }
.comparison-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}
.comparison-mark-bad {
  background: rgba(255, 123, 123, 0.15);
  color: #FF7B7B;
}
.comparison-mark-good {
  background: rgba(74, 131, 245, 0.18);
  color: var(--ultra-blue);
}
@media (max-width: 740px) {
  .comparison-header { display: none; }
  .comparison-row {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .comparison-cell {
    border-right: none;
    border-bottom: 1px dashed var(--border);
    padding: 12px 4px;
    font-size: 0.92rem;
  }
  .comparison-cell:last-child { border-bottom: none; }
  .comparison-topic::before { content: "Topic: "; color: var(--muted); font-weight: 400; font-size: 11px; text-transform: uppercase; }
  .comparison-left::before { content: "Typical: "; color: #FF7B7B; font-weight: 600; font-size: 11px; text-transform: uppercase; }
  .comparison-right::before { content: "Us: "; color: var(--ultra-blue); font-weight: 600; font-size: 11px; text-transform: uppercase; }
}

/* ==============  08 · INVESTMENT GUIDE  ============== */
.investment-section {
  background:
    radial-gradient(ellipse 900px 500px at 50% 60%, rgba(74, 131, 245, 0.1) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.investment-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.investment-inner .section-head {
  justify-content: center;
  margin-bottom: 32px;
}
.investment-body {
  font-size: 1.08rem;
  color: var(--text);
  line-height: 1.65;
  text-wrap: pretty;
  max-width: 72ch;
  margin: 0 auto 32px;
}
.investment-body p { margin: 0 0 16px; }
.investment-body p:last-child { margin-bottom: 0; }
.investment-floor {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 36px;
  background: linear-gradient(180deg, rgba(22, 32, 56, 0.72) 0%, rgba(12, 20, 38, 0.92) 100%);
  border: 1px solid rgba(74, 131, 245, 0.3);
  border-radius: 14px;
  margin: 0 0 32px;
  min-width: 280px;
}
.floor-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.floor-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(90deg, var(--blue-light) 0%, var(--ultra-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.investment-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.investment-cta-row .btn-lg { min-width: 280px; justify-content: center; }
.investment-promise {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* =====================================================================
   SERVICE-PAGE GRID: count-aware columns + height equalization (2026-05-03)
   =====================================================================
   Replaces auto-fit/minmax wrapping (which orphaned the 5th process step
   on /services/seo/ and the 5th+6th feature card on the 6-feature pages).
   Modifier class --N is set in page-service.php from PHP count().
   ===================================================================== */

/* Trust bar — 4 or 5 stat tiles */
.trust-bar-grid--4 { grid-template-columns: repeat(4, 1fr); }
.trust-bar-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Problem articulation — pain-point cards (typically 4) */
.problem-grid--3 { grid-template-columns: repeat(3, 1fr); }
.problem-grid--4 { grid-template-columns: repeat(4, 1fr); }
.problem-grid--6 { grid-template-columns: repeat(3, 1fr); }

/* Feature grid — what's-included cards (6 or 8 typical) */
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature-grid--6 { grid-template-columns: repeat(3, 1fr); } /* 3 × 2 rows + CTA banner row 3 */
.feature-grid--8 { grid-template-columns: repeat(3, 1fr); } /* 3 × 3 rows w/ CTA filling 9th cell */
.feature-grid--9 { grid-template-columns: repeat(3, 1fr); } /* 3 × 3 rows */

/* Process flow — 4 or 5 steps */
.process--flow .process-flow--3 { grid-template-columns: repeat(3, 1fr); }
.process--flow .process-flow--4 { grid-template-columns: repeat(4, 1fr); }
.process--flow .process-flow--5 { grid-template-columns: repeat(5, 1fr); }
.process--flow .process-flow--6 { grid-template-columns: repeat(3, 1fr); } /* 3 × 2 rows */

/* Cards — flex-column structure so heights equalize cleanly and
   bottom-anchored elements (signal quote, step output) snap to the
   card bottom regardless of intermediate text length. CSS Grid already
   stretches items to row height; flex-column lets the inside fill. */
.problem-card,
.feature-card,
.process-step-flow {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.problem-card p { flex: 0 0 auto; }
.problem-card .problem-signal { margin-top: auto; }

.feature-card p { flex: 1 1 auto; }

.process-step-flow > h3 + p { flex: 1 1 auto; }
.process-step-flow .step-output { margin-top: auto; }

/* Hide step-arrows below desktop — they only make sense in a single
   horizontal row with the next step adjacent. */
@media (max-width: 1100px) {
  .step-arrow { display: none !important; }
}

/* Tablet — 4/5/6/8/9-up grids step down to 2-col cleanly. 3-up
   grids stay 3 until they need to stack. */
@media (max-width: 1100px) {
  .feature-grid--8 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--9 { grid-template-columns: repeat(2, 1fr); }
  .process--flow .process-flow--5 { grid-template-columns: repeat(5, 1fr); /* keep — narrows cells but stays single-row */ }
  .trust-bar-grid--5 { grid-template-columns: repeat(5, 1fr); /* tiles are tiny; stays single-row */ }
}

@media (max-width: 900px) {
  .trust-bar-grid--4,
  .trust-bar-grid--5,
  .problem-grid--3,
  .problem-grid--4,
  .problem-grid--6,
  .feature-grid--3,
  .feature-grid--4,
  .feature-grid--6,
  .feature-grid--8,
  .feature-grid--9,
  .process--flow .process-flow--3,
  .process--flow .process-flow--4,
  .process--flow .process-flow--5,
  .process--flow .process-flow--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .trust-bar-grid--4,
  .trust-bar-grid--5,
  .problem-grid--3,
  .problem-grid--4,
  .problem-grid--6,
  .feature-grid--3,
  .feature-grid--4,
  .feature-grid--6,
  .feature-grid--8,
  .feature-grid--9,
  .process--flow .process-flow--3,
  .process--flow .process-flow--4,
  .process--flow .process-flow--5,
  .process--flow .process-flow--6 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   FEATURE-CARD CTA (2026-05-03) — 9th cell of the 3×3 "What's included"
   grid. On 6-feature pages it spans the full row 3 as a banner CTA.
   ===================================================================== */

.feature-card--cta {
  background: linear-gradient(180deg, rgba(21, 94, 239, 0.14) 0%, rgba(21, 94, 239, 0.04) 100%);
  border-color: rgba(74, 131, 245, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-card--cta:hover {
  border-color: var(--ultra-blue);
  background: linear-gradient(180deg, rgba(21, 94, 239, 0.20) 0%, rgba(21, 94, 239, 0.06) 100%);
  transform: translateY(-3px);
}

.feature-card--cta .feature-card-num {
  color: var(--ultra-blue);
  border-bottom-color: rgba(74, 131, 245, 0.3);
}

.feature-card--cta h3 {
  color: var(--text);
  margin-top: 0;
}

.feature-card--cta p {
  color: var(--ink-soft);
  margin-bottom: 24px;
  flex: 0 0 auto;
}

.feature-card--cta .cta-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 0.95rem;
  font-weight: 600;
}

.feature-card--cta .cta-btn .arr {
  transition: transform 0.25s ease;
}

.feature-card--cta:hover .cta-btn .arr {
  transform: translateX(4px);
}

/* On 6-feature pages: CTA is row 3 spanning all 3 cols (banner) */
.feature-grid--6 .feature-card--cta {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 28px 36px;
}

.feature-grid--6 .feature-card--cta .feature-card-num {
  display: none; /* in banner mode, drop the eyebrow */
}

.feature-grid--6 .feature-card--cta h3 {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.feature-grid--6 .feature-card--cta p {
  flex: 1 1 auto;
  margin: 0;
}

.feature-grid--6 .feature-card--cta .cta-btn {
  flex: 0 0 auto;
}

/* Tablet — 8-feature grid drops to 2-col, CTA spans the row to avoid orphan */
@media (max-width: 1100px) {
  .feature-grid--8 .feature-card--cta { grid-column: 1 / -1; }
  /* Banner-mode CTA on 6-feature page collapses to stacked at narrow widths */
  .feature-grid--6 .feature-card--cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .feature-grid--6 .feature-card--cta h3 { white-space: normal; }
}

@media (max-width: 900px) {
  .feature-grid--6 .feature-card--cta,
  .feature-grid--8 .feature-card--cta {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
   FAQ SECTION-HEAD ALIGNMENT (2026-05-03)
   The .faq-list is 880px centered. Without this rule, the .section-head
   above it spans the full container (~1184px) so the H2 + section-num
   sat ~152px to the left of the accordion's left edge. This rule
   constrains the section-head to match the accordion's column.
   ===================================================================== */
.service-page .faq .section-head,
.case-studies-page .faq .section-head,
.index-page .faq .section-head {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   BREADCRUMB UI (2026-05-03) — visible breadcrumb strip on every
   non-home page, mirrors the BreadcrumbList @graph node so users see the
   same hub-spoke chain bots see in schema. Required by the 17-item gate.
   ===================================================================== */
.breadcrumbs {
  background: var(--bg-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 16px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}

.breadcrumbs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--faint);
}

.breadcrumbs-item {
  color: var(--muted);
}

.breadcrumbs-item a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.breadcrumbs-item a:hover {
  color: var(--ultra-blue);
}

.breadcrumbs-item:not(:last-child)::after {
  content: "/";
  color: var(--faint);
  margin-left: 12px;
  margin-right: 6px;
  display: inline-block;
}

.breadcrumbs-item[aria-current="page"] {
  color: var(--text);
}

@media (max-width: 540px) {
  .breadcrumbs { padding: 12px 0; font-size: 10.5px; }
  .breadcrumbs-item:not(:last-child)::after { margin-left: 8px; margin-right: 4px; }
}

/* =====================================================================
   CLOSING CTA (2026-05-03) — module 09b on service pages, sits between
   FAQ and related-links. Simple centered variant per F1 gate (NO form
   duplication — hero already has the form).
   ===================================================================== */
.closing-cta-section {
  background:
    radial-gradient(ellipse 1100px 500px at 50% 50%, rgba(74, 131, 245, 0.12) 0%, transparent 70%),
    var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 96px 0;
  position: relative;
}

.closing-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.closing-cta-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ultra-blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.closing-cta-h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 18px;
  color: var(--text);
}

.closing-cta-sub {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 600px;
  margin: 0 auto 32px;
}

.closing-cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.closing-cta-actions .btn-lg {
  min-width: 240px;
  justify-content: center;
}

.closing-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.closing-cta-call:hover {
  border-color: var(--ultra-blue);
  color: var(--text);
  background: rgba(74, 131, 245, 0.06);
}

.closing-cta-call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(74, 131, 245, 0.12);
  color: var(--ultra-blue);
}

.closing-cta-primary .arr {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

.closing-cta-primary:hover .arr {
  transform: translateX(4px);
}

@media (max-width: 540px) {
  .closing-cta-section { padding: 72px 0; }
  .closing-cta-actions { flex-direction: column; gap: 10px; width: 100%; }
  .closing-cta-actions .btn-lg { width: 100%; min-width: 0; }
}

/* =====================================================================
   FORM FONT-SIZE (2026-05-03) — bump to 16px on mobile so iOS doesn't
   auto-zoom on input focus (sub-16px triggers zoom on mobile Safari).
   Desktop keeps the current 14.5px for visual density.
   ===================================================================== */
@media (max-width: 900px) {
  .field input,
  .field textarea {
    font-size: 16px;
  }
}

/**
 * Index hub page styles — appended to main.css load pipeline.
 * Tier-B index hubs (/services/, /service-areas/, /industries/, etc).
 */

/* Inherits 120px top+bottom padding from the global section rule. Override only the background here. */
.index-items-section { background: var(--bg-deep); }

.index-items-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
.index-items-grid--2 { grid-template-columns: repeat(2, 1fr); }
.index-items-grid--3 { grid-template-columns: repeat(3, 1fr); }
.index-items-grid--4 { grid-template-columns: repeat(4, 1fr); }
.index-items-grid--5,
.index-items-grid--6 { grid-template-columns: repeat(3, 1fr); }

.index-item-card {
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  position: relative;
  transition: transform 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms ease;
}
.index-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(120,170,255,0.35);
}

.index-item-num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue-light);
  font-feature-settings: "tnum" 1;
}

.index-item-card h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.index-item-card h3 a {
  color: var(--text);
  text-decoration: none;
}
.index-item-card h3 a:hover { color: var(--blue-light); }

.index-item-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.index-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--blue-light);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: gap 200ms ease;
}
.index-item-cta:hover { gap: 0.6rem; }
.index-item-cta .arr { transition: transform 200ms ease; }
.index-item-cta:hover .arr { transform: translateX(3px); }

@media (max-width: 960px) {
  .index-items-grid--3,
  .index-items-grid--5,
  .index-items-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .index-items-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .index-items-grid--2,
  .index-items-grid--3,
  .index-items-grid--4,
  .index-items-grid--5,
  .index-items-grid--6 { grid-template-columns: 1fr; }
  .index-item-card { padding: 1.75rem 1.5rem; }
  .index-item-card h3 { font-size: 1.3rem; }
}

/* ========================================================================
   SECTION-HEAD MIRROR RULES for .index-page (2026-05-17)
   The .service-page .section-head rules (flex layout, margin-bottom, etc.)
   don't match .index-page body class — adding mirrors so index hubs get
   the same heading layout as pillar pages.
   ======================================================================== */
.index-page .section-head,
.case-studies-page .section-head {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-bottom: 56px;
}
.index-page .section-head h2,
.case-studies-page .section-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
.index-page .section-head .section-num,
.case-studies-page .section-head .section-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  color: var(--blue-light);
  letter-spacing: 0.1em;
}
.index-page .faq .section-head {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
/* ============================================================
   GUIDE PAGES (Tier-C cornerstone content)
   Appended block — uses existing UltraWeb Labs tokens.
   ============================================================ */

/* Reading-progress bar (fixed top) */
.guide-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: transparent;
  z-index: 9999; pointer-events: none;
}
.guide-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%);
  box-shadow: 0 0 12px var(--blue-glow);
  transition: width 80ms linear;
}

/* HERO --------------------------------------------------- */
.guide-hero {
  padding: 96px 0 56px;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,94,239,0.10) 0%, transparent 60%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.guide-hero .eyebrow.guide-eyebrow { display: inline-block; margin-bottom: 20px; }
.guide-h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-bottom: 24px;
}
.guide-lede {
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-soft);
  max-width: 64ch;
  line-height: 1.55;
  margin-bottom: 28px;
}
.guide-meta {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-wrap: wrap; gap: 24px;
  font-size: 13px; color: var(--muted);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
.guide-meta li { display: flex; align-items: center; gap: 8px; }
.guide-meta .gm-label { color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.guide-meta .gm-val   { color: var(--ink); }
.guide-meta time      { color: var(--ink); }
.guide-cred {
  list-style: none; padding: 14px 18px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px; color: var(--ink-soft);
}
.guide-cred li { display: flex; align-items: center; gap: 8px; }
.guide-cred li::before {
  content: "✓"; color: var(--blue-light); font-weight: 700;
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.guide-cred strong { color: var(--ink); }

/* BODY GRID -------------------------------------------------- */
.guide-body { padding: 64px 0 96px; background: var(--bg); }
.guide-body-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) {
  .guide-body-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* TOC sidebar */
.guide-toc-wrap { position: sticky; top: 96px; }
@media (max-width: 980px) {
  .guide-toc-wrap { position: static; }
}
.guide-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
}
.guide-toc-title {
  margin: 0 0 12px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
.guide-toc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  counter-reset: toc;
}
.guide-toc-list li a {
  display: block;
  padding: 8px 10px;
  font-size: 13.5px; line-height: 1.4;
  color: var(--ink-soft);
  border-radius: 6px;
  transition: background 150ms var(--ease), color 150ms var(--ease);
  border-left: 2px solid transparent;
}
.guide-toc-list li a:hover {
  background: var(--surface-2); color: var(--ink);
  border-left-color: var(--blue);
}

/* MAIN COLUMN ------------------------------------------------ */
.guide-main { min-width: 0; }
.guide-section { margin: 0 0 56px; scroll-margin-top: 88px; }
.guide-section:last-child { margin-bottom: 0; }
.guide-h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.18;
  margin: 0 0 20px;
  letter-spacing: -0.022em;
}
.guide-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 70ch;
}
.guide-prose p { margin: 0 0 18px; }
.guide-prose p:last-child { margin-bottom: 0; }
.guide-prose strong { color: var(--ink); font-weight: 600; }
.guide-prose a {
  color: var(--blue-light);
  border-bottom: 1px solid rgba(74,131,245,0.35);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.guide-prose a:hover { color: #fff; border-bottom-color: var(--blue); }
.guide-prose h3 {
  font-size: 19px;
  color: var(--ink);
  margin: 28px 0 12px;
  letter-spacing: -0.015em;
}
.guide-prose ul, .guide-prose ol {
  margin: 0 0 18px; padding-left: 24px;
}
.guide-prose li { margin-bottom: 8px; }
.guide-prose blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  border-left: 3px solid var(--blue);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-style: italic;
}
.guide-prose blockquote p:last-child { margin-bottom: 0; }
.guide-prose code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
}

/* INTRO --------------------------------------------------- */
.guide-intro .guide-prose { max-width: 70ch; }

/* TIPS --------------------------------------------------- */
.guide-tip { padding-top: 8px; }
.guide-tip-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 18px;
}
.guide-tip-num {
  font-family: "Poppins", "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.guide-tip .guide-h2 { margin: 0; }

/* RED FLAGS ----------------------------------------------- */
.guide-redflags { padding: 32px 28px; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.guide-redflags .eyebrow { color: var(--danger); }
.guide-redflags .eyebrow::before { content: "// "; opacity: 0.7; }
.redflag-grid {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.redflag-card {
  display: flex; gap: 12px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.redflag-card:hover {
  border-color: rgba(239,68,68,0.45);
  transform: translateY(-2px);
}
.redflag-mark {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(239,68,68,0.12);
  color: var(--danger);
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  margin-top: 2px;
}
.redflag-title { margin: 0 0 4px; color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.redflag-desc  { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }

/* ASK SCRIPT --------------------------------------------- */
.ask-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 16px;
}
.ask-item {
  display: flex; gap: 18px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease);
}
.ask-item:hover { border-color: rgba(21,94,239,0.45); }
.ask-num {
  flex-shrink: 0;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  color: var(--blue-light);
  font-weight: 700;
  font-size: 14px;
  background: var(--blue-50);
  border: 1px solid rgba(74,131,245,0.30);
  border-radius: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.ask-question {
  margin: 0 0 8px;
  font-size: 16.5px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}
.ask-why {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.ask-why-label {
  color: var(--blue-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  margin-right: 6px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* FAQ rules removed — UNSCOPED_FAQ_RULES_REMOVED 2026-05-17 — scoped .guide-faqs .faq-* rules later in file */

/* SOFT CLOSING CTA ---------------------------------------- */
.guide-cta { padding: 80px 0; background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide-cta-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: 48px 32px;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,94,239,0.12) 0%, transparent 70%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.guide-cta-h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 0 0 16px;
}
.guide-cta-body { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; max-width: 56ch; margin: 0 auto 28px; }
.guide-cta-body p:last-child { margin-bottom: 0; }
.guide-cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.guide-cta-meta {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0;
}

/* RELATED READING ----------------------------------------- */
.guide-related { padding: 80px 0 96px; background: var(--bg); }
.guide-related-h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 28px;
}
.related-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.related-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.related-card:hover {
  border-color: rgba(21,94,239,0.45);
  transform: translateY(-3px);
}
.related-card a {
  display: flex; flex-direction: column;
  padding: 20px;
  height: 100%;
  position: relative;
}
.related-source {
  display: inline-block;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 10px;
}
.related-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  flex-grow: 1;
}
.related-arrow {
  display: inline-block; margin-top: 16px;
  font-size: 18px; color: var(--blue-light);
  transition: transform 200ms var(--ease);
}
.related-card:hover .related-arrow { transform: translateX(4px); color: #fff; }

/* MOBILE ADJUSTMENTS -------------------------------------- */
@media (max-width: 720px) {
  .guide-hero { padding: 64px 0 40px; }
  .guide-body { padding: 40px 0 64px; }
  .guide-section { margin-bottom: 40px; }
  .guide-tip-head { gap: 12px; }
  .guide-redflags { padding: 24px 18px; }
  .ask-item { padding: 16px 18px; gap: 14px; }
  .guide-cta-card { padding: 32px 20px; }
  .guide-toc { max-height: none; }
  .guide-cred { font-size: 13px; padding: 12px 14px; gap: 6px 18px; }
}

/* REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .guide-progress-bar { transition: none; }
  .redflag-card, .ask-item, .related-card, .related-arrow,
  .faq-toggle::before, .faq-toggle::after,
  .guide-prose a {
    transition: none;
  }
  .redflag-card:hover, .ask-item:hover, .related-card:hover { transform: none; }
}
/* ============================================================
   GUIDES INDEX / BLOG INDEX / SINGLE POST — shared card-grid + hero patterns
   ============================================================ */

/* ---- Shared index-hero (used by /guides/ and /blog/) ---- */
.guides-hero, .blog-hero {
  padding: 96px 0 48px;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,94,239,0.10) 0%, transparent 60%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.guides-h1, .blog-h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
  max-width: 22ch;
}
.guides-lede, .blog-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 64ch;
  line-height: 1.55;
  margin: 0;
}

.guides-grid-wrap, .blog-grid-wrap {
  padding: 56px 0 96px;
  background: var(--bg);
}

/* ---- GUIDE CARD GRID (on /guides/ index) ---- */
.guide-card-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}
.guide-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
  overflow: hidden;
}
.guide-card:hover {
  border-color: rgba(21,94,239,0.50);
  transform: translateY(-3px);
}
.guide-card a {
  display: flex; flex-direction: column;
  padding: 28px;
  height: 100%;
  gap: 14px;
}
.guide-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.guide-card-source {
  color: var(--blue-light);
  font-weight: 700;
}
.guide-card-dot { color: var(--faint); }
.guide-card-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.guide-card-lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  flex-grow: 1;
}
.guide-card-cta {
  margin-top: auto;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.guide-card-arrow {
  font-size: 14px;
  transition: transform 200ms var(--ease);
}
.guide-card:hover .guide-card-arrow { transform: translateX(4px); }

.guides-empty, .blog-empty {
  color: var(--muted);
  font-size: 16px;
  padding: 32px 0;
}

/* ---- POST CARD GRID (on /blog/ + related on single posts) ---- */
.post-card-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.post-card-grid--related {
  margin-top: 24px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
  overflow: hidden;
}
.post-card:hover {
  border-color: rgba(21,94,239,0.50);
  transform: translateY(-3px);
}
.post-card a {
  display: flex; flex-direction: column;
  height: 100%;
}
.post-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  overflow: hidden;
}
.post-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms var(--ease);
}
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-thumb--placeholder {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  position: relative;
}
.post-card-thumb--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(21,94,239,0.20) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(74,131,245,0.14) 0%, transparent 50%);
}
.post-card a > *:not(.post-card-thumb) { padding-left: 24px; padding-right: 24px; }
.post-card-meta {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 18px;
  padding-bottom: 0;
}
.post-card-cat  { color: var(--blue-light); font-weight: 700; }
.post-card-date { color: var(--ink-soft); }
.post-card-dot  { color: var(--faint); }
.post-card-title {
  margin: 10px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.post-card-excerpt {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
  flex-grow: 1;
}
.post-card-cta {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  padding-bottom: 24px;
  margin-top: auto;
}
.post-card-arrow { transition: transform 200ms var(--ease); }
.post-card:hover .post-card-arrow { transform: translateX(4px); }

/* ---- PAGINATION ---- */
.blog-pagination {
  margin-top: 56px;
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  transition: all 180ms var(--ease);
}
.blog-pagination .page-numbers:hover { border-color: var(--blue); color: #fff; background: var(--surface-2); }
.blog-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-pagination .page-numbers.dots { border: none; background: transparent; }

/* ---- SINGLE POST ---- */
.post-hero {
  padding: 96px 0 48px;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,94,239,0.08) 0%, transparent 60%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.post-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.post-breadcrumbs a { color: var(--muted); transition: color 160ms var(--ease); }
.post-breadcrumbs a:hover { color: var(--blue-light); }
.post-breadcrumbs .pb-sep { color: var(--faint); }
.post-h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 12px 0 18px;
  max-width: 26ch;
}
.post-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 64ch;
  line-height: 1.55;
  margin: 0 0 24px;
}

.post-body { padding: 56px 0 64px; background: var(--bg); }
.post-body-inner { max-width: 760px; }
.post-feature-img {
  margin: 0 0 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.post-feature-img img { display: block; width: 100%; height: auto; }

.post-prose { max-width: none; }
.post-prose h2 {
  font-size: clamp(24px, 2.4vw, 30px);
  margin: 40px 0 18px;
  color: #fff;
}
.post-prose h3 {
  font-size: 21px;
  margin: 32px 0 12px;
  color: var(--ink);
}
.post-prose img {
  margin: 28px 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.post-prose figure { margin: 28px 0; }
.post-prose figcaption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

.post-tags {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.post-tags-label {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.post-tags ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.post-tags li a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: all 160ms var(--ease);
}
.post-tags li a:hover { border-color: var(--blue); color: var(--blue-light); }

.post-related {
  padding: 64px 0 32px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}

/* ---- MOBILE ADJUSTMENTS ---- */
@media (max-width: 720px) {
  .guides-hero, .blog-hero, .post-hero { padding: 64px 0 36px; }
  .guides-grid-wrap, .blog-grid-wrap { padding: 36px 0 64px; }
  .post-body { padding: 36px 0 48px; }
  .guide-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .post-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .guide-card a { padding: 22px; }
  .post-card a > *:not(.post-card-thumb) { padding-left: 18px; padding-right: 18px; }
}
/* ============================================================
   GUIDE POLISH PATCH (2026-05-17) — Skyler feedback round 1
   - Removes panel wrapper on red-flags section (was visually distinct from rest)
   - Tightens section spacing 56px -> 36px
   - Tightens body top padding 64px -> 24px (less gap between hero and first H2)
   - Styles the TOC sidebar scrollbar to match dark theme
   ============================================================ */

/* 1. Remove the bordered-card wrapper around .guide-redflags — cards inside
      already carry their own bg + border; the wrapper was redundant + heavy. */
.guide-redflags {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.guide-redflags .redflag-grid { margin-top: 18px; }

/* 2. Tighter rhythm between sections — generous breathing without dead air */
.guide-section { margin: 0 0 36px; }
.guide-tip { padding-top: 0; }
.guide-tip-head { margin-bottom: 14px; }

/* 3. Pull the first section up closer to the hero */
.guide-body { padding: 24px 0 80px; }

/* 4. TOC sidebar scrollbar — match dark theme instead of OS default */
.guide-toc {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.guide-toc::-webkit-scrollbar { width: 6px; }
.guide-toc::-webkit-scrollbar-track { background: transparent; }
.guide-toc::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
  transition: background 160ms var(--ease);
}
.guide-toc::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ============================================================
   GUIDE POLISH PATCH v2 (2026-05-17) — second pass
   - Tighter hero->body transition (kill the gap entirely)
   - Tighter section-to-section spacing (24px vs 36px)
   - Tighter spacing between tip number/head and body
   ============================================================ */
.guide-hero { padding-bottom: 28px; }
.guide-body { padding-top: 8px; padding-bottom: 64px; }
.guide-section { margin-bottom: 24px; }
.guide-section:last-child { margin-bottom: 0; }
.guide-tip-head { margin-bottom: 10px; }
.guide-intro { margin-bottom: 24px; }

/* ============================================================
   GUIDE POLISH PATCH v3 (2026-05-17) — REAL ROOT-CAUSE FIX
   Discovery: a global theme rule `section { padding: 120px 0; }` at
   line 99 of main.css was adding 120px top + 120px bottom to EVERY
   <section> inside the guide article — including the .guide-tips
   wrapper and each .guide-tip. v1 and v2 patches were tuning the
   wrong knob (margin, when padding was the real source of the gap).
   ============================================================ */
.guide-main section,
.guide-tips { padding: 0; }

/* Re-state the intended section-to-section rhythm so it actually shows */
.guide-section { margin: 0 0 28px; }
.guide-section:last-child { margin-bottom: 0; }

/* GUIDE POLISH PATCH v4 — back-off after over-tightening
   - Restore breathing room above first section (8px -> 40px)
   - More space between sections (28px -> 48px) */
.guide-body { padding-top: 40px; }
.guide-section { margin: 0 0 48px; }
.guide-section:last-child { margin-bottom: 0; }

/* Real-person byline on guide hero — name + role */
.gm-author { color: var(--blue-light); transition: color 150ms var(--ease); border-bottom: 1px solid rgba(74,131,245,0.30); }
.gm-author:hover { color: #fff; border-bottom-color: var(--blue); }
.gm-author-role {
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  margin-left: 6px;
}
@media (max-width: 720px) {
  .gm-author-role { display: block; margin-left: 0; margin-top: 2px; }
}
/* ============================================================
   PILLAR-CLUSTER WIRING (2026-05-17)
   - Pillar callout above blog post body (single.php)
   - "Latest from our blog" cluster module on service pillar pages
   - Tier-4 category hub + Tier-5 author hub styling
   ============================================================ */

/* Pillar callout on blog posts ----------------------------- */
.post-pillar-callout {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}
.post-pillar-label {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.post-pillar-link {
  color: var(--blue-light);
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(74,131,245,0.30);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.post-pillar-link:hover { color: #fff; border-bottom-color: var(--blue); }
.post-pillar-arrow { transition: transform 160ms var(--ease); }
.post-pillar-link:hover .post-pillar-arrow { transform: translateX(3px); }

/* "Latest from our blog" cluster module on pillar pages --- */
.pillar-cluster {
  padding: 80px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.pillar-cluster .container { max-width: 1240px; }
.pillar-cluster-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 36px;
}
.pillar-cluster-eyebrow {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-light);
  margin: 0 0 8px;
}
.pillar-cluster-h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.025em;
}
.pillar-cluster-allink {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-light); font-weight: 700;
}
.pillar-cluster-allink:hover { color: #fff; }

/* TIER-4 CATEGORY HUB / TIER-5 AUTHOR HUB ------------------ */
.hub-page-hero {
  padding: 96px 0 48px;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,94,239,0.10) 0%, transparent 60%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.hub-h1 {
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
  max-width: 24ch;
}
.hub-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 64ch;
  line-height: 1.55;
  margin: 0 0 24px;
}
.hub-meta-row {
  display: flex; flex-wrap: wrap; gap: 24px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--muted);
}
.hub-meta-row .hm-label { color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }

/* Author hub — bigger byline treatment */
.author-card {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  align-items: center;
}
@media (max-width: 720px) {
  .author-card { grid-template-columns: 1fr; gap: 20px; }
}
.author-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--blue-light);
  letter-spacing: -0.02em;
  border: 2px solid var(--line);
}
.author-name {
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 0 0 6px;
  letter-spacing: -0.025em;
}
.author-role {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.author-bio {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 60ch;
}
.author-links {
  display: flex; flex-wrap: wrap; gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.author-links a {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-light); font-weight: 700;
  border-bottom: 1px solid rgba(74,131,245,0.30);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.author-links a:hover { color: #fff; border-bottom-color: var(--blue); }

/* ============================================================
   FAQ SCOPE FIX (2026-05-17)
   The unscoped .faq-list / .faq-item rules I added at lines 3878+ for
   page-guide.php were bleeding into every page that uses those classes
   (the homepage + every service-pillar page). Re-scope to .guide-faqs
   so the homepage/service-page FAQ rules at lines 1566+ stay authoritative
   on non-guide pages.
   ============================================================ */
/* Reset: undo the bleed of my unscoped rules on non-guide-pages. Two
   class selectors beats my single-class rules, so these win cleanly. */
.service-page .faq-item:first-child,
.index-page .faq-item:first-child,
.front-page .faq-item:first-child { border-top: none; }

/* Re-state guide-page FAQ rules with proper scope so guides still look right */
.guide-faqs .faq-list { list-style: none; padding: 0; margin: 24px 0 0; max-width: none; border-top: none; }
.guide-faqs .faq-item { border-bottom: 1px solid var(--line); background: transparent; transition: none; }
.guide-faqs .faq-item:hover, .guide-faqs .faq-item[open] { background: transparent; }
.guide-faqs .faq-item:first-child { border-top: 1px solid var(--line); }
.guide-faqs .faq-item summary { padding: 18px 0; gap: 16px; }
.guide-faqs .faq-q { font-family: 'Manrope', sans-serif; font-size: 17px; color: var(--ink); }
.guide-faqs .faq-item:hover .faq-q, .guide-faqs .faq-item[open] .faq-q { color: var(--ink); }
.guide-faqs .faq-a { padding: 0 0 22px; max-width: 70ch; }
.guide-faqs .faq-toggle { display: inline-block; }
.guide-faqs .faq-chev { display: none; }

/* ============================================================
   PILLAR CLUSTER ON SERVICE PAGES — disable the duplicate module.
   page-service.php already renders <section class="related"> with
   the curated 'Related from UltraWeb Labs' links. My get_footer hook
   was adding a SECOND related section, which read as redundant.
   Hiding my hook's section on .service-page; the pillar cluster
   stays useful on /blog/ + /guides/ surfaces via other modules.
   ============================================================ */
.service-page ~ .pillar-cluster,
body.page-template-page-service .pillar-cluster { display: none; }
/* ============================================================
   UNIFIED RELATED MODULE on service pillar pages (2026-05-17)
   Single consolidated "Keep going on {service}" section replacing
   both the old chip-list and the floating pillar-cluster module.
   ============================================================ */

.related-unified {
  padding: 88px 0 96px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.related-unified-head { margin-bottom: 40px; }
.related-unified-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.related-unified-h2 {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -0.025em;
}

.related-block { margin-bottom: 36px; }
.related-block:last-child { margin-bottom: 0; }
.related-block-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 18px;
}
.related-block-label {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-light); font-weight: 700;
  margin: 0 0 14px;
}
.related-block-head .related-block-label { margin: 0; }
.related-allink {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-light); font-weight: 700;
  transition: color 160ms var(--ease);
}
.related-allink:hover { color: #fff; }

/* Block 1 — chip-style links (existing related list) */
.related-block--chips .related-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.related-block--chips .related-list li a {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}
.related-block--chips .related-list li a:hover {
  border-color: rgba(21,94,239,0.50);
  background: var(--surface-2);
  color: #fff;
}

/* Block 2 — blog cluster cards (post-card-grid inherits) */
/* Reuses .post-card / .post-card-grid--related from index-pages.css */

/* Block 3 — author strip */
.author-strip {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.author-strip li { margin: 0; }
.author-strip li a {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.author-strip li a:hover {
  border-color: rgba(21,94,239,0.50);
  transform: translateY(-2px);
}
.author-strip-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border: 1px solid var(--line);
  font-family: "Poppins", "Manrope", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--blue-light);
  letter-spacing: -0.02em;
}
.author-strip-text {
  display: flex; flex-direction: column;
  line-height: 1.35;
}
.author-strip-text strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}
.author-strip-text em {
  font-style: normal;
  color: var(--muted);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

@media (max-width: 720px) {
  .related-unified { padding: 56px 0 64px; }
  .related-block { margin-bottom: 28px; }
  .author-strip li a { padding: 14px 16px; gap: 12px; }
}

/* Now that the unified module is the canonical related surface,
   keep the standalone pillar-cluster hidden on service pages. */
body.page-template-page-service .pillar-cluster { display: none; }
/* ============================================================
   MATRIX-SPECIFIC MODULES (2026-05-17) — between Approach + Features
   - Neighborhoods grid
   - Local notes panel
   These render only on matrix pages (uwl_matrix_* meta populated).
   ============================================================ */

/* NEIGHBORHOODS GRID --------------------------------------- */
.matrix-neighborhoods {
  padding: 88px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.neighborhood-grid {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.neighborhood-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
}
.neighborhood-chip:hover {
  border-color: rgba(21,94,239,0.50);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.neighborhood-pin {
  flex-shrink: 0;
  color: var(--blue);
  font-size: 8px;
  line-height: 1;
}
.neighborhood-name { line-height: 1.3; }

/* LOCAL NOTES PANEL --------------------------------------- */
.matrix-local-notes {
  padding: 88px 0;
  background: var(--bg);
}
.local-notes-grid {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.local-note-card {
  padding: 24px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--blue);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.local-note-card:hover {
  transform: translateY(-2px);
}
.local-note-label {
  display: inline-block;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--blue-light); font-weight: 700;
  margin-bottom: 10px;
}
.local-note-body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .matrix-neighborhoods, .matrix-local-notes { padding: 56px 0; }
  .neighborhood-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
  .neighborhood-chip { padding: 12px 14px; font-size: 14px; }
  .local-note-card { padding: 20px; }
}

/* ============================================================
   CLOSING-CTA orphan-word fix (2026-05-17)
   The 'recommend someone who is.' tail was breaking to its own
   line. text-wrap: balance distributes the words evenly across
   all lines so no orphan emerges at common viewports.
   ============================================================ */
.closing-cta-sub,
.closing-cta-h2,
.guide-cta-body p,
.guide-cta-h2 {
  text-wrap: balance;
}
/* ============================================================
   LEGAL PAGE STYLING (2026-05-17)
   Centered-prose layout for Privacy / Terms / Cookies pages.
   Readable column, generous line-height, simple typography.
   ============================================================ */

.legal-hero {
  padding: 80px 0 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.legal-h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 12px 0 16px;
  max-width: 28ch;
}
.legal-dates {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.legal-dates strong { color: var(--ink-soft); font-weight: 600; }

.legal-body { padding: 56px 0 96px; background: var(--bg); }
.legal-prose {
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-prose h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  color: #fff;
  margin: 40px 0 16px;
  letter-spacing: -0.02em;
}
.legal-prose h3 {
  font-size: 18px;
  color: var(--ink);
  margin: 28px 0 12px;
  font-weight: 600;
}
.legal-prose p { margin: 0 0 18px; }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-prose a {
  color: var(--blue-light);
  border-bottom: 1px solid rgba(74,131,245,0.30);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.legal-prose a:hover { color: #fff; border-bottom-color: var(--blue); }
.legal-prose ul, .legal-prose ol { margin: 0 0 18px; padding-left: 24px; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose hr {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--line);
}
.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.legal-prose table th,
.legal-prose table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-prose table th {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-light);
  background: var(--surface-2);
}
.legal-prose table tr:last-child td { border-bottom: none; }
.legal-prose table code {
  background: var(--bg-deep);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

@media (max-width: 720px) {
  .legal-hero { padding: 56px 0 32px; }
  .legal-body { padding: 36px 0 64px; }
  .legal-prose { font-size: 15.5px; }
}

/* ============================================================
   COOKIE CONSENT BANNER (UWL_COOKIE_BANNER_V1)
   GDPR/CCPA-compliant banner — Accept All / Reject Non-Essential / Customize.
   Sits bottom of viewport, dismisses on consent.
   ============================================================ */
.uwl-cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 600px;
  margin: 0 auto;
  z-index: 99998;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  transform: translateY(120%);
  transition: transform 300ms var(--ease-out-expo);
}
.uwl-cookie-banner[data-visible="true"] { transform: translateY(0); }
.uwl-cookie-text {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.uwl-cookie-text strong { color: var(--ink); }
.uwl-cookie-text a { color: var(--blue-light); border-bottom: 1px solid rgba(74,131,245,0.30); }
.uwl-cookie-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.uwl-cookie-actions button {
  flex: 1;
  min-width: 130px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.uwl-cookie-actions .uwl-c-accept {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
}
.uwl-cookie-actions .uwl-c-accept:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.uwl-cookie-actions .uwl-c-reject {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.uwl-cookie-actions .uwl-c-reject:hover { color: #fff; border-color: var(--blue-light); }
.uwl-cookie-actions .uwl-c-custom {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px;
}
.uwl-cookie-actions .uwl-c-custom:hover { color: var(--ink); border-color: var(--blue-light); }

@media (max-width: 540px) {
  .uwl-cookie-banner { padding: 16px 18px; bottom: 8px; left: 8px; right: 8px; }
  .uwl-cookie-actions { flex-direction: column; }
  .uwl-cookie-actions button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .uwl-cookie-banner { transition: none; }
}

/* ============================================================================
   STRATEGY FORM — UltraSmart Connect plugin override
   ============================================================================
   The form is now powered by [plc_form id="5"] (plugin: projectlab-connect).
   Plugin renders .plc-form-wrapper / .plc-form-fields / .plc-field / etc.
   We override plugin defaults so the rendered form matches the previous
   hand-coded dark-theme design pixel-for-pixel, plus add extra spacing
   between the form heading and the first field (per Skyler 2026-05-17).
   ============================================================================ */

/* Outer wrapper — replaces .strategy-form on the legacy form */
.strategy-form-wrap {
  position: relative;
  background: rgba(17,24,39,0.76);
  border: 1px solid rgba(74,131,245,0.28);
  border-radius: 20px;
  padding: 32px 32px 28px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.6),
    0 0 0 1px rgba(74,131,245,0.05) inset;
}
.strategy-form-wrap::before {
  content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(74,131,245,0.6) 50%, transparent 100%);
  pointer-events: none;
}
.strategy-form-wrap .strategy-form-heading {
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 28px;  /* extra spacing per Skyler 2026-05-17 — was 4px */
  color: #fff;
}

/* Plugin-rendered children — strip its own wrapper styling, no double-padding */
.strategy-form-wrap .plc-form-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
}
.strategy-form-wrap .plc-form-wrapper .plc-form-title { display: none; }

/* Form-fields grid — mirrors the .form-grid layout */
.strategy-form-wrap .plc-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}
@media (max-width: 520px) {
  .strategy-form-wrap .plc-form-fields { grid-template-columns: 1fr; }
}

/* Individual fields */
.strategy-form-wrap .plc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0; /* plugin defaults include bottom margin; we use gap instead */
}
.strategy-form-wrap .plc-field-w50 { grid-column: span 1; }
.strategy-form-wrap .plc-field-w100 { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .strategy-form-wrap .plc-field-w50,
  .strategy-form-wrap .plc-field-w100 { grid-column: 1 / -1; }
}

/* Labels — mono uppercase, muted */
.strategy-form-wrap .plc-field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  display: block;
}
.strategy-form-wrap .plc-field label .plc-required {
  color: var(--blue-light);
  margin-left: 3px;
}

/* Inputs / selects / textareas — premium dark surface */
.strategy-form-wrap .plc-field input[type="text"],
.strategy-form-wrap .plc-field input[type="email"],
.strategy-form-wrap .plc-field input[type="tel"],
.strategy-form-wrap .plc-field input[type="url"],
.strategy-form-wrap .plc-field input[type="number"],
.strategy-form-wrap .plc-field select,
.strategy-form-wrap .plc-field textarea {
  width: 100%;
  background: rgba(7,10,19,0.8);
  border: 1px solid rgba(74,131,245,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
  outline: none;
  box-shadow: none;
}
.strategy-form-wrap .plc-field textarea {
  resize: vertical;
  min-height: 92px;
  font-family: "Manrope", sans-serif;
}
.strategy-form-wrap .plc-field input::placeholder,
.strategy-form-wrap .plc-field textarea::placeholder { color: var(--faint); }

/* Select chevron — match the existing custom SVG arrow */
.strategy-form-wrap .plc-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%234A83F5' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Focus state — blue ring */
.strategy-form-wrap .plc-field input:focus,
.strategy-form-wrap .plc-field select:focus,
.strategy-form-wrap .plc-field textarea:focus {
  border-color: var(--blue-light);
  background: rgba(7,10,19,0.9);
  box-shadow: 0 0 0 3px rgba(74,131,245,0.18);
}

/* Submit button area */
.strategy-form-wrap .plc-form-footer {
  margin-top: 22px;
}
.strategy-form-wrap .plc-form-footer button,
.strategy-form-wrap .plc-form-footer .plc-submit-btn,
.strategy-form-wrap .plc-form-footer button[type="submit"] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  background: var(--blue) !important;
  color: #fff !important;
  border: 1px solid var(--blue) !important;
  border-radius: 12px;
  padding: 16px 28px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
  text-decoration: none;
  line-height: 1;
}
.strategy-form-wrap .plc-form-footer button:hover,
.strategy-form-wrap .plc-form-footer button[type="submit"]:hover {
  background: var(--blue-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(74,131,245,0.5);
}

/* Privacy line — sits below the form */
.strategy-form-wrap .strategy-form-privacy {
  width: 100%;
  margin: 14px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
}

/* Plugin's own success/loading states — let plugin render them, ensure
   they're visible against the dark surface */
.strategy-form-wrap .plc-form-success,
.strategy-form-wrap .plc-form-message {
  color: var(--ink);
  background: rgba(74,131,245,0.08);
  border: 1px solid rgba(74,131,245,0.28);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

/* Plugin error state — match danger color */
.strategy-form-wrap .plc-form .plc-error,
.strategy-form-wrap .plc-field.has-error input,
.strategy-form-wrap .plc-field.has-error select,
.strategy-form-wrap .plc-field.has-error textarea {
  border-color: var(--danger, #ef4444) !important;
}

/* ============================================================================
   CASE STUDIES HERO — page-case-studies.php template
   ============================================================================
   Single-column hero (no form) per Skyler 2026-05-17. The cards below reuse
   the homepage Work-section .work-grid / .work-card / .art / .body classes
   for visual consistency, so no new card styles needed here.
   ============================================================================ */

.case-studies-hero {
  padding: 80px 0 64px;
  position: relative;
}
.case-studies-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.case-studies-hero-inner > * {
  text-align: center;
}
.case-studies-hero-inner .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 18px;
}
.case-studies-hero-inner .hero-h1 {
  text-align: center;
  margin: 0 auto 20px;
}
.case-studies-hero-inner .hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto 32px;
  max-width: 620px;
}
.case-studies-hero-inner .hero-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.case-studies-hero-inner .hero-proof li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: center;
}
.case-studies-hero-inner .hp-stars {
  color: var(--blue-light);
  letter-spacing: -2px;
}

.case-studies-grid-section {
  padding: 100px 0;
}
.case-studies-grid-section .section-intro {
  margin-bottom: 48px;
  max-width: 800px;
}
.case-studies-grid-section .section-intro h2 {
  margin: 12px 0 16px;
}
.case-studies-grid-section .section-intro .lede {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .case-studies-hero { padding: 60px 0 48px; }
  .case-studies-grid-section { padding: 64px 0; }
}

/* ============================================================================
   LEADCONNECTOR CHAT WIDGET — SUPPRESSED (2026-05-17)
   ============================================================================
   We migrated the chat widget to UltraSmart Connect (Damon's plugin). The
   LeadConnector plugin stays installed and active because Damon's still
   using parts of it (form CRM sync, oauth integration), but its chat
   widget overlaps with the UltraSmart widget bottom-right.
   This rule visually suppresses the LC chat widget. Plugin keeps running;
   widget just doesn't render. Damon can disable this rule when LC is
   fully phased out or when he wants the widget back.
   ============================================================================ */
#lc-chat-widget,
#lc-iframe-wrapper,
.lc-chat-bottom-right,
iframe[src*="leadconnector"],
iframe[src*="msgsndr.com"],
iframe[src*="highlevel"],
[id^="lc-chat"],
[class*="lc-chat-"] {
  display: none !important;
}

/* ============================================================================
   TEAM-OF-SPECIALISTS BOX — full-width sibling under .about-wrap
   ============================================================================
   Moved out of the 2-column .about-wrap grid so it can render full container
   width. Sits below the about-copy + team-grid columns, between the team
   section and the Platform Partnerships band. Reduced top margin vs. earlier
   inline-style version (was 48px, now 28px) per Skyler 2026-05-17.
   ============================================================================ */
.team-of-specialists {
  margin: 28px 0 0;
  padding: 28px 36px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
}
.team-of-specialists p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.team-of-specialists p strong {
  color: var(--ink);
}
@media (max-width: 768px) {
  .team-of-specialists { padding: 22px 24px; }
  .team-of-specialists p { font-size: 1rem; }
}

/* ============================================================================
 * REVIEWS STRIP (homepage) — renders Damon's [plc_reviews] shortcode inside a
 * horizontal marquee. The plugin's wrapper divs are flattened with
 * `display: contents` so review cards become direct flex children of the
 * track. All card styling is in this file (the plugin's reviews.css doesn't
 * auto-enqueue on template-driven pages where post_content is empty).
 * ========================================================================= */
.reviews-strip {
  background: var(--bg-deep);
  padding: 80px 0 96px;
  overflow: hidden;
}
.reviews-strip-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 20px;
}
.reviews-strip-head .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.reviews-strip-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* Marquee viewport + track — edges fade out via mask gradient */
.reviews-strip-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-strip-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 4px 0;
  animation: reviews-marquee 90s linear infinite;
}
.reviews-strip-track:hover { animation-play-state: paused; }
@keyframes reviews-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-strip-track { animation: none; }
  .reviews-strip-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Flatten Damon's plugin wrappers so cards align as flex children */
.reviews-strip-track .plc-reviews-widget,
.reviews-strip-track .plc-reviews-grid,
.reviews-strip-clone { display: contents; }
.reviews-strip-track .plc-reviews-header { display: none; }
.reviews-strip-track .plc-reviews-empty {
  color: var(--ink-soft);
  padding: 24px;
}

/* Card — dark theme */
.reviews-strip-track .plc-review-card {
  flex: 0 0 360px;
  width: 360px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px 24px 20px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.reviews-strip-track .plc-review-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviews-strip-track .plc-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 131, 245, 0.18);
  color: var(--blue-light, #88aaff);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
  flex: 0 0 40px;
}
.reviews-strip-track .plc-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reviews-strip-track .plc-review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.reviews-strip-track .plc-review-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reviews-strip-track .plc-review-date {
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.reviews-strip-track .plc-review-stars {
  display: flex;
  gap: 1px;
}
.reviews-strip-track .plc-star {
  width: 16px;
  height: 16px;
}
.reviews-strip-track .plc-review-text {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.reviews-strip-track .plc-review-readmore,
.reviews-strip-track .plc-review-text-full { display: none; }
.reviews-strip-track .plc-review-source {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .reviews-strip { padding: 64px 0 72px; }
  .reviews-strip-head { margin-bottom: 32px; }
  .reviews-strip-track .plc-review-card {
    flex: 0 0 300px;
    width: 300px;
    padding: 20px 20px 18px;
  }
}

/* ============================================================================
 * STICKY MOBILE CTA BAR (mobile only, <768px)
 * Fixed-bottom dual-button bar (Call + Book Strategy Call). Appears after
 * 400px scroll, hides as user approaches the footer to avoid covering it.
 * Per memory/seo-cro-benchmarks.md — sticky mobile CTA bars produce a
 * documented 252.9% mobile conversion lift.
 * ========================================================================= */
.mobile-cta-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11, 13, 18, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(74, 131, 245, 0.22);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(110%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
  }
  .mobile-cta-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-cta-bar .mcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
  }
  .mobile-cta-bar .mcta-btn:active {
    transform: scale(0.97);
  }
  .mobile-cta-bar .mcta-call {
    flex: 0 0 96px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  .mobile-cta-bar .mcta-book {
    flex: 1 1 auto;
    background: var(--ultra-blue, #155EEF);
    color: #fff;
    padding: 0 16px;
    box-shadow: 0 4px 14px rgba(21, 94, 239, 0.36);
  }
  .mobile-cta-bar .mcta-book svg {
    margin-left: 2px;
  }
  /* Don't render on the contact page — covers the form */
  body.page-contact .mobile-cta-bar {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar {
    transition: none;
  }
}

/* Service Areas mega — 3-col Services variant + linked county headers (added 2026-05-30) */
.mega-grid.mega-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mega-col h4 a { display: inline; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 0; }
.mega-col h4 a:hover { color: #fff; background: transparent; }