/* Zivo — components and sections. Load after tokens.css.
   The look: paper page inside a blueprint frame (two vertical hairline guides, a hairline rule on top of every
   band with a small plus-cross where rule meets guide), Geist type, pill buttons, paper cards with hairline borders,
   and grainy blurred colour fields that hold chat UIs, case covers and hovered cards. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: -.5px; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 99; background: var(--ink-bg); color: #fff; padding: 8px 14px; border-radius: var(--r-pill); }

/* ───────── Frame: guides + container ───────── */
:root { --frame: min(var(--container), 100vw - 2 * var(--gutter)); }
.wrap { width: var(--frame); margin-inline: auto; }
.inner { width: min(var(--inner), var(--frame) - 2 * var(--inset)); margin-inline: auto; }
/* a band = one section: hairline rule on top, plus-crosses where it meets the guides */
.band { position: relative; padding-block: var(--section); border-top: 1px solid var(--guide); background: var(--bg); }
/* ::after = the two vertical guides, stopping 13px short of each rule so the crosses float */
.band::after { content: ""; position: absolute; top: 13px; bottom: 13px; left: calc(50% - var(--frame) / 2); width: var(--frame); border-inline: 1px solid var(--guide); pointer-events: none; z-index: 0; }
/* ::before = the two plus-crosses on the rule (a paper patch hides the rule around each) */
.band::before { content: ""; position: absolute; top: -13px; left: calc(50% - var(--frame) / 2 - 13px); width: calc(var(--frame) + 26px); height: 26px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--cross), var(--cross)) 7px 50% / 11px 1px no-repeat, linear-gradient(var(--cross), var(--cross)) 12.5px 50% / 1px 11px no-repeat,
    linear-gradient(var(--cross), var(--cross)) calc(100% - 7px) 50% / 11px 1px no-repeat, linear-gradient(var(--cross), var(--cross)) calc(100% - 12.5px) 50% / 1px 11px no-repeat,
    linear-gradient(var(--bg), var(--bg)) 0 0 / 26px 26px no-repeat, linear-gradient(var(--bg), var(--bg)) 100% 0 / 26px 26px no-repeat; }
.band > * { position: relative; z-index: 2; }
.band--tight { padding-block: 88px; }
.band--hero { border-top: 0; padding-block: 0 56px; }
.band--hero::before, .band--hero::after { display: none; }

/* ───────── Buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid transparent; font: 500 14px/1.5 var(--font); letter-spacing: -.5px; white-space: nowrap; cursor: pointer; background: var(--ink-bg); color: #fff; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn:hover { background: #2A2A2C; }
.btn:active { background-color: #000; }
.btn--soft { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn--soft:hover { background: #EDEAE6; border-color: #E2DFDB; }
.btn--white { background: #fff; color: var(--text); }
.btn--white:hover { background: var(--surface); }
.btn--lg { padding: 12px 24px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-go { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.5 var(--font); letter-spacing: -.5px; }
.link-go .ic { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.link-go:hover .ic, a:hover .link-go .ic { transform: translateX(3px); }
.ic { width: 20px; height: 20px; flex: none; }

/* ───────── Header ───────── */
.site-head { position: relative; z-index: 20; background: var(--bg); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.logo { display: inline-flex; align-items: center; gap: 4px; font: 600 21px/1 var(--font); letter-spacing: -.5px; color: var(--text); }
.logo .mark { width: 23px; height: 24px; }
/* nav hover = a sliding pill (Farhan 2026-10-13): one soft pill glides to the hovered link and rests on the current page; no underline sweep */
.nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font: 500 14px/1.5 var(--font); }
.nav > a, .nav__btn { position: relative; z-index: 1; padding: 5px 13px; border-radius: var(--r-pill); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.nav__glide { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--glide); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s var(--ease); }
.nav__glide.is-on { opacity: 1; }
html:not(.js) .nav > a:hover, html:not(.js) .nav > a[aria-current] { background: var(--glide); }   /* no-JS fallback */
.nav__btn .ic { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease); }
.nav__drop { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 14px); left: -3px; min-width: 200px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); display: grid; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
.nav__menu::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.nav__menu a { padding: 8px 12px; border-radius: 10px; font-weight: 400; }
.nav__menu a:hover { background: var(--surface); }
.nav__drop:hover .nav__menu, .nav__drop.open .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__drop:hover .nav__btn .ic, .nav__drop.open .nav__btn .ic { transform: rotate(180deg); }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; place-content: center; gap: 5px; }
.menu-btn i { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform var(--dur-fast) var(--ease); }
.site-head.open .menu-btn i:first-child { transform: translateY(3.25px) rotate(45deg); }
.site-head.open .menu-btn i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mnav { display: grid; gap: 4px; padding: 8px 0 20px; }
.mnav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); font: 500 16px/1.5 var(--font); }
.mnav .btn { margin-top: 12px; justify-self: start; }
.mnav[hidden] { display: none; }

/* ───────── Section heads ───────── */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: var(--head-gap); }
.head__copy { display: grid; gap: 12px; max-width: 440px; }
.head--center { justify-content: center; text-align: center; }
.head--center .head__copy { justify-items: center; max-width: 460px; }

/* ───────── Hero ───────── */
.hero { display: grid; gap: 96px; padding-top: 44px; }
.hero__main { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 608px); justify-content: space-between; align-items: center; gap: 48px; }
.hero__copy { display: grid; gap: 72px; align-content: center; }
.hero__lede { display: grid; gap: 32px; justify-items: start; }
.hero__lede > div { display: grid; gap: 16px; }
.hero h1 .accent { color: var(--accent); display: block; }
.hero__lede .t-lead { max-width: 300px; }
.ticks { display: grid; gap: 10px; font: 400 14px/1.5 var(--font); }
.ticks li { display: flex; align-items: center; gap: 12px; }
.ticks .ic { width: 22px; height: 22px; }
.logos { display: flex; align-items: center; justify-content: space-between; gap: 40px; font-size: 14px; }
.logos ul { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex: 0 1 720px; }
.wm { font-size: 20px; line-height: 1.05; color: var(--text); white-space: nowrap; }
.wm--a { font-family: "Instrument Sans", var(--font); font-weight: 600; letter-spacing: -1.3px; }
.wm--b { font-family: "Kumbh Sans", var(--font); font-weight: 600; }
.wm--c { font-family: "Instrument Sans", var(--font); font-weight: 500; letter-spacing: -1.3px; }
.wm--d { font-family: "Bricolage Grotesque", var(--font); font-weight: 600; letter-spacing: -.8px; }
.wm--e { font-family: "Kumbh Sans", var(--font); font-weight: 600; }

/* ───────── Colour fields (grainy blurred photo colour) ───────── */
.field { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #2A211C center / cover no-repeat; isolation: isolate; }
.field > img.field__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.field--fade::after { content: ""; position: absolute; inset: 32% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.48)); z-index: -1; pointer-events: none; }

