/* Inkline Digital — layered studio */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --cream: #F7ECE7;
  --paper: #FFFAF7;
  --sand: #F0E1D9;
  --ink: #151F27;
  --ink-2: #1F2B36;
  --ink-3: #2B3947;
  --terra: #CE5B45;
  --blue: #A1BDD4;
  --blue-soft: #DCE7F0;

  --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--cream));
  --cream-soft: color-mix(in srgb, var(--cream) 80%, var(--ink));
  --line: color-mix(in srgb, var(--ink) 12%, transparent);

  --sh-1: 0 1px 2px rgb(21 31 39 / .05), 0 6px 16px -6px rgb(21 31 39 / .12);
  --sh-2: 0 2px 6px rgb(21 31 39 / .06), 0 22px 44px -18px rgb(21 31 39 / .32);
  --sh-3: 0 10px 20px -10px rgb(21 31 39 / .25), 0 36px 70px -24px rgb(21 31 39 / .42);
  --fs-title: clamp(1.6rem, 2.6vw, 2.3rem);
  --r-sm: 12px; --r: 16px; --r-lg: 24px; --r-xl: 32px;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --letter: "Jost", "Futura", "Century Gothic", sans-serif;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 7.5vw, 108px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--cream); scroll-behavior: smooth; scroll-padding-top: 90px; scrollbar-color: var(--ink-soft) var(--cream); scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html:has(body.menu-open) { overflow: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--terra); color: var(--cream); }
:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
.section-ink :focus-visible, .site-footer :focus-visible, .panel-ai :focus-visible, .panel-mkt :focus-visible, .cta :focus-visible { outline-color: var(--blue); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--cream); font-family: var(--letter); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

