/* Leadsforge Tech: site.css
   Palette (unchanged brand): signal red, ember, ink, night, graphite, mist, paper
   Type: Manrope only, heavy and tight for display, calm for reading. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --red: #ff3838;
  --ember: #d81f1f;
  --ink: #0f0f0f;
  --night: #121212;
  --coal: #1c1c1c;
  --graphite: #646464;
  --line: #e6e6e6;
  --mist: #f4f4f3;
  --paper: #ffffff;
  --on-dark: #b9b9b9;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 2px 4px rgba(15, 15, 15, .04), 0 28px 56px -32px rgba(15, 15, 15, .4);
  --header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-s); text-decoration: none; }
.skip:focus { top: 12px; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; text-wrap: balance; }
.display { font-size: clamp(44px, 6.4vw, 96px); line-height: .96; letter-spacing: -0.05em; }
h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.045em; }
h2 { font-size: clamp(32px, 4vw, 58px); line-height: 1.03; letter-spacing: -0.035em; }
h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.6; max-width: 56ch; color: #505050; }
.dark .lede { color: var(--on-dark); }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: clamp(80px, 10vw, 144px); }
.section.tight { padding-block: clamp(56px, 7vw, 96px); }
.dark { background: var(--night); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.mist { background: var(--mist); }

/* brand signature: red double slash before a short context line */
.slash { display: inline-flex; gap: 10px; align-items: baseline; font-size: 16px; font-weight: 700; color: var(--graphite); margin-bottom: 20px; }
.slash::before { content: "//"; color: var(--red); font-weight: 800; }
.dark .slash { color: var(--on-dark); }

.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.head .lede { justify-self: end; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } .head .lede { justify-self: start; } }