/* chat card (hero) */
.chat { aspect-ratio: 608 / 489; border-radius: var(--r-xl); display: grid; align-content: space-between; padding: 46px 89px 28px; }
.chat__log { display: grid; gap: 12px; width: min(406px, 100%); margin-inline: auto; }
.bubble { width: fit-content; max-width: 252px; padding: 8px 16px; border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble) var(--r-xs); background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); }
.bubble--me { justify-self: end; max-width: 210px; border-radius: var(--r-bubble) var(--r-bubble) var(--r-xs) var(--r-bubble); background: var(--glass-me); border: 1px solid var(--glass-line); color: #fff; font-weight: 500; -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); }
.bubble + .bubble:not(.bubble--me) { margin-top: -4px; }
.chat__input { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 17px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-line); color: #fff; font: 500 14px/1.5 var(--font); -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); }
.chat__input .ic { width: 18px; height: 18px; }
.typing[hidden] { display: none; }
.typing { display: inline-flex; gap: 4px; padding: 13px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: zv-dot 1.2s infinite var(--ease); }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes zv-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* ───────── Service cards (paper → colour field on hover) ───────── */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.svc { position: relative; overflow: hidden; isolation: isolate; min-height: 266px; padding: 19px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.svc__bg, .svc::after { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur) var(--ease-out), transform 1.2s var(--ease-out); }
.svc__bg { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.svc::after { content: ""; top: 36%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); }
.svc .ic { width: 28px; height: 28px; }
.svc h3 { font: 500 16px/1.5 var(--font); letter-spacing: -.5px; }
.svc p { margin-top: 8px; font: 400 14px/1.5 var(--font); color: var(--text-2); max-width: 216px; transition: color var(--dur) var(--ease-out); }
.svc:hover, .svc.is-on { color: #fff; border-color: transparent; background-color: #3B3A2C; }
.svc:hover p, .svc.is-on p { color: var(--on-dark-2); }
.svc:hover .svc__bg, .svc.is-on .svc__bg, .svc:hover::after, .svc.is-on::after { opacity: 1; transform: none; }

/* ───────── Steps + panel ───────── */
.steps { display: grid; grid-template-columns: minmax(0, 373px) minmax(0, 595px); justify-content: space-between; align-items: center; gap: 48px; }
.step-list { display: grid; }
.step { padding-block: 24px; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step button { all: unset; cursor: pointer; display: block; width: 100%; font: 500 18px/1.5 var(--font); letter-spacing: -.5px; color: var(--text-2); padding-block: 8px; margin-block: -8px; transition: color var(--dur-fast) var(--ease); }
.step button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.step p { font: 400 14px/1.5 var(--font); color: var(--text-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .4s var(--ease), margin .4s var(--ease); }
.step.is-on button, .step button:hover { color: var(--text); }
.step.is-on p { max-height: 160px; opacity: 1; margin-top: 8px; }
.panel { position: relative; min-height: 391px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; padding: 40px 24px; overflow: hidden; }

/* ───────── Mock-up pieces (white cards on panels and fields) ───────── */
.mk { position: relative; width: min(100%, 371px); padding: 20px; border-radius: var(--r); background: var(--surface-2); color: var(--text); display: grid; gap: 28px; }
.mk__deck { position: relative; display: grid; }
.mk__deck::before, .mk__deck::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 88%; height: 60px; border-radius: 10px; background: #fff; opacity: .5; transform: translateX(-50%); z-index: 0; }
.mk__deck::after { bottom: -20px; width: 76%; opacity: .3; }
.mk__deck > .mk { z-index: 1; }
.mk__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 16px/1.5 var(--font); }
.mk__who { display: flex; align-items: center; gap: 12px; }
.mk__icon { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1.2px solid var(--line); background: var(--bg); display: grid; place-items: center; }
.mk__icon .ic { width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font: 500 12px/1.5 var(--font); letter-spacing: -.3px; color: var(--text); }
.checks { display: grid; gap: 12px; font: 400 14px/1.5 var(--font); color: var(--text-2); }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .ic { width: 16px; height: 16px; }
.checks--ink { color: var(--text); }
.checks .is-wait { color: var(--text-2); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text-2); border-right-color: transparent; flex: none; margin-inline: 1px; animation: zv-spin 1.4s linear infinite; }
@keyframes zv-spin { to { transform: rotate(360deg); } }
.meter { display: grid; gap: 10px; }
.meter__row { display: flex; justify-content: space-between; font: 500 14px/1.5 var(--font); }
.meter__row span:last-child { font-size: 12px; color: var(--text-2); }
.meter__track { height: 13px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.meter__fill { height: 100%; width: var(--v, 25%); background: var(--ink-bg); border-radius: inherit; transform-origin: left; }
.dots3 { display: inline-flex; gap: 4px; opacity: .5; } .dots3 i { width: 3px; height: 3px; border-radius: 50%; background: var(--text); }
.av-dot { width: 21px; height: 21px; border-radius: 50%; background: conic-gradient(from 200deg, #2B1A12, #C26B2C, #E9B47A, #2B1A12); }

/* ───────── Impact strip ───────── */
.impact { display: grid; gap: 64px; }
.impact > p { text-align: center; font: 400 18px/1.5 var(--font); }
.stats { display: flex; justify-content: space-between; gap: 32px; }
.stat { display: grid; gap: 12px; }
.stat b { font: 500 24px/1.3 var(--font); letter-spacing: -.5px; }
.stat span { font: 400 16px/1.5 var(--font); color: var(--text-2); }

/* ───────── Case stories ───────── */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.case { display: grid; gap: 32px; align-content: start; }
.case__cover { aspect-ratio: 536 / 349; border-radius: var(--r-lg); display: grid; place-items: center; }
.case__cover .field__bg { transition: transform 1.2s var(--ease-out); }
.case:hover .case__cover .field__bg { transform: scale(1.04); }
.logo-tile { padding: 14px 20px; border-radius: var(--r-sm); background: #fff; font: 700 22px/1 "Instrument Sans", var(--font); letter-spacing: -1px; color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.logo-tile sup { font-size: 9px; font-weight: 600; border: 1px solid currentColor; border-radius: 50%; width: 11px; height: 11px; display: inline-grid; place-items: center; letter-spacing: 0; }
.case__copy { display: grid; gap: 12px; }
.case__copy p { color: var(--text-2); max-width: 466px; }

/* ───────── Testimonial cards (social posts) ───────── */
.posts { display: flex; gap: 23px; width: max-content; padding-inline: 2px; }
.posts-rail { width: var(--frame); margin-inline: auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.posts-rail::-webkit-scrollbar { display: none; }
.posts-rail .posts { padding-inline: 0 24px; }
.post { scroll-snap-align: center; }
.post { width: 350px; flex: none; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 24px; align-content: start; }
.post__head { display: flex; justify-content: space-between; align-items: center; }
.post__who { display: flex; align-items: center; gap: 11px; font: 500 14px/1.5 var(--font); }
.post__who img { width: 37.5px; height: 37.5px; border-radius: 50%; object-fit: cover; }
.post__who small { display: block; font: 400 13px/1.5 var(--font); color: var(--text-2); }
.post__head .ic { width: 28px; height: 28px; }
.post__text { display: grid; gap: 24px; font: 400 16px/1.5 var(--font); }
.post__text b { font-weight: 500; }
.post__meta { display: flex; gap: 11px; font: 400 14px/1.5 var(--font); color: var(--text-2); }
.rail-ctrl { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.rail-ctrl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease); }
.rail-ctrl button:hover { background: #EDEAE6; }
.rail-ctrl .ic { width: 16px; height: 16px; }
.rail-ctrl [data-rail-prev] .ic { transform: scaleX(-1); }

/* ───────── Bento ───────── */
.bento { display: grid; grid-template-columns: 460fr 136fr 460fr; gap: 20px; }
.bento > :nth-child(1) { grid-column: 1 / 3; }
.bento > :nth-child(2) { grid-column: 3; }
.bento > :nth-child(3) { grid-column: 1; }
.bento > :nth-child(4) { grid-column: 2 / 4; }
.tile { position: relative; min-height: 420px; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 31px 32px 32px; isolation: isolate; }
.tile--paper { background: var(--surface); border: 1px solid var(--line); }
.tile--dark { color: #fff; }
.tile__copy { display: grid; gap: 8px; max-width: 440px; }
.tile__copy h3 { font: 500 20px/1.5 var(--font); letter-spacing: -.5px; }
.tile__copy p { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.tile--dark .tile__copy p { color: rgba(255,255,255,.92); }
.tile__art { position: absolute; left: 50%; top: 51px; transform: translateX(-50%); width: min(402px, 100% - 48px); }
.tile--paper .tile__art { top: 74px; width: auto; }
.tile > img.tile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; }
.tile--dark::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.45) 45%, rgba(0,0,0,.7)); z-index: -1; }
.tile--field .mk { gap: 24px; width: 100%; }
.mk-stat { display: flex; align-items: center; gap: 28px; padding: 36px 24px; border-radius: var(--r); background: #fff; }
.mk-stat__big { display: grid; gap: 8px; padding-right: 28px; border-right: 1px solid var(--line); }
.mk-stat__big b { font: 600 48px/1.05 var(--font); letter-spacing: -2.5px; }
.mk-stat__big span { font: 400 12px/1.5 var(--font); color: var(--text-2); }
.mk-stat__bars { display: grid; gap: 16px; width: 160px; font: 400 12px/1.5 var(--font); color: var(--text-2); }
.mk-stat__bars div { display: grid; gap: 6px; }
.mk-stat__bars strong { font-weight: 500; color: var(--text); }
.mk-stat__bars i { display: flex; align-items: center; gap: 8px; font-style: normal; }
.mk-stat__bars i::before { content: ""; height: 5px; border-radius: 9px; flex: 1; background: linear-gradient(90deg, var(--bar) var(--v), var(--line) var(--v)); }
.mk-chart { display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 20px 32px 18px; border-radius: var(--r); background: #fff; width: 188px; box-sizing: content-box; }
.mk-chart div { display: grid; justify-items: center; gap: 8px; width: 56px; font: 400 12px/1.4 var(--font); color: var(--text-2); text-align: center; }
.mk-chart b { font: 600 16px/1 var(--font); letter-spacing: -.5px; color: var(--text); }
.mk-chart i { display: block; width: 46px; height: var(--h); border-radius: 2px; background: var(--surface); }
.mk-chart div:last-child i { background: var(--bar); }

/* ───────── FAQ ───────── */
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 24px; font: 500 18px/1.5 var(--font); letter-spacing: -.5px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { width: 24px; height: 24px; transition: transform var(--dur-fast) var(--ease); }
.qa .ic--minus { display: none; }
.qa[open] .ic--plus { display: none; }
.qa[open] .ic--minus { display: block; }
.qa__a { padding: 0 24px 26px; margin-top: -12px; max-width: 700px; color: var(--text-2); }

/* ───────── Blog cards ───────── */
.posts-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.blog { display: grid; gap: 24px; align-content: start; }
.blog__img { aspect-ratio: 350 / 240; border-radius: var(--r); overflow: hidden; }
.blog__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.blog:hover .blog__img img { transform: scale(1.04); }
.blog__copy { display: grid; gap: 10px; }
.blog__copy h3 { font: 500 18px/1.5 var(--font); letter-spacing: -.5px; }
.blog__copy p { font: 400 14px/1.5 var(--font); color: var(--text-2); max-width: 327px; }

/* ───────── CTA (inline in the frame) ───────── */
.cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cta .head__copy { max-width: 470px; }

/* ───────── Footer ───────── */
.site-foot { position: relative; border-top: 1px solid var(--guide); overflow: hidden; }
.site-foot::before, .site-foot::after { content: ""; position: absolute; top: -1px; width: 26px; height: 13px; z-index: 1;
  background: linear-gradient(var(--cross), var(--cross)) center top / 11px 1px no-repeat, linear-gradient(var(--cross), var(--cross)) center top / 1px 6px no-repeat, var(--bg); }
.site-foot::before { left: calc(50% - var(--frame) / 2 - 13px); }
.site-foot::after { left: calc(50% + var(--frame) / 2 - 13px); }
.foot-top { display: flex; justify-content: space-between; gap: 40px; padding-top: 104px; }
.foot-brand { display: grid; gap: 16px; align-content: start; width: 213px; color: var(--text-2); font-size: 14px; }
.foot-cols { display: flex; justify-content: space-between; gap: 32px; flex: 0 1 897px; font: 400 14px/1.5 var(--font); }
.foot-cols h4 { font: 500 14px/1.5 var(--font); color: var(--text-2); margin-bottom: 24px; letter-spacing: -.5px; }
.foot-cols ul { display: grid; gap: 14px; }
.foot-cols a:hover { color: var(--text-2); }
.foot-giant { margin-top: 85px; display: flex; align-items: flex-start; gap: .1em; height: .5em; overflow: hidden; font-size: calc(var(--frame) * .38); }
.foot-giant .mark { width: .74em; height: .77em; flex: none; color: #EFECE9; }
.foot-giant span { font: 600 1em/.74 var(--font); letter-spacing: -.065em; color: #EFECE9; padding-right: .04em; }
.foot-giant .mark rect { fill: #EFECE9; }

/* ───────── About page pieces (shared so builders reuse them) ───────── */
.page-hero { display: grid; gap: 56px; padding-top: 40px; text-align: center; }
.page-hero .head__copy { justify-items: center; margin-inline: auto; max-width: 560px; gap: 16px; }

/* ───────── Responsive ───────── */
@media (max-width: 1240px) {
  .hero__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > :nth-child(n) { grid-column: auto; }
  .foot-top { flex-direction: column; }
  .foot-cols { flex-wrap: wrap; flex-basis: auto; justify-content: flex-start; gap: 40px 56px; }
}
@media (max-width: 900px) {
  :root { --inset: 20px; --section: 80px; --head-gap: 48px; --gutter: 16px; }
  .nav, .site-head__cta { display: none; }
  .menu-btn { display: grid; }
  .hero { gap: 64px; padding-top: 24px; }
  .hero__main, .steps { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy { gap: 40px; }
  .chat { padding: 28px 20px 20px; aspect-ratio: auto; min-height: 440px; gap: 32px; }
  .logos { flex-direction: column; align-items: flex-start; gap: 24px; }
  .logos ul { flex-wrap: wrap; gap: 20px 32px; justify-content: flex-start; }
  .head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .head--center { align-items: center; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .cases, .posts-3 { grid-template-columns: 1fr; gap: 48px; }
  .bento { grid-template-columns: 1fr; }
  .tile { min-height: 400px; padding: 24px; }
  .tile__art { top: 32px; }
  .tile--paper .tile__art { top: 48px; }
  .cta { flex-direction: column; align-items: flex-start; }
  .posts-rail .posts { padding-inline: var(--inset); }
  .post { width: 300px; scroll-snap-align: start; }
  .qa summary { padding: 22px 4px; font-size: 17px; }
  .qa__a { padding: 0 4px 22px; }
  .foot-top { padding-top: 64px; }
  .foot-giant { margin-top: 56px; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc { min-height: 220px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .mk-stat { gap: 16px; padding: 24px 16px; }
  .mk-stat__big { padding-right: 16px; }
  .mk-stat__big b { font-size: 40px; }
  .mk-stat__bars { width: 110px; }
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; }
}

/* step panel: one card per step, stacked; the active one shows */
.panel > [data-step-card] { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s var(--ease), transform .7s var(--ease-out); pointer-events: none; }
.panel > [data-step-card].is-on { opacity: 1; transform: none; pointer-events: auto; }

/* field with a text scrim (stats / CTA / footer bands on a field): dark tint between the image and the content */
.field--scrim::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.5)); z-index: -1; pointer-events: none; }
.field--scrim > img.field__bg { z-index: -2; }

/* ───────── About ───────── */
/* Zivo · About page (prefix ab-). Loads after zivo.css. Numbers from the source About frame at 1600. */

/* ── Hero: centred copy, two photos spanning the full frame (guide to guide), four stats ── */
.ab-hero { display: grid; gap: 64px; padding-top: 69px; }
.ab-hero__top { display: grid; gap: 72px; }
.ab-hero__copy { display: grid; gap: 16px; justify-items: center; text-align: center; }
.ab-hero__copy .t-lead { max-width: 430px; }
.ab-hero__copy .t-h1 { letter-spacing: -.05em; }
.ab-hero__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ab-hero__pics figure { aspect-ratio: 584 / 383; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ab-hero__pics img { width: 100%; height: 100%; object-fit: cover; }
.ab-stats .stat { gap: 10px; }

/* ── Founder quote ── */
.ab-quote-band { padding-block: 96px; }
.ab-quote { display: grid; gap: 40px; justify-items: start; }
.ab-quote blockquote { margin: 0; display: grid; gap: 1.3em; max-width: 1096px; font-size: clamp(20px, 2vw, 24px); line-height: 1.32; }
.ab-quote__mark { font: 500 44px/0 var(--font); letter-spacing: -2.5px; margin-right: .18em; vertical-align: -.32em; }
.ab-quote__by { display: flex; align-items: center; gap: 16px; }
.ab-quote__by img { width: 53px; height: 53px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.ab-quote__by span { display: grid; gap: 2px; }
.ab-quote__by b { font: 500 16px/1.5 var(--font); }
.ab-quote__by small { font: 400 14px/1.5 var(--font); color: var(--text-2); }

/* ── Mission: photo 535 left, copy 479 right ── */
.ab-mission { display: grid; grid-template-columns: minmax(0, 535px) minmax(0, 479px); justify-content: space-between; align-items: center; gap: 48px; }
.ab-mission__img { aspect-ratio: 535 / 350; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ab-mission__img img { width: 100%; height: 100%; object-fit: cover; }
.ab-mission__copy { display: grid; gap: 24px; }
.ab-mission__text { display: grid; gap: 14px; color: var(--text-2); }

/* ── Investors: centred rows of mark + wordmark, muted ink ── */
.ab-head { margin-bottom: 88px; }
.ab-inv { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 96px; margin-block: -23px; max-width: 1001px; margin-inline: auto; }
.ab-inv li { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; line-height: 1.05; color: #555456; white-space: nowrap; margin-block: 23px; }
.ab-inv svg { width: auto; height: 25px; flex: none; }
.ab-inv .ab-inv__br { flex-basis: 100%; height: 0; margin: 0; }

/* ── Team: 4×2 portrait cards, name + role on a bottom fade ── */
.ab-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ab-person { position: relative; aspect-ratio: 256 / 291; border-radius: var(--r); overflow: hidden; background: #2E2B29; isolation: isolate; }
.ab-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; transition: transform 1.2s var(--ease-out); }
.ab-person::after { content: ""; position: absolute; inset: auto 0 0; height: 53%; z-index: -1; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.17) 42%, rgba(0,0,0,.68)); -webkit-backdrop-filter: blur(3.45px); backdrop-filter: blur(3.45px); -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }
.ab-person:hover img { transform: scale(1.04); }
.ab-person span { position: absolute; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 1px; color: #fff; }
.ab-person b { font: 500 16px/1.5 var(--font); white-space: nowrap; }
.ab-person small { font: 400 14px/1.5 var(--font); color: rgba(253, 252, 252, .78); }

@media (max-width: 1240px) {
  .ab-inv { column-gap: 64px; }
}
@media (max-width: 900px) {
  .ab-hero { gap: 48px; padding-top: 32px; }
  .ab-hero__top { gap: 40px; }
  .ab-hero__pics { gap: 16px; }
  .ab-quote-band { padding-block: 72px; }
  .ab-quote { gap: 32px; }
  .ab-mission { grid-template-columns: 1fr; gap: 40px; }
  .ab-head { margin-bottom: 48px; }
  .ab-inv { column-gap: 40px; margin-block: -14px; }
  .ab-inv li { margin-block: 14px; }
  .ab-inv .ab-inv__br { display: none; }
  .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .ab-hero__pics { grid-template-columns: 1fr; }
  .ab-quote__mark { font-size: 36px; }
  .ab-inv { column-gap: 28px; margin-block: -12px; }
  .ab-inv li { font-size: 18px; gap: 8px; margin-block: 12px; }
  .ab-inv svg { height: 20px; }
  .ab-person span { left: 14px; right: 14px; bottom: 12px; }
  .ab-person b { font-size: 14px; white-space: normal; }
  .ab-person small { font-size: 13px; }
}

/* ───────── Styleguide ───────── */
/* Zivo style guide page (prefix sg-). Only layout for the specimen page; every component shown is the real zivo.css class. */

/* ───────── Overview board (first screen = store image) ───────── */
.sg-top { padding-top: 32px; }
.sg-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.sg-intro__copy { display: grid; gap: 14px; justify-items: start; max-width: 560px; }
.sg-intro h1 { letter-spacing: -.048em; }
.sg-intro h1 .accent { color: var(--accent); }
.sg-intro__copy .t-lead { max-width: 470px; }
.sg-intro__meta { display: grid; gap: 14px; justify-items: end; }
.sg-intro__meta .t-meta { text-align: right; }

.sg-board { display: grid; grid-template-columns: minmax(0, 340fr) minmax(0, 396fr) minmax(0, 320fr); grid-template-rows: auto auto; gap: 20px; }
.sg-card { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 22px; display: grid; align-content: space-between; gap: 20px; min-width: 0; }
.sg-card__k { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 13px/1.5 var(--font); letter-spacing: -.4px; color: var(--text-2); }
.sg-card__k code { font: 400 12px/1.5 var(--mono); letter-spacing: 0; }

/* type tile */
.sg-aa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sg-aa b { font: 500 120px/.82 var(--font-display); letter-spacing: -.07em; }
.sg-aa ul { display: grid; gap: 4px; font: 400 13px/1.4 var(--font); color: var(--text-2); text-align: right; }
.sg-aa li strong { font-weight: 500; color: var(--text); }
.sg-weights { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.sg-weights p { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sg-weights span { font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); }

/* palette tile */
.sg-pal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sg-pal li { display: grid; gap: 6px; font: 500 12px/1.3 var(--font); letter-spacing: -.3px; min-width: 0; }
.sg-pal li small { font: 400 12px/1.4 var(--mono); letter-spacing: 0; color: var(--text-2); }
.sg-pal i { display: block; aspect-ratio: 1 / .78; border-radius: 12px; border: 1px solid var(--line); background: var(--c); }

/* chat tile: the real hero chat card on a field, sized to the board */
.sg-chat { grid-row: 1 / 3; grid-column: 2; aspect-ratio: auto; border-radius: var(--r-lg); padding: 36px 28px 24px; gap: 28px; min-height: 0; }
.sg-chat .chat__log { width: 100%; }
.sg-chat .bubble.typing { display: inline-flex; }
.sg-chat__k { position: absolute; top: 16px; left: 20px; }

/* component tiles */
.sg-panel { padding: 30px 22px 40px; place-items: center; align-content: center; }
.sg-panel .mk__deck { width: 100%; }
.sg-panel .mk { width: 100%; gap: 22px; }
.sg-ui { align-content: space-between; gap: 16px; }
.sg-ui .btn-row { gap: 10px; }
.sg-swatch-line { display: flex; gap: 6px; }
.sg-swatch-line img { width: 100%; min-width: 0; height: 76px; object-fit: cover; border-radius: var(--r-sm); flex: 1; }

/* ───────── Shared section layout ───────── */
.sg-sec .head { margin-bottom: 56px; }
.sg-sub { font: 500 20px/1.4 var(--font); letter-spacing: -.5px; color: var(--text); margin: 56px 0 20px; display: flex; align-items: center; gap: 12px; }
.sg-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sg-sub:first-child { margin-top: 0; }
.sg-cap { display: grid; gap: 2px; font: 400 13px/1.5 var(--font); letter-spacing: -.4px; color: var(--text-2); }
.sg-cap b { font-weight: 500; color: var(--text); }
.sg-cap code, .sg-code { font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); overflow-wrap: anywhere; }
.sg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.sg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sg-spec { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sg-stage { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 28px; display: grid; place-items: center; gap: 16px; min-width: 0; }
.sg-stage--paper { background: var(--bg); }
.sg-stage > * { max-width: 100%; min-width: 0; }
.sg-stage .btn-row { justify-content: center; }
.sg-stage--left { place-items: start; }

/* colour swatches */
.sg-sw { display: grid; gap: 12px; min-width: 0; }
.sg-sw__c { height: 104px; border-radius: var(--r); border: 1px solid var(--line); background: var(--c); }
.sg-sw__c--field { position: relative; overflow: hidden; display: grid; place-items: center; background: #2A211C; }
.sg-sw__c--field img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-sw__c--field span { position: relative; width: 64%; height: 44%; border-radius: 12px; background: var(--c); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); }
.sg-sw__c--rule { background: var(--bg); position: relative; }
.sg-sw__c--rule::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--c); }
.sg-sw__c--rule::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--c); }

/* type rows */
.sg-type { border-top: 1px solid var(--line); }
.sg-type__row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 32px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.sg-type__row > :first-child { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.sg-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.sg-font { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 24px; display: grid; gap: 24px; min-width: 0; }
.sg-font > b { font: 500 56px/1 var(--f); letter-spacing: -.05em; }
.sg-wms { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; }

/* shape & space */
.sg-radii { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.sg-radius { display: grid; gap: 12px; min-width: 0; }
.sg-radius i { display: block; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--rr); }
.sg-space { display: grid; gap: 14px; }
.sg-space li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 20px; }
.sg-space i { display: block; height: 14px; width: min(100%, var(--w)); border-radius: 4px; background: var(--accent-soft); border: 1px solid #EBCBB0; }
.sg-space span:last-child { font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); text-align: right; }
.sg-motion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sg-track { position: relative; height: 40px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); width: 100%; }
.sg-track i { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-bg); animation: sg-glide 3.2s var(--e) infinite alternate; }
@keyframes sg-glide { to { left: calc(100% - 31px); } }
.static .sg-track i { left: calc(70% - 31px); }

/* blueprint band demo: a real .band with a local frame */
.sg-blue { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.sg-blue .band { --frame: calc(100% - 64px); padding-block: 44px; }
.sg-blue .band:first-child { border-top: 0; }
.sg-blue .band:first-child::before { display: none; }
.sg-blue__in { padding-inline: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* components */
.sg-nav.nav { display: flex; }
.sg-chatfield { padding: 32px 28px 24px; display: grid; gap: 28px; align-content: space-between; min-height: 420px; }
.sg-chatfield .chat__log { width: 100%; }
.sg-chatfield .typing { display: inline-flex; }
.sg-deckstage { padding: 40px 28px 52px; }
.sg-deckstage .mk { width: 100%; max-width: 371px; }
.sg-fieldstage { min-height: 260px; display: grid; place-items: center; padding: 28px; border-radius: var(--r-lg); }
.sg-svc .svc { min-height: 266px; }
.sg-steps { width: 100%; }
.sg-post .post { width: 100%; }
.sg-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sg-fields figure { display: grid; gap: 10px; min-width: 0; }
.sg-fields .field { aspect-ratio: 4 / 3; border-radius: var(--r); }
.sg-icons { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.sg-icons li { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); text-align: center; overflow-wrap: anywhere; }
.sg-icons .ic { width: 24px; height: 24px; color: var(--text); }
.sg-icons .mark { width: 23px; height: 24px; color: var(--text); }
.sg-tiles .tile { min-height: 400px; }
.sg-tiles .tile--dark:not(.tile--field)::after { inset: 20% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72)); }
.sg-stats .stats { flex-wrap: wrap; }

/* ───────── Responsive ───────── */
@media (max-width: 1240px) {
  .sg-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sg-chat { grid-row: auto; grid-column: 1 / -1; min-height: 460px; }
  .sg-grid, .sg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sg-radii { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sg-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sg-intro__meta { justify-items: start; }
  .sg-intro__meta .t-meta { text-align: left; }
  .sg-board { grid-template-columns: 1fr; }
  .sg-grid--3, .sg-grid--2, .sg-fonts, .sg-motion { grid-template-columns: 1fr; }
  .sg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-type__row { grid-template-columns: 1fr; gap: 10px; padding-block: 20px; }
  .sg-space li { grid-template-columns: 120px minmax(0, 1fr) 56px; gap: 12px; }
  .sg-nav.nav { gap: 20px; padding: 8px 18px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .sg-grid, .sg-grid--5 { grid-template-columns: 1fr; }
  .sg-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-aa b { font-size: 92px; }
  .sg-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-radii { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-space li { grid-template-columns: 1fr 52px; }
  .sg-space li i { grid-column: 1 / -1; grid-row: 2; }
  .sg-stage, .sg-card { padding: 18px; }
  .sg-chatfield, .sg-chat { padding: 28px 16px 18px; }
  .sg-nav.nav { border-radius: var(--r); }
}

/* ───────── Variants ───────── */
/* Zivo · section variants library (variants.html). Prefix v-. Built only from Zivo DNA: Geist, paper, ink/muted,
   #F5F3F1 cards with hairlines, pill buttons, blueprint bands, grainy colour fields, white mock-up cards. */

/* ───────── Intro + jump list ───────── */
.v-intro { padding-block: 48px 88px; }
.v-intro__in { display: grid; gap: 20px; justify-items: start; }
.v-intro .t-lead { max-width: 620px; }
.v-jump { display: grid; gap: 10px; width: 100%; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-jump span { width: 128px; font: 500 14px/1.5 var(--font); color: var(--text); }
.v-jump a { padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 400 13px/1.5 var(--mono); letter-spacing: 0; color: var(--text); transition: background-color var(--dur-fast) var(--ease); }
.v-jump a:hover { background: #EDEAE6; }

/* ───────── Label above each variant ───────── */
.v-item { scroll-margin-top: 16px; }
.v-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 56px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.v-label__name { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.5 var(--font); color: var(--text); }
.v-label__name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.v-label__cls { font: 400 12px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); overflow-wrap: anywhere; }
.v-cap { flex-basis: 100%; max-width: 640px; font: 400 14px/1.5 var(--font); color: var(--text-2); }
.v-item--foot { padding-bottom: 0; overflow: hidden; }
.v-item--foot .inner:not(.v-label) { padding-bottom: 72px; }
.v-fh { font: 500 14px/1.5 var(--font); letter-spacing: -.5px; color: var(--text-2); margin-bottom: 20px; }

/* ───────── Hero A (gold, compact) ───────── */
.v-compact.hero { padding-top: 0; gap: 72px; }
.v-compact .accent { color: var(--accent); display: block; }

/* ───────── Hero B · statement over a field band ───────── */
.v-hero-b { display: grid; gap: 56px; }
.v-hero-b__copy { justify-items: center; text-align: center; margin-inline: auto; max-width: 560px; gap: 16px; }
.v-hero-b__copy .accent { color: var(--accent); }
.v-hero-b__copy .btn-row { justify-content: center; margin-top: 16px; }
.v-hero-b__band { position: relative; min-height: 420px; border-radius: var(--r-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px; padding: 56px 48px; }
.v-float { width: 100%; gap: 20px; }
.v-float--a { transform: translateY(-36px); }
.v-float--c { transform: translateY(40px); }

/* ───────── Hero C · photo left, copy right ───────── */
.v-hero-c { display: grid; gap: 88px; }
.v-hero-c__main { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px); justify-content: space-between; align-items: center; gap: 48px; }
.v-hero-c__photo { position: relative; aspect-ratio: 560 / 440; border-radius: var(--r-xl); overflow: hidden; }
.v-hero-c__photo img { width: 100%; height: 100%; object-fit: cover; }
.v-hero-c__tag { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-line); color: #fff; font: 500 14px/1.5 var(--font); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v-hero-c__copy { display: grid; gap: 20px; justify-items: start; }
.v-hero-c__copy .accent { color: var(--accent); display: block; }
.v-hero-c__copy .btn-row { margin-top: 12px; }
.v-hero-c__copy .ticks { margin-top: 20px; }

/* ───────── Hero D · statement + stats ───────── */
.v-hero-d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px 64px; align-items: end; }
.v-hero-d__title { max-width: 720px; }
.v-hero-d__title .accent { color: var(--accent); display: block; }
.v-hero-d__side { display: grid; gap: 24px; justify-items: start; }
.v-hero-d__stats { grid-column: 1 / -1; padding-top: 40px; margin-top: 24px; border-top: 1px solid var(--line); }

/* ───────── Features C · alternating rows ───────── */
.v-rows { display: grid; gap: 88px; }
.v-row { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 596px); justify-content: space-between; align-items: center; gap: 48px; }
.v-row--flip { grid-template-columns: minmax(0, 596px) minmax(0, 400px); }
.v-row--flip .v-row__copy { order: 2; }
.v-row__copy { display: grid; gap: 16px; justify-items: start; }
.v-row__copy p { color: var(--text-2); max-width: 380px; }
.v-row__copy .link-go { margin-top: 8px; }
.v-row__media { position: relative; aspect-ratio: 596 / 380; border-radius: var(--r-lg); display: grid; place-items: center; padding: 32px; }
.v-row__media .mk__deck { width: min(100%, 340px); }
.v-row__media .mk { gap: 20px; }
.v-row__media--photo { overflow: hidden; place-items: end start; padding: 20px; }
.v-row__media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-row__pin { width: auto; padding: 14px 16px; }

/* ───────── Process B · three columns ───────── */
.v-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.v-col { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.v-col.is-on { border-top-color: var(--ink-bg); }
.v-col__num { font: 500 14px/1.5 var(--mono); letter-spacing: 0; color: var(--text-2); }
.v-col > p { font-size: 14px; color: var(--text-2); max-width: 300px; }
.v-col__mock { width: 100%; margin-top: 24px; gap: 20px; background: var(--surface); border: 1px solid var(--line); }
.v-col__mock .chip { background: #fff; }

/* ───────── Social proof B · big quote + logo wall ───────── */
.v-proof-b { display: grid; gap: 80px; }
.v-quote { display: grid; gap: 32px; max-width: 820px; }
.v-quote__mark { font: 500 72px/.6 var(--font); color: var(--accent); height: 34px; }
.v-quote__text { font: 500 clamp(24px, 3vw, 34px)/1.3 var(--font); letter-spacing: -1px; }
.v-quote__text p, .v-foot-d__top .t-h2 { text-wrap: balance; }
.v-quote__who { display: flex; align-items: center; gap: 14px; }
.v-quote__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.v-quote__who span { display: grid; font-size: 16px; }
.v-quote__who b { font-weight: 500; }
.v-quote__who small { font-size: 14px; color: var(--text-2); }
.v-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.v-logos li { display: grid; place-items: center; min-height: 104px; padding: 16px; border-left: 1px solid var(--line); color: var(--text-2); }
.v-logos li:first-child { border-left: 0; }

/* ───────── Stats B · stats on a field ───────── */
.v-fstats { min-height: 420px; border-radius: var(--r-xl); padding: 56px 48px 48px; display: grid; align-content: space-between; gap: 80px; color: #fff; }
.v-fstats::before { content: ""; position: absolute; inset: 0; background: rgba(19,19,20,.22); z-index: -1; pointer-events: none; }
.v-fstats .t-h2 { max-width: 420px; }
.v-fstats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.v-fstats__grid .stat { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.35); }
.v-fstats__grid .stat b { font-size: 40px; letter-spacing: -1.6px; line-height: 1.05; }
.v-fstats__grid .stat span { color: rgba(255,255,255,.9); font-size: 14px; }

/* ───────── Pricing A · plan cards + toggle ───────── */
.v-toggle { display: flex; width: fit-content; margin: -32px auto 48px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.v-toggle button { padding: 8px 18px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; font: 500 14px/1.5 var(--font); color: var(--text-2); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.v-toggle button span { color: var(--success); margin-left: 4px; }
.v-toggle [aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.v-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.v-plan { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 28px 24px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.v-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-plan__sub { font-size: 14px; color: var(--text-2); }
.v-plan__price { display: flex; align-items: baseline; gap: 6px; margin-block: 20px 12px; }
.v-plan__price b { font: 600 40px/1 var(--font); letter-spacing: -1.8px; }
.v-plan__price span { font-size: 14px; color: var(--text-2); }
.v-plan .checks { padding-top: 20px; border-top: 1px solid var(--line); align-content: start; }
.v-plan .btn { margin-top: 24px; width: 100%; }
.v-plan--field { color: #fff; border-color: transparent; background: #1E2A33; }
.v-plan--field > .field__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.v-plan--field::after { content: ""; position: absolute; inset: 0; background: rgba(19,19,20,.42); z-index: -1; }
.v-plan--field .v-plan__sub, .v-plan--field .v-plan__price span { color: rgba(255,255,255,.88); }
.v-plan--field .checks { color: #fff; border-top-color: rgba(255,255,255,.3); }
.v-plan--field .checks .ic { color: #fff; }

/* ───────── Pricing B · comparison table ───────── */
.v-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.v-table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 14px/1.5 var(--font); }
.v-table th, .v-table td { padding: 18px 24px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.v-table thead th { border-top: 0; font: 500 16px/1.5 var(--font); padding-block: 24px; }
.v-table thead small { display: block; font: 400 13px/1.5 var(--font); color: var(--text-2); }
.v-table thead .chip { margin-left: 6px; vertical-align: 2px; }
.v-table tbody th { font-weight: 500; color: var(--text); }
.v-table td { color: var(--text-2); }
.v-table td .ic { width: 18px; height: 18px; color: var(--text); }
.v-table__on { background: var(--surface); }
.v-dash { color: var(--text-2); }
.v-table__cta td, .v-table__cta th { padding-block: 20px 24px; }

/* ───────── Case stories B · lead cover + list ───────── */
.v-cases { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 400px); justify-content: space-between; gap: 48px; align-items: start; }
.v-cases__lead { display: grid; gap: 28px; }
.v-cases__cover { aspect-ratio: 640 / 420; border-radius: var(--r-lg); display: grid; place-items: center; }
.v-cases__cover .field__bg { transition: transform 1.2s var(--ease-out); }
.v-cases__lead:hover .field__bg { transform: scale(1.04); }
.v-cases__result { position: absolute; right: 20px; bottom: 20px; width: 260px; gap: 16px; padding: 16px; }
.v-cases__list { border-top: 1px solid var(--line); }
.v-cases__list a { display: grid; gap: 10px; justify-items: start; padding-block: 28px; border-bottom: 1px solid var(--line); }
.v-cases__list b { font: 500 18px/1.4 var(--font); letter-spacing: -.5px; }
.v-cases__list .link-go { color: var(--text-2); transition: color var(--dur-fast) var(--ease); }
.v-cases__list a:hover .link-go { color: var(--text); }

/* ───────── CTA B · field band with chat input ───────── */
.v-cta-b { min-height: 380px; border-radius: var(--r-xl); display: grid; place-content: center; justify-items: center; gap: 14px; padding: 64px 24px; text-align: center; color: #fff; }
.v-cta-b::before { content: ""; position: absolute; inset: 0; background: rgba(19,19,20,.3); z-index: -1; }
.v-cta-b p { color: rgba(255,255,255,.92); }
.v-cta-b__input { width: min(460px, 100%); margin-top: 24px; transition: background-color var(--dur-fast) var(--ease); }
.v-cta-b__input:hover { background: rgba(19,19,20,.62); }

/* ───────── CTA C · split with form ───────── */
.v-cta-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.v-cta-c__photo { border-radius: var(--r-lg); overflow: hidden; min-height: 360px; }
.v-cta-c__photo img { width: 100%; height: 100%; object-fit: cover; }
.v-cta-c__card { display: grid; align-content: center; gap: 16px; padding: 48px 44px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.v-form { display: flex; gap: 8px; margin-top: 16px; padding: 5px 5px 5px 18px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); }
.v-input { flex: 1; min-width: 0; border: 0; background: none; font: 400 14px/1.5 var(--font); letter-spacing: -.5px; color: var(--text); }
.v-input::placeholder { color: var(--text-2); }
.v-input:focus { outline: none; }
.v-form:focus-within, .v-foot-c__news:focus-within { border-color: var(--text-2); }

/* ───────── CTA D · centred statement ───────── */
.v-cta-d { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: 24px; }
.v-cta-d .t-display { max-width: 760px; }
.v-cta-d .accent { color: var(--accent); display: block; }
.v-cta-d .btn-row { justify-content: center; margin-top: 16px; }

/* ───────── Footer A (gold) ───────── */
.v-foot-a .foot-top { padding-top: 0; }
.v-foot-a.wrap { padding-inline: var(--inset); }
.v-foot-a .foot-cols { flex-basis: 560px; }
.v-foot-a .foot-cols a:hover, .v-foot-b__cols a:hover, .v-foot-b__base a:hover, .v-foot-c nav a:hover { color: var(--text-2); }
.v-foot-a .foot-cols a, .v-foot-d a:not(.btn) { transition: color var(--dur-fast) var(--ease); }
.v-item--foot .v-foot-a { padding-bottom: 0; }
.v-foot-a .foot-giant { margin-top: 64px; margin-inline: calc(var(--inset) * -1); }

/* ───────── Footer B · multi-column ───────── */
.v-foot-b { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 640px); justify-content: space-between; gap: 48px; }
.v-foot-b .logo, .v-foot-c .logo, .v-foot-b a, .v-foot-c a:not(.btn) { transition: color var(--dur-fast) var(--ease); }
.v-foot-b__brand { display: grid; gap: 16px; align-content: start; }
.v-foot-b__brand p { font-size: 14px; color: var(--text-2); max-width: 240px; }
.v-foot-b__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
.v-foot-b__cols ul, .v-foot-d__cols ul { display: grid; gap: 12px; }
.v-foot-b__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }

/* ───────── Footer C · newsletter row ───────── */
.v-foot-c { display: grid; gap: 32px; }
.v-foot-c__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.v-foot-c__news { display: flex; gap: 8px; width: min(440px, 100%); padding: 5px 5px 5px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.v-foot-c__links { padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.v-foot-c__links nav { display: flex; flex-wrap: wrap; gap: 24px; color: var(--text); }

/* ───────── Footer D · dark field band ───────── */
.v-foot-d { border-radius: var(--r-xl); padding: 56px 48px 32px; display: grid; gap: 64px; color: #fff; background: #1A1410; }
.v-foot-d::before { content: ""; position: absolute; inset: 0; background: rgba(12,10,9,.62); z-index: -1; }
.v-foot-d__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.v-foot-d__top .t-h2 { max-width: 420px; }
.v-foot-d__cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
.v-foot-d .logo { color: #fff; align-self: start; }
.v-foot-d .logo .mark path { fill: #1A1410; }
.v-foot-d .v-fh { color: rgba(255,255,255,.78); }
.v-foot-d a:not(.btn):hover { color: rgba(255,255,255,.78); }
.v-foot-d__base { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); font-size: 13px; color: rgba(255,255,255,.82); }

/* ───────── Responsive ───────── */
@media (max-width: 1240px) {
  .v-hero-c__main, .v-row, .v-row--flip, .v-cases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-foot-b { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .v-intro { padding-block: 32px 64px; }
  .v-jump span { width: 100%; }
  .v-label { margin-bottom: 40px; }
  .v-hero-b__band { grid-template-columns: 1fr; padding: 32px 20px; gap: 16px; min-height: 0; }
  .v-float--a, .v-float--c { transform: none; }
  .v-float { width: min(100%, 360px); justify-self: center; }
  .v-hero-c { gap: 56px; }
  .v-hero-c__main, .v-row, .v-row--flip, .v-cases, .v-cta-c { grid-template-columns: 1fr; }
  .v-row--flip .v-row__copy { order: 0; }
  .v-rows { gap: 64px; }
  .v-row__media { aspect-ratio: auto; min-height: 300px; padding: 24px 20px; }
  .v-hero-d { grid-template-columns: 1fr; gap: 32px; }
  .v-hero-d__stats { margin-top: 8px; }
  .v-cols { grid-template-columns: 1fr; gap: 48px; }
  .v-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-logos li:nth-child(4) { border-left: 0; }
  .v-logos li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .v-fstats { padding: 40px 24px 32px; gap: 56px; }
  .v-fstats__grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .v-plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .v-cta-c__card { padding: 36px 24px; }
  .v-cta-c__photo { min-height: 260px; }
  .v-foot-d { padding: 40px 24px 24px; gap: 48px; }
  .v-foot-d__top { flex-direction: column; align-items: flex-start; }
  .v-foot-d__cols { grid-template-columns: 1fr 1fr; }
  .v-foot-d__cols .logo { grid-column: 1 / -1; }
  .v-foot-c__row { flex-direction: column; align-items: flex-start; }
  .v-foot-b__cols { grid-template-columns: 1fr 1fr; }
  .v-foot-a.wrap { padding-inline: var(--inset); }
}
@media (max-width: 560px) {
  .v-cases__result { position: relative; right: auto; bottom: auto; width: calc(100% - 32px); margin-top: auto; }
  .v-cases__cover { place-items: center; align-content: space-evenly; padding: 16px 0; aspect-ratio: auto; min-height: 300px; }
  .v-fstats__grid .stat b { font-size: 32px; }
  .v-quote__text { font-size: 22px; }
  .v-logos li { min-height: 80px; padding: 12px 8px; }
  .v-logos .wm { font-size: 16px; }
  .v-form, .v-foot-c__news { flex-direction: column; padding: 8px; border-radius: var(--r); }
  .v-form .v-input, .v-foot-c__news .v-input { padding: 8px 10px; }
  .v-foot-c__links { flex-direction: column; align-items: flex-start; }
  .v-foot-b__base { flex-direction: column; }
  .v-table th, .v-table td { padding: 14px 16px; }
}

/* scrims sit between the field image and the content */
.field.v-fstats > img.field__bg, .field.v-cta-b > img.field__bg, .field.v-foot-d > img.field__bg { z-index: -2; }

/* bento photo tile line reads crisp on the thumbs-up photo */
#features-b .tile--dark .tile__copy p { color: rgba(255,255,255,.92); }
/* keep white text crisp wherever the field is bright (contrast check samples the worst 10%) */
#features-b .tile--field::after { display: block; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6)); }
#hero-a .bubble--me { background: var(--glass-strong); }
.v-fstats::before { background: rgba(19,19,20,.3); }
.v-fstats__grid .stat span { color: #fff; }
#features-b .tile--dark:not(.tile--field)::after { inset: 25% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.66)); }
#features-b .tile--dark .tile__copy p { color: #fff; }