/* ---------- type ---------- */
.display, .headline { font-family: var(--sans); text-wrap: balance; letter-spacing: -0.025em; }
.display { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: .98; font-weight: 820; font-stretch: 114%; }
.headline { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.02; font-weight: 790; font-stretch: 112%; }
.display em, .headline em { font-style: normal; color: var(--terra); }
h3 { font-size: 1.25rem; line-height: 1.2; font-weight: 720; font-stretch: 104%; letter-spacing: -0.012em; text-wrap: balance; }
.lede { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.58; color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ---------- buttons + links ---------- */
.button {
  --bg: var(--terra); --fg: var(--cream); --bd: var(--terra);
  display: inline-flex; align-items: center; gap: .65em; min-height: 48px; padding: 12px 22px;
  background: var(--bg); color: var(--fg); border: 0; border-radius: 12px;
  font: 500 0.9rem/1.2 var(--letter); letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 8px 18px -10px rgb(21 31 39 / .5);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.button:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 14px 24px -12px rgb(21 31 39 / .55); }
.button:active { transform: translateY(0); }
.button-line { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.button-line:hover { --bg: var(--ink); --fg: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button-ink { --bg: var(--ink); --fg: var(--cream); --bd: var(--ink); }
.button-ink:hover { --bg: var(--ink-3); --bd: var(--ink-3); }
.button-light { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.button-light:hover { --bg: #fff; --bd: #fff; }
.button-lg { min-height: 56px; padding: 14px 26px; font-size: 1.0625rem; }
.i-arrow { width: 1em; height: 1em; flex: none; transition: transform .3s var(--ease-out); }
.button:hover .i-arrow, .text-link:hover .i-arrow { transform: translateX(3px); }
.button:hover .i-arrow:has(use[href="#i-arrow-ne"]) { transform: translate(2px, -2px); }
.text-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: 500 0.9rem/1 var(--letter); letter-spacing: .02em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .25s; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- shapes ---------- */
.shape { position: absolute; pointer-events: none; overflow: visible; filter: drop-shadow(0 18px 22px rgb(21 31 39 / .22)); }

/* ---------- header + mega menu ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--line); }
.header-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; color: var(--ink); }
.brand .logo { height: 36px; width: auto; aspect-ratio: 465 / 125; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font: 500 0.9rem/1 var(--letter); text-decoration: none; transition: background-color .2s; }
.nav-link:hover, .nav-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.i-chev { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.nav-trigger[aria-expanded="true"] .i-chev { transform: rotate(180deg); }
.nav-item { position: static; }
.header-row { position: relative; }
.nav-cta { margin-left: 12px; min-height: 44px; padding-block: 10px; }
.mega { position: absolute; top: calc(100% + 12px); left: 50%; width: min(960px, 100%); translate: -50% 0; padding: 12px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s; }
.nav-trigger[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega-link { display: grid; grid-template-columns: 40px 1fr; gap: 12px 14px; align-content: start; align-items: start; padding: 18px 16px; border-radius: var(--r); text-decoration: none; transition: background-color .2s; }
.mega-link:hover { background: var(--cream); }
.mega-shape { width: 36px; height: 36px; filter: drop-shadow(0 6px 8px rgb(21 31 39 / .2)); }
.mega-link b, .mega-feature b { display: block; font: 700 1.0625rem/1.3 var(--sans); }
.mega-link small, .mega-feature small { display: block; margin-top: 4px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
.mega-subs { grid-column: 2; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font: 500 0.85rem/1.3 var(--letter); color: var(--ink); }
.mega-subs li { display: flex; align-items: baseline; gap: 8px; }
.mega-subs li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--terra); translate: 0 -2px; }
.mega-link:nth-child(2) .mega-subs li::before { background: #84A4BF; }
.mega-link:nth-child(3) .mega-subs li::before { background: var(--ink); }
.mega-link[aria-current] { background: var(--cream); }
.mega-feature { grid-column: 1 / -1; display: grid; align-content: space-between; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--ink); color: var(--cream); text-decoration: none; }
.mega-feature small { color: var(--cream-soft); }
.mega-feature-cta { display: inline-flex; align-items: center; gap: 8px; font: 500 0.9rem var(--letter); color: var(--blue); }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--line); border-radius: 12px; font: 500 0.9rem/1 var(--letter); }
  .menu-toggle-icon { position: relative; width: 18px; height: 10px; border-block: 1.5px solid currentColor; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon { border-color: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before, .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { transform: rotate(-45deg); }
  .nav { position: fixed; top: 74px; left: 0; right: 0; height: calc(100vh - 74px); height: calc(100dvh - 74px); width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 16px var(--gutter) 32px; overflow-y: auto; background: var(--cream); visibility: hidden; opacity: 0; transition: opacity .25s var(--ease-out), visibility 0s .25s; }
  .nav.is-open { visibility: visible; opacity: 1; transition: opacity .25s var(--ease-out); }
  .nav-link { width: 100%; justify-content: space-between; min-height: 60px; padding: 0 4px; border-bottom: 1px solid var(--line); border-radius: 0; font: 760 1.6rem/1 var(--sans); font-stretch: 110%; }
  .mega { position: static; width: auto; translate: none; transform: none; padding: 8px 0; box-shadow: none; background: none; display: none; opacity: 1; visibility: visible; }
  .nav-trigger[aria-expanded="true"] + .mega { display: block; }
  .nav-link:hover, .nav-trigger[aria-expanded="true"] { background: none; }
  .nav-trigger[aria-expanded="true"] { color: var(--terra); }
  .mega-grid { grid-template-columns: 1fr; }
  .mega-subs { display: none; }
  .nav-cta { margin: 24px 0 0; justify-content: space-between; min-height: 56px; }
}

/* ---------- sections ---------- */
.section { position: relative; padding-block: var(--section); }
.section-tint { background: var(--sand); }
.section-ink { background: var(--ink); color: var(--cream); overflow: hidden; }
.section-ink .lede { color: var(--cream-soft); }
.section-flush { padding-block: clamp(24px, 4vw, 48px); }
.heading-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
@media (max-width: 900px) { .heading-row { grid-template-columns: 1fr; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(16px, 2.5vw, 36px) clamp(40px, 5vw, 72px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 28px; }
.hero .display { max-width: 11ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.br-sm { display: none; }

/* the system composition */
.system { position: relative; aspect-ratio: 1 / 1; container-type: inline-size; }
.system > * { font-size: clamp(10px, 2.35cqi, 14.5px); }
.sys-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.sys-line { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-dasharray: 1 7; stroke-linecap: round; transition: stroke .4s var(--ease-out), stroke-width .4s var(--ease-out); }
.sys-line.is-live { stroke: var(--terra); stroke-width: 3; }
.sys-photo { position: absolute; left: 0; top: 6%; width: 60%; aspect-ratio: 4 / 3.3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); z-index: 1; }
.sys-photo img { width: 100%; height: 100%; object-fit: cover; }
.sys-card { position: absolute; z-index: 2; padding: 1.1em 1.2em 1.2em; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-3); }
.sys-head { display: flex; align-items: center; gap: .6em; margin-bottom: .9em; }
.sys-head b { font: 700 1em/1.2 var(--sans); }
.sys-icon { width: 1.4em; height: 1.4em; flex: none; }
.pill { margin-left: auto; padding: .3em .7em; border-radius: 999px; font: 500 .78em/1 var(--letter); background: var(--blue-soft); }
.pill-live { background: color-mix(in srgb, var(--terra) 16%, var(--paper)); color: var(--terra); }
.pill-live::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: var(--terra); vertical-align: .05em; }
.sys-card--mkt { right: 0; top: 0; width: 46%; }
.bars { display: grid; gap: .65em; }
.bars div { display: grid; grid-template-columns: 4.6em 1fr 1.6em; align-items: center; gap: .6em; font: 500 .82em var(--letter); color: var(--ink-soft); }
.bars em { font: 700 1em var(--sans); font-style: normal; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bars i { height: .6em; border-radius: 999px; background: linear-gradient(90deg, var(--terra) var(--w), color-mix(in srgb, var(--ink) 8%, transparent) var(--w)); }
.sys-card--data { left: 6%; top: 55%; width: 42%; }
.mini-chart { width: 100%; height: auto; }
.mini-chart rect { fill: var(--blue); }
.mini-chart .is-hi { fill: var(--ink); }
.sys-card--data small { display: block; margin-top: .6em; font: 500 .8em var(--letter); color: var(--ink-soft); }
.sys-card--ai { right: 8%; top: 44%; width: 42%; }
.flow { display: grid; gap: .55em; font-size: .9em; }
.flow li { display: flex; align-items: center; gap: .6em; color: var(--ink-soft); }
.flow span { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); flex: none; }
.flow .done span { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.flow .done { color: var(--ink); }
.flow .now { color: var(--ink); font-weight: 650; }
.flow .now span { border-color: var(--terra); background: color-mix(in srgb, var(--terra) 25%, var(--paper)); }
.sys-hub { position: absolute; left: 50%; bottom: 3%; z-index: 3; width: max-content; display: flex; align-items: center; gap: .7em; padding: .7em 1.3em .7em .8em; translate: -50% 0; background: var(--ink); color: var(--cream); border-radius: 999px; box-shadow: var(--sh-3); white-space: nowrap; }
.sys-hub svg { flex: none; width: 1.6em; height: 2.4em; }
.sys-hub span { display: grid; font: 760 1.25em/1.1 var(--sans); font-stretch: 108%; }
.sys-shape-b { width: 11%; right: 44%; top: 1%; fill: url(#g-terra); z-index: 3; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .display { max-width: 13ch; }
  .system { width: min(100%, 620px); margin-inline: auto; }
}
@media (max-width: 640px) {
  .br-sm { display: inline; }
  .hero .display { font-stretch: 100%; font-size: clamp(2.3rem, 10vw, 2.9rem); line-height: 1.12; }
  .sys-shape-b { right: auto; left: 2%; top: 2%; width: 9%; }
  .system { aspect-ratio: 1 / 1.12; }
  .system > * { font-size: clamp(9px, 2.9cqi, 12px); }
  .sys-photo { width: 66%; }
  .sys-card--mkt { width: 54%; top: 0; }
  .sys-card--data { width: 50%; left: 0; top: 58%; }
  .sys-card--ai { width: 52%; top: 42%; }
}

/* ---------- cards ---------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s var(--ease-out); }
/* hover lift uses `translate`, leaving `transform` free for the scroll-in animation */
@media (hover: hover) { .card:hover { translate: 0 -6px; background: color-mix(in srgb, var(--sand) 55%, var(--paper)); box-shadow: var(--sh-2); } }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
@media (hover: hover) { .card:hover .card-media img { transform: scale(1.04); } }
.badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--paper); box-shadow: var(--sh-1); font: 500 0.9rem/1 var(--letter); }
.badge svg { width: 18px; height: 18px; }
.card-body { display: grid; gap: 12px; align-content: start; padding: 24px 24px 28px; flex: 1; }
.card-body > p:not(.outcome) { color: var(--ink-soft); }
.outcome { display: inline-flex; align-items: center; gap: .6em; margin-top: auto; padding-top: 8px; font: 650 1.0625rem/1.3 var(--sans); }
.outcome .i-arrow { color: var(--terra); }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stage-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.card-list { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 0.9rem/1.35 var(--letter); }
.card-list li { display: flex; align-items: baseline; gap: 10px; }
.card-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); translate: 0 -1px; }

/* fit */
.fit { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(56px, 7vw, 96px); background: var(--ink); color: var(--cream); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.fit-media { position: relative; margin: 14px; border-radius: var(--r-lg); overflow: visible; }
.fit-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--r-lg); }
.fit-body { display: grid; gap: 20px; align-content: center; justify-items: start; padding: clamp(28px, 5vw, 64px); }
.fit h3 { font-size: var(--fs-title); line-height: 1.08; font-weight: 780; font-stretch: 112%; letter-spacing: -0.02em; }
.fit-lead { color: var(--cream-soft); }
.checklist { display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; line-height: 1.5; }
.check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: var(--ink); }
.check svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .fit { grid-template-columns: 1fr; } .fit-media img { min-height: 220px; } }

