/* ============================================================
   Sentire website — v3 site layer.
   Loaded after css/sentire.css (the design system, copied verbatim
   from sentire-design-system v3.1.0 — never edit that copy here).
   Token-only: every colour, radius, duration and easing comes from
   sentire.css. No new hex values, no shadows on cards, no blur,
   no gradients, no pills, no italics, nothing loops.

   Motion vocabulary (sierra.studio choreography, Sentire rules):
   - split headlines: words rise in from a mask, 60ms stagger
   - lit statements: words go from faint to full ink as you scroll
   - contour fields: the method line as a field of lines that start
     tangled and resolve into parallels, drawn once
   - pinned method: the method line draws as you scroll the steps
   - floating nav: hides on scroll down, returns on scroll up
   Everything is static under prefers-reduced-motion.
   ============================================================ */

/* ---------- base ---------- */
html { scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-x: clip; }
.lucide { stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
[hidden] { display: none !important; }
.st-eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: var(--emphasis); }

/* ---------- floating nav ---------- */
.sn { position: fixed; top: var(--space-4); left: 0; right: 0; z-index: 60; padding-inline: var(--space-4); pointer-events: none; transition: transform var(--duration-slow) var(--ease-standard); }
.sn.is-hidden { transform: translateY(calc(-100% - var(--space-6))); }
.sn-bar { pointer-events: auto; position: relative; max-width: 1200px; margin-inline: auto; height: 60px; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-2) 0 var(--space-6); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.sn.is-scrolled .sn-bar, .sn.is-solid .sn-bar { background: var(--surface-raised); border-color: var(--line); }
.sn-logo { display: flex; align-items: center; flex: none; }
.sn-logo img { height: 20px; width: auto; display: block; }
.sn-links { flex: 1; display: flex; justify-content: center; min-width: 0; }
.sn-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.sn-end .st-icon-btn, .sn-end .st-seg { flex: none; }
.sn-toggle { display: none; align-content: center; }
.sn-logo:focus-visible, .sn-links a:focus-visible, .sn-links .nav__caret:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* links injected by assets/nav.js */
.sn-links .nav { list-style: none; display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; }
.sn-links .nav__item { position: relative; }
.sn-links .nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard); }
.sn-links .nav__link:hover, .sn-links .nav__item.is-active > .nav__link { color: var(--ink); }
.sn-links .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--emphasis); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-standard); }
.sn-links .nav__link:hover::after, .sn-links .nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.sn-links .nav__panel a::after { display: none; }
.sn-links .nav__caret { display: inline-grid; place-items: center; }
.sn-links .nav__caret .lucide { width: 14px; height: 14px; opacity: .7; transition: transform var(--duration-base) var(--ease-standard); }
.sn-links .nav__item:hover .nav__caret .lucide { transform: rotate(180deg); }

/* panels: the one place a shadow is allowed (popover) */
.sn-links .nav__panel { position: absolute; top: calc(100% + 18px); left: 50%; z-index: 90; background: var(--surface-overlay); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: var(--space-4); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base); }
.sn-links .nav__item--has-panel::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 24px; }
.sn-links .nav__item--has-panel:hover .nav__panel, .sn-links .nav__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.sn-links .nav__panel--mega { width: 640px; max-width: calc(100vw - 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-6); }
.sn-links .nav__panel--drop { width: 280px; }
.sn-links .nav__col-label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-subtle); padding: var(--space-1) var(--space-2) var(--space-2); }
.sn-links .nav__mega-link, .sn-links .nav__drop-link { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: background var(--duration-fast) var(--ease-standard); }
.sn-links .nav__drop-link { align-items: center; font-size: 14px; font-weight: 500; }
.sn-links .nav__mega-link:hover, .sn-links .nav__drop-link:hover { background: var(--surface-raised); }
.sn-links .nav__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--emphasis); }
.sn-links .nav__ic .lucide { width: 16px; height: 16px; }
.sn-links .nav__mega-tt { display: block; font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 500; }
.sn-links .nav__mega-d { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.sn-links .nav__mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-2); padding: var(--space-4) var(--space-2) 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-subtle); }
.sn-links .nav__mega-foot a, .sn-links .nav__drop-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--link); text-decoration: none; }
.sn-links .nav__drop-all { display: flex; justify-content: space-between; margin-top: var(--space-2); padding: var(--space-3) var(--space-2) var(--space-1); border-top: 1px solid var(--line); }
.sn-links .nav__mega-foot a .lucide, .sn-links .nav__drop-all .lucide { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-standard); }
.sn-links .nav__mega-foot a:hover .lucide, .sn-links .nav__drop-all:hover .lucide { transform: translateX(3px); }

