/* =====================================================================
   THE MARKETING AGENCY — service pages
   One template for the six services, on top of site.css. Each page opens with something to try,
   then walks the order a buyer decides in: where it breaks, what's in it, how it runs, proof,
   price, questions, and a note to us that already knows what they picked.
   ===================================================================== */


/* ---------- hero ---------- */
.sp-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(112px, 15vh, 168px); overflow: hidden; isolation: isolate; }
.sp-hero__glow { position: absolute; z-index: -1; right: -18vw; top: -24vw; width: 78vw; height: 78vw; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 55%, transparent 72%); pointer-events: none; translate: var(--gx, 0) var(--gy, 0); transition: translate 1.6s var(--ease); }
.sp-hero__in { flex: 1; display: flex; flex-direction: column; }
.sp-hero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(36px, 5vw, 100px); align-items: center; padding-block: clamp(40px, 6vh, 72px); }
.sp-hero .eyebrow { margin-bottom: clamp(22px, 3vw, 34px); }
/* the headline leads with the service's name, so it runs a little longer: a size that keeps it to three or four lines */
.sp-h1 { display: block; font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 72; font-size: clamp(44px, 5.3vw, 98px); line-height: .95; letter-spacing: -.038em; text-wrap: balance; }
.sp-h1 em { color: var(--accent); }
.sp-lede { margin-top: clamp(24px, 2.6vw, 38px); max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.sp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.sp-ctas .btn { height: 56px; padding: 0 28px; font-size: 15.5px; }
.sp-facts { display: flex; flex-wrap: wrap; margin-top: clamp(36px, 4.4vw, 56px); border-top: 1px solid var(--line); }
.sp-facts li { padding: 16px 26px 0 0; margin-right: 26px; border-right: 1px solid var(--line); }
.sp-facts li:last-child { border-right: 0; margin-right: 0; }
.sp-facts span { display: block; font: 400 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sp-facts b { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; white-space: nowrap; }


.sp-hero__live { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
/* the mark: outlined, and an ink layer under a soft spotlight that follows the pointer (and drifts when it's idle) */
.sp-mark { position: absolute; z-index: 0; right: -.03em; bottom: 60px; display: grid; font-family: var(--serif); font-weight: 300; font-style: italic; font-variation-settings: "opsz" 72; font-size: clamp(240px, 36vw, 680px); line-height: .8; letter-spacing: -.06em; white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none; }
.sp-mark > span { grid-area: 1 / 1; padding-right: .06em; }
.sp-mark__o { color: transparent; -webkit-text-stroke: 1.2px var(--line-2); }
.sp-mark__i { color: var(--accent); opacity: .9; -webkit-mask: radial-gradient(circle at var(--mx, 64%) var(--my, 46%), #000 0, #000 calc(var(--r, 150px) * .3), rgba(0, 0, 0, .5) calc(var(--r, 150px) * .66), transparent var(--r, 150px)); mask: radial-gradient(circle at var(--mx, 64%) var(--my, 46%), #000 0, #000 calc(var(--r, 150px) * .3), rgba(0, 0, 0, .5) calc(var(--r, 150px) * .66), transparent var(--r, 150px)); }

/* the six, always one click apart */
.sp-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
.sp-six a { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 20px 14px 22px 0; font-size: 14px; color: var(--muted); transition: color .3s; }
.sp-six a + a { padding-left: 14px; border-left: 1px solid var(--line); }
.sp-six a span { font: 400 11px/1 var(--mono); color: var(--faint); }
.sp-six a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.sp-six a:hover { color: var(--fg); }
.sp-six a[aria-current] { color: var(--fg); }
.sp-six a[aria-current]::before, .sp-six a:hover::before { transform: none; }

/* ---------- the instrument: every page opens with something to try ---------- */
.w { display: inline-block; animation: wIn .5s var(--ease) both; animation-delay: calc(var(--i) * 26ms); }
html[data-motion="reduced"] .w { animation: none; }

/* answer engines: a buyer asks, the assistant answers. Pared back to the conversation: no boxes, no badges, one rule */
.sp-inst.is-min { min-height: 0; padding: clamp(26px, 2.6vw, 38px); background: transparent; border-color: var(--line); box-shadow: none; }
.sp-inst.is-min .ins__top { margin-bottom: clamp(22px, 2.4vw, 32px); }
.ia__chat { display: grid; gap: 18px; min-height: 196px; align-content: start; }
.sp-inst.is-min .ins__top .seg button { white-space: nowrap; }
.ia__q { font: 300 clamp(19px, 1.45vw, 23px)/1.35 var(--serif); font-style: italic; letter-spacing: -.01em; color: var(--muted); }
.ia__q::before { content: "“"; } .ia__q::after { content: "”"; }
.ia__a { display: grid; gap: 14px; }
.ia__say { font: 300 clamp(22px, 1.8vw, 28px)/1.28 var(--serif); letter-spacing: -.015em; min-height: 2.56em; }
.ia__say b { font-weight: 400; color: var(--accent); }
.ia__list { display: flex; flex-wrap: wrap; gap: 6px 22px; counter-reset: ia; }
.ia__list li { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14.5px; color: var(--muted); animation: wIn .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.ia__list li > span:first-child { font: 400 11px/1 var(--mono); color: var(--faint); }
.ia__list li small { display: none; }
.ia__list li.is-you { color: var(--fg); }
.ia__list li.is-you b { font-weight: 500; box-shadow: inset 0 -1px 0 var(--accent); }
.ia__list li b { font-weight: 400; }
.ia__src { font-size: 12.5px; color: var(--faint); }
.ia__src i { font-style: normal; }
.ia__src i + i::before { content: " · "; }
.ia__src i.is-you { color: var(--fg); }
.ia__miss { font-size: 13px; color: var(--muted); }
.ia__miss:empty { display: none; }
.ia__miss b { color: var(--accent); font-weight: 500; }
.ia__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.ia__brand { display: flex; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--faint); }
.ia__brand input { width: 170px; height: 32px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--fg); font: 400 15px/1 var(--sans, inherit); transition: border-color .3s; }
.ia__brand input:focus { outline: none; border-bottom-color: var(--accent); }
.ia__ctl .ins__note { margin: 0; }

/* search: the results page, and your page climbing it */
.is__box { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; }
.is__box svg { flex-shrink: 0; color: var(--faint); }
.is__list { position: relative; height: calc(7 * 40px); margin-top: 14px; }
.is__list li { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--muted); transform: translateY(calc(var(--i) * 40px)); transition: transform .7s var(--ease), opacity .5s, background-color .4s; white-space: nowrap; }
.is__list li span:first-child { font: 400 11px/1 var(--mono); color: var(--faint); }
.is__list li b { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
/* rows are solid, and yours travels above the rest, so a climb never shows two titles on top of each other */
.is__list li { background: color-mix(in srgb, var(--fg) 4.5%, var(--bg)); }
.is__list li.is-off { opacity: 0; pointer-events: none; }
.is__list li.is-you { z-index: 2; color: var(--fg); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); box-shadow: inset 2px 0 0 var(--accent); }
.is__list li.is-you small { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.is__more { height: 22px; margin-top: 4px; padding-left: 12px; font-size: 13px; color: var(--muted); transition: opacity .4s; }
.is__more b { color: var(--accent); font-weight: 500; }
.is__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 12px; }
.is__ctl label { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.is__ctl output { color: var(--fg); margin-left: 6px; }

/* paid: the terms that will never buy */
.ip__terms { display: grid; gap: 4px; }
.ip__t { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 64px 82px; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; text-align: left; font-size: 14px; transition: background-color .3s, color .3s; }
.ip__t:hover { background: var(--card-2); }
.ip__t .ip__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip__t .ip__s { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.ip__t .ip__c { font: 400 11px/1 var(--mono); text-align: right; color: var(--muted); }
.ip__t.is-junk .ip__c { color: var(--faint); }
.ip__t[aria-pressed="true"] { color: var(--faint); }
.ip__t[aria-pressed="true"] .ip__q { text-decoration: line-through; text-decoration-color: var(--accent); }
.ip__t[aria-pressed="true"] .ip__c { color: var(--accent); }
.ip__bar { display: block; height: 4px; margin-top: 10px; border-radius: 9px; background: var(--line); overflow: hidden; }
.ip__bar i { display: block; height: 100%; width: var(--w, 100%); background: var(--accent); transition: width .8s var(--ease); }
.ip__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.ip__acts .btn { height: 40px; padding: 0 18px; font-size: 13.5px; }
.ip__say { min-height: 1.4em; margin-top: 10px; font-size: 13px; color: var(--accent); }

/* experience: a funnel, and what each fix does to it */
.ie__funnel { display: grid; gap: 10px; }
.ie__funnel li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font-size: 14px; }
.ie__funnel li > span:first-child { color: var(--muted); }
.ie__bar { height: 30px; border-radius: 8px; background: var(--line); overflow: hidden; }
.ie__bar i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); transition: width 1s var(--ease); }
.ie__funnel li:first-child .ie__bar i { background: color-mix(in srgb, var(--fg) 30%, transparent); }
.ie__funnel b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ie__fixes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ie__fix { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); transition: color .3s, border-color .3s, background-color .3s; }
.ie__fix::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .3s, border-color .3s; }
.ie__fix[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ie__fix[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }

/* lifecycle: a journey that builds itself, and branches */
.il__flow { position: relative; display: grid; gap: 8px; justify-items: center; }
.il__node { width: min(100%, 300px); padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 12px; text-align: center; font-size: 13.5px; line-height: 1.35; transition: border-color .4s, background-color .4s, opacity .6s var(--ease), transform .6s var(--ease); }
.il__node span { display: block; font: 400 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.il__start { border-radius: 999px; background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 500; }
.il__fork { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 6px 0; }
.il__paths { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.il__path { display: grid; gap: 8px; align-content: start; justify-items: center; }
.il__lab { font-size: 12px; color: var(--muted); }
.il__flow .il__node.is-hit { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.il__flow .il__start.is-hit { background: var(--fg); }
.il__flow:not(.is-built) .il__node, .il__flow:not(.is-built) .il__fork, .il__flow:not(.is-built) .il__lab { opacity: 0; transform: translateY(10px); }
.il__flow .il__node, .il__flow .il__fork, .il__flow .il__lab { transition-delay: calc(var(--n, 0) * 90ms); }
.il__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); opacity: 0; pointer-events: none; z-index: 2; }
.il__ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.il__ctl .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }

/* agentic: the agent's log, with the calls that wait for you */
.ig__log { display: grid; gap: 6px; min-height: 300px; align-content: end; }
.ig__log li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; background: var(--card); animation: kwIn .5s var(--ease) both; }
.ig__log li time { font: 400 11px/1.5 var(--mono); color: var(--faint); }
.ig__log li.is-old { opacity: .45; }
.ig__log li.is-ask { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.ig__log li.is-ask p { font-weight: 500; }
.ig__ask { display: flex; gap: 8px; margin-top: 8px; }
.ig__ask button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-2); }
.ig__ask button:first-child { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ig__log li .ig__done { display: block; margin-top: 4px; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ---------- 01 where it breaks ---------- */
.sp-fit { padding-block: var(--sec); }
.sp-who { display: inline-flex; gap: 4px; padding: 4px; margin-top: clamp(56px, 7vw, 100px); border-radius: 999px; border: 1px solid var(--line-2); }
.sp-who button { padding: 11px 22px; border-radius: 999px; font-size: 15px; color: var(--muted); transition: color .3s, background-color .5s var(--ease); }
.sp-who button:hover { color: var(--fg); }
.sp-who [aria-checked="true"] { background: var(--fg); color: var(--bg); }
.sp-fit__sets { display: grid; margin-top: 30px; }
.sp-fit__set { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); padding-top: 34px; border-top: 1px solid var(--line-2); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .sp-fit__set:not(.is-on) { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.sp-fit__big { margin-top: 14px; font: 300 clamp(28px, 2.7vw, 46px)/1.14 var(--serif); letter-spacing: -.02em; text-wrap: pretty; }
.sp-fit__tools { margin-top: 24px; font-size: 15px; color: var(--muted); }
.sp-fit__tools .linkish { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.sp-fit__pains li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 20px 0; border-top: 1px solid var(--line); }
.sp-fit__pains li:first-child { border-top: 0; padding-top: 0; }
.sp-fit__pains .sp-n { grid-row: span 3; padding-top: 6px; }
.sp-fit__pains b { font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; }
.sp-fit__pains small { font-size: 13.5px; color: var(--faint); }
.sp-fit__with { margin-top: 6px; font-size: 14px; color: var(--muted); }
.sp-fit__with a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* ---------- 02 what's included: build your scope ---------- */
.sp-scope { padding-block: var(--sec); }
.sp-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 92px); border-top: 1px solid var(--line-2); }
.sp-pillar { padding: 26px 24px 32px 0; border-right: 1px solid var(--line); }
.sp-pillar + .sp-pillar { padding-left: 24px; }
.sp-pillar:last-child { border-right: 0; }
.sp-pillar .sp-n { display: block; font-family: var(--serif); font-size: clamp(64px, 6.4vw, 112px); font-weight: 200; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.sp-pillar h3 { margin-top: 20px; font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.sp-pillar > p:not(.sp-n) { margin-top: 8px; min-height: 3em; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sp-pillar ul { margin-top: 18px; }
.sp-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; text-align: left; color: var(--fg); transition: color .3s; }
.sp-item::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--accent); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.sp-item[aria-pressed="false"] { color: var(--faint); }
.sp-item[aria-pressed="false"]::after { background-color: transparent; background-image: none; border-color: var(--line-2); transform: scale(.86); }
.sp-item:hover { color: var(--fg); }
.sp-scope__out { margin-top: clamp(36px, 4vw, 56px); }

/* ---------- 03 how it runs ---------- */
.sp-how { padding-block: var(--sec); }
.sp-time { margin-top: clamp(48px, 6vw, 92px); }
.sp-time__top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 30px; }
.sp-time__now b { display: block; font: 300 clamp(44px, 5.4vw, 92px)/1 var(--serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sp-time__now span { display: block; margin-top: 12px; min-height: 1.5em; font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); }
.sp-time__hint { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sp-time__chart { position: relative; height: clamp(190px, 21vw, 300px); margin-top: 26px; }
.sp-time__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc__grid { stroke: var(--line); stroke-width: 1; }
.tc__tick { fill: var(--faint); font: 400 10.5px var(--mono); letter-spacing: .06em; }
.tc__band { fill: var(--fg); opacity: .012; }
.tc__band.is-on { opacity: .035; }
.tc__base { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tc__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.tc__area { fill: var(--accent); opacity: .12; }
.tc__mark { stroke: var(--line-2); stroke-dasharray: 2 4; }
.tc__mark.is-hit { stroke: var(--accent); }
.tc__now { stroke: var(--fg); stroke-width: 1; opacity: .5; }
.tc__dot { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
#timeRange { width: 100%; margin-top: 18px; }
.sp-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--line-2); }
.sp-phases li { padding: 22px 22px 0 0; opacity: .42; transition: opacity .5s var(--ease); }
.sp-phases li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.sp-phases li.is-done { opacity: .72; }
.sp-phases li.is-on { opacity: 1; }
.sp-phases li.is-on .sp-n { color: var(--accent); }
.sp-phases b { display: block; margin-top: 14px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.sp-phases small { display: block; margin-top: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sp-phases p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.sp-time__note { margin-top: 34px; font-size: 13px; color: var(--faint); }

/* ---------- 04 proof ---------- */
.sp-proof { padding-top: var(--sec); padding-bottom: clamp(40px, 6vw, 90px); }
.sp-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(48px, 6vw, 84px); }
.sp-case { display: flex; flex-direction: column; gap: 10px; min-height: 360px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .4s, background-color .4s, transform .6s var(--ease); }
.sp-case:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-4px); }
.sp-case__tag { font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sp-case__client { display: flex; align-items: center; margin-top: 8px; font-size: 14px; color: var(--muted); }
.sp-case__client { min-height: 64px; }
.sp-case__client .mark { --mk: 4.4em; top: 0; margin: 0; }
/* the logo spells the name out; the name stays for screen readers, and shows only if the logo can't load */
.js .sp-case__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sp-case__title { font: 300 23px/1.15 var(--serif); letter-spacing: -.015em; text-wrap: pretty; }
.sp-case__fig { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.sp-case__fig b { display: block; font: 300 clamp(44px, 4vw, 64px)/1 var(--serif); letter-spacing: -.04em; color: var(--accent); }
.sp-case__fig b.is-word { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--fg); }
.sp-case__fig span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.sp-case__fig span em { color: var(--fg); }
.sp-case__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; color: var(--muted); transition: color .3s, gap .4s var(--ease); }
.sp-case:hover .sp-case__go { color: var(--fg); gap: 10px; }
.sp-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); margin-top: clamp(64px, 8vw, 120px); }
.sp-quote { display: grid; gap: 14px; align-content: start; }
.sp-quote blockquote { font: 300 italic clamp(28px, 3.1vw, 50px)/1.06 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.sp-quote figcaption { font-size: 13px; color: var(--faint); }
/* the brands, in two rows that drift opposite ways, run faster and lean as you scroll, swell as they pass the middle,
   and show their own colours when you point at one */
.sp-logos { position: relative; margin-top: clamp(64px, 8vw, 120px); padding-block: 24px 28px; border-block: 1px solid var(--line); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sp-logos__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 12px; }
.sp-logos__k { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sp-logos__n { font-size: 13px; color: var(--faint); }
.sp-logos__n b { margin-right: 4px; font: 300 22px/1 var(--serif); letter-spacing: -.02em; color: var(--fg); }
.sp-logos__row { -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); cursor: grab; }
.sp-logos.is-dragging .sp-logos__row { cursor: grabbing; }
.sp-logos__track { display: flex; width: max-content; will-change: transform; }
.sp-logo { flex: none; width: clamp(140px, 12vw, 200px); height: 96px; display: flex; align-items: center; justify-content: center; container-type: size; border-radius: 18px; opacity: var(--o, 1); transform: scale(var(--k, 1)); transition: background-color .35s; }
.sp-logo img { filter: url(#clInkNight); }
.sp-logo.is-hot { background: #fbf8f2; }
.sp-logo.is-hot img { filter: none; mix-blend-mode: multiply; }

/* ---------- 05 what it costs ---------- */
.sp-price { padding-block: var(--sec); }
.sp-price__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(36px, 6vw, 120px); margin-top: clamp(48px, 6vw, 92px); align-items: start; }
.sp-band + .sp-band { margin-top: 48px; }
.sp-band__k { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sp-band__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 14px; }
.sp-band__v b { font: 300 clamp(50px, 6.4vw, 112px)/1 var(--serif); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sp-band__v span, .sp-band__v em { font-style: normal; font-size: clamp(16px, 1.4vw, 21px); color: var(--muted); }
.sp-band__bar { position: relative; height: 10px; margin-top: 30px; border-radius: 99px; background: var(--card-2); }
.sp-band__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease); }
.sp-band:not([data-hi]) .sp-band__fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent) 60%, transparent); }
.sp-band.in .sp-band__fill, .sp-bands.in .sp-band__fill { transform: none; }
.sp-band__mark { position: absolute; top: 50%; left: var(--at, 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fg) 14%, transparent); transition: left .9s var(--ease); }
.sp-band__mark span { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 11px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 400 11px/1 var(--mono); letter-spacing: .04em; }
.sp-band__mark.is-end span { left: auto; right: -2px; transform: none; }   /* near the top of the range the label lines up with the end, so it never runs off a phone */
.sp-band__mark.is-start span { left: -2px; transform: none; }
.sp-price__note { margin-top: 30px; max-width: 54ch; font-size: 13.5px; line-height: 1.55; color: var(--faint); }
.sp-drivers .sp-k { margin-bottom: 8px; }
.sp-drivers ul { margin-bottom: 36px; }
.sp-drivers li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.sp-drivers li:last-child { border-bottom: 1px solid var(--line); }
.sp-first { margin: 10px 0 30px; font: 300 clamp(22px, 1.9vw, 28px)/1.3 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.sp-drivers .btn { height: 56px; padding: 0 28px; font-size: 15.5px; }

/* ---------- 06 questions ---------- */

/* ---------- next: the next service's hero rises like a page as you scroll, until it fills the screen; opening it
   carries its headline across into the page itself ---------- */
.sp-next { position: relative; height: 210vh; height: 210svh; }
.sp-next__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; }
.sp-next__top { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-top: clamp(96px, 13vh, 130px); opacity: calc(1 - var(--e, 0) * 1.5); }
.sp-next__top .eyebrow { margin-bottom: 0; }
.sp-next__hint { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sp-next__foot { position: relative; z-index: 2; padding-top: 18px; opacity: calc(1 - var(--e, 0) * 1.5); }
.sp-next__bar { position: relative; display: block; height: 1px; overflow: hidden; background: var(--line); }
.sp-next__bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--e, 0)); }
.sp-next__all { margin-top: 18px; max-width: 70ch; font-size: 15px; line-height: 1.7; color: var(--muted); }
.sp-next__all a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.sp-next__all a:hover { text-decoration-color: var(--accent); }
.sp-next__big { position: absolute; inset: 0; z-index: 1; display: block; }
.sp-next__sheet { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; background: color-mix(in srgb, var(--fg) 5%, var(--bg)); box-shadow: inset 0 1px 0 var(--line-2);
  clip-path: inset(calc((1 - var(--e, 0)) * 60%) calc((1 - var(--e, 0)) * 5%) 0 calc((1 - var(--e, 0)) * 5%) round calc((1 - var(--e, 0)) * 34px) calc((1 - var(--e, 0)) * 34px) 0 0); }