.accordion { display: grid; gap: 10px; }
.accordion details { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-1); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 22px; cursor: pointer; list-style: none; font: 700 1.0625rem/1.3 var(--sans); }
.accordion summary::-webkit-details-marker { display: none; }
.i-plus { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: var(--cream); transition: transform .3s var(--ease-out), background-color .3s; }
.accordion details[open] .i-plus { transform: rotate(45deg); background: var(--terra); color: var(--cream); }
.accordion details p { padding: 0 22px 22px; color: var(--ink-soft); max-width: 60ch; }

/* ---------- services tabs ---------- */
.tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tab { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; text-align: left; background: var(--paper); border: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px var(--line), var(--sh-1); cursor: pointer; transition: color .3s var(--ease-out), box-shadow .25s var(--ease-out), translate .25s var(--ease-out); }
.tab:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--terra), var(--sh-2); }
.tab:active { translate: 0 0; }
.tab[aria-selected="true"] { box-shadow: none; }
.tab[aria-selected="true"][data-theme="mkt"] { background: var(--terra); }
.tab[aria-selected="true"][data-theme="data"] { background: var(--blue); }
.tab[aria-selected="true"][data-theme="ai"] { background: var(--ink); }
.tab > svg { box-sizing: content-box; width: 26px; height: 26px; flex: none; padding: 9px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -8px rgb(21 31 39 / .45); transition: background-color .3s; }
.tab[aria-selected="true"] > svg { background: var(--paper); }
.tab[aria-selected="true"][data-theme="data"] > svg { background: var(--ink); box-shadow: none; }
.tab > span:not(.tab-go) { flex: 1; }
.tab b { display: block; font: 750 1.0625rem/1.2 var(--sans); font-stretch: 108%; }
.tab small { display: block; margin-top: 3px; font: 400 0.9rem var(--letter); color: var(--ink-soft); transition: color .3s var(--ease-out); }
.tab .tab-go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: var(--ink); transition: background-color .3s, color .3s, transform .35s var(--ease-out); }
.tab .tab-go svg { width: 16px; height: 16px; filter: none; }
.tab:hover .tab-go { background: var(--terra); color: var(--cream); }
.tab[aria-selected="true"] .tab-go { transform: rotate(90deg); background: var(--paper); color: var(--ink); }
.tab[aria-selected="true"][data-theme="mkt"], .tab[aria-selected="true"][data-theme="ai"] { color: var(--cream); }
.tab[aria-selected="true"][data-theme="mkt"] small, .tab[aria-selected="true"][data-theme="ai"] small { color: var(--cream); }
.tab[aria-selected="true"][data-theme="data"] small { color: var(--ink); }
.tab[aria-selected="true"]:hover { translate: 0 0; }
.panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.panel[hidden] { display: none; }
.panel-mkt { background: var(--terra); color: var(--cream); }
.panel-data { background: var(--blue); color: var(--ink); }
.panel-ai { background: var(--ink); color: var(--cream); }
.panel-copy { display: grid; gap: 18px; justify-items: start; }
.panel-copy h3 { font-size: var(--fs-title); line-height: 1.04; font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; }
.panel-copy > p { max-width: 44ch; font-size: 1.0625rem; }
.panel-ai .panel-copy > p { color: var(--cream-soft); }
.panel-mkt .panel-copy > p { color: var(--paper); }
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-block: 4px 8px; }
.caps li { display: flex; align-items: center; gap: 10px; font-weight: 550; }
.caps svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 8px; background: color-mix(in srgb, currentColor 16%, transparent); }
.panel-visual { position: relative; padding: 0 0 36px 36px; }
.panel-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.ui-card { background: var(--paper); color: var(--ink); border-radius: var(--r); box-shadow: var(--sh-3); }
.panel-visual .ui-card { position: absolute; left: 0; bottom: 0; width: min(62%, 300px); padding: 16px; }
.ui-browser { display: flex; gap: 5px; margin-bottom: 12px; }
.ui-browser i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.ui-page { display: grid; gap: 7px; padding: 14px; border-radius: 12px; background: var(--cream); }
.ui-page-title { font: 800 1.0625rem/1.1 var(--sans); font-stretch: 110%; letter-spacing: -0.015em; }
.ui-page-copy { font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); }
.ui-btn { justify-self: start; margin-top: 6px; padding: 7px 12px; border-radius: 8px; background: var(--terra); color: var(--cream); font: 500 0.8rem/1 var(--letter); }
.ui-tags { display: flex; gap: 6px; margin-top: 12px; }
.ui-tags span { padding: 5px 10px; border-radius: 999px; background: var(--blue-soft); font: 500 0.8rem/1 var(--letter); }
.ui-dash-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ui-dash-head b { font: 700 0.9rem var(--sans); }
.ui-dash-head span { font: 400 0.8rem var(--letter); color: var(--ink-soft); }
.ui-linechart { width: 100%; height: auto; }
.ui-linechart .grid { stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; fill: none; }
.ui-linechart .area { fill: color-mix(in srgb, var(--blue) 45%, transparent); }
.ui-linechart .line { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.ui-linechart circle { fill: var(--terra); stroke: var(--paper); stroke-width: 2; }
.ui-kpis { display: flex; gap: 14px; margin-top: 10px; font: 500 0.8rem var(--letter); color: var(--ink-soft); }
.ui-kpis i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; }
.k1 { background: var(--ink); } .k2 { background: var(--blue); } .k3 { background: var(--terra); }
.ui-flow ol { position: relative; display: grid; gap: 12px; }
.ui-flow ol::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; border-left: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.ui-flow li { position: relative; display: flex; align-items: center; gap: 12px; font: 500 0.9rem var(--sans); }
.ui-flow .node { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); flex: none; }
.ui-flow .human { color: var(--terra); font-weight: 700; }
.ui-flow .human .node { background: var(--terra); }
@media (max-width: 900px) {
  .tablist { grid-template-columns: 1fr; }
  .tab-indicator::after { display: none; }
  .panel { grid-template-columns: 1fr; }
  .panel-visual { padding: 0 0 48px 16px; }
}
@media (max-width: 480px) { .caps { grid-template-columns: 1fr; } }

