/* ABECODS inner pages: Insights and Case studies (round 2: organised by journey stage).
   Shared components on top of v3 (v3.css, v3-layer.css, v3-r4.css); tokens come from v3.css :root.
   Radius system: cards 16px (--r-card), inputs 12px, pills and buttons fully rounded. One accent: lime. */

/* ---------- Frame ---------- */
body.inner { background: var(--bg); color: var(--text); font-family: var(--body); }
/* Small labels and captions use --faint; on these pages it is raised to pass WCAG AA (4.5:1) on the dark canvas */
body.inner { --faint: rgba(243, 240, 232, 0.62); }
.ix-main { padding-top: var(--hdr-h); }
.ix-sec { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.8rem 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.sec-head h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.sec-head > p { grid-column: 1 / -1; max-width: 52ch; color: var(--muted); font-size: 17px; margin-top: -0.2rem; }
.ti-h { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin-bottom: 0.9rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs i { font-size: 11px; color: var(--faint); }
.crumbs [aria-current] { color: var(--text); }

/* Tags: category (icon + label) and format or sector */
.pc-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cpill, .fpill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.cpill { color: var(--lime); background: rgba(206, 255, 94, 0.08); border: 1px solid rgba(206, 255, 94, 0.28); }
.fpill { color: var(--muted); background: var(--surface); border: 1px solid var(--glass-line); }
.cpill i, .fpill i { font-size: 14px; }
a.cpill:hover { background: rgba(206, 255, 94, 0.16); }

/* ---------- Hero (archives) ---------- */
.ix-hero { position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: radial-gradient(55% 80% at 88% 0%, rgba(30, 16, 199, 0.28), transparent 70%); }
.ix-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1040px) { .ix-hero-grid.split { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 4rem; } }
.ix-hero h1 { font-size: clamp(42px, 5.6vw, 88px); max-width: 13ch; margin-top: 1.2rem; }
.ix-hero .sec-lead { margin-top: 1.4rem; max-width: 44ch; }

/* Topic index: the archive's table of contents */
.topic-index, .glance { border-radius: var(--r-card); padding: 1.3rem 1.3rem 0.6rem; }
.topic-index ul, .glance ul { display: grid; }
.topic-index a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.85rem 0.2rem; border-top: 1px solid var(--line); transition: color 200ms; }
.topic-index li:first-child a { border-top: 0; }
.topic-index a > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--glass-line); font-size: 19px; color: var(--lime); transition: background 200ms, border-color 200ms; }
.topic-index strong { display: block; font-size: 15px; color: var(--text); }
.topic-index em { display: block; font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 0.1rem; }
.topic-index b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--faint); min-width: 2ch; text-align: right; transition: color 200ms; }
.topic-index a:hover > i { background: rgba(206, 255, 94, 0.12); border-color: rgba(206, 255, 94, 0.4); }
.topic-index a:hover b { color: var(--lime); }
.topic-index a:focus-visible, .glance a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 10px; }

.glance a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'c v' 's l'; column-gap: 1rem; padding: 0.85rem 0.2rem; border-top: 1px solid var(--line); }
.glance li:first-child a { border-top: 0; }
.g-client { grid-area: c; font-weight: 700; color: var(--text); font-size: 15px; }
.g-sector { grid-area: s; font-size: 13px; color: var(--muted); }
.glance b { grid-area: v; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--lime); text-align: right; }
.g-all { display: flex; align-items: center; justify-content: space-between; margin: 0.4rem -0.2rem 0.4rem; padding: 0.9rem 0.2rem 0.5rem; border-top: 1px solid var(--glass-line); font-size: 13.5px; font-weight: 700; color: var(--lime); }
.g-all:hover { color: var(--text); }
.glance em { grid-area: l; font-style: normal; font-size: 12px; color: var(--faint); text-align: right; }

/* ---------- Post cards ---------- */
.pc { display: flex; flex-direction: column; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); overflow: hidden; transition: border-color 300ms, transform 300ms var(--ease); }
.pc:hover { border-color: rgba(206, 255, 94, 0.45); transform: translateY(-3px); }
.pc:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.pc-img { overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-2); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.pc:hover .pc-img img { transform: scale(1.04); }
.pc-body { padding: 1.15rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.pc-body h3 { font-size: 18px; font-weight: 700; line-height: 1.32; color: var(--text); text-wrap: balance; }
.pc-body p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.pc-meta { margin-top: auto; padding-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 12.5px; color: var(--faint); }
.pc-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pc[hidden], .cs[hidden] { display: none; }
.pc.lg .pc-body { padding: 1.5rem 1.7rem 1.7rem; }
.pc.lg h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.03; }
.pc.lg .pc-body p { font-size: 16px; max-width: 52ch; }
@media (min-width: 640px) {
  .pc.row { flex-direction: row; }
  .pc.row .pc-img { flex: 0 0 38%; aspect-ratio: auto; }
  .pc.row .pc-img img { height: 100%; }
}

/* Start here: one lead guide, two supporting */
.start-grid { display: grid; gap: 1.4rem; }
@media (min-width: 1040px) { .start-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.start-side { display: grid; gap: 1.4rem; }

/* Library: toolbar, count, grid, empty state */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem; border: 1px solid var(--glass-line); border-radius: calc(var(--r-card) + 4px); background: var(--glass); }
.fchips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 9px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color 200ms, background 200ms, border-color 200ms; }
.fchip i { font-size: 15px; }
.fchip span { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--faint); }
.fchip:hover { color: var(--text); background: var(--surface); }
.fchip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.fchip[aria-pressed="true"] span { background: rgba(22, 22, 22, 0.14); color: var(--on-accent); }
.fchip:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.search { position: relative; flex: 1 1 240px; max-width: 340px; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--faint); pointer-events: none; }
.search input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.search input::placeholder { color: rgba(243, 240, 232, 0.55); }
.search input:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: transparent; }
@media (max-width: 700px) { .search { max-width: none; } }
.lib-count { margin: 1.1rem 0 1.2rem; font-size: 13px; color: var(--faint); }
.pgrid { display: grid; gap: 1.3rem; }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.empty { display: grid; justify-items: start; gap: 0.8rem; padding: 2rem; border: 1px dashed var(--glass-line); border-radius: var(--r-card); color: var(--muted); }
.empty > i { font-size: 26px; color: var(--faint); }

/* ---------- Article ---------- */
.art-hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.art-head { max-width: calc(980px + 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 1240px) { .art-head { max-width: var(--wrap); padding-left: calc(var(--gutter) + 200px + 3rem); } }
.art-tags { margin-top: 1.5rem; }
.art-hero h1 { font-size: clamp(34px, 3.7vw, 58px); line-height: 1.02; max-width: 24ch; margin: 1rem 0 1.1rem; }
.art-dek { font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.5; color: rgba(243, 240, 232, 0.78); max-width: 58ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 980px; }
.byline > img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.by-who strong { display: block; font-size: 15px; }
.by-who span { font-size: 13px; color: var(--muted); }
.byline dl { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-left: auto; }
.byline dt { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.byline dd { font-size: 14px; color: var(--text); margin-top: 0.15rem; }
@media (max-width: 700px) { .byline dl { margin-left: 0; width: 100%; } }

.art-grid { display: grid; gap: 2.5rem; padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.art-body { min-width: 0; max-width: 720px; margin-inline: auto; width: 100%; }
@media (min-width: 1000px) { .art-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 3.5rem; } .art-body { margin-inline: 0; } }
@media (min-width: 1240px) { .art-grid { grid-template-columns: 200px minmax(0, 1fr) 260px; gap: 3rem; } .art-body { max-width: 720px; } }

.toc { font-size: 13.5px; }
.toc-h, .rail-h { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin-bottom: 0.9rem; }
.toc ol, .toc-m ol { counter-reset: toc; display: grid; gap: 0.1rem; }
.toc li, .toc-m li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); padding: 7px 0; color: var(--muted); line-height: 1.38; transition: color 200ms; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 800; color: var(--faint); padding-top: 2px; transition: color 200ms; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); }
.toc a.on::before { color: var(--lime); }
.toc-progress { margin-top: 1rem; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.toc-progress i { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1000px) { .toc { position: sticky; top: calc(var(--hdr-h) + 1.5rem); align-self: start; } }
@media (max-width: 999px) { .toc { display: none; } }
.toc-m { margin-bottom: 1.6rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.toc-m summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: '+'; margin-left: auto; color: var(--lime); font-weight: 800; }
.toc-m[open] summary::after { content: '-'; }
.toc-m ol { padding: 0 1.1rem 1rem; }
.toc-m a { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); padding: 6px 0; color: var(--muted); font-size: 14px; }
.toc-m a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 800; color: var(--faint); padding-top: 2px; }
@media (min-width: 1000px) { .toc-m { display: none; } }

