/* service-v2.css
   Page styles for the service detail pages on the v2 design system.
   Loads after tokens.css, partials.css and home-v2.css and adds only the
   patterns home-v2.css does not already carry. Everything else on the page
   reuses home-v2.css: .wrap .dark .warm .grain .sig .ch-head .ch-split .ghost
   .ovl .h2 .lead .btn .rv .bf .shot .cap-l .rail .pr-g .wg .wk .faq .fi
   .cta-g .cl .tags .trio .spec .hlist .pq .mod .big-metric.
   No heading font-size is set here. tokens.css owns the scale.
*/

/* ── breadcrumbs ─────────────────────────────────────────── */
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--gray-s);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--paper);border-bottom-color:var(--paper)}
.crumbs [aria-current]{color:var(--acid)}
.crumbs .sep{color:var(--gray);speak:none}
section:not(.dark) .crumbs a{color:var(--gray)}
section:not(.dark) .crumbs a:hover{color:var(--black);border-bottom-color:var(--black)}
section:not(.dark) .crumbs [aria-current]{color:var(--black)}

/* ── 00 service hero ─────────────────────────────────────── */
.svc-hero{padding:132px 0 120px}
@media(max-width:960px){.svc-hero{padding:104px 0 88px}}
.svc-hero-g{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center;margin-top:34px}
@media(max-width:1024px){.svc-hero-g{grid-template-columns:1fr;gap:52px}}
.svc-hero h1{max-width:15ch}
.svc-hero .sub{font-weight:600;color:var(--acid);font-size:clamp(.98rem,1.5vw,1.18rem);margin:20px 0 16px;letter-spacing:-0.02em;max-width:46ch}
.svc-hero .lead{max-width:52ch}
.svc-hero .lead+.lead{margin-top:14px}
.svc-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* trust points, a mono ledger rather than animated counters */
.tp{list-style:none;border-top:1px solid var(--ld);margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.tp li{padding:16px 18px 16px 0;border-bottom:1px solid var(--ld);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--gray-s);line-height:1.55;display:flex;gap:10px}
.tp li::before{content:"";flex:0 0 5px;height:5px;margin-top:7px;border-radius:50%;background:var(--acid)}
.tp li:nth-child(odd){padding-right:26px;border-right:1px solid var(--ld)}
@media(max-width:520px){.tp{grid-template-columns:1fr}.tp li:nth-child(odd){border-right:0;padding-right:0}}

/* layered real project composition */
.comp{position:relative;display:grid;gap:18px}
.comp figure{position:relative;margin:0}
.comp figure:nth-child(2){margin-left:9%}
.comp figure:nth-child(3){margin-left:18%}
@media(max-width:1024px){.comp figure:nth-child(2),.comp figure:nth-child(3){margin-left:0}}
.comp figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-s);margin-top:9px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.comp figcaption b{color:var(--acid);font-weight:400}
/* thin connector between the stacked frames */
.comp figure:not(:last-child)::after{content:"";position:absolute;left:22px;bottom:-19px;width:1px;height:19px;background:var(--ld)}
@media(max-width:1024px){.comp figure::after{display:none}}
.comp .bf .shot{aspect-ratio:16/9;object-fit:cover;object-position:top center}
/* charts are wide and short. cropping them to 16/9 would cut the metric tiles
   off the sides, so they keep their own ratio inside the frame. */
.comp-chart .bf .shot{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}

/* ── 02 service rows ─────────────────────────────────────── */
.svc-rows{border-top:1px solid var(--ll);margin-top:8px}
.svc-row{display:grid;grid-template-columns:78px 1.15fr 1fr;gap:36px;padding:44px 0;border-bottom:1px solid var(--ll);align-items:start}
@media(max-width:900px){.svc-row{grid-template-columns:56px 1fr;gap:22px;padding:36px 0}.svc-row .svc-del{grid-column:2}}
@media(max-width:520px){.svc-row{grid-template-columns:1fr;gap:16px}.svc-row .svc-del{grid-column:1}}
.svc-row .num{font-weight:700;font-size:2.1rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--black);opacity:.32}
.svc-row h3{margin-bottom:10px}
.svc-row>div>p{color:var(--gray);font-size:14.5px;line-height:1.7;max-width:46ch}
.svc-row .tg{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.svc-row .tg span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:5px 11px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
.svc-row .rl{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--black);text-decoration:none;border-bottom:1px solid var(--ll);padding-bottom:3px}
.svc-row .rl:hover{border-bottom-color:var(--black)}
.svc-del h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--ll);margin-bottom:12px}
.svc-del ul{list-style:none;columns:2;column-gap:24px}
.svc-del li{font-size:13.5px;line-height:1.75;padding-left:15px;position:relative;break-inside:avoid}
.svc-del li::before{content:"+";position:absolute;left:0;color:var(--gray);font-family:var(--mono);font-size:11px;top:2px}
@media(max-width:520px){.svc-del ul{columns:1}}