/* ---------------- buttons ---------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px 0 40px;
  border: 0; border-radius: var(--r-s); cursor: pointer;
  font: 800 16px/1.1 "Manrope", sans-serif; text-decoration: none; text-align: center;
  color: #fff; background: var(--red);
  box-shadow: 0 16px 30px -16px rgba(255, 56, 56, .85);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .25s;
}
.btn::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 16px; z-index: -1;
  background: var(--ember); border-radius: var(--r-s);
  transition: width .45s cubic-bezier(.785, .135, .15, .86);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(255, 56, 56, .9); }
.btn:hover::before { width: 100%; }
.btn:active { transform: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #cdcdcd; padding: 0 26px; }
.btn-ghost::before { display: none; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dark .btn-ghost, .btn-ghost.light { color: #fff; box-shadow: inset 0 0 0 1.5px #454545; }
.dark .btn-ghost:hover, .btn-ghost.light:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); }
.btn-white::before { background: var(--ink); }
.btn-white:hover { color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease), color .2s; padding-bottom: 2px; }
.link:hover { background-size: 100% 2px; }
.dark .link { color: #fff; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header.menu-open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
.site-header.on-dark:not(.scrolled):not(.menu-open) { background: rgba(18, 18, 18, .6); }
.site-header.on-dark:not(.scrolled):not(.menu-open) .nav-link,
.site-header.on-dark:not(.scrolled):not(.menu-open) .call { color: #fff; }
.site-header.on-dark:not(.scrolled):not(.menu-open) .call small { color: #9a9a9a; }
.site-header.on-dark:not(.scrolled):not(.menu-open) .logo img { filter: none; }
.bar { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo img { height: 50px; width: auto; }
.logo .on-dark-logo { display: none; }
.site-header.on-dark:not(.scrolled):not(.menu-open) .logo .on-light-logo { display: none; }
.site-header.on-dark:not(.scrolled):not(.menu-open) .logo .on-dark-logo { display: block; }

.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: 700 16px "Manrope", sans-serif; color: var(--ink); text-decoration: none; border-radius: 10px;
  transition: color .2s;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--red); }
.nav-link .chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(225deg) translate(-2px, -1px); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  width: min(880px, 92vw); padding: 28px; border-radius: var(--r-m);
  background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.mega.ind { grid-template-columns: repeat(3, 1fr); width: min(760px, 92vw); }
.nav-item.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega h4 { font-size: 14px; color: var(--graphite); font-weight: 700; margin-bottom: 10px; }
.mega ul { list-style: none; display: grid; gap: 2px; }
.mega a { display: block; padding: 9px 12px; margin-inline: -12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; line-height: 1.3; transition: background .2s; }
.mega a small { display: block; font-weight: 500; color: var(--graphite); font-size: 14px; margin-top: 2px; }
.mega a:hover { background: var(--mist); }
.mega a:hover span { color: var(--red); }
.mega .all { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; }

.call { text-decoration: none; color: var(--ink); font-weight: 800; white-space: nowrap; line-height: 1.2; }
.call small { display: block; font-size: 12px; font-weight: 600; color: var(--graphite); }
.bar .btn { min-height: 48px; padding: 0 22px 0 32px; font-size: 15px; }

.burger { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) { .call { display: none; } }
@media (max-width: 1020px) {
  .nav, .bar > .btn { display: none; }
  .burger { display: block; }
  .site-header.menu-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 59;
    background: #fff; padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  }
  .site-header.menu-open .nav-link { font-size: 22px; padding: 16px 0; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-header.menu-open .mega { position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 8px 0 16px; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible; }
  .site-header.menu-open .nav-item.open .mega { display: grid; transform: none; }
  .site-header.menu-open .nav .btn { display: inline-flex; margin-top: 24px; }
  .site-header.menu-open .mobile-call { display: block; }
}
.mobile-call { display: none; margin-top: 18px; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 18px; }
.nav .btn { display: none; }

/* ---------------- home hero ---------------- */
.hero-home {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + env(safe-area-inset-top, 0px)));
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 112px);
  background: var(--night); color: var(--on-dark);
}
.hero-home::before {
  content: ""; position: absolute; z-index: -1; width: 70vw; height: 70vw; right: -18vw; top: -10vw;
  background: radial-gradient(closest-side, rgba(255, 56, 56, .28), rgba(255, 56, 56, .08) 55%, transparent 72%);
}
.hero-home::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero-home .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-home h1 { color: #fff; margin-bottom: 28px; font-size: clamp(44px, 5.3vw, 84px); text-wrap: pretty; }
.hero-home .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px #474747; }
.hero-home .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.hero-home .lede { margin-bottom: 36px; }
.hero-home .proof-line { margin-top: 36px; font-size: 15px; color: #8d8d8d; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-home .proof-line span { display: inline-flex; align-items: center; gap: 8px; }
.hero-home .proof-line span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (max-width: 980px) { .hero-home .wrap { grid-template-columns: 1fr; } }

/* the forge illustration */
.forge { position: relative; }
.forge svg { width: 100%; height: auto; overflow: visible; }
.node rect { fill: #1f1f1f; stroke: #353535; }
.node text { fill: #ececec; font-family: "Manrope", sans-serif; font-weight: 700; }
.wire { fill: none; stroke: #3b2626; stroke-width: 1.5; }
.wire.out { stroke: #6b2a2a; stroke-width: 2; }
.core-ring { fill: none; stroke: var(--red); stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 4 7; transform-box: fill-box; transform-origin: center; }
.core-label { fill: #fff; font-family: "Manrope", sans-serif; font-weight: 800; }
.core-sub { fill: #ffc2c2; font: 600 11px "Manrope", sans-serif; }
.lead-card rect { fill: #fff; }
.lead-card .t1 { fill: var(--ink); font: 800 13px "Manrope", sans-serif; }
.lead-card .t2 { fill: #6a6a6a; font: 600 11px "Manrope", sans-serif; }
.lead-card circle { fill: var(--red); }
.forge-note { margin-top: 10px; font-size: 13px; color: #7c7c7c; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .core-ring { animation: spin 18s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .1s; }
  .hero-copy > *:nth-child(3) { animation-delay: .2s; }
  .hero-copy > *:nth-child(4) { animation-delay: .3s; }
  .hero-copy > *:nth-child(5) { animation-delay: .4s; }
  .forge { animation: rise 1.1s var(--ease) .25s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* ---------------- statement: find, trust, reach ---------------- */
.statement h2 { font-size: clamp(34px, 4.6vw, 68px); max-width: 18ch; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); counter-reset: t; }
.trio li { list-style: none; counter-increment: t; border-top: 2px solid var(--ink); padding-top: 22px; }
.trio h3 { margin-bottom: 10px; }
.trio h3::before { content: counter(t) ". "; color: var(--red); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; } }

/* ---------------- services index ---------------- */
.svc-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.svc-group { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.svc-group.hot { background: var(--night); border-color: var(--night); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; }
.svc-group.hot::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -200px; bottom: -220px; background: radial-gradient(closest-side, rgba(255, 56, 56, .35), transparent); }
.svc-group.hot h3, .svc-group.hot a { color: #fff; }
.svc-group > p { font-size: 15px; margin: 8px 0 22px; }
.svc-group ul { list-style: none; display: grid; }
.svc-group li + li { border-top: 1px solid rgba(127, 127, 127, .22); }
.svc-group li a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 0; text-decoration: none; color: var(--ink); }
.svc-group li a b { font-size: 19px; letter-spacing: -0.02em; transition: color .2s; }
.svc-group li a small { grid-column: 1; font-size: 15px; color: var(--graphite); }
.svc-group.hot li a small { color: #9d9d9d; }
.svc-group li a i { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; transition: background .25s, transform .3s var(--ease); }
.svc-group.hot li a i { background: #262626; }
.svc-group li a i::before { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, 1px); }
.svc-group.hot li a i::before { border-color: #fff; }
.svc-group li a:hover b { color: var(--red); }
.svc-group li a:hover i { background: var(--red); transform: translateX(3px); }
.svc-group li a:hover i::before { border-color: #fff; }
@media (max-width: 980px) { .svc-groups { grid-template-columns: 1fr; } }

/* ---------------- process (real sequence) ---------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-top: 96px; }
.steps li::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  font-size: 88px; line-height: 1; font-weight: 800; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--red);
}
.steps li::after { content: ""; position: absolute; top: 44px; left: 72px; right: -18px; height: 1.5px; background: linear-gradient(90deg, rgba(255, 56, 56, .6), rgba(255, 56, 56, 0)); }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: 10px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; } .steps li::after { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------------- industries list ---------------- */
.ind-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid #2d2d2d; }
.ind-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid #2d2d2d; text-decoration: none;
  color: #f2f2f2; font-weight: 800; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -0.03em; line-height: 1.1;
  transition: color .25s, padding-left .35s var(--ease);
}
.ind-list a span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: #8a8a8a; text-align: right; }
.ind-list a:hover { color: var(--red); padding-left: 10px; }
.mist .ind-list, .paper .ind-list { border-top-color: var(--line); }
.mist .ind-list a, .paper .ind-list a { color: var(--ink); border-bottom-color: var(--line); }
.peek { position: fixed; left: 0; top: 0; width: 200px; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; pointer-events: none; z-index: 40; opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .25s, transform .35s var(--ease); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
@media (max-width: 760px) { .ind-list { grid-template-columns: 1fr; } .ind-list a span { display: none; } }
@media (hover: none) { .peek { display: none; } }

/* ---------------- results ---------------- */
.results { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.results li a { display: grid; grid-template-columns: 160px 200px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.results img { width: 160px; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--r-s); }
.results .tag { font-weight: 700; color: var(--graphite); }
.results h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; margin-bottom: 6px; transition: color .2s; }
.results li a:hover h3 { color: var(--red); }
.results .go { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.results .go::before { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, 1px); }
.results li a:hover .go { background: var(--red); border-color: var(--red); transform: translateX(4px); }
.results li a:hover .go::before { border-color: #fff; }
.results-note { font-size: 14px; margin-top: 18px; }
@media (max-width: 860px) {
  .results li a { grid-template-columns: 110px minmax(0, 1fr); }
  .results img { width: 110px; grid-row: span 2; }
  .results .go { display: none; }
  .results li a { align-items: start; }
}

/* ---------------- founder ---------------- */
.founder { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.portrait { position: relative; isolation: isolate; max-width: 460px; }
.portrait img { border-radius: var(--r-l); width: 100%; aspect-ratio: 502 / 640; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 3px solid var(--red); border-radius: var(--r-l); z-index: -1; }
blockquote { margin: 0 0 28px; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); font-weight: 700; text-wrap: balance; }
.who { color: var(--ink); font-weight: 800; margin-bottom: 30px; }
.who span { display: block; color: var(--graphite); font-weight: 500; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .portrait { max-width: 380px; width: calc(100% - 22px); } }

/* ---------------- FAQ ---------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; color: var(--ink); font-weight: 800; font-size: 19px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { padding: 0 44px 26px 0; }
.dark .faq details, .dark .faq details:first-of-type { border-color: #2d2d2d; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------------- red CTA band ---------------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--red); color: #fff; }
.cta-band::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -60% auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent); }
.cta-band::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: end; padding-block: clamp(64px, 8vw, 112px); }
.cta-band h2 { color: #fff; font-size: clamp(36px, 4.8vw, 72px); }
.cta-band p { color: #ffe3e3; margin-top: 18px; max-width: 46ch; font-size: 18px; }
.cta-band .btn-row { justify-content: flex-end; }
.cta-band .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.cta-band .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } }

/* ---------------- inner page hero ---------------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); background: var(--mist); }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -22vw; top: -26vw; background: radial-gradient(closest-side, rgba(255, 56, 56, .2), rgba(255, 56, 56, 0)); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero.no-media .wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { margin-bottom: 24px; }
.page-hero .lede { margin-bottom: 32px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 14px; font-weight: 600; margin-bottom: clamp(28px, 4vw, 48px); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #b0b0b0; }
.crumbs a { text-decoration: none; color: var(--graphite); }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--ink); }
.framed { position: relative; isolation: isolate; justify-self: end; width: min(100%, 420px); }
.framed img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--shadow); }
.framed::after { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 3px solid var(--red); border-radius: var(--r-l); z-index: -1; }
@media (max-width: 860px) { .page-hero .wrap { grid-template-columns: 1fr; } .framed { justify-self: start; width: min(100%, 360px); margin-right: 20px; } }

/* ---------------- included list (service/industry) ---------------- */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split .sticky { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .sticky { position: static; } }
.items { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.items li { padding: 26px 0; border-top: 1px solid var(--line); }
.items li h3 { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; font-size: 20px; }
.items li h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--red); transform: translateY(-2px); }
.dark .items li { border-top-color: #2d2d2d; }
@media (max-width: 640px) { .items { grid-template-columns: 1fr; } }

.cols3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.cols3 li { border-top: 3px solid var(--red); padding-top: 22px; }
.cols3 h3 { margin-bottom: 10px; }
@media (max-width: 820px) { .cols3 { grid-template-columns: 1fr; } }

.checks { list-style: none; display: grid; gap: 14px; margin: 24px 0 32px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1.4; }
.checks li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.dark .checks li { color: #fff; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li, .chips a { padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; transition: border-color .2s, color .2s; }
.chips a:hover { border-color: var(--red); color: var(--red); }
.chips li:has(> a) { padding: 0; border: 0; background: none; }
.chips a { display: inline-block; }
.dark .chips li { background: var(--coal); border-color: #2f2f2f; color: #fff; }

.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } }

.related { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); text-decoration: none; height: 100%; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.related a b { color: var(--ink); font-size: 20px; letter-spacing: -0.02em; }
.related a small { font-size: 15px; }
.related a:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--shadow); }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* hub cards (services/industries hubs) */
.cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.card a { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r-m); overflow: hidden; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.card figure { margin: 0; aspect-ratio: 16 / 11; overflow: hidden; background: var(--mist); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card .in { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.card b { color: var(--ink); font-size: 21px; letter-spacing: -0.02em; }
.card small { font-size: 15px; }
.card a:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(255, 56, 56, .5); }
.card a:hover img { transform: scale(1.05); }
.group-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: clamp(56px, 7vw, 96px) 0 28px; }
.group-title:first-child { margin-top: 0; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* ---------------- contact ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.details { display: grid; gap: 22px; margin: 0; }
.details dt { font-size: 14px; color: var(--graphite); font-weight: 600; }
.details dd { margin: 2px 0 0; color: var(--ink); font-weight: 800; font-size: 18px; }
.details dd a { text-decoration: none; }
.details dd a:hover { color: var(--red); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--night); padding: clamp(22px, 3vw, 40px); border-radius: var(--r-l); color: var(--on-dark); }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 700; color: #dedede; }
.field input, .field select, .field textarea {
  width: 100%; font: 500 16px "Manrope", sans-serif; color: #fff;
  background: #191919; border: 1.5px solid #343434; border-radius: var(--r-s);
  padding: 14px 16px; min-height: 54px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #bbb 50%), linear-gradient(135deg, #bbb 50%, transparent 50%); background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.field input::placeholder, .field textarea::placeholder { color: #6e6e6e; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #4b4b4b; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 56, 56, .2); }
.field [aria-invalid="true"] { border-color: var(--red); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 4px; }
.form-foot p { font-size: 14px; color: #8f8f8f; max-width: 42ch; }
.form-msg { grid-column: 1 / -1; font-size: 15px; color: #ffb3b3; min-height: 1.2em; }
.form-msg.ok { color: #b8f5c8; }
.next-steps { list-style: none; counter-reset: n; display: grid; gap: 18px; margin-top: 40px; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.next-steps li::before { content: counter(n); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; }
.next-steps b { display: block; color: var(--ink); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------------- about ---------------- */
.story { columns: 2; column-gap: 48px; }
.story p + p { margin-top: 18px; }
@media (max-width: 760px) { .story { columns: 1; } }

/* ---------------- footer ---------------- */
.site-footer { background: radial-gradient(ellipse 720px 460px at 100% 100%, rgba(255, 56, 56, .13), rgba(255, 56, 56, .05) 45%, rgba(255, 56, 56, 0) 72%) var(--night); color: #8d8d8d; font-size: 15px; padding: clamp(56px, 7vw, 88px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 32px; }
.foot img { height: 56px; width: auto; margin-bottom: 16px; }
.foot h2 { font-size: 15px; letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.foot ul { list-style: none; display: grid; gap: 9px; }
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--red); }
.foot address { font-style: normal; display: grid; gap: 10px; }
.foot .social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.foot .social a { padding: 8px 14px; border-radius: 999px; border: 1px solid #333; color: #d8d8d8; font-weight: 700; font-size: 14px; }
.foot .social a:hover { border-color: var(--red); color: #fff; }
.legal { grid-column: 1 / -1; border-top: 1px solid #262626; padding-top: 22px; margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
@media (max-width: 1020px) { .foot { grid-template-columns: 1fr 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:last-of-type { grid-column: 1 / -1; } }

/* floating WhatsApp */
.wa { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #008069; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); transition: transform .25s var(--ease); }
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* 404 */
.nf { min-height: 60vh; display: grid; align-content: center; }
.nf .big { font-size: clamp(120px, 22vw, 280px); line-height: .8; letter-spacing: -0.07em; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--red); margin-bottom: 24px; }

/* quiet reveal for section heads only */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* =================== homepage additions (v2: AI demo, world map, lead flow) =================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* services: three path links under the original groups */
.svc-paths { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 28px; }
.svc-paths span { font-weight: 700; color: var(--ink); margin-right: 6px; }
.svc-paths a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 800; text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.svc-paths a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); }
.svc-paths a:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 15, 15, .4); }
.ind-more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 32px; }

/* ---------- AI automation: tabs + live demo ---------- */
.ai-sec { position: relative; overflow: hidden; isolation: isolate; }
.ai-sec::before { content: ""; position: absolute; z-index: -1; width: 64vw; height: 64vw; right: -20vw; top: -18vw; background: radial-gradient(closest-side, rgba(255, 56, 56, .24), rgba(255, 56, 56, .06) 55%, transparent 72%); }
.ai-sec::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); }
@keyframes aibar { to { width: 100%; } }
.ai-related { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: #9d9d9d; }
.ai-related .link { font-size: 15px; }
.ai-foot { padding: 0 18px 16px; font-size: 13px; color: #8f8f8f; text-align: center; }

/* ---------- Markets: dotted world map ---------- */
.mk-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mk-side h2 { margin-bottom: 16px; }
.mk-side .lede { margin-bottom: 26px; }
.mk-map { margin: 0; position: relative; }
.mk-map svg { width: 100%; height: auto; overflow: visible; }
.mk-land { fill: none; stroke: #c9c9c6; stroke-width: 4.4; stroke-linecap: round; }
.mk-arc { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; transition: stroke-width .3s, opacity .3s; }
.mk-spark { fill: var(--red); filter: drop-shadow(0 0 4px rgba(255, 56, 56, .9)); }
.mk-dot { fill: var(--red); stroke: #fff; stroke-width: 2.5; }
.mk-pulse { fill: rgba(255, 56, 56, .25); transform-box: fill-box; transform-origin: center; }
.mk-pt text { font: 700 22px "Manrope", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--mist); stroke-width: 5px; stroke-linejoin: round; }
.mk-pt.home .mk-dot { fill: var(--ink); stroke: var(--red); stroke-width: 3.5; }
.mk-pt.home text { font-size: 23px; font-weight: 800; }
.mk-map.focus .mk-arc { opacity: .2; }
.mk-map.focus .mk-arc.hi { opacity: 1; stroke-width: 3.2; }
@media (prefers-reduced-motion: no-preference) {
  .js .mk-map .mk-arc { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease), stroke-width .3s, opacity .3s; }
  .js .mk-map.in .mk-arc { stroke-dashoffset: 0; }
  .js .mk-map.in .mk-arc:nth-of-type(2) { transition-delay: .2s; }
  .mk-pulse { animation: mkpulse 2.4s ease-out infinite; }
  @keyframes mkpulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
}
.mk-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .35s var(--ease), box-shadow .3s; cursor: default; }
.mk-list li:hover, .mk-list li.hi { border-color: rgba(255, 56, 56, .55); transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(15, 15, 15, .45); }
.mk-code { grid-row: span 2; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.3px var(--red); min-width: 44px; }
.mk-list b { color: var(--ink); font-size: 16px; line-height: 1.25; }
.mk-list small { font-size: 14px; color: var(--graphite); }
.mk-list li.home { grid-column: 1 / -1; background: var(--night); border-color: var(--night); }
.mk-list li.home b { color: #fff; }
.mk-list li.home small { color: #b9b9b9; }
.mk-list li.home .mk-code { color: var(--red); -webkit-text-stroke: 0; }
@media (max-width: 960px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } .mk-map { order: -1; } .mk-side { display: contents; } .mk-side > .reveal { order: -2; } }
@media (max-width: 700px) { .mk-pt text { display: none; } .mk-land { stroke-width: 5.5; } }
@media (max-width: 480px) { .mk-list { grid-template-columns: 1fr; } }

/* ---------- Measurement: the loop ---------- */
.meas2 .wrap { border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 96px); }
.meas2 { padding-top: 0; }
.l-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.l-fig { margin: 0; max-width: 640px; justify-self: center; width: 100%; }
.l-svg { width: 100%; height: auto; overflow: visible; }
.l-ring { fill: none; stroke: #efefef; stroke-width: 26; }
.l-arc { fill: none; stroke: #d2d2d2; stroke-width: 4; stroke-linecap: round; transition: stroke .4s, stroke-width .4s; }
.l-head { fill: none; stroke: #d2d2d2; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.l-arc.on { stroke: var(--red); stroke-width: 7; }
.l-head.on { stroke: var(--red); }
.l-spark { fill: var(--ink); }
.l-mid { font: 800 38px "Manrope", sans-serif; letter-spacing: -0.04em; fill: var(--ink); }
.l-lab { font: 800 22px "Manrope", sans-serif; fill: #9a9a9a; transition: fill .4s; }
.l-lab .l-num { fill: var(--red); font-size: 16px; }
.l-lab .l-sub { font-size: 16px; font-weight: 600; fill: #9a9a9a; }
.l-lab.on { fill: var(--ink); }
.l-copy h2 { margin-bottom: 18px; }
.l-steps { list-style: none; counter-reset: ls; margin-top: 28px; border-top: 1px solid var(--line); }
.l-steps li { counter-increment: ls; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: default; outline-offset: 4px; }
.l-steps li::before { content: counter(ls, decimal-leading-zero); grid-row: span 2; font-weight: 800; color: #b5b5b5; transition: color .3s; padding-top: 1px; }
.l-steps b { color: var(--ink); font-size: 18px; }
.l-steps span { font-size: 16px; }
.l-steps li.on::before { color: var(--red); }
.l-note { margin-top: 18px; font-size: 14px; color: var(--graphite); max-width: 60ch; }
@media (max-width: 960px) { .l-grid { grid-template-columns: minmax(0, 1fr); } .l-fig { max-width: 420px; order: 2; } }
@media (max-width: 600px) { .l-lab { display: none; } .l-fig { max-width: 280px; } .l-mid { font-size: 44px; } }
@media (prefers-reduced-motion: reduce) { .l-spark { display: none; } }

/* =================== final copy pass: small polish =================== */
/* hero introduction: readable light text on the dark hero */
.hero-home .lede { color: #d4d4d4; }
.hero-home .proof-line { color: #b5b5b5; }
/* services menu group titles are labels, not headings */
.mega .mega-h { font-size: 14px; color: var(--graphite); font-weight: 700; margin: 0 0 10px; }
.mega .all { display: flex; flex-wrap: wrap; gap: 6px 24px; }
/* founder statement: same scale as the previous quotation, but not presented as a quote */
.founder-line { margin: 0 0 28px; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); font-weight: 700; text-wrap: balance; }
/* focus rings stay visible on red surfaces */
.cta-band :focus-visible, .btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ink); }
.mk-list li:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.mk-list li { cursor: pointer; }
@media (max-width: 600px) { .ai-foot, .forge-note { font-size: 14px; } }
.hero-home h1 { text-wrap: balance; }
/* services: six identical rows per column, aligned across columns */
.svc-group ul { flex: 1; grid-template-rows: repeat(6, 1fr); }
.svc-group li { display: flex; }
.svc-group li a { flex: 1; align-content: center; }
@media (min-width: 981px) and (max-width: 1360px) { .svc-group > p { min-height: 4.95em; } }
#mega-svc ul { grid-template-rows: repeat(6, 1fr); }
#mega-svc li { display: flex; }
#mega-svc li a { flex: 1; }
#mega-svc > div:not(.all) { display: flex; flex-direction: column; }
#mega-svc ul { flex: 1; }

/* ---------- Leadsforge Tech in the news: heading row, logos + article carousel ---------- */
.news3 { padding-bottom: clamp(40px, 5vw, 64px); }
.n3-head { margin-bottom: clamp(24px, 3vw, 40px); }
.n3-head h2 { font-size: clamp(30px, 3.4vw, 48px); }
.n3-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.n3-logos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.n3-logo { height: 76px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 12px 18px; transition: border-color .25s; }
.n3-logo:hover { border-color: #cfcfcf; }
.n3-logo img { height: var(--h, 30px); width: auto; max-width: 100%; object-fit: contain; }
.n3-logo:last-child:nth-child(odd) { grid-column: 1 / -1; }

.n3-car { position: relative; padding-inline: 18px; min-width: 0; }
.n3-viewport { overflow: hidden; border-radius: var(--r-m); touch-action: pan-y; }
.n3-track { list-style: none; display: flex; transition: transform .7s var(--ease); }
.n3-slide { flex: 0 0 100%; min-width: 0; }
.n3-frame { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.n3-mast { display: block; width: 100%; height: auto; flex: none; border-bottom: 1px solid var(--line); }
.n3-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 22px; padding: 22px 30px 0; }
.n3-text { min-width: 0; }
.n3-kicker { font-size: 11px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .07em; }
.n3-text h3 { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.015em; margin: 6px 0 10px; color: var(--ink); }
.n3-text p { font-size: 14px; line-height: 1.55; color: #555; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.n3-pic { min-height: 0; border-radius: 12px; overflow: hidden; align-self: stretch; }
.n3-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n3-car.single .n3-pic img { animation: n3pan 18s ease-in-out infinite alternate; }
.n3-car.is-paused .n3-pic img { animation-play-state: paused; }
@keyframes n3pan { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, -2%); } }
.n3-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; padding: 10px 64px 12px 30px; font-size: 14px; color: var(--graphite); }
.n3-tag { font-size: 11px; font-weight: 800; color: #b31717; background: #fdeeee; padding: 3px 9px; border-radius: 999px; }
.n3-tag.ph { color: #6b4d00; background: #fff3d1; }
.n3-meta { color: var(--ink); font-weight: 700; }
.n3-link { font-size: 14px; }

/* controls: arrows straddle the frame edges, pause sits inside the frame's bottom-right corner */
.n3-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: border-color .2s, opacity .2s; }
.n3-prev { left: 0; } .n3-next { right: 0; }
.n3-arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.n3-arrow:hover { border-color: var(--red); }
.n3-pause { position: absolute; right: 30px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.n3-pause svg { width: 13px; height: 13px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.n3-pause .i-play { display: none; fill: var(--ink); stroke: none; }
.n3-pause[aria-pressed="true"] .i-pause { display: none; }
.n3-pause[aria-pressed="true"] .i-play { display: block; }
.n3-arrow:focus-visible, .n3-pause:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.n3-car.single .n3-arrow { display: none; }

@media (max-width: 960px) {
  .n3-grid { grid-template-columns: minmax(0, 1fr); }
  .n3-logos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .n3-logo:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 600px) {
  .n3-car { padding-inline: 0; }
  .n3-frame { aspect-ratio: 4 / 5; }
  .n3-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 16px 20px 0; gap: 12px; }
  .n3-pic { order: -1; height: 120px; flex: none; align-self: auto; }
  .n3-text h3 { font-size: 18px; }
  .n3-text p { -webkit-line-clamp: 3; }
  .n3-foot { padding: 8px 56px 12px 20px; }
  .n3-pause { right: 20px; }
  .n3-arrow { top: auto; bottom: -54px; transform: none; width: 40px; height: 40px; }
  .n3-prev { left: calc(50% - 46px); } .n3-next { right: calc(50% - 46px); }
  .n3-car:not(.single) { margin-bottom: 56px; }
  .n3-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .n3-logo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .n3-logo { height: 64px; padding: 10px 12px; }
  .n3-logo img { height: calc(var(--h, 30px) * .82); }
}
@media (prefers-reduced-motion: reduce) { .n3-track { transition: none; } .n3-car .n3-pic img { animation: none !important; } }

/* =================== background + spacing refinement: markets, practical examples, measurement =================== */
/* shared heading row: heading left, introduction right */
.mk-head, .ex-head, .ms-head { margin-bottom: clamp(24px, 3vw, 40px); }
.mk-head h2, .ex-head h2, .ms-head h2 { font-size: clamp(30px, 3.4vw, 48px); }

/* Markets: white, tiles left, cropped map right */
.markets { background: #fff; }
.markets .mk-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.markets .mk-map { margin: 0; }
.markets .mk-pt text { stroke: #fff; }

/* Practical examples: light grey, rows close to the heading, no oversized bottom space */
.examples .results { border-top-color: #e2e2df; }
.examples .results li a { padding: 20px 0; border-bottom-color: #e2e2df; }
.examples .results li:last-child a { border-bottom: 0; }

/* Measurement: white, heading row, larger circle beside the explanations */
.meas2 { padding-top: clamp(56px, 7vw, 96px); }
.meas2 .wrap { border-top: 0; padding-top: 0; }
.meas2 .l-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); }
.meas2 .l-fig { max-width: 600px; justify-self: stretch; }
.meas2 .l-steps { margin-top: 0; }

@media (max-width: 960px) {
  .markets .mk-grid, .meas2 .l-grid { grid-template-columns: minmax(0, 1fr); }
  .markets .mk-map { order: -1; }
  .meas2 .l-fig { order: -1; max-width: 420px; justify-self: center; }
}
@media (max-width: 600px) {
  .mk-head, .ex-head, .ms-head { margin-bottom: 20px; }
  .markets .mk-grid, .meas2 .l-grid { gap: 20px; }
  .meas2 .l-fig { max-width: 300px; }
  .examples .results li a { padding: 16px 0; }
}
/* consistent spacing for the three refined sections; slightly larger measurement circle */
.markets, .examples, .meas2 { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(52px, 5.5vw, 80px); }
.meas2 .l-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.meas2 .l-fig { max-width: 680px; }
@media (max-width: 960px) { .meas2 .l-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .markets, .examples, .meas2 { padding-top: 48px; padding-bottom: 44px; } }
@media (max-width: 860px) { .mk-head, .ex-head, .ms-head { gap: 14px; } }

/* FAQ: supporting image beneath the heading */
.faq-pic { margin: clamp(24px, 3vw, 36px) 0 0; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; background: #e9e9e7; }
.faq-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 38%; display: block; }
@media (max-width: 860px) {
  .faq-pic { aspect-ratio: 16 / 7; max-height: 170px; margin-top: 18px; }
  .faq-pic img { object-position: 45% 30%; }
}

/* =================== WhatsApp CTA buttons =================== */
.btn-wa { background: #008069; color: #fff; padding: 0 28px 0 38px; box-shadow: 0 16px 30px -16px rgba(18, 140, 126, .75); }
.btn-wa::before { background: #075E54; }
.btn-wa:hover, .btn-wa:focus-visible { color: #fff; box-shadow: 0 22px 36px -18px rgba(18, 140, 126, .85); }
.btn-wa .wa-ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.bar .btn-wa { padding: 0 20px 0 30px; }
.bar .btn-wa .wa-ico { width: 18px; height: 18px; }
.cta-band .btn-wa { box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .45); }
.founder .btn-row { margin-top: 0; }
@media (max-width: 1320px) { .bar .call { display: none; } }
@media (max-width: 1020px) {
  .bar > .btn-wa { display: none; }
  .site-header.menu-open .nav .btn-wa { display: inline-flex; margin-top: 10px; }
}
@media (max-width: 520px) {
  .btn-row:has(> .btn-wa) > .btn { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 861px) {
  .cta-band .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .cta-band .btn-row { flex-wrap: nowrap; }
}

/* =================== Homepage hero refinement =================== */
.hero-home .wrap { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(28px, 4vw, 64px); }
.hero-home h1 { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.02; text-wrap: balance; margin-bottom: 24px; }
.hero-home .lede { max-width: 54ch; margin-bottom: 32px; }
.hero-home .btn-row { gap: 12px; }
.hero-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: #d9d9d9; font-weight: 700; font-size: 16px; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.hero-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.hero-call:hover { color: #fff; border-bottom-color: var(--red); }
.hero-home .proof-line { margin-top: 26px; }

/* illustration */
.forge svg { width: 100%; height: auto; overflow: visible; display: block; }
.h-wire { fill: none; stroke: #3a2a2a; stroke-width: 1.6; }
.h-wire.out { stroke: #4a2b2b; stroke-width: 2; }
.h-sig { fill: none; stroke: #ff4d4d; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 1; opacity: 0; }
.h-sig.go { animation: hsig 1.2s cubic-bezier(.45, 0, .25, 1) forwards; }
.h-sig.out.go { animation-duration: .6s; }
@keyframes hsig { 0% { stroke-dasharray: .14 1; stroke-dashoffset: .14; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dasharray: .14 1; stroke-dashoffset: -.86; opacity: 0; } }
.h-node rect { fill: #1b1b1b; stroke: #343434; stroke-width: 1.2; transition: fill .45s, stroke .45s; }
.h-node circle { fill: #4a4a4a; transition: fill .45s; }
.h-node text { fill: #e9e9e9; font: 700 15px "Manrope", sans-serif; }
.is-mobile .h-node text { font-size: 13px; }
.is-mobile .h-node circle { display: none; }
.h-node.on rect { fill: #2a1717; stroke: #ff3838; }
.h-node.on circle { fill: #ff3838; }
.h-halo { opacity: .75; transform-box: fill-box; transform-origin: center; }
.h-ring { fill: none; stroke: #ff3838; stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 3 8; transform-box: fill-box; transform-origin: center; }
.h-pulse { fill: none; stroke: #ff3838; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.h-disc { fill: #fff; stroke: rgba(255, 56, 56, .35); stroke-width: 3; }
.h-core.pulse .h-pulse { animation: hpulse 1s cubic-bezier(.22, .61, .36, 1); }
.h-core.pulse .h-halo { animation: hhalo 1s ease-out; }
@keyframes hpulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
@keyframes hhalo { 0% { opacity: .75; } 35% { opacity: 1; } 100% { opacity: .75; } }
.h-card { transition: transform .85s cubic-bezier(.22, .61, .36, 1), opacity .85s ease; }
.h-card .c-bg { fill: #fff; }
.h-card .c-ic { fill: #ff3838; }
.h-card .c-glyph { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.h-card .c-t { fill: #0f0f0f; font-family: "Manrope", sans-serif; font-weight: 800; }
.h-card .c-s { fill: #5f5f5f; font-family: "Manrope", sans-serif; font-weight: 600; }
.h-card.is-mid .c-bg { stroke: rgba(255, 56, 56, .55); stroke-width: 1.5; }
.forge-note { margin-top: 12px; font-size: 13px; color: #8d8d8d; text-align: right; }
@media (prefers-reduced-motion: no-preference) { .h-ring { animation: spin 40s linear infinite; } }
@media (max-width: 980px) {
  .hero-home .wrap { grid-template-columns: minmax(0, 1fr); }
  .forge { max-width: 640px; }
  .forge-note { text-align: left; }
}
@media (max-width: 600px) {
  .hero-home h1 { font-size: clamp(36px, 10vw, 44px); margin-bottom: 18px; }
  .hero-home .lede { margin-bottom: 24px; }
  .hero-home .proof-line { margin-top: 20px; gap: 8px 18px; }
  .forge { margin-top: 8px; }
}

/* WhatsApp buttons: solid green, no side strip; hover darker green */
.btn-wa { padding: 0 30px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.btn-wa::before { display: none; }
.btn-wa:hover, .btn-wa:focus-visible { background: #075E54; color: #fff; }
.bar .btn-wa { padding: 0 22px; }
.h-node text { font-size: 16px; }
.is-mobile .h-node text { font-size: 13px; }
@media (max-width: 1100px) {
  .hero-home .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-home .forge { max-width: 680px; }
  .hero-home .forge-note { text-align: left; }
}
.hero-home h1 { max-width: 15ch; }

/* hero graphic: larger, raised, tight bounds */
@media (min-width: 1101px) {
  .hero-home .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
  .hero-home .forge { align-self: start; margin-top: clamp(40px, 5.5vw, 84px); margin-right: -12px; }
}
.hero-home .forge { overflow: visible; }
.is-mobile .h-node text { font-size: 12.5px; }
.is-mobile .h-node text { font-size: 12px; letter-spacing: -0.005em; }
@media (max-width: 340px) { .is-mobile .h-node text { font-size: 11px; } }

/* hero: final spacing and readability */
.hero-home { padding-top: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)); }
.hero-home .slash { color: #d9d9d9; }
.h-card:not(.is-mid) .c-s { fill: #4f4f4f; }
/* Homepage hero, two-column layout: the top of the visible artwork (its first channel node) lines up with the top of the
   H1 lettering. The text column starts with the eyebrow (16px at line-height 1.65 = 26.4px, plus a 20px margin); the H1
   capitals then begin about 0.15 of the H1 size below its line box (font size: the H1's own clamp, 42px / 4.6vw / 72px).
   The artwork itself begins 0.45% of the graphic's width below its box (percentage margins resolve against that width).
   Only the graphic moves; the H1, the text column and the stacked layout below 1101px are unchanged. */
@media (min-width: 1101px) { .hero-home .forge { margin-top: calc(26.4px + 20px + 0.15 * clamp(42px, 4.6vw, 72px) - 0.45%); } }
.h-card { transition-property: transform, opacity; transition-duration: .85s, .85s; transition-timing-function: cubic-bezier(.22, .61, .36, 1), ease; }

/* header: phone + WhatsApp only */
.bar .call small { color: #8a8a8a; }
@media (max-width: 1320px) { .bar .call { display: block; } }
@media (max-width: 1180px) { .bar .call { display: none; } }
.bar { gap: clamp(16px, 2vw, 28px); }
.mobile-call small { display: block; font-size: 13px; font-weight: 600; color: var(--graphite); }
.site-header.menu-open .nav .btn-wa { margin-top: 24px; }

/* hero: buttons only, no trailing space */
.hero-home .btn-row + .proof-line { margin-top: 28px; }

/* industries: hub link in the last cell */
.ind-list .ind-all a { color: var(--red); font-size: clamp(17px, 1.5vw, 19px); letter-spacing: 0; align-items: center; justify-content: flex-start; gap: 10px; }
.ind-list .ind-all a span { display: inline-block; color: var(--red); font-size: inherit; font-weight: 800; transition: transform .3s var(--ease); }
.ind-list .ind-all a:hover { color: #ff6b6b; padding-left: 0; }
.ind-list .ind-all a:hover span { transform: translateX(5px); }
.ind-list .ind-all a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* header logo: trimmed artwork, about 22% larger visible mark */
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 55px; width: auto; }
.bar { gap: clamp(14px, 1.8vw, 26px); }
/* phones use the same 55px mark; the 80px header has room */

/* =================== Find, choose, get in touch: three connected steps =================== */
.steps3 { padding-block: clamp(56px, 6.5vw, 96px); background: #fff; }
.steps3 .st-head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.steps3 h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 22ch; }
.st-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); position: relative; }
.st { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; }
.st-art { margin: 0 0 22px; border-radius: var(--r-m); background: var(--mist); aspect-ratio: 5 / 3; display: grid; place-items: center; overflow: hidden; }
.st-art svg { width: 78%; height: auto; }
/* connected markers: a thin line runs through all three numbers */
.st-marker { position: relative; display: flex; align-items: center; height: 26px; margin-bottom: 14px; }
.st-marker::before { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(20px, 3vw, 44px)); top: 50%; height: 1.5px; background: linear-gradient(90deg, rgba(255, 56, 56, .55), rgba(255, 56, 56, .15)); }
.st:last-child .st-marker::before { right: 0; background: linear-gradient(90deg, rgba(255, 56, 56, .55), rgba(255, 56, 56, 0)); }
.st-marker b { position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--red); color: var(--red); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.st h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -0.02em; margin-bottom: 8px; }
.st p { font-size: 16px; line-height: 1.6; max-width: 34ch; }
/* illustration palette */
.st-art .v-panel { fill: #fff; }
.st-art .v-panel.hl { fill: #fff; stroke: rgba(255, 56, 56, .55); stroke-width: 1.5; }
.st-art .v-ink { fill: none; stroke: #0f0f0f; stroke-width: 2.4; stroke-linecap: round; }
.st-art .v-line { fill: #d9d9d6; }
.st-art .v-line.strong { fill: #3a3a3a; }
.st-art .v-line.soft { fill: #e6e6e3; }
.st-art .v-soft { fill: #e3e3e0; }
.st-art .v-red-fill { fill: var(--red); }
.st-art .v-white { fill: #fff; }
.st-art .v-white-line { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.st-art .v-stars path { fill: var(--red); }
.st-art .v-dot { fill: #bdbdbd; }
/* restrained reveal: steps arrive one after another */
@media (prefers-reduced-motion: no-preference) {
  .js .st.reveal:nth-child(2) { transition-delay: .12s; }
  .js .st.reveal:nth-child(3) { transition-delay: .24s; }
  .js .st.reveal .st-art svg { transform: translateY(6px); transition: transform .9s var(--ease) .15s; }
  .js .st.reveal.in .st-art svg { transform: none; }
  .st-art .v-dot { animation: stdot 1.6s ease-in-out infinite; }
  .st-art .v-dot:nth-of-type(2) { animation-delay: .2s; } .st-art .v-dot:nth-of-type(3) { animation-delay: .4s; }
  @keyframes stdot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
}
@media (max-width: 860px) {
  .st-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; }
  .st-art { grid-row: 1 / 4; margin: 0; aspect-ratio: 1; align-self: start; }
  .st-art svg { width: 92%; }
  .st-marker { margin-bottom: 8px; }
  .st-marker::before { display: none; }
  .st h3 { font-size: 20px; }
}
.st-art { aspect-ratio: 2 / 1; }
.st-art svg { width: auto; height: 84%; }
@media (max-width: 860px) { .st-art { aspect-ratio: 1; } .st-art svg { width: 92%; height: auto; } }
@media (max-width: 860px) {
  .st { grid-template-columns: 124px minmax(0, 1fr); }
  .st-art { aspect-ratio: 4 / 3; border-radius: 14px; }
  .st-art svg { width: 100%; height: auto; }
}

/* =================== Services section polish =================== */
.svc-polish { padding-block: clamp(64px, 7.5vw, 112px); }
.svc-polish .head { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(28px, 3.5vw, 44px); }
.svc-polish .head .lede { justify-self: start; max-width: 48ch; margin-bottom: 4px; }
/* identical cards; titles, intros, rows and dividers line up across columns */
.svc-polish .svc-groups { gap: clamp(16px, 2vw, 28px); grid-template-rows: auto auto 1fr; }
.svc-polish .svc-group { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 30px 30px 18px; }
.svc-polish .svc-group > h3 { font-size: 22px; letter-spacing: -0.02em; }
.svc-polish .svc-group > p { margin: 8px 0 18px; min-height: 0; font-size: 15px; line-height: 1.55; }
.svc-polish .svc-group.hot > p { color: #c9c9c9; }
.svc-polish .svc-group ul { display: grid; grid-template-rows: repeat(6, 1fr); }
.svc-polish .svc-group li { display: flex; }
.svc-polish .svc-group li + li { border-top: 1px solid #ebebe8; }
.svc-polish .svc-group.hot li + li { border-top-color: rgba(255, 255, 255, .1); }
.svc-polish .svc-group li a { flex: 1; align-content: center; padding: 15px 0; border-radius: 10px; outline-offset: 2px; }
.svc-polish .svc-group li a small { font-size: 14.5px; line-height: 1.45; }
.svc-polish .svc-group.hot li a small { color: #bdbdbd; }
/* one arrow treatment: small circle, subtle on white cards, brighter on the dark card */
.svc-polish .svc-group li a i { width: 32px; height: 32px; background: #f1f1ee; transform: none; transition: background .25s, transform .3s var(--ease); }
.svc-polish .svc-group li a i::before { width: 7px; height: 7px; border-color: #3a3a3a; transition: border-color .25s; }
.svc-polish .svc-group.hot li a i { background: #333; }
.svc-polish .svc-group.hot li a i::before { border-color: #fff; }
/* restrained hover and keyboard focus for the whole row */
.svc-polish .svc-group li a:hover b, .svc-polish .svc-group li a:focus-visible b { color: var(--red); }
.svc-polish .svc-group li a:hover i, .svc-polish .svc-group li a:focus-visible i { background: #fdeaea; transform: translateX(3px); }
.svc-polish .svc-group.hot li a:hover i, .svc-polish .svc-group.hot li a:focus-visible i { background: rgba(255, 56, 56, .22); }
.svc-polish .svc-group li a:hover i::before, .svc-polish .svc-group li a:focus-visible i::before { border-color: var(--red); }
.svc-polish .svc-group.hot li a:hover i::before, .svc-polish .svc-group.hot li a:focus-visible i::before { border-color: #ff6b6b; }
.svc-polish .svc-group li a:focus-visible { outline: 2px solid var(--red); box-shadow: none; }
@media (max-width: 980px) {
  .svc-polish .svc-groups { grid-template-rows: none; gap: 16px; }
  .svc-polish .svc-group { grid-row: auto; grid-template-rows: auto auto auto; padding: 24px 22px 10px; }
  .svc-polish .svc-group ul { grid-template-rows: none; }
}
@media (max-width: 860px) { .svc-polish .head { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.svc-polish .svc-group li a { padding: 15px 12px; margin: 0 -12px; }
.svc-polish .svc-group li + li { border-top: 0; }
.svc-polish .svc-group li + li a { box-shadow: inset 0 1px 0 #ebebe8; }
.svc-polish .svc-group.hot li + li a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.svc-polish .svc-group li a:focus-visible { outline-offset: 0; }
.svc-polish .svc-group li + li a, .svc-polish .svc-group.hot li + li a { box-shadow: none; }
.svc-polish .svc-group li + li { border-top: 1px solid #ebebe8; }
.svc-polish .svc-group.hot li + li { border-top: 1px solid rgba(255, 255, 255, .1); }

/* =================== AI automation section polish =================== */
.ai-sec { padding-block: clamp(64px, 7.5vw, 112px); }

/* window: larger, higher, tighter */

/* states: active (arrived/working), processing (AI), done (tick) */

/* result panel */

.ai-foot { color: #a9a9a9; padding: 0 22px 18px; }
/* larger, evenly spaced demonstration; fixed reserved space so tabs never change its height */


/* =================== How we work: spacing and alignment polish =================== */
.process { padding-block: clamp(64px, 7.5vw, 112px); }
.process .pr-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(32px, 4vw, 52px); }
.process .pr-head .lede { justify-self: start; max-width: 46ch; margin-bottom: 4px; }
.process .steps { --g: clamp(24px, 3vw, 40px); --num: 80px; --gap-line: 18px; gap: var(--g); counter-reset: s; }
.process .steps li { padding-top: calc(var(--num) + 22px); }
/* every number: same size, same baseline, same distance to its title */
.process .steps li::before { font-size: var(--num); line-height: 1; height: var(--num); letter-spacing: -0.06em; -webkit-text-stroke-width: 1.5px; }
.process .steps li::after { top: calc(var(--num) / 2); right: calc(-1 * var(--g) + var(--gap-line)); }
/* each line starts the same 18px after its numeral (natural widths of 1, 2, 3 at 80px) */
.process .steps li:nth-child(1)::after { left: calc(31.2px + var(--gap-line)); }
.process .steps li:nth-child(2)::after { left: calc(43.2px + var(--gap-line)); }
.process .steps li:nth-child(3)::after { left: calc(42.2px + var(--gap-line)); }
.process .steps h3 { font-size: clamp(20px, 1.7vw, 24px); margin-bottom: 10px; }
.process .steps p { font-size: 16px; line-height: 1.65; max-width: 30ch; }
@media (max-width: 900px) {
  .process .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .process .steps li::after { display: none; }
}
/* phones: compact numbered sequence, number beside its text, with a short vertical connector */
@media (max-width: 600px) {
  .process .pr-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .process .steps { --num: 52px; grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .process .steps li { padding: 0 0 0 76px; min-height: var(--num); }
  .process .steps li::before { top: -4px; }
  .process .steps li::after { display: block; top: calc(var(--num) + 6px); bottom: -20px; left: 15px; right: auto; width: 1.5px; height: auto; background: linear-gradient(rgba(255, 56, 56, .55), rgba(255, 56, 56, .1)); }
  .process .steps li:nth-child(n)::after { left: 15px; }
  .process .steps li:last-child::after { display: none; }
  .process .steps p { max-width: none; }
}
.process .pr-head h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 20ch; }
.process .steps p { max-width: none; }

/* =================== Marketing measurement polish =================== */
.meas2 { padding-top: clamp(52px, 5.5vw, 80px); padding-bottom: clamp(52px, 5.5vw, 80px); }
/* heading row: eyebrow on top; heading and introduction start on the same line */
.ms-head2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "eyebrow eyebrow" "title intro"; column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.ms-head2 .slash { grid-area: eyebrow; }
.ms-head2 h2 { grid-area: title; }
.ms-head2 .lede { grid-area: intro; justify-self: start; max-width: 46ch; margin: 4px 0 0; }
/* circle and list centred against each other */
.meas2 .l-grid { align-items: center; }
/* labels: consistent size, contrast and spacing; active stage stays prominent */
.l-lab { font: 800 22px "Manrope", sans-serif; fill: #5f5f5f; transition: fill .35s; }
.l-lab .l-num { fill: var(--red); font-size: 16px; font-weight: 800; }
.l-lab .l-sub { font-size: 16px; font-weight: 600; fill: #6e6e6e; transition: fill .35s; }
.l-lab.on { fill: var(--ink); }
.l-lab.on .l-sub { fill: #3f3f3f; }
/* explanation rows: numbers, titles, descriptions and dividers aligned with equal padding */
.meas2 .l-steps { border-top: 1px solid var(--line); }
.meas2 .l-steps li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 0; row-gap: 4px; padding: 18px 0; align-items: start; }
.meas2 .l-steps li::before { font-size: 14px; line-height: 24px; padding-top: 0; color: #9a9a9a; letter-spacing: .02em; }
.meas2 .l-steps b { font-size: 18px; line-height: 24px; display: block; }
.meas2 .l-steps span { grid-column: 2; font-size: 16px; line-height: 1.6; color: var(--graphite); }
.meas2 .l-steps li.on::before { color: var(--red); }
.meas2 .l-steps li:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 6px; }
.meas2 .l-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: #6a6a6a; }
@media (max-width: 860px) {
  .ms-head2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "intro"; row-gap: 12px; }
  .ms-head2 .lede { margin: 0; }
}
/* phones: circle above the list, labels shown and enlarged; the drawing is cropped around them */
@media (max-width: 600px) {
  .l-lab { display: inline; font-size: 30px; }
  .l-lab .l-num { font-size: 22px; }
  .l-lab .l-sub { font-size: 22px; }
  .meas2 .l-fig { max-width: 360px; justify-self: center; }
  .l-mid { font-size: 40px; }
}

@media (max-width: 600px) {
  .l-lab { font-size: 30px; }
  .l-lab .l-sub { display: none; }
  .meas2 .l-fig { max-width: 340px; }
}

/* =================== FAQ polish =================== */
.faq-polish { padding-block: clamp(56px, 6.5vw, 96px); }
.faq-polish .faq-grid { align-items: start; gap: clamp(32px, 5vw, 80px); }
.faq-polish .faq-side .slash { line-height: 1.4; }
/* first question row starts level with the FAQ eyebrow */
.faq-polish .faq-grid > div:last-child { margin-top: 0; }
.faq-polish details { border-bottom: 1px solid #e0e0dc; }
.faq-polish details:first-of-type { border-top: 1px solid #e0e0dc; }
.faq-polish summary { padding: 20px 4px 20px 0; font-size: 18px; border-radius: 8px; transition: color .2s; }
.faq-polish summary:hover { color: var(--red); }
.faq-polish summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.faq-polish summary::after { margin-right: 6px; }
.faq-polish details p { overflow: hidden; padding: 0 48px 22px 0; font-size: 16px; line-height: 1.7; color: #4a4a4a; max-width: 64ch; }
.faq-polish details p a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 56, 56, .55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.faq-polish details p a:hover { color: var(--red); }
.faq-polish .faq-pic { aspect-ratio: 4 / 3; align-self: start; }
@media (max-width: 860px) { .faq-polish details p { padding-right: 8px; } }

/* =================== Final CTA (homepage) =================== */
.home-cta .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding-block: clamp(56px, 6.5vw, 96px); }
.home-cta h2 { font-size: clamp(34px, 4.2vw, 60px); max-width: 15ch; text-wrap: balance; }
.home-cta p { max-width: 48ch; }
.home-cta .btn-row { justify-content: flex-end; flex-wrap: nowrap; gap: 12px; }
.home-cta .btn { min-height: 56px; padding: 0 30px; border-radius: var(--r-s); white-space: nowrap; }
.home-cta .btn-white::before { display: none; }
.home-cta .btn-white { color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); transition: background-color .25s, transform .25s var(--ease), box-shadow .25s; }
.home-cta .btn-white:hover { background: #f4f1f1; color: var(--ink); }
.home-cta .btn-wa { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
@media (max-width: 860px) {
  .home-cta .wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .home-cta .btn-row { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 520px) { .home-cta .btn-row > .btn { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 860px) { .faq-polish .faq-pic { aspect-ratio: 16 / 7; max-height: 170px; } }

/* =================================================================
   Homepage integration pass: one spacing rhythm, one heading scale,
   one introduction alignment, one button treatment
   ================================================================= */
/* section spacing: ~96px desktop, 56px phones (hero and final band keep their own) */
body main > section:not(.hero-home):not(.cta-band) { padding-top: clamp(56px, 6.7vw, 96px); padding-bottom: clamp(56px, 6.7vw, 96px); }
body .home-cta .wrap { padding-block: clamp(56px, 6.7vw, 96px); }

/* heading scale: section H2s share the 48px maximum; AI (compact two-line), founder statement and final band keep their own */
body main > section:not(.hero-home):not(.cta-band):not(.ai-sec) h2:not(.founder-line) { font-size: clamp(30px, 3.4vw, 48px); }
body main > section h2.founder-line { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); font-weight: 700; margin: 0 0 28px; }

/* side-by-side introductions: eyebrow on top, introduction starts on the heading's first line */
@media (min-width: 861px) {
  main .head:has(> .lede):not(.ms-head2) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "eb eb" "t i"; column-gap: clamp(20px, 3vw, 48px); align-items: start; }
  main .head:has(> .lede):not(.ms-head2) > div { display: contents; }
  main .head:has(> .lede):not(.ms-head2) > div > .slash { grid-area: eb; }
  main .head:has(> .lede):not(.ms-head2) > div > h2 { grid-area: t; }
  main .head:has(> .lede):not(.ms-head2) > .lede { grid-area: i; justify-self: start; align-self: start; margin: 4px 0 0; max-width: 48ch; }
  .ms-head2 .lede { margin-top: 4px; }
}

/* primary buttons: no dark side stripe, one height, one hover, softer shadows (site-wide) */
.btn::before { display: none !important; }
.btn { transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
main .btn { min-height: 56px; }
.btn:not(.btn-wa):not(.btn-white):not(.btn-ghost) { box-shadow: 0 10px 24px -14px rgba(216, 31, 31, .65); }
.btn:not(.btn-wa):not(.btn-white):not(.btn-ghost):hover { background: #e42b2b; color: #fff; transform: translateY(-1px); }
.btn-wa { box-shadow: 0 10px 24px -14px rgba(18, 140, 126, .6); }
.btn-wa:hover { background: #075E54; color: #fff; transform: translateY(-1px); }
.btn-white { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.btn-white:hover { background: #f4f1f1; color: var(--ink); transform: translateY(-1px); }

/* FAQ is white while the news section is hidden; grey again once news is visible */
#news[hidden] + .faq-polish { background: #fff; }

/* services: slightly tighter rows on phones, every service still listed */
@media (max-width: 980px) { .svc-polish .svc-group li a { padding-top: 11px; padding-bottom: 11px; } }

/* footer: no horizontal overflow on the narrowest phones (site-wide) */
.foot > * { min-width: 0; }
.foot p, .foot a, .foot address, .foot li { overflow-wrap: anywhere; }
@media (max-width: 560px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } }
.mk-map.is-paused .mk-pulse { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .l-svg .l-spark, .mk-map .mk-pulse { animation: none !important; } }

/* =================================================================
   Service page hero (model: seo-company-in-noida.html)
   Reuses the homepage's .hero-home dark treatment; this layer only
   adds the breadcrumb on dark and the framed image with search card.
   ================================================================= */
.hero-home.svc-hero { padding-bottom: clamp(64px, 7vw, 104px); }
.hero-home.svc-hero .wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero-home.svc-hero h1 { max-width: 12ch; }
.svc-hero .crumbs { margin-bottom: clamp(24px, 3vw, 36px); }
.svc-hero .crumbs a { color: #a8a8a8; }
.svc-hero .crumbs a:hover { color: #fff; }
.svc-hero .crumbs li + li::before { color: #555; }
.svc-hero .crumbs [aria-current] { color: #fff; }

.svc-media { position: relative; justify-self: end; width: min(100%, 420px); margin-right: 20px; }
.svc-hero .framed { width: 100%; justify-self: auto; }
.svc-hero .framed img { display: block; object-position: 50% 52%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }

/* illustrative search card: echoes the homepage "Get found" artwork */
.search-card {
  position: absolute; left: clamp(-56px, -4vw, -24px); bottom: 44px; width: 296px;
  padding: 12px; border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
  display: grid; gap: 10px; font-size: 14px; line-height: 1.3;
}
.sc-query { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: var(--mist); color: #4a4a4a; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sc-query svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.sc-query span { overflow: hidden; text-overflow: ellipsis; }
.sc-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 6px 4px 10px; }
.sc-pin { width: 18px; height: 22px; }
.sc-pin path { fill: var(--red); }
.sc-pin circle { fill: #fff; }
.sc-name b { display: block; font-weight: 800; font-size: 15px; }
.sc-name small { display: block; font-size: 12.5px; font-weight: 600; color: var(--graphite); margin-top: 2px; }
.sc-call { padding: 7px 14px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; font-size: 13px; }

@media (prefers-reduced-motion: no-preference) {
  .svc-media { animation: rise 1.1s var(--ease) .25s both; }
}

/* tablet and phone: copy first, then a wider, shorter image */
@media (max-width: 900px) {
  .hero-home.svc-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .svc-media { justify-self: start; width: calc(100% - 20px); max-width: 540px; }
  .svc-hero .framed img { aspect-ratio: 16 / 11; }
  .search-card { left: 16px; bottom: 16px; }
}
@media (max-width: 600px) {
  .hero-home.svc-hero .wrap { gap: 36px; }
  .svc-hero .crumbs { font-size: 13px; margin-bottom: 20px; }
  .svc-hero .framed img { aspect-ratio: 4 / 3; border-radius: var(--r-m); }
  .svc-hero .framed::after { inset: 14px -14px -14px 14px; border-radius: var(--r-m); }
  .svc-media { width: calc(100% - 14px); }
  .search-card { width: min(224px, calc(100% - 24px)); left: 12px; bottom: 12px; padding: 8px; gap: 4px; font-size: 12.5px; border-radius: 14px; }
  .sc-query { padding: 7px 12px; gap: 8px; }
  .sc-result { padding: 6px 4px 2px 8px; gap: 10px; }
  .sc-name b { font-size: 14px; }
  .sc-name small { font-size: 12px; }
  .sc-call { padding: 6px 12px; font-size: 12px; }
  .hero-home.svc-hero .proof-line { flex-direction: column; }
}

/* =================================================================
   Service page: business needs (reuses homepage .steps3 / .st-list)
   ================================================================= */
.svc-needs .head { margin-bottom: clamp(32px, 4vw, 52px); row-gap: 0; }
.st-art .v-cursor { fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.st-art .v-road { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.st-art .v-ink.thin { stroke-width: 1.6; }
.st-art .v-white-line.thin { stroke-width: 1.6; }

/* =================================================================
   Service page: scope and deliverables (grouped list, fine dividers)
   ================================================================= */
.svc-inc .head { margin-bottom: clamp(32px, 4vw, 52px); row-gap: 0; }
.svc-inc .head h2 { max-width: 19ch; }
.inc-group { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; border-top: 1.5px solid var(--ink); padding-top: 26px; }
.inc-group + .inc-group { margin-top: clamp(40px, 4.5vw, 64px); }
.inc-side { position: sticky; top: calc(var(--header-h) + 28px); }
.inc-side h3 { font-size: clamp(22px, 1.9vw, 26px); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.inc-side p { font-size: 16px; line-height: 1.6; max-width: 30ch; }
.inc-list { list-style: none; margin: 0; padding: 0; }
.inc-item { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 36px); padding: 22px 0 24px; border-top: 1px solid #dcdcda; scroll-margin-top: calc(var(--header-h) + 24px); }
.inc-item:first-child { border-top: 0; padding-top: 0; }
.inc-item h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.inc-item p { font-size: 16px; line-height: 1.65; max-width: 64ch; }
.inc-item .inc-out { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--red); color: #3a3a3a; font-size: 15px; line-height: 1.55; }
.inc-out b { color: var(--ink); font-weight: 800; }
.inc-item:target h4 { color: var(--red); }
@media (max-width: 980px) {
  .inc-group { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .inc-side { position: static; }
  .inc-side p { max-width: 56ch; }
}
@media (max-width: 860px) { .svc-inc .head { row-gap: 16px; } }
@media (max-width: 640px) {
  .inc-item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 22px; }
  .inc-item h4 { font-size: 18px; }
  .inc-group { padding-top: 22px; }
}
@media (max-width: 980px) {
  .inc-group { gap: 22px; }
  .inc-side { padding-bottom: 18px; border-bottom: 1px solid #dcdcda; }
  .inc-side h3 { font-size: 24px; }
  .inc-item:first-child { padding-top: 0; }
}

/* =================================================================
   Service page: industries (homepage .ind-list on white)
   ================================================================= */
.svc-ind { background: #fff; }
.svc-ind .head { margin-bottom: clamp(28px, 3.5vw, 44px); row-gap: 0; }
.svc-ind .head h2 { max-width: 19ch; }
.svc-ind .ind-list { border-top-color: var(--line); row-gap: 0; }
.svc-ind .ind-list a { align-items: center; color: var(--ink); border-bottom-color: var(--line); padding: 20px 0; }
.svc-ind .ind-list a:hover { color: var(--ink); padding-left: 0; }
.si-text { display: grid; gap: 6px; min-width: 0; }
.si-text b { font-weight: 800; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.02em; line-height: 1.2; transition: color .2s; }
.svc-ind .ind-list .si-text span { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--graphite); text-align: left; letter-spacing: 0; max-width: 46ch; }
.svc-ind .ind-list a:hover .si-text b { color: var(--red); }
.svc-ind .go { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.svc-ind .go::before { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, 1px); }
.svc-ind .ind-list a:hover .go { background: var(--red); border-color: var(--red); transform: translateX(4px); }
.svc-ind .ind-list a:hover .go::before { border-color: #fff; }
.svc-ind .ind-list .ind-all a { color: var(--red); border-bottom: 0; }
.svc-ind .ind-list .ind-all a span { display: inline-block; }
@media (max-width: 860px) { .svc-ind .head { row-gap: 16px; } }
@media (max-width: 760px) {
  .svc-ind .ind-list .si-text span { display: block; }
  .svc-ind .ind-list a { padding: 18px 0; gap: 14px; }
  .svc-ind .go { width: 34px; height: 34px; }
}
.svc-ind .ind-list a .si-text { text-align: left; color: var(--ink); font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.svc-ind .ind-list a .si-text b { color: var(--ink); }
.svc-ind .ind-list a:hover .si-text b { color: var(--red); }
.svc-ind .ind-list a .si-text span { max-width: 52ch; }
@media (max-width: 760px) {
  .svc-ind .ind-list a .si-text { display: grid; }
  .svc-ind .ind-list a .si-text span { display: block; }
}
/* industries: hub link bottom-right on desktop */
.svc-ind .ind-list .ind-all { grid-column: 2; }
.svc-ind .ind-list .ind-all a { justify-content: flex-end; }
@media (max-width: 760px) {
  .svc-ind .ind-list .ind-all { grid-column: auto; }
  .svc-ind .ind-list .ind-all a { justify-content: flex-start; padding-top: 22px; }
}
/* service process: same eyebrow spacing as the other service sections */
.svc-pr .pr-head { row-gap: 0; align-items: start; }
@media (max-width: 860px) { .svc-pr .pr-head { row-gap: 16px; } }

/* =================================================================
   Service page FAQ: sticky intro, grouped accordion, clear open state
   ================================================================= */
.svc-faq { background: #fff; padding-block: clamp(56px, 6.5vw, 96px); }
.svc-faq .faq-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(40px, 5.5vw, 88px); align-items: start; }
.svc-faq .faq-side { position: sticky; top: calc(var(--header-h) + 32px); }
.svc-faq .faq-side h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 16ch; }
.svc-faq .faq-intro { margin-top: 16px; font-size: 17px; line-height: 1.65; max-width: 36ch; }
.svc-faq .faq-pic { margin: clamp(24px, 2.6vw, 32px) 0 0; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 11; background: #e9e9e7; }
.svc-faq .faq-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; display: block; }

.faq-group + .faq-group { margin-top: clamp(36px, 3.6vw, 48px); }
.faq-gh { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--ink); line-height: 1.3; }
.faq-gh::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--red); flex: none; }

.svc-faq details { border-bottom: 1px solid #e3e3df; border-radius: 0; transition: background-color .2s; }
.svc-faq details:first-of-type { border-top: 1px solid #e3e3df; }
.svc-faq summary { position: relative; padding: 19px 20px; min-height: 64px; gap: 24px; font-size: 18px; line-height: 1.4; border-radius: 12px; transition: color .2s; }
.svc-faq summary:hover { color: var(--red); }
.svc-faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.svc-faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; margin: 0; border-radius: 50%; transform: none;
  border: 1.5px solid #e3e3df; background:
    linear-gradient(var(--red), var(--red)) center / 12px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 12px no-repeat, #fff;
  transition: border-color .2s, background-size .2s;
}
.svc-faq summary:hover::after { border-color: var(--red); }
.svc-faq details[open] { background: var(--mist); border-bottom-color: transparent; border-radius: 12px; box-shadow: inset 3px 0 0 var(--red); }
.svc-faq details[open] summary::after { transform: none; border-color: var(--red); background:
    linear-gradient(var(--red), var(--red)) center / 12px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 0 no-repeat, #fff; }
.svc-faq details[open] summary { color: var(--ink); }
.svc-faq details p { padding: 0 66px 24px 20px; font-size: 16px; line-height: 1.7; color: #4a4a4a; max-width: none; }
.svc-faq details p a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 56, 56, .55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.svc-faq details p a:hover { color: var(--red); }

@media (max-width: 860px) {
  .svc-faq .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc-faq .faq-side { position: static; }
  .svc-faq .faq-intro { font-size: 16px; margin-top: 12px; }
  .svc-faq .faq-pic { aspect-ratio: 16 / 6; max-height: 150px; margin-top: 20px; }
  .svc-faq .faq-pic img { object-position: 55% 38%; }
  .svc-faq summary { padding: 16px 14px; min-height: 60px; gap: 16px; font-size: 17px; }
  .svc-faq summary::after { width: 28px; height: 28px; }
  .svc-faq details p { padding: 0 14px 22px; font-size: 16px; }
  .faq-group + .faq-group { margin-top: 32px; }
}

/* =================================================================
   Service page: measurement and reporting
   ================================================================= */
.svc-meas { background: #fff; }

.mr-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mr-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.mr-list li:first-child { border-top: 1.5px solid var(--ink); }
.mr-num { font-size: 14px; font-weight: 800; color: var(--red); line-height: 1.55; letter-spacing: .02em; padding-top: 2px; }
.mr-list h3 { font-size: 19px; line-height: 1.35; letter-spacing: -0.015em; margin-bottom: 6px; }
.mr-list p { font-size: 16px; line-height: 1.65; max-width: 58ch; }

@media (max-width: 600px) {
  .mr-list li { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0 20px; }
  .mr-list h3 { font-size: 18px; }
}

/* final enquiry: homepage component, sized for a short SEO heading */
.svc-cta p { margin-top: 14px; }



/* closing CTA: normal heading scale */
.svc-cta h2 { font-size: clamp(32px, 3.4vw, 48px); max-width: 18ch; }
body .svc-cta .wrap { padding-block: clamp(56px, 6.7vw, 96px); }

/* =================================================================
   SEO page: free SEO audit section (copy + buttons) and popup
   ================================================================= */
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.5vw, 88px); align-items: center; }
.audit-copy h2 { margin: 0 0 14px; }
.audit-copy .lede { max-width: 40ch; }
.audit-copy .btn-row { margin-top: 28px; }
.audit-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e2e2df; }
.audit-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid #e2e2df; }
.audit-checks svg { width: 22px; height: 22px; margin-top: 1px; }
.audit-checks svg circle { fill: var(--red); }
.audit-checks svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.audit-checks b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.audit-checks span { display: block; font-size: 15.5px; line-height: 1.55; color: var(--graphite); margin-top: 3px; }
.audit-note { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--graphite); max-width: 52ch; }
@media (max-width: 960px) { .audit-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

html.ad-lock { overflow: hidden; }
.audit-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); }
.audit-dialog::backdrop { background: rgba(12, 12, 12, .62); backdrop-filter: blur(3px); }
.ad-inner { position: relative; padding: clamp(24px, 4vw, 40px); }
.ad-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #e3e3df; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: border-color .2s, color .2s; }
.ad-close:hover { border-color: var(--red); color: var(--red); }
.ad-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.audit-dialog h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.025em; margin: 0 56px 8px 0; }
.ad-sub { font-size: 15.5px; line-height: 1.6; color: var(--graphite); max-width: 44ch; }
.ad-form { display: grid; gap: 16px; }
.ad-field { display: grid; gap: 7px; }
.ad-field label, .ad-group legend { font-size: 14px; font-weight: 800; color: var(--ink); }
.ad-opt { font-weight: 600; color: #8a8a8a; }
.ad-field input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid #dcdcd9; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.ad-field input::placeholder { color: #a3a3a0; }
.ad-field input:hover { border-color: #bdbdba; }
.ad-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 56, 56, .16); }
.ad-field input[aria-invalid="true"] { border-color: var(--red); }
.ad-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ad-group legend { padding: 0; margin-bottom: 2px; }
.ad-hint { font-size: 14px; color: var(--graphite); margin-bottom: 10px; }
.ad-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-err { font-size: 14px; font-weight: 600; color: #c81e1e; }
.ad-err:empty { display: none; }
.ad-foot { display: grid; gap: 12px; margin-top: 4px; }
.ad-submit { justify-content: center; width: 100%; min-height: 54px; }
.ad-note, .ad-alt { font-size: 14px; line-height: 1.55; color: var(--graphite); }
.ad-alt { padding-top: 12px; border-top: 1px solid #ececea; }
.ad-alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(37, 211, 102, .8); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ad-alt a:hover { color: #128c4a; }
.ad-text-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 56, 56, .55); text-underline-offset: 3px; cursor: pointer; }
.ad-text-btn:hover { color: var(--red); }
.audit-dialog :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ad-done[hidden], .ad-form[hidden] { display: none; }
.ad-done { display: grid; gap: 14px; }
.ad-done h2:focus { outline: none; }
.ad-done p { font-size: 16px; line-height: 1.6; color: var(--graphite); }
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (max-width: 520px) {
  .ad-pair { grid-template-columns: 1fr; }
  .audit-dialog { border-radius: 20px; }
  .ad-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* related SEO services: reuses the deliverables layout (.inc-group); no extra card styles */
.svc-rel3 .head h2 { max-width: none; }
/* popup title sits outside the form so it labels both the form and confirmation states */
.ad-head { margin-bottom: 18px; }
.ad-done h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.ad-done h3:focus { outline: none; }

/* =================================================================
   SEO page: "Why SEO matters" benefits (compact, small illustrations)
   ================================================================= */
.svc-needs { background: #fff; }
.svc-needs .head h2 { max-width: 20ch; }
.needs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.nd { border-top: 1px solid var(--line); padding-top: 26px; }
.svc-needs .nd-art { width: 128px; height: 82px; margin: 0 0 20px; padding: 0; background: none; border-radius: 0; aspect-ratio: auto; display: block; overflow: visible; }
.svc-needs .nd-art svg { width: 100%; height: 100%; transform: none; }
.svc-needs .nd-art .v-panel { stroke: #e3e3df; stroke-width: 1.5; }
.svc-needs .nd-art .v-panel.hl { stroke: rgba(255, 56, 56, .55); }
.nd h3 { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px; }
.nd p { font-size: 16px; line-height: 1.65; color: var(--graphite); max-width: 34ch; }
@media (max-width: 860px) {
  .svc-needs .head { row-gap: 16px; }
  .needs-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .nd { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; gap: 0 18px; align-items: start; border-top: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .svc-needs .nd-art { width: 96px; height: 62px; margin: 2px 0 0; }
  .nd h3 { font-size: 18px; margin-bottom: 4px; }
  .nd p { font-size: 16px; max-width: 52ch; }
}

/* measurement: heading column + numbered reporting points (no illustration) */
.ms-grid { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(36px, 5.5vw, 88px); align-items: start; }
.ms-side { position: sticky; top: calc(var(--header-h) + 32px); }
.ms-side h2 { max-width: none; margin-bottom: 18px; }
.ms-side .lede { max-width: 40ch; }
@media (max-width: 860px) {
  .ms-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ms-side { position: static; }
  .ms-side h2 { margin-bottom: 14px; }
}

/* =================================================================
   Local SEO page: hero search card with profile actions (scoped)
   ================================================================= */
.lsp-card .sc-result { grid-template-columns: auto 1fr; }
.lsp-actions { display: flex; gap: 6px; padding: 2px 4px 2px 10px; }
.lsp-actions span { flex: 1; text-align: center; padding: 7px 8px; border-radius: 999px; border: 1.5px solid #e3e3df; font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.lsp-actions span.on { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 600px) {
  .lsp-actions { padding: 0 2px 0 6px; gap: 5px; }
  .lsp-actions span { padding: 5px 6px; font-size: 11.5px; }
}

/* =================================================================
   SEO service pages (local, technical, on-page, off-page, ecommerce, AI)
   All rules are scoped to classes used only on those pages.
   ================================================================= */
/* who carries out each deliverable */
.inc-tag { display: block; width: fit-content; white-space: nowrap; margin-top: 10px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid #d6d6d3; background: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #555; }
.inc-tag.t-impl { border-color: rgba(255, 56, 56, .5); color: #c81e1e; }

/* text-only benefit columns */
.nd-plain::before { content: ""; display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--red); margin-bottom: 18px; }
@media (max-width: 860px) {
  .nd.nd-plain { grid-template-columns: minmax(0, 1fr); }
  .nd-plain::before { margin-bottom: 12px; }
}

/* practical explanation section */
.svc-prac { background: #fff; }
.svc-prac .head { margin-bottom: clamp(28px, 3.5vw, 44px); row-gap: 0; }
.svc-prac .head h2 { max-width: 20ch; }
.prac-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.prac-cols li { border-top: 1.5px solid var(--ink); padding-top: 22px; }
.prac-cols h3 { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 10px; }
.prac-cols p { font-size: 16px; line-height: 1.65; color: var(--graphite); }
.prac-terms h3 { font-size: clamp(26px, 2.6vw, 34px); color: var(--red); letter-spacing: -0.03em; }
.prac-note, .prac-after { margin-top: clamp(26px, 3vw, 36px); max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--graphite); padding-left: 16px; border-left: 2px solid var(--red); }
.ms-side .prac-note { margin-top: 22px; font-size: 15px; }
.prac-table-wrap { overflow-x: auto; }
.prac-table-wrap:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.prac-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.prac-table thead th { text-align: left; font-size: 14px; font-weight: 800; color: var(--ink); padding: 0 20px 14px 0; border-bottom: 1.5px solid var(--ink); }
.prac-table tbody th { text-align: left; vertical-align: top; width: 18%; padding: 18px 20px 18px 0; font-size: 17px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--line); }
.prac-table td { vertical-align: top; padding: 18px 20px 18px 0; color: var(--graphite); border-bottom: 1px solid var(--line); }
.prac-table tbody tr:first-child th { color: var(--red); }
.prac-compare tbody tr:first-child th { color: var(--ink); }
.prac-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4vw, 52px); }
.prac-split h3 { font-size: 19px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.prac-split ul { list-style: none; margin: 0; padding: 0; }
.prac-split li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink); }
.prac-split li::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 16px; border-radius: 50%; }
.prac-can li::before { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.prac-cannot li { color: var(--graphite); }
.prac-cannot li::before { border: 1.5px solid #bdbdba; box-sizing: border-box; }
@media (max-width: 860px) {
  .svc-prac .head { row-gap: 16px; }
  .prac-cols, .prac-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prac-cols li { border-top: 1px solid var(--line); padding: 20px 0; }
  .prac-cols li:first-child { border-top: 1.5px solid var(--ink); }
  .prac-split > div + div { margin-top: 32px; }
}
@media (max-width: 700px) {
  .prac-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prac-table, .prac-table tbody, .prac-table tr, .prac-table th, .prac-table td { display: block; width: 100%; }
  .prac-table tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .prac-table tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  .prac-table tbody th, .prac-table td { border: 0; padding: 0; }
  .prac-table tbody th { width: 100%; margin-bottom: 8px; }
  .prac-table td + td, .prac-table th + td { margin-top: 8px; }
  .prac-table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
}

/* industries on dark (homepage industry list treatment) */
.svc-ind.svc-ind-dark { background: var(--night); }
.svc-ind-dark .ind-list { border-top-color: #2d2d2d; }
.svc-ind-dark .ind-list a { color: #fff; border-bottom-color: #2d2d2d; }
.svc-ind-dark .ind-list a .si-text, .svc-ind-dark .ind-list a .si-text b { color: #fff; }
.svc-ind-dark .ind-list a .si-text span { color: #a8a8a8; }
.svc-ind-dark .ind-list a:hover .si-text b { color: #ff6b6b; }
.svc-ind-dark .go { background: transparent; border-color: #454545; }
.svc-ind-dark .go::before { border-color: #fff; }
.svc-ind-dark .ind-list a:hover .go { background: var(--red); border-color: var(--red); }
.svc-ind-dark .ind-list .ind-all a { color: #ff6b6b; }
.svc-ind-dark .ind-list .ind-all a span { color: #ff6b6b; }
.svc-ind-dark .ind-list a:focus-visible { outline: 2px solid #ff6b6b; outline-offset: 4px; border-radius: 6px; }

/* related services links */
.rel-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.rel-link::after { content: "→"; color: var(--red); font-weight: 800; transition: transform .25s var(--ease); }
.rel-link:hover { color: var(--red); }
.rel-link:hover::after { transform: translateX(4px); }
.rel-link:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
/* longer service H1s: allow two lines instead of three */
.sp-hero.sp-hero-wide h1 { max-width: 15ch; }

/* =================================================================
   Industry SEO pages (ind- prefix; used only on those pages)
   ================================================================= */
.ind-framed { background: none; }
.ind-illus svg { display: block; width: 100%; height: auto; border-radius: var(--r-l); }
.ind-answer { background: #fff; }
.ia-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5.5vw, 88px); align-items: start; }
.ia-copy h2 { margin: 0 0 18px; max-width: 18ch; }
.ia-text p { font-size: 18px; line-height: 1.7; color: #3a3a3a; max-width: 56ch; }
.ia-text p + p { margin-top: 14px; }
.ind-rules { margin-top: 26px; padding: 18px 20px; border-radius: var(--r-m); background: var(--mist); border-left: 3px solid var(--red); max-width: 60ch; }
.ind-rules b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.ind-rules p { font-size: 15px; line-height: 1.6; color: #4a4a4a; }
.ia-journey { background: var(--mist); border-radius: var(--r-l); padding: clamp(22px, 3vw, 36px); }
.ij-title { font-size: 19px; line-height: 1.3; margin: 0 0 18px; }
.ij-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ij-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid #e2e2df; }
.ij-list li:first-child { border-top: 0; padding-top: 0; }
.ij-n { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--red); color: var(--red); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.ij-list h3 { font-size: 17px; line-height: 1.35; margin: 4px 0 4px; }
.ij-list p { font-size: 15.5px; line-height: 1.6; color: var(--graphite); }
.ind-types .head { row-gap: 0; margin-bottom: clamp(28px, 3.5vw, 40px); }
.it-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.it-grid li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px 22px 24px; }
.it-grid h3 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.it-grid p { font-size: 15.5px; line-height: 1.6; color: var(--graphite); }
.ind-problems .prac-table tbody tr:first-child th { color: var(--ink); }
.ind-problems .prac-table tbody th { width: 22%; }
.ind-deliv .head { row-gap: 0; }
.ind-sample { background: #fff; }
.is-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5.5vw, 88px); align-items: start; }
.is-copy h2 { margin: 0 0 16px; max-width: 18ch; }
.is-note { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--graphite); padding-left: 14px; border-left: 2px solid var(--red); }
.ss-card { background: var(--mist); border-radius: var(--r-l); padding: clamp(20px, 3vw, 32px); }
.ss-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1.5px solid var(--ink); }
.ss-top b { font-size: 17px; font-weight: 800; color: var(--ink); }
.ss-outline, .ss-tasks { list-style: none; margin: 0; padding: 0; counter-reset: ss; }
.ss-outline li { counter-increment: ss; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 13px 0; border-bottom: 1px solid #e2e2df; }
.ss-outline li::before { content: counter(ss, decimal-leading-zero); grid-row: 1 / 3; font-size: 13px; font-weight: 800; color: var(--red); padding-top: 2px; }
.ss-outline b, .ss-tasks b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ss-outline span, .ss-tasks span { font-size: 14.5px; line-height: 1.55; color: var(--graphite); }
.ss-tasks li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid #e2e2df; align-items: start; }
.ss-tasks .ss-pri { display: inline-flex; justify-content: center; height: 24px; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1.5px solid #cfcfcc; color: #555; background: #fff; }
.ss-tasks .ss-pri.p-first { border-color: var(--red); color: #c81e1e; }
.ss-tasks .ss-pri.p-next { border-color: #8a8a8a; color: #3a3a3a; }
.ss-compare { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.ss-compare thead th { text-align: left; font-size: 13.5px; font-weight: 800; color: var(--ink); padding: 12px 12px 10px 0; }
.ss-compare tbody th { text-align: left; vertical-align: top; font-weight: 800; color: var(--ink); padding: 12px 12px 12px 0; width: 26%; border-top: 1px solid #e2e2df; }
.ss-compare td { vertical-align: top; padding: 12px 12px 12px 0; color: var(--graphite); border-top: 1px solid #e2e2df; }
.ind-related .head { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-bottom: clamp(24px, 3vw, 36px); }
.ir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.ir-grid h3 { font-size: 17px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.ir-list { list-style: none; margin: 0; padding: 0; }
.ir-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e2e2df; text-decoration: none; color: var(--ink); }
.ir-list b { font-size: 16.5px; font-weight: 800; transition: color .2s; }
.ir-list .go { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #d6d6d3; background: #fff; display: grid; place-items: center; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.ir-list .go::before { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, 1px); }
.ir-list a:hover b { color: var(--red); }
.ir-list a:hover .go { background: var(--red); border-color: var(--red); transform: translateX(4px); }
.ir-list a:hover .go::before { border-color: #fff; }
.ir-list a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 960px) {
  .ia-grid, .is-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .it-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .ind-types .head { row-gap: 16px; } }
@media (max-width: 640px) {
  .it-grid, .ir-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-text p { font-size: 16.5px; }
  .ss-tasks li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ss-tasks .ss-pri { width: fit-content; padding: 0 10px; }
  .ss-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-compare, .ss-compare tbody, .ss-compare tr, .ss-compare th, .ss-compare td { display: block; width: 100%; }
  .ss-compare tr { padding: 12px 0; border-top: 1px solid #e2e2df; }
  .ss-compare tbody th, .ss-compare td { border: 0; padding: 0; }
  .ss-compare td { margin-top: 6px; }
  .ss-compare td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
}
@media (max-width: 700px) { .ind-problems .prac-table tbody th { width: 100%; } }
/* industry pages v24: inputs and decisions block, two-part rules box */
.ind-rules .ir-sub { margin-top: 14px; }
.ind-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(36px, 4vw, 52px); }
.ind-io h3 { font-size: 18px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.ind-io ul { list-style: none; margin: 0; padding: 0; }
.ind-io li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid #e2e2df; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.ind-io li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
@media (max-width: 760px) { .ind-io { grid-template-columns: minmax(0, 1fr); } }
/* industries hub: industry SEO collection */
.ihub .inc-group { align-items: start; }
.ihub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 1px solid #dcdcda; }
.ihub-list li { border-bottom: 1px solid #dcdcda; }
.ihub-list .rel-link { display: flex; justify-content: space-between; padding: 13px 0; font-weight: 800; font-size: 16px; }
.ihub-lead-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
@media (max-width: 640px) { .ihub-list { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================
   Manufacturing digital marketing page (mfg- prefix; this page only)
   ================================================================= */
.mfg-prob { background: #fff; }
.mfg-prob .head, .mfg-journey .head, .mfg-fit .head { row-gap: 0; margin-bottom: clamp(28px, 3.5vw, 44px); }
.mfg-rows { border-top: 1.5px solid var(--ink); }
.mfg-rows .inc-item:first-child { border-top: 0; padding-top: 22px; }
.mfg-rows .inc-item h4 { font-size: 18px; }
.mfg-journey .mj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.mfg-journey .mj-list li { border-top: 1px solid #2d2d2d; padding-top: 20px; }
.mfg-journey .mj-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--red); color: #ff6b6b; font-weight: 800; font-size: 14px; margin-bottom: 14px; }
.mfg-journey h3 { color: #fff; font-size: 19px; margin: 0 0 8px; }
.mfg-journey .mj-list p { color: #b5b5b5; font-size: 15.5px; line-height: 1.6; }
.mfg-journey .mj-example { margin-top: clamp(28px, 3.5vw, 40px); max-width: 80ch; color: #d4d4d4; font-size: 15.5px; line-height: 1.65; padding-left: 16px; border-left: 2px solid var(--red); }
.mfg-journey .mj-example .mr-pill { margin-right: 8px; color: #ff6b6b; border-color: #ff6b6b; }
.mfg-fit { background: #fff; }
.mfg-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mfg-fit-grid li { background: var(--mist); border-color: transparent; }
.rel-link-inline { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 56, 56, .55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; }
.rel-link-inline:hover { color: var(--red); }
@media (max-width: 960px) { .mfg-journey .mj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .mfg-prob .head, .mfg-journey .head, .mfg-fit .head { row-gap: 16px; } }
@media (max-width: 640px) { .mfg-journey .mj-list, .mfg-fit-grid { grid-template-columns: minmax(0, 1fr); } }
.mfg-rows .inc-item h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.mfg-hero.sp-hero h1 { max-width: 20ch; }

/* Digital marketing location pages (dm- prefix) */
.svc-inc .dm-when { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--graphite); }
.dm-ncr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 640px) { .dm-ncr-list { grid-template-columns: minmax(0, 1fr); } }

/* Industry lead generation pages (lg- prefix) */
.mfg-prob.lg-mist { background: var(--mist); }
.lg-inc { background: #fff; }
.lg-enq .mfg-fit-grid h3 { margin: 0; font-size: 17px; }
.lg-rules { margin: 0 0 clamp(24px, 3vw, 36px); max-width: 80ch; background: #fff; }
.mfg-journey .mj-list.lg-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mfg-journey .mj-list.lg-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mfg-journey .mj-list.lg-five { grid-template-columns: minmax(0, 1fr); } }

/* AI automation page: rules-or-AI table on dark; homepage section link */
.ai-rules .prac-table th, .ai-rules .prac-table td { color: #fff; border-color: #2d2d2d; }
.ai-rules .prac-table thead th { color: #b5b5b5; }
.ai-rules .prac-table td { color: #d4d4d4; }
.ai-rules .is-note { color: #d4d4d4; }
.ai-sec .ai-more { margin-top: 18px; }
.ai-sec .ai-more a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 56, 56, .7); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; }
.ai-sec .ai-more a:hover { color: #ff6b6b; }
.svc-prac.ai-rules { background: var(--night); }
.ai-rules .prac-table thead th { border-bottom-color: #4a4a4a; }
.ai-rules .prac-table tbody th, .ai-rules .prac-table tbody tr:first-child th { color: #fff; width: 48%; }
@media (max-width: 700px) {
  .ai-rules .prac-table tbody th, .ai-rules .prac-table tbody tr:first-child th { width: 100%; }
  .ai-rules .prac-table td::before { color: #b5b5b5; }
  .ai-rules .prac-table tr { border-bottom-color: #2d2d2d; }
}

/* three-step dark sequence (content marketing originality steps) */
.mfg-journey .mj-list.mj-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .mfg-journey .mj-list.mj-three { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================
   Shared two-column editorial grid
   Section headings, row labels and group labels use the left column;
   introductions, row descriptions and second list columns start on one
   vertical line at --ed-split of the content container.
   Grouped rows: the group label takes --ed-side; inside the remaining
   list, the label column is --ed-item of the list width, which places
   descriptions on the same line: 25% + 40% x 75% = 55%.
   ================================================================= */
:root { --ed-split: 55%; --ed-gap: clamp(24px, 3vw, 48px); --ed-side: 25%; --ed-item: 40%; }
@media (min-width: 861px) {
  /* section headings with an introduction (all variants, including process and homepage measurement headings) */
  main .head:has(.lede):not(.ms-head2), main .ms-head2 { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
  main .head:has(.lede) .lede { justify-self: start; }
  /* label and description rows */
  main .inc-item { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
  /* two-column lists below a heading */
  main .ind-io { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
}
@media (min-width: 961px) {
  main .meas2 .l-grid { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
}
@media (min-width: 981px) {
  main .inc-group { grid-template-columns: minmax(0, calc(var(--ed-side) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
  main .inc-group .inc-item { grid-template-columns: minmax(0, calc(var(--ed-item) - var(--ed-gap))) minmax(0, 1fr); }
}
/* below the two-column breakpoint, labels stack above descriptions */
@media (max-width: 860px) {
  main .inc-item { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
/* process headings stay two-column down to 601px: keep their introduction on the shared line,
   together with any two-column lists below (which stack at 760px) */
@media (min-width: 601px) and (max-width: 860px) {
  main .process .pr-head { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
}
@media (min-width: 761px) and (max-width: 860px) {
  main .ind-io { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
}
/* measurement sections: heading and introduction stay on the left; the numbered rows start on the shared line */
@media (min-width: 861px) {
  main .ms-grid { grid-template-columns: minmax(0, calc(var(--ed-split) - var(--ed-gap))) minmax(0, 1fr); column-gap: var(--ed-gap); }
}

/* =================================================================
   Shared closing call to action: long button labels wrap instead of clipping.
   Rows may wrap; buttons keep their natural width (no flex shrinking),
   are capped at the row width and may break their label onto two lines.
   ================================================================= */
.cta-band .btn-row, .home-cta .btn-row { flex-wrap: wrap; }
.cta-band .btn-row > .btn, .home-cta .btn-row > .btn { flex: 0 0 auto; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 520px) {
  .cta-band .btn-row > .btn, .home-cta .btn-row > .btn { flex: 1 1 100%; justify-content: center; }
}

/* =================================================================
   Sticky introductions (scoped, reuses the measurement-section pattern)
   A short introduction beside longer content stays below the header and
   releases at the end of its own grid. Normal flow when columns stack.
   ================================================================= */
/* Industry "example output" sections: introduction beside the framework card (stacks at 960px) */
@media (min-width: 961px) {
  .is-copy { position: sticky; top: calc(var(--header-h) + 32px); }
}
/* Explanatory "problem/context" sections: heading beside several paragraphs (stacks at 860px).
   Bounded by its own .head grid, so it releases before any list that follows. */
@media (min-width: 861px) {
  .mfg-prob .head > div:first-child { position: sticky; top: calc(var(--header-h) + 32px); }
}
/* Fit guard: site.js adds .sticky-off when an introduction is taller than the space below the header
   (short viewports, larger text), so its text is never held partly out of view. */
.ms-side.sticky-off, .svc-faq .faq-side.sticky-off, .inc-side.sticky-off, .is-copy.sticky-off,
.mfg-prob .head > div.sticky-off, .ncm-intro.sticky-off { position: static; }

/* =================================================================
   Introduction-left / entries-right sections (former full-width rows)
   Sections that listed rows under a full-width heading now reuse the
   measurement layout of the reference page (.ms-grid + sticky .ms-side,
   55/45 editorial split, fit guard in site.js, stacking at 860px).
   Inside the right column each entry's heading sits directly above its
   description, with the reference spacing; the list's existing top line and
   row dividers stay within the right column.
   ================================================================= */
.ms-grid .mfg-rows .inc-item { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 20px 0 22px; }
.ms-grid .mfg-rows .inc-item:first-child { padding-top: 20px; }
.ms-grid .mfg-rows .inc-item h3 { font-size: 19px; line-height: 1.35; }
.ms-grid .mfg-rows .inc-item p { max-width: 58ch; }
@media (max-width: 860px) {
  .ms-grid .mfg-rows .inc-item { padding: 18px 0 20px; }
  .ms-grid .mfg-rows .inc-item:first-child { padding-top: 18px; }
  .ms-grid .mfg-rows .inc-item h3 { font-size: 18px; }
}

/* =================== Closing CTA: "The next step" (reusable, opt-in) ===================
   Active only where the closing .cta-band also carries .cta-next. Keeps the approved red band,
   typography and buttons. One decorative motif: the existing logo icon as a faint watermark. No JavaScript. */
/* the single background motif: the existing approved logo icon (assets/img/favicon-192.png, the symbol without the wordmark),
   rendered as a flat white silhouette through a CSS mask of the actual file, at low opacity, fully inside the lower-right corner.
   It replaces the band's dotted texture here. A pseudo-element is never exposed to assistive technology. */
.cta-band.cta-next::after { content: ""; display: block; position: absolute; z-index: -1; inset: auto clamp(28px, 3.6vw, 56px) clamp(24px, 3vw, 44px) auto;
  width: clamp(150px, 14vw, 210px); aspect-ratio: 1; background: #fff; opacity: .06; pointer-events: none;
  -webkit-mask: url("img/favicon-192.png") center / contain no-repeat; mask: url("img/favicon-192.png") center / contain no-repeat; }
body .cta-band.cta-next .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding-block: clamp(56px, 5vw, 72px); }
/* eyebrow: the site's existing .slash label, in white on red */
.cta-band.cta-next .slash { color: #fff; margin: 0 0 16px; justify-content: center; }
.cta-band.cta-next .slash::before { color: #fff; opacity: .7; }
/* headline carries the emphasis */
.cta-band.cta-next h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.035em; max-width: min(1060px, 18.5em, 100%); text-wrap: balance; margin: 0; }
.cta-band.cta-next h2 + p { margin: 22px auto 0; max-width: 54ch; font-size: 18px; line-height: 1.6; color: #fff; }
/* conversation line: explanatory text in an ordered list, not controls */
.cta-next .cta-steps { list-style: none; display: flex; justify-content: center; align-items: center; margin: 26px 0 0; padding: 0; }
.cta-next .cta-steps li { display: inline-flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.cta-next .cta-steps li span { font-size: 13px; font-weight: 800; letter-spacing: .04em; opacity: .8; font-variant-numeric: tabular-nums; }
.cta-next .cta-steps li + li::before { content: ""; align-self: center; width: 34px; height: 1px; margin: 0 16px; background: rgba(255, 255, 255, .45); }
/* actions: existing buttons; the white primary stays dominant */
.cta-band.cta-next .btn-row { justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-band.cta-next .btn-row .btn-white { padding-inline: 36px; }
/* quiet direct contact */
.cta-next .cta-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 22px 0 0; font-size: 15px; }
.cta-next .cta-contact a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; border-radius: 6px; padding: 4px 2px; }
.cta-next .cta-contact a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .6); }
.cta-next .cta-contact svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.cta-next .cta-contact .cta-sep { width: 1px; height: 18px; margin: 0 18px; background: rgba(255, 255, 255, .35); }
/* tablets and phones: the centred column uses the full width, so the watermark becomes a small mark tucked into the corner */
@media (max-width: 860px) { .cta-band.cta-next::after { width: 64px; inset: auto 14px 14px auto; } }
/* the narrowest phones have no clear corner left, so the mark is removed */
@media (max-width: 339px) { .cta-band.cta-next::after { display: none; } }
/* narrow screens: stack the steps as a centred block (a connector never starts a wrapped line) */
@media (max-width: 680px) {
  .cta-next .cta-steps { flex-direction: column; align-items: flex-start; gap: 10px; width: fit-content; margin-inline: auto; }
  .cta-next .cta-steps li + li::before { display: none; }
}
@media (max-width: 560px) {
  body .cta-band.cta-next .wrap { align-items: stretch; padding-block: 44px; }
  .cta-band.cta-next h2 { max-width: none; }
  .cta-next .cta-contact { flex-direction: column; gap: 4px; }
  .cta-next .cta-contact .cta-sep { width: 32px; height: 1px; margin: 6px 0; }
}

/* =================== Homepage hero: Google rating badge ===================
   Static card (not a link): a left panel naming Google in the site font (no Google logo is drawn),
   a divider, then stars filled to --rating out of 5 with the figure and a caption. Plain HTML/CSS, no script. */
.hero-home .proof-line + .g-rating { margin-top: 24px; }
.hero-home .g-rating { display: inline-flex; align-items: stretch; margin-bottom: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .035); color: #fff; overflow: hidden; }
.hero-home .g-rating .g-src { display: flex; align-items: center; justify-content: center; min-width: 92px; padding: 0 18px; border-right: 1px solid rgba(255, 255, 255, .14); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hero-home .g-rating .g-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 22px 14px 20px; }
.hero-home .g-rating .g-top { display: flex; align-items: center; gap: 12px; }
.hero-home .g-rating .g-stars { flex: 0 0 auto; width: 128px; height: 24px;
  background: linear-gradient(90deg, #f5b301 calc(var(--rating, 0) / 5 * 100%), rgba(255, 255, 255, .26) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpolygon points='12 1 15.2 8 22.8 8.8 17.1 13.9 18.7 21.5 12 17.6 5.3 21.5 6.9 13.9 1.2 8.8 8.8 8'/%3E%3C/svg%3E") 0 0 / 26px 24px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpolygon points='12 1 15.2 8 22.8 8.8 17.1 13.9 18.7 21.5 12 17.6 5.3 21.5 6.9 13.9 1.2 8.8 8.8 8'/%3E%3C/svg%3E") 0 0 / 26px 24px repeat-x; }
.hero-home .g-rating .g-val { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-home .g-rating .g-cap { font-size: 15px; line-height: 1.3; color: #d6d6d6; }
@media (max-width: 560px) {
  .hero-home .proof-line + .g-rating { margin-top: 20px; }
  .hero-home .g-rating .g-src { min-width: 78px; padding: 0 14px; font-size: 16px; }
  .hero-home .g-rating .g-body { padding: 12px 18px 12px 16px; gap: 5px; }
  .hero-home .g-rating .g-stars { width: 112px; height: 21px; -webkit-mask-size: 22.75px 21px; mask-size: 22.75px 21px; }
  .hero-home .g-rating .g-val { font-size: 18px; }
}

/* =================== Homepage AI automation: outcome cards (v270) =================== */
.ai-sec .ai6-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 3.5vw, 48px); }
.ai-sec .ai6-head .slash { margin-bottom: 18px; }
.ai-sec .ai6-head h2 { max-width: none; font-size: clamp(34px, 3.4vw, 52px); }
.ai-sec .ai6-l { display: block; }
@media (min-width: 1000px) { .ai-sec .ai6-l { white-space: nowrap; } }
.ai-sec .ai6-side { display: grid; gap: 18px; }
.ai-sec .ai6-side .lede { max-width: 50ch; }
.ai-sec .ai-more { margin: 0; }
.ai-sec .ai6-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ai-sec .ai6-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #2a2a2a; border-radius: var(--r-m); background: linear-gradient(180deg, #1a1a1a, #161616); }
@supports (grid-template-rows: subgrid) {
  .ai-sec .ai6-cards { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  .ai-sec .ai6-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}
.ai-sec .ai6-icon { display: block; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #232323; color: #ff6b6b; }
.ai-sec .ai6-card h3 { margin: 16px 0 0; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.ai-sec .ai6-card p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-dark); }
/* three steps across the card; connectors sit between the step icons */
.ai-sec .ai6-wf { container-type: inline-size; align-self: start; margin-top: 20px; padding-top: 18px; border-top: 1px solid #262626; }
.ai-sec .ai6-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-sec .ai6-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font-size: 14px; line-height: 1.35; font-weight: 600; color: #dcdcdc; }
.ai-sec .ai6-sic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #232323; border: 1px solid #303030; color: #bdbdbd; }
.ai-sec .ai6-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 24px); right: calc(-50% + 19px); height: 1px; background: #3a3a3a; }
.ai-sec .ai6-step:last-child { color: #fff; }
.ai-sec .ai6-step:last-child .ai6-sic { color: #ff6b6b; border-color: rgba(255, 56, 56, .55); background: rgba(255, 56, 56, .1); }
/* narrow cards: compact vertical steps instead of shrinking the text */
@container (max-width: 300px) {
  .ai-sec .ai6-flow { grid-template-columns: 1fr; gap: 10px; }
  .ai-sec .ai6-step { grid-template-columns: 34px 1fr; justify-items: start; align-items: center; text-align: left; gap: 12px; }
  .ai-sec .ai6-step:not(:last-child)::after { top: 34px; left: 16.5px; right: auto; width: 1px; height: 10px; }
}
.ai-sec .ai6-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 960px) {
  .ai-sec .ai6-top { grid-template-columns: 1fr; align-items: start; }
  .ai-sec .ai6-cards { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
  .ai-sec .ai6-card { grid-row: auto; display: flex; flex-direction: column; }
  .ai-sec .ai6-wf { align-self: stretch; }
}
@media (max-width: 640px) {
  .ai-sec .ai6-card { padding: 22px; }
  .ai-sec .ai6-actions { flex-direction: column; }
  .ai-sec .ai6-actions .btn { width: 100%; }
}

/* =================== Homepage AI automation: compact mobile spacing (v271) =================== */
@media (max-width: 640px) {
  body main > section#ai-automation { padding-top: 44px; padding-bottom: 44px; }
  .ai-sec .ai6-head .slash { margin-bottom: 14px; }
  .ai-sec .ai6-top { row-gap: 20px; margin-bottom: 24px; }
  .ai-sec .ai6-side { gap: 12px; }
  .ai-sec .ai6-cards { row-gap: 12px; }
  .ai-sec .ai6-card h3 { margin-top: 12px; }
  .ai-sec .ai6-wf { margin-top: 14px; padding-top: 14px; }
  .ai-sec .ai6-actions { margin-top: 20px; gap: 10px; }
}

/* =================== Homepage AI automation: “Workflow cards” trial (alternative review build) =================== */
.ai-sec .ai7-intro { max-width: 760px; margin-bottom: clamp(28px, 3vw, 40px); }
.ai-sec .ai7-intro .slash { margin-bottom: 18px; }
.ai-sec .ai7-intro h2 { max-width: none; font-size: clamp(34px, 3.6vw, 54px); }
.ai-sec .ai7-intro .ai6-l { display: block; }
.ai-sec .ai7-intro .lede { margin-top: 18px; max-width: 58ch; }
.ai-sec .ai7-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ai-sec .ai7-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #2a2a2a; border-top: 2px solid rgba(255, 56, 56, .75); border-radius: var(--r-m); background: linear-gradient(180deg, #1a1a1a, #161616); }
@supports (grid-template-rows: subgrid) {
  .ai-sec .ai7-cards { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  .ai-sec .ai7-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}
.ai-sec .ai7-ic { display: block; }
.ai-sec .ai7-icon { display: block; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255, 56, 56, .1); color: #ff6b6b; }
.ai-sec .ai7-card h3 { margin: 16px 0 0; font-size: clamp(20px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.ai-sec .ai7-card > p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-dark); }
/* compact vertical workflow: small icons on the left, plain labels, thin connectors */
.ai-sec .ai7-flow { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid #262626; display: grid; gap: 10px; align-self: start; }
.ai-sec .ai7-step { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; font-weight: 600; color: #dcdcdc; }
.ai-sec .ai7-sic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: #232323; border: 1px solid #303030; color: #bdbdbd; }
.ai-sec .ai7-step:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 30px; width: 1px; height: 10px; background: #3a3a3a; }
.ai-sec .ai7-step:last-child { color: #fff; }
.ai-sec .ai7-step:last-child .ai7-sic { color: #ff6b6b; border-color: rgba(255, 56, 56, .55); background: rgba(255, 56, 56, .1); }
.ai-sec .ai7-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.ai-sec .ai7-actions .btn + .btn { margin-left: -14px; }
.ai-sec .ai7-actions .ai-more { margin: 0; }
@media (max-width: 960px) {
  .ai-sec .ai7-cards { grid-template-columns: 1fr; grid-template-rows: none; }
  .ai-sec .ai7-card { grid-row: auto; display: flex; flex-direction: column; }
  .ai-sec .ai7-flow { align-self: stretch; }
}
@media (max-width: 640px) {
  body main > section#ai-automation { padding-top: 44px; padding-bottom: 44px; }
  .ai-sec .ai7-intro { margin-bottom: 24px; }
  .ai-sec .ai7-intro .slash { margin-bottom: 14px; }
  .ai-sec .ai7-intro .lede { margin-top: 14px; }
  .ai-sec .ai7-cards { row-gap: 12px; }
  .ai-sec .ai7-card { padding: 22px; }
  .ai-sec .ai7-card h3 { margin-top: 12px; }
  .ai-sec .ai7-flow { margin-top: 14px; padding-top: 14px; }
  .ai-sec .ai7-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
  .ai-sec .ai7-actions .btn { width: 100%; }
  .ai-sec .ai7-actions .btn + .btn { margin-left: 0; }
  .ai-sec .ai7-actions .ai-more { margin-top: 6px; }
}

/* =================== Homepage AI automation “Workflow cards”: hover and one-time workflow emphasis (v275) =================== */
/* Card hover: pointer devices only, so touchscreens never keep a sticky hover state. Cards are not links: no cursor change. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ai-sec .ai7-card { transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
  .ai-sec .ai7-card:hover { transform: translateY(-3px); border-color: #3a3a3a; border-top-color: rgba(255, 56, 56, 1); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .85); }
}
/* Reduced motion: a non-moving border change only */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .ai-sec .ai7-card:hover { border-color: #3a3a3a; border-top-color: rgba(255, 56, 56, 1); }
}
/* One-time workflow emphasis. ai7-armed / ai7-run are added only by script (never without JS or with reduced motion).
   Every icon and label stays visible throughout; only emphasis changes. */
@media (prefers-reduced-motion: no-preference) {
  .ai-sec.ai7-armed .ai7-step:last-child .ai7-sic { color: #bdbdbd; border-color: #303030; background: #232323; }
  .ai-sec.ai7-armed .ai7-step:last-child { color: #dcdcdc; }
  .ai-sec.ai7-run .ai7-step:nth-child(1) .ai7-sic { animation: ai7-pulse 460ms ease 0ms both; }
  .ai-sec.ai7-run .ai7-step:nth-child(1)::after { animation: ai7-line 380ms ease 200ms both; }
  .ai-sec.ai7-run .ai7-step:nth-child(2) .ai7-sic { animation: ai7-pulse 460ms ease 360ms both; }
  .ai-sec.ai7-run .ai7-step:nth-child(2)::after { animation: ai7-line 380ms ease 560ms both; }
  .ai-sec.ai7-run .ai7-step:nth-child(3) .ai7-sic { animation: ai7-settle 380ms ease 720ms both; }
  .ai-sec.ai7-run .ai7-step:nth-child(3) { animation: ai7-label 380ms ease 720ms both; }
}
@keyframes ai7-pulse {
  0%, 100% { color: #bdbdbd; border-color: #303030; background: #232323; }
  45% { color: #ff6b6b; border-color: rgba(255, 56, 56, .55); background: rgba(255, 56, 56, .1); }
}
@keyframes ai7-line { 0%, 100% { background: #3a3a3a; } 50% { background: rgba(255, 56, 56, .75); } }
@keyframes ai7-settle {
  from { color: #bdbdbd; border-color: #303030; background: #232323; }
  to { color: #ff6b6b; border-color: rgba(255, 56, 56, .55); background: rgba(255, 56, 56, .1); }
}
@keyframes ai7-label { from { color: #dcdcdc; } to { color: #fff; } }

/* =================== Homepage “Selected work”: case-study rows with the Industries image reveal (v284; homepage only) =================== */
/* Permanent layout: industry → result → title and excerpt → arrow. No space is reserved for the hover photograph:
   it floats in a separate fixed overlay (.peek, shared Industries styling) driven by home-extras.js. */
.cs-sec .cs-results { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid #e2e2df; }
.cs-sec .cs-row { color: inherit; text-decoration: none; display: grid; grid-template-columns: 220px 190px minmax(0, 1fr) 44px; grid-template-areas: "tag result body go"; column-gap: clamp(20px, 2.5vw, 36px); align-items: center; padding: 24px 0; border-bottom: 1px solid #e2e2df; }
.cs-sec .cs-item:last-child .cs-row { border-bottom: 0; }
/* industry name: the Industries list typography (weight 800, clamp(22px, 2.3vw, 32px), −0.03em, 1.1) */
.cs-sec .tag { grid-area: tag; color: var(--ink); font-weight: 800; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -0.03em; line-height: 1.1; transition: color .2s; }
.cs-sec .cs-body { grid-area: body; min-width: 0; }
.cs-sec .cs-body h3 { margin-bottom: 6px; text-wrap: pretty; }
.cs-sec .cs-body p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--graphite); max-width: 62ch; }
.cs-sec .cs-result { grid-area: result; position: relative; padding-top: 12px; }
.cs-sec .cs-result::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--red); }
.cs-sec .cs-hl { margin: 0; }
.cs-sec .cs-row { --cs-num-size: clamp(30px, 2.6vw, 38px); }
.cs-sec .cs-num { display: block; font-size: var(--cs-num-size); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--ink); transition: color .2s; }
.cs-sec .cs-metric { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; font-weight: 700; color: #3d3d3d; }
.cs-sec .cs-qual { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--graphite); }
.cs-sec .go { grid-area: go; display: grid; place-items: center; justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); transition: background .25s, border-color .25s, transform .3s var(--ease); }
.cs-sec .go::before { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, 1px); }
.cs-sec .cs-body h3 { transition: color .2s; }
/* red hover (fine pointers): industry, percentage and title turn brand red; the arrow fills red with a white chevron */
@media (hover: hover) and (pointer: fine) {
  .cs-sec .cs-row:hover h3, .cs-sec .cs-row:hover .tag, .cs-sec .cs-row:hover .cs-num { color: var(--red); }
  .cs-sec .cs-row:hover .go { background: var(--red); border-color: var(--red); transform: translateX(4px); }
  .cs-sec .cs-row:hover .go::before { border-color: #fff; }
}
/* the floating overlay reuses the shared .peek styles; only the case-study tone adjustment is added */
.peek.cs-float.cs-tone-bright img { filter: brightness(.95) contrast(1.04); }
/* reduced motion: colour changes only; no arrow movement, no image movement or reveal animation */
@media (prefers-reduced-motion: reduce) {
  .cs-sec .tag, .cs-sec .cs-num, .cs-sec .cs-body h3, .cs-sec .go { transition: none; }
  .cs-sec .cs-row:hover .go { transform: none; }
  .peek.cs-float { transition: none; }
}
/* tablet: industry and result side by side with the arrow; the title and excerpt across the full width beneath */
@media (max-width: 1180px) {
  .cs-sec .cs-row { grid-template-columns: 220px minmax(0, 1fr) 44px; grid-template-areas: "tag result go" "body body body"; row-gap: 14px; align-items: start; }
  .cs-sec .tag { margin-top: 8px; }
  .cs-sec .go { align-self: start; margin-top: 4px; }
}
/* mobile: industry and arrow together, the result beneath, then the title and excerpt (no hover dependency) */
@media (max-width: 700px) {
  .cs-sec .cs-row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "tag go" "result result" "body body"; row-gap: 12px; column-gap: 16px; align-items: center; padding: 20px 0; }
  .cs-sec .tag { margin-top: 0; }
  .cs-sec .go { margin-top: 0; align-self: center; }
}

/* v285: industry name centred on the percentage figure (not on the whole result block), and smaller project titles */
@media (min-width: 701px) {
  /* industry and result share the top of the row; the name sits in a box exactly as tall as the percentage’s line,
     offset by the same 12px as the red accent above the percentage, and is centred in it. A two-line name centres on
     the figure, extending equally above and below it. Font, size and weight are unchanged. */
  .cs-sec .cs-row { align-items: start; }
  .cs-sec .cs-result { align-self: start; }
  .cs-sec .tag { align-self: start; display: flex; align-items: center; height: calc(var(--cs-num-size) * 1.05); margin-top: 12px; }
  .cs-sec .cs-body { align-self: start; }
  .cs-sec .go { align-self: center; }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .cs-sec .go { align-self: start; margin-top: 12px; }
}
/* project titles: the homepage’s compact bold item style (as “Track where enquiries come from”): 18px, 700, 24px */
.cs-sec .cs-body h3 { font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 24px; margin-bottom: 6px; }

/* v286: each case-study row is one link. Keyboard focus gets a visible ring and the same red treatment as hover. */
.cs-sec .cs-row:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 6px; }
.cs-sec .cs-row:focus-visible h3, .cs-sec .cs-row:focus-visible .tag, .cs-sec .cs-row:focus-visible .cs-num { color: var(--red); }
.cs-sec .cs-row:focus-visible .go { background: var(--red); border-color: var(--red); }
.cs-sec .cs-row:focus-visible .go::before { border-color: #fff; }
.cs-sec .cs-all { margin: 28px 0 0; }
.cs-sec .cs-all a, .csp-article .csp-back a { color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cs-sec .cs-all a:focus-visible, .csp-article .csp-back a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) { .cs-sec .cs-all a:hover, .csp-article .csp-back a:hover { color: var(--red); } }

/* =================== Case-study pages (/case-studies/) =================== */
.csp-hero .hero-copy .slash { margin: 18px 0 14px; }
.hero-home.svc-hero.csp-hero h1 { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.05; max-width: 20ch; }   /* longer project titles: about three lines instead of five */
.csp-result { position: relative; margin: 22px 0 0; padding-top: 14px; }
.csp-result::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--red); }
.csp-hl { margin: 0; }
.csp-num { display: block; font-size: clamp(40px, 4.2vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.csp-metric { display: block; margin-top: 8px; font-size: 17px; line-height: 1.45; font-weight: 700; color: #e6e6e6; }
.csp-qual { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.csp-hero .lede { margin-top: 22px; }
.csp-hero .framed.csp-tone-bright img { filter: brightness(.95) contrast(1.04); }
.csp-hero-index .hero-copy { max-width: 760px; }
/* the article: each section is a two-column editorial row (heading left, text right) with a partial separator */
.csp-article .csp-row { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: clamp(20px, 4vw, 64px); padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--line); align-items: start; }
/* split-section scrolling: the long sections’ headings use the site’s own sticky side column (.ms-side: sticky at
   var(--header-h) + 32px, normal flow at 860px and below, and switched off by the site.js fit guard if ever taller
   than the space below the header). Each row is the containing block, so the heading is released at the row’s bottom. */
.csp-article .csp-row:first-child { border-top: 0; padding-top: 0; }
.csp-article .csp-row h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.03em; }
.csp-article .csp-text { max-width: 68ch; }
.csp-article .csp-text p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--graphite); }
.csp-article .csp-text p:last-child { margin-bottom: 0; }
.csp-article .csp-text .csp-key { font-size: 19px; line-height: 1.5; color: var(--ink); }
.csp-article .csp-back { margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .csp-article .csp-row { grid-template-columns: 1fr; gap: 14px; }
}

/* =================== v290: shared components rolled out across the site =================== */
/* Industries on service pages: the homepage Industries styling (dark), scoped to the Industries list.
   Each page keeps its own names, descriptions, links, arrows and image mappings. */
.svc-ind-dark .ind-list a .si-text, .svc-ind-dark .ind-list a .si-text b { color: #f2f2f2; }
.svc-ind-dark .ind-list a .si-text b { font-weight: 800; font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -0.03em; line-height: 1.1; transition: color .25s; }
.svc-ind-dark .ind-list a .si-text span { color: #8a8a8a; font-weight: 600; }
.svc-ind-dark .ind-list li:not(.ind-all) a { transition: color .25s, padding-left .35s var(--ease); }
.svc-ind-dark .ind-list li:not(.ind-all) a:hover { padding-left: 10px; }
.svc-ind-dark .ind-list a:hover .si-text b { color: var(--red); }
.svc-ind-dark .ind-list .ind-all a, .svc-ind-dark .ind-list .ind-all a span { color: var(--red); }
.svc-ind-dark .ind-list .ind-all a:hover { color: #ff6b6b; }
.svc-ind-dark .ind-list a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 6px; }

/* v292 (Noida SEO page only): “Why work with us” paragraphs beside the sticky heading, and the related services as one balanced two-column grid */
.svc-pr .pr-text p { margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: var(--graphite); max-width: 64ch; }
.svc-pr .pr-text p:last-child { margin-bottom: 0; }
.svc-rel2 .rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); border-top: 1.5px solid var(--ink); }
.svc-rel2 .rel-grid .inc-item { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 22px 0 24px; }
.svc-rel2 .rel-grid .inc-item:nth-child(-n+2) { border-top: 0; padding-top: 26px; }
@media (max-width: 860px) {
  .svc-rel2 .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-rel2 .rel-grid .inc-item:nth-child(2) { border-top: 1px solid #dcdcda; padding-top: 20px; }
  .svc-rel2 .rel-grid .inc-item { padding: 20px 0 22px; }
  .svc-rel2 .rel-grid .inc-item:first-child { padding-top: 22px; }
}
}

/* Media and news hold (v300): unpublished coverage is hidden until articles are published and verified.
   Remove the `hidden` attribute from the sections marked data-media-hold to reactivate (see the reactivation guide). */
[data-media-hold][hidden] { display: none !important; }
/* while the homepage news section is held, keep the site's 1px separator where the grey founder and FAQ sections meet */
.news3[data-media-hold][hidden] + section.mist { border-top: 1px solid #e2e2df; }