.summary { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .summary { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.answer, .takeaways { padding: 1.25rem 1.4rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.answer { background: radial-gradient(90% 140% at 0% 0%, rgba(206, 255, 94, 0.09), transparent 60%), var(--glass); }
.sum-h { display: flex; align-items: center; gap: 0.5rem; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); margin-bottom: 0.6rem; }
.sum-h i { font-size: 16px; }
.answer p:not(.sum-h) { font-size: 16.5px; line-height: 1.6; color: var(--text); }
.takeaways ul, .cs-card ul { display: grid; gap: 0.55rem; list-style: disc; margin-left: 1.1rem; }
.takeaways li, .cs-card li { font-size: 14.5px; line-height: 1.5; color: rgba(243, 240, 232, 0.86); padding-left: 0.2rem; }
.takeaways li::marker, .cs-card li::marker { color: var(--lime); }

.lead-fig { margin: 0 0 2.4rem; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.lead-fig img { width: 100%; height: auto; display: block; }
.lead-fig figcaption { padding: 0.7rem 1rem; font-size: 12.5px; color: var(--faint); }

.prose { font-size: 17px; line-height: 1.75; color: rgba(243, 240, 232, 0.84); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.04; color: var(--text); margin-top: 3.2rem; scroll-margin-top: calc(var(--hdr-h) + 1.2rem); text-wrap: balance; }
.prose h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-top: 2rem; }
.prose a:not(.tlink) { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { margin-left: 1.3rem; display: grid; gap: 0.5rem; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li::marker { color: var(--lime); }
.stat { display: grid; gap: 0.5rem; padding: 1.6rem 1.8rem; border-radius: var(--r-card); background: linear-gradient(135deg, rgba(30, 16, 199, 0.3), rgba(24, 24, 30, 0.6)); border: 1px solid var(--glass-line); margin-block: 2rem; }
.stat b { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 6vw, 80px); line-height: 1; color: var(--lime); }
.stat span { font-size: 15px; color: var(--muted); max-width: 46ch; line-height: 1.55; }
.stat .tlink { margin-top: 0.3rem; font-size: 14px; }
.pull { margin-block: 2.6rem; }
.pull > i { display: block; font-size: 34px; color: var(--lime); margin-bottom: 0.6rem; }
.pull blockquote p { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--text); font-weight: 300; }
.pull figcaption { margin-top: 0.8rem; font-size: 13.5px; color: var(--muted); }
.cmp-wrap { overflow-x: auto; margin-block: 1.6rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.cmp { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 13px 16px; vertical-align: top; }
.cmp thead th { color: var(--faint); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; background: rgba(255, 255, 255, 0.03); }
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--line); }
.cmp tbody th { color: var(--text); font-weight: 700; width: 30%; }
.cmp td { color: var(--muted); }
.art-faq { margin-top: 3.4rem; }
.art-faq > h2 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(28px, 2.7vw, 40px); margin-bottom: 1.2rem; scroll-margin-top: calc(var(--hdr-h) + 1.2rem); }
.art-end { display: grid; gap: 1.6rem; margin-top: 3rem; }
.sources { font-size: 14px; color: var(--muted); padding-top: 1.4rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
.sources h2 { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); font-family: var(--body); font-weight: 800; margin-bottom: 0.6rem; }
.sources ol { margin-left: 1.2rem; list-style: decimal; display: grid; gap: 0.3rem; }
.author { display: flex; gap: 1.1rem; align-items: center; padding: 1.3rem 1.5rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.author strong { display: block; color: var(--text); }
.author span { display: block; font-size: 14px; color: var(--muted); margin-top: 0.2rem; line-height: 1.5; }

/* Right rail (wide screens); below 1240px it sits under the article */
.rail { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 1000px) and (max-width: 1239px) { .rail { grid-column: 2; max-width: 720px; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1240px) { .rail { align-self: stretch; align-content: start; } .rail-stick { position: sticky; top: calc(var(--hdr-h) + 1.5rem); } }
.rail-stick { display: grid; gap: 1rem; }
@media (min-width: 1000px) and (max-width: 1239px) { .rail-stick { display: contents; } }
.rail-card { padding: 1.2rem 1.25rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.rail-card > p:not(.rail-h):not(.svc-name) { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 1rem; }
.svc-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 0.4rem; }
.svc-name i { color: var(--lime); font-size: 18px; }
.rail .btn { width: 100%; padding-inline: 12px; font-size: 12px; }
.rail-list { display: grid; margin-bottom: 0.9rem; }
.rail-list a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; line-height: 1.38; color: var(--text); }
.rail-list li:first-child a { border-top: 0; padding-top: 0; }
.rail-list a i { color: var(--lime); font-size: 16px; padding-top: 1px; }
.rail-list em { display: block; margin-top: 0.25rem; font-style: normal; font-weight: 400; font-size: 12px; color: var(--faint); }
.rail-list a:hover span { color: var(--lime); }
.rail .tlink { font-size: 13px; }
.news-rail { display: grid; gap: 0.6rem; background: radial-gradient(100% 120% at 100% 0%, rgba(30, 16, 199, 0.32), transparent 65%), var(--glass); }
.news-rail .rail-h { margin-bottom: 0.2rem; }
.nr-h { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text); }
.nr-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
.news-rail input[type="email"] { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.news-rail input[type="email"]::placeholder { color: rgba(243, 240, 232, 0.55); }
.news-rail input[type="email"]:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: transparent; }
.news-rail input[aria-invalid="true"] { border-color: var(--orange); }
.news-rail .btn { width: 100%; }
.news-rail .news-msg { font-size: 12.5px; color: var(--muted); min-height: 1em; }
.share { display: inline-flex; align-items: center; gap: 0.5rem; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.share:hover { border-color: rgba(206, 255, 94, 0.45); }
.share.done { color: var(--lime); }

.next-reads { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.next-grid { display: grid; gap: 1.3rem; }
@media (min-width: 760px) { .next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Case studies archive ---------- */
.cs-grid { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs { display: flex; flex-direction: column; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); overflow: hidden; transition: border-color 300ms, transform 300ms var(--ease); }
.cs:hover { border-color: rgba(206, 255, 94, 0.45); transform: translateY(-3px); }
.cs:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.cs-media { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; }
.cs-media img { width: 100%; height: 112%; object-fit: cover; position: absolute; inset: -6% 0 auto; will-change: transform; }
.cs-media.type { display: grid; place-items: center; background: radial-gradient(70% 90% at 30% 20%, rgba(30, 16, 199, 0.5), rgba(12, 12, 14, 0.2) 70%), var(--bg-2); }
.cs-media.type span { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.02; text-align: center; padding: 1.4rem; color: var(--text); text-wrap: balance; max-width: 12ch; }
.cs-media.shot { display: grid; place-items: center; padding: clamp(1rem, 2.4vw, 1.8rem); background: radial-gradient(80% 90% at 20% 10%, rgba(30, 16, 199, 0.4), rgba(12, 12, 14, 0.1) 70%), var(--bg-2); }
.cs-media.shot img.ph { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; }
.cs-media.shot img { position: static; height: auto; width: 100%; border-radius: 10px; border: 1px solid var(--glass-line); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); will-change: auto; }
.cs-body { padding: 1.3rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.cs-client { font-size: 13px; font-weight: 700; color: var(--muted); }
.cs-body h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.04; text-wrap: balance; }
.cs-chal { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.cs-chal b { color: var(--text); }
.cs-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: start; gap: 1rem 1.6rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.cs-nums .num { display: flex; flex-direction: column; min-width: 0; }
.cs-nums dd { order: -1; white-space: nowrap; }
.cs-nums dd { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; color: var(--text); }
.cs-nums div.hl dd { color: var(--lime); }
.cs-nums dt { margin-top: 0.3rem; font-size: 12.5px; color: var(--muted); max-width: 18ch; line-height: 1.35; }
.cs-basis { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.cs .tlink { margin-top: auto; padding-top: 0.3rem; }

/* Shared rows across each pair of cards (media, tags, client, title, challenge, figures, basis, link) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .cs-grid > .cs { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0; }
    .cs-grid > .cs > .cs-body { display: contents; }
    .cs-grid > .cs > .cs-body > * { margin-inline: 1.5rem; }
    .cs-grid > .cs > .cs-body > .pc-tags { margin-top: 1.3rem; }
    .cs-grid > .cs > .cs-body > * + * { margin-top: 0.85rem; }
    .cs-grid > .cs > .cs-body > .cs-nums { align-self: start; }
    .cs-grid > .cs > .cs-body > .tlink { align-self: end; margin-bottom: 1.5rem; }
    .cs-grid > .cs[hidden] { display: none; }
  }
}
.more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.more-wrap .btn[hidden] { display: none; }

/* How we work: one connected line of three steps, not three cards */
.method-steps { display: grid; gap: 1.6rem; position: relative; }
@media (min-width: 900px) { .method-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } .method-steps::before { content: ''; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: linear-gradient(90deg, var(--lime), var(--glass-line)); } }
.method-steps li { position: relative; display: grid; gap: 0.5rem; }
.method-steps i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid rgba(206, 255, 94, 0.45); color: var(--lime); font-size: 21px; position: relative; margin-bottom: 0.4rem; }
.method-steps strong { font-size: 17px; }
.method-steps span { color: var(--muted); font-size: 15px; max-width: 32ch; line-height: 1.55; }

/* ---------- Case study page ---------- */
.cs-hero h1 { font-size: clamp(38px, 5vw, 78px); max-width: 17ch; margin: 1rem 0 1.3rem; }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--glass-line); border-radius: var(--r-card); overflow: hidden; background: var(--glass-line); margin-top: 2rem; }
@media (min-width: 760px) { .cs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-facts div { background: var(--surface-2); padding: 0.95rem 1.1rem; }
.cs-facts dt { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.cs-facts dd { margin-top: 0.25rem; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; }
.glance-3 { display: grid; margin-top: 1rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.glance-3 > div { padding: 1.2rem 1.35rem; }
.glance-3 > div + div { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .glance-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .glance-3 > div + div { border-top: 0; border-left: 1px solid var(--line); } }
.glance-3 p:not(.sum-h) { font-size: 15px; line-height: 1.55; color: rgba(243, 240, 232, 0.86); }

/* Chapter bar: sticky map of the case study */
.chapters { position: sticky; top: var(--hdr-h); z-index: 20; background: rgba(12, 12, 14, 0.82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-block: 1px solid var(--line); transition: top 400ms var(--ease); }
.hdr.hidden ~ main .chapters { top: 0; }
.chapters ol { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.55rem; counter-reset: ch; }
.chapters ol::-webkit-scrollbar { display: none; }
.chapters li { counter-increment: ch; flex: none; }
.chapters a { display: inline-flex; gap: 0.5rem; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); transition: color 200ms, background 200ms; white-space: nowrap; }
.chapters a::before { content: counter(ch, decimal-leading-zero); font-size: 10.5px; color: var(--faint); }
.chapters a:hover { color: var(--text); }
.chapters a.on { color: var(--on-accent); background: var(--accent); }
.chapters a.on::before { color: rgba(22, 22, 22, 0.6); }
@supports not (backdrop-filter: blur(1px)) { .chapters { background: var(--bg); } }

.cs-sec { padding-block: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: calc(var(--hdr-h) + 64px); }
.cs-first { padding-top: clamp(2rem, 4vw, 3rem); }
.cs-ba { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--glass-line); aspect-ratio: 1280 / 607; height: auto; }
.ba-cap { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
.cs-cols { display: grid; gap: 1.8rem; }
@media (min-width: 1000px) { .cs-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } .cs-cols > div:first-child { position: sticky; top: calc(var(--hdr-h) + 90px); align-self: start; } }
.cs-cols h2 { font-size: clamp(32px, 3.8vw, 58px); line-height: 1.02; text-wrap: balance; }
.cs-side { margin-top: 1rem; color: var(--muted); font-size: 15px; }
.cs-text { max-width: 62ch; font-size: 17.5px; line-height: 1.7; color: rgba(243, 240, 232, 0.84); display: grid; gap: 1rem; }
.cs-split { display: grid; gap: 1rem; margin-top: 1.8rem; }
@media (min-width: 760px) { .cs-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-card { padding: 1.3rem 1.4rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); }
.cs-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: var(--lime); margin-bottom: 0.8rem; }
.cs-card h3 i { font-size: 16px; }

.did { display: grid; }
.did-item { display: grid; gap: 0.5rem 1.6rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.did-item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .did-item { grid-template-columns: 120px minmax(0, 1fr); } .did-item p { grid-column: 2; } }
.did-cat { padding-top: 0.2rem; }
.did-item h3 { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; }
.did-item p { color: rgba(243, 240, 232, 0.78); line-height: 1.6; max-width: 54ch; }

/* Results: the one pinned moment, grouped by what moved */
.cs-results { position: relative; background: radial-gradient(70% 70% at 80% 10%, rgba(30, 16, 199, 0.3), transparent 70%); scroll-margin-top: var(--hdr-h); }
.cs-results-in { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4rem, 8vw, 6rem); }
.cs-results h2 { font-size: clamp(40px, 5vw, 76px); }
.res-groups { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .res-groups { grid-template-columns: 1.4fr 1fr 0.7fr; gap: 3rem; } }
.res-g { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); padding-bottom: 0.8rem; border-bottom: 1px solid var(--glass-line); margin-bottom: 1.2rem; }
.res-g i { font-size: 16px; }
.res-item { margin-bottom: 1.3rem; }
.res-item b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; color: var(--text); }
.res-item.big b { color: var(--lime); font-size: clamp(56px, 7vw, 108px); }
.res-item span { display: block; margin-top: 0.4rem; font-size: 14px; color: var(--muted); max-width: 24ch; line-height: 1.4; }
.res-basis { margin-top: 1rem; font-size: 13.5px; color: var(--faint); max-width: 60ch; line-height: 1.55; }
.not-done { padding: 1.4rem 1.6rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); max-width: 70ch; }
.not-done p:not(.sum-h) { color: rgba(243, 240, 232, 0.85); line-height: 1.6; }
.cs-quote { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--hdr-h) + 64px); }
.q-mark { display: block; font-size: 40px; color: var(--lime); margin-bottom: 0.8rem; }
.cs-quote blockquote p { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.25; font-weight: 300; color: var(--text); max-width: 26ch; text-wrap: balance; }
.cs-quote .who { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; }
.cs-quote .who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cs-quote .who strong { display: block; color: var(--text); }
.cs-quote .who span span { font-size: 14px; color: var(--muted); }
.ke-grid { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .ke-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }
.ke-list { display: grid; gap: 1rem; }

/* Lab preview note (never shipped) */
.lab-note { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; max-width: 340px; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--muted); background: rgba(18, 18, 22, 0.92); border: 1px solid var(--glass-line); }
.lab-note b { color: var(--lime); }

/* Reduced motion and transparency: everything static and readable */
@media (prefers-reduced-motion: reduce) {
  .pc, .cs, .pc-img img, .chapters { transition: none; }
  .pc:hover, .cs:hover { transform: none; }
  .cs-media img { position: static; height: 100%; inset: auto; }
}
@media (prefers-reduced-transparency: reduce) { .chapters { background: var(--bg); backdrop-filter: none; } }
.news-rail > p:not(.rail-h) { margin-bottom: 0 !important; }
.news-rail .news-msg:empty { display: none; }
.glance a { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
.glance em { line-height: 1.35; }

/* Figures made of several images (guides) and extra case components */
.fig-grid { display: grid; gap: 0.6rem; padding: 0.6rem; background: var(--bg-2); }
.fig-grid.\32 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-grid.\34 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .fig-grid.\34 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fig-grid img { border-radius: 10px; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; }
.fig figcaption { padding: 0.7rem 1rem; font-size: 12.5px; color: var(--faint); }
.cs-summary { margin-top: 1rem; }
.cs-faq { display: grid; gap: 1.6rem; }
@media (min-width: 1000px) { .cs-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.cs-faq h2 { font-size: clamp(32px, 3.8vw, 58px); line-height: 1.02; }
.res-camp { margin-top: 0; }
.res-shows { margin-top: 1.4rem; max-width: 62ch; font-size: 17.5px; line-height: 1.65; color: rgba(243, 240, 232, 0.84); }
.did + .fig { margin-top: 2rem; }
.did ~ .fig + .fig { margin-top: 1.2rem; }
.fig-grid figcaption { grid-column: 1 / -1; padding: 0.2rem 0.4rem 0.3rem; }

/* ---------- Motion vocabulary (CSS driven) ----------
   Hero: pure CSS from first paint (html.motion is set in the head unless the visitor prefers reduced motion).
   Below the fold: hidden only under html.reveal-ready, which JavaScript adds; the IntersectionObserver adds .in once. */
@keyframes lnIn { from { transform: translateY(115%); } to { transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html.motion .hero-h .ln-mask > span { animation: lnIn 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
html.motion .ix-hero .crumbs { animation: riseIn 0.8s var(--ease) both; }
html.motion .ix-hero .art-tags { animation: riseIn 0.9s var(--ease) 0.12s both; }
html.motion .ix-hero .sec-lead, html.motion .ix-hero .art-dek { animation: riseIn 1s var(--ease) 0.5s both; }
html.motion .ix-hero .topic-index, html.motion .ix-hero .glance { animation: riseIn 1s var(--ease) 0.35s both; }
html.motion .ix-hero .byline { animation: riseIn 1s var(--ease) 0.62s both; }
html.motion .cs-hero .cs-facts { animation: riseIn 1s var(--ease) 0.62s both; }
html.motion .cs-hero .glance-3 { animation: riseIn 1s var(--ease) 0.74s both; }
html.motion .cs-hero .cs-summary { animation: riseIn 1s var(--ease) 0.86s both; }
html.reveal-ready [data-lines]:not(.hero-h) .ln-mask > span { transform: translateY(115%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 35ms); }
html.reveal-ready [data-lines].in:not(.hero-h) .ln-mask > span { transform: none; }
html.reveal-ready .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.reveal-ready .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.motion .hero-h .ln-mask > span, html.motion .ix-hero .crumbs, html.motion .ix-hero .art-tags, html.motion .ix-hero .sec-lead, html.motion .ix-hero .art-dek,
  html.motion .ix-hero .topic-index, html.motion .ix-hero .glance, html.motion .ix-hero .byline, html.motion .cs-hero .cs-facts, html.motion .cs-hero .glance-3, html.motion .cs-hero .cs-summary { animation: none; }
}

/* ---------- About (ABOUT_LOCK.md, round 1, 20 Oct 2026) ----------
   Same components and motion vocabulary as the other inner pages. No pinned moment: the founder portrait and the
   How we work heading use CSS sticky only. Mobile collapse is declared per section. */
.ix-hero h1 .accent { color: var(--lime); }
.ab-hero-cta { margin-top: 2rem; }
html.motion .ab-hero .ab-hero-cta { animation: riseIn 1s var(--ease) 0.62s both; }
html.motion .ab-hero .ab-facts { animation: riseIn 1s var(--ease) 0.35s both; }
.ab-facts { border-radius: var(--r-card); padding: 1.3rem 1.4rem 0.5rem; }
.ab-facts dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.95rem 0.1rem; border-top: 1px solid var(--line); }
.ab-facts dl > div:first-child { border-top: 0; }
.ab-facts dt { font-size: 14px; font-weight: 600; color: var(--muted); }
.ab-facts dd { display: grid; justify-items: end; gap: 3px; text-align: right; }
.ab-facts b { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; color: var(--lime); }
.ab-facts b.sm { font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text); max-width: 22ch; }
.ab-facts dd span { font-size: 12.5px; color: var(--faint); }

.ab-belief { padding-block: clamp(4rem, 9vw, 8rem); }
.ab-mani { font-size: clamp(30px, 3.7vw, 60px); line-height: 1.04; max-width: 27ch; }

.ab-founder-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .ab-founder-grid { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: 5rem; } .ab-portrait { position: sticky; top: 14vh; } }
.ab-portrait { max-width: 440px; }
.ab-letter h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1; max-width: 19ch; }
.ab-letter-body { display: grid; gap: 1.25rem; margin-top: 2rem; max-width: 58ch; }
.ab-letter-body p { font-size: clamp(17px, 1.35vw, 20px); font-weight: 300; line-height: 1.7; color: rgba(243, 240, 232, 0.82); }