/* ── flow rails, used in 01 and 03 ───────────────────────── */
.flow{list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:0;border-top:1px solid var(--ll);border-bottom:1px solid var(--ll);margin:40px 0 0}
.dark .flow{border-color:var(--ld)}
/* content sits off the divider, never flush against it. the first cell keeps a
   zero left inset so it still lines up with the section heading above it. */
.flow li{flex:1 1 0;min-width:118px;padding:22px 20px;border-right:1px solid var(--ll);position:relative}
.flow li:first-child{padding-left:0}
.dark .flow li{border-right-color:var(--ld)}
.flow li:last-child{border-right:0;padding-right:0}
.flow em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--gray);display:block;margin-bottom:8px}
.dark .flow em{color:var(--gray-s)}
.flow b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.45;display:block}
.dark .flow b{color:var(--paper)}
.flow li:last-child b{color:var(--black)}
.dark .flow li:last-child b{color:var(--acid)}
/* two per row: column one stays flush left, column two clears its divider */
@media(max-width:860px){
  .flow li{flex:1 1 44%;border-bottom:1px solid var(--ll)}
  .dark .flow li{border-bottom-color:var(--ld)}
  .flow li:nth-child(odd){padding-left:0}
  .flow li:nth-child(even){padding-left:20px;padding-right:0}
}
@media(max-width:420px){.flow li{flex:1 1 100%;border-right:0}.flow li:nth-child(even){padding-left:0}}

/* block, not inline-flex. as a flex container every text node between two
   inline links became its own flex item and the line broke into columns. */
.close-line{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gray);margin-top:26px;position:relative;padding-left:38px;line-height:1.95;max-width:80ch}
.close-line::before{content:"";position:absolute;left:0;top:.9em;width:26px;height:1px;background:currentColor}
.dark .close-line{color:var(--acid)}

/* ── 03 connected build, channel matrix ──────────────────── */
.chan{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ld);margin-top:44px}
@media(max-width:860px){.chan{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.chan{grid-template-columns:1fr}}
.chan>div{padding:24px 22px;border-right:1px solid var(--ld);border-bottom:1px solid var(--ld)}
.chan>div:nth-child(3n){border-right:0}
@media(max-width:860px){.chan>div:nth-child(3n){border-right:1px solid var(--ld)}.chan>div:nth-child(2n){border-right:0}}
@media(max-width:520px){.chan>div{border-right:0}}
.chan em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase;display:block;margin-bottom:9px}
.chan p{color:var(--gray-s);font-size:13.5px;line-height:1.65}

/* ── 06 foundation matrix ────────────────────────────────── */
.fnd{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
@media(max-width:1024px){.fnd{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fnd{grid-template-columns:1fr}}
.fnd>div{background:#F4F2EA;padding:26px 24px}
.fnd h3{margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.fnd h3 i{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
.fnd ul{list-style:none}
.fnd li{font-size:13.5px;line-height:1.8;color:var(--gray);padding-left:15px;position:relative}
.fnd li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray)}
.fnd-note{margin-top:28px;border-left:2px solid var(--black);padding:8px 0 8px 20px;font-size:14.5px;line-height:1.7;max-width:70ch}

/* ── 07 fit panels ───────────────────────────────────────── */
.fit-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:960px){.fit-g{grid-template-columns:1fr}}
.fit{border:1px solid var(--ll);padding:32px 28px;position:relative;display:flex;flex-direction:column}
.fit .tab{position:absolute;top:-13px;left:22px;background:var(--paper);border:1px solid var(--ll);padding:5px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase}
.fit h3{margin:10px 0 12px}
.fit h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;margin:22px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ll)}
.fit ul{list-style:none}
.fit li{font-size:13.5px;line-height:1.8;padding-left:15px;position:relative;color:var(--gray)}
.fit li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray)}
.fit .needs li{color:var(--black)}
.fit .needs li::before{background:var(--black)}