/* mobile drawer */
.sd { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-6) var(--space-8); background: var(--surface); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base); }
.sd.is-open { opacity: 1; visibility: visible; transform: none; }
.sd-top { display: flex; align-items: center; justify-content: space-between; }
.sd-top img { height: 20px; width: auto; display: block; }
.sd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.dnav { display: flex; flex-direction: column; }
.dnav__link { font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.dnav__sec { padding: var(--space-4) 0 var(--space-2); border-bottom: 1px solid var(--line); }
.dnav__sec-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--emphasis); margin-bottom: var(--space-2); }
.dnav__sublink { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: 16px; color: var(--ink-muted); text-decoration: none; }
.dnav__sublink .lucide { width: 16px; height: 16px; color: var(--ink-subtle); }
.dnav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 1080px) {
  .sn-links .nav { gap: var(--space-4); }
  .sn-end .st-btn { display: none; }
}
@media (max-width: 960px) {
  .sn-links { display: none; }
  .sn-toggle { display: inline-grid; }
  .sn-end .st-seg, .sn-end .st-theme-toggle { display: none; }
  .sn-bar { padding-left: var(--space-4); }
}

/* ---------- split headlines (motion.js wraps words) ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.sw-i { display: inline-block; }
.st-js [data-split]:not(.is-in) .sw-i { transform: translateY(105%); opacity: 0; }
.st-js [data-split] .sw-i { transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-slow) var(--ease-standard); transition-delay: calc(var(--wi, 0) * 60ms + var(--split-delay, 0ms)); }
.st-js [data-split].is-static .sw-i { transition: none; }

/* ---------- lit statements (scroll-linked word opacity) ---------- */
.lit { font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; font-weight: 400; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.lit .lw { transition: opacity var(--duration-base) var(--ease-standard); }
.st-js .lit .lw { opacity: .2; }
.st-js .lit .lw.is-lit { opacity: 1; }

/* ---------- contour field: the method line as texture ---------- */
.cf { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--line-strong); }
.cf svg { display: block; width: 100%; height: 100%; }
.cf path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cf path.cf-em { stroke: var(--emphasis); }
.st-js .cf path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--duration-draw) var(--ease-standard); transition-delay: calc(var(--li, 0) * 45ms); }
.st-js .cf.is-in path { stroke-dashoffset: 0; }
.cf-fade-center { -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, transparent 0, transparent 35%, #000 85%); mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, transparent 0, transparent 35%, #000 85%); }
.cf-fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.cf-soft { opacity: .55; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 var(--space-24); overflow: hidden; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.hero-inner .st-label { justify-content: center; }
.hero-title { max-width: 12.5em; }
.hero-inner .st-lead { max-width: 58ch; margin-inline: auto; }
.hero-inner .st-actions { justify-content: center; }
.hero-cue { position: absolute; left: 50%; bottom: var(--space-8); z-index: 1; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-subtle); text-decoration: none; }
.hero-cue-line { display: block; width: 1px; height: 48px; background: var(--line-strong); transform-origin: top; }
.st-js .hero-cue-line { transform: scaleY(0); transition: transform var(--duration-draw) var(--ease-standard) 900ms; }
.st-js .hero.is-in .hero-cue-line { transform: none; }
.hero-cue:hover { color: var(--ink); }
.hero-cue:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
@media (max-height: 780px) { .hero-cue { display: none; } }

/* ---------- section helpers ---------- */
.sec-head-center { align-items: center; text-align: center; }
.sec-head-center > * { margin-inline: auto; }
.sec-head-center .st-label { justify-content: center; }
.problem-cells .st-cell { min-height: 220px; }
.problem-cells .st-h3 { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.25; }
.statement { padding-block: var(--space-32); }
.statement .st-container { max-width: 1120px; }
.statement-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-12); }