/* ---------- deliverables inside each tab ---------- */
.outputs { width: 100%; padding-top: 16px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.outputs h4 { margin: 0 0 10px; font: 500 0.9rem var(--letter); opacity: .85; }
.outputs ul { display: flex; flex-wrap: wrap; gap: 8px; }
.outputs li { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 500 0.9rem/1.2 var(--letter); }

/* ---------- FAQ ---------- */
.page-intro { padding-block: clamp(40px, 6vw, 88px) 0; }
.page-intro .wrap { display: grid; gap: 20px; justify-items: start; }
.page-intro .lede { max-width: 60ch; }
.crumbs { display: flex; gap: 10px; font: 500 0.9rem var(--letter); color: var(--ink-soft); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--terra); }
.page-intro + .section { padding-top: clamp(40px, 5vw, 64px); }
.faq-diag { display: grid; gap: 6px; padding: 24px; border-radius: var(--r-lg); background: var(--ink); color: var(--cream); text-decoration: none; transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.faq-diag b { font: 700 1.125rem/1.3 var(--sans); }
.faq-diag small { color: var(--cream-soft); font-size: 0.95rem; line-height: 1.5; }
.faq-diag-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 0.9rem var(--letter); color: var(--blue); }
@media (hover: hover) { .faq-diag:hover { translate: 0 -4px; box-shadow: var(--sh-2); } }
.nav-link[aria-current="page"] { color: var(--terra); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-intro { position: sticky; top: 110px; display: grid; gap: 20px; }
.faq-ask { display: grid; gap: 8px; justify-items: start; padding: 24px; background: var(--sand); border-radius: var(--r-lg); }
.faq-ask b { font: 700 1.125rem/1.3 var(--sans); }
.faq-ask p { color: var(--ink-soft); margin-bottom: 8px; }
.faq-list details { transition: box-shadow .3s var(--ease-out); }
.faq-list details[open] { box-shadow: var(--sh-2); }
.faq-list summary { justify-content: flex-start; min-height: 76px; padding: 20px 24px; font-size: 1.125rem; }
.faq-num { flex: none; width: 2.2em; font: 500 0.9rem var(--letter); color: var(--terra); font-variant-numeric: tabular-nums; }
.faq-q { flex: 1; }
.faq-list details p { padding: 0 24px 24px calc(24px + 2.2 * 0.9rem + 16px); }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .faq-list details p { padding-left: 24px; }
}