/* four audience panels rather than three business models */
.fit-g.four{grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.fit-g.four{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fit-g.four{grid-template-columns:1fr}}
.fit-g.four .fit{padding:28px 22px}

/* ── 08 difference blocks ────────────────────────────────── */
.diff{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--ld);border:1px solid var(--ld);margin-top:44px}
.diff>div{background:var(--black);padding:30px 26px}
.diff>div:nth-child(1),.diff>div:nth-child(2){grid-column:span 3}
.diff>div:nth-child(3),.diff>div:nth-child(4),.diff>div:nth-child(5){grid-column:span 2}
@media(max-width:960px){.diff{grid-template-columns:1fr 1fr}.diff>div:nth-child(n){grid-column:span 1}}
@media(max-width:560px){.diff{grid-template-columns:1fr}}
.diff em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase;display:block;margin-bottom:12px}
.diff h3{margin-bottom:10px}
.diff p{color:var(--gray-s);font-size:14px;line-height:1.7}

/* ── 09 technology stacks ────────────────────────────────── */
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
@media(max-width:1024px){.stack{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stack{grid-template-columns:1fr}}
.stk{border-top:2px solid var(--black);padding-top:20px}
.stk h3{margin-bottom:8px}
.stk>p{color:var(--gray);font-size:13.5px;line-height:1.65;margin-bottom:16px}
.stk h4{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;margin-bottom:10px}
.stk ul{list-style:none}
.stk li{font-size:13.5px;line-height:1.8;padding-left:15px;position:relative;color:var(--gray)}
.stk li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray)}
.integr{margin-top:56px;border-top:1px solid var(--ll);padding-top:26px}
.integr em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:16px}
.integr .tags{margin:0}

/* ── 04 project grid ─────────────────────────────────────
   11 cards, one of them wide. The wide card spans two columns at both 3 and 2
   columns, so the cell count is 12 either way and every row fills exactly:
   4 rows at 3 columns, 6 rows at 2, 11 at one. Changing the card count means
   rechecking this, an odd total with no wide card leaves a hole. */
.wk .bf .shot{aspect-ratio:16/10;object-fit:cover;object-position:top center}
@media(min-width:641px){
  .wg .wk-wide{grid-column:span 2}
  .wg .wk-wide p{max-width:62ch}
}
@media(min-width:961px){.wg .wk-wide .bf .shot{aspect-ratio:16/7.4}}
/* development placeholder, never ships as final content */
.wk .ph-need{min-height:170px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:22px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);background-image:linear-gradient(var(--ll) 1px,transparent 1px),linear-gradient(90deg,var(--ll) 1px,transparent 1px);background-size:24px 24px}
.wk .ph-need b{color:var(--black);font-weight:500}
.wk .ph-need code{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;text-transform:none;word-break:break-all;color:var(--gray)}

/* ── verified results, large editorial blocks ────────────── */
.res{border-top:1px solid var(--ll);margin-top:8px}
.res-i{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;padding:52px 0;border-bottom:1px solid var(--ll);align-items:center}
.res-i.flip{grid-template-columns:1.08fr .92fr}
.res-i.flip .res-m{order:-1}
/* stacked, the text always leads so the metric is read before the chart */
@media(max-width:960px){.res-i,.res-i.flip{grid-template-columns:1fr;gap:32px;padding:44px 0}.res-i.flip .res-m{order:0}}
.res-i .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:14px}
.res-i h3{margin-bottom:16px}
.res-i>div>p{color:var(--gray);font-size:14.5px;line-height:1.75;max-width:52ch}
.res-fig{border-top:2px solid var(--black);padding-top:20px;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end}
.res-fig b{font-family:var(--mono);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-0.02em;line-height:1;display:block}
.res-fig small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;display:block;margin-top:9px;line-height:1.5}
.res-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gray);margin-top:18px;display:flex;align-items:baseline;gap:10px;line-height:1.6}
.res-src::before{content:"";flex:0 0 18px;height:1px;background:currentColor;transform:translateY(-4px)}
.res-m .bf .shot{display:block;width:100%;height:auto;background:#fff}
.res-m figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gray);margin-top:12px;line-height:1.6}

/* ── audit matrix ────────────────────────────────────────── */
.audit{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ld);border:1px solid var(--ld);margin-top:44px}
/* six items in a four column grid leaves two empty cells showing the grid
   background as a grey block. use three columns when there are six. */