/* ---------- pinned method ---------- */
.mp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.mp-aside { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--space-8); }
.mp-aside .st-section-head { margin-bottom: 0; }
.mp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: none; }
.mp-steps .st-step { min-height: 340px; }
.mp-steps .st-step-q { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; }
.st-js .mp.is-scrub .st-step { opacity: .4; transition: opacity var(--duration-slow) var(--ease-standard); }
.st-js .mp.is-scrub .st-step.is-active { opacity: 1; }
.mp-ml .st-ml-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-js .mp-ml .st-ml-path { stroke-dashoffset: var(--mp-off, 1); transition: stroke-dashoffset var(--duration-base) var(--ease-standard); }
.st-js .mp-ml.is-drawn .st-ml-path { stroke-dashoffset: 0; transition-duration: var(--duration-draw); }
.mp-ml .st-ml-end { transition: opacity var(--duration-slow) var(--ease-standard); }
.st-js .mp-ml:not(.is-done) .st-ml-end { opacity: 0; }
.mp-ml .st-ml-steps li { transition: color var(--duration-base) var(--ease-standard); }
@media (min-width: 1025px) { .mp-ml .st-ml-steps li { font-size: 11px; letter-spacing: 1px; } }
.mp-ml .st-ml-steps li:last-child { color: var(--ink-subtle); }
.mp-ml .st-ml-steps li.is-active { color: var(--emphasis); }
.mp-note { margin: 0; padding-left: var(--space-4); border-left: 1px solid var(--line-strong); font-size: 14px; line-height: 22px; color: var(--ink-muted); max-width: 46ch; }