/* Timeline: the lime line draws down the rail as you scroll; each year lights up as it reaches the line */
.tl { position: relative; --tl-year: 4.6rem; --tl-gap: 2.25rem; }
@media (min-width: 900px) { .tl { --tl-year: 24%; --tl-gap: 5rem; } }
.tl ol { display: grid; }
.tl-item { display: grid; grid-template-columns: var(--tl-year) var(--tl-gap) minmax(0, 1fr); align-items: center; padding-block: 1.4rem; }
@media (min-width: 900px) { .tl-item { padding-block: 2rem; } }
.tl-year { font-family: var(--display); font-size: clamp(34px, 6.4vw, 108px); line-height: 0.9; letter-spacing: 0.5px; color: var(--text); transition: color 700ms var(--ease); }
.tl-item.key .tl-year { color: var(--lime); }
.tl.live .tl-item:not(.on) .tl-year { color: rgba(243, 240, 232, 0.16); }
.tl-dot { justify-self: center; position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); border: 2px solid var(--lime); box-shadow: 0 0 0 6px rgba(206, 255, 94, 0.1); transition: background-color 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.tl.live .tl-item:not(.on) .tl-dot { background: var(--bg); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
.tl-rail { position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--tl-year) + var(--tl-gap) / 2 - 1px); background: var(--line); border-radius: 2px; }
.tl-rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(206, 255, 94, 0.35), var(--lime)); transform-origin: top; }
.tl-text h3 { font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.25; }
.tl-text p { margin-top: 0.4rem; max-width: 46ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--muted); }

/* What ABECODS is: four island tiles in an offset 7/5 then 5/7 rhythm, then the AI strip */
.ab-stages { display: grid; gap: 1rem; }
@media (min-width: 760px) { .ab-stages { grid-template-columns: repeat(12, minmax(0, 1fr)); } .ab-st { grid-column: span 6; } }
@media (min-width: 1040px) { .ab-st.st-build, .ab-st.st-retain { grid-column: span 7; } .ab-st.st-attract, .ab-st.st-convert { grid-column: span 5; } }
.ab-st a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--glass); overflow: hidden; transition: border-color 300ms var(--ease), transform 400ms var(--ease); }
.ab-st a:hover { border-color: rgba(206, 255, 94, 0.45); transform: translateY(-3px); }
.ab-st a:focus-visible, .ab-ai:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ab-st-img { position: relative; margin: 0; height: clamp(200px, 21vw, 320px); overflow: hidden; background: #08080a; }
.ab-st-img img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; transition: scale 600ms var(--ease); }
.ab-st a:hover .ab-st-img img { scale: 1.04; }
.ab-st-copy { display: grid; gap: 0.45rem; padding: 1.3rem 1.45rem 1.5rem; }
.ab-st-k { font-family: var(--display); font-size: clamp(28px, 2.5vw, 40px); line-height: 1; text-transform: uppercase; color: var(--lime); }
.ab-st-copy strong { font-size: 18px; line-height: 1.4; max-width: 38ch; }
.ab-st-s { font-size: 13.5px; color: var(--faint); }
.ab-ai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center; margin-top: 1rem; padding: 1.35rem 1.5rem; border-radius: var(--r-card); transition: border-color 300ms var(--ease); }
.ab-ai:hover { border-color: rgba(206, 255, 94, 0.45); }
.ab-ai > i { font-size: 30px; color: var(--lime); }
.ab-ai p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.ab-ai p strong { color: var(--text); }
.ab-ai .tlink { grid-column: 2; }
@media (min-width: 900px) { .ab-ai { grid-template-columns: auto minmax(0, 1fr) auto; } .ab-ai .tlink { grid-column: auto; white-space: nowrap; } }

/* How we work: sticky heading, principles in two columns */
.ab-how-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .ab-how-grid { grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: 4.5rem; } .ab-how-head { position: sticky; top: 18vh; align-self: start; } }
.ab-how-head h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1; max-width: 11ch; }
.ab-principles { display: grid; gap: 2rem; }
@media (min-width: 700px) { .ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem 2.4rem; } }
.ab-principles li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ab-principles i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(206, 255, 94, 0.45); color: var(--lime); font-size: 21px; }
.ab-principles strong { display: block; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; }
.ab-principles div > span { display: block; margin-top: 0.35rem; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* Who we work with: fit pairs, the logo wall (static, no marquee), one client quote */
.ab-fit { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 800px) { .ab-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-fit li { display: grid; align-content: start; grid-template-columns: 28px minmax(0, 1fr); gap: 0.35rem 0.9rem; padding-top: 1.3rem; border-top: 1px solid var(--glass-line); }
.ab-fit i { grid-row: span 2; color: var(--lime); font-size: 22px; margin-top: 2px; }
.ab-fit strong { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; }
.ab-fit li > span { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.ab-logos-h { margin-top: clamp(3rem, 5vw, 4.5rem); font-size: 14px; font-weight: 700; color: var(--muted); }
.cl-row.ab-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-inline: 0; margin-top: 1rem; }
.ab-logos .cl-tile { min-width: 0; padding-inline: 1rem; grid-template-columns: minmax(0, 1fr); }
.ab-logos .cl-logo { max-width: 100%; justify-self: center; }
.ab-portrait .founder-sig { align-self: flex-start; }
@media (min-width: 700px) { .cl-row.ab-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.ab-quote { margin: clamp(3.5rem, 6vw, 5.5rem) 0 0; }
.ab-quote .q-mark { font-size: 40px; color: var(--lime); }
.ab-quote blockquote p { margin-top: 0.6rem; font-size: clamp(23px, 2.4vw, 36px); line-height: 1.3; font-weight: 300; max-width: 44ch; text-wrap: balance; }
.ab-quote .who { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.ab-quote .who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ab-quote .who strong { display: block; }
.ab-quote .who span span { font-size: 14px; color: var(--muted); }

/* Finale on the About page: every direct channel is a link */
.contact-direct a:hover { color: var(--lime); }
.wa-pill { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.4rem; padding: 3px 11px 3px 9px; border-radius: 999px; border: 1px solid rgba(206, 255, 94, 0.4); color: var(--lime); font-size: 12.5px; font-weight: 700; transition: background-color 250ms var(--ease); }
.contact-direct .wa-pill i { font-size: 15px; }
.wa-pill:hover { background: rgba(206, 255, 94, 0.12); }
.author strong a:hover { color: var(--lime); }
.ab-next .method-steps li { align-content: start; }

@media (max-width: 767px) {
  .ab-hero-cta .btn { width: 100%; justify-content: center; }
  .ab-portrait { max-width: 320px; }
  .tl-item { padding-block: 1.1rem; }
  .ab-ai { padding: 1.2rem; }
  .ab-quote blockquote p { font-size: 23px; }
}

.sec-label.sec-label-off { opacity: 0; }

/* Reading (10 Nov 2026): lines break where they read best, never one stranded word on the last line */
main p, main li, main dd, main figcaption { text-wrap: pretty; }
main h3, main summary { text-wrap: balance; }

/* ======================================================================================================
   Solutions pages (services hub and service pages): sv-* components. One pinned 3D moment per page.
   Steps are discrete: copy is never unreadable mid-transition. Everything below animates transform and opacity only.
   Appended to inner.css by inner_build.py.
   ====================================================================================================== */
.sv-hero { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 1040px) { .sv-hero-grid.split { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 3.5rem; } }
.sv-hero h1 { max-width: 14ch; }
.sv-visual { position: relative; perspective: 1400px; }
.sv-frame { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--glass-line); background: #08080a; box-shadow: 0 40px 90px -34px rgba(30, 16, 199, 0.6); will-change: transform; }
.sv-frame img { width: 100%; height: 100%; object-fit: cover; }
.sv-obj { position: absolute; z-index: 2; width: clamp(84px, 11vw, 150px); height: auto; pointer-events: none; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.55)); animation: svFloat 6s ease-in-out infinite; }
.sv-obj.o1 { left: -5%; top: -9%; } .sv-obj.o2 { right: -4%; top: 16%; animation-delay: -2s; } .sv-obj.o3 { left: 9%; bottom: -10%; animation-delay: -4s; }
@keyframes svFloat { 50% { translate: 0 -12px; } }
html.motion .sv-hero .sv-visual { animation: riseIn 1.1s var(--ease) 0.25s both; }
html.motion .sv-hero .sv-glance { animation: riseIn 1s var(--ease) 0.7s both; }

.sv-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .sv-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-glance > div { display: grid; align-content: start; gap: 0.45rem; padding: 1.1rem 1.4rem 0.3rem 0; }
.sv-glance dt { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.sv-glance b { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; color: var(--lime); }
.sv-glance strong { font-size: 16px; line-height: 1.4; font-weight: 600; max-width: 26ch; }
.sv-glance dd span { display: block; margin-top: 0.35rem; font-size: 13px; line-height: 1.4; color: var(--muted); max-width: 24ch; }

.sv-answer-sec { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.sv-answer { max-width: 940px; padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: var(--r-card); }
.sv-q { display: flex; gap: 0.65rem; align-items: flex-start; font-family: var(--body); font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; line-height: 1.3; color: var(--lime); }
.sv-q i { font-size: 24px; flex: none; margin-top: 1px; }
.sv-answer p { margin-top: 0.85rem; max-width: 70ch; font-size: clamp(17px, 1.35vw, 20px); font-weight: 300; line-height: 1.65; color: rgba(243, 240, 232, 0.92); }

.sv-mani { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sv-inc li { scroll-margin-top: calc(var(--hdr-h) + 2rem); }

/* Pinned 3D moment */
.sv-sig { position: relative; background: radial-gradient(60% 70% at 78% 45%, rgba(30, 16, 199, 0.3), transparent 72%); }
.sv-pin { min-height: 100svh; }
.sv-pin-in { display: flex; align-items: center; min-height: 100svh; padding-block: clamp(5rem, 10vh, 7rem) clamp(2rem, 5vh, 4rem); }
.sv-grid { display: grid; gap: 2rem; width: 100%; align-items: center; }
@media (min-width: 900px) { .sv-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 3rem; } }
.sv-copy h2 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1; max-width: 17ch; }
.sv-copy .sec-lead { margin-top: 1rem; max-width: 48ch; font-size: clamp(16px, 1.2vw, 18px); }
.sv-details { display: grid; gap: 1.6rem; margin-top: 1.6rem; }
.sv-d { display: grid; gap: 0.55rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.sv-num { font-family: var(--display); font-size: clamp(34px, 3vw, 48px); line-height: 1; color: var(--lime); }
.sv-num i { font-size: 36px; }
.sv-d h3 { font-size: clamp(21px, 1.9vw, 28px); font-weight: 700; line-height: 1.2; }
.sv-d h3 span { display: block; margin-top: 0.25rem; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.sv-d dl { display: grid; gap: 0.6rem; margin-top: 0.3rem; }
.sv-d dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: baseline; }
.sv-d dt { font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.sv-d dd { font-size: 15px; line-height: 1.55; color: rgba(243, 240, 232, 0.84); }
@media (max-width: 520px) { .sv-d dl > div { grid-template-columns: minmax(0, 1fr); } }
.sv-tag { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.sv-claim { font-size: 17px; line-height: 1.55; color: rgba(243, 240, 232, 0.86); max-width: 40ch; }
.sv-inc-list { display: grid; gap: 0.4rem 1.4rem; margin: 0.4rem 0 0.6rem; }
@media (min-width: 560px) { .sv-inc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-inc-list li { position: relative; padding-left: 1.3rem; font-size: 14.5px; color: var(--muted); }
.sv-inc-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.sv-rail { display: none; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.sv-rail button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--muted); font: 600 12.5px/1.3 var(--body); cursor: pointer; transition: color 200ms, background 200ms, border-color 200ms; }
.sv-rail button i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 200ms; }
.sv-rail button.done i { background: var(--lime); }
.sv-rail button:hover { color: var(--text); border-color: rgba(206, 255, 94, 0.4); }
.sv-rail button[aria-current="true"] { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.sv-rail button[aria-current="true"] i { background: var(--ink); }
.sv-rail button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (min-width: 900px) {
  .sv-sig.live .sv-rail { display: flex; }
  .sv-sig.live .sv-details { margin-top: 1.4rem; }
  .sv-sig.live .sv-d { grid-area: 1 / 1; padding-top: 0; border-top: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
  .sv-sig.live .sv-d.on { opacity: 1; transform: none; pointer-events: auto; }
}

.sv-stage { position: relative; height: clamp(300px, 52vw, 420px); perspective: 1600px; display: grid; place-items: center; }
@media (min-width: 900px) { .sv-stage { height: min(66vh, 600px); } }
.sv-stage::before { content: ''; position: absolute; inset: 10% 4%; background: radial-gradient(closest-side, rgba(30, 16, 199, 0.5), transparent); filter: blur(34px); opacity: 0.85; pointer-events: none; }
.sv-scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-style: preserve-3d; }

/* layers: an exploded stack of basalt slabs, foundation at the bottom */
.sv-stack { position: relative; width: min(400px, 72%); aspect-ratio: 1.6; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-34deg) translateZ(-90px); }
.sv-slab { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 0.7rem; padding: 12px 16px; border-radius: 16px; background: linear-gradient(150deg, #22222b, #0f0f13 62%); border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(30, 16, 199, 0.45), 0 26px 40px -10px rgba(0, 0, 0, 0.65); transform: translateZ(calc(var(--i) * 30px)); transition: transform 800ms var(--ease), opacity 600ms, border-color 500ms, box-shadow 600ms; }
.sv-slab b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: rgba(243, 240, 232, 0.35); }
.sv-slab span { font-weight: 700; font-size: 15px; color: var(--muted); padding-bottom: 2px; }
.sv-slab.is-below { border-color: rgba(206, 255, 94, 0.4); }
.sv-slab.is-active { transform: translateZ(calc(var(--i) * 30px + 56px)); border-color: var(--lime); box-shadow: inset 0 0 0 1px rgba(206, 255, 94, 0.55), 0 0 64px -6px rgba(206, 255, 94, 0.5), 0 26px 40px -10px rgba(0, 0, 0, 0.65); }
.sv-slab.is-active b, .sv-slab.is-active span { color: var(--lime); }
.sv-slab.is-above { transform: translateZ(calc(var(--i) * 30px + 150px)); opacity: 0.16; }

/* gates: a corridor the camera moves through, one gate per step */
.sv-scene-gates { perspective: 1100px; }
.sv-tunnel { position: relative; width: min(340px, 64%); height: 82%; transform-style: preserve-3d; transform: translateZ(calc(var(--step, 0) * 260px)); transition: transform 1100ms var(--ease); }
.sv-gate { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem; text-align: center; border-radius: 200px 200px 14px 14px; border: 2px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(to top, rgba(30, 16, 199, 0.34), transparent 70%); transform: translateZ(calc(var(--i) * -260px)); opacity: 0.85; transition: opacity 700ms, border-color 500ms, box-shadow 600ms; }
.sv-gate-n { font-family: var(--display); font-size: clamp(46px, 6vw, 84px); line-height: 1; color: rgba(243, 240, 232, 0.3); }
.sv-gate-t { padding: 0 1rem; font-size: 15px; font-weight: 700; color: var(--muted); }
.sv-gate > i { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; font-size: 30px; color: var(--lime); opacity: 0; transition: opacity 400ms; }
.sv-gate.is-active { opacity: 1; border-color: var(--lime); box-shadow: 0 0 70px -8px rgba(206, 255, 94, 0.5), inset 0 0 60px rgba(206, 255, 94, 0.2); }
.sv-gate.is-active .sv-gate-n, .sv-gate.is-active .sv-gate-t { color: var(--lime); }
.sv-gate.is-below { opacity: 0; border-color: var(--lime); }
.sv-spend { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 200px 200px 14px 14px; transform: translateZ(-1040px); opacity: 0; transition: opacity 800ms;
  background: radial-gradient(closest-side, rgba(206, 255, 94, 0.6), rgba(206, 255, 94, 0.08)); }
.sv-spend b { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; color: var(--text); text-align: center; text-transform: uppercase; }
.sv-spend.is-active { opacity: 1; }

/* ring: cards on a coverflow, turning one step at a time (distance from the active card drives depth, angle and fade) */
.sv-scene-ring { perspective: 1500px; }
.sv-ring { position: relative; width: clamp(160px, 17vw, 230px); height: clamp(220px, 23vw, 310px); transform-style: preserve-3d; }
.sv-card { --d: calc(var(--i) - var(--step, 0)); position: absolute; inset: 0; display: grid; align-content: end; gap: 0.3rem; padding: 1.1rem; border-radius: 18px; background: linear-gradient(160deg, rgba(36, 36, 48, 0.97), rgba(14, 14, 18, 0.97)); border: 1px solid var(--glass-line);
  transform: translateX(calc(var(--d) * 62%)) translateZ(calc(abs(var(--d)) * -130px)) rotateY(calc(var(--d) * -30deg)); opacity: clamp(0, calc(1 - abs(var(--d)) * 0.3), 1);
  transition: transform 1000ms var(--ease), opacity 700ms, border-color 500ms, box-shadow 600ms; }
.sv-card b { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 0.95; color: rgba(243, 240, 232, 0.3); }
.sv-card strong { font-size: 17px; line-height: 1.25; }
.sv-card span { font-size: 13px; color: var(--muted); }
.sv-card.is-active { border-color: var(--lime); box-shadow: 0 0 60px -10px rgba(206, 255, 94, 0.5); }
.sv-card.is-active b { color: var(--lime); }

/* wheel: services on a tilted orbit, the active one comes to the front */
.sv-scene-wheel { perspective: 1500px; }
.sv-orbit { position: relative; width: min(430px, 84%); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(calc(var(--step, 0) * -90deg + 90deg)); transition: transform 1100ms var(--ease); --R: 190px; }
@media (max-width: 899px) { .sv-orbit { --R: 130px; } }
.sv-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.03), inset 0 0 70px rgba(30, 16, 199, 0.35); }
.sv-hub-core { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(206, 255, 94, 0.22), transparent);
  transform: rotateZ(calc(var(--step, 0) * 90deg - 90deg)) rotateX(-58deg); }
.sv-hub-core b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; color: var(--lime); }
.sv-hub-core span { font-size: 12px; color: var(--muted); }
.sv-node { position: absolute; left: 50%; top: 50%; width: 120px; margin: -50px 0 0 -60px; display: grid; justify-items: center; gap: 0.5rem; text-align: center;
  transform: rotateZ(calc(var(--i) * 90deg)) translateX(var(--R)) rotateZ(calc(var(--i) * -90deg + var(--step, 0) * 90deg - 90deg)) rotateX(-58deg); opacity: 0.5; transition: opacity 600ms; }
.sv-node span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 28px; color: var(--muted); background: var(--glass-strong); border: 1px solid var(--glass-line); transition: border-color 500ms, color 500ms, box-shadow 600ms; }
.sv-node b { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--muted); opacity: 0; transition: opacity 500ms; }
.sv-node.is-active { opacity: 1; }
.sv-node.is-active span { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 50px -6px rgba(206, 255, 94, 0.55); }
.sv-node.is-active b { color: var(--text); opacity: 1; }
@media (max-width: 899px) { .sv-node b { display: none; } }