.audit.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.audit,.audit.six{grid-template-columns:1fr 1fr}}
/* .six has to be named here too. It is more specific than a bare .audit, so a
   single column rule on .audit alone never wins and the six item variant stays
   two across down to 320px, where the cells overflow. */
@media(max-width:560px){.audit,.audit.six{grid-template-columns:1fr}}
.audit>div{background:var(--black);padding:26px 24px}
.audit>div:nth-child(7){grid-column:span 2}
@media(max-width:560px){.audit>div:nth-child(7){grid-column:span 1}}
.audit h3{margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.audit h3 i{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--acid)}
.audit ul{list-style:none}
.audit li{font-size:13.5px;line-height:1.8;color:var(--gray-s);padding-left:15px;position:relative}
.audit li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray-s)}
@media(min-width:561px){.audit>div:nth-child(7) ul{columns:2;column-gap:28px}.audit>div:nth-child(7) li{break-inside:avoid}}

/* ── local search split ──────────────────────────────────── */
.loc-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
@media(max-width:860px){.loc-g{grid-template-columns:1fr}}
.loc-g>div{background:#F4F2EA;padding:30px 28px}
.loc-g h3{margin-bottom:16px}
.loc-g ul{list-style:none;columns:2;column-gap:26px}
.loc-g li{font-size:13.5px;line-height:1.85;color:var(--gray);padding-left:15px;position:relative;break-inside:avoid}
.loc-g li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--gray)}
@media(max-width:520px){.loc-g ul{columns:1}}
.loc-g .models li{color:var(--black)}
.loc-g .models li::before{background:var(--black)}

/* ── content architecture ladder ─────────────────────────── */
.arch{border-top:1px solid var(--ll);margin-top:44px}
.arch-i{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--ll);align-items:baseline}
@media(max-width:780px){.arch-i{grid-template-columns:48px 1fr;gap:18px}.arch-i>p:last-child{grid-column:2}}
@media(max-width:480px){.arch-i{grid-template-columns:1fr;gap:8px}.arch-i>p:last-child{grid-column:1}}
.arch-i em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
.arch-i h3{letter-spacing:-0.015em}
.arch-i>p:last-child{color:var(--gray);font-size:14px;line-height:1.7}
.arch-note{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:44px}
@media(max-width:860px){.arch-note{grid-template-columns:1fr;gap:26px}}
.arch-note h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--ll);margin-bottom:14px}
.arch-note ul{list-style:none}
.arch-note li{font-size:14px;line-height:1.8;padding-left:16px;position:relative;color:var(--gray)}
.arch-note li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--gray)}

/* ── AI search grid ──────────────────────────────────────── */
.ai-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:960px){.ai-g{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ai-g{grid-template-columns:1fr}}
.ai-c{border:1px solid var(--ld);padding:28px 26px;position:relative}
.ai-c .tab{position:absolute;top:-13px;left:22px;background:var(--black);border:1px solid var(--ld);padding:5px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--acid);text-transform:uppercase}
.ai-c h3{margin:10px 0 12px}
.ai-c ul{list-style:none}
.ai-c li{font-size:13.5px;line-height:1.8;color:var(--gray-s);padding-left:15px;position:relative}
.ai-c li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--acid)}
.caution{margin-top:40px;border-left:2px solid var(--acid);padding:10px 0 10px 22px;color:var(--paper);font-size:15px;line-height:1.7;max-width:72ch}

/* ── result blocks on a dark section ─────────────────────── */
.dark .res{border-top-color:var(--ld)}
.dark .res-i{border-bottom-color:var(--ld)}
.dark .res-i .kick{color:var(--gray-s)}
.dark .res-i>div>p{color:var(--gray-s)}
.dark .res-fig{border-top-color:var(--acid)}
.dark .res-fig b{color:var(--acid)}
.dark .res-fig small,.dark .res-src,.dark .res-m figcaption{color:var(--gray-s)}
/* a result block with no screenshot of its own. borrowing another client's
   capture to fill the frame would misrepresent whose account it is, so these
   run full width as text instead. */