/* ---------- diagnostic ---------- */
.diag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 6vw, 80px); background: var(--blue); border-radius: var(--r-xl); overflow: hidden; }
.diag .lede { color: color-mix(in srgb, var(--ink) 85%, var(--blue)); }
.diag .headline em { color: var(--ink); }
.diag-copy { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: start; }
.gauge { position: relative; z-index: 1; padding: clamp(22px, 3vw, 36px); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.gauge-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; font: 500 0.9rem var(--letter); color: var(--ink-soft); }
.gauge-score { color: var(--ink); font: 820 clamp(3.2rem, 6vw, 4.8rem)/.85 var(--sans); font-stretch: 116%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gauge-score small { margin-left: 4px; font: 500 1.0625rem var(--letter); color: var(--ink-soft); letter-spacing: 0; }
.meter { position: relative; height: 12px; margin: 22px 0 18px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--ink)); transform-origin: 0 50%; }
@media (max-width: 900px) { .diag { grid-template-columns: 1fr; } }

/* ---------- close ---------- */
.close { padding-bottom: clamp(48px, 6vw, 80px); }
.cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 52px); background: var(--ink); color: var(--cream); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.cta-copy { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; }
.cta-title { font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 18ch; }
.cta .lede { color: var(--cream-soft); font-size: 1.0625rem; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cta-mail { font-size: 0.9rem; }
.cta-mail a { color: var(--cream); text-underline-offset: 4px; }
.cta-media { position: relative; z-index: 1; }
.cta-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.cta-shape-a { width: clamp(60px, 7vw, 96px); left: 54%; bottom: -30px; fill: url(#g-cream); transform: rotate(-12deg); }
.cta-shape-b { width: clamp(90px, 10vw, 140px); right: -40px; top: -44px; fill: url(#g-blue); }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(56px, 7vw, 96px) 32px; }
.footer-top { display: grid; grid-template-columns: auto repeat(3, auto); justify-content: space-between; gap: 40px; }
.footer-brand { display: grid; gap: 20px; align-content: start; }
.footer-brand .logo { width: clamp(300px, 36vw, 500px); height: auto; color: var(--cream); }
.footer-brand p { color: var(--cream-soft); max-width: 34ch; }
.footer-contact { display: grid; gap: 6px; font-style: normal; font-size: 1rem; line-height: 1.45; color: var(--cream-soft); }
.footer-contact a { justify-self: start; color: var(--cream); text-decoration: none; transition: color .2s; }
.footer-contact a:hover { color: var(--blue); }
.footer-contact span { max-width: 34ch; }
.footer-col { display: grid; gap: 2px; align-content: start; }
.footer-col h3 { font: 720 1.25rem/1.2 var(--sans); font-stretch: 106%; letter-spacing: -0.01em; color: var(--blue); margin-bottom: 10px; }
.footer-col a { padding: 6px 0; font-size: 1rem; text-decoration: none; color: var(--cream-soft); transition: color .2s; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); font: 400 0.9rem var(--letter); color: var(--cream-soft); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(3, auto); } .footer-brand { grid-column: 1 / -1; } .footer-brand .logo { width: min(420px, 100%); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr 1fr; justify-content: stretch; } }


/* content stays visible unless the motion script is live */
.motion [data-intro] { opacity: 0; }

/* ---------- header progress ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- services ticker ---------- */
.ticker { position: relative; padding-block: clamp(9px, 1vw, 13px); overflow: hidden; background: var(--terra); }
.ticker + .section { padding-top: clamp(40px, 5vw, 72px); }
.ticker > div { position: relative; z-index: 2; display: grid; gap: .1em; }
.tk-row { display: flex; overflow: hidden; }
.tk-track { display: flex; align-items: center; gap: .55em; padding-right: .55em; white-space: nowrap; flex: none; font: 760 clamp(1rem, 1.4vw, 1.125rem)/1.1 var(--sans); font-stretch: 108%; will-change: transform; }
.tk-a .tk-word { color: var(--cream); }
.tk-shape { flex: none; width: .7em; height: .7em; fill: var(--ink); }

/* ---------- quick diagnostic ---------- */
.meter-fill { width: 100%; transform: scaleX(var(--v, .5)); transition: transform .6s var(--ease-out); }
.q-summary { margin-bottom: 18px; color: var(--ink); font-weight: 550; min-height: 3.2em; }
.qs { display: grid; gap: 18px; }
.q { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.q label { display: grid; grid-template-columns: 20px auto 1fr; align-items: baseline; gap: 4px 10px; }
.q label svg { width: 20px; height: 20px; align-self: center; }
.q label b { font: 700 0.9rem var(--sans); }
.q label span { grid-column: 2 / -1; color: var(--ink-soft); font-size: 0.9rem; }
.q input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.q input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--cream); }
.q input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--cream); }
.q input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: var(--sh-1); }
.q input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: var(--sh-1); }
.q-scale { display: flex; justify-content: space-between; font: 400 0.8rem var(--letter); color: var(--ink-soft); }
.q-note { margin-top: 16px; font: 400 0.8rem var(--letter); color: var(--ink-soft); }