/* hub hero: the four journey islands as a tilted deck */
.sv-hub-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.sv-deck { position: relative; aspect-ratio: 1.2; perspective: 1400px; transform-style: preserve-3d; }
.sv-deck-c { position: absolute; width: 66%; margin: 0; display: grid; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); background: #0a0a0d; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8); will-change: transform; }
.sv-deck-c img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sv-deck-c figcaption { padding: 0.55rem 0.9rem; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime); }
.sv-deck-c.c0 { left: 0; top: 0; transform: rotateY(14deg) rotateX(6deg) rotateZ(-2deg); }
.sv-deck-c.c1 { right: 0; top: 14%; transform: rotateY(-14deg) rotateX(6deg) rotateZ(2deg) translateZ(30px); }
.sv-deck-c.c2 { left: 4%; top: 46%; transform: rotateY(14deg) rotateX(6deg) rotateZ(-2deg) translateZ(60px); }
.sv-deck-c.c3 { right: 2%; top: 60%; transform: rotateY(-14deg) rotateX(6deg) rotateZ(2deg) translateZ(90px); }
html.motion .sv-hub-hero .sv-deck { animation: riseIn 1.1s var(--ease) 0.25s both; }

/* tables, notes, chips, steps, siblings, start list */
.sv-table .cmp { min-width: 640px; }
.sv-note, .sv-source { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 80ch; margin-top: 1.4rem; padding: 1rem 1.2rem; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: var(--surface); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sv-note i, .sv-source i { flex: none; margin-top: 2px; font-size: 20px; color: var(--lime); }
.sv-source a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.sv-note + .tlink { display: inline-flex; margin-top: 1.2rem; }
.sv-pair { margin-top: 0; }
.sv-std { display: grid; gap: 2rem; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sv-chips li { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(206, 255, 94, 0.35); background: rgba(206, 255, 94, 0.07); color: var(--text); font-size: 14.5px; font-weight: 600; }
.sv-run-note { margin-top: 2rem; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
@media (min-width: 1000px) { .sv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .sv-steps::before { left: 24px; right: 24px; } }
.sv-sibs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.sv-sib { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: 15px; transition: border-color 200ms, transform 300ms var(--ease); }
.sv-sib:hover { border-color: rgba(206, 255, 94, 0.5); transform: translateY(-2px); }
.sv-sib i { color: var(--lime); }
.sv-more { padding-block: clamp(2rem, 4vw, 3rem); }
.sv-more-h { margin-bottom: 1rem; font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sv-startlist { display: grid; }
.sv-startlist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.sv-startlist li:last-child a { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .sv-startlist a { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto; gap: 2.5rem; } }
.sv-startlist strong { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.25; }
.sv-startlist span { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.sv-startlist a > i { font-size: 22px; color: var(--lime); transition: translate 300ms var(--ease); }
.sv-startlist strong { transition: translate 400ms var(--ease); }
.sv-startlist a:hover strong { translate: 8px 0; }
.sv-startlist a:hover > i { translate: 6px 0; }
.sv-startlist a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .sv-obj { animation: none; }
  .sv-slab, .sv-gate, .sv-spend, .sv-ring, .sv-card, .sv-tunnel, .sv-orbit, .sv-node { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .sv-answer { background: var(--surface-2); backdrop-filter: none; } }

.sv-xcard { display: grid; align-content: center; gap: 1rem; padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: var(--r-card); }
.sv-xcard h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1; text-transform: uppercase; max-width: 14ch; }
.sv-xcard p { max-width: 44ch; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.sv-hero h1 { font-size: clamp(40px, 4.7vw, 72px); max-width: 15ch; }

.sv-sig.live .sv-gate:not(.is-active) .sv-gate-n, .sv-sig.live .sv-gate:not(.is-active) .sv-gate-t { opacity: 0; }
.sv-gate-n, .sv-gate-t { transition: opacity 500ms, color 500ms; }
@media (min-width: 900px) and (max-height: 820px) {
  .sv-pin-in { padding-block: 4.2rem 1.5rem; }
  .sv-copy h2 { font-size: clamp(28px, 5.4vh, 46px); }
  .sv-copy .sec-lead { margin-top: 0.6rem; font-size: 15px; }
  .sv-details { margin-top: 0.8rem; }
  .sv-num { font-size: 30px; }
  .sv-d h3 { font-size: 21px; }
  .sv-d dd { font-size: 14px; line-height: 1.5; }
  .sv-rail { margin-top: 0.9rem; }
}
@media (max-width: 899px) { .sv-stage { height: 300px; } }

.sv-k-gates:not(.live) .sv-gate:not(:first-child) .sv-gate-n, .sv-k-gates:not(.live) .sv-gate:not(:first-child) .sv-gate-t { opacity: 0; }
.sv-cs-side + .tlink { display: inline-flex; margin-top: 1rem; }

.sv-byline { margin-top: 1rem; font-size: 13.5px; color: var(--muted); }
.sv-byline a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.sv-eyebrow { margin-top: 1.2rem; }
.sv-hero .sv-eyebrow + h1 { margin-top: 0.7rem; }
.sv-run-note a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================================================
   Solutions pages, round 2: cinematic hero, device frames, work showcases, social gallery, hub work wall.
   Appended after sv.css by inner_build.py. Transform and opacity only for motion.
   ====================================================================================================== */

/* ---------- Cinematic hero: generated 3D scene bleeding off the right edge ---------- */
.sv-hero2 { position: relative; overflow: hidden; min-height: min(92svh, 920px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr-h) + 1.5rem) 0 clamp(2rem, 4vw, 3rem); background: var(--bg); }
.sv-art { position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(68vw, 1180px); margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.sv-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform-origin: 60% 50%; will-change: transform; }
.art-hub .sv-art img { object-position: 50% 55%; }
html.motion .sv-art img { animation: svArtIn 1.8s var(--ease) both; }
@keyframes svArtIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.sv-hero2-in { position: relative; z-index: 1; width: 100%; }
.sv-hero2-copy { max-width: 640px; }
.sv-hero2 h1 { font-size: clamp(44px, 5.4vw, 86px); max-width: 13ch; margin-top: 0.6rem; }
.sv-hero2 .sec-lead { margin-top: 1.3rem; max-width: 46ch; }
.sv-hero2-glance { position: relative; z-index: 1; width: 100%; }
.sv-hero2-glance .sv-glance { background: linear-gradient(to right, rgba(12, 12, 14, 0.92), rgba(12, 12, 14, 0.55)); backdrop-filter: blur(6px); }
html.motion .sv-hero2 .sv-hero2-glance { animation: riseIn 1s var(--ease) 0.7s both; }
html.motion .sv-hero2 .ab-hero-cta { animation: riseIn 1s var(--ease) 0.6s both; }
/* Between 900 and 1599px the scene reaches under the copy (the lead ran over the beam and arches at 1440): a soft scrim behind the copy keeps it legible */
.sv-hero2 .sec-lead, .sv-hero2 .crumbs { text-shadow: 0 1px 2px rgba(12, 12, 14, 0.9), 0 0 18px rgba(12, 12, 14, 0.85); }
@media (min-width: 900px) and (max-width: 1599px) {
  .sv-hero2-copy { position: relative; }
  .sv-hero2-copy::before { content: ""; position: absolute; z-index: -1; inset: -12% -18% -12% -40vw; pointer-events: none;
    background: linear-gradient(to right, rgba(12, 12, 14, 0.92) 0%, rgba(12, 12, 14, 0.78) 72%, rgba(12, 12, 14, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 80%, transparent 100%); }
}
@media (max-width: 899px) {
  .sv-hero2 { min-height: 0; padding-top: calc(var(--hdr-h) + 0.5rem); }
  .sv-art { position: relative; inset: auto; width: 100%; height: 62vw; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
  .sv-hero2-copy { margin-top: -10vw; }
}

/* ---------- Device frames ---------- */
.sv-browser { margin: 0; border-radius: 14px; overflow: hidden; background: #f4f4f6; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(30, 16, 199, 0.25); }
.sv-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1b1b21; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.sv-bar span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; color: var(--muted); }
.sv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.sv-screen img, .sv-screen video { display: block; width: 100%; height: auto; }
.sv-screen[data-sv-scroll] img { will-change: transform; }
.sv-screen:not([data-sv-scroll]) { aspect-ratio: auto; }
.sv-browser.tall .sv-screen { aspect-ratio: 4 / 5; }
.sv-phone { margin: 0; padding: 9px; border-radius: 34px; background: linear-gradient(160deg, #26262e, #0e0e12); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.sv-phone-screen { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 26px; background: #000; }
.sv-phone-screen img, .sv-phone-screen video { display: block; width: 100%; height: auto; }
.sv-phone-screen:not([data-sv-scroll]) img, .sv-phone-screen video { height: 100%; object-fit: cover; }

/* ---------- Showcase shared ---------- */
.sv-show { position: relative; }
.sv-show-head h2 { font-size: clamp(34px, 4vw, 62px); line-height: 1; max-width: 16ch; margin-top: 0.4rem; }
.sv-show-head.wide h2 { max-width: 22ch; }
.sv-show-head .sec-lead { margin-top: 1rem; max-width: 52ch; }
.sv-show-head .tlink { display: inline-flex; margin-top: 1.4rem; }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.sv-stats dd { order: -1; font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); line-height: 1; color: var(--lime); }
.sv-stats div { display: flex; flex-direction: column; gap: 0.4rem; }
.sv-stats dt { font-size: 13px; line-height: 1.35; color: var(--muted); }
.sv-basis { margin-top: 0.9rem; font-size: 13px; color: var(--muted); }
.sv-cap { margin-top: 0.8rem; font-size: 13px; color: var(--muted); }
.sv-show h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.25; }

/* Pretty J */
.sv-pj { background: radial-gradient(45% 40% at 72% 35%, rgba(255, 105, 180, 0.07), transparent 70%); }
.sv-pj-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1040px) { .sv-pj-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }
.sv-did { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.sv-did li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(206, 255, 94, 0.32); background: rgba(206, 255, 94, 0.06); font-size: 13.5px; font-weight: 600; }
.sv-did i { color: var(--lime); }
.sv-devices { position: relative; padding: 0 9% 12% 0; }
.sv-dev-desk { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: 30% 50%; }
.sv-dev-phone { position: absolute; right: 0; bottom: 0; width: 27%; transform: perspective(1200px) rotateY(-14deg); }
.sv-tiles { display: grid; gap: 1.2rem; margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .sv-tiles { grid-template-columns: 1.15fr 1.25fr 1fr; } }
.sv-tile { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--glass-line); background: var(--glass); }
.sv-tile-media { display: grid; gap: 4px; padding: 4px; background: #0a0a0d; }
.sv-tile-media img, .sv-tile-media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.sv-tile-media.n4 { grid-template-columns: 0.72fr 1fr 1fr 1fr; aspect-ratio: 16 / 9.4; }
.sv-tile-media.n4 .sv-tm { overflow: hidden; border-radius: 10px; }
.t0 .sv-tile-media { aspect-ratio: 16 / 9.4; }
.t0 .sv-tm { overflow: hidden; border-radius: 10px; }
.t2 .sv-tile-media { grid-template-columns: 1.6fr 1fr; aspect-ratio: 16 / 9.4; }
.t2 .sv-tm { overflow: hidden; border-radius: 10px; background: #fff; }
.t2 .sv-tm img { object-fit: cover; object-position: 50% 0; }
.sv-tile-copy { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: 0.45rem; }
.sv-tile-copy p { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Garden Centre */
.sv-gc-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1040px) { .sv-gc-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.sv-ba2 { position: relative; padding: 0 0 18% 0; }
.sv-ba2 figure { margin: 0; }
.sv-ba2 figcaption { position: absolute; z-index: 2; top: -0.9rem; left: 1rem; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.sv-ba2-before { position: relative; width: 74%; opacity: 0.75; filter: saturate(0.6); transform: perspective(1400px) rotateY(10deg) scale(0.96); transform-origin: 0 50%; }
.sv-ba2-before figcaption { background: #2a2a31; color: var(--muted); }
.sv-ba2-after { position: absolute; right: 0; bottom: 0; width: 78%; }
.sv-ba2-after figcaption { background: var(--lime); color: var(--ink); }
.sv-gc-row { display: grid; gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
@media (min-width: 900px) { .sv-gc-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; } }
.sv-gc-ai p { margin-top: 0.5rem; color: var(--muted); max-width: 50ch; }
.sv-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.4rem; }
.sv-ai-grid li { border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); aspect-ratio: 1; }
.sv-ai-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.sv-ai-grid li:hover img { transform: scale(1.04); }

/* Diet Delight ad set */
.sv-dd { overflow: hidden; }
.sv-placements { display: grid; gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); align-items: end; }
@media (min-width: 900px) { .sv-placements { grid-template-columns: 0.55fr 1fr 1.7fr; } }
.sv-placements figure { margin: 0; }
.sv-placements figcaption { margin-bottom: 0.7rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.sv-frame-ad { border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.sv-frame-ad img { width: 100%; display: block; }
.pl-story .sv-phone { max-width: 260px; }
.sv-dd-row { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 1000px) { .sv-dd-row { grid-template-columns: 1.5fr 1fr; gap: 3rem; } }
.sv-dd-offers ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.sv-dd-offers li { border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-line); }
.sv-dd-offers img { display: block; width: 100%; }
.sv-vphones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; max-width: 420px; }
.sv-ribbon { margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.sv-ribbon ul { display: flex; gap: 1rem; width: max-content; }
html.motion .sv-ribbon ul { animation: svRibbon 46s linear infinite; }
.sv-ribbon:hover ul { animation-play-state: paused; }
.sv-ribbon li { flex: none; height: clamp(180px, 20vw, 260px); border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-line); }
.sv-ribbon img { height: 100%; width: auto; display: block; }
@keyframes svRibbon { to { transform: translateX(-50%); } }

/* Plan B */
.sv-pb-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1040px) { .sv-pb-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }
.sv-kv { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 50px 90px -35px rgba(0, 0, 0, 0.9), 0 0 80px -30px rgba(30, 16, 199, 0.6); will-change: transform; }
.sv-kv img { display: block; width: 100%; }
.sv-pb-media { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 1rem; margin-top: 2rem; align-items: end; }
.sv-kvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.sv-kvs li { border-radius: 10px; overflow: hidden; border: 1px solid var(--glass-line); }
.sv-kvs img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.sv-pb-photo { margin: clamp(2.5rem, 5vw, 4rem) 0 0; border-radius: 18px; overflow: hidden; position: relative; }
.sv-pb-photo img { display: block; width: 100%; height: clamp(240px, 38vw, 520px); object-fit: cover; }
.sv-pb-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 6px 12px; border-radius: 999px; background: rgba(12, 12, 14, 0.7); backdrop-filter: blur(8px); font-size: 13px; color: var(--text); }

/* ---------- Social gallery ---------- */
.sv-gchips { margin-top: 1.6rem; }
.sv-masonry { columns: 2 160px; column-gap: 0.9rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .sv-masonry { columns: 3 220px; } }
@media (min-width: 1100px) { .sv-masonry { columns: 4 240px; column-gap: 1rem; } }
.sv-gi { break-inside: avoid; margin-bottom: 1rem; }
.sv-gi[hidden] { display: none; }
.sv-gi-btn { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--glass-line); border-radius: 14px; overflow: hidden; background: #0a0a0d; cursor: zoom-in; }
.sv-gi-btn img, .sv-gi-btn video { display: block; width: 100%; height: auto; transition: transform 600ms var(--ease); }
.sv-gi-btn:hover img, .sv-gi-btn:hover video { transform: scale(1.035); }
.sv-gi-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sv-gi-play { position: absolute; right: 10px; top: 10px; font-size: 28px; color: var(--lime); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.sv-gi-cap { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; font-size: 13px; }
.sv-gi-cap span { color: var(--muted); }
.sv-lightbox { width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 1px solid var(--glass-line); border-radius: 18px; background: rgba(12, 12, 14, 0.96); color: var(--text); overflow: visible; }
.sv-lightbox::backdrop { background: rgba(5, 5, 8, 0.82); backdrop-filter: blur(6px); }
.sv-lb-stage { display: grid; place-items: center; padding: 1.2rem; }
.sv-lb-stage img, .sv-lb-stage video { max-width: 100%; max-height: 78vh; border-radius: 10px; }
.sv-lb-cap { padding: 0 1.2rem 1.1rem; font-size: 14px; color: var(--muted); text-align: center; }
.sv-lb-close, .sv-lb-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: rgba(24, 24, 30, 0.9); color: var(--text); font-size: 20px; cursor: pointer; }
.sv-lb-close { top: -14px; right: -14px; }
.sv-lb-nav.prev { left: -22px; top: 50%; translate: 0 -50%; }
.sv-lb-nav.next { right: -22px; top: 50%; translate: 0 -50%; }
@media (max-width: 700px) { .sv-lb-nav.prev { left: 6px; } .sv-lb-nav.next { right: 6px; } .sv-lb-close { right: 6px; top: 6px; } }

/* ---------- Hub work wall: three columns drifting at different speeds ---------- */
.sv-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); height: clamp(560px, 82vh, 900px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); }
@media (min-width: 900px) { .sv-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .sv-wall-col.c2 { display: none; } }
.sv-wall-col { display: grid; gap: 1rem; align-content: start; will-change: transform; }
.sv-wall-col.c1 { margin-top: -12%; }
.sv-wt { position: relative; display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-line); background: #0a0a0d; }
.sv-wt img, .sv-wt video { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: 50% 0; transition: transform 700ms var(--ease); }
.sv-wt:hover img { transform: scale(1.04); }
.sv-wt-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 2.4rem 1rem 0.9rem; background: linear-gradient(to top, rgba(8, 8, 10, 0.92), transparent); }
.sv-wt-cap strong { font-size: 15px; }
.sv-wt-cap em { font-style: normal; font-size: 12.5px; color: var(--lime); }
.sv-wt:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sv-wall-more { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .sv-art img, .sv-ribbon ul { animation: none; }
  .sv-ribbon { overflow-x: auto; }
  .sv-wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .sv-wall-col.c1 { margin-top: 0; }
}

/* ---------- AI and journey showcases ---------- */
.sv-seqs { display: grid; gap: 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.sv-seq-name { margin-bottom: 0.8rem; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.sv-seq-list { display: grid; grid-template-columns: 0.8fr auto repeat(3, 1fr); gap: 0.8rem; align-items: center; }
.sv-seq-list.n1 { grid-template-columns: 0.8fr auto 0.8fr 2.2fr; }
.sv-seq-list li { border-radius: 14px; overflow: hidden; }
.sv-seq-list img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.sv-sq-src { position: relative; border: 1px solid var(--glass-line); opacity: 0.85; }
.sv-sq-src span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(12, 12, 14, 0.75); font-size: 11.5px; }
.sv-sq-arrow { overflow: visible; color: var(--lime); font-size: 26px; }
.sv-sq-out { border: 1px solid rgba(206, 255, 94, 0.35); }
@media (max-width: 760px) { .sv-seq-list, .sv-seq-list.n1 { grid-template-columns: repeat(2, 1fr); } .sv-sq-arrow { display: none; } }
.sv-aiva-row { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 1000px) { .sv-aiva-row { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } }
.sv-vphones.four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 760px) { .sv-vphones.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-vto-grid, .sv-demo-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1040px) { .sv-vto-grid, .sv-demo-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; } }
.sv-demo-frame { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 50px 90px -35px rgba(0, 0, 0, 0.9), 0 0 80px -30px rgba(30, 16, 199, 0.6); background: #0a0a0d; }
.sv-demo-frame video, .sv-demo-frame img { display: block; width: 100%; height: auto; }
.sv-demo-frame figcaption { padding: 0.6rem 1rem; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.sv-demo-pts { display: grid; gap: 0.8rem; margin-top: 1.6rem; }
.sv-demo-pts li { display: flex; gap: 0.7rem; align-items: center; font-size: 16px; }
.sv-demo-pts i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(206, 255, 94, 0.4); color: var(--lime); font-size: 18px; }
.sv-vto-steps { display: grid; gap: 1.2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .sv-vto-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-stepn { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; font-family: var(--display); font-size: 30px; color: var(--lime); }
.sv-stepn span { font-family: var(--body); font-size: 16px; font-weight: 700; color: var(--text); }
.sv-convs { display: grid; gap: clamp(3rem, 6vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.sv-conv { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1000px) { .sv-conv { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } .sv-conv:nth-child(2) .sv-conv-copy { order: 2; } }
.sv-conv h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1; text-transform: uppercase; margin-top: 0.4rem; }
.sv-conv-img img { display: block; width: 100%; background: #fff; }
/* AI hub cards */
.sv-aicards { display: grid; gap: 1.2rem; }
@media (min-width: 800px) { .sv-aicards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-aic a { display: grid; height: 100%; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--glass-line); background: var(--glass); transition: border-color 300ms, transform 400ms var(--ease); }
.sv-aic a:hover { border-color: rgba(206, 255, 94, 0.45); transform: translateY(-3px); }
.sv-aic a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sv-aic-media { height: clamp(220px, 24vw, 320px); overflow: hidden; background: #0a0a0d; }
.sv-aic-media img, .sv-aic-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sv-aic-copy { display: grid; gap: 0.45rem; padding: 1.3rem 1.4rem 1.5rem; }
.sv-aic-copy h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; text-transform: uppercase; }
.sv-aic-copy strong { font-size: 17px; }
.sv-aic-copy span { font-size: 15px; color: var(--muted); line-height: 1.55; }
.sv-aic-copy .tlink { font-style: normal; margin-top: 0.4rem; }
.sv-more-h2 { margin-top: 1.6rem; }

/* StoryBrand sections on the Solutions pages: problem, guide, plan, without and with (storybrand_content.py) */
.sb-sec .eyebrow { margin-bottom: 0.9rem; }
.sb-split { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) {
  .sb-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 6rem); }
  .sb-rev > .sb-copy { order: 2; }
}
.sb-copy h2 { margin: 0 0 1.4rem; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.sb-fig { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 40px 80px -40px rgba(30, 16, 199, 0.55); }
.sb-fig img { display: block; width: 100%; height: auto; }

/* problem: three short lines, each with its role */
.sb-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sb-lines li { padding: 1.05rem 0; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.sb-lines li:last-child { border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.sb-tag { margin: 0 0 0.3rem; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.sb-lines li p:last-child { margin: 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: rgba(243, 240, 232, 0.9); }

/* guide: empathy, authority, real work */
.sb-points { display: grid; gap: 0.85rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sb-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 17px; line-height: 1.45; }
.sb-points i { font-size: 22px; color: var(--lime); margin-top: 1px; }
.sb-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sb-proof { margin: 0; }
.sb-proof:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.sb-proof img, .sb-proof video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid var(--glass-line); background: #0b0b0e; }
.sb-proof figcaption { margin-top: 0.6rem; font-size: 13px; color: var(--muted); }

/* plan: three steps and the button */
.sb-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 760px) { .sb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } }
.sb-steps li { position: relative; display: grid; align-content: start; gap: 0.55rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: 20px; border: 1px solid var(--glass-line); background: linear-gradient(160deg, rgba(36, 36, 48, 0.7), rgba(14, 14, 18, 0.7)); }
.sb-steps .sb-n { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--display); font-size: 56px; line-height: 1; color: rgba(206, 255, 94, 0.18); }
.sb-steps i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(206, 255, 94, 0.45); color: var(--lime); font-size: 22px; margin-bottom: 0.4rem; }
.sb-steps strong { font-size: 19px; line-height: 1.3; }
.sb-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sb-plan-cta { display: grid; justify-items: start; gap: 1rem; margin-top: 2rem; }
.sb-plan-cta .sv-run-note { margin: 0; }

/* without and with */
.sb-st-grid { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .sb-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-st { padding: 1.5rem; border-radius: 22px; border: 1px solid var(--glass-line); background: rgba(16, 16, 20, 0.75); }
.sb-with { border-color: rgba(206, 255, 94, 0.45); box-shadow: 0 0 70px -30px rgba(206, 255, 94, 0.45); }
.sb-st-fig { margin: 0 0 1.2rem; border-radius: 14px; overflow: hidden; }
.sb-st-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; }
.sb-st-label { margin: 0 0 0.9rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.sb-with .sb-st-label { color: var(--lime); }
.sb-st ul { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.sb-st li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0.7rem; font-size: 17px; line-height: 1.45; }
.sb-st i { font-size: 21px; margin-top: 1px; }
.sb-without i { color: rgba(243, 240, 232, 0.4); }
.sb-without li { color: rgba(243, 240, 232, 0.72); }
.sb-with i { color: var(--lime); }
.sb-byline { margin-top: 1.8rem; }

/* pinned ring cards carry a picture, so no card is ever empty */
.sv-card.has-img { overflow: hidden; padding-top: 0; }
.sv-card-img { position: absolute; inset: 0 0 auto 0; height: 60%; overflow: hidden; }
.sv-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sv-card-img::after { content: ''; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(16, 16, 20, 0.97)); }
.sv-card.has-img b { position: relative; font-size: clamp(30px, 3vw, 44px); }
.sv-card.has-img strong, .sv-card.has-img span { position: relative; }

/* Contact page: four routes and the office line (services_build.contact_page) */
.ct-routes { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .ct-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ct-routes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ct-route { border-radius: 20px; border: 1px solid var(--glass-line); background: linear-gradient(160deg, rgba(36, 36, 48, 0.7), rgba(14, 14, 18, 0.7)); transition: border-color 0.25s ease, transform 0.25s ease; }
.ct-route:hover, .ct-route:focus-within { border-color: rgba(206, 255, 94, 0.55); transform: translateY(-3px); }
.ct-route a { display: grid; align-content: start; gap: 0.5rem; height: 100%; padding: 1.6rem 1.5rem 1.7rem; color: inherit; text-decoration: none; }
.ct-route a > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(206, 255, 94, 0.45); color: var(--lime); font-size: 22px; margin-bottom: 0.4rem; }
.ct-route strong { font-size: 19px; line-height: 1.3; }
.ct-route span { color: var(--muted); font-size: 15px; line-height: 1.55; }
.ct-route em { font-style: normal; margin-top: 0.5rem; }
.ct-office { display: flex; gap: 0.6rem; align-items: center; margin: 1.6rem 0 0; color: var(--muted); font-size: 15px; }
.ct-office i { color: var(--lime); font-size: 20px; }
.ct-office strong { color: var(--text, #f3f0e8); margin-right: 0.35rem; }

/* ======================================================================================================
   Solutions pages, v4 blocks (9 Nov 2026, first used on /services/ecommerce-design-development/, services_edd.py).
   Every block reads completely without JS; html.motion + the .live classes from sv3.js add the 3D scroll.
   Logical properties throughout, so the Arabic page mirrors itself; scene flips for RTL are in inner-ar.css.
   ====================================================================================================== */

/* ---------- Hero: pointer depth on the world (both languages) ---------- */
.sv-hero2 .sv-art { will-change: transform; }

/* ---------- Problem: one pinned world, three scenes ---------- */
.e-leak { position: relative; background: var(--bg); }
.e-leak-pin { padding: clamp(5rem, 8vw, 7.5rem) 0; }
.e-leak-world { display: none; }
.e-leak-copy h2 { margin: 0 0 1.8rem; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; max-width: 13ch; }
.e-beats { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.e-beat-fig { margin: 0 0 1.1rem; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); background: #050507; }
.e-beat-fig img { display: block; width: 100%; height: auto; }
.e-beat-tag { margin: 0 0 0.4rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.e-beat-t { margin: 0; max-width: 32ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: rgba(243, 240, 232, 0.92); }
.e-rail { display: none; }
.e-leak.live .e-leak-pin { position: relative; display: flex; align-items: center; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.e-leak.live .e-leak-world { display: block; position: absolute; inset: 0; }
.e-leak-cam { position: absolute; top: 0; bottom: 0; right: 0; /* physical: the Arabic page flips the whole world */ width: 80%; transform-origin: 62% 55%; will-change: transform; }
.e-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; opacity: 0; transform: scale(1.1); transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); }
.e-scene.on { opacity: 1; transform: none; }
.e-scene.past { opacity: 0; transform: scale(0.92) translateY(-3%); }
.e-leak-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--bg) 0%, rgba(12, 12, 14, 0.94) 26%, rgba(12, 12, 14, 0.5) 44%, rgba(12, 12, 14, 0) 62%),
              linear-gradient(to bottom, var(--bg) 0%, rgba(12, 12, 14, 0) 16%, rgba(12, 12, 14, 0) 82%, var(--bg) 100%); }
.e-leak.live .e-leak-in { position: relative; z-index: 1; }
.e-leak.live .e-leak-copy { max-width: 560px; }
.e-leak.live .e-beats { gap: 0; }
.e-leak.live .e-beat { grid-area: 1 / 1; opacity: 0; transform: translateY(28px); transition: opacity 0.5s var(--ease), transform 0.8s var(--ease); pointer-events: none; }
.e-leak.live .e-beat.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.12s; }
.e-leak.live .e-beat-fig { display: none; }
.e-leak.live .e-beat-t { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.3; font-weight: 600; }
.e-leak.live .e-rail { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2.4rem; }
.e-rail button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 7px 13px 7px 11px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--muted); font: 600 13px/1.3 var(--body); cursor: pointer; transition: color 200ms, background 200ms, border-color 200ms; }
.e-rail button i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 200ms; }
.e-rail button.done i { background: var(--lime); }
.e-rail button:hover { color: var(--text); border-color: rgba(206, 255, 94, 0.4); }
.e-rail button[aria-current="true"] { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.e-rail button[aria-current="true"] i { background: var(--ink); }
.e-rail button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (min-width: 900px) {
  .e-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } /* no motion on a wide screen: three scenes side by side */
  .e-leak.live .e-beats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Shared: objects ---------- */
.e-obj { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); will-change: transform; pointer-events: none; }

