/* Prix Design System 3 (rewritten from scratch, 2026-11-01)
   Owner direction: the freshness of the SaaS references, in our colours. Cream page, white cards on
   top, black for emphasis. Headings in Haffer Regular and smaller. Visuals are real assets (photos,
   client sites, videos, logos) with small animated HTML interface cards on top: looped, eased,
   minimal. Platforms appear with their original logos. Copy speaks to an elite client segment. */

@font-face { font-family: "Haffer"; src: url(../fonts/Haffer-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Haffer"; src: url(../fonts/Haffer-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Haffer Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; }

:root {
  --cream: #f0ede6; --paper: #faf8f5; --white: #fff; --ink: #000; --ink-2: #111; --ink-3: #1c1c1c;
  --g-800: #222; --g-700: #444; --g-600: #666; --g-450: #8a8a8a; --g-350: #aaa; --g-on-ink: #c5c5c5; --g-250: #ddd; --g-150: #eee;
  --hair: rgba(0, 0, 0, .07);
  /* Every raised surface gets a hairline edge first, so white sits apart from white and from cream without a heavier shadow (2026-11-05). */
  --edge: 0 0 0 1px rgba(26, 23, 20, .06);
  --tint: #f4f1eb;
  --shadow: var(--edge), 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -22px rgba(0, 0, 0, .22);
  --shadow-lg: var(--edge), 0 2px 6px rgba(0, 0, 0, .05), 0 28px 60px -28px rgba(0, 0, 0, .3);

  /* Type, 360 → 1440. Headings are Haffer Regular: lighter and fresher, like the references. */
  --t-h1: clamp(2.25rem, 1.83rem + 1.85vw, 3.5rem);        /* 36 → 56 */
  --t-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);          /* 28 → 40 */
  --t-h3: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);        /* 18 → 20 */
  --t-h4: 1rem;
  --t-lead: clamp(1.0625rem, 1.03rem + .14vw, 1.15rem);    /* 17 → 18.4 */
  --t-body: .9375rem;                                      /* 15 */
  --t-small: .875rem;
  --t-micro: .8125rem;
  --t-num: clamp(2.5rem, 1.95rem + 2.4vw, 4.125rem);       /* 40 → 66: one stat per card */
  --t-num-sm: clamp(1.5rem, 1.38rem + .55vw, 1.875rem);    /* 24 → 30 */

  /* Vertical rhythm (2026-11-05): content-to-content gaps were 250-380 px at 1440. Now ~170 px between surfaces,
     ~110 px inside one surface, less again after the hero and around strips (see the rhythm rules below). */
  --sp-section: clamp(3.5rem, 2.7rem + 3vw, 5.5rem);
  --sp-tight: clamp(2.5rem, 2.2rem + 1.2vw, 3.5rem);
  --gap: clamp(.75rem, .66rem + .4vw, 1rem);
  --margin: clamp(1.25rem, .6rem + 2.9vw, 3rem);
  --max: 78rem;
  --header: 4.25rem;
  --r-card: 1.25rem; --r-in: .9rem; --r-ui: .75rem; --r-pill: 50rem;
  --text: "Haffer", "Haffer Fallback", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);

  --bg: var(--cream); --fg: var(--ink); --muted: var(--g-600); --soft: var(--g-450); --line: var(--hair); --card: var(--white);
}
[data-surface="cream"] { --bg: var(--cream); }
[data-surface="paper"] { --bg: var(--paper); }
[data-surface="ink"] { --bg: var(--ink); --fg: var(--white); --muted: var(--g-on-ink); --soft: #8f8f8f; --line: rgba(255, 255, 255, .1); --card: var(--ink-3); }
[data-surface] { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 1rem); background: var(--cream); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-body)/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 400; background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: var(--r-ui); text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.t-h1 { font: 400 var(--t-h1)/1.05 var(--text); letter-spacing: -.035em; text-wrap: balance; }
.t-h2 { font: 400 var(--t-h2)/1.1 var(--text); letter-spacing: -.03em; text-wrap: balance; }
.t-h3 { font: 400 var(--t-h3)/1.3 var(--text); letter-spacing: -.015em; }
.t-h4 { font: 500 var(--t-h4)/1.35 var(--text); letter-spacing: -.01em; }
.t-lead { font: 400 var(--t-lead)/1.5 var(--text); color: var(--muted); max-width: 32em; text-wrap: pretty; }
.t-body { font: 400 var(--t-body)/1.6 var(--text); color: var(--muted); max-width: 38em; text-wrap: pretty; }
.t-small { font: 400 var(--t-small)/1.5 var(--text); color: var(--muted); }
.t-micro { font: 400 var(--t-micro)/1.4 var(--text); color: var(--soft); }
.t-num { font: 400 var(--t-num)/.95 var(--text); letter-spacing: -.045em; white-space: nowrap; }
.t-num-sm { font: 400 var(--t-num-sm)/1 var(--text); letter-spacing: -.03em; white-space: nowrap; }
.t-num small, .t-num-sm small { font-size: .4em; letter-spacing: 0; color: var(--soft); margin-left: .15em; }
.mute { color: var(--soft); }   /* second part of a two-tone heading */
.t-fg { color: var(--fg); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--sp-section); position: relative; }
.section.is-tight { padding-block: var(--sp-tight); }
.section.is-flush-top { padding-top: 0; }
/* Rhythm: two sections on the same surface share one gap; the first section after the trust strip starts closer. */
.section[data-surface="cream"] + .section[data-surface="cream"], .section[data-surface="paper"] + .section[data-surface="paper"] { padding-top: calc(var(--sp-section) * .35); }
.trust + .section { padding-top: calc(var(--sp-section) * .8); }
.head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 1.7rem + 1.4vw, 3rem); }
.head.is-center { justify-items: center; text-align: center; }
.head.is-center .t-lead { text-align: center; }
@media (min-width: 900px) { .head.is-split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .head.is-split .t-lead { max-width: 26em; } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* Bento: 12 columns on desktop, 6 on tablet, 1 on phones. Spans .s-3 … .s-12, rows .r-2. */
.bento { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.bento > * { min-width: 0; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento > .s-6, .bento > .s-7, .bento > .s-8, .bento > .s-12 { grid-column: 1 / -1; } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento > * { grid-column: span 4; }
  .bento > .s-3 { grid-column: span 3; } .bento > .s-4 { grid-column: span 4; } .bento > .s-5 { grid-column: span 5; } .bento > .s-6 { grid-column: span 6; }
  .bento > .s-7 { grid-column: span 7; } .bento > .s-8 { grid-column: span 8; } .bento > .s-12 { grid-column: span 12; } .bento > .r-2 { grid-row: span 2; }
}

/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; border-radius: var(--r-card); background: var(--card); padding: clamp(1.15rem, 1rem + .7vw, 1.75rem); overflow: hidden; box-shadow: var(--shadow); color: var(--fg); text-decoration: none; isolation: isolate; }
.card.is-ink { --fg: var(--white); --muted: var(--g-on-ink); --soft: #8f8f8f; --line: rgba(255, 255, 255, .1); background: var(--ink-2); color: var(--white); }
.card.is-soft { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.card.is-photo { --fg: var(--white); --muted: rgba(255, 255, 255, .82); background: var(--ink-3); color: var(--white); }
.card.is-photo > .bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.card.is-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .12); pointer-events: none; }
.card .copy { margin-top: auto; display: grid; gap: .4rem; position: relative; z-index: 2; }
a.card .copy { padding-right: 2.75rem; }
.card .copy h3 { font: 400 var(--t-h3)/1.3 var(--text); letter-spacing: -.015em; }
.card .copy p:not([class]) { font-size: var(--t-small); color: var(--muted); max-width: 32em; }
.card .stage { position: relative; flex: 1; min-height: 15rem; display: grid; place-items: center; }
.card .stage.is-tall { min-height: 20rem; }
a.card { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
a.card:hover { box-shadow: var(--shadow-lg); }
.card .go { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: var(--paper); color: var(--ink); transition: transform .5s var(--ease), background-color .3s, color .3s; }
.card .go .icon { width: 1rem; height: 1rem; }
a.card:hover .go { background: var(--ink); color: var(--white); transform: rotate(-45deg); }
.card.is-ink .go, .card.is-photo .go { background: rgba(255, 255, 255, .14); color: var(--white); }
a.card.is-ink:hover .go, a.card.is-photo:hover .go { background: var(--white); color: var(--ink); }
.card .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 2; }

/* ---------- Brand marks and icons ---------- */
.px-logo { display: block; height: 1.3rem; width: auto; aspect-ratio: 1695 / 266; fill: currentColor; overflow: visible; }
.px-mark { display: block; width: auto; aspect-ratio: 465 / 266; fill: currentColor; }
.px-wordmark-xl { display: block; width: 100%; height: auto; aspect-ratio: 1695 / 266; fill: currentColor; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.icon.is-sm { width: 1rem; height: 1rem; }
.brand { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; }
.chip-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--white); box-shadow: var(--shadow); flex: none; color: var(--ink); }
.chip-ico .brand, .chip-ico .icon { width: 1.2rem; height: 1.2rem; }
.chip-ico.is-lg { width: 3.5rem; height: 3.5rem; border-radius: .95rem; }
.chip-ico.is-lg .brand, .chip-ico.is-lg .icon { width: 1.6rem; height: 1.6rem; }
.chip-ico.is-ink { background: var(--ink); color: var(--white); }
.chip-ico.is-flat { box-shadow: inset 0 0 0 1px var(--hair); background: var(--tint); }
.chip-ico .badge { width: 1.9rem; height: auto; mix-blend-mode: multiply; }

/* ---------- Buttons (the live system: black rectangles with .75rem corners) ---------- */
.btn { --b-bg: var(--ink); --b-fg: var(--white); --b-line: var(--ink); position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .25rem .3rem .25rem 1.05rem; border-radius: var(--r-ui); background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-line); font: 500 .9375rem/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn .btn-label { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2; }
.btn .btn-label span { display: block; transition: transform .5s var(--ease); }
.btn .btn-label span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .btn-label span, .btn:focus-visible .btn-label span { transform: translateY(-100%); }
.btn .btn-ico { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: .5rem; background: var(--b-fg); color: var(--b-bg); }
.btn .btn-ico .icon { width: 1rem; height: 1rem; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover .btn-ico .icon { transform: translateX(2px); }
}
.btn:hover { --b-bg: #262626; --b-line: #262626; }
.btn.is-light { --b-bg: var(--white); --b-fg: var(--ink); --b-line: var(--white); box-shadow: var(--shadow); }
.btn.is-light .btn-ico { background: var(--ink); color: var(--white); }
.btn.is-light:hover { --b-bg: var(--paper); --b-line: var(--paper); }
[data-surface="ink"] .btn:not(.is-light), .card.is-ink .btn:not(.is-light), .card.is-photo .btn:not(.is-light) { --b-bg: var(--white); --b-fg: var(--ink); --b-line: var(--white); }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-ui); border: 0; background: var(--white); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; transition: background-color .3s, color .3s; }
.icon-btn:hover { background: var(--ink); color: var(--white); }
.icon-btn .icon { width: 1.05rem; height: 1.05rem; }
.link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; transition: text-underline-offset .5s var(--ease); }
.link:hover { text-underline-offset: .5em; }
.link .icon { transition: transform .18s ease-out; }
.link[href^="tel:"] { white-space: nowrap; text-decoration: none; transition: opacity .18s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .link[href^="tel:"]:hover { opacity: .76; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link:not([href^="tel:"]):hover .icon { transform: translateX(2px); }
}
.link .icon { width: .95rem; height: .95rem; }
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .7rem; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow); font: 400 var(--t-micro)/1.25 var(--text); color: var(--g-700); white-space: nowrap; }
.pill .brand, .pill .icon { width: .95rem; height: .95rem; }
.pill.is-ghost { background: rgba(0, 0, 0, .05); box-shadow: none; }
.pill.is-ink { background: var(--ink); color: var(--white); box-shadow: none; }
.card.is-ink .pill, [data-surface="ink"] .pill, .card.is-photo .pill.is-ghost { background: rgba(255, 255, 255, .12); color: var(--white); box-shadow: none; }
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
html.px-motion .dot.is-live { animation: px-pulse 2s var(--ease) infinite; }
@keyframes px-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); } 70%, 100% { box-shadow: 0 0 0 .45rem rgba(0, 0, 0, 0); } }

/* ---------- Header ---------- */
.px-header { position: fixed; inset: 0 0 auto; z-index: 90; color: var(--fg); transition: transform .6s var(--ease), background-color .35s, color .35s; }
.px-header.is-hidden { transform: translateY(-110%); }
.px-header.is-solid { background: rgba(240, 237, 230, .86); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); }
.px-header.on-ink { color: var(--white); }
.px-header.on-ink.is-solid { background: rgba(0, 0, 0, .72); }
.px-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header); max-width: 86rem; margin-inline: auto; padding-inline: var(--margin); }
.px-header .home { display: inline-flex; align-items: center; min-height: 2.75rem; }
.px-nav { display: none; }
.px-nav ul { display: flex; gap: .1rem; padding: .25rem; border-radius: .9rem; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px var(--hair); }
.px-header.on-ink .px-nav ul { background: rgba(255, 255, 255, .08); box-shadow: none; }
.px-nav a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .85rem; border-radius: .65rem; text-decoration: none; font-size: .875rem; transition: background-color .3s; }
.px-nav a:hover { background: var(--white); }
.px-header.on-ink .px-nav a:hover { background: rgba(255, 255, 255, .14); }
.px-header .actions { display: flex; align-items: center; gap: .5rem; }
.px-header .btn { min-height: 2.5rem; font-size: .875rem; }
.px-header .btn .btn-ico { width: 1.875rem; height: 1.875rem; }
.px-header.on-ink .btn { --b-bg: var(--white); --b-fg: var(--ink); --b-line: var(--white); }
.menu-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: var(--r-ui); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--hair); color: inherit; cursor: pointer; font-size: .875rem; }
.px-header.on-ink .menu-btn, html.menu-open .menu-btn { background: rgba(255, 255, 255, .12); box-shadow: none; }
.menu-btn .bars { position: relative; width: 1rem; height: .55rem; }
.menu-btn .bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn .bars i:first-child { top: 0; } .menu-btn .bars i:last-child { top: calc(100% - 1.5px); }
html.menu-open .menu-btn .bars i:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
html.menu-open .menu-btn .bars i:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }
@media (min-width: 1000px) { .px-nav { display: block; } }
@media (max-width: 560px) { .px-header .actions .btn { display: none; } }
.px-menu { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--white); --fg: var(--white); --muted: var(--g-on-ink); --line: rgba(255, 255, 255, .1); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .75s var(--ease-io), visibility 0s linear .75s; overflow-y: auto; }
html.menu-open .px-menu { visibility: visible; clip-path: inset(0 0 0% 0); transition: clip-path .75s var(--ease-io), visibility 0s; }
html.menu-open { overflow: hidden; }
html.menu-open .px-header { color: var(--white); transform: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.px-menu .inner { min-height: 100%; padding: calc(var(--header) + 2rem) var(--margin) 2rem; display: grid; gap: 2rem; align-content: space-between; max-width: var(--max); margin-inline: auto; }
.px-menu .links a { display: flex; align-items: baseline; gap: 1rem; padding-block: .2rem; text-decoration: none; font: 400 var(--t-h1)/1.12 var(--text); letter-spacing: -.035em; transition: color .3s; }
.px-menu .links a small { font: 400 var(--t-micro)/1 var(--text); letter-spacing: 0; color: var(--muted); }
.px-menu .links:hover a { color: #555; }
.px-menu .links a:hover, .px-menu .links a:focus-visible { color: var(--white); }
.px-menu .meta { display: flex; flex-wrap: wrap; gap: 1rem 3rem; color: var(--muted); font-size: .9375rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.px-menu .meta a { color: var(--white); text-decoration: none; }

/* ---------- Intro (v4): orbit particles · studio magnetic lines · mosaic tiles. Vector mark, cursor-interactive. ---------- */
.px-intro { display: none; }
html.js.px-loading { overflow: hidden; }
html.js.px-loading .px-intro { position: fixed; inset: 0; z-index: 300; display: block; touch-action: none; cursor: crosshair; }
html.js.px-loading .px-header .px-logo { opacity: 0; }
.pi-curtain { position: absolute; inset: 0; background: var(--ink); color: var(--white); contain: layout paint style; }
/* Mosaic v5: the live brand-motion curtain (icon in the shader, wordmark under it, curtain slides up). */
.px-intro[data-intro="mosaic"] { --lw: min(43vw, 580px, 118svh); cursor: default; }
.pm-icon { display: none; }
.px-intro.no-gl .pm-icon { display: block; position: absolute; left: 50%; top: 50%; width: var(--lw); height: auto; transform: translate(-50%, -50%); }
.pm-word { position: absolute; left: 50%; top: calc(50% + var(--lw) * .286 + 36px); width: clamp(116px, 12vw, 168px); height: auto; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .65s ease, transform .85s cubic-bezier(.16, 1, .3, 1); }
html.js .pm-word { opacity: 0; }
html.js .px-intro[data-stage="3"] .pm-word { opacity: 1; transform: translate(-50%, 0); }
html.js .px-intro[data-stage="4"] .pm-word { opacity: 0; transform: translate(-50%, 0); }
.px-intro[data-intro="mosaic"] .px-intro__hint { transform: translate(-50%, 6px); transition: opacity .5s ease, transform .7s ease; }
html.js .px-intro[data-intro="mosaic"][data-stage="1"] .px-intro__hint { opacity: 0; }
.px-intro[data-intro="mosaic"][data-stage="2"] .px-intro__hint, .px-intro[data-intro="mosaic"][data-stage="3"] .px-intro__hint { transform: translate(-50%, 0); }
.px-intro.is-exiting[data-intro="mosaic"] .pi-curtain { transform: translateY(-100%); transition: transform .9s cubic-bezier(.76, 0, .24, 1); }
html.pm-exit .px-header .px-logo { opacity: 1 !important; transition: opacity .6s ease .3s; }
@media (max-width: 600px) { .px-intro[data-intro="mosaic"] { --lw: min(72vw, 118svh); } .pm-word { top: calc(50% + var(--lw) * .286 + 28px); width: 128px; } }
@media (max-height: 500px) { .px-intro[data-intro="mosaic"] { --lw: min(43vw, 580px, 85svh); } .pm-word { top: calc(50% + var(--lw) * .286 + 16px); width: 110px; } }
.pi-curtain canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pi-mark { position: absolute; z-index: 2; height: auto; color: var(--white); fill: currentColor; overflow: visible; pointer-events: none; will-change: transform, opacity; }
html.js .pi-mark { opacity: 0; }
.px-intro__foot { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: center; padding: 22px 30px max(22px, env(safe-area-inset-bottom)); color: var(--white); font: 400 .75rem/1 var(--text); transition: opacity .3s; }
.px-intro__hint { position: absolute; left: 50%; transform: translateX(-50%); color: #8a8a8a; }
.px-intro__prog { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.px-intro__foot .sl { opacity: .4; }
.px-intro.is-exiting .px-intro__foot { opacity: 0; }
.px-intro.is-exiting[data-intro="orbit"] .pi-curtain { opacity: 0; transition: opacity .85s cubic-bezier(.77, 0, .175, 1) .05s; }
.px-intro.is-exiting[data-intro="studio"] .pi-curtain { transform: translateY(-100%); transition: transform .9s cubic-bezier(.77, 0, .175, 1); }
html.intro-exit .px-header .px-logo { opacity: 1 !important; }
html.intro-exit .px-header .px-logo .hm { opacity: 0; }
html.intro-exit .px-header .px-logo .hw { animation: pi-word .8s cubic-bezier(.16, 1, .3, 1) .25s both; }
@keyframes pi-word { from { opacity: 0; transform: translateX(-14px); } }
@media (max-width: 600px) { .px-intro__foot { padding-inline: 20px; font-size: .6875rem; } .px-intro__hint { display: none; } }
html.anim-failed .px-intro { display: none !important; }
html.anim-failed .px-header .px-logo { opacity: 1 !important; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--header) + clamp(1.5rem, 1rem + 2vw, 3rem)); padding-bottom: var(--sp-tight); }
.hero-grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero-copy .t-lead { max-width: 27em; }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .4rem; }
.avatars { display: flex; }
.avatars img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); }
.avatars img + img { margin-left: -.55rem; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hero.is-center .hero-copy { justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.hero.is-center .hero-copy .t-lead { text-align: center; }

/* A photographic stage that carries floating interface cards */
.scene { position: relative; min-width: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink-3); aspect-ratio: 4 / 3.4; box-shadow: var(--shadow); isolation: isolate; }
.scene > .bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.scene.is-wide { aspect-ratio: 16 / 8; }
.scene .slot { position: absolute; z-index: 2; }
@media (max-width: 759px) { .scene, .scene.is-wide { aspect-ratio: auto; min-height: 30rem; width: 100%; } .scene.is-wide { min-height: 26rem; } }

/* ---------- Floating interface cards (HTML mocks, looped by prix-v3.js) ---------- */
.ui { position: relative; width: min(100%, 21rem); border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow-lg); color: var(--ink); font: 400 .8125rem/1.4 var(--text); }
.ui-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; }
.ui-head b { font-weight: 500; flex: 1; min-width: 0; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-head .chip-ico { width: 2rem; height: 2rem; border-radius: .55rem; box-shadow: none; background: var(--paper); }
.ui-head .chip-ico .brand, .ui-head .chip-ico .icon { width: 1rem; height: 1rem; }
.ui-time { padding: .12rem .42rem; border-radius: .4rem; background: var(--paper); font-size: .72rem; color: var(--g-600); white-space: nowrap; }
.ui-body { border-top: 1px solid var(--g-150); padding: .7rem .8rem; display: grid; gap: .5rem; color: var(--g-600); }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ui-row .pill, .card.is-ink .ui .pill, [data-surface="ink"] .ui .pill, .card.is-photo .ui .pill { background: var(--white); color: var(--g-700); box-shadow: inset 0 0 0 1px var(--g-150); }

/* Notification stack: newest drops in on top, the oldest leaves */
.notifs { position: relative; display: grid; gap: .5rem; width: min(100%, 21rem); }
.notifs > .ui { will-change: transform, opacity; }

/* Search result (SEO and GEO) */
.serp { width: min(100%, 23rem); display: grid; gap: .55rem; }
.serp .q { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-lg); font-size: .875rem; color: var(--g-700); min-height: 2.8rem; }
.serp .q .brand { width: 1.1rem; height: 1.1rem; }
.serp .q .typed { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.serp .q .typed::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: currentColor; vertical-align: -.15em; animation: px-caret 1s steps(1) infinite; }
@keyframes px-caret { 50% { opacity: 0; } }
.serp .res { border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow); padding: .8rem .9rem; display: grid; gap: .3rem; font-size: .75rem; color: var(--g-600); }
.serp .res .site { display: flex; align-items: center; gap: .5rem; }
.serp .res .site i { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-style: normal; font-size: .62rem; flex: none; }
.serp .res b { font-weight: 500; font-size: .9rem; color: var(--ink); }
.serp .res .ln { height: .4rem; border-radius: 1rem; background: var(--g-150); }
.serp .res.is-ai { background: var(--ink); color: var(--g-on-ink); }
.serp .res.is-ai b { color: var(--white); }
.serp .res.is-ai .ln { background: rgba(255, 255, 255, .14); }

/* Ad metric panel */
.metric { width: min(100%, 20rem); }
.metric .big { font: 400 2.4rem/1 var(--text); letter-spacing: -.045em; color: var(--ink); }
.metric .toggle { width: 2.1rem; height: 1.2rem; border-radius: 1rem; background: var(--ink); position: relative; flex: none; }
.metric .toggle::after { content: ""; position: absolute; right: .15rem; top: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--white); }
.metric .meter { height: .38rem; border-radius: 1rem; background: var(--g-150); overflow: hidden; }
.metric .meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: 0 50%; }
.metric .bars { display: flex; align-items: end; gap: .3rem; height: 3.2rem; }
.metric .bars i { flex: 1; border-radius: .25rem .25rem .1rem .1rem; background: var(--g-150); transform-origin: 50% 100%; }
.metric .bars i:last-child { background: var(--ink); }

/* Browser frame around a real client site, plus an event toast */
.browser { width: 100%; border-radius: var(--r-in); overflow: hidden; background: var(--white); box-shadow: var(--shadow-lg); color: var(--ink); }
.browser .chrome { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border-bottom: 1px solid var(--g-150); font-size: .7rem; color: var(--g-600); }
.browser .chrome i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--g-250); flex: none; }
.browser .chrome span { flex: 1; text-align: center; background: var(--paper); border-radius: .35rem; padding: .18rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser .view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--g-150); }
.browser .view img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.toast { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem .55rem .55rem; border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow-lg); color: var(--ink); font-size: .8125rem; white-space: nowrap; }
.toast b { font-weight: 500; }
.toast .chip-ico { width: 2rem; height: 2rem; border-radius: .55rem; box-shadow: none; background: var(--paper); }
.toast .chip-ico .brand, .toast .chip-ico .icon { width: 1rem; height: 1rem; }