main { position: relative; }
main .wrap { position: relative; z-index: 2; }
/* ---------- phones: a simpler, legible hero system ---------- */
@media (max-width: 640px) {
  .system { aspect-ratio: 1 / 1.08; }
  .system > * { font-size: clamp(11px, 3.6cqi, 13px); }
  .sys-card--data { display: none; }
  .sys-photo { width: 62%; top: 10%; }
  .sys-card--mkt { width: 62%; }
  .sys-card--ai { width: 58%; top: 37%; right: 12%; }
}

/* ---------- motion support ---------- */
.tablist { position: relative; }
.tab-indicator { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r); background: var(--ink); box-shadow: var(--sh-2); pointer-events: none; transition: background-color .35s var(--ease-out); }
.tab-indicator::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; translate: -50% 0; rotate: 45deg; border-radius: 3px; background: inherit; }
.tab-indicator[data-theme="mkt"] { background: var(--terra); }
.tab-indicator[data-theme="data"] { background: var(--blue); }
.tab { position: relative; z-index: 1; }
.has-indicator .tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.has-indicator .tab:not([aria-selected="true"]) { background: var(--paper); }
.sys-hub { transform-origin: 50% 50%; }
.hub-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--terra); opacity: 0; pointer-events: none; }
.flow li, .flow span { transition: color .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.site-header { will-change: transform; }

/* ---------- hero headline: the system in words ---------- */
.rotator { display: inline-block; vertical-align: bottom; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; margin-bottom: -.06em; white-space: nowrap; }
.rot-word { display: inline-block; }
.hl { background: linear-gradient(var(--terra), var(--terra)) 0 100% / 0% 2px no-repeat; transition: background-size .6s var(--ease-out), color .4s var(--ease-out); }
.hl.is-on { background-size: 100% 2px; color: var(--ink); }
.sys-card { transition: box-shadow .5s var(--ease-out); }
.sys-card.is-live { box-shadow: 0 0 0 2px var(--terra), var(--sh-3); }

.br-lg { display: inline; }
@media (max-width: 640px) { .br-lg { display: none; } .pill-live { display: none; } }

/* ---------- lead form pop-up ---------- */
html:has(.lf[open]) { overflow: hidden; }
.lf { width: min(560px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); overflow: auto; overscroll-behavior: contain; }
.lf::backdrop { background: rgb(21 31 39 / .55); }
.lf[open] { animation: lf-pop .4s var(--ease-out); }
@keyframes lf-pop { from { opacity: 0; transform: translateY(16px); } }
.lf [hidden] { display: none !important; }
.lf-card { position: relative; display: grid; gap: 24px; padding: 40px clamp(24px, 5vw, 44px) 28px; }
.lf-progress { position: absolute; inset: 0 0 auto; height: 4px; background: var(--sand); }
.lf-progress span { display: block; height: 100%; background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.lf-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); }
.lf-close:hover { background: var(--cream); color: var(--ink); }
.lf-close svg { width: 18px; height: 18px; transform: rotate(45deg); }

.lf-title { display: flex; align-items: center; gap: 8px; margin: -8px 0 -8px; padding-right: 44px; font: 600 0.9rem var(--letter); color: var(--terra); }
.lf-title svg { width: 14px; height: 14px; fill: var(--terra); }
.lf-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.lf-step:focus { outline: none; }
.lf-in { animation: lf-step .35s var(--ease-out); }
.lf-in-back { animation: lf-step-back .35s var(--ease-out); }
@keyframes lf-step { from { opacity: 0; transform: translateX(16px); } }
@keyframes lf-step-back { from { opacity: 0; transform: translateX(-16px); } }
.lf-q { padding: 0 32px 0 0; font: 760 clamp(1.3rem, 2.8vw, 1.6rem)/1.18 var(--sans); font-stretch: 108%; letter-spacing: -0.02em; text-wrap: balance; }
.lf-hint { margin-top: 8px; color: var(--ink-soft); font-size: 0.95rem; }

.lf-opts { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
.lf-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 0 4px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: 550 1.02rem/1.35 var(--sans); transition: color .2s, padding .3s var(--ease-out); }
.lf-opt svg { width: 16px; height: 16px; flex: none; color: var(--terra); opacity: 0; transition: opacity .2s; }
.lf-opt:hover, .lf-opt[aria-pressed="true"] { color: var(--terra); padding-left: 10px; }
.lf-opt:hover svg, .lf-opt[aria-pressed="true"] svg { opacity: 1; }
.lf-opt:active { transform: translateY(1px); }