/* ---------- How we help: the two online stores turn in 3D ---------- */
.e-guide .sb-proofs { perspective: 1200px; }
.e-guide .sb-proof { transform-style: preserve-3d; will-change: transform; }

/* ---------- Plan: three stations on one drawn line ---------- */
.e-plan h2 { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; max-width: 16ch; }
.e-path { position: relative; margin-top: clamp(2rem, 4vw, 3.5rem); }
.e-line { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 19px; width: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
.e-line i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--lime), rgba(206, 255, 94, 0.55)); box-shadow: 0 0 18px rgba(206, 255, 94, 0.55); transform-origin: top; }
.e-stns { display: grid; gap: 2.6rem; margin: 0; padding: 0; list-style: none; }
.e-stn { position: relative; display: grid; grid-template-columns: 40px 104px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.e-stn-dot { grid-column: 1; grid-row: 1 / span 3; justify-self: center; margin-top: 1.9rem; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255, 255, 255, 0.28); transition: background 300ms, border-color 300ms, box-shadow 300ms; position: relative; z-index: 1; }
.e-stn.on .e-stn-dot { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 6px rgba(206, 255, 94, 0.15), 0 0 24px rgba(206, 255, 94, 0.6); }
.e-stn-art { grid-column: 2; grid-row: 1 / span 3; }
.e-stn-n { grid-column: 3; margin: 0.3rem 0 0.2rem; font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--lime); }
.e-stn h3 { grid-column: 3; margin: 0 0 0.45rem; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; }
.e-stn > p:last-child { grid-column: 3; margin: 0; max-width: 34ch; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.e-plan-cta { display: grid; justify-items: start; gap: 1rem; margin-top: clamp(2.4rem, 4vw, 3.5rem); }
.e-plan-cta .sv-run-note { margin: 0; }
@media (min-width: 900px) {
  .e-path { padding-top: 0; }
  .e-line { inset: auto 0 auto 0; inset-block-start: 236px; width: auto; height: 2px; }
  .e-line i { background: linear-gradient(to right, var(--lime), rgba(206, 255, 94, 0.55)); transform-origin: left; }
  [dir='rtl'] .e-line i { transform-origin: right; }
  .e-stns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
  .e-stn { display: block; }
  .e-stn-art { width: clamp(150px, 13vw, 200px); height: 210px; display: flex; align-items: flex-end; }
  .e-stn.s2 .e-stn-art { width: clamp(170px, 15vw, 230px); }
  .e-stn-dot { position: absolute; margin: 0; inset-block-start: 229px; inset-inline-start: 0; }
  .e-stn-n { margin-top: 3.2rem; }
  .e-stn.s2 { margin-top: 0; }
}

/* ---------- What is included: a bento of four objects ---------- */
.e-inc h2 { margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-bento { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.e-cell { position: relative; border-radius: 22px; transform-style: preserve-3d; will-change: transform; scroll-margin-top: 110px; }
.e-cell-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 30%, 210px); align-items: end; gap: 1rem; padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: inherit; overflow: hidden; border: 1px solid var(--glass-line);
  background: radial-gradient(70% 90% at var(--mx, 85%) var(--my, 20%), var(--glow, rgba(30, 16, 199, 0.42)), transparent 70%), linear-gradient(160deg, rgba(34, 34, 44, 0.78), rgba(12, 12, 16, 0.86)); transition: border-color 300ms; }
.e-cell:hover .e-cell-in { border-color: rgba(206, 255, 94, 0.45); }
.e-cell.c2 .e-cell-in, .e-cell.c3 .e-cell-in { --glow: rgba(206, 255, 94, 0.16); }
.e-cell-art { grid-column: 2; grid-row: 1; align-self: start; }
.e-cell-copy { grid-column: 1; grid-row: 1; align-self: end; }
.e-cell h3 { margin: 0 0 0.55rem; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.2; }
.e-cell p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (min-width: 900px) {
  .e-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.2rem; }
  .e-cell { min-height: 300px; }
  .e-cell.c1, .e-cell.c4 { grid-column: span 7; }
  .e-cell.c2, .e-cell.c3 { grid-column: span 5; }
  .e-cell.c1 .e-cell-in, .e-cell.c4 .e-cell-in { grid-template-columns: minmax(0, 1fr) 230px; }
  .e-cell.c2 .e-cell-in, .e-cell.c3 .e-cell-in { grid-template-columns: minmax(0, 1fr) 40%; }
}