/* Faces grid (real clients from the video posters, tiles swap) */
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.faces span { position: relative; aspect-ratio: 1; border-radius: .8rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.faces span img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faces span.is-mark { display: grid; place-items: center; background: var(--ink); color: var(--white); box-shadow: none; }
.faces span.is-mark svg { width: 46%; }

/* Logo chips (marquee) and the platform icon rows */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; width: max-content; align-items: center; padding-block: .75rem; }
.marquee .track > * { flex: none; margin-right: var(--gap); }
.marquee2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.marquee2 > .marquee { min-width: 0; }
.marquee2 .marquee .track { padding-block: .35rem; }
/* Design-system chip: white on cream, a hairline instead of a shadow. */
.lchip { display: grid; place-items: center; height: 4.25rem; min-width: 10rem; padding-inline: 1.4rem; border-radius: var(--r-in); background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.lchip img { width: calc(var(--w, 5rem) * .92); max-height: 2rem; height: auto; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .9; }
.lchip img.is-faint { filter: grayscale(1) brightness(0) contrast(2); opacity: 1; }
.tech { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee .track { flex-wrap: wrap; width: auto; row-gap: var(--gap); } .marquee .track [aria-hidden="true"] { display: none; } }

/* Logo wall: white tiles that flip to the next client in a diagonal wave */
.logowall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.logowall li { position: relative; height: 5.5rem; border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.logowall .lg { position: absolute; inset: 0; display: grid; place-items: center; }
.logowall img { width: calc(var(--w, 5rem) * .95); max-height: 2.2rem; height: auto; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .9; }
.logowall img.is-faint { filter: grayscale(1) brightness(0) contrast(2); opacity: 1; }
@media (min-width: 640px) { .logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logowall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Partner badges (original artwork) */
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.partners .p { display: inline-flex; align-items: center; gap: .55rem; height: 3rem; padding: 0 1rem 0 .55rem; border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow); font-size: var(--t-small); color: var(--g-700); }
.partners .p img { height: 2rem; width: auto; max-width: 5.5rem; object-fit: contain; }
.partners .p img.is-raster { mix-blend-mode: multiply; }
.partners .p.is-mark { padding: 0 1rem 0 .85rem; gap: .4rem; color: var(--g-600); } .partners .p.is-mark .brand { width: 1.1rem; height: 1.1rem; } .partners .p.is-mark b { color: var(--ink); font-weight: 500; }

/* ---------- Video testimonials (poster + 6 s preview; the full video loads only on click) ---------- */
.vrail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); padding: .5rem max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin))) 1.5rem; scrollbar-width: none; }
.vrail::-webkit-scrollbar { display: none; }
.vcard { position: relative; flex: none; width: clamp(13.5rem, 9.5rem + 11vw, 17rem); scroll-snap-align: start; }
.vcard .vbtn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink-3); cursor: pointer; color: var(--white); text-align: left; box-shadow: var(--shadow); }
.vcard .vbtn img, .vcard .vbtn video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .5s; }
html.js .vcard .vbtn video { opacity: 0; }
html.js .vcard.is-playing .vbtn video { opacity: 1; }
.vcard .vbtn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: rgba(0, 0, 0, .4); -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); pointer-events: none; }
.vcard .vmeta { position: absolute; left: .85rem; right: .85rem; bottom: .8rem; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: .75rem; }
.vcard .vmeta b { display: block; font: 500 .9375rem/1.25 var(--text); }
.vcard .vmeta span span { display: block; font-size: var(--t-micro); color: rgba(255, 255, 255, .82); }
.vcard .vplay { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .6rem; background: var(--white); color: var(--ink); flex: none; transition: transform .5s var(--ease); }
.vcard .vplay .icon { width: 1rem; height: 1rem; }
.vcard .vdur { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .16rem .45rem; border-radius: .4rem; background: rgba(0, 0, 0, .5); font-size: .72rem; color: var(--white); }
.vcard .vctl { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: grid; gap: .35rem; }
.vcard .vctl button { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 0; border-radius: .55rem; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--white); cursor: pointer; transition: background-color .3s, opacity .3s; }
.vcard .vctl button:hover { background: rgba(0, 0, 0, .72); }
.vcard .vctl svg { width: 1.05rem; height: 1.05rem; }
/* repeat and full screen appear on hover, focus or while the card is active */
.vcard .vrep, .vcard .vmax { opacity: 0; pointer-events: none; }
.vcard:hover .vrep, .vcard:hover .vmax, .vcard:focus-within .vrep, .vcard:focus-within .vmax, .vcard.is-sound .vrep, .vcard.is-sound .vmax { opacity: 1; pointer-events: auto; }
@media (hover: none) { .vcard .vrep, .vcard .vmax { opacity: 1; pointer-events: auto; } }
.vcard .vrep[aria-pressed="true"] { background: var(--white); color: var(--ink); }
/* the ring: fills round the active card in 5 s (preview), or follows the full video's progress (sound on) */
.vcard .vring { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vcard .vring rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: calc(var(--r-card) - 1px); fill: none; stroke: var(--white); stroke-width: 2px; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .3s; }
.vcard.is-active .vring rect { opacity: 1; }
html.px-motion .vcard.is-active:not(.is-sound) .vring rect { animation: vring var(--vt, 5s) linear forwards; }
@keyframes vring { to { stroke-dashoffset: 0; } }
.vcard .vsnd .s-on, .vcard.is-sound .vsnd .s-off { display: none; }
.vcard.is-sound .vsnd .s-on { display: block; }
.vcard.is-sound .vsnd { background: var(--white); color: var(--ink); }
.vcard .vq { margin-top: .75rem; font-size: var(--t-small); line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.px-video { border: 0; padding: 0; background: transparent; width: min(92vw, 28rem); max-width: none; overflow: visible; }
.px-video::backdrop { background: rgba(0, 0, 0, .9); }
.px-video video { display: block; width: 100%; max-height: 84vh; border-radius: var(--r-card); background: var(--ink); }
.px-video .close { position: fixed; right: 1.25rem; top: 1.25rem; }
.px-video p { margin-top: .8rem; color: var(--white); font-size: .9375rem; }
.rail-nav { display: flex; gap: .5rem; }
.vwall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.vwall .vcard { width: auto; }
/* staggered columns: the offset belongs to a column, never to "every other card", and the rows leave room for it */
@media (min-width: 900px) { .vwall { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: calc(var(--gap) + 2.5rem); padding-bottom: 2.5rem; } .vwall .vcard:nth-child(4n+2), .vwall .vcard:nth-child(4n+4) { transform: translateY(2.5rem); } }
/* No orphan row: an unfinished last row of the wall is left out (the owner saw 3 cards then empty space). */
@media (max-width: 899px) { .vwall > .vcard:nth-child(2n+1):nth-last-child(1) { display: none; } }
@media (min-width: 900px) and (max-width: 1299px), (min-width: 1300px) { .vwall.is-4 > .vcard:nth-child(4n+1):nth-last-child(-n+3), .vwall.is-4 > .vcard:nth-child(4n+1):nth-last-child(-n+3) ~ .vcard { display: none; } }
@media (min-width: 900px) and (max-width: 1299px) { .vwall > .vcard:nth-child(4n+1):nth-last-child(-n+3), .vwall > .vcard:nth-child(4n+1):nth-last-child(-n+3) ~ .vcard { display: none; } }
@media (min-width: 1300px) { .vwall:not(.is-4) > .vcard:nth-child(5n+1):nth-last-child(-n+4), .vwall:not(.is-4) > .vcard:nth-child(5n+1):nth-last-child(-n+4) ~ .vcard { display: none; } }
@media (min-width: 1300px) { .vwall:not(.is-4) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .vwall:not(.is-4) .vcard { transform: none; } .vwall:not(.is-4) .vcard:nth-child(5n+2), .vwall:not(.is-4) .vcard:nth-child(5n+4) { transform: translateY(2.5rem); } }

/* ---------- Featured case slider (one case at a time) ---------- */
.fcase { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fcase-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fcase-slide { grid-area: 1 / 1; min-width: 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
html.js .fcase-slide:not(.is-on) { visibility: hidden; }
.fcase-slide .media { position: relative; min-width: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 11; background: var(--white); box-shadow: var(--shadow); }
.fcase-slide .media > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fcase-slide .media .toast { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }
.fcase-copy { min-width: 0; display: grid; gap: 1rem; align-content: space-between; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: clamp(1.15rem, 1rem + .7vw, 1.75rem); }
.fcase-copy > .pill, .fcase-copy > .link { justify-self: start; }
.fcase-copy .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--gap); border-top: 1px solid var(--line); padding-top: 1rem; }
.fcase-copy .kv dt { font-size: var(--t-micro); color: var(--soft); }
.fcase-copy .kv dd { font: 500 var(--t-h4)/1.3 var(--text); }
.fcase-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; min-width: 0; }
.fcase-thumbs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.fcase-thumbs::-webkit-scrollbar { display: none; }
.fcase-thumbs button { position: relative; flex: none; display: grid; gap: .1rem; width: 8.75rem; padding: .55rem .75rem .7rem; border-radius: var(--r-ui); border: 0; background: rgba(0, 0, 0, .04); color: var(--fg); text-align: left; cursor: pointer; transition: background-color .3s; overflow: hidden; }
.fcase-thumbs button b { font: 500 .8125rem/1.25 var(--text); }
.fcase-thumbs button span { font-size: .75rem; color: var(--soft); }
.fcase-thumbs button i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.fcase-thumbs button[aria-selected="true"] { background: var(--white); box-shadow: var(--shadow); }
@media (min-width: 960px) { .fcase-slide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
html:not(.js) .fcase-nav { display: none; }
html:not(.js) .fcase-stage { gap: var(--gap); }
html:not(.js) .fcase-slide { grid-area: auto; }

/* ---------- Services explorer ---------- */
.explorer { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.explorer > * { min-width: 0; }
.ex-cats { display: grid; gap: .25rem; align-content: start; padding: .4rem; border-radius: var(--r-card); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--hair); }
.ex-cats button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem .55rem .55rem; border: 0; border-radius: var(--r-ui); background: transparent; color: var(--fg); cursor: pointer; text-align: left; transition: background-color .3s var(--ease); }
.ex-cats button b { font: 400 .9375rem/1.25 var(--text); }
.ex-cats button span { font-size: var(--t-micro); color: var(--soft); }
.ex-cats button:hover { background: rgba(255, 255, 255, .7); }
.ex-cats button[aria-selected="true"] { background: var(--white); box-shadow: var(--shadow); }
.ex-cats .chip-ico { width: 2.1rem; height: 2.1rem; border-radius: .6rem; box-shadow: none; background: rgba(0, 0, 0, .05); transition: background-color .3s, color .3s; }
.ex-cats .chip-ico .icon { width: 1rem; height: 1rem; }
.ex-cats button[aria-selected="true"] .chip-ico { background: var(--ink); color: var(--white); }
.ex-panel { min-width: 0; display: grid; gap: var(--gap); align-content: start; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: clamp(1rem, .9rem + .5vw, 1.4rem); }
.explorer.is-tabbed .ex-panel[hidden] { display: none; }
.ex-top { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.ex-top > * { min-width: 0; }
.ex-top .media { position: relative; border-radius: var(--r-in); overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper); }
.ex-top .media > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ex-top .media .tech { position: absolute; left: .7rem; bottom: .7rem; }
.ex-top .media .tech .chip-ico { width: 2.25rem; height: 2.25rem; }
.ex-top .media.is-ink { display: grid; align-content: end; gap: .3rem; padding: 1.25rem; background: var(--ink-2); color: var(--white); }
.ex-top .media.is-ink .t-micro { color: #8f8f8f; }
.ex-top .media.is-ink .tech { position: static; margin-bottom: auto; }
.ex-links { display: grid; column-gap: 1.5rem; }
.ex-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; border-bottom: 1px solid var(--line); text-decoration: none; font-size: .875rem; }
.ex-links a .icon { width: .85rem; height: .85rem; color: var(--soft); transition: transform .45s var(--ease), color .3s; }
.ex-links a:hover .icon { transform: rotate(-45deg); color: var(--ink); }
@media (min-width: 700px) { .ex-links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .explorer { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .ex-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
html:not(.js) .ex-cats { display: none; }

/* ---------- FAQ, steps, prices, people ---------- */
.acc { border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: .25rem clamp(1.1rem, .95rem + .7vw, 1.6rem); }
.acc details + details { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.75rem; padding-block: .8rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h3 { font: 400 var(--t-h4)/1.4 var(--text); }
.acc .pm { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: .55rem; background: var(--paper); transition: background-color .35s, color .35s; }
.acc .pm::before, .acc .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--ease); }
.acc .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc details[open] .pm { background: var(--ink); color: var(--white); }
.acc details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.acc details > p { padding: 0 3rem 1.2rem 0; color: var(--muted); max-width: 46rem; font-size: var(--t-small); }
.faq { display: grid; gap: var(--gap); }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }

.steps { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); counter-reset: s; }
.step { position: relative; display: grid; gap: .55rem; align-content: start; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: 1.25rem; overflow: hidden; }
.step .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.step .top::after { counter-increment: s; content: "0" counter(s); font-size: var(--t-micro); color: var(--soft); }
.step h3 { font: 500 var(--t-h4)/1.3 var(--text); }
.step p { font-size: var(--t-small); color: var(--muted); }
.step .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.js) .step .bar { display: none; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Homepage price table (2026-11-05): quiet rows, starting price in body weight, each row opens that service's prices. */
.ptable { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ptable { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; } }
.pt-info { gap: 1.1rem; }
.pt-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pt-terms li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .6rem; font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.pt-terms .icon { margin-top: .2rem; color: var(--ink); }
.pt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: .4rem; }
.pt-list { padding: .35rem clamp(.6rem, .4rem + .6vw, 1rem); gap: 0; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2rem; align-items: center; gap: 1rem; padding: .85rem .35rem; text-decoration: none; color: var(--fg); border-top: 1px solid var(--line); transition: background-color .3s; border-radius: .6rem; }
.pt-row:first-child { border-top: 0; }
.pt-row:hover { background: var(--tint); }
.pt-svc { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.pt-svc .chip-ico { width: 2.25rem; height: 2.25rem; }
.pt-svc b { display: block; font-weight: 500; font-size: var(--t-body); }
.pt-inc { display: block; font-size: var(--t-micro); color: var(--soft); }
.pt-from { display: grid; justify-items: end; text-align: right; font-size: var(--t-body); }
.pt-from small { font-size: var(--t-micro); color: var(--soft); }
.pt-go { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--g-450); transition: color .3s, transform .4s var(--ease); }
.pt-row:hover .pt-go { color: var(--ink); transform: translateX(3px); }
@media (max-width: 559px) { .pt-inc { display: none; } .pt-row { grid-template-columns: minmax(0, 1fr) auto; } .pt-go { display: none; } }
.prices { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.price { display: grid; gap: .9rem; align-content: start; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: 1.2rem; text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.price:hover { box-shadow: var(--shadow-lg); }
.price .top { display: flex; align-items: center; gap: .7rem; }
.price .go { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: .75rem; font-size: var(--t-small); }
.price .go .icon { width: .95rem; height: .95rem; transition: transform .5s var(--ease); }
.price:hover .go .icon { transform: rotate(-45deg); }
.price.is-ink { background: var(--ink-2); color: var(--white); --muted: var(--g-on-ink); --soft: #8f8f8f; --line: rgba(255, 255, 255, .1); }

.person { display: grid; gap: .7rem; }
.person .ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-in); overflow: hidden; background: var(--paper); }
.person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .7s var(--ease), transform 1.2s var(--ease); }
.person:hover img, .person:focus-within img { filter: none; transform: scale(1.03); }
.person b { display: block; font: 500 var(--t-h4)/1.3 var(--text); }
.person span { font-size: var(--t-small); color: var(--muted); }

