/* Selit Media subpages: one shared design system for the service pages, the Lane case study, the guides and the 404.
   (The home page has its own stylesheet.) Header behaviour + the mobile menu live in /assets/page.js.

   The rules, so new templates stay calm:
   - Paper + ink, cobalt for the brand (the logo, and the accent of the guides and the 404), and a palette where each
     SERVICE owns one colour (--svc-*, the same map as the home page: implementation violet, automation sun, agents mint,
     voice tomato, assistants sky, websites pink). A service page (and the Lane case study, the voice agent) wears its
     service's colour through a body class (.svc-*) that resets --accent: its nav dot, link underlines, the button badge on
     hover, the menu ring and at most ONE phrase per page (<span class="hl"> inside the h1). H2s, H3s, icons and backgrounds
     stay ink/paper. --data-* colours are for tiny data marks only (a status dot, a chart line).
   - Headings: Bricolage Grotesque 560 (lighter reads calmer), normal width, gentle tracking, in ink. Body: Inter. Geist Mono only for breadcrumbs,
     article meta and data labels; no uppercase dotted eyebrows.
   - One spacing scale (--s-1 ... --s-9) and one radius scale (--r-sm for small boxes and notes, --r-md for tables and panels,
     --r-pill for buttons only). No hover lifts, no glow, no decorative icons.
   - Components, instead of icon-on-top card grids: .rows (numbered rows), .rows--plain (two-column feature rows),
     .features (2-up text blocks), .deflist (term + description), .compare (comparison table), .quote, .script (copyable
     sample text), .note, .steps, .glance, .qa (FAQ), .related (link list). Retired: .cards/.card, .chips, .card__go arrow
     badges, the .callout colour bar and the a-tomato / a-cobalt / a-violet / a-mint / a-pink page themes. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 85% 100%; font-display: swap; src: url(/assets/fonts/bricolage-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- colour ---- */
  --paper: #F3EFE6; --paper-2: #EAE5DA; --card: #FDFBF7; --card-2: #F7F4ED;
  --ink: #0F0F10; --ink-2: #33312C; --muted: #5C584F; /* muted = 6.2:1 on paper */
  --line: rgba(15, 15, 16, .11); --line-2: rgba(15, 15, 16, .22);
  --on-ink: #F3EFE6; --on-ink-2: rgba(243, 239, 230, .76); --on-ink-3: rgba(243, 239, 230, .58); --ink-line: rgba(243, 239, 230, .13); --ink-raised: #1A1A1C;
  /* the one accent. --accent-text = 5.1:1 on paper, --accent-on-ink = 6.9:1 on ink, --accent-fg = text on an accent fill,
     --accent-wash = a faint tint for a highlighted table column or a data tag */
  --accent: #2F4BFF; --accent-text: #2F4BFF; --accent-on-ink: #8C9BFF; --accent-fg: #FFFFFF; --accent-wash: #E7E8F6;
  --logo: #2F4BFF;
  /* tiny data accents only (a dot in a diagram, a chart series). Never headings, buttons, fills or page themes. */
  --data-tomato: #E3401C; --data-mint: #0B8A5F; --data-violet: #7B4DFF; --data-sun: #E8A900;
  /* the brand palette, one colour per service (fills and markers, never body text on paper) */
  --cobalt: #2F4BFF; --violet: #9B6BFF; --sun: #FFC22E; --mint: #22D39A; --tomato: #FF5B37; --sky: #3EC6FF; --pink: #FF7AC6;
  --svc-impl: var(--violet); --svc-auto: var(--sun); --svc-agents: var(--mint); --svc-voice: var(--tomato); --svc-assist: var(--sky); --svc-web: var(--pink);

  /* ---- type ---- */
  --f-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fw-display: 560;
  --fs-h1: clamp(2.3rem, 1.45rem + 3vw, 4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.25vw, 2.35rem);
  --fs-h3: 1.18rem;
  --fs-lede: clamp(1.08rem, 1rem + .3vw, 1.2rem);
  --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem; --fs-label: .75rem;
  --lh-h1: 1.04; --lh-h2: 1.1; --lh-h3: 1.3;
  --tr-h1: -.022em; --tr-h2: -.022em; --tr-h3: 0; /* display type under ~20px keeps normal tracking: negative tracking pinches it */
  --measure: 42rem;

  /* ---- space (one scale) ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;
  --section: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
  --container: 1200px; --gutter: clamp(1rem, .4rem + 2.6vw, 2.5rem);

  /* ---- radius (one scale) ---- */
  --r-sm: 8px; --r-md: 14px; --r-pill: 999px;
  --r-card: var(--r-md); /* older name, kept for guides.css */

  /* ---- motion + header pills (solid: nothing scrolls under them as a smear) ---- */
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glass: #FFFDF8; --pill-shadow: 0 1px 2px rgba(15, 15, 16, .05), 0 12px 30px -16px rgba(15, 15, 16, .28);
}