/* ---------- Repair or rebuild: two worlds ---------- */
.e-fork h2 { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-fork .sec-lead { margin-top: 1rem; max-width: 58ch; }
.e-fork-grid { display: grid; gap: 1.2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); perspective: 1400px; }
@media (min-width: 900px) { .e-fork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; } }
.e-way { border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); background: rgba(14, 14, 18, 0.8); transform-style: preserve-3d; will-change: transform; transition: border-color 300ms; }
.e-way:hover { border-color: rgba(206, 255, 94, 0.45); }
.e-way-fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.e-way-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; will-change: transform; }
.e-way-copy { padding: clamp(1.3rem, 2.2vw, 2rem); }
.e-way h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: clamp(21px, 1.8vw, 27px); }
.e-way h3 i { color: var(--lime); font-size: 24px; }
.e-way ul, .e-pf ul, .e-ch ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.e-way li, .e-pf li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.65rem; font-size: 16px; line-height: 1.5; color: rgba(243, 240, 232, 0.86); }
.e-way li i, .e-pf li i { margin-top: 3px; font-size: 18px; color: var(--lime); }

/* ---------- Platforms: Salla first ---------- */
.e-plat h2 { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-plat .sec-lead { margin-top: 1rem; }
.e-plat-grid { display: grid; gap: 1.2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); perspective: 1400px; }
@media (min-width: 900px) {
  .e-plat-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .e-pf.lead { grid-row: span 2; }
}
.e-pf { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: 22px; border: 1px solid var(--glass-line); overflow: hidden;
  background: radial-gradient(80% 70% at var(--mx, 18%) var(--my, 0%), var(--glow, rgba(255, 255, 255, 0.05)), transparent 70%), linear-gradient(160deg, rgba(30, 30, 38, 0.8), rgba(12, 12, 16, 0.88)); transform-style: preserve-3d; will-change: transform; transition: border-color 300ms; }