.lf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.lf-field { display: grid; gap: 6px; font: 500 0.88rem var(--letter); }
.lf-wide { grid-column: 1 / -1; }
.lf-field input { width: 100%; min-height: 48px; padding: 10px 14px; font: 400 1rem var(--sans); color: var(--ink); background: #fff; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r-sm); transition: border-color .2s; }
.lf-field input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.lf-field input:focus { outline: none; border-color: var(--ink); }
.lf-field input[aria-invalid] { border-color: var(--terra); }

.lf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.lf-foot:not(:has(button:not([hidden]))) { display: none; }
.lf-back { min-height: 44px; margin-right: auto; padding: 0 4px; border: 0; background: none; font: 500 0.9rem var(--letter); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }
.lf-back:hover { color: var(--ink); }

.lf-result .lf-hint { margin: 0 0 6px; }
.lf-score { display: flex; align-items: center; gap: 20px; }
.lf-score-num { flex: none; display: flex; align-items: baseline; gap: 2px; }
.lf-score b { font: 820 clamp(3.4rem, 8vw, 4.4rem)/.9 var(--sans); font-stretch: 116%; letter-spacing: -0.04em; color: var(--terra); font-variant-numeric: tabular-nums; }
.lf-score-num small { font: 500 1rem var(--letter); color: var(--ink-soft); }
.lf-score .lf-q { padding: 0; font-size: clamp(1.15rem, 2.4vw, 1.35rem); }
.lf-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 0; padding: 14px 0; border-block: 1px solid var(--line); }
.lf-axes dt { font: 500 0.8rem var(--letter); color: var(--ink-soft); }
.lf-axes dd { margin: 2px 0 0; font: 760 1.25rem var(--sans); font-variant-numeric: tabular-nums; }
.lf-sub { margin-top: 18px; font-size: 1rem; }
.lf-pri { display: grid; gap: 6px; margin-top: 8px; padding-left: 1.3em; list-style: decimal; font-size: 0.95rem; line-height: 1.45; }
.lf-pri li::marker { color: var(--terra); font-weight: 700; }
.lf-note { margin-top: 16px; color: var(--ink-soft); font-size: 0.92rem; }