.sp-next__mark { bottom: 0; --mx: 58%; --my: 48%; --r: 230px; }
.sp-next__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 22px; padding-bottom: clamp(48px, 9vh, 96px); transform: translateY(calc((1 - var(--e, 0)) * 18vh)); }
.sp-next__content > span { display: block; }
.sp-next__content > .sp-hero__live { display: inline-flex; }
/* the text keeps clear of the rising page's edges */
.sp-next__content { padding-inline: calc(var(--gutter) + (1 - var(--e, 0)) * 5vw); }
.sp-next__h1 { color: var(--fg); }
.sp-next__lede { max-width: 52ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--muted); }
.sp-next__content .sp-next__go { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 15px; font-weight: 500; transition: gap .4s var(--ease), background-color .3s, color .3s; }
.sp-next__go svg { width: 16px; height: 16px; }
.sp-next__big:hover .sp-next__go, .sp-next__big:focus-visible .sp-next__go { gap: 16px; background: var(--accent); color: #fff; }
.sp-next__big:focus-visible { outline: none; }
.sp-next__big:focus-visible .sp-next__sheet { box-shadow: inset 0 0 0 2px var(--accent); }

/* moving between services: the headline carries across (where the browser can) */
@view-transition { navigation: auto; }
.sp-hero .sp-h1 { view-transition-name: sp-title; }
::view-transition-group(sp-title) { animation-duration: .7s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
.is-turned .sp-hero [data-split] .sw__i { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .sp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-pillar:nth-child(2) { border-right: 0; }
  .sp-pillar:nth-child(3) { padding-left: 0; }
  .sp-pillar:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .sp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-hero { min-height: 0; }
  .sp-hero__grid { grid-template-columns: 1fr; }
  .sp-inst { min-height: 0; }
  .sp-ctas { justify-content: flex-start; }
  .sp-inst { min-height: 0; }
  .sp-mark { font-size: clamp(200px, 62vw, 420px); bottom: 56px; }
  .sp-next { height: 180vh; height: 180svh; }
  .sp-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-six a:nth-child(4) { padding-left: 0; border-left: 0; }
  .sp-six a:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .sp-fit__set { grid-template-columns: 1fr; }
  .sp-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-phases li:nth-child(3) { padding-left: 0; border-left: 0; }
  .sp-phases li:nth-child(n + 3) { margin-top: 18px; }
  .sp-quotes { grid-template-columns: 1fr; }
  .sp-price__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sp-eb { display: none; }
  .sp-facts li { padding-right: 16px; margin-right: 16px; }
  .sp-facts li:nth-child(2) { border-right: 0; margin-right: 0; }
  .sp-facts li:nth-child(3) { display: none; }   /* the reply time rides in the bar at the bottom */
  .sp-eb { display: none; }
  .sp-logo { width: 128px; height: 80px; }
  .sp-next__content { gap: 16px; }
  .sp-six a { font-size: 13px; padding-right: 8px; }
  .sp-six a + a { padding-left: 10px; }
  .sp-pillars, .sp-cases { grid-template-columns: 1fr; }
  .sp-pillar, .sp-pillar + .sp-pillar { padding: 24px 0 28px; border-right: 0; }
  .sp-pillar + .sp-pillar { border-top: 1px solid var(--line); }
  .sp-pillar > p:not(.sp-n) { min-height: 0; }
  .sp-case { min-height: 0; }
  .sp-phases { grid-template-columns: 1fr; }
  .sp-phases li, .sp-phases li + li { padding: 18px 0 0; border-left: 0; margin-top: 0; }
  .ip__t { grid-template-columns: minmax(0, 1fr) 54px 70px; padding-inline: 8px; }
  .ie__funnel li { grid-template-columns: 84px minmax(0, 1fr) 54px; gap: 8px; font-size: 13px; }
  .is__list li { font-size: 13px; }
}

/* ---------- reduced motion: everything is simply there ---------- */
html[data-motion="reduced"] .sp-hero__glow { transition: none; translate: none; }
html[data-motion="reduced"] .sp-logos__track { flex-wrap: wrap; justify-content: center; width: auto; transform: none !important; }
html[data-motion="reduced"] .sp-logos__track [aria-hidden="true"] { display: none; }
html[data-motion="reduced"] .sp-logos__row { -webkit-mask: none; mask: none; cursor: default; }
html[data-motion="reduced"] .sp-next { height: auto; }
html[data-motion="reduced"] .sp-next__stage { position: relative; height: 92vh; height: 92svh; }
html[data-motion="reduced"] .is__list li, html[data-motion="reduced"] .ie__bar i, html[data-motion="reduced"] .sp-band__fill, html[data-motion="reduced"] .sp-band__mark { transition: none; }
html[data-motion="reduced"] .il__flow .il__node, html[data-motion="reduced"] .il__flow .il__fork, html[data-motion="reduced"] .il__flow .il__lab { transition: none; }
html[data-motion="reduced"] .ia__list li, html[data-motion="reduced"] .ig__log li { animation: none; }