.e-pf:hover { border-color: rgba(206, 255, 94, 0.45); }
.e-pf-salla { --glow: rgba(15, 116, 128, 0.5); }
.e-pf-shopify { --glow: rgba(149, 191, 71, 0.2); }
.e-pf-woocommerce { --glow: rgba(155, 92, 143, 0.28); }
.e-pf.lead { border-color: rgba(206, 255, 94, 0.5); box-shadow: 0 0 80px -30px rgba(206, 255, 94, 0.45); }
.e-pf-top { display: flex; align-items: center; gap: 1.1rem; }
.e-pf-tile .tile-face { width: 64px; --rx: 14deg; --ry: -16deg; }
.e-pf.lead .e-pf-tile .tile-face { width: clamp(84px, 7vw, 108px); }
.e-pf-name h3 { margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; }
.e-pf.lead .e-pf-name h3 { font-size: clamp(30px, 3vw, 46px); }
.e-pf-chip { display: inline-block; margin: 0.45rem 0 0; padding: 4px 11px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.4px; }
.e-pf-when { margin: 0.4rem 0 0; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.e-pf.lead li { font-size: 17.5px; }
.e-pf .tlink { margin-top: auto; padding-top: 0.4rem; align-self: flex-start; }
.e-pf.lead .tlink { margin-top: 0.4rem; }
.e-pf-art { margin: 0.6rem calc(-1 * clamp(1.4rem, 2.4vw, 2.2rem)) calc(-1 * clamp(1.4rem, 2.4vw, 2.2rem)); aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%); mask-image: linear-gradient(to bottom, transparent 0%, #000 34%); }
.e-pf-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; will-change: transform; }
@media (min-width: 900px) { .e-pf-art { flex: 1 1 150px; margin-top: auto; aspect-ratio: auto; min-height: 150px; } }

/* ---------- What changes: one world, two outcomes ---------- */
.e-change h2 { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-wipe { position: relative; perspective: 1600px; }
.e-wipe-frame { --p: 0.5; position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); background: #000; box-shadow: 0 50px 90px -50px rgba(30, 16, 199, 0.7); transform-origin: 50% 100%; will-change: transform; touch-action: pan-y; }
.e-wipe-a, .e-wipe-b { position: absolute; inset: 0; }
.e-wipe-a img, .e-wipe-b img { display: block; width: 100%; height: 100%; object-fit: cover; }
.e-wipe-b { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
[dir='rtl'] .e-wipe-b { clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%)); }
.e-wipe-bar { position: absolute; inset-block: 0; inset-inline-start: calc(var(--p) * 100%); width: 2px; margin-inline-start: -1px; background: var(--lime); box-shadow: 0 0 22px rgba(206, 255, 94, 0.8); pointer-events: none; }
[dir='rtl'] .e-wipe-bar { inset-inline-start: auto; inset-inline-end: calc(var(--p) * 100%); margin-inline: 0 -1px; }
.e-wipe-bar i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.e-wipe-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.e-wipe-range:focus-visible + * { outline: none; }
.e-wipe:focus-within .e-wipe-frame { outline: 2px solid var(--lime); outline-offset: 4px; }
[dir='rtl'] .e-wipe-range { direction: rtl; }
.e-ch-grid { display: grid; gap: 1rem; margin-top: 1.2rem; }
@media (min-width: 760px) and (max-width: 1099px) { .e-ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .e-ch-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
  .e-ch-grid { margin-top: 0; }
}
.e-ch { padding: 1.3rem 1.4rem 1.4rem; border-radius: 18px; border: 1px solid var(--glass-line); background: rgba(16, 16, 20, 0.75); }
.e-ch-with { border-color: rgba(206, 255, 94, 0.45); }
.e-ch-label { margin: 0 0 0.9rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.e-ch-with .e-ch-label { color: var(--lime); }
.e-ch li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0.7rem; font-size: 17px; line-height: 1.45; }
.e-ch i { font-size: 21px; margin-top: 1px; }
.e-ch-without i { color: rgba(243, 240, 232, 0.4); }
.e-ch-without li { color: rgba(243, 240, 232, 0.72); }
.e-ch-with i { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .e-scene, .e-beat { transition: none; }
}

/* Hero lead: one thought per line, and each line balanced (10 Nov 2026) */
.sv-hero2 .sec-lead { text-wrap: balance; }
@media (min-width: 900px) { .sv-hero2 .sec-lead { max-width: 52ch; } }

/* ---------- Channels: four brand tiles, one panel at a time (services_pm.py) ---------- */
.e-chan h2 { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-chan .sec-lead { margin-top: 1rem; max-width: 62ch; }
.e-chan-ui { display: grid; gap: 1.2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.e-tabs { display: none; }
.e-panels { display: grid; gap: 1rem; perspective: 1400px; }
.e-panel { padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: 22px; border: 1px solid var(--glass-line); background: radial-gradient(70% 80% at 85% 0%, rgba(30, 16, 199, 0.32), transparent 70%), linear-gradient(160deg, rgba(30, 30, 38, 0.82), rgba(12, 12, 16, 0.9)); }
.e-panel h3 { margin: 0 0 1.2rem; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.e-panel dl { display: grid; gap: 1rem; margin: 0; }
.e-panel dt { margin: 0 0 0.3rem; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lime); }
.e-panel dd { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(243, 240, 232, 0.88); max-width: 52ch; }
.e-reach { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.e-reach b { display: block; font-family: var(--display); font-size: clamp(34px, 3.4vw, 52px); line-height: 1; color: var(--lime); }
.e-reach span { display: block; margin-top: 0.35rem; font-size: 13.5px; color: var(--muted); }
.e-chan .sv-source { margin-top: 1.4rem; }
.e-chan-ui.live .e-tabs { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.e-chan-ui.live .e-panels { display: grid; }
.e-chan-ui.live .e-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: rotateY(calc(var(--flip, 1) * 14deg)) translateZ(-60px); transform-origin: 50% 50%; transition: opacity 0.45s var(--ease), transform 0.7s var(--ease), visibility 0s 0.45s; }
.e-chan-ui.live .e-panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease), transform 0.7s var(--ease), visibility 0s; }
.e-tab { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1.1rem 0.55rem 0.6rem; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--surface); color: var(--muted); font: 700 15px/1 var(--body); cursor: pointer; transition: border-color 250ms, color 250ms, background 250ms; }
.e-tab .tile-face { width: 44px; --rx: 10deg; --ry: -12deg; }
.e-tab:hover { color: var(--text); border-color: rgba(206, 255, 94, 0.4); }
.e-tab[aria-selected="true"] { color: var(--text); border-color: var(--lime); background: rgba(206, 255, 94, 0.08); box-shadow: 0 0 40px -14px rgba(206, 255, 94, 0.6); }
.e-tab[aria-selected="true"] .tile-face { --rx: 0deg; --ry: 0deg; }
.e-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (min-width: 900px) {
  .e-chan-ui.live { grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: stretch; }
  .e-chan-ui.live .e-tabs { flex-direction: column; flex-wrap: nowrap; }
  .e-chan-ui.live .e-tab { padding: 0.8rem 1.3rem 0.8rem 0.8rem; font-size: 17px; border-radius: 18px; }
  .e-chan-ui.live .e-tab .tile-face { width: 58px; }
}
[dir='rtl'] .e-chan-ui { --flip: -1; }

/* ---------- Measurement: one scene, the copy on glass over it ---------- */
.e-ms-stage { position: relative; display: grid; }
.e-ms-fig { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); background: #000; aspect-ratio: 16 / 9; box-shadow: 0 50px 90px -50px rgba(30, 16, 199, 0.7); }
.e-ms-fig img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.e-ms-card { margin: -3.5rem 1rem 0; padding: clamp(1.4rem, 2.6vw, 2.2rem); border-radius: 20px; position: relative; }
.e-ms-card h2 { margin: 0 0 1rem; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; max-width: 14ch; }
.e-ms-card p { margin: 0 0 0.8rem; color: rgba(243, 240, 232, 0.86); font-size: 16.5px; line-height: 1.6; max-width: 56ch; }
.e-ms-card p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  .e-ms-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .e-ms-fig { grid-column: 4 / -1; grid-row: 1; }
  .e-ms-card { grid-column: 1 / 7; grid-row: 1; margin: 0 0 -2.5rem; align-self: end; }
}
.e-ms-pts { display: grid; gap: 1rem; margin: clamp(3.5rem, 6vw, 5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .e-ms-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.e-ms-pts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.e-ms-pts i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(206, 255, 94, 0.45); color: var(--lime); font-size: 20px; }
.e-ms-pts strong { display: block; font-size: 17px; margin-bottom: 0.25rem; }
.e-ms-pts span { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- Results: the figures our clients can count (services_pm.results) ---------- */
.e-results h2 { margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); font-size: clamp(34px, 4.2vw, 64px); line-height: 1; }
.e-r-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.e-r { padding: clamp(1.4rem, 2.4vw, 2.2rem) 0; border-bottom: 1px solid var(--line); }
.e-r b { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--display); font-weight: 400; line-height: 0.95; color: var(--lime); font-size: clamp(56px, 7vw, 112px); }
.e-r .e-r-cur { font-size: 0.42em; color: var(--text); letter-spacing: 1px; }
.e-r.i3 b, .e-r.i4 b { font-size: clamp(46px, 5vw, 80px); }
.e-r p { margin: 0.7rem 0 0; max-width: 30ch; color: var(--muted); font-size: 16px; line-height: 1.5; }
.e-results .sv-basis { margin-top: 1.2rem; }
@media (min-width: 900px) {
  .e-r-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .e-r.i1 { grid-column: 1 / span 7; } .e-r.i2 { grid-column: 8 / span 5; }
  .e-r.i3 { grid-column: 1 / span 7; } .e-r.i4 { grid-column: 8 / span 5; }
}
[dir='rtl'] .e-r .e-r-cur { order: 2; }

/* ---------- Plan B: the outcome, then the campaign wall ---------- */
.e-pb-top { display: grid; gap: 2rem; align-items: center; }
.e-pb-copy h2 { margin: 0; font-size: clamp(34px, 4.2vw, 64px); line-height: 1; max-width: 14ch; }
.e-pb-copy .sec-lead { margin-top: 1rem; max-width: 52ch; }
.e-pb-copy .sv-stats { margin-top: 1.6rem; }
.e-pb-hero { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); box-shadow: 0 50px 90px -50px rgba(238, 78, 0, 0.45); max-width: 440px; justify-self: center; }
.e-pb-hero img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .e-pb-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); } }
.e-wall { margin-top: clamp(2.6rem, 5vw, 4rem); perspective: 1600px; overflow: hidden; }
.e-wall-track { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); margin: 0; padding: 1rem var(--gutter); list-style: none; width: max-content; transform-style: preserve-3d; will-change: transform; }
.e-wcard { flex: none; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line); background: #0b0b0e; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); transform-style: preserve-3d; will-change: transform; }
.e-wcard img, .e-wcard video { display: block; width: 100%; height: 100%; object-fit: cover; }
.e-wcard.post { width: clamp(220px, 22vw, 320px); aspect-ratio: 4 / 5; }
.e-wcard.tall { width: clamp(190px, 17vw, 250px); aspect-ratio: 9 / 16; }
.e-wcard.wide { width: clamp(340px, 34vw, 520px); aspect-ratio: 16 / 9; }
.e-wall-cap { margin-top: 0.8rem; color: var(--muted); font-size: 13.5px; }
@media (max-width: 899px) {
  .e-wall { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .e-wcard { scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .e-wall { overflow-x: auto; } }

/* the four gates: five rail chips fit on one line */
.sv-k-gates .sv-rail { gap: 0.3rem; }
.sv-k-gates .sv-rail button { padding: 5px 10px 5px 8px; font-size: 12px; }

/* ---------- The four gates as objects (services_pm.gates): receipt, card terminal, ad and page, signed targets, then the tap ---------- */
.e-gstage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-style: preserve-3d; }
.e-gplinth { position: absolute; left: 50%; bottom: 22%; width: min(360px, 70%); aspect-ratio: 3 / 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(206, 255, 94, 0.35), rgba(30, 16, 199, 0.25) 60%, transparent); box-shadow: 0 0 0 1px rgba(206, 255, 94, 0.25) inset; transform: rotateX(70deg); }
.e-gobj { position: absolute; margin: 0; width: min(330px, 62%); left: 50%; top: 46%; translate: -50% -50%; opacity: 0; transform: translateY(60px) scale(0.7) rotateY(-30deg);
  transition: opacity 0.6s var(--ease), transform 1s var(--ease); will-change: transform; }