.res-i.solo{grid-template-columns:1fr;gap:0}
.res-i.solo>div{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.res-i.solo .res-work{margin-top:0}
@media(max-width:860px){.res-i.solo>div{grid-template-columns:1fr;gap:24px}}
.res-i.solo>div>.kick,.res-i.solo>div>h3,.res-i.solo>div>.res-fig,.res-i.solo>div>.res-src{grid-column:1/-1}
.res-i.solo>div>p{max-width:58ch}

.res-work{margin:22px 0 0}
.res-work h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--ll);margin-bottom:12px}
.dark .res-work h4{color:var(--gray-s);border-bottom-color:var(--ld)}
.res-work ul{list-style:none;columns:2;column-gap:26px}
.res-work li{font-size:13.5px;line-height:1.8;padding-left:15px;position:relative;break-inside:avoid;color:var(--gray)}
.res-work li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray)}
.dark .res-work li{color:var(--paper)}
.dark .res-work li::before{background:var(--acid)}
@media(max-width:520px){.res-work ul{columns:1}}

/* ── 03 channel comparison, two long editorial columns ───── */
.chan-2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ld);border:1px solid var(--ld);margin-top:44px}
@media(max-width:860px){.chan-2{grid-template-columns:1fr}}
.chan-2>div{background:var(--black);padding:34px 30px}
.chan-2 .pl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase;display:block;margin-bottom:14px}
.chan-2 h3{margin-bottom:12px}
.chan-2>div>p{color:var(--gray-s);font-size:14.5px;line-height:1.75;margin-bottom:22px}
.chan-2 h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--ld);margin-bottom:14px}
.chan-2 ul{list-style:none}
.chan-2 li{font-size:13.5px;line-height:1.85;color:var(--paper);padding-left:16px;position:relative}
.chan-2 li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--acid)}

/* ── 04 funnel stages, numbered ladder with explanations ─── */
.stage{border-top:1px solid var(--ll);margin-top:44px;counter-reset:st}
.dark .stage{border-top-color:var(--ld)}
.stage-i{display:grid;grid-template-columns:56px 210px 1fr;gap:30px;padding:22px 0;border-bottom:1px solid var(--ll);align-items:baseline}
.dark .stage-i{border-bottom-color:var(--ld)}
@media(max-width:820px){.stage-i{grid-template-columns:44px 1fr;gap:16px}.stage-i>p{grid-column:2}}
@media(max-width:480px){.stage-i{grid-template-columns:1fr;gap:6px}.stage-i>p{grid-column:1}}
.stage-i em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--gray)}
.dark .stage-i em{color:var(--acid)}
.stage-i b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.stage-i>p{color:var(--gray);font-size:14.5px;line-height:1.7}
.dark .stage-i>p{color:var(--gray-s)}

/* ── 12 measurement hierarchy, stepped levels ────────────── */
.lvl{margin-top:44px}
.lvl-i{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:28px 0;border-top:1px solid var(--ll);align-items:start}
.lvl-i:last-child{border-bottom:1px solid var(--ll)}
@media(max-width:760px){.lvl-i{grid-template-columns:1fr;gap:14px}}
.lvl-i .tier{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:8px}
.lvl-i h3{letter-spacing:-0.015em}
.lvl-i ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.lvl-i li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
/* the deepest level is the one that matters most, so it carries the accent */
.lvl-i:last-child li{border-color:var(--black);color:var(--black)}

/* ── landing page split with a real capture ──────────────── */
.lp-g{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-top:44px}
@media(max-width:960px){.lp-g{grid-template-columns:1fr;gap:34px}}
.lp-g ul{list-style:none;columns:2;column-gap:26px;margin-top:22px}
.lp-g li{font-size:13.5px;line-height:1.85;color:var(--gray);padding-left:15px;position:relative;break-inside:avoid}
.lp-g li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--gray)}
@media(max-width:520px){.lp-g ul{columns:1}}
/* the landing page capture is the evidence here, so it keeps its own ratio
   rather than being cropped to fit a frame */
.lp-g .bf .shot{display:block;width:100%;height:auto}

/* ── broken vs corrected flow ────────────────────────────── */
.flow-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:12px;margin:38px 0 0}
.flow-label::after{content:"";flex:1;height:1px;background:var(--ll)}
.dark .flow-label{color:var(--gray-s)}
.dark .flow-label::after{background:var(--ld)}
.flow.broken{margin-top:14px}
.flow.broken li{opacity:.55}
.flow.broken b{text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:2px}
.flow.broken li:last-child{opacity:1}
.flow.broken li:last-child b{text-decoration:none;color:var(--gray)}
/* the corrected path is the one carrying the accent, not the broken one */
.flow.fixed{margin-top:14px}
.flow.fixed li:last-child b{color:var(--black)}
.dark .flow.fixed li:last-child b{color:var(--acid)}