/* ---------- Horizontal project track ---------- */
.ptrack { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); }
.ptrack::-webkit-scrollbar { display: none; }
.ptrack .track { display: flex; gap: var(--gap); width: max-content; padding: .5rem max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin))) 1.5rem; }
.ptrack .pcard { width: clamp(16.5rem, 12rem + 15vw, 24rem); scroll-snap-align: start; text-decoration: none; display: grid; gap: .7rem; padding: .55rem .55rem .9rem; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.ptrack .pcard .media { border-radius: var(--r-in); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
.ptrack .pcard .media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.ptrack .pcard:hover .media img { transform: scale(1.04); }
.ptrack .pcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-inline: .35rem; font-size: var(--t-small); color: var(--muted); }
.ptrack .pcard .meta b { font: 500 var(--t-h4)/1.3 var(--text); color: var(--fg); }
html.px-fine .ptrack.is-pinned { overflow: hidden; }

/* ---------- Footer ---------- */
.px-footer { padding-top: var(--sp-section); overflow: hidden; }
.px-footer .cta { display: grid; gap: 2rem; padding-bottom: var(--sp-tight); border-bottom: 1px solid var(--line); }
.px-footer .cols { display: grid; gap: 2rem var(--gap); padding-block: var(--sp-tight); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-footer .cols h3 { font: 400 var(--t-small)/1.3 var(--text); color: var(--muted); margin-bottom: .8rem; }
.px-footer .cols a { display: inline-flex; min-height: 2.25rem; align-items: center; text-decoration: none; font-size: .9375rem; }
.px-footer .cols a:hover { text-decoration: underline; text-underline-offset: .25em; }
.px-footer .giant { padding-bottom: var(--margin); }
.px-footer .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-micro); }
@media (min-width: 900px) { .px-footer .cta { grid-template-columns: 1.2fr 1fr; align-items: end; } .px-footer .cols { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }

/* ---------- Form ---------- */
.field { display: flex; gap: .375rem; padding: .375rem; background: var(--white); border-radius: calc(var(--r-ui) + .375rem); max-width: 32rem; box-shadow: var(--shadow); }
.field input { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; background: transparent; padding: 0 .8rem; font: 400 1rem/1 var(--text); color: var(--ink); }
.field input::placeholder { color: var(--g-450); }
.field input:focus { outline: none; }
.field:focus-within { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
[data-surface="ink"] .field { background: var(--ink-3); box-shadow: none; }
[data-surface="ink"] .field input { color: var(--white); }
[data-surface="ink"] .field:focus-within { box-shadow: 0 0 0 2px var(--white); }
.field-label { display: block; font: 500 var(--t-small)/1.3 var(--text); margin-bottom: .55rem; }
@media (max-width: 520px) { .field { flex-direction: column; } .field .btn { justify-content: space-between; } }

/* ---------- Motion states: things hide only while JS animation is running ---------- */
html.js.px-motion [data-split] { visibility: hidden; }
/* scroll fades (prix-v35.js fades): hidden until .is-in; the transition is set inline only while it plays */
html.js.px-motion [data-fade]:not(.is-in) { opacity: 0; translate: 0 20px; }
/* hero entrance (prix-v35.js hero), all composited: lines rise, the copy fades up, the visual settles; --hd waits for the intro */
html.js.px-motion:not(.hero-on) [data-hero-title] { visibility: hidden; }
html.js.px-motion [data-hero-title] .hl { translate: 0 102%; transition: translate 1.1s var(--ease) calc(var(--hd, 0ms) + var(--i, 0) * 70ms); }
html.js.px-motion [data-hero-fade] { opacity: 0; translate: 0 14px; transition: opacity .9s var(--ease) calc(var(--hd, 0ms) + 140ms + var(--i, 0) * 60ms), translate .9s var(--ease) calc(var(--hd, 0ms) + 140ms + var(--i, 0) * 60ms); }
html.js.px-motion [data-hero-visual] { opacity: 0; translate: 0 26px; scale: .975; transition: opacity 1.1s var(--ease) calc(var(--hd, 0ms) + 60ms), translate 1.15s var(--ease) calc(var(--hd, 0ms) + 60ms), scale 1.15s var(--ease) calc(var(--hd, 0ms) + 60ms); }
html.js.px-motion.hero-on [data-hero-title] .hl { translate: 0 0; }
html.js.px-motion.hero-on [data-hero-fade] { opacity: 1; translate: 0 0; }
html.js.px-motion.hero-on [data-hero-visual] { opacity: 1; translate: 0 0; scale: 1; }
html.anim-failed [data-split], html.anim-failed [data-fade], html.anim-failed [data-hero-title] { visibility: visible !important; }
html.anim-failed [data-fade], html.anim-failed [data-hero-fade], html.anim-failed [data-hero-visual] { opacity: 1 !important; translate: none !important; scale: none !important; }
html.anim-failed [data-hero-title] .hl { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js.px-motion [data-split], html.js.px-motion [data-fade] { visibility: visible; opacity: 1; translate: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Phones: floating cards take more of the photo; the metric keeps its number and bars on one row. */
.metric .ui-body > .ui-row:first-child { flex-wrap: nowrap; }
@media (max-width: 759px) { .scene .slot[style*="width"] { width: 80% !important; } .scene .slot { max-width: 88%; } }

/* ---------- Stats never overflow their card: numbers scale with the card's own width ---------- */
.card, .fcase-copy, .price, .sw-item, .sb { container-type: inline-size; }
.card .t-num, .fcase-copy .t-num { font-size: min(var(--t-num), 15cqi); }
.sb .t-num { font-size: min(var(--t-num), 18cqi); }
.sw-item .t-num { font-size: min(var(--t-num), 13cqi); }

/* ---------- Device scene: a client site on a laptop, on a cream set with slow window light ---------- */
.dscene { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card); background: var(--cream); aspect-ratio: 16 / 11; container-type: inline-size; min-width: 0; }
.dscene.is-paper { background: var(--paper); }
.dscene.is-white { background: var(--white); }
.dscene.is-ink { background: #0a0a0a; }
.dscene .light { position: absolute; inset: -25% -10%; z-index: -1; filter: blur(12px); pointer-events: none; }
.dscene .light i { position: absolute; inset: 0; background: rgba(0, 0, 0, .085); -webkit-mask-image: repeating-linear-gradient(118deg, #000 0 6%, transparent 6% 14%); mask-image: repeating-linear-gradient(118deg, #000 0 6%, transparent 6% 14%); }
html.px-motion .dscene .light i { animation: px-gobo 16s ease-in-out infinite alternate; }
@keyframes px-gobo { from { transform: translateX(-5%) skewX(0deg); } to { transform: translateX(5%) skewX(-4deg); } }
.dscene.is-ink .light { inset: 0 12% 18%; filter: none; }
.dscene.is-ink .light i { background: rgba(255, 255, 255, .13); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); animation: none; }
.dscene .surface { position: absolute; left: 0; right: 0; bottom: 0; height: 21%; z-index: -1; background: var(--paper); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05), inset 0 14px 30px -18px rgba(0, 0, 0, .18); }
.dscene.is-paper .surface { background: var(--white); }
.dscene.is-ink .surface { background: #121212; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.dscene .slot { position: absolute; z-index: 4; }
.dscene[data-spin].is-paused .light i { animation-play-state: paused; }

.laptop { position: absolute; left: 50%; bottom: 15%; width: 70%; translate: -50% 0; perspective: 1800px; }
.laptop .lid { position: relative; aspect-ratio: 16 / 10.2; padding: 1.3% 1.3% 2%; border-radius: 3.4% 3.4% .6% .6% / 5.2% 5.2% 1% 1%; background: #0b0b0b; box-shadow: inset 0 0 0 1px #3c3c3c, inset 0 0 0 2px #0b0b0b, 0 1px 0 #555; transform-origin: 50% 100%; will-change: transform; }
.laptop .screen { position: relative; height: 100%; border-radius: .5cqi; overflow: hidden; background: var(--white); }
.laptop .screen::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(255, 255, 255, .07); -webkit-mask-image: linear-gradient(112deg, #000 0 32%, transparent 32%); mask-image: linear-gradient(112deg, #000 0 32%, transparent 32%); pointer-events: none; }
.laptop .notch { position: absolute; left: 50%; top: 0; z-index: 5; width: 10%; height: 3.4%; translate: -50% 0; background: #0b0b0b; border-radius: 0 0 .7cqi .7cqi; }
.laptop .feed { position: absolute; left: 0; right: 0; top: 0; }
.laptop .feed img { display: block; width: 100%; height: auto; will-change: transform; }
.laptop .base { position: relative; width: 117%; margin-left: -8.5%; padding-bottom: 2.4%; background: #2b2b2b; border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: inset 0 1px 0 #8a8a8a, inset 0 -3px 4px rgba(0, 0, 0, .55); }
.laptop .base i { position: absolute; left: 50%; top: 0; width: 13%; height: 46%; translate: -50% 0; background: #1a1a1a; border-radius: 0 0 .8cqi .8cqi; }
.laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -2.4%; height: 5%; z-index: -1; background: rgba(0, 0, 0, .42); border-radius: 50%; filter: blur(9px); }
.dscene.is-ink .laptop .lid { box-shadow: inset 0 0 0 1px #4a4a4a, inset 0 0 0 2px #0b0b0b, 0 0 60px rgba(255, 255, 255, .06); }
.sw-pane { position: absolute; inset: 0; }
[data-switch] .sw-pane:not(:first-child) { visibility: hidden; }

/* ---------- Case switcher: one laptop, the list of results beside it ---------- */
.switch { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.switch > * { min-width: 0; }
.sw-list { display: grid; align-content: start; gap: .35rem; padding: .4rem; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.sw-item { position: relative; display: grid; gap: 0; width: 100%; padding: 1rem 1.1rem; border: 0; border-radius: var(--r-in); background: transparent; color: var(--fg); text-align: left; cursor: pointer; overflow: hidden; transition: background-color .4s var(--ease); }
.sw-item:hover { background: var(--paper); }
.sw-item[aria-selected="true"] { background: var(--paper); }
.sw-top { display: flex; align-items: center; gap: .7rem; }
.sw-top .chip-ico { width: 2.1rem; height: 2.1rem; box-shadow: none; background: var(--white); }
.sw-top .chip-ico .brand { width: 1rem; height: 1rem; }
.sw-top b { font-weight: 500; font-size: .9375rem; flex: 1; min-width: 0; }
.sw-top .sw-mini { font-size: var(--t-small); color: var(--soft); white-space: nowrap; transition: opacity .4s; }
.sw-item[aria-selected="true"] .sw-mini { opacity: 0; }
.sw-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.sw-item[aria-selected="true"] .sw-more { grid-template-rows: 1fr; }
.sw-more > * { overflow: hidden; min-height: 0; }
.sw-more .t-num { margin-top: 1.1rem; }
.sw-more .t-small { margin-top: .45rem; }
.sw-bar { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.sw-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem .9rem .2rem; }
@media (min-width: 1040px) { .switch { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); align-items: stretch; } .switch .dscene { aspect-ratio: auto; min-height: 100%; } .switch .dscene .laptop { width: 74%; } }

/* ---------- Result band (no cards): big numbers between hairlines ---------- */
.statband { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.statband .sb { position: relative; display: grid; gap: .45rem; align-content: start; padding: 1.6rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.statband .sb .t-small b { color: var(--fg); font-weight: 500; }
.statband .sb .ln { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.statband .sb:hover .ln { transform: scaleX(1); }
@media (min-width: 900px) { .statband { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .statband .sb { padding: 2.25rem 1.5rem 2rem; border-bottom: 0; border-left: 1px solid var(--line); } .statband .sb:first-child { border-left: 0; padding-left: 0; } }

/* ---------- Logo orbit: clients circle the mark, chips stay upright ---------- */
.lorbit { position: relative; width: min(100%, 42rem); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.lorbit .ring { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.lorbit .ring.r1 { inset: 19%; } .lorbit .ring.r2 { inset: 2%; }
.lorbit .ring li { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.lorbit .r1 li { --r: 31cqi; } .lorbit .r2 li { --r: 48cqi; }
.lorbit .lchip { height: auto; min-width: 0; padding: .85rem 1.25rem; translate: -50% -50%; }
.lorbit .lchip img { width: calc(var(--w, 5rem) * .72); max-height: 1.6rem; }
html.px-motion .lorbit .r1 { animation: px-spin 70s linear infinite; } html.px-motion .lorbit .r1 .lchip { animation: px-spin 70s linear infinite reverse; }
html.px-motion .lorbit .r2 { animation: px-spin 110s linear infinite reverse; } html.px-motion .lorbit .r2 .lchip { animation: px-spin 110s linear infinite; }
.lorbit.is-paused .ring, .lorbit.is-paused .lchip { animation-play-state: paused !important; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.lorbit .core { position: absolute; inset: 34%; display: grid; place-items: center; align-content: center; gap: .4rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg); text-align: center; }
.lorbit .core svg { width: 32%; }
.lorbit .core .t-num-sm { font-size: min(var(--t-num-sm), 7cqi); }
@media (max-width: 600px) { .lorbit .lchip { padding: .45rem .6rem; } .lorbit .lchip img { width: calc(var(--w, 5rem) * .36); } }

/* ---------- Sticky stacked cards ---------- */
.scards { display: grid; gap: var(--gap); }
.scard { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); padding: clamp(.9rem, .8rem + .5vw, 1.25rem); transform-origin: 50% 0; text-decoration: none; }
.scard .vis { position: relative; min-height: 19rem; border-radius: var(--r-in); overflow: hidden; display: grid; place-items: center; background: var(--paper); }
.scard .vis.dscene { aspect-ratio: auto; }
.scard .txt { display: grid; align-content: space-between; gap: 1.5rem; padding: .6rem .5rem .5rem; }
.scard .txt h3 { font: 400 var(--t-h2)/1.1 var(--text); text-wrap: balance; letter-spacing: -.03em; }
.scard .txt p { color: var(--muted); font-size: var(--t-body); max-width: 26em; margin-top: .8rem; }
@media (min-width: 1000px) {
  .scard { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(34rem, 72vh); position: sticky; top: calc(var(--header) + 1rem + var(--i, 0) * .9rem); }
  .scard .vis { min-height: 100%; }
}

/* ---------- Mini logo wall, fan of chips ---------- */
.logowall.is-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.logowall.is-mini li { height: 4rem; }
.logowall.is-mini img { width: calc(var(--w, 5rem) * .55); }
.lfan { display: flex; }
.lfan .lchip { height: 3.5rem; min-width: 0; padding-inline: 1.1rem; }
.lfan .lchip + .lchip { margin-left: -1.1rem; }
.lfan .lchip:nth-child(1) { rotate: -6deg; } .lfan .lchip:nth-child(2) { rotate: 3deg; translate: 0 -.5rem; } .lfan .lchip:nth-child(3) { rotate: -2deg; }
.lfan .lchip img { width: calc(var(--w, 5rem) * .55); }
.lstack { display: grid; } .lstack > * { grid-area: 1 / 1; }
[data-loop="toast"].lstack > :not(:first-child) { visibility: hidden; }
.laptop .feed.is-fit { bottom: 0; }
.laptop .feed.is-fit img { height: 100%; object-fit: cover; object-position: top; }

/* ---------- Photographic device mockups (generated per design; HTML cards float on top) ---------- */
.mock { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-card); background: var(--paper); isolation: isolate; }
.mock > .bg, .mock .sw-pane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock .slot { position: absolute; z-index: 3; }
.mock.is-in { border-radius: var(--r-in); }
.switch .mock { aspect-ratio: 4 / 3; }
@media (min-width: 1040px) { .switch .mock { aspect-ratio: auto; min-height: 34rem; } }
.mock video.mv { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s var(--ease); }
html.js .mock video.mv { opacity: 0; }
html.js .mock video.mv.is-on { opacity: 1; }
@media (max-width: 600px) { .lorbit { width: 84%; } }
.lo-grid { overflow-x: clip; padding-block: 1rem; }
/* Every photo that fills a frame is cropped, never stretched. */
.scard .vis > img, .card.is-photo > img, .m-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
img { height: auto; }
.lchip img, .logowall img, .partners img, .brand { object-fit: contain; }

/* ================= Phones and tablets ================= */
/* Tablet bento: fill gaps left by full-width cards. */
@media (min-width: 760px) and (max-width: 1039px) { .bento { grid-auto-flow: row dense; } }

/* Services explorer below 1000px: categories become one swipeable row of chips. */
@media (max-width: 999px) {
  .ex-cats { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .35rem; border-radius: var(--r-in); scroll-snap-type: x proximity; }
  .ex-cats::-webkit-scrollbar { display: none; }
  .ex-cats button { flex: none; width: auto; grid-template-columns: auto auto; gap: .5rem; padding: .45rem .8rem .45rem .45rem; scroll-snap-align: start; }
  .ex-cats button > span:last-child { display: none; }
  .ex-cats .chip-ico { width: 1.9rem; height: 1.9rem; }
}

/* Result band: two columns on tablets. */
@media (min-width: 600px) and (max-width: 899px) {
  .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statband .sb:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}

/* Floating interface cards: smaller on phones so they never hide the photograph. */
@media (max-width: 599px) {
  .mock .slot, .dscene .slot, .card .stage > [data-float] { scale: .86; transform-origin: 0 100%; }
  .mock .slot[style*="right"] { transform-origin: 100% 100%; }
  .ui, .notifs, .serp, .metric { font-size: .78rem; }
  .toast { font-size: .75rem; padding: .45rem .6rem .45rem .45rem; }
  .card .stage { min-height: 12rem; }
  .card .stage.is-tall { min-height: 16rem; }
  .hero { padding-bottom: var(--sp-tight); }
  .hero-copy { gap: 1.1rem; }
  .hero-acts .btn { flex: 1 1 100%; justify-content: space-between; }
  .head { margin-bottom: 1.75rem; }
  .fcase-copy .kv { grid-template-columns: 1fr 1fr; }
  .switch .sw-item { padding: .85rem .9rem; }
  .px-footer .giant { padding-bottom: 1rem; }
  .lchip { height: 3.5rem; min-width: 7rem; padding-inline: 1.1rem; }
  .logowall li { height: 4.5rem; }
  .vcard { width: 70vw; }
  .qcard { width: 70vw; }
  .ptrack .pcard { width: 82vw; }
  .scard .vis { min-height: 15rem; aspect-ratio: 4 / 3; }
  .scard .txt h3 { font-size: var(--t-h3); }
  .founders { gap: .4rem; }
}

/* Tablets: comfortable two-column layouts instead of very long single columns. */
@media (min-width: 700px) and (max-width: 1039px) {
  .hero-grid { gap: 2.5rem; }
  .fcase-slide { grid-template-columns: minmax(0, 1fr); }
  .switch .mock { aspect-ratio: 16 / 10; }
  .sw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-list .sw-foot { grid-column: 1 / -1; }
  .scard { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .scard .vis { min-height: 22rem; }
  .ex-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .px-footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lo-mobile { display: none; }
@media (max-width: 599px) {
  .lorbit { display: none; }
  .lo-mobile { display: block; margin-inline: calc(var(--margin) * -1); }
  .partners .p { flex: 1 1 calc(50% - .6rem); justify-content: center; }
}
@media (max-width: 599px) {
  /* Prices swipe sideways instead of five tall cards; steps sit two by two. */
  .prices { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding: .25rem var(--margin) 1rem; scroll-padding-inline: var(--margin); }
  .prices::-webkit-scrollbar { display: none; }
  .prices .price { flex: none; width: 68vw; scroll-snap-align: start; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { padding: 1rem; }
  .step .top { margin-bottom: .75rem; }
  .founders .person b { font-size: .8125rem; }
}
@media (max-width: 599px) { .scard .vis .slot { display: none; } .is-mockcard .mock .slot { scale: .78; } }
@media (min-width: 700px) and (max-width: 1039px) {
  .card .stage.is-tall { min-height: 16rem; }
  .scene { aspect-ratio: 16 / 10.5; }
}

/* =====================================================================================
   Navigation: three mega menus (data-nav="orbit" | "studio" | "mosaic"), Nov 2026
   States: hover (surface lifts, arrow moves), open (chevron turns, aria-expanded), pressed (scale .97),
   current page (dot), keyboard focus (ring). One shared behaviour in prix-v3.js (mega()).
   ===================================================================================== */
.px-nav ul { align-items: center; }
.nav-tg { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding: 0 .7rem 0 .85rem; border: 0; border-radius: .65rem; background: transparent; color: inherit; font: 400 .875rem/1 var(--text); cursor: pointer; transition: background-color .3s, color .3s; }
.nav-tg .chev { width: .9rem; height: .9rem; transition: transform .45s var(--ease); }
.nav-tg:hover, .px-nav a:hover { background: var(--paper); }
.nav-tg[aria-expanded="true"] { background: var(--ink); color: var(--white); }
.nav-tg[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-tg:active, .px-nav a:active, .btn:active, .icon-btn:active, .menu-btn:active, .mm-item:active, .mm-links a:active, .mm-tile:active, .ccard:active { transform: scale(.97); }
.px-header.on-ink .nav-tg:hover { background: rgba(255, 255, 255, .14); }
.px-header.on-ink .nav-tg[aria-expanded="true"] { background: var(--white); color: var(--ink); }
.px-nav a[aria-current="page"]::after, .home[aria-current="page"]::after { content: none; }
.lang { display: none; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: var(--r-ui); font-size: .8125rem; text-decoration: none; color: inherit; transition: background-color .3s; }
.lang:hover { background: rgba(255, 255, 255, .6); }
@media (min-width: 1000px) { .lang { display: inline-flex; } }

.mega-wrap { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.mega { position: absolute; left: 50%; top: .25rem; width: min(calc(100vw - 2 * var(--margin)), 76rem); translate: -50% 0; color: var(--ink); pointer-events: auto; }
html.js .mega { visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 50% 0; transition: opacity .28s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
html.js .mega.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .28s var(--ease), transform .55s var(--ease), visibility 0s; }
html:not(.js) .mega { display: none; }
.mega-in { border-radius: var(--r-card); background: var(--white); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .35), 0 0 0 1px var(--hair); padding: .6rem; }
.mega-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; transition: opacity .35s var(--ease); }
html.js .mega-scrim { opacity: 0; }
html.mega-open .mega-scrim { opacity: 1; pointer-events: auto; }
html.mega-open .px-header { background: rgba(240, 237, 230, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: none !important; color: var(--ink); }
.mm-links a, .mm-item, .mm-tech a { transition: background-color .3s var(--ease), color .3s; }
.mm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .5rem; align-content: start; }
.mm-links a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: 0 .8rem; border-radius: var(--r-ui); text-decoration: none; font-size: .9rem; }
.mm-links a .icon { color: var(--soft); transition: transform .45s var(--ease), color .3s; }
.mm-links a:hover { background: var(--paper); }
.mm-links a:hover .icon { color: var(--ink); }
.mm-feature { position: relative; display: grid; align-content: end; min-height: 15rem; border-radius: var(--r-in); overflow: hidden; color: var(--white); text-decoration: none; isolation: isolate; }
.mm-feature { background: var(--ink-2); }
.mm-feature .fld-ill { position: absolute; inset: 6% 8% 42%; width: auto; margin: 0; justify-self: stretch; }
.mm-f-copy { display: grid; gap: .25rem; margin: .5rem; padding: .85rem .95rem; border-radius: var(--r-ui); background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--t-small); }
.mm-f-copy b { font-weight: 500; font-size: .9375rem; }
.mm-f-copy > span { color: rgba(255, 255, 255, .82); }
.mm-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; color: var(--white) !important; font-weight: 500; }
.mm-go .icon { width: .9rem; height: .9rem; transition: transform .45s var(--ease); }
.mm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-top: .4rem; padding: .35rem 1rem; border-radius: var(--r-ui); background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px var(--hair); }
.mm-foot .t-small a { color: var(--ink); font-weight: 500; }

/* A · Orbit: vertical tabs, links, a featured service still life */
.mega-orbit .mega-in { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: .6rem; }
.mm-tabs { display: grid; gap: .15rem; align-content: start; padding: .2rem; border-radius: var(--r-in); background: var(--paper); }
.mm-tabs button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; width: 100%; min-height: 2.9rem; padding: .3rem .6rem .3rem .3rem; border: 0; border-radius: var(--r-ui); background: transparent; color: var(--ink); cursor: pointer; text-align: left; transition: background-color .3s, box-shadow .3s; }
.mm-tabs button b { font: 400 .9rem/1.2 var(--text); }
.mm-tabs button .chip-ico { width: 2rem; height: 2rem; background: transparent; }
.mm-tabs button .chip-ico .icon { width: .95rem; height: .95rem; }
.mm-tabs button > .icon { color: transparent; transform: translateX(-4px); transition: color .3s, transform .45s var(--ease); }
.mm-tabs button:hover { background: rgba(255, 255, 255, .7); }
.mm-tabs button[aria-selected="true"] { background: var(--white); box-shadow: var(--shadow); }
.mm-tabs button[aria-selected="true"] .chip-ico { background: var(--ink); color: var(--white); }
.mm-tabs button[aria-selected="true"] > .icon { color: var(--ink); transform: none; }
.mm-tabs .is-sep { margin-top: .5rem; position: relative; }
.mm-tabs .is-sep::before { content: ""; position: absolute; left: .6rem; right: .6rem; top: -.3rem; height: 1px; background: var(--hair); }
.mm-panels { min-width: 0; }
.mm-panel { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: .6rem; height: 100%; padding: .3rem; }
.mm-panel:not(:has(.mm-feature)) { grid-template-columns: minmax(0, 1fr); }
.mega-orbit [data-tabs].is-tabbed .mm-panel[hidden] { display: none; }
.mm-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; align-content: start; }
.mm-tech a { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: 0 .6rem; border-radius: var(--r-ui); text-decoration: none; font-size: .875rem; }
.mm-tech a:hover { background: var(--paper); }

/* B · Studio: editorial columns, an analysis aside, technology and sector pills */
.mega-studio .mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: .6rem; background: var(--paper); }
.mm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.mm-col { padding: .6rem .5rem .5rem; border-radius: var(--r-in); background: var(--white); }
.mm-h { display: flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: 0 .3rem; margin-bottom: .2rem; text-decoration: none; }
.mm-h b { font: 500 .9375rem/1.2 var(--text); }
.mm-h .chip-ico { width: 2rem; height: 2rem; transition: background-color .3s, color .3s; }
.mm-h:hover .chip-ico { background: var(--ink); color: var(--white); }
.mm-col .mm-links, .mm-col ul { display: grid; }
.mm-col a:not(.mm-h) { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.35rem; padding: 0 .4rem; border-radius: .55rem; text-decoration: none; font-size: .84rem; color: var(--g-700); transition: background-color .3s, color .3s, padding .45s var(--ease); }
.mm-col a:not(.mm-h) .icon { color: transparent; transition: color .3s; }
.mm-col a:not(.mm-h):hover { background: var(--paper); color: var(--ink); }
.mm-col a:not(.mm-h):hover .icon { color: var(--ink); }
.mm-aside { display: grid; align-content: space-between; gap: 1rem; padding: 1.25rem; border-radius: var(--r-in); background: var(--ink); color: var(--white); --muted: var(--g-on-ink); --soft: #8f8f8f; }
.mm-aside .t-small { color: var(--g-on-ink); }
.field.is-sm { padding: .3rem; flex-direction: column; background: var(--ink-3); box-shadow: none; }
.field.is-sm input { color: var(--white); min-height: 2.5rem; }
.field.is-sm .btn { --b-bg: var(--white); --b-fg: var(--ink); --b-line: var(--white); justify-content: space-between; }
.mm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; margin-top: .4rem; padding: .7rem 1rem; border-radius: var(--r-in); background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.mm-strip > div { display: grid; gap: .35rem; }
.mm-strip > .link { margin-left: auto; }
.mm-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.mm-pills a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: 0 .65rem; border-radius: var(--r-pill); background: var(--paper); text-decoration: none; font-size: .78rem; transition: background-color .3s, color .3s; }
.mm-pills a .brand { width: .9rem; height: .9rem; }
.mm-pills a:hover { background: var(--ink); color: var(--white); }

/* C · Mosaic: bento tiles with the service still lifes */
.mm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; background: var(--paper); }
.mm-tile { display: grid; align-content: start; gap: .4rem; padding: .45rem; border-radius: var(--r-in); background: var(--white); text-decoration: none; transition: box-shadow .4s var(--ease), transform .45s var(--ease); }
.mm-tile:hover { box-shadow: var(--shadow-lg); }
.mm-tile-h { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .55rem .45rem .7rem; text-decoration: none; }
.mm-tile-h .chip-ico { width: 2.5rem; height: 2.5rem; background: var(--paper); transition: background-color .3s, color .3s; }
.mm-tile:hover .mm-tile-h .chip-ico { background: var(--ink); color: var(--white); }
.mm-tile-h b { display: block; font: 500 .9375rem/1.25 var(--text); }
.mm-tile-h span span { display: block; font-size: .78rem; color: var(--g-600); line-height: 1.4; margin-top: .15rem; }
.mm-tile ul { display: grid; border-top: 1px solid var(--hair); padding-top: .3rem; }
.mm-tile ul a { display: flex; justify-content: space-between; align-items: center; min-height: 2.3rem; padding: 0 .35rem; border-radius: .5rem; text-decoration: none; font-size: .82rem; color: var(--g-700); transition: background-color .3s, color .3s; }
.mm-tile ul a:hover { background: var(--paper); color: var(--ink); }
.mm-tile.is-ink { background: var(--ink); color: var(--white); padding: 1rem; align-content: space-between; }
.mm-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-block: .6rem; }
.mm-logos a { display: grid; place-items: center; aspect-ratio: 1; border-radius: .6rem; background: var(--white); transition: transform .4s var(--ease), box-shadow .3s; }
.mm-logos a:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.mm-logos .brand { width: 1.1rem; height: 1.1rem; }
.mm-tile.is-ink .link { color: var(--white); }
.mm-tile.is-cta { position: relative; isolation: isolate; overflow: hidden; padding: 1rem; align-content: end; min-height: 14rem; background: var(--ink-2); color: var(--white); }
.mm-tile.is-cta > .btn-ico { justify-self: end; }
.mm-cta-copy { display: grid; gap: .35rem; }
.mm-cta-copy > span:not(.hero-proof) { font-size: var(--t-small); color: var(--g-on-ink); }
.mm-cta-copy .hero-proof { margin-top: .5rem; }
.mm-tile.is-cta b { font: 400 var(--t-h3)/1.2 var(--text); }
.mm-tile.is-cta span { font-size: .8125rem; color: var(--g-on-ink); }
.mm-tile.is-cta .btn-ico { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .55rem; background: var(--white); color: var(--ink); transition: transform .45s var(--ease); }
.mm-tile.is-cta:hover .btn-ico { transform: rotate(-45deg); }

/* Small dropdowns (Çalışmalar / Fiyatlar / Kaynaklar) */
.mega-sm { width: min(calc(100vw - 2 * var(--margin)), 36rem); }
.mega-sm .mega-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.mega-sm .mega-in:has(.mm-feature) { grid-template-columns: minmax(0, 1fr) 13rem; }
.mm-list { display: grid; gap: .1rem; }
.mm-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: var(--r-ui); text-decoration: none; }
.mm-item .chip-ico { width: 2.25rem; height: 2.25rem; transition: background-color .3s, color .3s; }
.mm-item b { display: block; font: 500 .9rem/1.25 var(--text); }
.mm-item span span { display: block; font-size: .78rem; color: var(--g-600); }
.mm-item:hover { background: var(--paper); }
.mm-item:hover .chip-ico { background: var(--ink); color: var(--white); }
.mm-feature.is-sm { min-height: 100%; }
[data-nav="studio"] .mega-sm .mega-in, [data-nav="mosaic"] .mega-sm .mega-in { background: var(--paper); }
[data-nav="studio"] .mm-item, [data-nav="mosaic"] .mm-item { background: var(--white); margin-bottom: .2rem; }
[data-nav="mosaic"] .mm-item:hover, [data-nav="studio"] .mm-item:hover { box-shadow: var(--shadow); }
@media (max-width: 999px) { .mega-wrap, .mega-scrim { display: none; } }

/* Mobile menu: accordions per service group */
.px-menu .inner { align-content: start; gap: 1.5rem; }
.m-acc { display: grid; }
.m-acc details { border-bottom: 1px solid var(--line); }
.m-acc summary { list-style: none; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; cursor: pointer; }
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc summary b { flex: 1; font: 400 var(--t-h3)/1.2 var(--text); }
.m-acc summary .chip-ico { width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, .1); color: var(--white); }
.m-acc .pm { position: relative; width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: rgba(255, 255, 255, .1); flex: none; }
.m-acc .pm::before, .m-acc .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: .65rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--ease); }
.m-acc .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.m-acc details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.m-acc ul { display: grid; padding: 0 0 1rem 3rem; }
.m-acc ul a { display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--g-on-ink); font-size: .9375rem; }
.m-acc ul a:hover { color: var(--white); }
.m-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.m-cta .link { color: var(--white); }

/* =====================================================================================
   Footers: A orbit (ink + live pixel field behind the wordmark) · B studio (editorial, contact cards) · C mosaic (bento)
   ===================================================================================== */
.lead { display: grid; gap: .25rem; }
.opts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.opts legend { margin-bottom: .55rem; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; }
.opt span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: var(--r-ui); background: rgba(255, 255, 255, .1); color: inherit; font-size: .875rem; transition: background-color .3s, color .3s, transform .3s var(--ease); }
[data-surface="paper"] .opt span, [data-surface="cream"] .opt span, .fb-t .opt span { background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.fb-cta .opt span, [data-surface="ink"] .opt span { background: rgba(255, 255, 255, .1); box-shadow: none; }
.opt:hover span { background: rgba(255, 255, 255, .2); }
[data-surface="paper"] .opt:hover span { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.opt input:checked + span { background: var(--white); color: var(--ink); box-shadow: none; }
[data-surface="paper"] .opt input:checked + span, [data-surface="cream"] .opt input:checked + span { background: var(--ink); color: var(--white); }
.opt input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.opt:active span { transform: scale(.96); }
.lead .note { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .7rem; }
.lead .note svg, .hero-note svg { width: .95rem; height: .95rem; flex: none; }
.f-orbit .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .f-orbit .cols, .f-studio .cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.soc { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-ui); background: rgba(255, 255, 255, .1); transition: background-color .3s, transform .4s var(--ease); }
.soc:hover { background: var(--white); }
[data-surface="paper"] .soc, .fb-t .soc { background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.f-field { position: relative; height: clamp(15rem, 8rem + 22vw, 32rem); margin-top: 1rem; overflow: hidden; }
.f-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-field svg { position: absolute; left: 50%; top: 50%; width: min(92vw, 80rem); translate: -50% -50%; fill: var(--white); pointer-events: none; }
.f-studio .cta { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .f-studio .cta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 2rem; }
.ccard { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-radius: var(--r-in); background: var(--white); box-shadow: var(--shadow); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); min-width: 0; }
.ccard > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.ccard b { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard:hover { box-shadow: var(--shadow-lg); }
.ccard:hover .chip-ico { background: var(--ink); color: var(--white); }
.ccard .chip-ico { transition: background-color .3s, color .3s; }
.f-studio .giant { color: var(--ink); }
.f-mosaic { padding-top: var(--sp-tight); }
.fb { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.fb-t { padding: 1.25rem; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.fb-t h3 { font: 400 var(--t-small)/1.3 var(--text); color: var(--muted); margin-bottom: .6rem; }
.fb-t ul a, .fb-t p a { display: inline-flex; min-height: 2.25rem; align-items: center; text-decoration: none; font-size: .9375rem; }
.fb-t ul a:hover { text-decoration: underline; text-underline-offset: .25em; }
.fb-cta { background: var(--ink); color: var(--white); }
.fb-word { display: grid; align-content: end; gap: .5rem; background: var(--paper); }
.fb-word svg { fill: var(--ink); }
@media (min-width: 760px) { .fb { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fb-cta, .fb-word { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .fb { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fb-cta { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; } .fb-word { grid-column: span 4; } }
.f-mosaic .base, .f-studio .base { border-top-color: var(--hair); }

/* ---------- Conversion pieces ---------- */
.hero-note { display: inline-flex; align-items: baseline; gap: .4rem; color: var(--g-600); }
.m-title .hero-acts + .hero-note { margin-block-start: 1rem; }
:is(.hero-acts, .lp-cta) .btn:is(:hover, :focus-visible) .btn-label span { transform: none; }
.cta-band { display: grid; gap: 1.5rem; padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.5rem); border-radius: var(--r-card); background: var(--ink); color: var(--white); --muted: var(--g-on-ink); --soft: #8f8f8f; }
.cta-band .t-body { margin-top: .75rem; color: var(--g-on-ink); }
.cta-band .link { color: var(--white); }
.cta-band .avatars img { border-color: var(--ink); }
.cta-side { display: grid; gap: 1rem; align-content: center; }
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.cta-bar { position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 70; display: none; gap: .5rem; padding: .4rem; border-radius: calc(var(--r-ui) + .4rem); background: rgba(250, 248, 245, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); transition: transform .6s var(--ease), opacity .4s; }
.cta-bar .btn { flex: 1; justify-content: space-between; }
@media (max-width: 759px) { html.js .cta-bar { display: flex; transform: translateY(140%); } html.js .cta-bar.is-on { transform: none; } }

/* ---------- Service-only interfaces (on the generated still lifes) ---------- */
.svc-vis .svc-ui { left: 5%; top: 6%; width: min(58%, 20rem); }
.svc-vis.is-fill { position: absolute; inset: 0; aspect-ratio: auto !important; border-radius: 0; }
.scard .vis { padding: 0; }
.svc-card { padding: .55rem; }
.svc-card .copy { padding: .5rem .7rem .6rem; }
.svc-card .mock { box-shadow: none; }
.aicard .mock { min-height: 17rem; }
.checks ul { display: grid; gap: .1rem; }
.ck { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem; min-height: 1.85rem; color: var(--g-600); }
.ck b { justify-self: end; font-weight: 500; color: var(--ink); font-size: .78rem; text-align: right; }
.ck .tk { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--g-150); color: transparent; transition: background-color .35s, color .35s; }
.ck .tk svg { width: .75rem; height: .75rem; }
.ck.is-done .tk { background: var(--ink); color: var(--white); }
html:not(.js) .ck .tk { background: var(--ink); color: var(--white); }
.checks .meter { margin-top: .35rem; height: .35rem; border-radius: 1rem; background: var(--g-150); overflow: hidden; }
.checks .meter i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.canvasui .cv { position: relative; aspect-ratio: 16 / 10; margin: .55rem; border-radius: .55rem; background: var(--paper); overflow: hidden; }
.canvasui .cols { position: absolute; inset: 0 6%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4%; }
.canvasui .cols span { background: rgba(0, 0, 0, .025); }
.canvasui .b { position: absolute; display: block; border-radius: .25rem; background: var(--g-250); transform-origin: 0 50%; }
.canvasui .b1 { left: 6%; right: 6%; top: 6%; height: 6%; background: var(--g-150); }
.canvasui .b2 { left: 6%; width: 52%; top: 20%; height: 10%; background: var(--ink); }
.canvasui .b3 { left: 6%; width: 38%; top: 34%; height: 10%; background: var(--g-350); }
.canvasui .b4 { left: 6%; width: 44%; top: 50%; height: 3.5%; }
.canvasui .b5 { left: 6%; width: 18%; top: 59%; height: 7%; background: var(--ink); border-radius: .2rem; }
.canvasui .b6 { left: 6%; width: 26%; top: 74%; height: 18%; background: var(--g-150); }
.canvasui .b7 { left: 37%; width: 26%; top: 74%; height: 18%; background: var(--g-150); }
.canvasui .b8 { left: 68%; width: 26%; top: 20%; height: 72%; background: var(--g-250); }
.canvasui .cur { position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; color: var(--ink); z-index: 3; }
@media (max-width: 599px) { .svc-vis .svc-ui { width: 76%; } }
.svc-card .mock { flex: 1 1 auto; aspect-ratio: auto !important; min-height: 15rem; }
@media (min-width: 1040px) { .svc-card.s-4 .mock { min-height: 17rem; } }

/* Review fixes (Nov 2026): roomier service visuals, arrows clear of photos, no colliding hero chips on phones */
.svc-card .mock { min-height: clamp(16rem, 11rem + 10vw, 23rem); }
@media (min-width: 1040px) { .svc-card.s-7 .mock, .svc-card.s-5 .mock { min-height: 24rem; } .svc-card.s-4 .mock { min-height: 19rem; } }
.aicard .go { top: 1rem; bottom: auto; left: 1rem; right: auto; }
.aicard .copy { padding-top: 2.5rem; }
.sw-item .sw-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-item .sw-mini { flex: none; }
@media (max-width: 1039px) { .sw-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { #hero .scene .slot:has(> .pill) { display: none; } }
@media (max-width: 1039px) { .svc-vis .svc-ui { width: min(80%, 20rem); } }
@media (max-width: 899px) { .aicard .mock { min-height: 0; aspect-ratio: 4 / 3.4 !important; } }
/* Tablets: the wide Studio stage keeps two cards (workflow + metric) so nothing crowds the photograph. */
@media (min-width: 760px) and (max-width: 1039px) { .s-stage .scene .slot:nth-of-type(2), .s-stage .scene .slot:nth-of-type(4) { display: none; } }
@media (max-width: 1039px) { .cap > .cchip { display: none; } }
.scard .vis .lp-stage { min-height: 0; }

/* ---------- Hero intents (Nov 2026): one pane per reason to visit, tabs with progress underneath ---------- */
.iscene { position: relative; min-width: 0; display: grid; gap: 1rem; }
.iscene .scene { isolation: isolate; }
.ipane { position: absolute; inset: 0; }
.ipane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.itabs { display: flex; justify-content: center; gap: .15rem; }
.itabs .sw-item { container-type: normal; display: inline-flex; flex: none; width: auto; padding: .4rem .6rem .5rem .4rem; border-radius: var(--r-ui); background: transparent; color: var(--g-600); font-size: .8125rem; transition: background-color .35s, color .35s; }
.itabs .sw-item > span { display: inline-flex; align-items: center; gap: .45rem; }
.itabs .sw-item .chip-ico { width: 1.45rem; height: 1.45rem; }
.itabs .sw-item .chip-ico .brand, .itabs .sw-item .chip-ico .icon { width: .85rem; height: .85rem; }
.itabs .sw-item:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.itabs .sw-item[aria-selected="true"] { color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
.itabs .sw-bar { left: .7rem; right: .7rem; bottom: .2rem; height: 1.5px; }
@media (max-width: 599px) { .itabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); } .itabs .sw-item { flex: none; } }

/* ---------- Trust bar right under the hero: numbers, partnerships, client logos ---------- */
.trust { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(.75rem, .5rem + 1vw, 1.25rem); }
.tr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: .5rem; }
.tr-stats { display: flex; flex-wrap: wrap; gap: .5rem clamp(1.25rem, .8rem + 2vw, 2.75rem); }
.tr-stats li { display: flex; align-items: baseline; gap: .4rem; }
.tr-stats b { font: 400 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1 var(--text); letter-spacing: -.03em; }
.tr-stats span { font-size: var(--t-small); color: var(--muted); }
.trust .partners .p { height: 2.6rem; box-shadow: inset 0 0 0 1px var(--hair); }
.trust .partners .p img { height: 1.6rem; }
@media (max-width: 759px) { .tr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .trust .partners { width: 100%; } }

/* Coded backdrop (field): replaces every service photograph. A lit silk surface (SVG lighting, rasterised once)
   drifts slowly: diffuse folds multiply into the cream, a specular sheen screens on top; on ink only the sheen shows. */
.fld { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--paper); isolation: isolate; pointer-events: none; }
.fld.is-dark { background: var(--ink-2); }
.fld-silk, .fld-sheen { position: absolute; inset: -45%; background-size: cover; background-position: var(--p); transform: rotate(var(--a)) scale(var(--s)); }
.fld-silk { background-image: url("../assets/fx/silk.webp"); mix-blend-mode: multiply; opacity: .8; }
.fld-sheen { background-image: url("../assets/fx/sheen.webp"); mix-blend-mode: screen; opacity: .85; }
.fld.is-dark .fld-silk { mix-blend-mode: screen; opacity: .07; }
.fld.is-dark .fld-sheen { opacity: .4; }
html.px-motion .fld-silk, html.px-motion .fld-sheen { animation: fld-flow var(--t, 24s) ease-in-out infinite alternate; }
@keyframes fld-flow { to { transform: rotate(calc(var(--a) + 3deg)) scale(calc(var(--s) + .08)) translate3d(-3%, 2%, 0); } }
.fld-in { position: absolute; inset: -30%; transform: rotate(var(--a)); mix-blend-mode: screen; }
.fld-in i { position: absolute; left: -10%; width: 120%; top: var(--y); height: var(--h); border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0)); opacity: .7; }   /* was filter: blur(40px): the same glow without a per-frame blur (2026-11-09) */
.fld.is-dark .fld-in i { opacity: .1; }
html.px-motion .fld-in i { animation: fld-drift 14s ease-in-out var(--d) infinite alternate; }
@keyframes fld-drift { to { transform: translate3d(8%, 0, 0) scaleY(1.2); } }
.fld::after { content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply; background-image: url("../assets/fx/noise.png"); }
.fld.is-dark::after { mix-blend-mode: screen; opacity: .08; filter: invert(1); }
@media (prefers-reduced-motion: reduce) { .fld-silk, .fld-sheen, .fld-in i { animation: none !important; } }
@media (hover: none), (max-width: 899px) { .fld-silk, .fld-sheen, .fld-in i { animation: none !important; } }   /* phones: the field holds still (2026-11-09, paint budget); textures are static images in assets/fx (fx_textures.py) */

/* Page CTA (replaces the website-address field) */
.lp-cta-wrap { display: grid; gap: 1rem; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.lp-cta-wrap .hero-note { display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.lp-cta-wrap .hero-note svg { width: .9rem; height: .9rem; flex: none; }
.sv-center .lp-cta, .sv-center .lp-cta-wrap { justify-content: center; justify-items: center; }

/* Lead dialog: the live native quote form */
.px-lead { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--r-card); background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; }
.px-lead::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.px-lead[open] { animation: lm-in .45s var(--ease); }
@keyframes lm-in { from { opacity: 0; translate: 0 1rem; } }
.lm-card { position: relative; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.lm-x { position: absolute; top: .9rem; right: .9rem; }
.lm-form { display: grid; gap: 1.1rem; }
.lm-head { display: grid; gap: .35rem; padding-right: 2.5rem; }
.lm-head p { color: var(--muted); }
.lm-opts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.lm-opts legend, .lm-f label { display: block; margin-bottom: .5rem; font: 500 var(--t-small)/1.3 var(--text); }
.lm-f label span { font-weight: 400; color: var(--soft); }
.lm-opt { position: relative; }
.lm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lm-opt span { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: 0 .85rem 0 .55rem; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-small); cursor: pointer; transition: background-color .25s, color .25s; }
.lm-opt input:checked + span { background: var(--ink); color: var(--white); box-shadow: none; }
.lm-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lm-grid { display: grid; gap: .9rem; }
@media (min-width: 560px) { .lm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lm-f input, .lm-f textarea { display: block; width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 400 1rem/1.4 var(--text); color: var(--ink); transition: box-shadow .25s, background-color .25s; }
.lm-f textarea { resize: vertical; min-height: 5.5rem; }
.lm-f input:focus, .lm-f textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lm-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); }
.lm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lm-check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--muted); cursor: pointer; }
.lm-check input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: #000; }
.lm-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lm-err { padding: .7rem .9rem; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); }
.lm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; }
.lm-form.is-sending .btn { opacity: .55; pointer-events: none; }
.lm-done { display: grid; gap: .8rem; justify-items: start; padding-block: 1rem; }
.lm-done p { color: var(--muted); }
@media (max-width: 559px) { .px-lead { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; } }

/* Two platforms in one chip (Shopify + ikas) */
.chip-ico.is-duo { width: auto; min-width: 2.6rem; padding-inline: .45rem; gap: .3rem; display: inline-flex; align-items: center; justify-content: center; }
.chip-ico.is-duo .brand { width: .95rem; height: .95rem; }
.px-lead [hidden] { display: none !important; }

/* Full-bleed video cards (2026-11-06): no black name bar, no gradient; the clips' burned-in subtitles stay clear and the
   name sits under the card. At rest only the sound button shows; the rest comes on hover/focus or on the active card (touch). */
.vcard .vbox { position: relative; }
.vcard .vbtn { aspect-ratio: 4 / 5.4; background: var(--ink); }
.vcard .vbtn::after { display: none; }
.vcard .vring { inset: 0; }
.vcard .vplay { position: absolute; left: 50%; top: 50%; z-index: 2; width: 3.4rem; height: 3.4rem; border-radius: 50%; translate: -50% -50%; opacity: 0; scale: .85;
  background: rgba(255, 255, 255, .92); transition: opacity .35s var(--ease), scale .5s var(--ease); }
.vcard .vplay .icon { width: 1.15rem; height: 1.15rem; margin-left: .15rem; }
.vcard .vdur { opacity: 0; transition: opacity .3s var(--ease); }
.vcard:hover .vplay, .vcard .vbtn:focus-visible .vplay { opacity: 1; scale: 1; }
.vcard:hover .vdur, .vcard:focus-within .vdur, .vcard.is-sound .vdur { opacity: 1; }
.vcard.is-sound .vplay { opacity: 0 !important; }
@media (hover: none) { .vcard .vrep, .vcard .vmax { opacity: 0; pointer-events: none; } .vcard.is-active .vrep, .vcard.is-active .vmax, .vcard.is-sound .vrep, .vcard.is-sound .vmax { opacity: 1; pointer-events: auto; } }
.vcard .vsnd { width: 2.5rem !important; height: 2.5rem !important; background: rgba(0, 0, 0, .55) !important; }
.vcard.is-sound .vsnd { background: var(--white) !important; }
.vcap { display: grid; gap: .1rem; margin-top: .7rem; }
.vcap b { font-weight: 500; font-size: .9375rem; line-height: 1.25; }
.vcap span { font-size: var(--t-micro); color: var(--muted); }

/* STORY:BEGIN (generated from v35/story.py, edit there) */
.story { position: relative; display: grid; place-items: center; width: 100%; min-height: 17rem; height: 100%; padding: clamp(1rem, .8rem + 1vw, 1.75rem); border-radius: var(--r-in); background: var(--paper); overflow: hidden; }
.card.is-ink .story, .scard .story.is-ink { background: var(--ink-2); color: var(--white); }
.scard .vis > .story { position: absolute; inset: 0; border-radius: inherit; }
.sty { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; width: min(100%, 22rem); font-size: .82rem; }
.sty .brand { width: 1rem; height: 1rem; flex: none; }
.sty small { display: block; font-size: .7rem; color: var(--g-600); }
.sty .sty-cap { margin: .35rem 0 0; font-size: 1.05rem; letter-spacing: -.01em; text-align: center; }
:is(.card.is-ink, .scard) .story.is-ink .sty small { color: var(--g-on-ink); }
@media (prefers-reduced-motion: reduce) { .sty *, .sty *::before, .sty *::after { animation: none !important; } }

/* SEO · rise: the rank rolls 9 → 4 → 1, the card lifts, the AI answer cites it */
.sty-seo .q { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 2rem; background: var(--white); box-shadow: var(--edge); color: var(--g-700); }
.sty-seo .me { display: flex; align-items: center; gap: .75rem; padding: .8rem; border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.sty-seo .me b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sty-seo .me > span:last-child { min-width: 0; }
.sty-seo .rk { flex: none; display: block; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--ink); color: var(--white); overflow: hidden; }
.sty-seo .rk em { display: grid; place-items: center; height: 2.2rem; font-style: normal; font-weight: 500; font-size: 1rem; transform: translateY(-200%); }
.sty-seo .ai { justify-self: center; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: 2rem; background: var(--tint); color: var(--ink); font-size: .75rem; }
html.px-motion .sty-seo .rk em { animation: seo-rk 7s var(--ease) infinite; }
html.px-motion .sty-seo .me { animation: seo-lift 7s var(--ease) infinite; }
html.px-motion .sty-seo .ai { animation: seo-ai 7s var(--ease) infinite; }
@keyframes seo-rk { 0%, 14% { transform: none; } 26%, 40% { transform: translateY(-100%); } 52%, 100% { transform: translateY(-200%); } }
@keyframes seo-lift { 0%, 40% { transform: translateY(.9rem); } 52%, 100% { transform: none; } }
@keyframes seo-ai { 0%, 58% { opacity: 0; transform: scale(.92); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Ads · draw: the budget line stays flat, the sales line draws upward to a dot */
.sty-ads .plot { position: relative; }
.sty-ads .ch { display: block; width: 100%; height: 8.5rem; overflow: visible; }
.sty-ads .ch path { fill: none; stroke-linecap: round; }
.sty-ads .sp { vector-effect: non-scaling-stroke; }
.sty-ads .sp { stroke: var(--g-350); stroke-width: 1.5; stroke-dasharray: 4 5; }
.sty-ads .sl { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sty-ads .dot { position: absolute; right: -.35rem; top: calc(11.6% - .35rem); width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .35rem rgba(127,127,127,.15); }
.sty-ads .lg { display: flex; justify-content: center; gap: 1.1rem; font-size: .72rem; opacity: .7; }
.sty-ads .lg span { display: inline-flex; align-items: center; gap: .35rem; }
.sty-ads .lg i { width: .9rem; height: 2px; } .sty-ads .lg .k1 { background: currentColor; } .sty-ads .lg .k2 { background: var(--g-350); }
html.px-motion .sty-ads .sl { animation: ads-draw 7s var(--ease) infinite; }
html.px-motion .sty-ads .dot { animation: ads-dot 7s var(--ease) infinite; }
@keyframes ads-draw { 0%, 8% { stroke-dashoffset: 1; } 55%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ads-dot { 0%, 50% { transform: scale(0); } 58%, 92% { transform: none; } 100% { transform: scale(0); } }

/* Shopify · press: the buy button is tapped and becomes "order received"; one toast */
.sty-shop .prod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: .75rem; border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.sty-shop .ph { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: .7rem; background: var(--tint); }
.sty-shop .ph svg { width: 2.4rem; height: 2.4rem; }
.sty-shop .nm b { display: block; font-weight: 500; }
.sty-shop .buy { grid-column: 1 / -1; display: grid; height: 2.6rem; border-radius: .7rem; background: var(--ink); color: var(--white); overflow: hidden; }
.sty-shop .buy > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 500; }
.sty-shop .buy svg { width: 1rem; height: 1rem; }
.sty-shop .b0 { opacity: 0; transform: translateY(-100%); }
.sty-shop .toast { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 2rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: .75rem; }
html.px-motion .sty-shop .buy { animation: shop-press 7s var(--ease) infinite; }
html.px-motion .sty-shop .b0 { animation: shop-b0 7s var(--ease) infinite; }
html.px-motion .sty-shop .b1 { animation: shop-b1 7s var(--ease) infinite; }
html.px-motion .sty-shop .toast { animation: shop-toast 7s var(--ease) infinite; }
@keyframes shop-press { 0%, 24% { transform: none; } 28% { transform: scale(.95); } 34%, 100% { transform: none; } }
@keyframes shop-b0 { 0%, 28% { opacity: 1; transform: none; } 36%, 94% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes shop-b1 { 0%, 28% { opacity: 0; transform: translateY(100%); } 36%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes shop-toast { 0%, 42% { opacity: 0; transform: translateY(.6rem); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* the store's own theme is the first thing the buyer of Shopify/ikas gets (owner, 2026-11-06) */
.sty-shop .prod { position: relative; }
.sty-shop .th { position: absolute; top: .55rem; right: .55rem; padding: .15rem .5rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-style: normal; font-size: .62rem; }

/* ikas · sweep: a migration marker passes over traffic that stays level */
.sty-ikas .box { position: relative; padding: 2.2rem .8rem .6rem; border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.sty-ikas .ch { display: block; width: 100%; height: 6rem; }
.sty-ikas .ar { fill: var(--tint); } .sty-ikas .ln { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sty-ikas .mk { position: absolute; top: 0; bottom: 0; left: 58%; width: 1px; background: var(--ink); }
.sty-ikas .mk em { position: absolute; top: .55rem; left: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-style: normal; font-size: .68rem; white-space: nowrap; }
.sty-ikas .mk .brand { width: .8rem; height: .8rem; background: var(--white); border-radius: .2rem; }
.sty-ikas .ok { justify-self: center; display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; }
.sty-ikas .ok svg { width: 1rem; height: 1rem; padding: .15rem; border-radius: 50%; background: currentColor; color: inherit; }
.sty-ikas .ok svg path { stroke: var(--paper); }
html.px-motion .sty-ikas .mk { animation: ik-sweep 7s var(--ease) infinite; }
html.px-motion .sty-ikas .ok { animation: ik-ok 7s var(--ease) infinite; }
@keyframes ik-sweep { 0% { left: 6%; opacity: 0; } 8% { opacity: 1; } 55%, 92% { left: 58%; opacity: 1; } 100% { left: 58%; opacity: 0; } }
@keyframes ik-ok { 0%, 55% { opacity: 0; transform: translateY(.4rem); } 63%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Web · compose: template → our bespoke design (a wipe), then the team edits a CMS field and publishes */
.sty-web .br { border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.sty-web .bar { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid var(--hair); font-size: .68rem; color: var(--g-600); }
.sty-web .bar > i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--g-250); }
.sty-web .bar span { margin-left: .35rem; }
.sty-web .tag { position: relative; margin-left: auto; display: grid; font-style: normal; }
.sty-web .tag b { grid-area: 1 / 1; padding: .12rem .45rem; border-radius: 2rem; font-weight: 500; font-size: .64rem; white-space: nowrap; }
.sty-web .tag .t0 { background: var(--tint); color: var(--g-600); opacity: 0; }
.sty-web .tag .t1 { background: var(--ink); color: var(--white); }
.sty-web .pg { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
.sty-web .tpl { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: .5fr 1fr 1fr 1.4fr; gap: .35rem; padding: .6rem; }
.sty-web .tpl i { border-radius: .3rem; background: rgba(26, 23, 20, .08); }
.sty-web .tpl .w0 { grid-column: 1 / -1; } .sty-web .tpl .w1 { grid-column: 1 / 4; } .sty-web .tpl .w2 { grid-column: 4 / 7; grid-row: 2 / 4; }
.sty-web .tpl .w3 { grid-column: 1 / 3; } .sty-web .tpl .w4 { grid-column: 1 / 3; grid-row: 4; } .sty-web .tpl .w5 { grid-column: 3 / 7; grid-row: 4; }
.sty-web .real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 0 0); }
.sty-web .cms { justify-self: end; display: grid; gap: .35rem; width: min(78%, 16rem); margin-top: -2.4rem; position: relative; z-index: 1; padding: .7rem .75rem;
  border-radius: .8rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.sty-web .cms small { display: flex; align-items: center; gap: .35rem; }
.sty-web .cms .brand { width: .85rem; height: .85rem; }
.sty-web .fld { display: flex; align-items: center; min-height: 1.9rem; padding: 0 .55rem; border-radius: .5rem; background: var(--tint); font-size: .8rem; }
.sty-web .fld em { font-style: normal; white-space: nowrap; overflow: hidden; clip-path: inset(0 0 0 0); }
.sty-web .caret { width: 1px; height: .95rem; margin-left: 1px; background: var(--ink); opacity: 0; }
.sty-web .pub { justify-self: end; padding: .3rem .7rem; border-radius: .45rem; background: var(--ink); color: var(--white); font-size: .72rem; font-weight: 500; }
html.px-motion .sty-web .real { animation: web-wipe 7s var(--ease) infinite; }
html.px-motion .sty-web .tag .t0 { animation: web-t0 7s var(--ease) infinite; }
html.px-motion .sty-web .tag .t1 { animation: web-t1 7s var(--ease) infinite; }
html.px-motion .sty-web .fld em { animation: web-type 7s steps(20) infinite; }
html.px-motion .sty-web .caret { animation: web-caret 7s steps(1) infinite; }
html.px-motion .sty-web .pub { animation: web-pub 7s var(--ease) infinite; }
@keyframes web-wipe { 0%, 8% { clip-path: inset(0 100% 0 0); opacity: 1; } 34%, 94% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes web-t0 { 0%, 22% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes web-t1 { 0%, 22% { opacity: 0; transform: scale(.9); } 28%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes web-type { 0%, 40% { clip-path: inset(0 100% 0 0); } 66%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes web-caret { 0%, 39% { opacity: 0; } 40%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes web-pub { 0%, 72% { transform: none; box-shadow: none; } 75% { transform: scale(.92); } 80%, 94% { transform: none; box-shadow: 0 0 0 3px rgba(26, 23, 20, .18); } 100% { box-shadow: none; } }

/* AI · type: a question arrives, dots type, the answer lands */
.sty-ai { min-height: 11rem; align-content: start; }
.sty-ai .msg { max-width: 86%; padding: .6rem .8rem; border-radius: 1rem; line-height: 1.35; }
.sty-ai .in { justify-self: start; border-bottom-left-radius: .3rem; background: var(--white); color: var(--ink); box-shadow: var(--edge); }
.sty-ai .out { justify-self: end; display: flex; gap: .5rem; align-items: flex-start; border-bottom-right-radius: .3rem; background: var(--ink); color: var(--white); }
:is(.card.is-ink, .scard) .story.is-ink .sty-ai .out { background: var(--white); color: var(--ink); }
.sty-ai .out .brand { margin-top: .1rem; background: var(--white); border-radius: .25rem; }
.sty-ai .typing { display: none; }
html.px-motion .sty-ai .typing { position: absolute; right: 0; top: 3.6rem; display: flex; gap: .25rem; padding: .55rem .7rem; border-radius: 1rem; background: rgba(127,127,127,.15); animation: ai-typ 7s steps(1) infinite; }
.sty-ai .typing i { width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; opacity: .5; }
html.px-motion .sty-ai .typing i { animation: ai-dot .9s ease-in-out infinite; } .sty-ai .typing i:nth-child(2) { animation-delay: .15s; } .sty-ai .typing i:nth-child(3) { animation-delay: .3s; }
html.px-motion .sty-ai .in { animation: ai-in 7s var(--ease) infinite; }
html.px-motion .sty-ai .out { animation: ai-out 7s var(--ease) infinite; }
@keyframes ai-in { 0%, 4% { opacity: 0; transform: translateY(.5rem); } 12%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ai-typ { 0%, 18% { opacity: 0; } 19%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes ai-dot { 0%, 100% { transform: none; opacity: .35; } 50% { transform: translateY(-3px); opacity: .9; } }
@keyframes ai-out { 0%, 44% { opacity: 0; transform: translateY(.5rem) scale(.96); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* App · drop: the icon lands on the home screen, both stores turn live */
.sty-app .phone { justify-self: center; width: 8.5rem; aspect-ratio: 9 / 16; padding: .45rem; border-radius: 1.5rem; background: var(--ink); box-shadow: var(--shadow-lg); }
.sty-app .home { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: .5rem; height: 100%; padding: 1.1rem .6rem; border-radius: 1.1rem; background: var(--tint); }
.sty-app .home i, .sty-app .app { aspect-ratio: 1; border-radius: .55rem; background: rgba(26,23,20,.09); }
.sty-app .app { display: grid; place-items: center; background: var(--ink); color: var(--white); }
.sty-app .app .icon { width: 1rem; height: 1rem; transform: rotate(-45deg); }
.sty-app .stores { display: flex; justify-content: center; gap: .4rem; }
.sty-app .stores span { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border-radius: 2rem; background: var(--white); box-shadow: var(--edge); font-size: .72rem; color: var(--ink); }
.sty-app .stores i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink); }
html.px-motion .sty-app .app { animation: app-drop 7s cubic-bezier(.3,1.4,.5,1) infinite; }
html.px-motion .sty-app .stores span { animation: app-live 7s var(--ease) infinite; } .sty-app .stores span + span { animation-delay: .15s !important; }
@keyframes app-drop { 0%, 10% { opacity: 0; transform: translateY(-2.5rem) scale(.6); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes app-live { 0%, 34% { opacity: 0; transform: translateY(.4rem); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Meta · pick: three creatives, the middle one wins and grows, the others step back */
.sty-meta .hd { display: flex; align-items: center; gap: .4rem; font-size: .75rem; } .sty-meta .hd span { margin-left: .2rem; }
.sty-meta .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-items: center; padding: .4rem .2rem; }
.sty-meta .t { position: relative; display: grid; align-content: end; gap: .3rem; aspect-ratio: 9 / 15; padding: .55rem; border-radius: .7rem; background: var(--white); box-shadow: var(--edge); color: var(--ink); }
.sty-meta .pl { position: absolute; inset: .4rem .4rem 2.2rem; width: calc(100% - .8rem); height: calc(100% - 2.6rem); object-fit: cover; border-radius: .45rem; background: var(--tint); }
.sty-meta .l { height: .3rem; border-radius: 1rem; background: rgba(26,23,20,.12); } .sty-meta .l.s { width: 60%; }
.sty-meta .t0, .sty-meta .t2 { transform: scale(.92); filter: grayscale(1) contrast(.85); }
.sty-meta .t1 { transform: scale(1.1); box-shadow: 0 0 0 1.5px var(--ink), var(--shadow); z-index: 1; }
.sty-meta .t em { position: absolute; left: 50%; top: -.7rem; transform: translateX(-50%); padding: .15rem .5rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-style: normal; font-size: .62rem; white-space: nowrap; }
html.px-motion .sty-meta :is(.t0, .t2) { animation: mt-lose 7s var(--ease) infinite; }
html.px-motion .sty-meta .t1 { animation: mt-win 7s var(--ease) infinite; }
html.px-motion .sty-meta .t em { animation: mt-tag 7s var(--ease) infinite; }
@keyframes mt-lose { 0%, 30% { filter: none; transform: none; } 44%, 92% { filter: grayscale(1) contrast(.85); transform: scale(.92); } 100% { filter: none; transform: none; } }
@keyframes mt-win { 0%, 30% { transform: none; box-shadow: var(--edge); } 44%, 92% { transform: scale(1.1); box-shadow: 0 0 0 1.5px var(--ink), var(--shadow); } 100% { transform: none; box-shadow: var(--edge); } }
@keyframes mt-tag { 0%, 44% { opacity: 0; transform: translate(-50%, .3rem); } 52%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* TikTok · hook: one vertical video, the playhead runs, at 3 s the viewer keeps watching */
.sty-tt .vid { position: relative; justify-self: center; width: 10.5rem; aspect-ratio: 9 / 16; border-radius: 1.3rem; border: .32rem solid var(--ink); background: var(--ink); color: var(--white); overflow: hidden; box-shadow: var(--shadow-lg); }
.sty-tt .vb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.sty-tt .vid::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.sty-tt .hk, .sty-tt .pr, .sty-tt .pl { z-index: 1; }
html.px-motion .sty-tt .vb { animation: tt-vb 7s linear infinite; }
@keyframes tt-vb { 0% { transform: scale(1); opacity: 1; } 92% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1.12); opacity: .85; } }
.sty-tt .mk { z-index: 1; position: absolute; left: .6rem; top: .6rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .4rem; background: var(--white); }
.sty-tt .pl { position: absolute; left: 50%; top: 45%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(0,0,0,.18); }
.sty-tt .pl::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .45rem 0 .45rem .75rem; border-color: transparent transparent transparent #fff; }
.sty-tt .hk { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); padding: .3rem .6rem; border-radius: 2rem; background: var(--white); color: var(--ink); font-size: .68rem; white-space: nowrap; }
.sty-tt .pr { position: absolute; left: .6rem; right: .6rem; bottom: .7rem; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.sty-tt .pr i { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(.85); }
html.px-motion .sty-tt .pr i { animation: tt-pr 7s linear infinite; }
html.px-motion .sty-tt .hk { animation: tt-hk 7s var(--ease) infinite; }
html.px-motion .sty-tt .pl { animation: tt-pl 7s var(--ease) infinite; }
@keyframes tt-pr { 0% { transform: scaleX(0); opacity: 1; } 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tt-hk { 0%, 30% { opacity: 0; transform: translate(-50%, .5rem) scale(.9); } 38%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes tt-pl { 0%, 4% { opacity: 1; transform: translate(-50%, -50%); } 14%, 92% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 100% { opacity: 1; transform: translate(-50%, -50%); } }

/* Google Ads · tap: a searcher taps the sponsored result, a sale lands */
.sty-gad .q { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 2rem; background: var(--white); box-shadow: var(--edge); color: var(--g-700); }
.sty-gad .ad { position: relative; display: grid; gap: .2rem; padding: .85rem .9rem; border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.sty-gad .ad small b { font-weight: 500; color: var(--ink); }
.sty-gad .ad .t { font-weight: 500; font-size: .95rem; letter-spacing: -.01em; }
.sty-gad .ad > span { color: var(--g-600); font-size: .75rem; }
.sty-gad .cur { position: absolute; right: 22%; bottom: .6rem; width: 1.15rem; height: 1.15rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.sty-gad .sale { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .5rem .45rem .7rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-size: .78rem; }
.sty-gad .sale .brand { background: var(--white); border-radius: .25rem; padding: .08rem; box-sizing: content-box; }
.sty-gad .sale b { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 1rem; background: var(--white); color: var(--ink); font-weight: 500; }
html.px-motion .sty-gad .cur { animation: gad-cur 7s var(--ease) infinite; }
html.px-motion .sty-gad .ad { animation: gad-tap 7s var(--ease) infinite; }
html.px-motion .sty-gad .sale { animation: gad-sale 7s var(--ease) infinite; }
@keyframes gad-cur { 0% { transform: translate(5rem, 3rem); } 30%, 34% { transform: none; } 37% { transform: scale(.85); } 40%, 92% { transform: none; } 100% { transform: translate(5rem, 3rem); } }
@keyframes gad-tap { 0%, 34% { box-shadow: var(--shadow); } 37% { box-shadow: 0 0 0 2px var(--ink), var(--shadow); transform: scale(.985); } 44%, 92% { box-shadow: 0 0 0 1.5px var(--ink), var(--shadow); transform: none; } 100% { box-shadow: var(--shadow); } }
@keyframes gad-sale { 0%, 46% { opacity: 0; transform: translateY(.6rem) scale(.9); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Stage version: the story floats over a hero photo, centred, every part on its own surface, no shell (2026-11-06) */
.ip-stage .sty { width: min(100%, 24rem); font-size: .86rem; }
.ip-stage .sty-cap { display: none; }
.ip-stage :is(.sty-meta .hd, .sty-ikas .ok, .sty-ads .lg) { justify-self: center; padding: .4rem .75rem; border-radius: 2rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.ip-stage .sty-ads .plot { padding: .9rem 1rem; border-radius: .9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.ip-stage .sty-ads .dot { right: .65rem; top: calc(.9rem + 11.6% * .75 - .35rem); }
.ip-stage .sty-ai .in { box-shadow: var(--shadow); }
.ip-stage .sty-ai .typing { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.ip-stage .sty-seo .q, .ip-stage .sty-gad .q { box-shadow: var(--shadow); }
.ip-stage .sty-meta .t { box-shadow: var(--shadow); }
.ip-stage .sty-meta .row { padding-block: .9rem .2rem; }

/* Solo stage on landing heroes: no shell; the caption becomes a black pill */
.ip-stage.is-solo { width: 100%; }
.ip-stage.is-solo .sty { width: 100%; }
.ip-stage.is-cap .sty-cap { display: block; justify-self: center; margin-top: .2rem; padding: .5rem 1rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-size: .9375rem; box-shadow: var(--shadow); }
.sky-story .ip-stage { width: min(100%, 23rem); }

/* Floating card version (on photos): no caption, inner surfaces go flat */
.sty-ui { padding: .9rem; }
.sty-ui .sty { width: 100%; gap: .55rem; }
.sty-ui .sty-cap { display: none; }
.sty-ui.is-cap .sty-cap { display: block; }
.sky-story { display: grid; justify-items: end; align-self: center; }
.sky-story .sty-ui { width: min(100%, 22rem); padding: 1.1rem; }
@media (max-width: 1023px) { .sky-story { justify-items: center; } }
.sty-ui :is(.sty-seo .me, .sty-shop .prod, .sty-ikas .box, .sty-web .br) { box-shadow: var(--edge); }
.sty-ui :is(.sty-meta .t, .sty-ai .in, .sty-seo .q) { background: var(--tint); box-shadow: none; }
.sty-ui .sty-meta .t1 { background: var(--white); }
.sty-ui .sty-meta .t .pl { background: rgba(26,23,20,.08); }
.sty-ui .sty-ui .sty-app .phone { width: 6.5rem; }
/* ===== three heroes per service (2026-11-08). Orbit: feed · Studio: scene · Mosaic: compare ===== */
/* Shopify · converge (Studio): three channels pulse into the store, its order count rolls up */
.sty-team .ch3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.sty-team .ch3 span { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; padding: .5rem .45rem; border-radius: 2rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: .74rem; white-space: nowrap; }
.sty-team .ch3 .brand { width: .9rem; height: .9rem; }
.sty-team .wr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 2.4rem; margin-block: -.3rem; }
.sty-team .wr i { position: relative; justify-self: center; width: 1px; height: 100%; background: repeating-linear-gradient(to bottom, rgba(26, 23, 20, .35) 0 3px, transparent 3px 6px); }
.sty-team .wr i::after { content: ""; position: absolute; left: 50%; top: 0; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--ink); opacity: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.sty-team .store { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.sty-team .store > .brand { width: 1.6rem; height: 1.6rem; }
.sty-team .store b { display: block; font-weight: 500; font-size: 1rem; }
.sty-team .ct { display: block; height: 2.6rem; overflow: hidden; }
.sty-team .ct em { display: grid; place-items: center end; height: 2.6rem; font-style: normal; font-size: 2.2rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transform: translateY(-300%); }
html.px-motion .sty-team .wr i::after { animation: tm-dot 7s var(--ease) infinite; }
html.px-motion .sty-team .wr i:nth-child(2)::after { animation-delay: .9s; } html.px-motion .sty-team .wr i:nth-child(3)::after { animation-delay: 1.8s; }
html.px-motion .sty-team .ct em { animation: tm-ct 7s var(--ease) infinite; }
html.px-motion .sty-team .store { animation: tm-ring 7s var(--ease) infinite; }
@keyframes tm-dot { 0%, 6% { opacity: 0; transform: none; } 9% { opacity: 1; } 19% { opacity: 1; transform: translateY(2rem); } 23%, 100% { opacity: 0; transform: translateY(2rem); } }
@keyframes tm-ct { 0%, 18% { transform: none; } 23%, 31% { transform: translateY(-100%); } 36%, 44% { transform: translateY(-200%); } 49%, 93% { transform: translateY(-300%); } 100% { transform: none; } }
@keyframes tm-ring { 0%, 18%, 27%, 31%, 40%, 44%, 53%, 100% { box-shadow: var(--shadow-lg); } 21%, 34%, 47% { box-shadow: 0 0 0 2px var(--ink), var(--shadow-lg); } }

/* Feed (Orbit): the newest event drops in on top and pushes the older ones down; four events, three on screen */
.sty-feed { gap: .6rem; }
.sty-feed .fd-hd { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem .35rem .4rem; border-radius: 2rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: .75rem; }
.sty-feed .fd-hd .ic { width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.sty-feed .fd-hd .brand, .sty-feed .fd-hd .icon { width: .85rem; height: .85rem; }
.sty-feed .live { width: .45rem; height: .45rem; margin-left: .15rem; border-radius: 50%; background: var(--ink); }
html.px-motion .sty-feed .live { animation: fd-live 1.6s ease-in-out infinite; }
@keyframes fd-live { 50% { opacity: .25; } }
.sty-feed .fd { position: relative; height: 11.6rem; margin: 0; padding: 0; list-style: none; }
.sty-feed .fd li { position: absolute; left: 0; right: 0; top: 0; height: 3.6rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
  padding: .55rem .75rem .55rem .55rem; border-radius: .95rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.sty-feed .fd li:nth-child(4) { transform: none; } .sty-feed .fd li:nth-child(3) { transform: translateY(4rem); } .sty-feed .fd li:nth-child(2) { transform: translateY(8rem); opacity: .55; } .sty-feed .fd li:nth-child(1) { opacity: 0; }
.sty-feed .ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--tint); color: var(--ink); }
.sty-feed .ic .brand, .sty-feed .ic .icon { width: 1.15rem; height: 1.15rem; }
.sty-feed .ic.is-cc { font-size: .72rem; font-weight: 500; letter-spacing: .02em; }
.sty-feed .tx { min-width: 0; }
.sty-feed .tx b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sty-feed .tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sty-feed .fd em { padding: .3rem .55rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-style: normal; font-size: .74rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.px-motion .sty-feed .fd li { animation: fd-move 8s var(--ease) infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes fd-move {   /* z-index steps keep the newest card on top while the stack shifts */
  0% { opacity: 0; transform: translateY(-.9rem) scale(.96); z-index: 4; }
  5%, 25% { opacity: 1; transform: none; z-index: 4; }
  30%, 50% { opacity: 1; transform: translateY(4rem); z-index: 3; }
  55%, 75% { opacity: .55; transform: translateY(8rem) scale(.98); z-index: 2; }
  80%, 100% { opacity: 0; transform: translateY(8.4rem) scale(.94); z-index: 1; } }

/* Compare (Mosaic): a divider wipes the before pane into the after pane, holds, and slides back */
.sty-cmp .cmp { position: relative; aspect-ratio: 16 / 11; border-radius: 1rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.sty-cmp .pa, .sty-cmp .pb { position: absolute; inset: 0; display: grid; place-items: center; padding: 2.3rem 1rem 1rem; }
.sty-cmp .pa { z-index: 0; background: var(--paper); color: var(--g-700); }
.sty-cmp .pb { z-index: 1; background: var(--white); clip-path: inset(0 0 0 50%); }
.sty-cmp .tg { position: absolute; top: .6rem; z-index: 2; padding: .2rem .6rem; border-radius: 2rem; font-style: normal; font-size: .68rem; font-weight: 500; white-space: nowrap; }
.sty-cmp .pa .tg { left: .6rem; background: var(--white); color: var(--g-600); box-shadow: var(--edge); }
.sty-cmp .pb .tg { right: .6rem; background: var(--ink); color: var(--white); }
.sty-cmp .hd { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(50%); }
.sty-cmp .hd::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.sty-cmp .hd b { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
.sty-cmp .hd svg { width: 1rem; height: 1rem; }
html.px-motion .sty-cmp .pb { animation: cmp-clip 8s var(--ease) infinite; }
html.px-motion .sty-cmp .hd { animation: cmp-hd 8s var(--ease) infinite; }
@keyframes cmp-clip { 0%, 12% { clip-path: inset(0 0 0 100%); } 44%, 86% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes cmp-hd { 0%, 12% { transform: translateX(100%); } 44%, 86% { transform: translateX(0); } 97%, 100% { transform: translateX(100%); } }
/* panes: template vs our real store */
.sty-cmp.is-shot .pa, .sty-cmp.is-shot .pb { padding: 0; }
.sty-cmp .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sty-cmp .wire { position: absolute; inset: 2.2rem .7rem .7rem; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: .5fr 1fr 1fr 1.3fr; gap: .4rem; }
.sty-cmp .wire i { border-radius: .3rem; background: rgba(26, 23, 20, .08); }
.sty-cmp .wire .w0 { grid-column: 1 / -1; } .sty-cmp .wire .w1 { grid-column: 1 / 4; } .sty-cmp .wire .w2 { grid-column: 4 / 7; grid-row: 2 / 4; }
.sty-cmp .wire .w3 { grid-column: 1 / 3; } .sty-cmp .wire .w4 { grid-column: 1 / 3; grid-row: 4; } .sty-cmp .wire .w5 { grid-column: 3 / 7; grid-row: 4; }
/* a big number with what it means */
.sty-cmp .big { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.sty-cmp .big > b { font-size: 3.4rem; line-height: 1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sty-cmp .pa .big > b { color: var(--g-500); }
.sty-cmp .big small { font-size: .74rem; }
.sty-cmp .ln { display: grid; gap: .3rem; width: 9rem; margin-top: .45rem; } .sty-cmp .ln i { height: .35rem; border-radius: 1rem; background: rgba(26, 23, 20, .1); } .sty-cmp .ln i:nth-child(2) { width: 75%; } .sty-cmp .ln i:nth-child(3) { width: 55%; }
.sty-cmp .ai, .sty-cmp .msg { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .4rem .7rem; border-radius: 2rem; background: var(--tint); font-size: .72rem; }
.sty-cmp .msg.is-ok { background: var(--ink); color: var(--white); } .sty-cmp .msg .brand { background: var(--white); border-radius: .2rem; }
/* budget bars */
.sty-cmp .bars { display: grid; gap: .6rem; width: 100%; }
.sty-cmp .bars small { font-size: .72rem; color: var(--g-600); }
.sty-cmp .bars ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.sty-cmp .bars li { display: grid; gap: .25rem; font-size: .76rem; }
.sty-cmp .bars li i { position: relative; height: .6rem; border-radius: 1rem; background: rgba(26, 23, 20, .07); overflow: hidden; }
.sty-cmp .bars li i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g-350); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.sty-cmp .bars li.is-on { font-weight: 500; color: var(--ink); } .sty-cmp .bars li.is-on i::after { background: var(--ink); }
/* a request waiting on the agency vs the team publishing it */
.sty-cmp .tk { display: grid; gap: .35rem; width: min(100%, 15rem); padding: .85rem .9rem; border-radius: .85rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.sty-cmp .tk small { display: flex; align-items: center; gap: .35rem; } .sty-cmp .tk small :is(.brand, .icon) { width: .85rem; height: .85rem; }
.sty-cmp .tk b { font-weight: 500; font-size: .95rem; }
.sty-cmp .tk .st { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 2rem; background: var(--tint); color: var(--g-700); font-size: .7rem; }
.sty-cmp .tk .st svg { width: .8rem; height: .8rem; }
.sty-cmp .tk.is-ok .st { background: var(--ink); color: var(--white); }
/* a vertical video: scrolled past vs watched to the end */
.sty-cmp .clip { height: 100%; display: grid; place-items: center; }
.sty-cmp .vid { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: .8rem; border: .22rem solid var(--ink); background: var(--g-250); overflow: hidden; }
.sty-cmp .vb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sty-cmp span.vb { background: linear-gradient(160deg, var(--g-250), var(--g-350)); }
.sty-cmp .vid .pill { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); padding: .2rem .45rem; border-radius: 2rem; background: var(--white); color: var(--ink); font-size: .58rem; white-space: nowrap; }
.sty-cmp .vid .cta { position: absolute; left: .35rem; right: .35rem; bottom: .8rem; padding: .25rem; border-radius: .4rem; background: var(--white); color: var(--ink); font-size: .58rem; font-weight: 500; text-align: center; }
.sty-cmp .vid .pr { position: absolute; left: .35rem; right: .35rem; bottom: .35rem; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .4); overflow: hidden; }
.sty-cmp .vid .pr i { display: block; height: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.sty-cmp .pa .vid .pr i { background: var(--ink); }
/* a spreadsheet plus a chat vs one panel */
.sty-cmp .sheet { position: relative; width: 100%; }
.sty-cmp .sheet .grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(26, 23, 20, .12); border-radius: .4rem; overflow: hidden; }
.sty-cmp .sheet .grid i { display: grid; place-items: center; height: 1.55rem; border-right: 1px solid rgba(26, 23, 20, .08); border-bottom: 1px solid rgba(26, 23, 20, .08); font-style: normal; font-size: .7rem; color: var(--g-600); }
.sty-cmp .sheet .grid i.q { background: rgba(26, 23, 20, .06); }
.sty-cmp .sheet .bub { position: absolute; right: -.2rem; bottom: -.9rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: .8rem .8rem .2rem .8rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: .7rem; }
.sty-cmp .panel { display: grid; gap: .5rem; width: 100%; }
.sty-cmp .panel small { display: flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 500; } .sty-cmp .panel small .icon { width: .85rem; height: .85rem; }
.sty-cmp .panel ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sty-cmp .panel li { display: flex; justify-content: space-between; align-items: center; padding: .45rem .6rem; border-radius: .6rem; background: var(--paper); font-size: .76rem; }
.sty-cmp .panel em { padding: .15rem .5rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-style: normal; font-size: .66rem; }
.ip-stage :is(.sty-feed, .sty-cmp, .sty-team) { width: min(100%, 23rem); }
/* STORY:END */

/* Tools card: a tool window, not a portfolio screenshot (2026-11-05). */
.tl-tool .tl-stage { display: grid; place-items: center; padding: clamp(1rem, .7rem + 1.4vw, 2rem); border-radius: var(--r-in); background: var(--tint); box-shadow: inset 0 0 0 1px var(--hair); }
.tl-win { width: min(100%, 30rem); border-radius: .9rem; background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.tl-bar { display: flex; align-items: center; gap: .3rem; padding: .55rem .75rem; border-bottom: 1px solid var(--hair); font-size: var(--t-micro); color: var(--soft); }
.tl-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--g-250); }
.tl-bar span { margin-left: .5rem; }
.tl-body { display: grid; gap: .75rem; padding: .9rem; }
.tl-body .serp { width: 100%; }
.tl-roas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.tl-roas div { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: .6rem; background: var(--tint); box-shadow: inset 0 0 0 1px var(--hair); }
.tl-roas span { font-size: .6875rem; color: var(--soft); }
.tl-roas b { font-weight: 500; font-size: var(--t-small); }
.tl-roas .is-out { background: var(--ink); box-shadow: none; } .tl-roas .is-out span { color: var(--g-on-ink); } .tl-roas .is-out b { color: var(--white); }

/* Lead topics carry the platforms' own marks (2026-11-05). */
.lm-marks { display: inline-flex; align-items: center; gap: .15rem; font-style: normal; }
.lm-marks .brand, .lm-marks .icon { width: .95rem; height: .95rem; }
.lm-marks > * { display: block; }
.lm-opt input:checked + span .lm-marks .icon { color: var(--white); }
.lm-opt input:checked + span .lm-marks .brand { filter: none; background: var(--white); border-radius: .25rem; padding: .08rem; box-sizing: content-box; }
.lead .opt { display: inline-flex; align-items: center; gap: .45rem; }

/* Subpage covers: every subpage exists in all three variants; the first section carries that variant's own backdrop.
   Pure CSS pseudo-element (no extra requests); entrance is transform+opacity only, once, gated by px-motion. */
body[data-sub] main > section:first-child, body[data-sub] main > section:first-child .m-grid > .m-tile:first-child { position: relative; isolation: isolate; overflow: clip; }
body[data-sub] main > section:first-child::before, body[data-sub] main > section:first-child .m-grid > .m-tile:first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body[data-v="orbit"][data-sub] main > section:first-child::before, body[data-v="orbit"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before {
  inset: -20% -10% auto auto; width: min(70vw, 56rem); aspect-ratio: 1; margin-left: auto;
  background: repeating-radial-gradient(circle at center, transparent 0 3.4rem, rgba(26,23,20,.07) 3.4rem calc(3.4rem + 1px));
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  transform-origin: 70% 30%;
}
body[data-v="studio"][data-sub] main > section:first-child::before, body[data-v="studio"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before {
  background: linear-gradient(90deg, rgba(26,23,20,.07) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 25%, #000 70%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 25%, #000 70%, transparent 100%);
  transform-origin: 50% 0;
}
body[data-v="mosaic"][data-sub] main > section:first-child::before, body[data-v="mosaic"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before {
  background: linear-gradient(rgba(26,23,20,.06) 1px, transparent 1px) 0 0 / 3rem 3rem, linear-gradient(90deg, rgba(26,23,20,.06) 1px, transparent 1px) 0 0 / 3rem 3rem;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 75%);
}
@keyframes pxv-orbit { from { opacity: 0; transform: scale(.9) rotate(-8deg); } }
@keyframes pxv-studio { from { opacity: 0; transform: scaleY(.6); } }
@keyframes pxv-mosaic { from { opacity: 0; transform: translateY(1.5rem) scale(1.04); } }
html.px-motion body[data-v="orbit"][data-sub] main > section:first-child::before, html.px-motion body[data-v="orbit"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before { animation: pxv-orbit 1.4s cubic-bezier(.2,.7,.2,1) both; }
html.px-motion body[data-v="studio"][data-sub] main > section:first-child::before, html.px-motion body[data-v="studio"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before { animation: pxv-studio 1.1s cubic-bezier(.2,.7,.2,1) both; }
html.px-motion body[data-v="mosaic"][data-sub] main > section:first-child::before, html.px-motion body[data-v="mosaic"][data-sub] main > section:first-child .m-grid > .m-tile:first-child::before { animation: pxv-mosaic 1.2s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { body[data-sub] main > section:first-child::before, body[data-sub] main > section:first-child .m-grid > .m-tile:first-child::before { animation: none !important; } }
@media (max-width: 767px) { body[data-v="orbit"][data-sub] main > section:first-child::before { width: 120vw; inset: -10% -40% auto auto; } }

/* Subpage hero layouts per variant (same content, three compositions).
   Orbit: open copy on cream, visual right.  Studio: visual left, copy right under a hairline rule.  Mosaic: copy sits in its own white tile. */
body[data-v="studio"][data-sub] main > section:first-child > .container > .hero-copy { text-align: left; margin-inline: 0; }
body[data-v="studio"][data-sub] main > section:first-child > .container > .hero-copy > * { margin-inline: 0; justify-content: flex-start; }
body[data-v="orbit"][data-sub] main > section:first-child .m-grid > .m-tile:first-child { background: transparent; box-shadow: none; padding-inline-start: 0; }
@media (min-width: 1024px) {
  body[data-v="studio"][data-sub] main > section:first-child > .container > :is(.grid, .grid2, .sc-grid, .m-grid) > :first-child,
  body[data-v="studio"][data-sub] main > section:first-child > .container:is(.grid, .grid2) > :first-child { order: 2; }
}
body[data-v="studio"][data-sub] main > section:first-child :is(.hero-copy, .sc-copy) { border-top: 1px solid rgba(26,23,20,.14); padding-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
body[data-v="studio"][data-sub] main > section:first-child .m-grid > .m-tile:first-child { background: transparent; box-shadow: none; border-top: 1px solid rgba(26,23,20,.14); border-radius: 0; padding-inline: 0; }
body[data-v="mosaic"][data-sub] main > section:first-child > .container > :is(.grid, .sc-grid) > :is(.hero-copy, .sc-copy),
body[data-v="mosaic"][data-sub] main > section:first-child > .container.grid > .hero-copy,
body[data-v="mosaic"][data-sub] main > section:first-child > .container > .hero-copy {
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--edge); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* Service pills (services.py): one linked pill per service, never two squeezed into one chip (2026-11-06). */
.spills { display: flex; flex-wrap: wrap; gap: .4rem; }
.spill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: .25rem .8rem .25rem .3rem; border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); box-shadow: var(--edge); font-size: .8125rem; line-height: 1; text-decoration: none; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.spill .chip-ico { width: 1.65rem; height: 1.65rem; }
.spill .chip-ico .brand, .spill .chip-ico .icon { width: .85rem; height: .85rem; }
.spill:hover { box-shadow: 0 0 0 1px var(--ink); }
[data-surface="ink"] .spill, .is-ink .spill { background: rgba(255,255,255,.08); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* Hero service scene v2 (2026-11-06): eight named services in a 4 × 2 grid, story centred on the photo, benefit + link in a foot bar. */
.itabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.itabs .sw-item { display: flex; align-items: center; width: 100%; min-height: 2.9rem; padding: .45rem .6rem .5rem .45rem; border-radius: var(--r-ui); background: rgba(255, 255, 255, .45); box-shadow: var(--edge); color: var(--g-700); font-size: .8125rem; line-height: 1.2; }
.itabs .sw-item > span { gap: .5rem; min-width: 0; }
.itabs .sw-item .chip-ico { flex: none; width: 1.75rem; height: 1.75rem; }
.itabs .sw-item .chip-ico .brand, .itabs .sw-item .chip-ico .icon { width: .95rem; height: .95rem; }
.itabs .sw-item:hover { background: var(--white); color: var(--ink); }
.itabs .sw-item[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.itabs .sw-bar { left: .6rem; right: .6rem; bottom: .25rem; }
@media (max-width: 599px) {
  .itabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: calc(var(--margin) * -1); padding: .15rem var(--margin) .35rem; }
  .itabs::-webkit-scrollbar { display: none; }
  .itabs .sw-item { flex: none; width: auto; scroll-snap-align: start; white-space: nowrap; }
}
.ipane .ip-stage { inset: 3% 4% 4.4rem; z-index: 2; display: grid; place-items: center; max-width: none !important; width: auto !important; }
.ipane .ip-stage > .sty { width: min(100%, 25rem); transform-origin: center; }
@media (max-width: 599px) { .ipane .ip-stage { inset: 2% 3% 3.6rem; } }
.ip-foot { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem .55rem .55rem 1rem; border-radius: var(--r-ui); background: var(--white); box-shadow: var(--shadow); }
.ip-foot b { font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-go { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: 0 .8rem; border-radius: calc(var(--r-ui) - .2rem); background: var(--ink); color: var(--white); font-size: .8125rem; text-decoration: none; }
.ip-go .icon { width: .85rem; height: .85rem; }
.ip-go:hover { background: var(--g-800); }
@media (max-width: 599px) { .ip-foot { left: .5rem; right: .5rem; bottom: .5rem; padding-left: .75rem; } .ip-foot b { font-size: .8125rem; } .ip-go { font-size: .75rem; padding: 0 .6rem; } }

/* Service directory under the services section (2026-11-06): every service page, grouped. */

/* Link cards (services.link_card): the card links to its case, its service pills link to their pages. */
.has-link { position: relative; cursor: pointer; }
.has-link > .stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.has-link > .stretch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.has-link .spill, .has-link .spills { position: relative; z-index: 2; }

/* Written reviews (2026-11-06): source mark (Google / Trustpilot), five stars, the text; links to all reviews. */
.rcard { justify-content: flex-start; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rc-src { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--muted); }
.rc-src .brand { width: 1.15rem; height: 1.15rem; }
.stars { display: inline-flex; gap: .1rem; color: var(--ink); }
.stars svg { width: .9rem; height: .9rem; }
.rcard blockquote p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rc-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.rc-links .link { display: inline-flex; align-items: center; gap: .4rem; }
.rc-links .brand { width: 1rem; height: 1rem; }

/* A single story centred on a wide hero photo (studio service heroes, web landing): never parked in a corner. */
.scene > .slot.ip-stage { inset: 6% 6%; display: grid; place-items: center; width: auto !important; max-width: none !important; z-index: 3; }
.scene > .slot.ip-stage > .ip-stage { width: min(100%, 24rem); }

/* ===== v3.5 hero scenes: three tab forms, one per version (2026-11-06) ===== */
.ip-btns { display: flex; gap: .35rem; flex: none; }
.ip-go { white-space: nowrap; }
.itabs .sw-item em { font-style: normal; }

/* Orbit · dock: a white dock in the scene foot; icons, the active one opens with its name; the pane's button(s) on the right */
.itabs.is-dock { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 7; display: flex; justify-content: space-between; gap: .15rem; max-width: max-content; margin-inline: auto;
  padding: .3rem; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.itabs.is-dock::-webkit-scrollbar { display: none; }
.itabs.is-dock .sw-item { flex: none; width: auto; min-height: 2.5rem; padding: .2rem; border-radius: var(--r-pill); background: transparent; box-shadow: none; color: var(--g-700); }
.itabs.is-dock .sw-item > span { gap: 0; }
.itabs.is-dock .sw-item .chip-ico { width: 2.1rem; height: 2.1rem; background: transparent; box-shadow: none; }
.itabs.is-dock .sw-item em { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--ease), margin .55s var(--ease); }
.itabs.is-dock .sw-item:hover { background: var(--tint); }
.itabs.is-dock .sw-item[aria-selected="true"] { background: var(--tint); box-shadow: none; color: var(--ink); }
.itabs.is-dock .sw-item[aria-selected="true"] em { max-width: 11rem; margin: 0 .7rem 0 .25rem; }
.itabs.is-dock .sw-bar { left: 1rem; right: 1rem; bottom: .2rem; }
.iscene.is-dock .ip-foot { left: auto; right: .75rem; top: .75rem; bottom: auto; padding: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none; }
.iscene.is-dock .ip-foot b { display: none; }
.iscene.is-dock .ip-go { min-height: 2.5rem; border-radius: var(--r-pill); padding: 0 1rem; }
.iscene.is-dock .ipane .ip-stage { inset: 4.2rem 4% 4.8rem; }
.iscene.is-dock .ip-stage .sty-cap, .iscene.is-row .ip-stage .sty-cap { display: block; justify-self: center; margin-top: .3rem; padding: .5rem 1rem; border-radius: 2rem;
  background: var(--ink); color: var(--white); font-size: .9375rem; box-shadow: var(--shadow); }
@media (max-width: 599px) {
  .itabs.is-dock { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; justify-content: flex-start; }
  .iscene.is-dock .ip-foot { right: .5rem; top: .5rem; }
  .iscene.is-dock .ipane .ip-stage { inset: 3.6rem 3% 4.2rem; }
}

/* Studio · row: one typographic line of the eight names under the wide scene; a hairline fills over the active one */
.itabs.is-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 1.25rem; margin-top: 1.1rem; }
.itabs.is-row .sw-item { display: block; min-height: 0; padding: .8rem 0 .2rem; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgba(26, 23, 20, .16); color: var(--g-600); text-align: left; }
.itabs.is-row .sw-item .chip-ico { display: none; }
.itabs.is-row .sw-item em { font-size: .875rem; line-height: 1.25; }
.itabs.is-row .sw-item:hover { background: none; color: var(--ink); }
.itabs.is-row .sw-item[aria-selected="true"] { background: none; box-shadow: none; color: var(--ink); }
.itabs.is-row .sw-bar { top: -1px; bottom: auto; left: 0; right: 0; height: 1px; background: var(--ink); }
.iscene.is-row .ip-foot b { display: none; }
.iscene.is-row .ip-foot { left: auto; }
@media (max-width: 899px) {
  .itabs.is-row { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .itabs.is-row .sw-item { flex: none; white-space: nowrap; }
}

/* Mosaic · strip: eight small tiles under the bento; the active tile turns ink */
.itabs.is-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.itabs.is-strip .sw-item { display: flex; align-items: flex-start; min-height: 5rem; padding: .8rem .85rem 1rem; border-radius: var(--r-card); background: var(--white); box-shadow: var(--edge); color: var(--ink); }
.itabs.is-strip .sw-item > span { flex-direction: column; align-items: flex-start; gap: .55rem; }
.itabs.is-strip .sw-item em { font-size: .875rem; line-height: 1.2; }
.itabs.is-strip .sw-item:hover { box-shadow: var(--shadow); background: var(--white); }
.itabs.is-strip .sw-item[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.itabs.is-strip .sw-item[aria-selected="true"] .chip-ico { background: var(--white); }
.itabs.is-strip .sw-bar { left: .85rem; right: .85rem; bottom: .45rem; background: currentColor; }
@media (max-width: 959px) { .itabs.is-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) and (max-width: 1199px) { .itabs.is-strip .sw-item { min-height: 4.4rem; padding: .7rem .7rem .9rem; } .itabs.is-strip .sw-item em { font-size: .8125rem; } }
@media (max-width: 599px) { .itabs.is-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .itabs.is-strip .sw-item { min-height: 0; flex-direction: row; } .itabs.is-strip .sw-item > span { flex-direction: row; align-items: center; } }

/* White-on-transparent client logos (live import) are inverted to sit on light surfaces. */
img.is-inv { filter: invert(1); }
[data-surface="ink"] img.is-inv { filter: none; }

/* ===== v3.5 service landing hero (heroes.py): one DOM, three compositions ===== */
.shero { padding: calc(var(--header) + clamp(1rem, .5rem + 1.5vw, 2rem)) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.sh-grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.sh-grid > * { min-width: 0; }
.sh-copy { display: grid; gap: 1rem; align-content: center; }
.sh-side { display: grid; gap: 1rem; align-content: start; }
.sh-side .lp-bul { margin: 0; }
.sh-vis { position: relative; isolation: isolate; overflow: hidden; min-height: 24rem; border-radius: var(--r-card); background: var(--tint); }
.sh-vis > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.sh-vis .ip-stage { position: absolute; inset: 5% 5% 4.8rem; z-index: 2; display: grid; place-items: center; }
.sh-vis .ip-stage > .sty { width: min(100%, 24rem); }
.sh-vis .ip-stage .sty-cap { display: none; }
@media (max-width: 599px) { .sh-vis { min-height: 22rem; } .sh-vis .ip-stage { inset: 4% 4% 4.2rem; } }
/* Orbit · split */
@media (min-width: 960px) {
  body[data-v="orbit"] .sh-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; gap: clamp(2rem, 1rem + 3vw, 4rem); }
  body[data-v="orbit"] .sh-vis { min-height: 0; height: clamp(28rem, calc(100svh - var(--header) - 4.5rem), 42rem); }
}
/* Studio · editorial */
@media (min-width: 960px) {
  body[data-v="studio"] .sh-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1rem 3rem; }
  body[data-v="studio"] .sh-head .t-h1 { max-width: 14ch; }
  body[data-v="studio"] .sh-side .lp-bul, body[data-v="studio"] .sh-side .lp-trust { display: none; }   /* editorial head stays short; points live in the page below */
  body[data-v="studio"] .sh-vis { min-height: 0; height: clamp(16rem, calc(100svh - 29.5rem), 32rem); }
  body[data-v="studio"] .sh-vis .ip-stage { inset: 4% 25% 4.6rem; }
}
/* Mosaic · bento tiles */
body[data-v="mosaic"] .sh-copy { gap: .85rem; padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem); border-radius: var(--r-card); background: var(--white); box-shadow: var(--edge); }
@media (min-width: 960px) {
  body[data-v="mosaic"] .sh-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
  body[data-v="mosaic"] .sh-vis { min-height: clamp(26rem, calc(100svh - var(--header) - 4.5rem), 40rem); }
}
.sh-head { display: grid; gap: .9rem; justify-items: start; }

/* Portfolio media (v3.5): live screenshots in a code browser frame; a type tile for a site that is not online yet. */
.wframe { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; border-radius: inherit; background: var(--white); overflow: hidden; }
.wbar { display: flex; align-items: center; gap: .28rem; padding: .45rem .65rem; border-bottom: 1px solid var(--hair); font-size: .68rem; color: var(--g-600); }
.wbar i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--g-250); }
.wbar span { margin-left: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wframe img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wtype { display: grid; place-content: center; gap: .4rem; width: 100%; height: 100%; min-height: 12rem; padding: 1.5rem; text-align: center; background: var(--paper); }
.wtype b { font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); letter-spacing: -.03em; }
.wtype span { font-size: var(--t-micro); color: var(--muted); }

/* Case covers on success-story cards (v3.5) */
.ccard .cc-cover { margin: -1.2rem -1.2rem .4rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--tint); }
.ccard .cc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ccard:hover .cc-cover img { transform: scale(1.04); }

/* Story loops pause off-screen and in hidden hero panes (prix-v35.js storyPause) */
.is-off .sty, .is-off .sty *, .sty.is-off, .is-off.sty * { animation-play-state: paused !important; }

/* Touch: video controls are full tap targets (audit: 34 px) */
@media (hover: none) { .vcard .vctl button { width: 2.75rem !important; height: 2.75rem !important; } }
/* Pricing hero at tablet-landscape widths: the price card sits beside the copy, never under it */
@media (min-width: 960px) and (max-width: 1099px) { .pz-hero .container.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 599px) { .ip-foot b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } }

/* v3.5 related-service bento: a tile shows its service's own story, or is a plain text tile (no random drawings) */
.rb .rb-sty { position: absolute; inset: 2.8rem 6% 6%; display: grid; place-items: center; pointer-events: none; }
.rb .rb-sty .sty { width: min(100%, 19rem); font-size: .74rem; }
.rb .rb-sty .sty-cap { display: none; }
/* a related page with no story of its own is a type tile: its name large, no empty picture area */
.rb.is-plain .rb-vis { display: grid; align-content: end; padding: 3.4rem 1rem 1rem; background: var(--tint); }
.rb.is-plain .rb-big { font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.rb.is-plain .rb-copy b { visibility: hidden; }
.svr-vis .svr-ill.ip-stage { position: absolute; inset: 8%; display: grid; place-items: center; }
.svr-vis .svr-ill .sty { width: min(100%, 21rem); }
.svr-vis .svr-ill .sty-cap { display: none; }

.mm-feature .mm-sty { position: absolute; inset: 1rem 1rem 7.5rem; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.mm-feature .mm-sty .sty { width: min(100%, 17rem); font-size: .72rem; }
.mm-feature .mm-sty .sty-cap { display: none; }

.fld-ill.ip-stage { display: grid; place-items: center; }
.fld-ill.ip-stage .sty { width: min(100%, 22rem); }
.fld-ill.ip-stage .sty-cap { display: none; }

.rb-sty .sty, .svr-ill .sty, .mm-sty .sty { transform-origin: center; }
/* small tiles shrink their story with zoom (layout shrinks too, so it stays centred); heroes keep the JS fit */
.rb .rb-sty .sty { zoom: .56; width: 22rem; }
.rb.is-big .rb-sty .sty { zoom: .8; }
.mm-feature .mm-sty .sty { zoom: .6; width: 22rem; }
.svr-vis .svr-ill .sty { zoom: .85; }
.rb .rb-sty { inset: 2.6rem .5rem .5rem; overflow: hidden; }
.rb .rb-sty .sty-tt, .mm-feature .mm-sty .sty-tt { zoom: .4; } .rb .rb-sty .sty-app, .mm-feature .mm-sty .sty-app { zoom: .42; }

/* drawn hero stages for the catalog groups: SEO on paper with rank hairlines, software on ink with a column grid */
.sh-vis.is-paper { background: var(--white); box-shadow: var(--edge); }
.sh-vis.is-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 50% 45%, transparent 0 3.2rem, rgba(26, 23, 20, .06) 3.2rem calc(3.2rem + 1px)); }
.sh-vis.is-ink { background: var(--ink-2); }
.sh-vis.is-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / calc(100% / 8) 100%;
  -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.sh-vis.is-ink .ip-foot { background: rgba(255, 255, 255, .96); }

/* SECTIONS:BEGIN (generated from v35/sections.py) */
/* ===== v3.5 section patterns (sections.py) ===== */
.sp-stmt { display: grid; gap: 1.25rem 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.sp-stmt .t-h2 { max-width: 18ch; text-wrap: balance; }
.sp-body { display: grid; gap: .9rem; max-width: 40rem; color: var(--muted); font-size: var(--t-body); }
.sp-body p:first-child { color: var(--fg); font-size: var(--t-lead); line-height: 1.45; }
@media (min-width: 960px) { .sp-stmt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sp-ticks { display: grid; gap: .55rem; margin-top: .4rem; }
.sp-ticks li { display: flex; gap: .6rem; align-items: baseline; color: var(--fg); }
.sp-ticks .icon { width: .85rem; height: .85rem; flex: none; translate: 0 .1rem; }

/* scroll story: sticky visual, passages scroll past it; the one in the middle of the screen is lit */
.ss { display: grid; gap: var(--gap); }
.ss-vis { position: relative; }
.ss-stage { position: relative; display: grid; place-items: center; min-height: 22rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--tint); overflow: hidden; }
.ss-stage .sty { width: min(100%, 24rem); }
.ss-stage .sty-cap { display: block; justify-self: center; margin-top: .3rem; padding: .5rem 1rem; border-radius: 2rem; background: var(--ink); color: var(--white); font-size: .9375rem; }
.ss-list { display: grid; }
.ss.is-layers .ss-stage { padding: 0; min-height: clamp(22rem, 34vw, 32rem); background: var(--tint); }
.ss-lay { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.ss-lay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-ui { position: absolute; inset: 9% 10%; display: grid; place-items: center; }
.ss-ui > * { width: min(100%, 22rem); }
@media (max-width: 959px) {   /* phones and tablets: the stage stays on top while the steps scroll under it */
  .ss.is-layers .ss-vis { position: sticky; top: 0; z-index: 2; margin-inline: calc(var(--margin) * -1); padding: calc(var(--header) + .5rem) var(--margin) .75rem; background: var(--bg, var(--cream)); }
  .ss.is-layers .ss-stage { min-height: 0; height: clamp(13rem, 42vw, 20rem); box-shadow: var(--shadow); }
  .ss.is-layers .ss-ui { inset: 6% 8%; }
  .ss.is-layers .ss-ui > * { zoom: .82; }
}
.ss[data-on="0"] .ss-lay[data-k="0"], .ss[data-on="1"] .ss-lay[data-k="1"], .ss[data-on="2"] .ss-lay[data-k="2"], .ss[data-on="3"] .ss-lay[data-k="3"], .ss[data-on="4"] .ss-lay[data-k="4"], .ss[data-on="5"] .ss-lay[data-k="5"] { opacity: 1; }
.ss-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0; border-top: 1px solid var(--hair); transition: opacity .5s var(--ease); }
.ss-item:last-child { border-bottom: 1px solid var(--hair); }
.ss-n { font-size: var(--t-small); color: var(--soft); padding-top: .35rem; }
.ss-item .t-h3 { margin-bottom: .7rem; }
.ss-item p { color: var(--muted); max-width: 38rem; } .ss-item p + p { margin-top: .6rem; }
html.px-motion .ss[data-ss-box] .ss-item { opacity: .38; }
html.px-motion .ss[data-ss-box] .ss-item.is-on { opacity: 1; }
@media (min-width: 960px) {
  .ss { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
  .ss-vis { position: sticky; top: calc(var(--header) + 1.5rem); }
  .ss-stage { min-height: min(34rem, calc(100svh - var(--header) - 4rem)); }
}

/* index list: numbered rows, the number large, hairlines between */
.ix { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 960px) { .ix { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .ix-head { position: sticky; top: calc(var(--header) + 1.5rem); align-self: start; } }
.ix-head { display: grid; gap: 1rem; align-content: start; }
.ix-list { display: grid; }
.ix-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .35rem 1rem; padding: 1.35rem 0; border-top: 1px solid var(--hair); }
.ix-row:last-child { border-bottom: 1px solid var(--hair); }
.ix-n { grid-row: span 2; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; letter-spacing: -.03em; color: var(--soft); }
.ix-row h3 { font-weight: 500; font-size: var(--t-h4, 1.0625rem); }
.ix-row p { color: var(--muted); }
@media (min-width: 760px) { .ix-row { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } .ix-n { grid-row: auto; } }

/* steps rail: one line that fills as the section comes into view; steps sit on it */
.sr { display: grid; gap: 2rem; }
.sr-track { position: relative; }
.sr-line { position: absolute; left: 0; right: 0; top: .45rem; height: 1px; background: var(--hair); }
.sr-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(1); }
html.px-motion .sr[data-sr] .sr-fill { transform: scaleX(0); transition: transform 1.6s var(--ease); }
html.px-motion .sr.is-on .sr-fill { transform: scaleX(1); }
.sr-steps { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sr-steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
@media (max-width: 759px) { .sr-line { left: .45rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .sr-fill { transform-origin: 50% 0; } .sr-step { padding-left: 1.75rem; } .sr-dot { position: absolute; left: 0; } }
.sr-step { position: relative; display: grid; gap: .45rem; align-content: start; }
.sr-dot { width: .9rem; height: .9rem; border-radius: 50%; background: var(--cream, #f0ede6); box-shadow: inset 0 0 0 1.5px var(--ink); margin-bottom: .6rem; }
html.px-motion .sr.is-on .sr-dot { background: var(--ink); transition: background .4s var(--ease) calc(var(--i) * .25s + .3s); }
.sr-step b { font-weight: 500; }
.sr-step p { color: var(--muted); font-size: var(--t-small); }

/* split media: a passage beside a real photo, the photo full height */
.sm { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 960px) { .sm { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .sm.is-flip .sm-ph { order: 2; } }
.sm-ph { position: relative; min-height: 20rem; border-radius: var(--r-card); overflow: hidden; }
.sm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-copy { display: grid; gap: 1rem; align-content: center; padding: clamp(.5rem, .25rem + 1vw, 2rem); }
.sm-copy p { color: var(--muted); max-width: 36rem; }
.sm-copy p:first-of-type { color: var(--fg); font-size: var(--t-lead); line-height: 1.45; }
/* SECTIONS:END */

/* sector service index: the row is the link (stretched), the logo stands in for the number */
.ix-row.is-link { position: relative; }
.ix-row.is-link h3 a { color: inherit; text-decoration: none; }
.ix-row.is-link h3 a::after { content: ""; position: absolute; inset: 0; }
.ix-row.is-link:hover h3 a { text-decoration: underline; text-underline-offset: .2em; }
.ix-row.is-link .ix-n .chip-ico { width: 2.2rem; height: 2.2rem; }
/* drawn hero stages: the story fills the stage instead of floating small in it */
.sh-vis.is-paper .ip-stage > .sty, .sh-vis.is-ink .ip-stage > .sty { zoom: 1.3; }

/* v7b object heroes (Orbit, Mosaic), 2026-11-08: the 16:9 object frame is pushed to one side (inline object-position) and
   the version's story (Orbit feed, Mosaic compare) stands on the free side, centred in that half. Nothing is hidden. */
body[data-v="orbit"] .sh-vis.has-obj > img, body[data-v="mosaic"] .sh-vis.has-obj > img { object-position: 50% 60%; }
html.px-motion body[data-v="orbit"] .sh-vis.has-obj > img, html.px-motion body[data-v="mosaic"] .sh-vis.has-obj > img { animation: obj-drift 20s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes obj-drift { from { scale: 1; } to { scale: 1.05; } }
.sh-vis .ip-stage.is-side { inset: 5% 3% 5rem 50%; }
.sh-vis .ip-stage.is-side.is-l { inset: 5% 50% 5rem 3%; }
.sh-vis .ip-stage.is-side > .sty { width: min(100%, 21.5rem); }
@media (max-width: 599px) { .sh-vis .ip-stage.is-side, .sh-vis .ip-stage.is-side.is-l { inset: 4% 4% 4.4rem; } }

/* Live screens (2026-11-08, heroes.live_screens + prix-v35.js liveScreens): the client's page is drawn into each screen
   of the object photo with a matrix3d, scrolls slowly, and moves with the photo's drift. Hidden until placed. */
.scr-set { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.px-motion body[data-v] .sh-vis.has-obj .scr-set { animation: obj-drift 20s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; opacity: 0; transition: opacity .5s var(--ease); container-type: inline-size; backface-visibility: hidden; }
.scr.is-on { opacity: 1; }
.scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 40%), rgba(70, 45, 20, .05); }
.scr .pg { display: block; width: 100%; height: auto; background: #fff; }
.scr .pg { opacity: 0; transition: opacity .6s var(--ease); } .scr .pg.is-ready { opacity: 1; }   /* the composited photo shows until the page arrives */
html.px-motion .scr .pg { animation: scr-scroll 22s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes scr-scroll { 0%, 12% { transform: none; } 30%, 38% { transform: translateY(calc(var(--d) * .4)); } 58%, 68% { transform: translateY(var(--d)); } 90%, 100% { transform: none; } }
.sh-vis.is-off .scr *, .sh-vis.is-off .scr-set { animation-play-state: paused !important; }
/* TikTok phone: a vertical video playing, the side actions, the caption, a shop card rising; sized in container units */
.scr .tt { position: absolute; inset: 0; color: #fff; font-size: 6cqw; line-height: 1.2; }
.scr .tt-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
html.px-motion .scr .tt-v { animation: tt-kb 9s linear infinite; transform-origin: 50% 45%; }
@keyframes tt-kb { from { transform: scale(1); } to { transform: scale(1.18); } }
.scr .tt::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .25), transparent 22%, transparent 55%, rgba(0, 0, 0, .55)); }
.scr .tt > span { position: absolute; z-index: 2; }
.scr .tt-top { left: 0; right: 0; top: 8cqw; display: flex; justify-content: center; gap: 5cqw; font-size: 6.4cqw; }
.scr .tt-top em { font-style: normal; opacity: .7; } .scr .tt-top b { font-weight: 600; }
.scr .tt-side { right: 3.5cqw; bottom: 34cqw; display: grid; gap: 5cqw; justify-items: center; }
.scr .tt-side span { display: grid; justify-items: center; gap: 1cqw; }
.scr .tt-side svg { width: 10cqw; height: 10cqw; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.scr .tt-side small { font-size: 4.6cqw; }
html.px-motion .scr .tt-side span:first-child svg { animation: tt-like 4.5s var(--ease) infinite; transform-origin: 50% 60%; }
@keyframes tt-like { 0%, 40% { transform: none; color: #fff; } 46% { transform: scale(1.35); color: #fe2c55; } 55%, 100% { transform: none; color: #fe2c55; } }
.scr .tt-cap { left: 5cqw; right: 18cqw; bottom: 30cqw; display: grid; gap: 1.5cqw; font-size: 5.6cqw; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.scr .tt-cap b { font-weight: 600; }
.scr .tt-shop { left: 5cqw; right: 18cqw; bottom: 9cqw; display: flex; align-items: center; gap: 3cqw; padding: 2.5cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .94); color: #111; font-size: 5cqw; }
.scr .tt-shop i { flex: none; width: 11cqw; height: 11cqw; border-radius: 2cqw; background: #d9cfc3; }
.scr .tt-shop span { display: grid; } .scr .tt-shop b { font-weight: 600; } .scr .tt-shop small { color: #fe2c55; font-weight: 600; }
html.px-motion .scr .tt-shop { animation: tt-shop 9s var(--ease) infinite; }
@keyframes tt-shop { 0%, 30% { opacity: 0; transform: translateY(6cqw); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.scr .tt-pr { left: 0; right: 0; bottom: 0; height: 1.2cqw; background: rgba(255, 255, 255, .3); }
.scr .tt-pr i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; }
html.px-motion .scr .tt-pr i { animation: tt-prog 9s linear infinite; }
@keyframes tt-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .scr *, .scr-set { animation: none !important; } }

/* v3.5 (2026-11-06): process steps are a rail, not boxes. Each step owns a hairline segment with its icon as the node;
   the segments fill in order (stepsLine) and stay filled. Two columns on tablet and phone, four on desktop. */
.steps { gap: 2.25rem 0; }
.step { background: none; box-shadow: none; border-radius: 0; padding: 0 1.5rem 0 0; overflow: visible; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 1.25rem; height: 1px; background: var(--hair); }
.step .bar { top: calc(1.25rem - .5px); bottom: auto; height: 2px; right: 0; opacity: 1 !important; }
.step .top { position: relative; z-index: 1; justify-content: flex-start; gap: .7rem; margin-bottom: 1rem; }
.step .top .chip-ico { background: var(--bg, var(--cream)); box-shadow: inset 0 0 0 1px var(--hair); }
.step .top::after { padding: .15rem .45rem; border-radius: 2rem; background: var(--bg, var(--cream)); color: var(--muted); }
.step h3 { max-width: 16rem; }
.step p { max-width: 18rem; }
@media (max-width: 599px) { .step { padding: 0 1rem 0 0; } }

/* About: three rules beside the PX ceramic object (v7b) */
.ab-rules { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .ab-rules { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ab-obj { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--edge); }
.ab-obj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .ab-obj { aspect-ratio: 4 / 3; } }
.ab-rules .ix-row h3 { font: 400 var(--t-h3)/1.2 var(--text); letter-spacing: -.02em; }
/* Mosaic landings on short desktop screens (≤ 800 px tall): the copy tile drops its three ticks so the hero fits */
@media (min-width: 960px) and (max-height: 800px) { body[data-v="mosaic"] .shero .sh-side .lp-bul { display: none; } }
/* About and Tools heroes on 800 px tall desktops: a little less air under the hero so it ends inside the first screen */
@media (min-width: 960px) and (max-height: 820px) { section.ab-hero, section.tl-hero { padding-bottom: 1.25rem; } }

/* ===== v3.5 case covers (owner, 2026-11-08): Prix Studio × client on a calm sky, or on the client's own site in a room ===== */
.cc-cover { position: relative; }
.ccv { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--tint); }
.ccv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ccv-lock { position: relative; display: grid; justify-items: center; gap: .3em; max-width: calc(100% - 2rem); padding: .9em 1.3em 1em; border-radius: var(--r-in);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); color: var(--ink); text-align: center;
  font-size: clamp(.75rem, .62rem + .45vw, .95rem); }
.ccv-px { width: 6.4em; height: auto; flex: none; }
.ccv-lock > i { font-style: normal; line-height: 1; color: var(--g-450); }
.ccv-lg { max-height: 2.2em; max-width: 9em; width: auto; height: auto; object-fit: contain; }
.ccv-lg.is-svg { filter: brightness(0); }
.ccv-wm { font: 500 1.3em/1.1 var(--text); letter-spacing: -.02em; text-wrap: balance; white-space: normal; overflow-wrap: anywhere; }
.ccv-wm.is-anon { font-weight: 400; font-size: 1.05em; color: var(--g-600); }
.ccv.is-room { place-items: end start; }
.ccv.is-room .ccv-lock { display: inline-flex; align-items: center; gap: .55em; margin: .75rem; padding: .5em .9em; border-radius: var(--r-pill); font-size: .78rem; }
.ccv.is-room .ccv-px { width: 5.2em; }
.ccv.is-room .ccv-wm { font-size: 1.1em; white-space: nowrap; }
.ccard:hover .ccv-bg, .cz:hover .ccv-bg { transform: scale(1.04); }

/* ===== v3.5 one footer for all versions (owner, 2026-11-08) ===== */
.px-header .bar { max-width: var(--max); }   /* header, body and footer share one gutter in every version */
.f-one { background: var(--ink); color: var(--white); --line: rgba(255, 255, 255, .1); }
.f-one .cta { border-bottom-color: var(--line); }
.ft-topics { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.ft-topic { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 1.05rem 0 .85rem; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .86); font: inherit; font-size: .9375rem; cursor: pointer; transition: background-color .3s, color .3s, transform .3s var(--ease); }
.ft-topic:hover { background: rgba(255, 255, 255, .16); color: var(--white); }
.ft-topic[aria-checked="true"] { background: var(--white); color: var(--ink); }
.ft-topic .lm-marks { display: inline-flex; gap: .2rem; }
.ft-topic .lm-marks img, .ft-topic .lm-marks svg { width: 1.05rem; height: 1.05rem; }
.ft-topic:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.ft-go { display: grid; gap: .6rem; justify-items: start; }
.ft-go .hero-note { color: rgba(255, 255, 255, .55); }
.f-us { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 2.5rem; padding-top: var(--sp-tight); }
.f-us h3 { font: 500 .75rem/1.3 var(--text); color: rgba(255, 255, 255, .5); margin-bottom: .45rem; }
.f-us .t-small { color: rgba(255, 255, 255, .72); max-width: 28rem; }
.f-us .f-mail a { color: var(--white); text-decoration: none; }
.f-soc { display: flex; gap: .4rem; margin-left: auto; }
.f-one .soc { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--white); box-shadow: none; transition: background-color .3s, color .3s, transform .4s var(--ease); }
.f-one .soc svg { width: 1.05rem; height: 1.05rem; }
.f-one .soc:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }
.f-one .cols { display: grid; gap: 0 var(--gap); grid-template-columns: minmax(0, 1fr); padding-block: 1.5rem var(--sp-tight); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .f-one .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem var(--gap); } }
@media (min-width: 1100px) { .f-one .cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.f-col { display: grid; gap: 1.6rem; align-content: start; }
.f-g summary { list-style: none; cursor: default; }
.f-g summary::-webkit-details-marker { display: none; }
.f-g h3 { font: 500 .75rem/1.3 var(--text); letter-spacing: .01em; color: var(--white); margin: 0 0 .55rem; }
.f-g ul { display: grid; }
.f-one .cols a { display: flex; width: 100%; min-height: 2.05rem; align-items: center; padding-right: .5rem; box-sizing: border-box; font-size: .8125rem; line-height: 1.35; color: rgba(255, 255, 255, .62); text-decoration: none;
  transition: opacity .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.f-one .cols a:hover, .f-one .cols a:focus-visible { color: var(--white); text-decoration: none; }
@media (hover: hover) {   /* Apple-like focus: the link under the pointer stays, every other link steps back */
  .f-one [data-dim]:has(a:hover) a:not(:hover), .f-one [data-dim]:has(a:focus-visible) a:not(:focus-visible) { opacity: .35; }
  .f-one .cols a:hover { transform: translateX(3px); }
  .f-g ul li { display: block; }
}
@media (max-width: 759px) {   /* phones: each group folds like Apple's footer */
  .f-one .cols { padding-top: .5rem; }
  .f-col { display: contents; }   /* the groups line up in sitemap order, not column order */
  .f-g { order: var(--o); }
  .f-g { border-bottom: 1px solid var(--line); }
  .f-g summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; cursor: pointer; }
  .f-g summary h3 { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .86); }
  .f-g summary::after { content: ""; width: .6rem; height: .6rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15rem; transition: rotate .35s var(--ease); opacity: .7; }
  .f-g[open] summary::after { rotate: 225deg; translate: 0 .15rem; }
  .f-g ul { padding-bottom: .75rem; }
  .f-soc { margin-left: 0; }
}
/* the wordmark under a soft spotlight that follows the pointer (drifts by itself on touch; still under reduced motion) */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 28%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.f-mark { padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.f-mark-in { position: relative; opacity: 0; transform: translateY(14%); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.f-mark.is-in .f-mark-in { opacity: 1; transform: none; }
.f-mark svg { display: block; width: 100%; height: auto; }
.f-mark-base { fill: rgba(255, 255, 255, .13); }
.f-mark-lit { position: absolute; inset: 0; fill: var(--white);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 9%, transparent 26%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 9%, transparent 26%); transition: --mx .5s var(--ease), --my .5s var(--ease); }
.f-mark.is-auto.is-play .f-mark-in { animation: fm-drift 11s ease-in-out infinite alternate; }
@keyframes fm-drift { 0% { --mx: 6%; --my: 40%; } 50% { --my: 62%; } 100% { --mx: 94%; --my: 45%; } }
@media (prefers-reduced-motion: reduce) { .f-mark-in { opacity: 1; transform: none; } .f-mark-base { fill: var(--white); } .f-mark-lit { display: none; } .f-mark.is-auto.is-play .f-mark-in { animation: none; } }
.f-one .base { border-top: 0; color: rgba(255, 255, 255, .5); }
.f-one .base a { color: rgba(255, 255, 255, .7); }

/* Lead wizard (2026-11-08): three steps, a bar that fills with the required fields, general services that open their
   sub-services, a "no website yet" switch and dictation. Cream/white/black only; hairlines, no accent. */
.px-lead.is-wizard { width: min(46rem, calc(100% - 1.5rem)); }
.is-wizard .lm-form { gap: 1.25rem; }
.lw-top { position: sticky; top: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2rem)); z-index: 2; display: grid; gap: .9rem; margin: calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2rem)) calc(-1 * clamp(1.25rem, 1rem + 1.5vw, 2rem)) 0; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 1.5vw, 2rem) 1rem; padding-right: 4rem; background: var(--white); box-shadow: 0 1px 0 var(--hair); }
.lw-top h2 { margin: 0; }
.lw-steps { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.lw-steps li { flex: 1; display: flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: 0 .8rem; border-radius: var(--r-ui); background: var(--paper); color: var(--soft); font-size: var(--t-small); cursor: pointer; transition: background-color .25s, color .25s; }
.lw-steps li span { font-variant-numeric: tabular-nums; color: inherit; opacity: .7; }
.lw-steps li.is-done { color: var(--ink); }
.lw-steps li.is-on { background: var(--ink); color: var(--white); }
.lw-prog { display: grid; gap: .4rem; }
.lw-prog span { font-size: var(--t-small); color: var(--muted); }
.lw-prog i { display: block; height: 4px; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.lw-prog b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.lw-step { display: grid; gap: 1.1rem; }
.lw-step[hidden] { display: none; }
.lw-lead { margin: 0; font-weight: 500; }
.lw-lead .mute, .lw-subh span, .lw-f label span { color: var(--soft); font-weight: 400; }
.lw-grid { display: grid; gap: .9rem; }
@media (min-width: 600px) { .lw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lw-f.is-wide { grid-column: 1 / -1; } }
.lw-f { display: grid; gap: .45rem; align-content: start; }
.lw-f > label:first-child { font: 500 var(--t-small)/1.3 var(--text); }
.lw-f input:not([type=checkbox]):not([type=radio]), .lw-f select, .lw-f textarea, .lw-tel select { display: block; width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font: 400 1rem/1.4 var(--text); color: var(--ink); transition: box-shadow .25s, background-color .25s, opacity .25s; }
.lw-f select, .lw-tel select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: .75rem; }
.lw-f textarea { resize: vertical; min-height: 7.5rem; padding-bottom: 3.4rem; }
.lw-f input:focus, .lw-f select:focus, .lw-f textarea:focus { outline: none; background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lw-f [aria-invalid="true"] { background-color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px rgba(0, 0, 0, .08); }
.lw-f input:disabled { opacity: .45; }
.lw-f.is-off > label:first-child { color: var(--soft); }
.lw-tel { display: grid; grid-template-columns: 9.4rem minmax(0, 1fr); gap: .4rem; }
.lw-switch { display: inline-flex; align-items: center; gap: .6rem; width: max-content; font-size: var(--t-small); color: var(--muted); cursor: pointer; }
.lw-switch input { position: absolute; opacity: 0; pointer-events: none; }
.lw-switch span { position: relative; width: 2.3rem; height: 1.35rem; border-radius: 1rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); transition: background-color .25s; }
.lw-switch span::after { content: ""; position: absolute; top: .175rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: translate .25s var(--ease); }
.lw-switch input:checked + span { background: var(--ink); }
.lw-switch input:checked + span::after { translate: .9rem 0; }
.lw-switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lw-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .45rem; }
.lw-svc { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 3.2rem; padding: .55rem 2.4rem .55rem .8rem; border: 0; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: 400 var(--t-small)/1.25 var(--text); text-align: left; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.lw-svc .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.lw-svc i { position: absolute; right: .8rem; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -.525rem; border-radius: .3rem; box-shadow: inset 0 0 0 1.5px var(--hair); }
.lw-svc:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.lw-svc[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
.lw-svc[aria-pressed="true"] i { background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.9 2.9 6.1-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat; box-shadow: none; }
.lw-svc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lw-req { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lw-sub { display: grid; gap: .7rem; padding: 1rem; border-radius: var(--r-ui); background: var(--cream, var(--paper)); box-shadow: inset 0 0 0 1px var(--hair); animation: lw-open .35s var(--ease); }
.lw-sub[hidden] { display: none; }
@keyframes lw-open { from { opacity: 0; translate: 0 -.4rem; } }
.lw-subh { margin: 0; font-weight: 500; font-size: var(--t-small); }
.lw-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lw-chip { position: relative; }
.lw-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lw-chip span { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 .85rem; border-radius: 2rem; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--t-small); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.lw-chip:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.lw-chip input:checked + span { background: var(--ink); color: var(--white); box-shadow: none; }
.lw-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.lw-step[data-step="3"] > .lw-chips .lw-chip span { background: var(--paper); }
.lw-step[data-step="3"] > .lw-chips .lw-chip input:checked + span { background: var(--ink); }
.lw-tech { max-width: 22rem; }
.lw-ta { position: relative; }
.lw-voice { position: absolute; left: .55rem; right: .55rem; bottom: .55rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; pointer-events: none; }
.lw-voice[hidden] { display: none; }
.lw-voice > * { pointer-events: auto; }
.lw-vlang { display: inline-flex; padding: .15rem; border-radius: 2rem; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.lw-vlang button { min-width: 2.2rem; min-height: 1.9rem; padding: 0 .5rem; border: 0; border-radius: 2rem; background: none; color: var(--muted); font: 500 .78rem/1 var(--text); cursor: pointer; }
.lw-vlang button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.lw-mic { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.2rem; padding: 0 .9rem 0 .7rem; border: 0; border-radius: 2rem; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: 500 var(--t-small)/1 var(--text); cursor: pointer; }
.lw-mic i { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ink); }
.lw-mic[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
.lw-mic[aria-pressed="true"] i { background: var(--white); animation: lw-pulse 1.1s ease-in-out infinite; }
@keyframes lw-pulse { 50% { box-shadow: 0 0 0 .35rem rgba(255, 255, 255, .25); } }
.lw-f small { color: var(--soft); font-size: .8rem; }
.lw-f small[hidden] { display: none; }
.lw-sum { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--r-ui); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.lw-sum:empty { display: none; }
.lw-sumh { margin: 0; font-weight: 500; font-size: var(--t-small); }
.lw-sum dl { display: grid; gap: .35rem; margin: 0; }
.lw-sum dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; font-size: var(--t-small); }
.lw-sum dt { color: var(--soft); }
.lw-sum dd { margin: 0; overflow-wrap: anywhere; }
.lw-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .25rem; }
.lw-back { min-height: 2.75rem; padding: 0 .4rem; border: 0; background: none; color: var(--muted); font: 500 var(--t-small)/1 var(--text); cursor: pointer; }
.lw-back:hover { color: var(--ink); }
@media (max-width: 599px) {
  .lw-steps li { justify-content: center; padding: 0 .4rem; font-size: .78rem; }
  .lw-steps li span { display: none; }
  .lw-svcs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lw-svc { padding-right: .7rem; min-height: 3.6rem; }
  .lw-svc i { display: none; }
  .lw-svc .icon { display: none; }
  .lw-tel { grid-template-columns: 7.4rem minmax(0, 1fr); }
  .lw-sum dl div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}
@media (prefers-reduced-motion: reduce) { .lw-prog b, .lw-sub { transition: none; animation: none; } }

/* Client logos are normalized SVGs (2026-11-08): shown in ink unless the mark needs its own colours (white-on-colour). */
.lchip img.is-color, .logowall img.is-color, .marquee img.is-color, [class*="sl-"] img.is-color, img.is-color { filter: none !important; opacity: 1 !important; }

/* ===== v3.5 sales sections library (sales.py, 2026-11-08). The CSS lives here only. ===== */
.sl-see { margin-top: .25rem; }
.sl-big { font: 400 clamp(3.5rem, 2rem + 6vw, 7rem)/.9 var(--text); letter-spacing: -.05em; }
/* logos */
.sl-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
@media (min-width: 640px) { .sl-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sl-lines { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sl-lines li { display: grid; place-items: center; height: 6.5rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transition: background-color .4s var(--ease); }
.sl-lines li:hover { background: var(--white); }
.sl-lines img, .sl-inkband img, .sl-lmini img { width: calc(var(--w, 5rem) * .95); max-height: 2.2rem; height: auto; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .9; }
.sl-lines img.is-color, .sl-lmini img.is-color { filter: none; opacity: 1; }
.sl-inkband { padding: 1.75rem 0; border-radius: var(--r-card); background: var(--ink); overflow: hidden; }
.sl-inkband .sl-ik { display: grid; place-items: center; min-width: 10rem; height: 3.5rem; padding-inline: 1.5rem; }
.sl-inkband img { filter: grayscale(1) brightness(0) invert(1); opacity: .9; }
.sl-inkband img.is-color { filter: grayscale(1) invert(1); }
.sl-lsplit { display: grid; gap: var(--gap) clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) { .sl-lsplit { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* stats */
.sl-srow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
@media (min-width: 900px) { .sl-srow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-srow li { display: grid; gap: .4rem; padding: .25rem clamp(1rem, .5rem + 1.5vw, 2rem); border-left: 1px solid var(--hair); }
.sl-srow b, .sl-scards b, .sl-sink li b, .sl-ssplit li b, .sl-sbento .sl-bt > b { font: 400 var(--t-num)/1 var(--text); letter-spacing: -.04em; }
.sl-srow span, .sl-scards span, .sl-ssplit span, .sl-sbento span, .sl-sink li span { color: var(--muted); font-size: var(--t-small); }
.sl-scards { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sl-scards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-scards li { display: grid; gap: .45rem; align-content: start; padding: clamp(1.2rem, 1rem + 1vw, 1.75rem); }
.sl-scards p, .sl-sbento p { font-size: var(--t-small); color: var(--muted); }
.sl-sink { display: grid; gap: 2rem; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: var(--r-card); background: var(--ink); color: var(--white); --muted: var(--g-on-ink); }
@media (min-width: 900px) { .sl-sink { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.sl-huge { font: 400 clamp(5rem, 3rem + 9vw, 11rem)/.85 var(--text); letter-spacing: -.06em; }
.sl-sink .t-lead { color: var(--g-on-ink); max-width: 28rem; margin-top: 1rem; }
.sl-sink ul { display: grid; gap: 1.25rem; }
.sl-sink li { display: grid; gap: .2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.sl-ssplit { display: grid; gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .sl-ssplit { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.sl-say { font: 400 var(--t-h2)/1.15 var(--text); letter-spacing: -.03em; color: var(--muted); text-wrap: balance; }
.sl-say b { color: var(--fg); font-weight: 400; }
.sl-ssplit ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.sl-ssplit li { display: grid; gap: .3rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.sl-sbento { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sl-sbento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sl-bt.is-big { grid-column: span 2; grid-row: span 2; } }
.sl-bt { display: grid; gap: .4rem; align-content: start; padding: clamp(1.2rem, 1rem + 1vw, 1.75rem); }
.sl-bt.is-big { align-content: space-between; min-height: 16rem; }
.sl-lmini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; align-items: center; margin-top: 1rem; }
.sl-tl { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 900px) { .sl-tl { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sl-tl::before { content: ""; position: absolute; left: 0; right: 0; top: .45rem; height: 1px; background: var(--hair); } }
.sl-tl li { position: relative; display: grid; gap: .35rem; padding-top: 1.6rem; }
.sl-tl i { position: absolute; top: 0; left: 0; width: .9rem; height: .9rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 .3rem var(--bg, var(--paper)); }
.sl-tl b { font: 400 var(--t-num-sm)/1 var(--text); letter-spacing: -.03em; }
.sl-tl span { color: var(--muted); font-size: var(--t-small); }
/* partners */
.sl-pink { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; padding: clamp(1.75rem, 1rem + 3vw, 3.25rem); border-radius: var(--r-card); background: var(--ink); color: var(--white); }
@media (min-width: 760px) { .sl-pink { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 759px) { .sl-pink li:last-child { grid-column: 1 / -1; } }
.sl-pink li { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.sl-pink .brand { width: 2.6rem; height: 2.6rem; padding: .45rem; border-radius: .7rem; background: var(--white); box-sizing: border-box; }
.sl-pink b { font-weight: 500; } .sl-pink span { font-size: var(--t-small); color: var(--g-on-ink); }
/* logo strip under every hero: logos only */
.lstrip { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1rem, .8rem + 1vw, 1.5rem); }
.lstrip + .section { padding-top: calc(var(--sp-section) * .8); }
.ls-cap { font-size: var(--t-small); color: var(--muted); }
.ls-cap b { color: var(--fg); font-weight: 500; }
.lstrip .ls-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: .5rem; }
.ls-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 2rem; align-items: center; padding-block: 1.1rem; border-block: 1px solid var(--hair); }
@media (min-width: 900px) { .ls-split { grid-template-columns: 15.5rem minmax(0, 1fr) auto; } }
.ls-run { min-width: 0; }
.ls-bare { display: grid; place-items: center; height: 3rem; min-width: 8.5rem; padding-inline: 1.25rem; }
.ls-bare img { width: calc(var(--w, 5rem) * .9); max-height: 2rem; height: auto; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .9; }
.ls-tile { display: grid; gap: .9rem; padding: 1.25rem 0 1.1rem; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.ls-th { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-inline: 1.5rem; }
.ls-tile { padding-block: .6rem 1rem; gap: .35rem; }
.ls-tile .lchip { background: var(--paper); }
.sl-prow { justify-content: flex-start; }
.sl-pcards { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sl-pcards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 899px) { .sl-pcards li:last-child { grid-column: 1 / -1; } }
.sl-pcards li { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; }
.sl-pcards .brand { width: 1.6rem; height: 1.6rem; }
.sl-pcards b { font-weight: 500; } .sl-pcards span { font-size: var(--t-small); color: var(--muted); }
/* testimonials */
.sl-tfeat { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .sl-tfeat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.sl-tfeat .vcard, .sl-tbento .vcard, .sl-tpair .vcard, .sl-tside .vcard { width: auto; }
.sl-tq { display: grid; gap: var(--gap); }
.sl-tbento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-tbento > :first-child { grid-column: span 2; }
@media (min-width: 1000px) { .sl-tbento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sl-tbento > :first-child { grid-column: span 2; grid-row: span 2; } }
.sl-tpair { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .sl-tpair { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-tbig { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .sl-tbig { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.sl-tbig blockquote p { font: 400 var(--t-h2)/1.2 var(--text); letter-spacing: -.025em; text-wrap: pretty; }
.sl-tbig figcaption { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: var(--t-small); color: var(--muted); }
.sl-tbig figcaption b { color: var(--fg); font-weight: 500; }
.sl-tside { grid-row: span 2; }
@media (min-width: 900px) { .sl-tside { grid-column: 2; grid-row: 1 / span 2; } }
/* reviews */
.sl-rband { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sl-rband { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-rsrc { display: grid; gap: .6rem; align-content: space-between; padding: 1.4rem; text-decoration: none; color: var(--fg); }
.sl-rsrc .brand { width: 1.6rem; height: 1.6rem; } .sl-rsrc b { font: 400 var(--t-h3)/1.2 var(--text); } .sl-rsrc span { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--t-small); color: var(--muted); }
.sl-rmas { columns: 1; column-gap: var(--gap); }
@media (min-width: 760px) { .sl-rmas { columns: 2; } }
@media (min-width: 1100px) { .sl-rmas { columns: 3; } }
.sl-rmas .qcard { break-inside: avoid; margin-bottom: var(--gap); }
.sl-rmq li { width: min(82vw, 24rem); flex: none; }
.sl-rmq .qcard { height: 100%; }
.sl-rsplit { display: grid; gap: var(--gap) clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 900px) { .sl-rsplit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .sl-rsum { position: sticky; top: calc(var(--header) + 1.5rem); } }
.sl-rsum { display: grid; gap: 1rem; }
.sl-rstack { display: grid; gap: var(--gap); }
@media (min-width: 1100px) { .sl-rstack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-rstack .qcard, .sl-rink .qcard, .sl-rband .qcard, .sl-rmas .qcard, .sl-tq .qcard, .sl-rmq .qcard { width: auto; max-width: none; }
.sl-rmarks { display: flex; gap: .6rem; }
.sl-rmarks .brand { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: .8rem; background: var(--white); box-shadow: var(--shadow); box-sizing: border-box; }
.sl-rink { display: grid; gap: var(--gap); padding: clamp(1rem, .8rem + 1vw, 1.5rem); border-radius: var(--r-card); background: var(--ink); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sl-rink { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* services */
.sl-six { border-top: 1px solid var(--hair); }
.sl-six a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: baseline; padding: clamp(1rem, .8rem + 1vw, 1.6rem) 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--fg); transition: padding .4s var(--ease), color .3s; }
@media (min-width: 900px) { .sl-six a { grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 6fr) auto; } }
.sl-six b { font: 400 var(--t-h2)/1.1 var(--text); letter-spacing: -.03em; }
.sl-six span:not(.ix-n) { color: var(--muted); font-size: var(--t-small); grid-column: 2; }
@media (min-width: 900px) { .sl-six span:not(.ix-n) { grid-column: auto; } }
.sl-six .icon { width: 1.1rem; height: 1.1rem; grid-row: 1; grid-column: -1; align-self: center; transition: transform .4s var(--ease); }
@media (hover: hover) { .sl-six:has(a:hover) a:not(:hover) { color: var(--soft); } .sl-six a:hover { padding-left: .75rem; } .sl-six a:hover .icon { transform: translateX(4px); } }
.sl-stiles { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sl-stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sl-stiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-stile { display: grid; gap: .8rem; align-content: start; padding: 1.25rem; }
.sl-sth { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--fg); }
.sl-sth b { flex: 1; font-weight: 500; } .sl-sth .icon { width: .9rem; height: .9rem; }
.sl-stile ul { display: grid; } .sl-stile ul a { display: block; padding: .4rem 0; font-size: var(--t-small); color: var(--muted); text-decoration: none; transition: color .3s; }
.sl-stile ul a:hover { color: var(--fg); }
.sl-scloud { display: grid; gap: 1.5rem; }
.sl-sc { display: grid; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .sl-sc { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; } }
.sl-sc b { font: 400 var(--t-h3)/1.2 var(--text); } .sl-sc div { display: flex; flex-wrap: wrap; gap: .4rem; }
.sl-sc .pill { text-decoration: none; transition: box-shadow .3s; } .sl-sc .pill:hover { box-shadow: inset 0 0 0 1px var(--ink); }
/* cases */
.sl-crows { border-top: 1px solid var(--hair); }
.sl-crows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--fg); }
@media (min-width: 900px) { .sl-crows a { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1.5fr) auto; } }
.sl-crows b { font: 400 var(--t-h3)/1.2 var(--text); } .sl-crows span { color: var(--muted); font-size: var(--t-small); }
.sl-crows .icon { width: 1rem; height: 1rem; }
@media (hover: hover) { .sl-crows:has(a:hover) a:not(:hover) { opacity: .45; } .sl-crows a { transition: opacity .35s var(--ease); } }

/* Section heads: lead copy plus the "see all" link */
.sl-lead { display: grid; gap: .5rem; justify-items: start; }
.sl-see .link { min-height: 2.25rem; }

/* Mega menus fit the first screen at every laptop height (owner, 2026-11-08: "full gözükmeli, kesilmemeli").
   Studio: denser link rows, the technology and sector rows sit beside their labels, "Tüm hizmetler" on the right.
   Below 700 px of height the panel scrolls inside itself instead of running off the screen. */
.mega-studio .mm-col { padding: .45rem .45rem .35rem; }
.mega-studio .mm-h { min-height: 2.3rem; margin-bottom: .1rem; }
.mega-studio .mm-col a:not(.mm-h) { min-height: 2rem; }
.mm-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.5rem; align-items: center; padding: .55rem .8rem .55rem 1rem; }
.mm-strip > div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .75rem; align-items: center; grid-column: 1; }
.mm-strip > .link { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
.mm-pills { gap: .25rem; }
.mm-pills a { min-height: 1.85rem; }
@media (max-height: 780px) {
  .mega-studio .mm-col a:not(.mm-h) { min-height: 1.8rem; }
  .mega-studio .mm-h { min-height: 2.1rem; }
}
@media (max-height: 700px) {
  .mega-studio .mm-col a:not(.mm-h) { min-height: 1.7rem; }
  .mega { max-height: calc(100dvh - var(--header) - .5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-card); }
}

/* Sales sections on phones: no endless stacks (2026-11-08) */
@media (max-width: 759px) {
  .sl-sbento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-bt.is-big { grid-column: span 2; min-height: 0; }
  .sl-bt p { font-size: var(--t-micro); }
  .sl-rstack .qcard, .sl-rmas .qcard, .sl-rink .qcard, .sl-rband .qcard { min-height: 0; height: auto; }
  .sl-rstack .qcard:nth-child(n+3), .sl-rmas .qcard:nth-child(n+4), .sl-tpair > :nth-child(n+3) { display: none; }
  .sl-srow b, .sl-scards b, .sl-ssplit li b, .sl-sbento .sl-bt > b { font-size: clamp(2rem, 1.6rem + 2vw, 2.6rem); }
}

/* ---------- v3.5 swap rows + Türkiye scenes (2026-11-09; lp_parts.rows_swap, tr_infra.py) ----------
   Each row owns its visual: the active row's photo and looping interface card show beside the list. Rows take turns
   (a hairline fills under the active one); hover, focus or tap switches. The resting state is the finished scene, so
   reduced motion and no-JS show the outcome; with motion each scene plays from its first frame when its row turns on. */
.svr-split.is-swap { align-items: stretch; }
@media (min-width: 900px) { .svr-split.is-swap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .svr-split.is-swap .svr-vis { position: relative; top: auto; } }
.svr-list { align-self: start; padding: .35rem 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.is-swap .svr { display: block; padding: 0 clamp(1.1rem, .9rem + .8vw, 1.6rem); border-top: 1px solid var(--line); cursor: pointer; outline-offset: -3px; }
.is-swap .svr:first-child { border-top: 0; }
.svr-top { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: 1.15rem 0; }
.svr-n { font-size: var(--t-micro); color: var(--soft); font-variant-numeric: tabular-nums; }
.is-swap .svr h3 { font: 400 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.3 var(--text); letter-spacing: -.015em; }
.svr-dot { width: .5rem; height: .5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--g-350); transition: background-color .3s, box-shadow .3s; }
.svr.is-on .svr-dot { background: var(--ink); box-shadow: none; }
.svr-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.svr-more > div { min-height: 0; overflow: hidden; padding-left: 2.6rem; }
.svr.is-on .svr-more { grid-template-rows: 1fr; }
.svr.is-on .svr-more > div { padding-bottom: 1.3rem; }
.is-swap .svr p { margin: 0; color: var(--muted); font-size: var(--t-body); max-width: 34em; }
.svr-ticks { display: grid; gap: .45rem; margin-top: .9rem; font-size: var(--t-small); color: var(--fg); }
.svr-ticks li { display: flex; align-items: center; gap: .55rem; }
.svr-ticks svg { width: .95rem; height: .95rem; flex: none; }
.is-swap .svr:not(.is-on):hover h3 { color: var(--fg); }
.is-swap .svr:not(.is-on) h3 { color: var(--g-700); }
.svr-split.is-swap .svr-vis { aspect-ratio: auto; min-height: clamp(22rem, 18rem + 14vw, 34rem); background: var(--tint); }
.svr-panes { position: absolute; inset: 0; }
/* Apple-style player: dots, the active one a pill that fills with the scene's time, then play / pause */
.mc { position: absolute; left: 50%; bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: .5rem; transform: translateX(-50%); }
.mc-dots { display: flex; align-items: center; gap: .15rem; padding: .55rem .7rem; border-radius: 2rem; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--edge); }
.mc-dot { display: grid; place-items: center; width: 1rem; height: 1rem; padding: 0; border: 0; background: none; cursor: pointer; transition: width .45s var(--ease); }
.mc-dot i { display: block; width: .45rem; height: .45rem; border-radius: 1rem; background: rgba(0, 0, 0, .28); overflow: hidden; position: relative; transition: width .45s var(--ease); }
.mc-dot.is-on { width: 2.6rem; }
.mc-dot.is-on i { width: 2.2rem; }
.mc-dot.is-on i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: none; transform-origin: 0 50%; }
html.px-motion .is-swap:not(.is-paused) .mc-dot.is-on i::after { animation: svr-prog var(--swap, 5.6s) linear both; }
.is-swap.is-off .mc-dot i::after { animation-play-state: paused !important; }
.mc-play { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--edge); color: var(--ink); cursor: pointer; }
.mc-play svg { width: .95rem; height: .95rem; }
.mc-play .i-play, .is-paused .mc-play .i-pause { display: none; }
.is-paused .mc-play .i-play { display: block; }
@keyframes svr-prog { from { transform: scaleX(0); } to { transform: none; } }
.svr-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.svr-pane.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.svr-pane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.px-motion .svr-pane > img { transform: scale(1.05); transition: transform 7s var(--ease); }
html.px-motion .svr-pane.is-on > img { transform: none; }
.svr-scene { position: absolute; inset: 0 0 3.5rem; display: grid; place-items: center; padding: 6% 6% 0; }
.is-swap.is-off .svr-pane *, .is-swap.is-paused .svr-pane * { animation-play-state: paused !important; }
.svr-split.is-swap .svr-vis { container-type: inline-size; }
.tri { width: min(100%, 24.5em); font-size: min(.8rem, 3.9cqw); line-height: 1.35; color: var(--ink); }
.tri-card { display: grid; gap: .6em; padding: .95em; border-radius: 1em; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-lg); }
.tri-hd { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; }
.tri-hd b { font-weight: 500; font-size: .9em; letter-spacing: -.01em; }
.tri-hd span { color: var(--g-600); font-size: .72em; }
.tri small { display: block; color: var(--g-600); font-size: .7em; }
.tri b { font-weight: 500; }
.tri-ok { display: flex; align-items: center; gap: .6em; padding: .55em .65em; border-radius: .75em; background: var(--ink); color: var(--white); }
.tri-ok small { color: var(--g-on-ink); }
.tri .tk { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--white); color: var(--ink); flex: none; }
.tri .tk svg, .tri .tk .icon { width: .85em; height: .85em; }
/* ödeme */
.pay-sum { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .55em; border-bottom: 1px solid var(--hair); }
.pay-sum b { font-size: 1.15em; font-weight: 400; letter-spacing: -.02em; }
.pay-cc { display: flex; align-items: center; gap: .55em; padding: .5em .6em; border-radius: .6em; background: var(--tint); }
.pay-cc i { width: 1.55em; height: 1.05em; border-radius: .22em; background: linear-gradient(135deg, #1c1c1c, #555); flex: none; }
.pay-cc em { margin-left: auto; font-style: normal; color: var(--g-600); }
.pay-inst { display: grid; gap: .28em; }
.pay-inst li { display: flex; justify-content: space-between; gap: .5em; padding: .42em .6em; border-radius: .55em; box-shadow: inset 0 0 0 1px var(--hair); }
.pay-inst b { font-weight: 400; color: var(--g-600); }
.pay-inst li.pk { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); }
.pay-3d { display: grid; gap: .3em; color: var(--g-700); }
.pay-3d i { display: block; height: .25em; border-radius: 1em; background: var(--g-150); overflow: hidden; }
.pay-3d u { display: block; height: 100%; background: var(--ink); }
/* kargo */
.sh-bc { display: flex; gap: 2px; height: 1.5em; }
.sh-bc i { width: calc(var(--w) * 1.5px); background: var(--ink); }
.sh-st { display: grid; gap: .05em; }
.sh-st li { display: flex; gap: .6em; align-items: center; padding: .28em 0; }
.sh-st .dt { display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--ink); color: var(--white); flex: none; }
.sh-st .dt svg { width: .7em; height: .7em; }
.sh-st small { display: inline; margin-left: .35em; }
/* fatura */
.iv-to { padding-bottom: .5em; border-bottom: 1px solid var(--hair); }
.iv-ln { display: grid; gap: .3em; }
.iv-ln li { display: flex; justify-content: space-between; gap: .5em; }
.iv-ln b { font-weight: 400; }
.iv-ln li.tot { padding-top: .4em; border-top: 1px solid var(--hair); }
.iv-ln li.tot b { font-weight: 500; font-size: .95em; }
.iv-stamp { justify-self: end; margin-top: -.2em; }
.iv-stamp span { display: inline-block; padding: .3em .6em; border: 1.5px solid var(--ink); border-radius: .4em; font-size: .7em; font-weight: 500; letter-spacing: .02em; transform: rotate(-5deg); }
/* pazaryeri */
.mk-sale { display: flex; align-items: center; gap: .6em; padding: .5em .6em; border-radius: .65em; background: var(--tint); }
.mk-sale .pl { padding: .2em .45em; border-radius: .35em; background: var(--ink); color: var(--white); font-size: .68em; font-weight: 500; }
.mk-rows { display: grid; gap: .1em; }
.mk-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6em; padding: .32em 0; border-top: 1px solid var(--hair); }
.mk-rows li:first-child { border-top: 0; }
.mk-rows .n { display: grid; height: 1.15em; overflow: hidden; font-size: .95em; line-height: 1.15; text-align: right; }
.mk-rows .n i { font-style: normal; transform: translateY(-100%); }
.mk-rows .sy { display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--ink); color: var(--white); }
.mk-rows .sy svg { width: .65em; height: .65em; }
/* motion: every scene starts from its first frame when its row turns on (fill both: the delay shows frame 0) */
html.px-motion .svr-pane.is-on .tri-ok { animation: tri-in .5s var(--ease) both; animation-delay: 3.4s; }
html.px-motion .svr-pane.is-on .pay-inst li.pk { animation: pay-pick .35s var(--ease) both .9s; }
html.px-motion .svr-pane.is-on .pay-3d u { animation: pay-3d 1.3s var(--ease-io) both 1.6s; }
html.px-motion .svr-pane.is-on .sh-st li { animation: sh-on .4s var(--ease) both; animation-delay: calc(var(--i) * .7s + .4s); }
html.px-motion .svr-pane.is-on .iv-ln li { animation: tri-in .45s var(--ease) both; animation-delay: calc(var(--i) * .55s + .4s); }
html.px-motion .svr-pane.is-on .iv-stamp span { animation: iv-stamp .45s cubic-bezier(.3, 1.6, .5, 1) both 2.3s; }
html.px-motion .svr-pane.is-on .mk-sale { animation: tri-in .5s var(--ease) both .4s; }
html.px-motion .svr-pane.is-on .mk-rows .n i { animation: mk-n .5s var(--ease) both; animation-delay: calc(var(--i) * .35s + 1.3s); }
html.px-motion .svr-pane.is-on .mk-rows .sy { animation: mk-sy .35s var(--ease) both; animation-delay: calc(var(--i) * .35s + 1.5s); }
@keyframes tri-in { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes pay-pick { from { box-shadow: inset 0 0 0 1px var(--hair); background: transparent; } to { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); } }
@keyframes pay-3d { from { transform: scaleX(0); } to { transform: none; } }
@keyframes sh-on { from { opacity: .35; } to { opacity: 1; } }
@keyframes iv-stamp { from { opacity: 0; transform: rotate(-5deg) scale(1.5); } to { opacity: 1; transform: rotate(-5deg); } }
@keyframes mk-n { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes mk-sy { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.pay-3d u { transform-origin: 0 50%; }
@media (max-width: 899px) { .svr-split.is-swap .svr-vis { min-height: 0; aspect-ratio: 4 / 4.4; } }

/* ---------- v3.5 live SEO article (2026-11-09; seo_inject.py) ----------
   The page's full live prix-studio.com text below the sales part. Apple's long-text pattern: every H2 is a "+" pill and
   the pills together read as the page's contents; one opens at a time into its text (the text is in the HTML). */
.lv { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .lv { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); } .lv-side { position: sticky; top: calc(var(--header) + 1.5rem); } }
.lv-side { display: grid; gap: 1rem; align-content: start; }
.lv-side p { color: var(--muted); max-width: 34em; }
.lv-side p:first-child { font: 400 var(--t-lead)/1.5 var(--text); color: var(--fg); }
.lv-side p.lv-meta { font-size: var(--t-small); color: var(--soft); }
.lv-all { justify-self: start; display: inline-flex; align-items: center; padding: .7rem 1.1rem; border: 0; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--edge); font: 500 var(--t-small)/1 var(--text); cursor: pointer; }
.lv-all .c, .lv.is-all .lv-all .o { display: none; }
.lv.is-all .lv-all .c { display: inline; }
.lv-acc { display: grid; gap: .6rem; min-width: 0; }
.lv-sec { border-radius: 1.6rem; background: var(--card); box-shadow: var(--edge); transition: border-radius .4s var(--ease), box-shadow .3s; }
.lv-sec[open] { border-radius: var(--r-card); box-shadow: var(--shadow); }
.lv-sec > summary { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.2rem; cursor: pointer; list-style: none; }
.lv-sec > summary::-webkit-details-marker { display: none; }
.lv-sec > summary:hover .lv-plus { background: var(--ink); color: var(--white); box-shadow: none; }
.lv-plus { position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); transition: transform .4s var(--ease), background-color .25s, color .25s; }
.lv-plus::before, .lv-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .65rem; height: 1.5px; margin: -.75px 0 0 -.325rem; background: currentColor; border-radius: 1px; }
.lv-plus::after { transform: rotate(90deg); }
.lv-sec[open] .lv-plus { transform: rotate(45deg); background: var(--ink); color: var(--white); box-shadow: none; }
.lv-h2 { font: 400 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.3 var(--text); letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.lv-in { padding: .25rem clamp(1.2rem, 1rem + 1vw, 2rem) clamp(1.4rem, 1.2rem + .8vw, 2rem) calc(1.2rem + 2.45rem); font: 400 1rem/1.7 var(--text); color: var(--g-700); }
@media (max-width: 599px) { .lv-in { padding-left: 1.2rem; } }
.lv-in > * + * { margin-top: 1rem; }
.lv-in p, .lv-in li { text-wrap: pretty; max-width: 44em; }
.lv-h3 { font: 500 1.0625rem/1.4 var(--text); letter-spacing: -.01em; color: var(--fg); }
.lv-h4 { font: 500 1rem/1.4 var(--text); color: var(--fg); }
.lv-in > .lv-h3 { margin-top: 1.75rem; }
.lv-in > .lv-h4 { margin-top: 1.35rem; }
.lv-h2, .lv-h3, .lv-h4 { scroll-margin-top: calc(var(--header) + 1.5rem); }
.lv a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .28); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s; }
.lv a:hover { text-decoration-color: currentColor; }
.lv-label strong { font-weight: 500; color: var(--fg); }
.lv-see { color: var(--soft); }
.lv-list { display: grid; gap: .45rem; }
.lv-list li { position: relative; padding-left: 1.15rem; }
.lv-list li::before { content: ""; position: absolute; left: .1rem; top: .72em; width: .32rem; height: .32rem; border-radius: 50%; background: var(--g-350); }
ol.lv-list { counter-reset: lvn; }
ol.lv-list li { counter-increment: lvn; padding-left: 1.6rem; }
ol.lv-list li::before { content: counter(lvn) "."; top: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--soft); }
.faq .head .faq-sub { margin-top: .75rem; color: var(--muted); font-weight: 400; }

/* ---------- v3.5 service screens (2026-11-09; heroes._serp/_gads/_chat on the v8 devices) ----------
   Two or three points, one after another, with a time bar on top; container units so the screen stays sharp. */
.scr .sx { position: absolute; inset: 0; display: grid; align-content: start; gap: 3cqw; padding: 5cqw 5cqw; background: var(--white); color: var(--ink); font-size: 4.2cqw; line-height: 1.3; }
.scr.is-phone .sx { padding: 12cqw 6cqw 6cqw; font-size: 6.2cqw; gap: 4.5cqw; }
.sx-bar { position: absolute; left: 0; right: 0; top: 0; height: .7cqw; background: var(--g-150); }
.scr.is-phone .sx-bar { top: 7cqw; left: 6cqw; right: 6cqw; height: 1cqw; border-radius: 1cqw; overflow: hidden; }
.sx-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
html.px-motion .sx-bar i { animation: sx-bar 9s linear infinite; }
@keyframes sx-bar { from { transform: scaleX(0); } to { transform: none; } }
.sx small { display: block; color: var(--g-600); font-size: .78em; }
.sx b { font-weight: 500; }
.sx .g { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .8em; font-weight: 500; flex: none; }
.srp-q, .gad-q { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-radius: 3em; box-shadow: inset 0 0 0 1px var(--g-250); }
.srp-ai { display: grid; gap: .45em; padding: .7em .8em; border-radius: .7em; background: var(--tint); }
.srp-ai i, .srp-r i, .gad-o i { display: block; height: .45em; border-radius: 1em; background: var(--g-250); }
.srp-ai i + i, .gad-o i + i { width: 70%; }
.srp-ai .cite { justify-self: start; padding: .15em .55em; border-radius: 1em; background: var(--ink); color: var(--white); font-size: .78em; }
.srp-r { display: grid; gap: .25em; }
.srp-r li { display: grid; gap: .25em; padding: .5em 0; border-top: 1px solid var(--g-150); }
.srp-r li i { width: 80%; }
.srp-r li.us b { text-decoration: underline; text-underline-offset: .2em; }
.gad-ad { display: grid; gap: .25em; padding: .7em .8em; border-radius: .7em; box-shadow: inset 0 0 0 1.5px var(--ink); }
.gad-ad span { color: var(--g-700); font-size: .85em; }
.gad-o { display: grid; gap: .45em; padding: .4em .1em; }
.gad-ok, .cht .m.sys { justify-self: center; padding: .5em .9em; border-radius: 2em; background: var(--ink); color: var(--white); text-align: center; }
.gad-ok small, .cht .m.sys small { color: var(--g-on-ink); }
.cht-hd { padding-bottom: .6em; border-bottom: 1px solid var(--g-150); }
.cht .m { max-width: 82%; padding: .55em .8em; border-radius: 1em; }
.cht .m.in { justify-self: start; background: var(--tint); border-bottom-left-radius: .3em; }
.cht .m.out { justify-self: end; background: var(--ink); color: var(--white); border-bottom-right-radius: .3em; display: grid; }
.cht .m.out > * { grid-area: 1 / 1; }
.cht .m.sys { font-size: .8em; }
.cht .ty { display: flex; gap: .3em; align-items: center; opacity: 0; }
.cht .ty i { width: .4em; height: .4em; border-radius: 50%; background: currentColor; }
/* 9 s loop: point 1 in the first third, point 2 in the second, the result holds, then all reset together */
html.px-motion .srp-r li.us { animation: srp-up 9s var(--ease) infinite; position: relative; z-index: 1; background: var(--white); }
html.px-motion .srp-r li.o { animation: srp-dn 9s var(--ease) infinite; }
html.px-motion .srp-ai { animation: sx-in2 9s var(--ease) infinite; }
html.px-motion .gad-ad { animation: sx-in1 9s var(--ease) infinite; }
html.px-motion .gad-ok, html.px-motion .cht .m.sys { animation: sx-in3 9s var(--ease) infinite; }
html.px-motion .cht .m.in { animation: sx-in1 9s var(--ease) infinite; }
html.px-motion .cht .m.out { animation: sx-in2 9s var(--ease) infinite; }
html.px-motion .cht .ty { animation: cht-ty 9s steps(1) infinite; }
html.px-motion .cht .tx { animation: cht-tx 9s steps(1) infinite; }
@keyframes srp-dn { 0%, 8% { transform: translateY(-100%); } 25%, 92% { transform: none; } 100% { transform: translateY(-100%); } }
@keyframes srp-up { 0%, 8% { transform: translateY(200%); } 25%, 92% { transform: none; } 100% { transform: translateY(200%); } }
@keyframes sx-in1 { 0%, 6% { opacity: 0; transform: translateY(.6em); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sx-in2 { 0%, 36% { opacity: 0; transform: translateY(.6em); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sx-in3 { 0%, 64% { opacity: 0; transform: scale(.9); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cht-ty { 0%, 36% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cht-tx { 0%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } }
.sh-vis.is-off .scr .sx * { animation-play-state: paused !important; }

/* ---------- v3.5 paint budget (2026-11-09) ----------
   Scroll traces on a phone showed 350-660 ms raster tasks. Live blur under things that repaint every frame (the fixed header
   and CTA bar while scrolling, controls over playing video and moving scenes) is re-rastered every frame. Those surfaces get a
   near-opaque fill instead; the look is the same on cream. Blur stays only where nothing moves behind it (dialogs, mega menu). */
.vcard .vctl button, .mc-dots, .mc-play, .ccv-lock { -webkit-backdrop-filter: none; backdrop-filter: none; }
.vcard .vctl button { background: rgba(0, 0, 0, .58); }
.mc-dots, .mc-play { background: rgba(255, 255, 255, .94); }
@media (hover: none), (max-width: 899px) {
  .px-header.is-solid { background: rgba(240, 237, 230, .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cta-bar { background: rgba(250, 248, 245, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the long live-text block is below the fold on every page: skip its layout and paint until it comes near */
.lv-section { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* phones: glass panels over photos and moving fields lose their live blur and gain fill instead (2026-11-09, paint budget) */
@media (hover: none), (max-width: 899px) {
  html body .spot-panel, html body .cchip, html body .cap-card, html body .cap-pills, html body .cap-grid, html body .scrub, html body .cap-dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 14, .84); }
  html body .cs-card, html body .lp-sky .sky-glass, html body .lp-sky .glass-form { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 248, 245, .94); }
}


/* ---------- v3.5 service link marks + footer-style focus (2026-11-12; ds_extra.link_mark/lmark, svc_directory) ----------
   Every link in the dense service lists has a mark on its left: the platform's logo or the job's line icon, in a small
   tinted tile. In any [data-dim] list the link under the pointer (or keyboard focus) stays and the rest step back, like
   the footer. The all-services directory: three columns in two rows of groups, and on phones each group folds. */
.lmark { display: grid; place-items: center; flex: none; width: 1.625rem; height: 1.625rem; border-radius: .45rem; background: var(--tint); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .35s var(--ease); }
.lmark .brand, .lmark .icon { width: .875rem; height: .875rem; }
[data-surface="ink"] .lmark { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--white); }
@media (hover: hover) {
  [data-dim] a { transition: opacity .35s var(--ease), color .3s var(--ease), background-color .3s var(--ease), transform .35s var(--ease); }
  [data-dim]:has(a:hover) a:not(:hover), [data-dim]:has(a:focus-visible) a:not(:focus-visible) { opacity: .35; }
  [data-dim] a:hover .lmark, [data-dim] a:focus-visible .lmark { background: var(--white); box-shadow: var(--shadow); }
}

.sdir { margin-top: var(--sp-tight); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--r-card); background: var(--white); box-shadow: var(--edge); }
.sd-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: .5rem; margin-bottom: 1rem; }
.sd-top .t-h3 { max-width: 30ch; }
.sd-grid { display: grid; gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three columns, two rows of groups: six columns wrapped every name */
.sd-col { padding-top: 1rem; border-top: 1px solid var(--hair); }
.sd-col > summary { list-style: none; }
.sd-col > summary::-webkit-details-marker { display: none; }
.sd-h { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; color: var(--ink); cursor: default; }
.sd-h .chip-ico { width: 1.875rem; height: 1.875rem; border-radius: .55rem; background: var(--ink); color: var(--white); box-shadow: none; }
.sd-h .chip-ico .icon { width: .95rem; height: .95rem; }
.sd-h b { font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; }
.sd-h small { margin-left: auto; padding: .1rem .45rem; border-radius: 1rem; background: var(--tint); font-size: .6875rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.sd-col ul { display: grid; gap: .05rem; }
.sd-col li a { display: flex; align-items: center; gap: .6rem; min-height: 2.1rem; padding: .2rem 0; color: var(--g-700); font-size: .8125rem; line-height: 1.3; text-decoration: none; }
.sd-col li a:hover, .sd-col li a:focus-visible { color: var(--ink); }
@media (hover: hover) { .sd-col li a:hover { transform: translateX(3px); } }
@media (max-width: 759px) {   /* phones: every group folds, like the footer */
  .sd-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sd-col { padding-top: 0; border-top: 0; border-bottom: 1px solid var(--hair); }
  .sd-col:last-child { border-bottom: 0; }
  .sd-h { min-height: 3.5rem; margin: 0; cursor: pointer; }
  .sd-h::after { content: ""; width: .55rem; height: .55rem; margin-left: .35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -.15rem; transition: rotate .35s var(--ease), translate .35s var(--ease); }
  .sd-col[open] .sd-h::after { rotate: 225deg; translate: 0 .15rem; }
  .sd-col ul { padding: 0 0 .9rem; }
  .sd-col li a { min-height: 2.75rem; font-size: .875rem; }
}

/* explorer, mega menu and service tiles: the mark sits left of the name, the arrow stays right */
.ex-links a { justify-content: flex-start; gap: .7rem; }
.ex-links a > span:not(.lmark) { flex: 1; min-width: 0; }
.mm-links a, .mm-col a:not(.mm-h), .mm-tile ul a { justify-content: flex-start; }
.mm-links a > span:not(.lmark), .mm-col a:not(.mm-h) > span:not(.lmark), .mm-tile ul a > span:not(.lmark) { flex: 1; min-width: 0; }
.mm-links a .lmark, .mm-col a .lmark, .mm-tile ul a .lmark { width: 1.5rem; height: 1.5rem; border-radius: .4rem; }
.sl-stile ul a { display: flex; align-items: center; gap: .6rem; }
.mm-tile ul a { gap: .55rem; }

/* near-black logos on dark surfaces (prix-v35.js brandTone, 2026-11-12) */
img.brand.on-dark { filter: brightness(0) invert(1) !important; opacity: .95; }
/* the link marks keep their line icon visible: the menus hide only the trailing arrow until hover (2026-11-12) */
.mm-links a .lmark .icon, .mm-col a .lmark .icon, .mm-tile ul a .lmark .icon, .ex-links a .lmark .icon { opacity: 1 !important; transform: none !important; color: var(--ink); width: .8rem; height: .8rem; }

/* ---------- v3.5 avatar face change (2026-11-12; build_kit.avatars_cycle, after details.so/inspo) ----------
   Two faces per slot; 9 s cycle: the shown face rises out (up, smaller, soft), the other rises in from below; slots 80 ms
   apart. Hover lifts the face 4 px and its neighbours 2 px. Without motion only the first faces show. */
.avatars.is-cycle { display: flex; align-items: center; }
.av-hit { position: relative; display: block; flex: none; width: 2.25rem; height: 2.25rem; }
.av-hit + .av-hit { margin-left: -.55rem; }
.avatars.big .av-hit { width: 4rem; height: 4rem; }
.avatars.big .av-hit + .av-hit { margin-left: -1rem; }
.av-stage { position: absolute; inset: 0; display: block; }
.avatars.is-cycle .av-stage img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; box-sizing: border-box; backface-visibility: hidden; }
.av-b { opacity: 0; }
/* only groups on screen cycle (prix-v35.js avatarsLive adds .is-live): hidden menus and far sections cost nothing */
html.px-motion .is-live .av-a, html.px-motion .is-live .av-b { animation: 9s cubic-bezier(.22, 1, .36, 1) calc(var(--k, 0) * 80ms) infinite both; }
html.px-motion .is-live .av-a { animation-name: av-a; }
html.px-motion .is-live .av-b { animation-name: av-b; }
@keyframes av-a { 0%, 36% { opacity: 1; transform: none; filter: blur(0); } 42% { opacity: 0; transform: translateY(-35%) scale(.82); filter: blur(4px); }
  43%, 86% { opacity: 0; transform: translateY(35%) scale(.82); filter: blur(4px); } 92%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes av-b { 0%, 36% { opacity: 0; transform: translateY(35%) scale(.82); filter: blur(4px); } 42%, 86% { opacity: 1; transform: none; filter: blur(0); }
  92%, 100% { opacity: 0; transform: translateY(-35%) scale(.82); filter: blur(4px); } }
@media (hover: hover) and (pointer: fine) {
  .av-stage { transition: translate .6s cubic-bezier(.19, 1, .22, 1); }
  .av-hit { pointer-events: auto; }
  .av-hit:hover .av-stage { translate: 0 -4px; }
  .av-hit:has(+ .av-hit:hover) .av-stage, .av-hit:hover + .av-hit .av-stage { translate: 0 -2px; }
}
/* the ring takes the surface colour on dark grounds (a cream ring sat heavy on ink) */
[data-surface="ink"] .avatars img, .is-ink .avatars img, .mm-aside .avatars img, .mm-tile.is-cta .avatars img, .card.is-ink .avatars img { border-color: var(--ink-2); }