/* ---------- ways to solve + the toolkit ---------- */
.ways .st-card { min-height: 240px; }
.toolkit { margin-top: var(--space-16); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; padding-top: var(--space-8); border-top: 1px solid var(--line); }
.toolkit-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logos-cell { display: grid; place-items: center; height: 96px; padding: var(--space-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background var(--duration-fast) var(--ease-standard); }
.logos-cell:hover { background: var(--surface-raised); }
.logos-cell img { display: block; width: auto; max-width: 140px; object-fit: contain; }
html:not([data-theme="light"]) .logos-cell--mono img { filter: brightness(0) invert(1); }

/* ---------- portfolio / journey ---------- */
.journey .st-cell { min-height: 300px; }
.journey .st-cell-text { margin-top: var(--space-3); }
.journey-arrow { display: none; }

/* ---------- featured cases + testimonials (rendered from data/) ---------- */
.case-card .st-tags { margin-bottom: var(--space-2); }
.case-metrics { display: flex; gap: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.case-metric-v { display: block; font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.case-metric-l { display: block; margin-top: var(--space-1); font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.testi { margin: 0; }
.testi blockquote { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.4; font-weight: 400; flex: 1; }
.testi figcaption { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.testi-av { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--emphasis); }
.testi-role { color: var(--ink-subtle); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-12); }
.head-row .st-section-head { margin-bottom: 0; }

/* ---------- manifesto ---------- */
.manifesto .st-stats { margin-top: var(--space-16); }

/* ---------- contact ---------- */
.contact { overflow: hidden; }
.contact-cta { position: relative; padding-block: var(--space-32) var(--space-16); }
.contact-cta .st-container { position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; padding-bottom: var(--space-32); }
.direct { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.direct a { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.direct a:hover { color: var(--emphasis); }
.direct a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.direct-ic { flex: none; width: var(--control-md); height: var(--control-md); display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--emphasis); }
.direct-ic svg { width: 18px; height: 18px; }
.direct-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.direct-l { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-subtle); }
.direct-v { font-size: 16px; line-height: 24px; }
.contact-form { padding: var(--space-8); }
.contact-form .st-form { gap: var(--space-6); }
.form-legal { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8) 0; }
.form-sent-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--emphasis); }
.form-sent-mark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-js .form-sent:not([hidden]) .form-sent-mark path { animation: draw-check var(--duration-slow) var(--ease-standard) both 120ms; }
@keyframes draw-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- qualification modal (ids/classes are wired by the page script) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4); }
.modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--matte-black) 72%, transparent); }
.modal__dialog { position: relative; width: 100%; max-width: 620px; max-height: calc(100svh - 32px); overflow-y: auto; padding: var(--space-8); background: var(--surface-overlay); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.st-js .modal:not([hidden]) .modal__dialog { animation: modal-in var(--duration-base) var(--ease-standard) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); }
.modal__title { margin: var(--space-4) 0 var(--space-2); }
.modal__sub { margin: 0; }
.modal__hint { margin: var(--space-2) 0 var(--space-6); font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.modal__group { margin: 0 0 var(--space-6); padding: 0; border: 0; min-width: 0; }
.modal__group legend { padding: 0; margin-bottom: var(--space-3); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-muted); }
.chipset { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; color: var(--ink-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-selected { background: var(--action); border-color: var(--action); color: var(--on-action); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.modal__error { margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; color: var(--status-alert); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* ---------- footer ---------- */
.st-footer-brand p { max-width: 40ch; }
.foot-tag { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--ink); }
.foot-social { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.foot-social a { width: var(--control-md); height: var(--control-md); display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-muted); }
.foot-social a:hover { color: var(--ink); border-color: var(--line-strong); }
.foot-social svg { width: 18px; height: 18px; }
.st-footer-bottom a { color: var(--ink-subtle); }
.foot-address { font-style: normal; }
.foot-address span, .foot-nowrap { white-space: nowrap; }
@media (max-width: 640px) { .st-footer-top .foot-sede { grid-column: 1 / -1; } }

/* ============================================================
   Inner pages (about, services, service, cases, case, referral)
   ============================================================ */

/* page head: left-aligned editorial header over a contour field that
   tangles on the right (data-flip) and fades out behind the copy */
.ph { position: relative; padding: 168px 0 var(--space-24); overflow: hidden; border-bottom: 1px solid var(--line); }
.ph > .st-container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.ph-title { max-width: 18ch; }
.ph .st-lead { max-width: 60ch; }
.cf-fade-left { -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 88%); mask-image: linear-gradient(to right, transparent 42%, #000 88%); }
@media (max-width: 768px) { .ph .cf { opacity: .45; } }
.crumb { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.crumb:hover { color: var(--ink); }
.crumb svg { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.crumb:hover svg { transform: translateX(-3px); }
.crumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* closing contact band (every inner page ends here) */
.band { position: relative; overflow: hidden; padding-block: var(--space-32); text-align: center; }
.band > .st-container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.band .st-label { justify-content: center; }
.band .st-lead { margin-inline: auto; }
.band .st-actions { justify-content: center; }

/* lucide icons inside design-system icon slots */
.st-card-icon .lucide, .direct-ic .lucide { width: 20px; height: 20px; }

/* definition rows (about DNA, detail facts) */
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr); gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.row-k { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-subtle); }
.row-v { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 500; }
.row-v-small { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; color: var(--ink-muted); }

/* numbered belief list (about anti-manifesto) */
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); counter-reset: belief; border-top: 1px solid var(--line); }
.beliefs li { counter-increment: belief; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-6) 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; }
.beliefs li::before { content: counter(belief, decimal-leading-zero); font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.2px; color: var(--emphasis); font-variant-numeric: tabular-nums; }

/* capability groups (services hub) */
.cap-group + .cap-group { margin-top: var(--space-16); }
.cap-group .st-label { margin-bottom: var(--space-6); }
.cap-card { min-height: 240px; }
.ways-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }

/* filters (cases list) */
.filters { padding-block: var(--space-8); border-bottom: 1px solid var(--line); }
.filters-inner { display: grid; gap: var(--space-4); }
.filters-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.filters-label { padding-top: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-subtle); }
.filters-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.filters-meta b { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); }
button.chip { font: inherit; font-size: 14px; background: transparent; }
.chip .lucide { width: 14px; height: 14px; margin-right: var(--space-2); }
.chip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-16) 0; }
.case-client { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-subtle); }
.case-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.case-tags span { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.case-tags span + span::before { content: "·"; margin-right: var(--space-1); }

/* detail pages (service, case) */
.detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-16); align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.detail-block { display: flex; flex-direction: column; gap: var(--space-6); }
.detail-block > p:not(.st-label) { margin: 0; font-size: 18px; line-height: 30px; color: var(--ink-muted); max-width: 64ch; }
.detail-aside { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--space-4); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); border-top: 1px solid var(--line); }
.ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; }
.ticks li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; background: var(--emphasis); border-radius: 1px; }
.steps-ol { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); counter-reset: s; }
.steps-ol li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 26px; }
.steps-ol li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-size: 22px; line-height: 26px; color: var(--emphasis); font-variant-numeric: lining-nums tabular-nums; }
.facts { padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.facts h3 { margin: 0 0 var(--space-2); }
.facts-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; }
.facts-row span:first-child { color: var(--ink-subtle); }
.facts-row span:last-child { text-align: right; }
.facts .st-tags { margin-top: var(--space-4); }
.metrics-band { padding-block: var(--space-12); border-bottom: 1px solid var(--line); }
.other-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* referral: commission tiers + checkbox */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.tiers .st-cell { min-height: 260px; }
.tier-pct { font-family: var(--font-display); font-weight: 300; font-size: clamp(64px, 8vw, 104px); line-height: .95; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.tier-range { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; }
.tier-range span { display: block; margin-top: var(--space-1); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; opacity: .8; }
.pay-note { margin-top: var(--space-8); }
.pay-note strong { color: var(--ink); font-weight: 500; }
.st-check { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 22px; color: var(--ink-muted); cursor: pointer; }
.st-check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-sunken); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.st-check input::after { content: ""; width: 8px; height: 4px; border: solid var(--on-action); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.st-check input:checked { background: var(--action); border-color: var(--action); }
.st-check input:checked::after { opacity: 1; }
.st-check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.form-error { margin: 0; font-size: 14px; line-height: 20px; color: var(--status-alert); }

/* not found (detail pages with a bad ?id=) */
.notfound { padding: 200px 0 var(--space-32); }
.notfound .st-container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .detail-aside { position: static; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tiers .st-cell { min-height: 0; }
}
@media (max-width: 768px) {
  .ph { padding: 132px 0 var(--space-16); }
  .band { padding-block: var(--space-24); }
  .beliefs, .ticks { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .filters-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .filters-label { padding-top: 0; }
}
@media (max-width: 1024px) {
  .mp { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .mp-aside { position: static; }
  .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-steps .st-step { min-height: 0; }
  .st-js .mp.is-scrub .st-step { opacity: 1; }
  .toolkit { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .statement { padding-block: var(--space-24); }
  .contact-cta { padding-block: var(--space-24) var(--space-12); }
  .contact-grid { padding-bottom: var(--space-24); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero { padding-top: 120px; }
  .mp-steps { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-cell { height: 80px; }
  .contact-form { padding: var(--space-6); }
  .modal__dialog { padding: var(--space-6); }
  .case-metrics { gap: var(--space-6); }
}

/* nothing moves under reduced motion (sentire.css already zeroes durations) */
@media (prefers-reduced-motion: reduce) {
  .st-js [data-split] .sw-i { transform: none !important; opacity: 1 !important; }
  .st-js .lit .lw { opacity: 1; }
  .st-js .cf path { stroke-dashoffset: 0; }
  .st-js .hero-cue-line { transform: none; }
  .st-js .mp-ml .st-ml-path { stroke-dashoffset: 0; }
  .st-js .mp-ml .st-ml-end { opacity: 1; }
  .st-js .mp.is-scrub .st-step { opacity: 1; }
  .sn.is-hidden { transform: none; }
}