/* ── 05 CRM diagnosis ────────────────────────────────────── */
.diag{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;margin-top:44px}
@media(max-width:960px){.diag{grid-template-columns:1fr;gap:36px}}
.diag-n{font-family:var(--mono);font-weight:500;font-size:clamp(3rem,7vw,5.4rem);line-height:1;color:var(--acid);letter-spacing:-0.03em;display:block}
.diag-n small{display:block;font-size:11px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;margin-top:14px;line-height:1.7;max-width:26ch}
.diag-l{list-style:none;border-top:1px solid var(--ld);margin-top:8px}
.diag-l li{padding:13px 0;border-bottom:1px solid var(--ld);font-size:14px;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:baseline;color:var(--paper)}
.diag-l li::before{content:"\00d7";font-family:var(--mono);color:var(--gray-s);font-size:14px}

/* ── 07 custom integration, bidirectional chain ──────────── */
.int{display:flex;flex-wrap:wrap;align-items:stretch;border:1px solid var(--ld);margin-top:44px}
.int>div{flex:1 1 0;min-width:150px;padding:26px 22px;border-right:1px solid var(--ld);position:relative}
.int>div:last-child{border-right:0}
@media(max-width:900px){.int>div{flex:1 1 46%;border-bottom:1px solid var(--ld)}}
@media(max-width:520px){.int>div{flex:1 1 100%;border-right:0}}
.int em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--acid);display:block;margin-bottom:9px}
.int b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);display:block;line-height:1.45}
.int span{font-size:12.5px;color:var(--gray-s);line-height:1.65;display:block;margin-top:9px}
.guard{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ld);border:1px solid var(--ld);margin-top:28px}
@media(max-width:860px){.guard{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.guard{grid-template-columns:1fr}}
.guard>div{background:var(--black);padding:20px 18px}
.guard b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acid);display:block;margin-bottom:8px}
.guard p{font-size:12.5px;color:var(--gray-s);line-height:1.6}

/* ── 08 SMS vs email, light two-column comparison ────────── */
.chan-2.light{background:var(--ll);border-color:var(--ll)}
.chan-2.light>div{background:var(--paper)}
.chan-2.light .pl{color:var(--gray)}
.chan-2.light>div>p{color:var(--gray)}
.chan-2.light h4{color:var(--gray);border-bottom-color:var(--ll)}
.chan-2.light li{color:var(--black)}
.chan-2.light li::before{background:var(--black)}

/* ── 09 booking journey with a fork ──────────────────────── */
.jrn{border-top:1px solid var(--ll);margin-top:44px}
.jrn-i{display:grid;grid-template-columns:64px 220px 1fr;gap:28px;padding:20px 0;border-bottom:1px solid var(--ll);align-items:baseline}
@media(max-width:820px){.jrn-i{grid-template-columns:48px 1fr;gap:16px}.jrn-i>p{grid-column:2}}
@media(max-width:480px){.jrn-i{grid-template-columns:1fr;gap:6px}.jrn-i>p{grid-column:1}}
.jrn-i em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
.jrn-i b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.jrn-i>p{color:var(--gray);font-size:14px;line-height:1.7}
/* the fork: attended on one side, no-show on the other */
.jrn-fork{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ll);border-left:1px solid var(--ll);border-right:1px solid var(--ll);border-bottom:1px solid var(--ll)}
@media(max-width:700px){.jrn-fork{grid-template-columns:1fr}}
.jrn-fork>div{background:#F4F2EA;padding:24px 22px}
.jrn-fork em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:10px}
.jrn-fork b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:10px}
.jrn-fork ul{list-style:none}
.jrn-fork li{font-size:13.5px;line-height:1.8;color:var(--gray);padding-left:15px;position:relative}
.jrn-fork li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--gray)}

/* ── related services strip ──────────────────────────────── */
.rel{margin-top:64px;border-top:1px solid var(--ld);padding-top:28px}
.rel em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;display:block;margin-bottom:16px}
.rel nav{display:flex;flex-wrap:wrap;gap:10px}
.rel a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:9px 16px;border:1px solid var(--ld);border-radius:100px;color:var(--paper);text-decoration:none;transition:border-color .2s,color .2s}
.rel a:hover{border-color:var(--acid);color:var(--acid)}