/* a service page wears its service's colour. --accent-text is the same hue dark enough for text on paper (4.5:1 or more),
   --accent-fg the text on a fill (ink reads on all six), --accent-wash a faint tint. The logo stays cobalt. */
.svc-impl { --accent: var(--violet); --accent-text: #6B3BF0; --accent-on-ink: var(--violet); }
.svc-auto { --accent: var(--sun); --accent-text: #9A5F00; --accent-on-ink: var(--sun); }
.svc-agents { --accent: var(--mint); --accent-text: #077A55; --accent-on-ink: var(--mint); }
.svc-voice { --accent: var(--tomato); --accent-text: #C93512; --accent-on-ink: var(--tomato); }
.svc-assist { --accent: var(--sky); --accent-text: #0B6FA8; --accent-on-ink: var(--sky); }
.svc-web { --accent: var(--pink); --accent-text: #C42A82; --accent-on-ink: var(--pink); }
.svc-impl, .svc-auto, .svc-agents, .svc-voice, .svc-assist, .svc-web { --accent-fg: var(--ink); --accent-wash: color-mix(in srgb, var(--accent) 16%, var(--paper)); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.ink :focus-visible, .footer :focus-visible { outline-color: var(--on-ink); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); text-decoration: none; }
.skip:focus { top: 1rem; }
.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; }
.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ----------
   Desktop: logo + one pill (nav links + "Book a call"). Scrolling down past ~120px adds .is-collapsed (page.js): the links fold
   (max-width + opacity) into .nav__now, the page's short name with an accent dot. Hover, focus or scrolling up opens it again;
   the links never leave the DOM or the tab order. Mobile (< 1000px): the sticky bar with the burger; its full-screen menu is below. */
.header { position: sticky; top: 0; z-index: 50; }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; }
.logo svg { width: 30px; height: 30px; transition: rotate .7s var(--ease); }
.logo:hover svg { rotate: -12deg; }
.logo b { font: 700 1.22rem/1 var(--f-display); font-stretch: 94%; letter-spacing: -.02em; white-space: nowrap; }
.logo b span { font-weight: 400; opacity: .55; }
.nav { display: flex; align-items: center; }
.nav__links { display: flex; align-items: center; max-width: var(--links-w, 48rem); overflow: hidden; transition: max-width .6s var(--ease), opacity .35s .12s; }
.nav__now { display: flex; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; cursor: pointer; transition: max-width .6s var(--ease), opacity .25s; }
.nav__links > *, .nav__now > span { flex: none; }
.nav__now > span { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem .55rem .85rem; color: var(--ink); font-size: .9rem; font-weight: 600; }
.nav__now > span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nav__link { position: relative; display: inline-flex; align-items: center; padding: .55rem .85rem; border-radius: 999px; color: var(--ink-2); font-size: .9rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color .25s, background-color .25s; }
.nav__link:hover { background: rgba(15, 15, 16, .06); color: var(--ink); }
.nav__link:focus-visible { outline-offset: -2px; border-radius: 999px; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::before { content: ""; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--accent); }
.nav .btn { margin-left: 4px; }
.header.is-collapsed .nav:not(:hover):not(:focus-within) .nav__links { max-width: 0; opacity: 0; transition: max-width .6s var(--ease), opacity .2s; }
.header.is-collapsed .nav:not(:hover):not(:focus-within) .nav__now { max-width: var(--now-w, 14rem); opacity: 1; transition: max-width .6s var(--ease), opacity .35s .15s; }
@media (min-width: 1000px) {
  .header { pointer-events: none; }
  .header__in > * { pointer-events: auto; }
  .header .logo { margin-left: -8px; padding: 7px 14px 7px 8px; border-radius: 999px; transition: background-color .4s, box-shadow .4s; }
  /* solid paper pills over whatever scrolls by (no blur band, no glass) */
  .header.is-scrolled .logo { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--pill-shadow); }
  .nav { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--pill-shadow); }
}
/* wide screens: each service link carries its service's dot (the page you are on has its own, in its accent) */
@media (min-width: 1200px) {
  .nav__link[style*="--c"]:not([aria-current])::before { content: ""; width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: var(--c); }
}
/* ---------- Mobile menu (< 1000px), same as the home page ----------
   Open: an ink panel grows out of the burger as a circle with a thin ring in the current page's colour on its edge; then the
   links rise from behind their masks one by one, the CTA follows and the agent peeks over it. Close: the same in reverse,
   quicker, without the ring. Only clip-path, transform and opacity animate. page.js sets --mx/--my (burger centre), --mr
   (radius to the farthest corner) and --mc (ring colour) on .mnav, and --mnav-sbw (classic scrollbar width) on <html>.
   html.is-menu = open or closing (scroll lock); html.is-menu-ink = the ink is behind the whole header bar (page.js adds it when
   the circle passes the bar's far corner, and removes it as soon as the closing circle starts to uncover the bar). */
@property --mnav-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.burger { position: relative; display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale .5s var(--spring), background-color .18s .3s, border-color .18s .3s; }
.burger:active { scale: .9; transition-duration: .15s; }
.burger span { position: absolute; width: 17px; height: 1.5px; border-radius: 2px; background: currentColor; transition: rotate .3s var(--ease-io), translate .5s var(--spring) .2s, scale .5s var(--spring) .2s; }
.burger span:first-child { translate: 0 -3.5px; }
.burger span:last-child { translate: 3.2px 3.5px; scale: .62 1; }
@media (hover: hover) { .burger:hover span:last-child { translate: 0 3.5px; scale: 1; } }
/* open: a solid paper disc at once; the lines meet, then spin half a turn together while they open into an X */
.burger[aria-expanded="true"] { border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); transition: scale .5s var(--spring), background-color 0s, border-color 0s; }
.burger[aria-expanded="true"] span:first-child, .burger[aria-expanded="true"] span:last-child { translate: 0 0; scale: 1; transition: translate .2s var(--ease-io), scale .2s var(--ease-io), rotate .8s var(--spring) .1s; }
.burger[aria-expanded="true"] span:first-child { rotate: 225deg; }
.burger[aria-expanded="true"] span:last-child { rotate: 135deg; }
html.is-menu { overflow: hidden; }
html.is-menu body { padding-right: var(--mnav-sbw, 0px); }
/* the bar keeps its paper until the ink is behind all of it, then clears in a quick crossfade (and comes back the same way) */
.is-menu .header { transition: background-color .12s, border-color .12s, -webkit-backdrop-filter 0s, backdrop-filter 0s; }
.is-menu-ink .header { border-bottom-color: transparent; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-menu .header .logo { transition: color .12s; }
.is-menu-ink .header .logo { color: var(--on-ink); }
.is-menu .header .nav .btn { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }

.mnav { --mfs: min(clamp(2rem, 11.4vw - 4px, 5rem), 7vh); --mx: calc(100% - 42px); --my: 34px; --mr: 150vmax; position: fixed; inset: 0; z-index: 49; visibility: hidden; pointer-events: none; transition: visibility 0s .46s; }
.mnav.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
/* one radius drives both circles; the ring is the same circle plus min(r/2, 40px), so it stays a thin edge all the way */
.mnav__wipe, .mnav__panel { position: absolute; inset: 0; --mnav-r: 0px; clip-path: circle(var(--mnav-r) at var(--mx) var(--my)); transition: --mnav-r .42s cubic-bezier(.6, 0, .3, 1); }
.mnav__wipe { opacity: 0; background: var(--mc, var(--accent)); clip-path: circle(calc(var(--mnav-r) + min(var(--mnav-r) * .5, 40px)) at var(--mx) var(--my)); transition: --mnav-r .42s cubic-bezier(.6, 0, .3, 1), opacity .12s; }
.mnav__panel { overflow-y: auto; overscroll-behavior: contain; color: var(--on-ink); background: var(--ink); }
.mnav.is-open .mnav__wipe, .mnav.is-open .mnav__panel { --mnav-r: var(--mr); transition: --mnav-r .7s cubic-bezier(.55, 0, .1, 1); }
.mnav.is-open .mnav__wipe { opacity: 1; transition: --mnav-r .7s cubic-bezier(.55, 0, .1, 1), opacity 0s; }
/* scrolled (short screens): an ink scrim under the header so the links never slide under the logo and the X */
.mnav__panel::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; height: 80px; margin-bottom: -80px; background: linear-gradient(var(--ink) 64%, rgba(15, 15, 16, 0)); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mnav.is-scrolled .mnav__panel::before { opacity: 1; }
.mnav__in { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: calc(68px + clamp(.4rem, 2.4vh, 2rem)) var(--gutter) max(1rem, env(safe-area-inset-bottom)); }
.mnav__kick { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(.3rem, 1.2vh, 1rem); color: rgba(243, 239, 230, .62); font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.mnav__list { margin: 0; padding: 0; list-style: none; }
.mnav__list li { --t: calc(260ms + var(--i) * 70ms); position: relative; }
.mnav__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink-line); scale: 0 1; transform-origin: 0 50%; transition: scale .3s var(--ease-io); }
.mnav__list a { display: flex; align-items: center; gap: .7rem; padding: clamp(.42rem, 1.25vh, .8rem) 0; color: inherit; font-family: var(--f-display); font-size: var(--mfs); font-weight: 600; line-height: 1; letter-spacing: -.032em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity .35s; }
.mnav__dot { flex: none; width: .24em; aspect-ratio: 1; border-radius: 50%; background: var(--c); scale: 0; transition: scale .25s var(--ease-io), transform .45s var(--spring), box-shadow .4s; }
/* the mask hugs the label (vertical bleed via padding, clipped by its own box), and the index sits right after it */
.mnav__mask { flex: 0 1 auto; min-width: 0; padding: .08em .06em .2em; margin: -.08em -.06em -.2em; overflow: hidden; white-space: nowrap; transition: transform .5s var(--ease); }
.mnav__txt { display: block; translate: 0 112%; rotate: 5deg; transform-origin: 0 100%; transition: translate .24s cubic-bezier(.6, 0, .4, 1) calc((6 - var(--i)) * 10ms), rotate .24s cubic-bezier(.6, 0, .4, 1) calc((6 - var(--i)) * 10ms), color .3s; }
.mnav__n { flex: none; align-self: flex-start; margin: .1rem 0 0 -.35rem; color: rgba(243, 239, 230, .62); font: 500 .7rem/1 var(--f-mono); letter-spacing: .06em; opacity: 0; translate: -8px 0; transition: opacity .2s, translate .3s, transform .5s var(--ease); }
.mnav.is-open .mnav__kick { opacity: 1; transition: opacity .6s .3s; }
.mnav.is-open .mnav__list li::after { scale: 1 1; transition: scale 1.1s var(--ease) var(--t); }
.mnav.is-open .mnav__txt { translate: 0 0; rotate: 0deg; transition: translate 1s var(--ease) var(--t), rotate 1s var(--ease) var(--t), color .3s; }
.mnav.is-open .mnav__dot { scale: 1; transition: scale .7s var(--spring) calc(var(--t) + 120ms), transform .45s var(--spring), box-shadow .4s; }
.mnav.is-open .mnav__n { opacity: 1; translate: 0 0; transition: opacity .6s calc(var(--t) + 160ms), translate .9s var(--ease) calc(var(--t) + 160ms), transform .5s var(--ease); }
/* the page you're on */
.mnav a[aria-current] .mnav__txt, .mnav a[aria-current] .mnav__n { color: color-mix(in srgb, var(--c) 80%, #fff); }
.mnav a[aria-current] .mnav__dot { box-shadow: 0 0 0 .09em color-mix(in srgb, var(--c) 32%, transparent); }
.mnav__list a:active { opacity: .6; transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
  .mnav__list:hover a:not(:hover) { opacity: .4; }
  .mnav__list a:hover .mnav__mask, .mnav__list a:hover .mnav__n { transform: translateX(.16em); }
  .mnav__list a:hover .mnav__dot { transform: scale(1.5); }
}
.mnav__foot { margin-top: auto; padding-top: clamp(1.4rem, 5vh, 3rem); }
.mnav__go { position: relative; opacity: 0; translate: 0 16px; transition: opacity .2s, translate .3s var(--ease-io); }
.mnav__go .btn { position: relative; z-index: 1; display: flex; width: 100%; justify-content: space-between; border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); }
.mnav__go .btn__badge { background: var(--ink); color: var(--on-ink); }
/* the agent sits behind the button, 3px of ink between them; the box has headroom so its hop is never cut off, only its
   bottom edge is (overflow on a box that never reaches past the button, so nothing adds to the panel's scroll height) */
.mnav__peek { --aw: 74px; position: absolute; right: calc(clamp(4.4rem, 16vw, 6rem) - var(--aw) * .226); bottom: calc(100% + 3px); width: calc(var(--aw) * 1.456); height: 84px; overflow: hidden; pointer-events: none; }
.mnav__agent { position: absolute; left: calc(var(--aw) * .23); top: 24px; width: var(--aw); translate: 0 100%; rotate: 12deg; transition: translate .28s var(--ease-io), rotate .28s var(--ease-io), transform .5s var(--spring); }
.mnav__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin-top: .5rem; color: rgba(243, 239, 230, .62); font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.mnav__more { display: flex; gap: 1.2rem; }
.mnav__meta a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.mnav__meta a:hover, .mnav__meta a[aria-current] { color: var(--on-ink); }
.mnav__meta a[aria-current]::before { content: ""; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 30%, transparent); }
.mnav__where { display: inline-flex; align-items: center; gap: .6rem; }
.mnav__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22D39A; }
.mnav__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: mnav-ping 2.2s var(--ease) infinite; }
@keyframes mnav-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }
.mnav.is-open .mnav__go { opacity: 1; translate: 0 0; transition: opacity .5s .72s, translate 1s var(--ease) .72s; }
.mnav.is-open .mnav__agent { translate: 0 6%; rotate: -5deg; transition: translate .9s var(--spring) .95s, rotate 1.3s var(--spring) .95s, transform .5s var(--spring); }
.mnav.is-open .mnav__go:hover .mnav__agent, .mnav.is-open .mnav__go:focus-within .mnav__agent { transform: translateY(-16%) rotate(4deg); }
.mnav.is-open .mnav__meta { opacity: 1; transition: opacity .7s .85s; }
.mnav :focus-visible { outline-color: var(--on-ink); }
/* the agent (a soft paper creature; its eyes follow you, page.js) */
.mnav .agent { position: relative; display: block; aspect-ratio: 1; container-type: inline-size; }
/* the 3D robot still, as on the home page: its arms and antenna reach outside its body box (the peek box is x1.456 wide) */
.mnav__agent.sprite { display: block; aspect-ratio: 1; }
.mnav__agent.sprite > img { position: absolute; left: -23%; top: -34.5%; width: 145.6%; max-width: none; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mnav .agent__body { position: absolute; inset: 0; border-radius: 47% 53% 51% 49% / 55% 46% 54% 45%; background: var(--on-ink); box-shadow: inset -9cqw -12cqw 0 rgba(15, 15, 16, .06); animation: mnav-morph 11s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.mnav:not(.is-open) .agent__body { animation-play-state: paused; }
@keyframes mnav-morph {
  0% { border-radius: 47% 53% 51% 49% / 55% 46% 54% 45%; }
  33% { border-radius: 56% 44% 42% 58% / 46% 56% 44% 54%; }
  66% { border-radius: 42% 58% 56% 44% / 58% 42% 58% 42%; }
  100% { border-radius: 52% 48% 46% 54% / 44% 55% 45% 56%; }
}
.mnav .eye { position: absolute; top: 29%; width: 14%; height: 23%; overflow: hidden; border-radius: 999px; background: var(--ink); transform-origin: 50% 60%; transition: scale .12s var(--ease), height .3s var(--spring), top .3s var(--spring); }
.mnav .eye--l { left: 31%; }
.mnav .eye--r { left: 55%; }
.mnav .eye i { position: absolute; left: 50%; top: 52%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--on-ink); translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px)); transition: translate .09s linear, opacity .2s; }
.mnav .eye i::after { content: ""; position: absolute; left: 22%; top: 18%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.mnav .mouth { position: absolute; left: 50%; top: 61%; width: 19%; height: 8%; translate: -50% 0; border: 0 solid var(--ink); border-bottom-width: max(3px, 1.6cqw); border-radius: 0 0 999px 999px; transition: width .3s var(--spring), height .3s var(--spring); }
.mnav .agent.is-blink .eye { scale: 1 .08; }
.mnav .agent.is-happy .eye { top: 31%; height: 12%; border: max(2px, 2.8cqw) solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; background: transparent; }
.mnav .agent.is-happy .eye i { opacity: 0; }
.mnav .agent.is-happy .mouth { width: 26%; height: 11%; }
@media (min-width: 640px), (orientation: landscape) and (max-height: 560px) {
  .mnav__foot { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
  .mnav__go { flex: 0 1 23rem; }
  .mnav__meta { margin-top: 0; }
  .mnav__peek { right: calc(5.5rem - var(--aw) * .226); }
}
/* short portrait phones: tighter rows, room for the agent above the button */
@media (orientation: portrait) and (max-height: 720px) {
  .mnav__in { padding-top: calc(68px + .2rem); }
  .mnav__kick { display: none; }
  .mnav__list a { padding: .3rem 0; }
  .mnav__foot { padding-top: 3.4rem; }
}
@media (orientation: portrait) and (max-height: 600px) {
  .mnav__list a { padding: .2rem 0; }
  .mnav__foot { padding-top: 3.25rem; }
  .mnav__meta { margin-top: 0; }
  .mnav__peek { --aw: 64px; height: 76px; }
}
/* landscape phones: two columns of links */
@media (orientation: landscape) and (max-height: 560px) {
  .mnav { --mfs: clamp(1.45rem, 8.4vh, 2.4rem); }
  .mnav__in { padding-top: 64px; }
  .mnav__kick { display: none; }
  .mnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(1.5rem, 5vw, 3.5rem); }
  .mnav__list a { padding: clamp(.3rem, 1.6vh, .5rem) 0; }
  .mnav__foot { padding-top: clamp(.6rem, 3vh, 1.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mnav { opacity: 0; transition: opacity .3s, visibility 0s .3s; transition-duration: .3s, 0s !important; }
  .mnav.is-open { opacity: 1; transition: opacity .3s, visibility 0s; transition-duration: .3s, 0s !important; }
  /* the page-wide rule below gives every element a .01ms transition of `all`, visibility included: inside the menu that kept
     the links hidden (and unfocusable) for a frame after opening, so the menu's children get no transitions at all */
  .mnav *, .mnav *::before, .mnav *::after { transition: none !important; }
  .mnav__wipe { display: none; }
  .mnav__panel, .mnav.is-open .mnav__panel { clip-path: none; }
  .mnav__kick, .mnav__txt, .mnav__dot, .mnav__n, .mnav__go, .mnav__meta, .mnav__list li::after, .mnav__agent { opacity: 1; translate: none; rotate: none; scale: none; }
  .mnav__agent { translate: 0 6%; }
  .mnav .agent__body, .mnav__live::after { animation: none; }
}
@media (max-width: 999px) {
  .header { border-bottom: 1px solid var(--line); background: var(--paper); }
  .header__in { height: 68px; }
  .nav__links, .nav__now { display: none; }
  .burger { display: flex; }
}
@media (max-width: 359px) { .logo b span { display: none; } }

/* desktop nav: a section page (a guide under /guides/) marks its parent link like the page itself */
.nav__link[aria-current="true"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="true"]::before { content: ""; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: var(--accent); }

/* ---------- Buttons (shared with the mobile menu, so unchanged; pill = buttons only) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; height: 54px; padding: 0 .4375rem 0 1.4rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 500 1rem/1 var(--f-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: box-shadow .4s var(--ease), transform .4s var(--ease), background .3s, border-color .3s; }
.btn__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--on-ink); color: var(--ink); transition: background .35s, color .35s, transform .55s var(--ease); }
.btn__badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { box-shadow: 0 16px 30px -18px rgba(15, 15, 16, .6); transform: translateY(-1px); }
.btn:hover .btn__badge { background: var(--accent); color: var(--accent-fg); transform: rotate(-45deg); }
.btn--sm { height: 40px; padding: 0 1.05rem; font-size: .88rem; }
.btn--ghost { padding: 0 1.4rem; border-color: var(--line-2); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(15, 15, 16, .04); box-shadow: none; }
.btn--light { border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); }
.btn--light .btn__badge { background: var(--ink); color: var(--on-ink); }
.link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.link:hover { text-decoration-color: var(--ink); }
.prose a:not(.btn):not(.link) { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: var(--fw-display); font-synthesis: none; text-wrap: balance; }
h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { margin: 0 0 var(--s-4); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
/* The one accent phrase a page may have: inside its h1. Anywhere else .hl renders as plain ink. */
.hl { font-style: normal; color: inherit; }
h1 .hl { color: var(--accent-text); }
.ink h1 .hl { color: var(--accent-on-ink); }
/* Small plain-text label above an h1 (location, section). .eyebrow is the old name: same look, no dot, no mono caps. */
.kicker, .eyebrow { display: block; margin: 0 0 var(--s-4); color: var(--muted); font: 500 var(--fs-sm)/1.4 var(--f-body); letter-spacing: 0; text-transform: none; }
.ink .kicker, .ink .eyebrow { color: var(--on-ink-3); }
.lede { max-width: 38rem; margin: var(--s-5) 0 0; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.55; }
/* running text never ends a paragraph on one word */
.lede, .section__head p, .section__foot p, .prose p, .prose li, .qa p, .compare__note, .cta p { text-wrap: pretty; }
/* Mono, small: breadcrumbs, article meta, data labels */
.label { color: var(--muted); font: 500 var(--fs-label)/1.35 var(--f-mono); letter-spacing: .02em; }
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 var(--s-6); padding: 0; list-style: none; color: var(--muted); font: var(--fs-label)/1.4 var(--f-mono); }
.crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- Hero ---------- */
.hero { padding: clamp(2rem, 1.4rem + 3vw, 4rem) 0 var(--section); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--s-7) clamp(2rem, 7vw, 7rem); align-items: end; }
.hero h1 { max-width: 17ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* At a glance: a short ruled list under an ink rule. No card, no dots. */
.glance { padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.glance__title { margin: 0 0 var(--s-1); color: var(--ink); font: 600 var(--fs-sm)/1.4 var(--f-body); }
.glance ul { margin: 0; padding: 0; list-style: none; }
.glance li { padding: .55rem 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; }
@media (max-width: 999px) { .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s-6); } .glance { max-width: 34rem; } }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; border-top: 1px solid var(--line); }
.section__head { max-width: 46rem; margin-bottom: var(--s-7); }
.section__head h2 { margin: 0; }
.section__head p { max-width: 40rem; margin: var(--s-4) 0 0; color: var(--ink-2); }
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-6) clamp(2rem, 6vw, 6rem); align-items: start; }
.split > :first-child { position: sticky; top: 110px; }
.split > :first-child h2 { margin: 0; max-width: 16ch; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .split > :first-child { position: static; } }