@media (max-width: 560px) {
  .lf { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .lf-card { padding-top: 36px; gap: 20px; }
  .lf-fields, .lf-axes { grid-template-columns: 1fr; }
  .lf-axes { gap: 4px; }
  .lf-axes div { display: flex; justify-content: space-between; align-items: baseline; }
  .lf-axes dd { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .lf[open] { animation: none; } }

/* ---------- service page ---------- */
.svc-hero { position: relative; padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 80px); overflow: hidden; }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.svc-hero-copy { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; }
.svc-hero .display { font-size: clamp(2.3rem, 4vw, 3.7rem); max-width: 17ch; }
.svc-hero-media { position: relative; padding: 0 0 40px 40px; }
.svc-hero-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.svc-hero-card { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(58%, 290px); padding: 16px; }
.svc-shape-a { width: clamp(90px, 10vw, 140px); right: -24px; top: -30px; fill: url(#g-terra); transform: rotate(10deg); z-index: 2; }
.svc-shape-b { width: clamp(44px, 5vw, 64px); right: 18%; bottom: 6px; fill: url(#g-blue); z-index: 2; }
@media (max-width: 900px) { .svc-hero-grid { grid-template-columns: 1fr; } .svc-hero-media { padding: 0 0 56px 0; } .svc-hero-media img { aspect-ratio: 4 / 3; } .svc-hero-card { left: 12px; width: min(62%, 240px); } .svc-hero-card .ui-tags { display: none; } }

.svc-intro { display: grid; gap: 20px; max-width: 900px; margin-bottom: clamp(36px, 5vw, 60px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-item { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 26px 30px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) { .svc-item:hover { translate: 0 -6px; box-shadow: var(--sh-2); } }
.svc-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--cream); color: var(--terra); }
.svc-ico svg { width: 24px; height: 24px; }
.svc-num { position: absolute; top: 28px; right: 26px; font: 500 0.85rem var(--letter); color: var(--terra); font-variant-numeric: tabular-nums; }
.svc-item p { color: var(--ink-soft); }
.svc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-grid--4 .svc-item { padding-inline: 22px; }
@media (max-width: 1100px) { .svc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-engage { margin-top: 0; background: var(--terra); }
.svc-engage .fit-lead { color: color-mix(in srgb, var(--cream) 88%, var(--terra)); }
.svc-engage .check { background: var(--cream); }
.fit h2 { font-size: var(--fs-title); line-height: 1.08; font-weight: 780; font-stretch: 112%; letter-spacing: -0.02em; text-wrap: balance; }

.svc-quote { padding-block: clamp(8px, 1.5vw, 16px) clamp(40px, 7vw, 96px); }
.svc-quote figure { position: relative; margin: 0; padding: clamp(32px, 4vw, 56px) 0 0; }
.svc-quote blockquote { position: relative; z-index: 1; margin: 0; }
.svc-quote p { max-width: 24ch; text-indent: -.42em; font: 820 clamp(2rem, 4.4vw, 3.8rem)/1.04 var(--sans); font-stretch: 114%; letter-spacing: -0.03em; text-wrap: balance; }
.svc-quote em { font-style: normal; color: var(--terra); }
.svc-quote p::before { content: "“"; color: var(--terra); }
.svc-quote p::after { content: "”"; color: var(--terra); }
@media (max-width: 640px) { .svc-quote p { text-indent: 0; } }
.svc-quote figcaption { position: relative; z-index: 1; margin-top: clamp(16px, 2vw, 24px); font: 500 clamp(1.125rem, 2vw, 1.6rem)/1.35 var(--letter); color: var(--ink-soft); }

/* ---------- services overview ---------- */
.page-intro + .svc-tabs { padding-block: clamp(32px, 4vw, 48px) clamp(40px, 7vw, 96px); }

/* ---------- about ---------- */
.about-card { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(58%, 270px); padding: 16px; }
.about-card-list { display: grid; gap: 10px; margin-top: 4px; font: 600 0.9rem var(--sans); }
.about-card-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--cream); }
.about-card-list svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 3px 4px rgb(21 31 39 / .2)); }

.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.about-facts > div { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dd dt" "dd p"; align-items: center; gap: 2px 18px; padding: clamp(22px, 3vw, 34px); }
.about-facts > div + div { border-left: 1px solid var(--line); }
.about-facts dt { grid-area: dt; align-self: end; font: 500 0.9rem var(--letter); color: var(--terra); }
.about-facts .fact-num { grid-area: dd; margin: 0; font: 820 clamp(2.6rem, 4.6vw, 3.8rem)/.9 var(--sans); font-stretch: 116%; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.about-facts .fact-note { grid-area: p; margin: 0; align-self: start; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 900px) { .about-facts { grid-template-columns: 1fr; } .about-facts > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.about-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about-why-head { display: grid; gap: clamp(24px, 3vw, 40px); }
.about-why-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-2); transform: rotate(-1.5deg); }
.about-why-copy { display: grid; gap: 20px; }
.about-why-copy > .lede { color: var(--ink); font-weight: 650; font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.5; }
.about-why-copy > p:not(.lede) { color: var(--ink-soft); font-size: 1.0625rem; max-width: 58ch; }
@media (max-width: 900px) { .about-why { grid-template-columns: 1fr; } }


.beliefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.beliefs li { display: grid; gap: 12px; align-content: start; padding: 28px clamp(20px, 3vw, 36px) 8px 0; }
.beliefs li + li { padding-left: clamp(20px, 3vw, 36px); border-left: 1px solid var(--line); }
.belief-num { font: 820 clamp(2.4rem, 4vw, 3.4rem)/1 var(--sans); font-stretch: 116%; letter-spacing: -0.04em; color: var(--terra); }
.beliefs h3 { font-size: 1.35rem; }
.beliefs p { color: var(--ink-soft); }
@media (max-width: 900px) { .beliefs { grid-template-columns: 1fr; } .beliefs li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .beliefs li { padding-bottom: 20px; } }

/* ---------- insights ---------- */
.page-intro + .insights-list { padding-top: clamp(32px, 4vw, 48px); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; font: 500 0.85rem var(--letter); }
.post-meta span { padding: 5px 12px; border-radius: 999px; background: var(--cream); }
.post-meta span:first-child { background: color-mix(in srgb, var(--terra) 14%, var(--paper)); color: var(--terra); }
.post-read { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 500 0.9rem var(--letter); color: var(--terra); }
.post-card-link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.post-card-media { overflow: hidden; margin: 0; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.post-card-body > p { color: var(--ink-soft); }
@media (hover: hover) { .post-card-link:hover .post-card-media img { transform: scale(1.04); } .post-card-link:hover .post-read .i-arrow { transform: translateX(3px); } }

.post-feature { position: relative; margin-bottom: clamp(20px, 3vw, 32px); background: var(--ink); color: var(--cream); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.post-feature .post-card-link { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.post-feature .post-card-media { margin: 14px; border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.post-feature .post-card-body { padding: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(8px, 2vw, 24px); }
.post-feature h2 { font-size: var(--fs-title); line-height: 1.08; font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; text-wrap: balance; }
.post-feature .post-card-body > p { color: var(--cream-soft); }
.post-feature .post-meta span { background: rgb(255 255 255 / .1); color: var(--cream); }
.post-feature .post-meta span:first-child { background: var(--terra); color: var(--cream); }
.post-feature .post-read { color: var(--blue); }
.post-feature-shape { width: clamp(70px, 8vw, 110px); right: -24px; top: -30px; fill: url(#g-blue); }
@media (max-width: 900px) { .post-feature .post-card-link { grid-template-columns: 1fr; } .post-feature .post-card-body { padding: 8px 24px 28px; } }

.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.post-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) { .post-card:hover { translate: 0 -6px; box-shadow: var(--sh-2); } }
.post-card .post-card-link { grid-template-rows: auto 1fr; }
.post-card .post-card-media { aspect-ratio: 16 / 9; }
.post-card .post-card-body { padding: 24px 26px 28px; }
.post-card h3 { font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }

/* ---------- article ---------- */
.article-head { display: grid; gap: 20px; justify-items: start; padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 44px); }
.article-title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); max-width: 20ch; }
.article-head .lede { max-width: 62ch; }
.article-cover { margin-block: 0; }
.article-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(40px, 5vw, 72px) 0; }
.prose { max-width: 66ch; }
.prose h2 { margin: 1.8em 0 .5em; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.15; font-weight: 780; font-stretch: 110%; letter-spacing: -0.018em; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.125rem; line-height: 1.7; color: color-mix(in srgb, var(--ink) 86%, var(--cream)); }
.prose p + p { margin-top: 1em; }
.prose ul { display: grid; gap: .5em; margin: 1em 0; }
.prose li { display: flex; gap: 12px; font-size: 1.125rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 86%, var(--cream)); }
.prose li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .7em; border-radius: 50%; background: var(--terra); }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.legal { padding-top: 0; }
.article-aside { position: sticky; top: 110px; display: grid; gap: 16px; }
.article-service { display: grid; gap: 6px; padding: 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-1); text-decoration: none; transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.article-service small { font: 500 0.85rem var(--letter); color: var(--terra); }
.article-service b { font: 750 1.2rem/1.2 var(--sans); }
.article-service > span:not(.post-read) { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
@media (hover: hover) { .article-service:hover { translate: 0 -4px; box-shadow: var(--sh-2); } }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; } .article-cover img { aspect-ratio: 16 / 10; } }
.more-title { margin-bottom: 24px; font-size: var(--fs-title); line-height: 1.1; font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; }