.e-gobj img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.65)); }
.e-gobj.is-active { opacity: 1; transform: none; }
.e-gobj.is-below { opacity: 0; transform: translate(-60%, -40%) scale(0.35); }
.e-gfinal.is-active { opacity: 1; transform: none; }
.e-gfinal.is-active img { filter: drop-shadow(0 0 40px rgba(206, 255, 94, 0.45)) drop-shadow(0 40px 50px rgba(0, 0, 0, 0.6)); }
.e-gtrail { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; display: flex; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.e-gtrail li { position: relative; width: 58px; height: 58px; border-radius: 16px; border: 1px solid var(--glass-line); background: rgba(16, 16, 20, 0.8); display: grid; place-items: center; opacity: 0.45; transition: opacity 400ms, border-color 400ms; }
.e-gtrail img { width: 76%; height: auto; }
.e-gtrail i { position: absolute; top: -7px; inset-inline-end: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--lime); color: var(--ink); opacity: 0; transform: scale(0.5); transition: opacity 300ms, transform 400ms var(--ease); }
.e-gtrail li.now { opacity: 1; border-color: rgba(255, 255, 255, 0.35); }
.e-gtrail li.done { opacity: 1; border-color: rgba(206, 255, 94, 0.6); }
.e-gtrail li.done i { opacity: 1; transform: none; }
/* not pinned (phones, reduced motion): the five objects sit in a row */
.sv-k-gates:not(.live) .e-gstage { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0.6rem; }
.sv-k-gates:not(.live) .e-gobj { position: static; translate: none; opacity: 1; transform: none; width: 18%; min-width: 64px; }
.sv-k-gates:not(.live) .e-gplinth, .sv-k-gates:not(.live) .e-gtrail { display: none; }
.sv-k-gates .sv-rail { flex-wrap: nowrap; }
.sv-k-gates .sv-rail button { white-space: nowrap; }

/* ---------- Channel panels: what we do, then the proof ---------- */
.e-does { display: grid; gap: 0.7rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.e-does li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.65rem; font-size: 16.5px; line-height: 1.5; color: rgba(243, 240, 232, 0.88); }
.e-does i { margin-top: 3px; font-size: 18px; color: var(--lime); }
.e-panel .e-pf-when { margin: 0; }
.e-panel .e-pf-when + .e-reach { margin-top: 0.8rem; padding-top: 0; border-top: 0; }
.e-panel .e-does + .e-pf-when { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.e-reach > div { max-width: 26ch; }

/* Social service v4: editorial questions, an open production timeline, and real client work.
   All copy reads without JS. Logical placement mirrors the layout in Arabic. */
.so-buyers h2, .so-cycle h2, .so-scope h2, .so-calendar h2, .so-outcomes h2 {
  font-size:clamp(38px,4.8vw,68px); line-height:1.04; max-width:19ch; margin:0 0 1.5rem; text-wrap:balance;
}
[dir=rtl] .so-buyers h2, [dir=rtl] .so-cycle h2, [dir=rtl] .so-scope h2, [dir=rtl] .so-calendar h2, [dir=rtl] .so-outcomes h2 {
  font-family:var(--body); font-weight:800; line-height:1.35; max-width:22ch;
}
.so-buyers > .wrap > .sec-lead { max-width:58ch; }
.so-buyer-ui { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,2fr); gap:3rem; margin-top:2.8rem; align-items:start; }
.so-tabs { display:grid; }
.so-tabs button { display:grid; grid-template-columns:28px minmax(0,1fr) 20px; gap:.7rem; align-items:center; padding:1.25rem .8rem; text-align:start; font:inherit; color:var(--muted); background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; }
.so-tabs button > span { font-size:12px; font-weight:700; }
.so-tabs button b { font-size:18px; font-weight:600; line-height:1.5; }
.so-tabs button i { color:var(--lime); }
.so-tabs button[aria-selected=true] { color:var(--text); background:linear-gradient(90deg,rgba(206,255,94,.07),transparent); box-shadow:inset 3px 0 var(--lime); }
[dir=rtl] .so-tabs button[aria-selected=true] { background:linear-gradient(-90deg,rgba(206,255,94,.07),transparent); box-shadow:inset -3px 0 var(--lime); }
[dir=rtl] .so-tabs button > i { transform:scaleX(-1); }
.so-tabs button:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.so-panels { min-width:0; }
.so-panel { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; min-height:370px; }
.so-panel[hidden] { display:none; }
.so-panel + .so-panel { margin-top:2.5rem; }
.so-buyer-ui.live .so-panel { margin-top:0; }
.so-answer-copy h3 { margin:0 0 1.1rem; font:400 clamp(28px,3vw,42px)/1.12 var(--display); text-wrap:balance; }
.so-answer-copy > p { color:var(--muted); font-size:17px; line-height:1.7; }
.so-formats { display:flex; align-items:start; gap:.7rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.so-formats i { color:var(--lime); padding-top:.3rem; }
.so-example { margin:0; }
.so-example { max-width:340px; width:100%; justify-self:center; }
.so-example > img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:rgba(255,255,255,.025); border-radius:var(--r-card); }
.so-example figcaption { margin-top:.8rem; color:var(--muted); font-size:12px; line-height:1.5; }
.so-answer-art { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:300px; perspective:900px; }
.so-answer-art .so-object:first-child { transform:rotateY(-18deg) translateY(-25px); }
.so-answer-art .so-object:last-child { transform:rotateY(18deg) translateY(25px); }
.so-object { display:block; width:100%; height:auto; object-fit:contain; mix-blend-mode:lighten; }
.so-step-art, .so-scope-art, .so-calendar-art, .so-answer-art { mix-blend-mode:lighten; }
.so-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:3rem 0 0; padding:0; gap:1.4rem; position:relative; }
.so-step { position:relative; min-width:0; padding-top:.7rem; border-top:1px solid var(--line); }
.so-step-art { height:150px; display:flex; justify-content:center; align-items:center; perspective:800px; }
.so-step-art .so-object { max-width:155px; max-height:150px; }
.so-step-no { display:block; margin:1rem 0 .7rem; font-size:13px; color:var(--muted); }
.so-step h3 { margin:0 0 .7rem; font-size:22px; line-height:1.3; }
.so-step > p { font-size:15px; color:var(--muted); line-height:1.7; }
.so-step .so-delivery { display:flex; gap:.5rem; align-items:start; color:var(--text); font-size:14px; }
.so-delivery i { color:var(--lime); padding-top:.25rem; }
.so-approval { border-top-color:var(--lime); }
.so-approval h3, .so-approval .so-step-no { color:var(--lime); }
.so-approval .so-step-art { background:radial-gradient(ellipse at center,rgba(206,255,94,.10),transparent 70%); }
.so-scope-list { list-style:none; margin:2.5rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
.so-scope-list > li { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:1.4rem; padding:2.2rem 0; border-top:1px solid var(--line); }
.so-scope-list h3 { font-size:24px; line-height:1.3; margin:0 0 .7rem; }
.so-scope-list p { margin:0; color:var(--muted); line-height:1.7; font-size:16px; }
.so-cal-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:start; }
.so-calendar-art { width:230px; margin:2rem auto 0; perspective:900px; }
.so-moments { list-style:none; padding:0; margin:0; }
.so-moments li { display:grid; grid-template-columns:35px minmax(0,1fr); gap:1.2rem; padding:1.7rem 0; border-top:1px solid var(--line); }
.so-moments i { font-size:25px; color:var(--lime); margin-top:.2rem; }
.so-moments h3 { font-size:23px; margin:0 0 .6rem; line-height:1.35; }
.so-moments p { margin:0; color:var(--muted); font-size:17px; line-height:1.7; }
.so-outcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2.5rem; }
.so-outcome { padding-top:1.6rem; border-top:1px solid var(--line); }
.so-outcome.good { border-color:rgba(206,255,94,.65); }
.so-outcome h3 { font-size:25px; margin:0 0 1.3rem; }
.so-outcome.good h3 { color:var(--lime); }
.so-outcome ul { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.so-outcome li { display:flex; gap:.8rem; font-size:18px; line-height:1.6; color:var(--muted); }
.so-outcome.good li { color:var(--text); }
.so-outcome i { padding-top:.3rem; }
.so-outcome.good i { color:var(--lime); }
.so-outcomes .sv-basis { margin-top:2rem; max-width:80ch; }
[dir=rtl] .so-answer-copy h3 { font-family:var(--body); font-weight:800; line-height:1.4; }
[dir=rtl] .so-step h3, [dir=rtl] .so-moments h3 { line-height:1.5; }
@media(max-width:1050px) {
  .so-buyer-ui { grid-template-columns:1fr; gap:2rem; }
  .so-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
  .so-tabs button { grid-template-columns:20px minmax(0,1fr); padding:.9rem .6rem; }
  .so-tabs button > i { display:none; }
  .so-tabs button b { font-size:16px; }
  .so-steps { gap:1rem; }
  .so-step h3 { font-size:20px; }
  .so-scope-list > li { grid-template-columns:90px minmax(0,1fr); gap:1rem; }
}
@media(max-width:699px) {
  .so-cal-grid,.so-outcome-grid,.so-scope-list { grid-template-columns:1fr; gap:2rem; }
  .so-tabs { grid-template-columns:1fr 1fr; }
  .so-tabs button { min-height:75px; }
  .so-panel { grid-template-columns:1fr; gap:1.3rem; min-height:0; }
  .so-panel h3 { font-size:30px; }
  .so-example { max-width:none; width:100%; order:-1; }
  .so-answer-art { min-height:210px; max-width:300px; margin-inline:auto; }
  .so-steps { grid-template-columns:1fr; gap:0; }
  .so-step { display:grid; grid-template-columns:80px minmax(0,1fr); gap:0 1rem; padding:1.7rem 0; }
  .so-step-art { grid-column:1; grid-row:1/5; height:110px; }
  .so-step-no { margin:0 0 .4rem; }
  .so-step > :not(.so-step-art) { grid-column:2; }
  .so-step > p { margin:.4rem 0; font-size:16px; }
  .so-scope-list { gap:0; }
  .so-scope-list > li { grid-template-columns:80px minmax(0,1fr); }
  .so-scope-list h3 { font-size:22px; }
  .so-calendar-art { width:170px; margin-top:1.5rem; }
  .so-outcome-grid { gap:2.5rem; }
}

/* Founder review 11 Nov: conversion page only, readable figures and real before/after. */
.conv-page .sb-steps .sb-n { color: var(--lime); opacity: 1; }
.conv-guide-copy { max-width: 880px; margin-bottom: 2.5rem; }
.conv-guide-copy h2 { margin-bottom: 1.4rem; }
.conv-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.conv-comparison > figure { margin: 0; min-width: 0; }
.conv-comparison > figure > figcaption { margin-bottom: .8rem; font-size: 16px; font-weight: 800; color: var(--lime); }
.conv-comparison .sv-screen { height: auto; aspect-ratio: 1600 / 759; overflow: hidden; }
.conv-comparison .sv-screen img { transform: none; width: 100%; height: auto; }
.conv-page #conversion-work .sv-conv { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.conv-page #conversion-work .sv-conv-copy { order: 0; min-width: 0; }
.conv-page #conversion-work .sv-conv-vis { min-width: 0; }
.conv-page #conversion-work .sv-ba2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; padding: 0; }
.conv-page #conversion-work .sv-ba2 > figure { position: relative; inset: auto; width: 100%; opacity: 1; filter: none; transform: none; }
.conv-page #conversion-work .sv-ba2 > figure > figcaption { position: static; display: table; margin-bottom: .9rem; }
.conv-page #conversion-work .sv-ba2 .sv-screen { height: auto; aspect-ratio: 1600 / 759; overflow: hidden; }
.conv-page #conversion-work .sv-ba2 img { transform: none; }
.conv-page #conversion-work .sv-stats { gap: clamp(1.2rem, 4vw, 4rem); }
.conv-page #conversion-work .sv-stats > div { min-width: 0; gap: .7rem; }
.conv-page #conversion-work .sv-stats dd { white-space: normal; font-size: clamp(29px, 3.7vw, 52px); line-height: 1.35; letter-spacing: 0; overflow-wrap: normal; }
.conv-page #conversion-work .sv-stats dt { font-size: 14px; line-height: 1.6; }
.conv-page #conversion-work .sv-conv-img { max-width: 900px; margin-inline: auto; }
.conv-journey-film { display: none; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.conv-page .film-ready .conv-journey-film { display: block; position: absolute; inset: 0; z-index: 1; }
.conv-page .film-ready .e-leak-world .e-scene { visibility: hidden; }
.conv-skip { display: inline-block; position: relative; z-index: 3; margin: 1rem max(1rem, calc((100vw - 1280px) / 2)); font-size: 14px; color: var(--muted); text-underline-offset: .25em; }
.conv-page .e-leak.live .e-leak-copy { max-width: 490px; }
.conv-page .e-leak.live .e-beat-t { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.55; }
.conv-page .e-leak.live .e-leak-copy h2 { font-size: clamp(32px, 3.5vw, 54px); }
[dir='rtl'] .conv-page .sv-stats dd { white-space: normal; line-height: 1.6; }
@media (max-width: 699px) {
  .conv-comparison, .conv-page #conversion-work .sv-ba2 { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }

  .conv-page #conversion-work .sv-stats { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .conv-page #conversion-work .sv-stats > div { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
  .conv-page #conversion-work .sv-stats dd { font-size: 34px; }
}
@media (max-width: 899px) {
  .conv-page .e-leak.live .e-leak-pin { align-items: flex-end; }
  .conv-page .e-leak.live .e-leak-cam { inset: 0 0 auto; width: 100%; height: 52%; }
  .conv-page .e-leak.live .e-leak-in { padding-block: 1rem 5.5rem; width: 100%; }
  .conv-page .e-leak.live .e-leak-copy { max-width: none; }
  .conv-page .e-leak.live .e-leak-copy h2 { font-size: clamp(26px, 5vw, 34px); max-width: none; margin-bottom: .9rem; }
  .conv-page .e-leak.live .e-beat-t { font-size: 19px; line-height: 1.65; max-width: none; }
  .conv-page .e-leak.live .e-rail { margin-top: 1.2rem; gap: .3rem; }
  .conv-page .e-leak.live .e-leak-shade { background: linear-gradient(to bottom, transparent 12%, rgba(12,12,14,.08) 30%, var(--bg) 53%); }
  .conv-page .e-leak.live .conv-journey-film, .conv-page .e-leak.live .e-scene { object-position: 79% 50%; }
  .conv-page .e-leak.live .e-rail button { padding: 8px; font-size: 11px; }
}