/* Running text: plain bullets, muted markers */
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-5); padding-left: 1.15rem; }
.prose li { margin: var(--s-2) 0; padding-left: .3rem; }
.prose li::marker { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose > :last-child { margin-bottom: 0; }

/* Note: one quiet tinted box. Start it with <strong>Note:</strong> when it needs a label. */
.note, .callout { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.note p, .callout p { margin: 0; }
.note p + p, .callout p + p { margin-top: var(--s-2); }

/* ---------- Numbered rows: <ol class="rows"><li><h3>Title</h3><p>Text</p></li></ol> ----------
   The default for "what's included" and any list of 3-9 parallel items. Number | title | text on desktop, ruled.
   .rows--plain drops the number: two-column feature rows (title left, text right). A linked title is plain underlined text. */
.rows { margin: 0; padding: 0; list-style: none; counter-reset: row; border-bottom: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: 2.5rem minmax(0, 16rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-top: 1px solid var(--line); counter-increment: row; }
.rows > li::before { content: counter(row); color: var(--muted); font: 500 1rem/1.3 var(--f-display); font-variant-numeric: tabular-nums; }
.rows h3 { margin: 0; }
.rows p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.rows p + p { grid-column: 3; margin-top: var(--s-2); }
.rows--plain > li { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
.rows--plain > li::before { content: none; }
.rows--plain p + p { grid-column: 2; }
.rows h3 a, .features h3 a { text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.rows h3 a:hover, .features h3 a:hover { text-decoration-color: var(--accent); }
@media (max-width: 760px) {
  .rows > li { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-2); padding: var(--s-4) 0; }
  .rows > li > p, .rows p + p { grid-column: 2; }
  .rows--plain > li { grid-template-columns: minmax(0, 1fr); }
  .rows--plain > li > *, .rows--plain p + p { grid-column: 1; }
}
/* Two columns of rows on wide screens, for long lists (8+ short items) */
@media (min-width: 1000px) {
  .rows--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .rows--2 > li { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--s-2); }
  .rows--2 > li > p { grid-column: 2; }
}

/* ---------- Feature blocks: 2 (or 3) text blocks side by side under an ink rule ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin: 0; padding: 0; list-style: none; }
.features > * { padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.features h3 { margin: 0 0 var(--s-2); }
.features p { margin: 0; color: var(--ink-2); }
.features p + p { margin-top: var(--s-3); }
@media (min-width: 1000px) { .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .features { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

/* ---------- Definition list: <dl class="deflist"><div><dt>Term</dt><dd>Text</dd></div></dl> ----------
   For "Label: text" content (tools by group, options, plan rules). Never write bold-label bullets. */
.deflist { margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); }
.deflist > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.deflist dt { color: var(--ink); font-weight: 600; line-height: 1.5; }
.deflist dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
.deflist--wide > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.deflist--stack > div { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .deflist--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}
@media (max-width: 560px) { .deflist > div, .deflist--wide > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Comparison table: ruled, no box ----------
   <div class="compare"><table>... (the guides). The service pages put the same kind of table in table.ruled (services.css):
   the same look, rules only. No card, no shaded header row, no tinted "winner" column: .is-us only turns that column's
   header label cobalt. Phones: each row stacks under its row header. */
.compare { margin: 0; }
.compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.compare th, .compare td { padding: .9rem 1.1rem .9rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare tr > :last-child { padding-right: 0; }
.compare thead th, .compare thead td { padding-top: 0; padding-bottom: .65rem; color: var(--muted); font: 500 var(--fs-xs)/1.35 var(--f-body); vertical-align: bottom; }
.compare thead th.is-us { color: var(--accent-text); }
.compare tbody th { width: 21%; color: var(--ink); font-weight: 600; }
.compare td { color: var(--ink-2); }
.compare__note { margin: var(--s-4) 0 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .compare tbody th { width: auto; padding: 0 0 .5rem; border: 0; font: var(--fw-display) 1.06rem/1.3 var(--f-display); letter-spacing: var(--tr-h3); }
  .compare td { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding: .4rem 0; border: 0; }
  .compare td::before { content: attr(data-label); color: var(--muted); font: 500 var(--fs-xs)/1.45 var(--f-body); }
  .compare td.is-us::before { color: var(--accent-text); }
}

/* ---------- Quote + script ----------
   .quote: a customer or source quote. <figure class="quote"><blockquote><p>...</p></blockquote><figcaption>Name, role</figcaption></figure>
   .script: copyable sample text (a call greeting, a policy). <figure class="script"><figcaption>Sample greeting</figcaption><blockquote>...</blockquote></figure> */
.quote { margin: var(--s-6) 0; padding: 0 0 0 var(--s-5); border-left: 2px solid var(--ink); }
.quote blockquote { margin: 0; }
.quote p { margin: 0; color: var(--ink); font: 500 clamp(1.2rem, 1.1rem + .45vw, 1.42rem)/1.4 var(--f-display); letter-spacing: -.01em; }
.quote figcaption { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.script { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.script figcaption { margin: 0 0 var(--s-2); color: var(--muted); font: 600 var(--fs-xs)/1.4 var(--f-body); }
.script blockquote { margin: 0; padding: 0; border: 0; }
.script p { margin: 0; color: var(--ink); font: 400 1.02rem/1.6 var(--f-body); letter-spacing: 0; }
.script p + p { margin-top: var(--s-3); }

/* ---------- Steps (how a project runs): numbered ruled rows, no cards ---------- */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; border-bottom: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line); counter-increment: s; }
.steps li::before { content: counter(s); grid-row: 1 / span 2; color: var(--muted); font: 500 1.05rem/1.4 var(--f-display); font-variant-numeric: tabular-nums; }
.steps li > * { grid-column: 2; }
.steps h3 { margin: 0 0 var(--s-1); font-size: 1.12rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }

/* Service areas: one plain line */
.areas { max-width: 52rem; margin: var(--s-6) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.areas strong { color: var(--ink-2); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq__guide { max-width: 22rem; margin: var(--s-4) 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { position: relative; display: block; padding: 1.1rem 2.5rem 1.1rem 0; font: var(--fw-display) 1.08rem/1.35 var(--f-display); letter-spacing: var(--tr-h3); list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; right: .4rem; top: calc(50% - .75px); width: 13px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: rotate .35s var(--ease), opacity .25s; }
.qa summary::after { rotate: 90deg; }
.qa[open] summary::after { rotate: 0deg; opacity: 0; }
.qa summary:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.qa p { max-width: 42rem; margin: 0 0 var(--s-5); color: var(--ink-2); }

/* ---------- Related: a ruled list of links (title + one line), two columns on wide screens ---------- */
.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); border-bottom: 1px solid var(--line); }
.related a { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) 0 1.15rem; border-top: 1px solid var(--line); text-decoration: none; }
.related b { color: var(--ink); font: var(--fw-display) 1.1rem/1.3 var(--f-display); letter-spacing: var(--tr-h3); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.related a:hover b { text-decoration-color: var(--accent); }
.related a[style*="--c"] b::before { content: ""; display: inline-block; width: 14px; height: 8px; margin-right: .55rem; border-radius: var(--r-pill); background: var(--c); vertical-align: .12em; }
.related span { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 700px) { .related { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Work shots (screenshots of live sites) ---------- */
.work { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.work > * { grid-column: span 2; }
.work > :first-child:nth-last-child(5), .work > :first-child:nth-last-child(5) + * { grid-column: span 3; } /* 5 shots: 2 + 3 */
@media (max-width: 999px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work > *, .work > :first-child:nth-last-child(5), .work > :first-child:nth-last-child(5) + * { grid-column: auto; } .work > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 620px) { .work { grid-template-columns: minmax(0, 1fr); } }
.shot { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); text-decoration: none; transition: border-color .3s; }
.shot:hover { border-color: var(--line-2); }
.shot__img { aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.shot:hover .shot__img img { transform: scale(1.02); }
.shot__body { display: flex; flex-direction: column; gap: .2rem; padding: var(--s-4) 1.15rem 1.1rem; }
.shot__body b { font: 600 1.1rem/1.25 var(--f-display); letter-spacing: var(--tr-h3); }
.shot__body span { color: var(--muted); font-size: .9rem; }

/* ---------- Ink bands (final CTA, Lane steps) ---------- */
.ink { border-top: 0; background: var(--ink); color: var(--on-ink); }
.ink p { color: var(--on-ink-2); }
.ink .steps, .ink .steps li { border-color: var(--ink-line); }
.ink .steps li::before { color: var(--on-ink-3); }
.ink .steps p { color: var(--on-ink-2); }
/* A short sequence (Call, then Voice agent, ...): plain text with arrows, no pills */
.flow { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin: var(--s-5) 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-sm); }
.flow li + li::before { content: "\2192"; content: "\2192" / ""; margin-right: .55rem; color: var(--muted); }
.ink .flow { color: var(--on-ink-2); }
.ink .flow li + li::before { color: var(--on-ink-3); }
.cta { padding: var(--section) 0; }
.cta__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem); align-items: end; }
.cta h2 { max-width: 15ch; margin: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: var(--tr-h1); }
.cta p { max-width: 30rem; margin: 0; }
.cta .hero__cta { margin-top: var(--s-5); }
@media (max-width: 860px) { .cta__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.footer { padding: clamp(2.8rem, 5vw, 4rem) 0 var(--s-6); border-top: 1px solid var(--ink-line); background: var(--ink); color: var(--on-ink-3); font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 2.2rem; }
.footer .logo { color: var(--on-ink); }
.footer__brand p { max-width: 24rem; margin: var(--s-4) 0 0; color: var(--on-ink-2); line-height: 1.55; }
.footer__label { margin: 0 0 var(--s-3); color: var(--on-ink); font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: 0; text-transform: none; }
.footer nav { display: grid; gap: .55rem; align-content: start; }
.footer a { color: var(--on-ink-2); text-decoration: none; }
.footer__svc a { display: flex; align-items: center; gap: .6rem; }
.footer__svc a::before { content: ""; flex: none; width: 14px; height: 8px; border-radius: var(--r-pill); background: var(--c); }
.footer a:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--accent-on-ink); text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--ink-line); font-size: .84rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer__brand { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */
.nf { padding: clamp(3rem, 2rem + 5vw, 7rem) 0 var(--section); }
.nf .lede { max-width: 34rem; }
.nf .related { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Reveal (optional, opacity only; nothing in the templates uses it by default) ---------- */
.js [data-animate] { opacity: 0; transition: opacity .7s var(--ease); }
.js [data-animate].is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-animate] { opacity: 1; }
}

/* Page-to-page transitions (cross-document View Transitions), matching the home page */
@view-transition { navigation: auto; }
.header .logo { view-transition-name: site-logo; }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.65, 0, .35, 1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vt-out { to { opacity: 0; translate: 0 -24px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 32px; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }