/* =====================================================================
   Brown Button home (v2). Loaded after styles.css, only on the home page.
   Editorial / technical language: very large type, monospace labels,
   hairline grids, ivory + ink rhythm, brown and coral as signals.
   ===================================================================== */

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

.x-page {
  --x-ink: #181514;
  --x-ink-2: #221e1c;
  --x-paper: #f4f0ea;
  --x-paper-2: #ebe5dd;
  --x-line: rgba(24, 21, 20, 0.12);
  --x-line-dark: rgba(244, 240, 234, 0.14);
  --x-soft: #6f6560;
  --x-soft-dark: #b5aca6;
  --x-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --x-gutter: clamp(20px, 4vw, 56px);
  --x-max: clamp(1320px, 84vw, 1880px);
  --x-radius: 0;
  --x-ease: cubic-bezier(0.2, 0, 0, 1);
  background: var(--x-paper);
  color: var(--x-ink);
}
.x-page main { overflow-x: clip; }
.x-wrap { width: min(100% - 2 * var(--x-gutter), var(--x-max)); margin-inline: auto; position: relative; }
.x-sec { padding: clamp(140px, 15vw, 300px) 0; position: relative; }
.x-mono { font-family: var(--x-mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; margin: 0; }
.x-label { color: var(--x-soft); margin-bottom: clamp(32px, 3.8vw, 64px); }
.x-tag { display: inline-block; padding: 6px 10px; border: 1px solid var(--x-line); border-radius: 0; color: var(--x-ink); margin-bottom: 28px; }
.x-tag--light, [data-x-dark] .x-tag { border-color: var(--x-line-dark); color: var(--x-paper); }
.x-h2 { margin: 0; font: var(--heading-weight) clamp(2.25rem, 1.3rem + 3.4vw, 6rem)/1.02 var(--font-heading); letter-spacing: -0.045em; color: inherit; max-width: 16ch; }
.x-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-right: 10px; vertical-align: 1px; }
.x-sample { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px dashed currentColor; border-radius: 0; font: 500 0.6875rem/1.4 var(--x-mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; vertical-align: middle; }
[data-x-dark] { background: var(--x-ink); color: var(--x-paper); }
[data-x-dark]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-x-dark] > *:not(.x-grid-lines) { position: relative; z-index: 1; }

/* buttons: pill + square-ish icon chip */
.x-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 24px 6px 6px; border-radius: 0; border: 0; font: 500 0.9375rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 200ms var(--x-ease), color 200ms var(--x-ease), transform 200ms var(--x-ease); }
.x-btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: var(--coral); color: var(--ink); flex: none; transition: transform 320ms var(--x-ease); }
.x-btn:hover .x-btn__icon { transform: rotate(-45deg); }
.x-btn:active { transform: translateY(1px); }
.x-btn--lg { min-height: 60px; padding-right: 28px; font-size: 1rem; }
.x-btn--lg .x-btn__icon { width: 48px; height: 48px; }
.x-btn--dark { background: var(--x-ink); color: var(--x-paper); }
.x-btn--dark:hover { background: var(--brown); }
.x-btn--light { background: var(--x-paper); color: var(--x-ink); }
.x-btn--light:hover { background: #fff8ef; }
.x-btn--coral { background: var(--coral); color: var(--ink); justify-content: center; }
.x-btn--coral .x-btn__icon { background: var(--ink); color: var(--coral); }
.x-btn--coral:hover { background: var(--coral-hover); }
.x-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.x-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.x-link .bb-icon { transition: transform 200ms var(--x-ease); }
.x-link:hover .bb-icon { transform: translate(3px, 2px); }
.x-link--light { color: var(--x-paper); }

/* hairline grid behind hero / contact */
.x-grid-lines { position: absolute; inset: 0; width: min(100% - 2 * var(--x-gutter), var(--x-max)); margin-inline: auto; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--x-line); }
.x-grid-lines i { border-right: 1px solid var(--x-line); position: relative; transform-origin: top; }
.x-grid-lines i::before, .x-grid-lines i::after { content: "+"; position: absolute; right: -5px; font: 400 12px/1 var(--x-mono); color: var(--x-soft); }
.x-grid-lines i::before { top: 132px; }
.x-grid-lines i::after { bottom: 64px; }
.x-grid-lines--dark { border-color: var(--x-line-dark); }
.x-grid-lines--dark i { border-color: var(--x-line-dark); }
.x-grid-lines--dark i::before, .x-grid-lines--dark i::after { color: var(--x-soft-dark); }

/* ---------------------------------------------------------------- header */
.xh { position: fixed; top: 14px; left: var(--x-gutter); right: var(--x-gutter); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.xh > * { pointer-events: auto; }
.xh__logo { display: block; width: 112px; color: var(--brown); padding: 8px 0; }
.xh__logo svg { width: 100%; height: auto; display: block; }
.xh__nav { display: none; position: absolute; left: 50%; transform: translateX(-50%); }
.xh__nav > ul { display: flex; gap: 2px; padding: 5px; border-radius: 0; background: rgba(244, 240, 234, 0.72); border: 1px solid var(--x-line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.xh__nav > ul a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 0; color: var(--x-ink); text-decoration: none; font: 500 0.875rem/1 var(--font-body); transition: background-color 160ms var(--x-ease), color 160ms var(--x-ease); }
.xh__nav > ul a:hover { background: var(--x-ink); color: var(--x-paper); }
.xh__cta { display: none; min-height: 48px; padding-right: 20px; }
.xh__cta .x-btn__icon { width: 36px; height: 36px; }
.xh__toggle { display: grid; place-content: center; gap: 6px; width: 52px; height: 52px; border-radius: 0; border: 0; background: var(--x-ink); cursor: pointer; }
.xh__toggle i { display: block; width: 20px; height: 2px; background: var(--x-paper); border-radius: 0; transition: transform 240ms var(--x-ease); }
.xh__toggle[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.xh__toggle[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.xh__menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 20px; border-radius: 0; background: var(--x-ink); color: var(--x-paper); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); max-height: calc(100dvh - 100px); overflow: auto; }
.xh__menu ul { margin-bottom: 20px; }
.xh__menu a:not(.x-btn) { display: flex; min-height: 44px; align-items: center; color: var(--x-paper); text-decoration: none; font: var(--heading-weight) 1.375rem/1.2 var(--font-heading); letter-spacing: -0.02em; }
.xh__menu .xh__sub a { font: 400 0.8125rem/1.2 var(--x-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--x-soft-dark); min-height: 36px; padding-left: 14px; }
@media (min-width: 1100px) {
  .xh__nav, .xh__cta { display: inline-flex; }
  .xh__toggle, .xh__menu { display: none !important; }
}

/* ---------------------------------------------------------------- hero: before / after wipe */
.xb { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(104px, 10vh, 150px); overflow: hidden; }
.xb__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: end; padding-bottom: clamp(28px, 4vh, 56px); }
.xb__head.x-wrap { width: min(100% - 2 * var(--x-gutter), 2200px); }
.xb__tag { color: var(--x-soft-dark); grid-column: 1 / -1; }
.xb__title { margin: 0; font: var(--heading-weight) clamp(2.5rem, 0.5rem + 4.5vw, 8.5rem)/0.92 var(--font-heading); letter-spacing: -0.06em; color: var(--x-paper); }
.xb__line { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.xb__line > span { display: inline-block; }
.xb__line--accent { color: var(--coral); }
.xb__side { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.xb__lead { margin: 0; color: var(--x-soft-dark); line-height: 1.6; font-size: clamp(1rem, 0.85rem + 0.35vw, 1.3rem); }
.xb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (min-width: 1000px) { .xb__head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .xb__line { white-space: nowrap; } }

/* stage */
.xb__stage { position: relative; flex: 1; min-height: clamp(300px, 38vh, 900px); margin: 0; border-radius: 0; border-top: 1px solid var(--x-line-dark); overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate; }
.xb-before, .xb-after { position: absolute; inset: 0; }
.xb-after { clip-path: inset(0 0 0 var(--x)); z-index: 2; }

/* BEFORE: the mess */
.xb-before { background: #e9e4dc; color: var(--ink); overflow: hidden; }
.xb-xl { position: absolute; left: 3%; top: 64px; width: 74%; background: #fbfaf7; border: 1px solid #cfc7bf; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35); font: 400 clamp(0.6875rem, 0.55rem + 0.25vw, 0.9375rem)/1.2 var(--font-body); }
.xb-xl__bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #dcd5cc; border-bottom: 1px solid #cfc7bf; white-space: nowrap; overflow: hidden; }
.xb-xl__dots { display: inline-flex; gap: 5px; } .xb-xl__dots i { width: 9px; height: 9px; border-radius: 50%; background: #b9b0a7; }
.xb-xl__bar em { font-style: normal; color: var(--error); font-weight: 600; margin-left: auto; }
.xb-xl__fx { display: flex; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #e0d9d1; font-family: var(--x-mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
.xb-xl__fx span { font-style: italic; color: var(--ink); }
.xb-xl__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.xb-xl__grid th, .xb-xl__grid td { border: 1px solid #e3ddd6; padding: 5px 7px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-xl__grid thead th { background: #efebe5; color: var(--muted); font-weight: 500; text-align: center; }
.xb-xl__grid tbody th, .xb-xl__grid thead tr:last-child th { background: #efebe5; color: var(--muted); font-weight: 500; width: 34px; text-align: center; }
.xb-xl__hdr td { font-weight: 700; background: #f3efe9; }
.xb-xl__grid td:nth-child(7) { font-style: italic; color: var(--muted); }
.xb-xl__grid tr.hl td { background: #fbd5c1; }
.xb-xl__grid tr.hl2 td:nth-child(4) { background: #f5e08a; }
.xb-xl__grid tr.err td:nth-child(5), .xb-xl__grid tr.err td:nth-child(8) { color: var(--error); font-weight: 700; }
.xb-xl__tabs { display: flex; gap: 2px; padding: 4px 8px; background: #efebe5; border-top: 1px solid #cfc7bf; white-space: nowrap; overflow: hidden; }
.xb-xl__tabs span { padding: 4px 10px; color: var(--muted); }
.xb-xl__tabs span.is-on { background: #fbfaf7; color: var(--ink); font-weight: 600; border-bottom: 2px solid #2f6653; }
.xb-note { position: absolute; padding: 16px 18px; width: clamp(140px, 13vw, 240px); background: #fbd5c1; color: var(--ink); font: 500 clamp(0.875rem, 0.7rem + 0.35vw, 1.25rem)/1.3 "Comic Sans MS", "Marker Felt", "Segoe Print", cursive; box-shadow: 0 18px 30px -18px rgba(0,0,0,0.45); }
.xb-note--1 { right: 18%; top: 52%; transform: rotate(-7deg); }
.xb-note--2 { left: 6%; bottom: 7%; transform: rotate(4deg); background: #f5e08a; }
.xb-chat { position: absolute; right: 3%; top: 76px; width: clamp(220px, 21vw, 380px); padding: 12px; border-radius: 0; background: #fbfaf7; box-shadow: 0 30px 50px -28px rgba(0,0,0,0.5); transform: rotate(2.5deg); font: 400 clamp(0.75rem, 0.62rem + 0.25vw, 1rem)/1.35 var(--font-body); }
.xb-chat__head { display: flex; justify-content: space-between; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid #e3ddd6; }
.xb-chat__head span { color: #fff; background: #2f6653; border-radius: 0; padding: 1px 8px; font-size: 0.75em; font-weight: 600; }
.xb-msg { margin: 0 0 6px; padding: 7px 10px; border-radius: 0; background: #efebe5; max-width: 88%; display: flex; flex-direction: column; }
.xb-msg i { font-style: normal; font-size: 0.75em; color: var(--muted); align-self: flex-end; }
.xb-msg--me { margin-left: auto; border-radius: 0; background: #dcefd9; }
.xb-alert { position: absolute; left: 30%; bottom: 10%; width: clamp(240px, 22vw, 380px); padding: 16px; background: #fbfaf7; border: 1px solid #cfc7bf; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5); font: 400 clamp(0.75rem, 0.65rem + 0.2vw, 0.9375rem)/1.4 var(--font-body); transform: rotate(-1.5deg); display: flex; flex-direction: column; gap: 6px; }
.xb-alert b { font-weight: 700; }
.xb-alert div { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.xb-alert u { text-decoration: none; padding: 4px 14px; border: 1px solid #b9b0a7; background: #efebe5; }

/* AFTER: the system */
.xb-after { background: #1f1b19; color: var(--x-paper); display: grid; grid-template-columns: clamp(150px, 13vw, 240px) minmax(0, 1fr); font: 400 clamp(0.75rem, 0.62rem + 0.25vw, 1rem)/1.4 var(--font-body); }
.xb-side { border-right: 1px solid var(--x-line-dark); padding: 60px 14px 22px; display: flex; flex-direction: column; gap: 24px; }
.xb-side__logo { width: 22px; color: var(--coral); padding-left: 8px; } .xb-side__logo svg { width: 100%; height: auto; display: block; }
.xb-side nav { display: flex; flex-direction: column; gap: 2px; }
.xb-side nav span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 0; color: var(--x-soft-dark); }
.xb-side nav span.is-on { background: rgba(236, 97, 64, 0.14); color: var(--x-paper); }
.xb-side nav span.is-on .bb-icon { color: var(--coral); }
.xb-main { padding: 60px clamp(18px, 2vw, 32px) clamp(18px, 2vw, 32px); display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 24px); min-width: 0; }
.xb-top { display: flex; align-items: center; gap: 14px; }
.xb-top p { margin: 0; color: var(--x-soft-dark); font-size: 1.05em; } .xb-top p b { color: var(--x-paper); font-weight: 600; }
.xb-ask { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--x-line-dark); border-radius: 0; color: var(--x-soft-dark); }
.xb-ask .bb-icon { color: var(--coral); }
.xb-live { color: #7fc8a9; font: 500 0.8em/1 var(--x-mono); text-transform: uppercase; }
.xb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.xb-kpi { padding: clamp(12px, 1.2vw, 20px); border-radius: 0; background: #2a2523; border: 1px solid var(--x-line-dark); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xb-kpi span { color: var(--x-soft-dark); font-size: 0.9em; }
.xb-kpi b { font: var(--heading-weight-strong) clamp(1.75rem, 1rem + 2vw, 3.5rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.xb-kpi em { font-style: normal; color: var(--x-soft-dark); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-kpi.is-key { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.xb-kpi.is-key span, .xb-kpi.is-key em { color: rgba(24, 21, 20, 0.75); }
.xb-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(10px, 1vw, 16px); flex: 1; min-height: 0; }
.xb-card { border-radius: 0; background: #2a2523; border: 1px solid var(--x-line-dark); padding: clamp(12px, 1.2vw, 20px); min-width: 0; overflow: hidden; }
.xb-card__h { margin: 0 0 12px; display: flex; justify-content: space-between; font-weight: 600; }
.xb-card__h span { font: 400 0.8em/1.4 var(--x-mono); text-transform: uppercase; color: var(--x-soft-dark); }
.xb-table { width: 100%; border-collapse: collapse; }
.xb-table th { text-align: left; font-weight: 500; color: var(--x-soft-dark); padding: 6px 8px 10px 0; font-size: 0.9em; }
.xb-table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--x-line-dark); white-space: nowrap; }
.xb-id { font-family: var(--x-mono); color: var(--coral); }
.xb-next { color: var(--x-soft-dark); }
.xb-pill { display: inline-block; padding: 3px 10px; border-radius: 0; font-size: 0.85em; font-weight: 600; }
.xb-pill--ok { background: rgba(127, 200, 169, 0.16); color: #9fdcc0; }
.xb-pill--wait { background: rgba(245, 224, 138, 0.14); color: #f0d77a; }
.xb-pill--done { background: rgba(244, 240, 234, 0.12); color: var(--x-paper); }
.xb-assist { display: flex; flex-direction: column; gap: 10px; }
.xb-q { align-self: flex-end; margin: 0; padding: 8px 12px; border-radius: 0; background: var(--brown); max-width: 92%; }
.xb-a { margin: 0; padding: 10px 12px; border-radius: 0; background: #35302d; color: var(--x-soft-dark); }
.xb-a b { color: var(--x-paper); }
.xb-bars { display: flex; align-items: flex-end; gap: 6px; height: clamp(50px, 6vw, 110px); margin-top: auto; }
.xb-bars i { flex: 1; height: var(--h); border-radius: 0; background: rgba(236, 97, 64, 0.35); transform-origin: bottom; }
.xb-bars i:last-child { background: var(--coral); }
.xb-cap { margin: 0; color: var(--x-soft-dark); font-size: 0.85em; }

/* labels + divider */
.xb__label { position: absolute; top: 14px; z-index: 4; padding: 6px 10px; border-radius: 0; pointer-events: none; }
.xb__label--l { left: 14px; background: var(--ink); color: var(--x-paper); }
.xb__label--r { right: 14px; background: var(--coral); color: var(--ink); }
.xb__divider { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 5; width: 2px; margin-left: -1px; background: var(--coral); }
.xb__divider:focus-visible { box-shadow: none; outline: none; }
.xb__divider:focus-visible .xb__knob { box-shadow: 0 0 0 3px var(--x-paper), 0 0 0 6px var(--ink); }
.xb__knob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 0; background: var(--ink); color: var(--x-paper); box-shadow: 0 0 0 2px var(--coral), 0 20px 40px -14px rgba(0,0,0,0.6); white-space: nowrap; }
.xb__knob .bb-icon { color: var(--coral); }

/* smaller screens: simpler before/after */
@media (max-width: 899px) {
  .xb__stage { min-height: 520px; margin: 0; }
  .xb-xl { left: 4%; width: 92%; top: 12%; }
  .xb-xl__grid th:nth-child(n+7), .xb-xl__grid td:nth-child(n+7) { display: none; }
  .xb-chat { right: 4%; top: auto; bottom: 22%; width: 62%; }
  .xb-alert, .xb-note--2 { display: none; }
  .xb-note--1 { right: auto; left: 6%; top: auto; bottom: 6%; }
  .xb-after { grid-template-columns: minmax(0, 1fr); }
  .xb-side { display: none; }
  .xb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xb-split { grid-template-columns: minmax(0, 1fr); }
  .xb-assist { display: none; }
  .xb-table th:nth-child(4), .xb-table td:nth-child(4) { display: none; }
  .xb-top p { display: none; }
  .xb__label { top: 10px; font-size: 0.625rem; max-width: calc(50% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xb__label--l { left: 10px; } .xb__label--r { right: 10px; }
  .xb__knob .x-mono { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .xb [data-xb-in], .js .xb__line > span, .js .xb [data-xb-mess], .js .xl [data-xc-in], .js .xl-logo { visibility: hidden; }
}
.reveal-failsafe .xb :is([data-xb-in], [data-xb-mess], [data-xc-in]):not([style]), .reveal-failsafe .xl-logo:not([style]), .reveal-failsafe .xb__line > span:not([style]) { visibility: visible !important; }

/* ---------------------------------------------------------------- marquee */
.x-mq { background: var(--x-ink); color: var(--x-paper); padding: clamp(16px, 2vw, 28px) 0; overflow: hidden; }
.x-mq__row { display: flex; width: max-content; will-change: transform; }
.x-mq ul { display: flex; align-items: center; }
.x-mq li { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px); font: var(--heading-weight) clamp(1.75rem, 1rem + 2.6vw, 4rem)/1 var(--font-heading); letter-spacing: -0.045em; white-space: nowrap; }
.x-mq li:nth-child(even) > span:first-child { color: transparent; -webkit-text-stroke: 1.2px var(--x-paper); }
.x-mq__sym { display: inline-block; width: 0.42em; color: var(--coral); }
.x-mq__sym svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .x-mq ul[aria-hidden] { display: none; } .x-mq__row { width: auto; flex-wrap: wrap; } }

/* ---------------------------------------------------------------- statement + proof bento */
.x-fill { margin: 0; max-width: 34ch; font: var(--heading-weight) clamp(1.75rem, 1.05rem + 2.6vw, 4.75rem)/1.14 var(--font-heading); letter-spacing: -0.035em; color: var(--x-ink); }
.x-fill--dark { color: var(--x-paper); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); max-width: 30ch; }
.x-fill .x-w { color: inherit; }
.x-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 1.8vw, 32px); margin-top: clamp(96px, 10vw, 192px); }
.x-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 2.6vw, 48px); border-radius: 0; min-height: clamp(320px, 24vw, 440px); }
.x-tile p { margin: 0; line-height: 1.55; max-width: 34ch; }
.x-tile > p:last-of-type { margin-top: auto; }
.x-tile__k { opacity: 0.75; }
.x-tile__num { font: var(--heading-weight) clamp(4.5rem, 3rem + 4vw, 8rem)/0.9 var(--font-heading) !important; letter-spacing: -0.07em; margin: 0 !important; max-width: none !important; }
.x-tile__num sup { font-size: 0.42em; vertical-align: 0.95em; margin-left: 4px; color: var(--coral); }
.x-tile--ink { background: var(--x-ink); color: var(--x-paper); }
.x-tile__sym { position: absolute; right: -8%; bottom: -26%; width: 46%; color: #2c2624; }
.x-tile__sym svg { width: 100%; height: auto; display: block; }
.x-tile--ink > *:not(.x-tile__sym), .x-tile--dark > *:not(.x-tile__sym) { position: relative; z-index: 1; }
.x-tile--dark { background: var(--x-ink); color: var(--x-paper); }
.x-tile__globe { right: -14%; bottom: -30%; width: 58%; color: #2c2624; }
.x-tile--paper { background: var(--x-paper-2); }
.x-tile--coral { background: var(--coral); color: var(--ink); }
.x-tile--brown { background: var(--brown); color: var(--x-paper); }
.x-tile--brown .x-tile__num sup { color: var(--coral); }
.x-tile--quote { background: transparent; border: 1px solid var(--x-line); }
.x-tile--quote blockquote { margin: auto 0 0; }
.x-tile--quote blockquote p { font: var(--heading-weight) clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.25 var(--font-heading); letter-spacing: -0.025em; max-width: 24ch; }
.x-tile__who { color: var(--x-soft); margin: 0 !important; }
.x-dial { position: relative; width: 168px; aspect-ratio: 1; margin: 6px 0 0; }
.x-dial i { position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 0; background: rgba(24, 21, 20, 0.18); transform: rotate(var(--a)) translateY(-74px); }
.x-dial i.is-on { background: var(--coral-deep); }
.x-dial b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: var(--heading-weight) 2.5rem/1 var(--font-heading); letter-spacing: -0.05em; }
.x-stack { display: flex; align-items: center; margin-top: 6px; }
.x-stack b { display: grid; place-items: center; width: clamp(120px, 6rem + 3vw, 168px); aspect-ratio: 1; border-radius: 50%; background: var(--x-ink); color: var(--x-paper); font: var(--heading-weight) clamp(2.6rem, 1.8rem + 1.6vw, 3.6rem)/1 var(--font-heading); letter-spacing: -0.05em; }
.x-stack sup { font-size: 0.5em; vertical-align: 0.7em; margin-left: 2px; color: var(--coral); }
@media (min-width: 768px) { .x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-tile--ink { grid-row: span 2; } }
@media (min-width: 1100px) {
  .x-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .x-tile--ink { grid-column: span 4; grid-row: span 2; }
  .x-tile--paper, .x-tile--clients { grid-column: span 4; }
  .x-tile--own { grid-column: span 3; }
  .x-tile--quote { grid-column: span 5; }
}

/* ---------------------------------------------------------------- services: bento of live previews */
.sb-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(64px, 7vw, 128px); }
.sb-head .x-h2 { max-width: 18ch; }
.sb-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 440px; }
.sb-head__side p { margin: 0; color: var(--x-soft-dark); line-height: 1.6; }
@media (min-width: 1000px) { .sb-head { grid-template-columns: minmax(0, 1fr) auto; } }


.sb-tile { position: relative; border-radius: 0; overflow: hidden; background: var(--x-ink-2); border: 1px solid var(--x-line-dark); transition: border-color 300ms var(--x-ease), transform 400ms var(--x-ease); }
.sb-tile:hover { border-color: rgba(236, 97, 64, 0.6); transform: translateY(-4px); }
.sb-tile__link { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 340px; padding: clamp(20px, 2vw, 32px); color: inherit; text-decoration: none; }
.sb-tile__link:focus-visible { box-shadow: inset 0 0 0 3px var(--coral); }
.sb-tile__top { display: flex; justify-content: space-between; align-items: center; color: var(--coral); }
.sb-tile__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-paper); transition: transform 320ms var(--x-ease), background-color 240ms var(--x-ease), color 240ms var(--x-ease); }
.sb-tile:hover .sb-tile__go { transform: rotate(45deg); background: var(--coral); color: var(--ink); border-color: var(--coral); }
.sb-tile__name { margin-top: 18px; font: var(--heading-weight) clamp(1.5rem, 1.15rem + 1.1vw, 2.4rem)/1.05 var(--font-heading); letter-spacing: -0.035em; }
.sb-tile__line { margin-top: 8px; color: var(--x-soft-dark); font-size: 0.9375rem; line-height: 1.5; max-width: 36ch; }
.sb-prev { position: relative; flex: 1; display: grid; place-items: center; margin-top: 24px; min-height: 150px; font: 400 clamp(0.75rem, 0.65rem + 0.2vw, 0.9375rem)/1.35 var(--font-body); }
/* tile colours */
.sb-prod-t { background: #2b1513; }

/* automation preview */
.sb-auto { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.sb-flow { display: flex; align-items: center; gap: 8px; }
.sb-node { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 0; background: #2f2926; border: 1px solid var(--x-line-dark); white-space: nowrap; }
.sb-node .bb-icon { color: var(--coral); }
.sb-wire { position: relative; flex: 1; height: 2px; background: rgba(236, 97, 64, 0.25); border-radius: 0; overflow: visible; }
.sb-wire b { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.sb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-stats > span { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 0; background: #2a2523; }
.sb-stats em { font-style: normal; color: var(--x-soft-dark); font-size: 0.85em; }
.sb-stats b { font: var(--heading-weight-strong) clamp(1.5rem, 1rem + 1.4vw, 2.5rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.sb-stats > span:first-child { background: var(--coral); color: var(--ink); }
.sb-stats > span:first-child em { color: rgba(24, 21, 20, 0.7); }
.sb-log { display: flex; flex-direction: column; gap: 6px; overflow: hidden; height: 6.6em; }
.sb-log > span { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 0; background: rgba(244, 240, 234, 0.05); color: var(--x-soft-dark); white-space: nowrap; }
.sb-log .bb-icon { color: #7fc8a9; }

/* phone preview */
.sb-phone { position: relative; width: min(190px, 70%); aspect-ratio: 9 / 17; border-radius: 0; border: 6px solid #120e0d; background: var(--x-paper); overflow: hidden; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.7); }
.sb-phone__notch { position: absolute; z-index: 2; top: 8px; left: 50%; width: 34%; height: 8px; margin-left: -17%; border-radius: 0; background: #120e0d; }
.sb-phone__screen { position: absolute; inset: 24px 8px 8px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.sb-feed { display: flex; flex-direction: column; gap: 8px; }
.sb-feed__item { display: flex; gap: 8px; align-items: center; padding: 9px; border-radius: 0; background: #ebe5dd; color: var(--ink); font-size: 0.72rem; }
.sb-feed__item i { width: 22px; height: 22px; border-radius: 50%; background: var(--brown); flex: none; }
.sb-feed__item:nth-child(3n+2) i { background: var(--coral); }
.sb-feed__item > span { display: flex; flex-direction: column; }
.sb-feed__item b { font-weight: 600; }
.sb-feed__item em { font-style: normal; color: var(--muted); }

/* AR cube */
.sb-cubewrap { position: relative; width: 110px; height: 150px; perspective: 700px; display: grid; place-items: center; }
.sb-cube { position: relative; width: 84px; height: 84px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(35deg); }
.sb-cube__f { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid rgba(24, 21, 20, 0.25); }
.sb-cube__f svg { width: 34%; height: auto; }
.sb-cube__f--front { transform: translateZ(42px); background: var(--brown); color: var(--coral); }
.sb-cube__f--back { transform: rotateY(180deg) translateZ(42px); background: var(--brown); color: var(--coral); }
.sb-cube__f--left { transform: rotateY(-90deg) translateZ(42px); background: #6b2a2e; }
.sb-cube__f--right { transform: rotateY(90deg) translateZ(42px); background: #3a1416; }
.sb-cube__f--top { transform: rotateX(90deg) translateZ(42px); background: var(--x-paper); }
.sb-cube__f--bottom { transform: rotateX(-90deg) translateZ(42px); background: #2b0f11; }
.sb-cube__shadow { position: absolute; bottom: 0; left: 50%; width: 90px; height: 14px; margin-left: -45px; border-radius: 50%; background: rgba(24, 21, 20, 0.28); filter: blur(6px); }

/* website preview */

/* custom software roles */
.sb-roles { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sb-roles__tabs { display: flex; gap: 6px; padding: 4px; border-radius: 0; background: #2f2926; align-self: flex-start; }
.sb-roles__tabs span { padding: 6px 12px; border-radius: 0; color: var(--x-soft-dark); transition: background-color 300ms var(--x-ease), color 300ms var(--x-ease); }
.sb-roles__tabs span.is-on { background: var(--x-paper); color: var(--x-ink); }
.sb-roles__screens { position: relative; height: 120px; }
.sb-roles__s { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 0; background: #2a2523; border: 1px solid var(--x-line-dark); opacity: 0; }
.sb-roles__s:first-child { opacity: 1; }
.sb-roles__s em { font-style: normal; color: var(--x-soft-dark); font-size: 0.85em; }
.sb-roles__s b { font-weight: 600; font-size: 1.1em; }
.sb-roles__s i { height: 8px; border-radius: 0; background: rgba(244, 240, 234, 0.1); }
.sb-roles__s i.s { width: 60%; }

/* product steps */
.sb-steps { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.sb-steps__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sb-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 0; background: rgba(244, 240, 234, 0.05); color: var(--x-soft-dark); transition: background-color 300ms var(--x-ease), color 300ms var(--x-ease); }
.sb-step em { font-style: normal; font-size: 0.85em; }
.sb-step.is-on { background: var(--coral); color: var(--ink); }
.sb-steps__bar { height: 4px; border-radius: 0; background: rgba(244, 240, 234, 0.1); overflow: hidden; }
.sb-steps__bar b { display: block; height: 100%; width: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0.25); }

/* support pulse */
.sb-pulse { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sb-pulse__status { display: inline-flex; align-items: center; gap: 10px; color: var(--x-paper); font-weight: 500; }
.sb-pulse__status i { width: 10px; height: 10px; border-radius: 50%; background: #7fc8a9; box-shadow: 0 0 0 4px rgba(127, 200, 169, 0.2); }
.sb-pulse__svg { width: 100%; height: 80px; overflow: visible; }
.sb-pulse__base { fill: none; stroke: rgba(244, 240, 234, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-pulse__line { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sb-pulse__meta { display: flex; justify-content: space-between; color: var(--x-soft-dark); }
.sb-pulse__meta b { color: var(--x-paper); font: var(--heading-weight-strong) 1.5rem/1 var(--font-heading); }


/* ---------------------------------------------------------------- work */
.x-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(72px, 8vw, 144px); }
.x-head-row .x-label { margin-bottom: 20px; }
/* selected work: hover-reveal index */
.xw { position: relative; }
.xw__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
.xw__row { position: relative; border-bottom: 1px solid var(--x-line); }
.xw__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--x-ink); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--x-ease); }
.xw__link { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: clamp(48px, 6.4vw, 120px) 0; color: var(--x-ink); text-decoration: none; }
.xw__no { color: var(--coral-deep); }
.xw__name { font: var(--heading-weight) clamp(1.75rem, 1rem + 2.6vw, 4.25rem)/1.05 var(--font-heading); letter-spacing: -0.05em; transition: transform 600ms var(--x-ease), color 300ms var(--x-ease); }
.xw__tag { grid-column: 2; color: var(--x-soft); }
.xw__year { display: none; color: var(--x-soft); }
.xw__go { grid-row: 1; grid-column: 3; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--x-line); border-radius: 50%; transition: background-color 300ms var(--x-ease), color 300ms var(--x-ease), border-color 300ms var(--x-ease), transform 400ms var(--x-ease); }
.xw__thumb { display: block; margin: 8px 0 56px 68px; }
.xw__shot { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden; text-align: center; }
.xw__shot b { font: var(--heading-weight) clamp(1.4rem, 1rem + 1.2vw, 2.2rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.xw__shot .x-mono { opacity: 0.6; }
.xw__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xw__shot--ink { background: var(--x-ink); color: var(--x-paper); }
.xw__shot--coral { background: var(--coral); color: var(--ink); }
.xw__shot--brown { background: var(--brown); color: var(--x-paper); }
.xw__shot--paper { background: #e6e0d8; color: var(--x-ink); }
.xw__float { display: none; }
@media (min-width: 900px) {
  .xw__link { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 220px) 90px 56px; gap: 32px; }
  .xw__tag { grid-column: auto; }
  .xw__year { display: block; text-align: right; }
  .xw__go { grid-row: auto; grid-column: auto; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .xw__thumb { display: none; }
  .xw__row:hover::after { transform: scaleX(1); }
  .xw__row:hover .xw__name { transform: translateX(24px); }
  .xw__row:hover .xw__go { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-paper); transform: rotate(45deg); }
  .xw__list:hover .xw__row:not(:hover) .xw__name { color: rgba(24, 21, 20, 0.3); }
  .xw__float { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: clamp(300px, 24vw, 460px); aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; box-shadow: 0 40px 70px -40px rgba(24, 21, 20, 0.6); }
  .xw__track { display: flex; flex-direction: column; will-change: transform; }
  .xw__track .xw__shot { border-radius: 0; flex: none; width: 100%; }
}

/* ---------------------------------------------------------------- why Brown Button: one reason at a time */
.x-why { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 50% at 50% 55%, #241a18 0%, #161211 70%); }
.x-why__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(96px, 12vh, 160px) var(--x-gutter); text-align: center; }
.x-why__k { position: absolute; top: clamp(40px, 7vh, 88px); left: 50%; transform: translateX(-50%); color: var(--x-soft-dark); }
.x-why__items { position: relative; display: grid; width: min(100%, 980px); }
.x-why__item { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3.4vh, 40px); }
.x-why__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px; border-radius: 0; background: linear-gradient(180deg, #2a2422, #1e1a19); border: 1px solid rgba(244, 240, 234, 0.12); box-shadow: inset 0 1px 0 rgba(244, 240, 234, 0.08), 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.x-why__chip > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: #161211; border: 1px solid rgba(244, 240, 234, 0.1); color: var(--x-paper); }
.x-why__chip > span:first-child { color: var(--coral); }
.x-why__chip--team { gap: 0; padding: 8px 10px; }
.x-why__chip--team > span { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 2px solid #221d1b; background: linear-gradient(135deg, #5a2a2a, #3a2624); font: 500 0.8rem/1 var(--font-body); color: var(--x-paper); }
.x-why__chip--team > span:first-child { margin-left: 0; background: var(--coral); color: var(--ink); }
.x-why__chip--team > span:nth-child(3) { background: linear-gradient(135deg, #6b4a3e, #3a2b26); }
.x-why__chip--team > span:nth-child(4) { background: linear-gradient(135deg, #4d1b1e, #2b1416); }
.x-why__chip--team > span:nth-child(5) { background: linear-gradient(135deg, #8a5a48, #4a3029); }
.x-why__chip--team .x-why__plus { background: #161211; font-size: 1.1rem; }
.x-why__h { margin: 0; font: var(--heading-weight) clamp(2.4rem, 1rem + 3.8vw, 6rem)/1 var(--font-heading); letter-spacing: -0.05em; color: var(--x-paper); }
.x-why__p { margin: 0; max-width: 58ch; color: var(--x-soft-dark); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem); line-height: 1.6; }
.x-why__btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 0; background: #1c1817; border: 1px solid rgba(244, 240, 234, 0.12); color: var(--x-paper); text-decoration: none; font-weight: 500; transition: background-color 250ms var(--x-ease), border-color 250ms var(--x-ease); }
.x-why__btn::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 240, 234, 0.6), transparent); }
.x-why__btn:hover { background: #2a2422; border-color: rgba(236, 97, 64, 0.5); }
.x-why__btn .bb-icon { transition: transform 250ms var(--x-ease); } .x-why__btn:hover .bb-icon { transform: translateX(4px); }
.x-why__dots { position: absolute; right: var(--x-gutter); top: 50%; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.x-why__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 240, 234, 0.2); transition: background-color 300ms var(--x-ease), transform 300ms var(--x-ease); }
.x-why__dots i.is-on { background: var(--coral); transform: scale(1.3); }
.x-why__chip--logos > span { width: 64px; height: 44px; padding: 6px; background: #f4f0ea; }
.x-why__chip--logos > span img { max-width: 100%; max-height: 100%; object-fit: contain; }
.x-why__chip--logos .x-why__plus { width: 44px; background: #161211; color: var(--x-paper); font-size: 1.1rem; }
/* without the pinned scroll (reduced motion): show the reasons one under another */
.x-why:not(.is-pin) .x-why__items { gap: clamp(96px, 14vh, 180px); }
.x-why:not(.is-pin) .x-why__item { grid-area: auto; }
.x-why:not(.is-pin) .x-why__dots { display: none; }
.x-why:not(.is-pin) .x-why__k { position: static; transform: none; margin-bottom: clamp(48px, 8vh, 96px); }

/* ---------------------------------------------------------------- kind words */
.x-words { border-top: 1px solid var(--x-line); }
@media (min-width: 900px) {
      .x-quote + }

/* ---------------------------------------------------------------- FAQ */
.x-faq { border-top: 1px solid var(--x-line); }
.x-faq__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; }
.x-faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.x-faq__intro .x-tag { margin-bottom: 0; }
.x-faq__p { margin: 0; color: var(--x-soft); max-width: 36ch; line-height: 1.6; }
.x-acc.bb-faq { border-top: 1px solid var(--x-line); }
.x-acc.bb-faq details { border-bottom: 1px solid var(--x-line); }
.x-acc.bb-faq summary { display: grid; grid-template-columns: 52px 1fr 24px; gap: 16px; align-items: center; min-height: 80px; color: var(--x-ink); font: var(--heading-weight) clamp(1.125rem, 1rem + 0.5vw, 1.5rem)/1.3 var(--font-heading); letter-spacing: -0.02em; }
.x-acc.bb-faq summary .x-mono { color: var(--coral-deep); }
.x-acc.bb-faq summary .bb-icon { color: var(--x-ink); }
.x-acc .bb-faq-a { padding: 0 0 26px 68px; color: var(--x-soft); line-height: 1.65; max-width: 60ch; font-size: 1rem; }
@media (min-width: 1100px) {
  .x-faq__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(80px, 8vw, 160px); align-items: start; }
  .x-faq__intro { position: sticky; top: 120px; }
}

/* ---------------------------------------------------------------- contact */
.x-contact { overflow: hidden; }
.x-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; }
.x-contact__intro { display: flex; flex-direction: column; align-items: flex-start; }
.x-contact__intro .x-tag { margin-bottom: 32px; }
.x-contact__title { margin: 0; font: var(--heading-weight) clamp(2.5rem, 1.2rem + 4.4vw, 7.5rem)/0.98 var(--font-heading); letter-spacing: -0.055em; max-width: 13ch; }
.x-contact__p { margin: 28px 0 0; color: var(--x-soft-dark); line-height: 1.6; max-width: 42ch; }
.x-contact__ways { margin-top: 40px; display: grid; gap: 4px; }
.x-contact__ways a { display: inline-flex; min-height: 36px; align-items: center; color: var(--x-paper); text-decoration: none; font-size: 0.875rem; }
.x-contact__ways a::before { content: "→"; color: var(--coral); margin-right: 10px; }
.x-contact__ways a:hover { color: var(--coral); }
.x-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 24px; padding: clamp(24px, 3vw, 40px); border-radius: 0; background: var(--x-ink-2); border: 1px solid var(--x-line-dark); align-self: start; }
.x-field { display: flex; flex-direction: column; gap: 6px; }
.x-field label { font: 400 0.6875rem/1.4 var(--x-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--x-soft-dark); }
.x-field label span { text-transform: none; letter-spacing: 0; }
.x-field input, .x-field select, .x-field textarea { width: 100%; min-height: 48px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(244, 240, 234, 0.3); border-radius: 0; color: var(--x-paper); font: 400 1rem/1.5 var(--font-body); transition: border-color 200ms var(--x-ease); }
.x-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f4f0ea' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.x-field select option { color: var(--ink); }
.x-field textarea { resize: vertical; min-height: 96px; }
.x-field input::placeholder, .x-field textarea::placeholder { color: rgba(244, 240, 234, 0.4); }
.x-field input:focus, .x-field select:focus, .x-field textarea:focus { outline: none; border-bottom-color: var(--coral); box-shadow: 0 1px 0 0 var(--coral); }
.x-field [aria-invalid="true"] { border-bottom-color: #ff9b80; }
.x-field__err { margin: 0; color: #ff9b80; font-size: 0.8125rem; }
.x-field__err:empty { display: none; }
.x-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--x-soft-dark); line-height: 1.5; cursor: pointer; }
.x-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--coral); flex: none; }
.x-check a { color: var(--x-paper); }
.x-form .x-btn--coral { width: 100%; }
@media (min-width: 640px) { .x-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-field--full { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .x-contact__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(80px, 8vw, 160px); } }

/* ---------------------------------------------------------------- footer */
.xf { position: relative; padding: clamp(88px, 10vw, 168px) 0 28px; overflow: hidden; border-top: 1px solid var(--x-line-dark); }
.xf__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: clamp(64px, 8vw, 128px); }
.xf__line { margin: 0; font: var(--heading-weight) clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)/1.15 var(--font-heading); letter-spacing: -0.035em; max-width: 20ch; }
.xf__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.xf__cols .x-mono { color: var(--x-soft-dark); margin-bottom: 14px; }
.xf__cols li { min-height: 34px; display: flex; align-items: center; color: var(--x-soft-dark); font-size: 0.9375rem; }
.xf__cols a { color: var(--x-paper); text-decoration: none; }
.xf__cols a:hover { color: var(--coral); }
.xf__logo { color: var(--x-paper); line-height: 0; }
.xf__logo svg { width: 100%; height: auto; display: block; }
.xf__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--x-line-dark); color: var(--x-soft-dark); }
.xf__bottom ul { display: flex; gap: 20px; }
.xf__bottom a, .xf__bottom button { color: var(--x-soft-dark); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; min-height: 32px; }
.xf__bottom a:hover, .xf__bottom button:hover { color: var(--x-paper); }
@media (min-width: 900px) { .xf__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .xf__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* focus rings on dark */
[data-x-dark] :where(a, button, input, select, textarea, summary):focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--x-paper); }
.x-page .wa-fab { box-shadow: 0 0 0 2px var(--x-paper), 0 18px 40px -16px rgba(0, 0, 0, 0.5); }

/* header adapts when it sits over a dark section */
.xh__logo, .xh__nav > ul, .xh__nav > ul a { transition: color 300ms var(--x-ease), background-color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.xh.is-dark .xh__logo { color: var(--x-paper); }
.xh.is-dark .xh__nav > ul { background: rgba(34, 30, 28, 0.72); border-color: var(--x-line-dark); }
.xh.is-dark .xh__nav > ul a { color: var(--x-paper); }
.xh.is-dark .xh__nav > ul a:hover { background: var(--x-paper); color: var(--x-ink); }
.xh.is-dark .xh__cta, .xh.is-dark .xh__toggle { background: var(--x-paper); color: var(--x-ink); }
.xh.is-dark .xh__toggle i { background: var(--x-ink); }
@media (max-width: 699px) {
  .x-grid-lines i::before, .x-grid-lines i::after { display: none; }
  .x-grid-lines { opacity: 0.6; }
}


/* ---- hero: darkened brand-dusk background + more breathing room ---- */
.x-page .xb {
  background:
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(236, 97, 64, 0.28) 0%, rgba(236, 97, 64, 0) 70%),
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(110, 36, 40, 0.55) 0%, rgba(110, 36, 40, 0) 70%),
    linear-gradient(135deg, #2b0f11 0%, #170f0e 48%, #110d0c 72%, #1e100d 100%);
}
.xb { padding-top: clamp(120px, 14vh, 210px); }
.xb__head { padding-bottom: clamp(40px, 7vh, 104px); gap: 28px clamp(48px, 6vw, 120px); }
.xb__tag { margin-bottom: clamp(8px, 1.5vh, 24px); }
.xb__side { gap: 32px; max-width: 480px; }
.xb__stage { margin: 0 var(--x-gutter) var(--x-gutter); border-radius: 0; border-top: 0; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7); }

/* declutter the "before" side */
.xb-note--2 { display: none; }
.xb-xl { width: 62%; left: 4%; top: 72px; }
.xb-xl__grid tbody tr:nth-child(n+9) { display: none; }
.xb-chat { width: clamp(220px, 19vw, 340px); top: 84px; right: 5%; }
.xb-note--1 { right: 26%; top: auto; bottom: 10%; }
.xb-alert { left: 36%; bottom: 6%; width: clamp(220px, 19vw, 330px); }

/* more air in the dashboard */
.xb-main { padding: 72px clamp(24px, 3vw, 56px) clamp(24px, 3vw, 48px); gap: clamp(18px, 2vw, 32px); }
.xb-kpis { gap: clamp(14px, 1.4vw, 24px); }
.xb-kpi { padding: clamp(16px, 1.6vw, 28px); gap: 10px; }
.xb-split { gap: clamp(14px, 1.4vw, 24px); }
.xb-card { padding: clamp(16px, 1.6vw, 28px); }
.xb-table td { padding: 13px 10px 13px 0; }
.xb-table tbody tr:nth-child(n+5) { display: none; }
.xb-side { padding: 72px 18px 24px; gap: 32px; }
@media (max-width: 899px) { .xb__stage { margin: 0 12px 12px; border-radius: 0; } .xb-xl { width: 92%; } }

/* more spreadsheets: a cascade of open windows behind the main sheet */
.xb-xl--back { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.xb-xl--back .xb-xl__bar { background: #d3cbc1; }
.xb-xl--back .xb-xl__bar em { color: var(--muted); font-weight: 500; }
.xb-xl--back .xb-xl__grid td:nth-child(6), .xb-xl--back .xb-xl__grid td:nth-child(5) { color: var(--error); }
.xb-xl--b1 { left: 1.2%; top: 50px; width: 52%; transform: rotate(-1.2deg); }
.xb-xl--b2 { left: 2.6%; top: 80px; width: 56%; transform: rotate(0.8deg); }
.xb-xl--b3 { left: 4%; top: 110px; width: 58%; transform: rotate(-0.6deg); }
.xb-xl:not(.xb-xl--back) { top: 142px; left: 5.4%; width: 60%; }
@media (max-width: 899px) {
  .xb-xl--b1, .xb-xl--b2, .xb-xl--b3 { width: 88%; }
  .xb-xl:not(.xb-xl--back) { left: 6%; width: 88%; }
  .xb-xl--back .xb-xl__grid th:nth-child(n+6), .xb-xl--back .xb-xl__grid td:nth-child(n+6) { display: none; }
}

.x-fill__accent { color: var(--coral-deep); }
@media (max-width: 520px) {
  .sb-flow { gap: 4px; }
  .sb-node { padding: 8px 10px; gap: 6px; font-size: 0.75rem; }
  .sb-node .bb-icon { display: none; }
  .sb-stats { gap: 6px; }
  .sb-stats > span { padding: 10px; }
  .sb-tile__link { min-height: 300px; }
}

/* apps tile: web app window with the phone overlapping */
.sb-devices { position: relative; width: 100%; height: 100%; min-height: 300px; }
.sb-webapp { position: absolute; left: 0; top: 4%; width: 92%; border-radius: 0; overflow: hidden; background: var(--x-paper); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.7); color: var(--ink); font-size: 0.7rem; }
.sb-webapp__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #e6e0d8; color: var(--muted); }
.sb-webapp__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfc7bf; }
.sb-webapp__bar span { margin-left: 8px; padding: 2px 10px; border-radius: 0; background: #efebe5; font-size: 0.95em; }
.sb-webapp__body { display: grid; grid-template-columns: 22% 1fr; min-height: 150px; }
.sb-webapp__side { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: #1f1b19; }
.sb-webapp__side b { width: 14px; height: 14px; border-radius: 0; background: var(--coral); margin-bottom: 4px; }
.sb-webapp__side i { height: 6px; border-radius: 0; background: rgba(244, 240, 234, 0.2); }
.sb-webapp__main { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.sb-webapp__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sb-webapp__kpis > span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 0; background: #ebe5dd; }
.sb-webapp__kpis > span:first-child { background: var(--coral); }
.sb-webapp__kpis em { font-style: normal; color: rgba(24, 21, 20, 0.65); }
.sb-webapp__kpis b { font: var(--heading-weight-strong) 1.2rem/1.1 var(--font-heading); letter-spacing: -0.03em; }
.sb-webapp__rows { display: flex; flex-direction: column; }
.sb-webapp__rows > span { display: grid; grid-template-columns: 38px 1fr auto; gap: 6px; align-items: center; padding: 5px 2px; border-top: 1px solid #e6e0d8; transition: background-color 300ms var(--x-ease); }
.sb-webapp__rows > span.is-hot { background: rgba(236, 97, 64, 0.14); }
.sb-webapp__rows b { font-family: var(--x-mono); font-weight: 500; color: var(--brown); }
.sb-webapp__rows em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-webapp__rows u { text-decoration: none; padding: 1px 6px; border-radius: 0; background: #ebe5dd; white-space: nowrap; }
.sb-devices .sb-phone { position: absolute; right: 0; top: 40%; width: min(132px, 42%); border-width: 5px; border-radius: 0; z-index: 2; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.75); }
.sb-devices .sb-feed__item { padding: 7px; font-size: 0.62rem; }
.sb-devices .sb-feed__item i { width: 16px; height: 16px; }

/* websites tile: digital visibility checks */

/* automation tile: manufacturing example */
.sb-auto-t .sb-prev { position: relative; }
.sb-example { position: absolute; right: 0; top: -6px; color: var(--x-soft-dark); }
.sb-flow .sb-node { font-size: 0.92em; padding: 9px 12px; }

/* services: horizontal gallery (native swipe; pinned + scroll-driven on desktop via js/home.js) */
.sb-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * max(var(--x-gutter), (100vw - var(--x-max)) / 2)); padding-inline: max(var(--x-gutter), (100vw - var(--x-max)) / 2); }
.sb-viewport::-webkit-scrollbar { display: none; }
.sb-viewport:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.sb-grid { display: flex; gap: 16px; width: max-content; }
.sb-tile { flex: none; width: min(84vw, 480px); height: clamp(420px, 56vh, 640px); scroll-snap-align: start; }
.sb-tile__link { min-height: 0; }
.sb-progress { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.sb-progress__bar { flex: 1; height: 2px; background: var(--x-line-dark); border-radius: 0; overflow: hidden; }
.sb-progress__bar i { display: block; height: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0.14); }
.sb-progress__count { color: var(--x-soft-dark); }
.sb-progress__count b { color: var(--x-paper); font-weight: 500; }
/* pinned mode: fit header + gallery into one screen */
.x-svc.is-pan { min-height: 100vh; min-height: 100svh; padding: clamp(72px, 9vh, 120px) 0 clamp(32px, 5vh, 64px); display: flex; flex-direction: column; justify-content: center; }
.x-svc.is-pan .sb-head { margin-bottom: clamp(24px, 4vh, 48px); }
.x-svc.is-pan .sb-viewport { overflow: visible; scroll-snap-type: none; }
.x-svc.is-pan .sb-tile:hover { transform: none; }
.x-svc.is-pan .sb-tile { height: clamp(340px, calc(100svh - 430px), 680px); }
.x-svc.is-pan .sb-head .x-h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 5rem); }
.x-svc.is-pan .sb-progress { margin-top: clamp(16px, 2.5vh, 28px); }

/* the automation card is wider so its four-stage flow fits */
.sb-auto-t { width: min(92vw, 780px); }
.sb-flow .sb-node .bb-icon { display: inline-block; }
@media (max-width: 899px) { .sb-flow .sb-node .bb-icon { display: none; } }

/* five grouped service cards: whole card links to the main page, chips link to the detail pages */
.sb-tile__name { margin: 18px 0 0; }
.sb-tile__main { color: inherit; text-decoration: none; }
.sb-tile__main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sb-tile__main:focus-visible { box-shadow: none; outline: none; }
.sb-tile:has(.sb-tile__main:focus-visible) { box-shadow: 0 0 0 3px var(--coral); }
.sb-chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sb-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-paper); text-decoration: none; font: 500 0.8125rem/1 var(--font-body); transition: background-color 200ms var(--x-ease), color 200ms var(--x-ease), border-color 200ms var(--x-ease); }
.sb-chip:hover { background: var(--x-paper); color: var(--x-ink); border-color: var(--x-paper); }
.sb-prev { margin-top: 18px; }

/* Websites & visibility: a page assembles, goes live, scores 100 */
.sb-web-t .sb-prev { min-height: 0; grid-template-rows: minmax(0, 1fr); place-items: stretch center; padding-bottom: 2px; }
.sb-build { position: relative; display: flex; align-self: stretch; min-height: 0; max-height: 360px; flex-direction: column; width: 100%; max-width: 520px; border-radius: 0; overflow: hidden; background: #fbfaf7; border: 1px solid var(--x-line); box-shadow: 0 30px 50px -34px rgba(24, 21, 20, 0.45); font-size: 0.78rem; }
.sb-build__bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e6e0d8; color: var(--muted); }
.sb-build__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #d6cfc6; }
.sb-build__bar > span { margin-left: 10px; padding: 3px 12px; border-radius: 0; background: #efebe5; }
.sb-build__bar u { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 0; background: var(--x-ink); color: var(--x-paper); text-decoration: none; font: 500 0.85em/1.4 var(--x-mono); letter-spacing: 0.04em; }
.sb-build__bar u i { width: 7px; height: 7px; border-radius: 50%; background: #7fc8a9; box-shadow: 0 0 0 3px rgba(127, 200, 169, 0.25); }
.sb-build__page { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 12px 16px; }
.sb-build__nav { flex: none; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sb-build__nav b { width: 16px; height: 16px; border-radius: 0; background: var(--brown); }
.sb-build__nav i { width: 28px; height: 6px; border-radius: 0; background: #ddd6cd; }
.sb-build__nav b + i { margin-left: auto; }
.sb-build__nav s { width: 46px; height: 16px; border-radius: 0; background: var(--coral); }
.sb-build__h { flex: none; display: block; height: 14px; width: 70%; border-radius: 0; background: var(--x-ink); }
.sb-build__h--2 { width: 46%; }
.sb-build__p { flex: none; display: block; height: 7px; width: 82%; border-radius: 0; background: #e2dbd2; }
.sb-build__cards { flex: 1; min-height: 18px; max-height: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.sb-build__cards span { border-radius: 0; background: #ece6de; }
.sb-build__cards span:first-child { background: rgba(236, 97, 64, 0.22); }
.sb-build__scores { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 12px 10px; border-top: 1px solid #e6e0d8; background: #f5f1eb; }
.sb-score { position: relative; display: grid; justify-items: center; gap: 4px; }
.sb-score { gap: 2px; }
.sb-score svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.sb-score circle { fill: none; stroke-width: 4; }
.sb-score__bg { stroke: #e2dbd2; }
.sb-score__arc { stroke: #3f9b74; stroke-linecap: round; stroke-dasharray: 100 100; }
.sb-score b { position: absolute; top: 0; height: 38px; display: grid; place-items: center; font: var(--heading-weight-strong) 0.72rem/1 var(--font-heading); letter-spacing: -0.02em; color: #2f7d5c; }
.sb-score em { font-style: normal; color: var(--x-soft); font-size: 0.92em; }
.sb-build [data-sb-blk] { transform-origin: left center; }

/* Client logos: two rows drifting in opposite directions */
.x-logos { padding: 0 0 clamp(140px, 15vw, 300px); overflow: hidden; }
.x-logos__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: clamp(40px, 4.4vw, 72px); }
.x-logos__head .x-label { margin: 0; }
.x-logos__line { margin: 0; color: var(--x-ink); font: var(--heading-weight) clamp(1.15rem, 0.9rem + 0.6vw, 1.6rem)/1.2 var(--font-heading); letter-spacing: -0.03em; }
.x-logos__rows { display: grid; gap: clamp(10px, 1vw, 16px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-logos__row { display: flex; width: max-content; will-change: transform; }
.x-logos__row ul { display: flex; gap: clamp(10px, 1vw, 16px); padding-right: clamp(10px, 1vw, 16px); }
.x-logo { --bh: clamp(124px, 6rem + 2.4vw, 156px); display: grid; place-items: center; width: clamp(190px, 10rem + 4.4vw, 290px); height: var(--bh); padding: 18px 24px; overflow: hidden; border: 1px solid var(--x-line); border-radius: 0; background: rgba(255, 255, 255, 0.35); transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.x-logo img { width: min(var(--w, 160px), 100%); max-height: calc(var(--bh) - 36px); height: auto; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: 0.78; transition: filter 300ms var(--x-ease), opacity 300ms var(--x-ease); }
.x-logo:hover { background: #fff; border-color: rgba(24, 21, 20, 0.2); }
.x-logo:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .x-logos__row ul[aria-hidden] { display: none; }
  .x-logos__row { width: auto; }
  .x-logos__row ul { flex-wrap: wrap; justify-content: center; padding: 0 var(--x-gutter); }
  .x-logos__rows { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- CTA: a coral pill that opens into a panel */
.x-cta { padding: 0 var(--x-gutter) clamp(140px, 15vw, 300px); }
.x-cta__panel { position: relative; overflow: hidden; max-width: calc(var(--x-max) + 2 * clamp(24px, 4vw, 80px)); margin-inline: auto; border-radius: 0; background: var(--coral); color: var(--ink); }
.x-cta__inner { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 6vw, 96px); min-height: clamp(460px, 72vh, 820px); padding: clamp(32px, 5vw, 96px) clamp(24px, 4vw, 80px); }
.x-cta__k { margin: 0; color: rgba(24, 21, 20, 0.6); }
.x-cta__h { margin: 0; font: var(--heading-weight) clamp(3.5rem, 1rem + 10vw, 13rem)/0.9 var(--font-heading); letter-spacing: -0.065em; }
.x-cta__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.x-cta__line > span { display: inline-block; }
.x-cta__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.x-cta__p { margin: 0; max-width: 34ch; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); line-height: 1.5; color: rgba(24, 21, 20, 0.8); }
.x-cta__btn { transition: background-color 200ms var(--x-ease), color 200ms var(--x-ease); }
.x-cta__btn .x-btn__icon { background: var(--coral); color: var(--ink); }
.x-cta__panel { cursor: pointer; }
.x-cta__cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .x-cta__panel { cursor: none; }
  .x-cta__cursor { display: grid; place-items: center; position: absolute; left: 0; top: 0; z-index: 3; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: var(--x-ink); color: var(--x-paper); font: 500 0.95rem/1 var(--font-body); pointer-events: none; transform: scale(0); }
}


/* ===================================================================== new home hero: the logo, drawn in echoing lines */
.xl { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(120px, 16vh, 200px) 0 clamp(80px, 10vh, 140px); text-align: center; overflow: hidden; }
.xl > .xl-logo { position: absolute; left: 50%; top: 50%; z-index: 0; height: min(150svh, 1800px); width: auto; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.xl-logo path { fill: none; stroke: var(--x-paper); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.xl-logo .xl-l[data-xl-l="0"] path { stroke-width: 1.5; }
.xl::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 40% 42% at 50% 54%, rgba(20, 14, 13, 0.9) 0%, rgba(20, 14, 13, 0.72) 45%, rgba(20, 14, 13, 0) 100%); }
.xl > .xl-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vh, 36px); }
.xl .xb__tag { margin: 0; }
.xl-title { font-size: clamp(2.4rem, 0.4rem + 4.4vw, 8rem); line-height: 0.95; text-align: center; }
.xl-title .xb__line { white-space: nowrap; }
@media (max-width: 599px) { .xl-title .xb__line { white-space: normal; } }
.xl-lead { max-width: 46ch; margin: 0 auto; }
.xl-actions { justify-content: center; }
/* services: Design it right */
.sb-dsn { position: relative; display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; height: min(100%, 220px); }
.sb-dsn__frame { position: relative; border-radius: 0; border: 1.5px dashed transparent; transition: background-color 450ms var(--x-ease), border-color 450ms var(--x-ease); }
.sb-dsn__frame > * { transition: opacity 350ms var(--x-ease); }
.sb-dsn__frame.is-wire { background: transparent !important; border-color: rgba(244, 240, 234, 0.6); }
.sb-dsn__frame.is-wire > * { opacity: 0; }
.sb-dsn__frame--logo { background: var(--brown); }
.sb-dsn__frame--logo i { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); left: 24%; top: 24%; }
.sb-dsn__frame--logo i + i { border-radius: 0; left: 46%; top: 44%; background: var(--x-paper); }
.sb-dsn__frame--screen { grid-row: span 2; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--x-paper); }
.sb-dsn__frame--screen b { height: 14px; width: 60%; border-radius: 0; background: var(--x-ink); }
.sb-dsn__frame--screen i { height: 7px; border-radius: 0; background: #d9d1c7; } .sb-dsn__frame--screen i.s { width: 70%; }
.sb-dsn__frame--screen u { margin-top: auto; height: 22px; width: 50%; border-radius: 0; background: var(--coral); }
.sb-dsn__frame--type { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; background: #2a2523; color: var(--x-paper); }
.sb-dsn__frame--type b { font: var(--heading-weight) 1.9rem/1 var(--font-heading); letter-spacing: -0.05em; }
.sb-dsn__sw { display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; }
.sb-dsn__sw i { width: 12px; height: 12px; border-radius: 50%; background: var(--brown); } .sb-dsn__sw i:nth-child(2) { background: var(--coral); } .sb-dsn__sw i:nth-child(3) { background: var(--x-paper); } .sb-dsn__sw i:nth-child(4) { background: #7fc8a9; }
.sb-dsn__cursor { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--x-paper); box-shadow: 0 0 0 5px rgba(244, 240, 234, 0.25); pointer-events: none; }

/* selected work: name + one-line description */
.xw__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xw__desc { max-width: 60ch; color: var(--x-soft); font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.0625rem); line-height: 1.55; }
@media (min-width: 900px) {
  .xw__link { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 220px) minmax(0, 170px) 56px; align-items: start; }
  .xw__no, .xw__tag, .xw__year { padding-top: 0.9em; }
  .xw__go { margin-top: 0.4em; }
  .xw__year { text-align: right; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .xw__row .xw__desc { transition: transform 600ms var(--x-ease); }
  .xw__row:hover .xw__desc { transform: translateX(24px); }
}

/* ---------------------------------------------------------------- kind words: portrait switcher */
.xq__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(72px, 8vw, 144px); }
.xq__head .x-h2 { max-width: 22ch; }
.xq { display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 5vh, 64px); }
.xq__faces { width: 100%; overflow: hidden; display: flex; justify-content: flex-start; padding: 16px 0; }
.xq__track { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.xq__face { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0.55; filter: grayscale(1); transition: opacity 400ms var(--x-ease), filter 400ms var(--x-ease); }
.xq__face:hover { opacity: 0.85; }
.xq__face.is-on { width: clamp(96px, 8vw, 128px); height: clamp(96px, 8vw, 128px); opacity: 1; filter: none; }
.xq__img { position: absolute; inset: 8%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--brown), #2b1416); color: var(--x-paper); font: var(--heading-weight) 1.1rem/1 var(--font-heading); }
.xq__face.is-on .xq__img { font-size: 1.6rem; }
.xq__img img { width: 100%; height: 100%; object-fit: cover; }
.xq__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.xq__ring circle { fill: none; stroke: var(--x-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.xq__ring .xq__ring-fill { stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.xq__face:not(.is-on) .xq__ring { opacity: 0; }
.xq__face:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.xq__items { display: grid; width: min(100%, 980px); text-align: center; }
.xq__item { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vh, 40px); visibility: hidden; }
.xq__item.is-on { visibility: visible; }
.xq__q { margin: 0; }
.xq__q p { margin: 0; font: var(--heading-weight) clamp(1.6rem, 0.9rem + 2vw, 3.25rem)/1.2 var(--font-heading); letter-spacing: -0.035em; color: var(--x-ink); }
.xq__who { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--x-soft); }
.xq__who strong { color: var(--x-ink); font-weight: 500; font-size: 1.0625rem; }

/* ---------------------------------------------------------------- footer v2: line-drawn mark, contacts, hidden directory */
.xf2 { padding-top: clamp(96px, 11vw, 200px); }
.xf2__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); padding-bottom: clamp(56px, 7vw, 120px); }
.xf2__brand { display: flex; flex-direction: column; gap: 28px; }
.xf2__markLink { display: block; width: clamp(200px, 24vw, 460px); color: var(--x-paper); }
/* on wide screens the mark is exactly as tall as the two columns beside it (height set by home.js) */
@media (min-width: 1000px) { .xf2__markLink[style*="--xf-h"] { width: auto; height: var(--xf-h); } .xf2__markLink[style*="--xf-h"] .xf-mark { width: auto; height: 100%; } }
.xf-mark { display: block; width: 100%; height: auto; overflow: visible; }
.xf-mark g[data-xfl] { transition: color 300ms var(--x-ease); }
.xf2__tag { margin: 0; color: var(--x-soft-dark); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem); line-height: 1.5; }
.xf2__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 4vw, 64px); align-items: start; }
.xf2__col { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.xf2__links .xf2__k { margin-bottom: -16px; }
.xf2__links .xf2__social { flex-direction: column; gap: 14px; }
@media (min-width: 700px) { .xf2__info { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.xf2__k { margin: 0 0 8px; color: var(--x-soft-dark); font-size: 0.95rem; }
.xf2__big { color: var(--x-paper); text-decoration: none; font: var(--heading-weight) clamp(1.4rem, 1rem + 1.4vw, 2.4rem)/1.15 var(--font-heading); letter-spacing: -0.03em; transition: color 200ms var(--x-ease); }
.xf2__big:hover { color: var(--coral); }
.xf2__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.xf2__chip, .xf2__ai a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-paper); text-decoration: none; font-size: 0.9rem; transition: background-color 200ms var(--x-ease), color 200ms var(--x-ease), border-color 200ms var(--x-ease); }
.xf2__chip:hover, .xf2__ai a:hover { background: var(--x-paper); color: var(--x-ink); border-color: var(--x-paper); }
.xf2__social { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.xf2__social a { color: var(--x-paper); text-decoration: none; font: 500 0.8rem/1 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.xf2__social a:hover { color: var(--coral); }
.xf2__ai { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.xf2__ai p { margin: 0; color: var(--x-paper); }
.xf2__ai ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.xf2__explore { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; text-align: left; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--x-line-dark); background: none; color: var(--x-paper); font: 500 1rem/1.3 var(--font-body); cursor: pointer; }
.xf2__explore:hover { border-color: var(--coral); }
.xf-explore__ic { transition: transform 400ms var(--x-ease); }
.xf2__explore[aria-expanded="true"] .xf-explore__ic { transform: rotate(180deg); }
/* the directory stays in the page for search engines; it is just collapsed until Explore is pressed */
.xf2__dir { height: 0; overflow: hidden; }
.xf2__dir.is-open { height: auto; }
.xf2__dirInner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 48px; margin-bottom: clamp(48px, 6vw, 96px); padding: clamp(32px, 4vw, 56px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.xf2__dirInner .x-mono { margin: 0 0 18px; color: var(--x-paper); }
.xf2__dirInner ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xf2__dirInner a { color: var(--x-soft-dark); text-decoration: none; font-size: 0.95rem; line-height: 1.4; }
.xf2__dirInner a:hover { color: var(--coral); }
@media (min-width: 1000px) {
  .xf2__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .xf2__dirInner { grid-template-columns: 1fr 1.4fr 1fr 0.6fr; }
}

/* ---------------------------------------------------------------- services menu (opens from the nav) */
.xh__svc { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 0; background: none; color: var(--x-ink); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: color 300ms var(--x-ease), background-color 300ms var(--x-ease); }
.xh__nav .xh__svc { font-size: inherit; }
.xh__svc:hover, .xh__svc[aria-expanded="true"] { background: var(--x-ink); color: var(--x-paper); }
.xh.is-dark .xh__svc { color: var(--x-paper); }
.xh.is-dark .xh__svc:hover, .xh.is-dark .xh__svc[aria-expanded="true"] { background: var(--x-paper); color: var(--x-ink); }
.xh__chev { transition: transform 300ms var(--x-ease); }
.xh__svc[aria-expanded="true"] .xh__chev { transform: rotate(180deg); }
.xm { position: absolute; top: calc(100% + 12px); left: 50%; width: min(1240px, calc(100vw - 2 * var(--x-gutter))); transform: translateX(-50%); padding: 12px; border-radius: 0; background: #1b1716; border: 1px solid var(--x-line-dark); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); color: var(--x-paper); }
.xm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.xm__item { position: relative; display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px 40px 16px 16px; border-radius: 0; color: var(--x-paper); text-decoration: none; transition: background-color 250ms var(--x-ease); }
.xm__item:hover, .xm__item:focus-visible { background: #2a2422; }
.xm__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0; background: #2a2422; border: 1px solid var(--x-line-dark); color: var(--coral); transition: background-color 250ms var(--x-ease), color 250ms var(--x-ease); }
.xm__item:hover .xm__ic { background: var(--coral); color: var(--ink); }
.xm__txt { display: flex; flex-direction: column; gap: 4px; }
.xm__txt b { font: var(--heading-weight) 1.0625rem/1.25 var(--font-heading); letter-spacing: -0.01em; }
.xm__txt span { color: var(--x-soft-dark); font-size: 0.875rem; line-height: 1.45; }
.xm__go { position: absolute; top: 18px; right: 16px; color: var(--x-soft-dark); opacity: 0; transform: translate(-4px, 4px); transition: opacity 250ms var(--x-ease), transform 250ms var(--x-ease); }
.xm__item:hover .xm__go { opacity: 1; transform: none; color: var(--coral); }
.xm__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 16px 18px; border-radius: 0; background: #241f1d; color: var(--x-soft-dark); text-decoration: none; font-size: 0.9375rem; }
.xm__foot b { color: var(--x-paper); font-weight: 500; }
.xm__foot .xm__go { position: static; opacity: 1; transform: none; }
.xm__foot:hover { background: var(--coral); color: var(--ink); }
.xm__foot:hover b, .xm__foot:hover .xm__go { color: var(--ink); }
/* phone menu: services with icons */
.xh__label { padding: 10px 0 4px; } .xh__label .x-mono { color: var(--x-soft-dark); }
.xh__menu .xh__sub a { gap: 12px; font: var(--heading-weight) 1.0625rem/1.2 var(--font-heading) !important; text-transform: none !important; letter-spacing: -0.01em !important; color: var(--x-paper) !important; min-height: 48px !important; }
.xm__ic--sm { width: 34px; height: 34px; border-radius: 0; }

/* mega menu: services with sub-links + featured work */
.xm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 14px; }
.xm[hidden] { display: none; }
.xm__main { padding: 10px 6px 6px; }
.xm__k { display: block; margin: 0 0 10px 10px; color: var(--x-soft-dark); }
.xm__card { display: flex; flex-direction: column; border-radius: 0; transition: background-color 250ms var(--x-ease); }
.xm__card:hover { background: #2a2422; }
.xm__card .xm__item { padding-bottom: 8px; }
.xm__card .xm__item:hover { background: transparent; }
.xm__card:hover .xm__ic { background: var(--coral); color: var(--ink); }
.xm__card:hover .xm__go { opacity: 1; transform: none; color: var(--coral); }
.xm__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px 76px; }
.xm__subs a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-soft-dark); text-decoration: none; font-size: 0.8125rem; transition: color 200ms var(--x-ease), border-color 200ms var(--x-ease), background-color 200ms var(--x-ease); }
.xm__subs a:hover { background: var(--x-paper); color: var(--x-ink); border-color: var(--x-paper); }
.xm__side { display: flex; flex-direction: column; gap: 8px; }
.xm__feat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px; border-radius: 0; background: #241f1d; color: var(--x-paper); text-decoration: none; transition: background-color 250ms var(--x-ease); }
.xm__feat:hover { background: #2e2826; }
.xm__featImg { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 8px; border-radius: 0; background: linear-gradient(135deg, var(--brown), #2b1416); color: rgba(244, 240, 234, 0.5); }
.xm__feat .xm__k { margin: 0; }
.xm__feat b { font: var(--heading-weight) 1.25rem/1.2 var(--font-heading); letter-spacing: -0.02em; }
.xm__feat > span:last-child { color: var(--x-soft-dark); font-size: 0.875rem; line-height: 1.5; }
.xm__side .xm__foot { margin-top: 0; }
@media (max-width: 1199px) { .xm { grid-template-columns: minmax(0, 1fr); } .xm__side { display: none; } }

/* mega menu, horizontal: one column per service */
.xm--row { display: block; position: absolute; top: calc(100% + 12px); left: 0; right: 0; width: auto; transform: none; padding: 10px; }
.xm--row[hidden] { display: none; }
.xm--row .xm__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.xm--row .xm__card { position: relative; padding: 8px; border-radius: 0; }
.xm--row .xm__card + .xm__card::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--x-line-dark); }
.xm--row .xm__card:hover::before, .xm--row .xm__card:hover + .xm__card::before { opacity: 0; }
.xm--row .xm__item { flex-direction: column; gap: 16px; padding: 16px 14px 10px; }
.xm--row .xm__ic { width: 52px; height: 52px; border-radius: 0; }
.xm--row .xm__txt b { font-size: 1.125rem; }
.xm--row .xm__go { top: 22px; right: 18px; }
.xm--row .xm__subs { flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 14px 16px; }
.xm--row .xm__subs a { min-height: 30px; padding: 0; border: 0; border-radius: 0; color: var(--x-soft-dark); font-size: 0.875rem; }
.xm--row .xm__subs a::before { content: "→"; margin-right: 8px; color: var(--coral); opacity: 0; transform: translateX(-4px); transition: opacity 200ms var(--x-ease), transform 200ms var(--x-ease); display: inline-block; }
.xm--row .xm__subs a:hover { background: none; color: var(--x-paper); }
.xm--row .xm__subs a:hover::before { opacity: 1; transform: none; }
.xm--row .xm__foot { margin-top: 6px; }
@media (max-width: 1279px) { .xm--row .xm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xm--row .xm__card:nth-child(4)::before { display: none; } }
.xm--row .xm__card { display: flex; flex-direction: column; }
.xm--row .xm__item { height: auto; flex: 1; }
.xm--row .xm__subs { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--x-line-dark); margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; }
.xm--row .xm__subs a { position: relative; }
.xm--row .xm__subs a::before { position: absolute; left: -16px; margin: 0; }
.xm--row .xm__subs a:hover { padding-left: 16px; }
.xm--row .xm__subs a:hover::before { left: 0; }
.xm--row .xm__subs a { transition: color 200ms var(--x-ease), padding-left 200ms var(--x-ease); }
.xm--row .xm__item { flex: none; }
@supports (grid-template-rows: subgrid) {
  .xm--row .xm__grid { grid-template-rows: auto auto; }
  .xm--row .xm__card { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
/* two rows of three */
.xm--row .xm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
.xm--row .xm__card:nth-child(3n + 1)::before { display: none; }
@supports (grid-template-rows: subgrid) { .xm--row .xm__grid { grid-template-rows: repeat(4, auto); } }
.xm--row { left: 0; right: 0; margin-inline: auto; width: min(1080px, 100%); transform: none; }
.xm--row .xm__item { flex-direction: row; gap: 16px; }
.xm--row .xm__subs { margin-left: 82px; }


/* =====================================================================
   Inner pages (v3): the home-page language applied to every page
   ===================================================================== */
/* page header */
.pg-hero { position: relative; overflow: hidden; padding: clamp(150px, 20vh, 240px) 0 clamp(96px, 12vh, 168px); color: var(--x-paper);
  background: radial-gradient(ellipse 60% 55% at 100% 100%, rgba(236, 97, 64, 0.22) 0%, rgba(236, 97, 64, 0) 70%), radial-gradient(ellipse 70% 60% at 0% 0%, rgba(110, 36, 40, 0.5) 0%, rgba(110, 36, 40, 0) 70%), linear-gradient(135deg, #2b0f11 0%, #170f0e 48%, #110d0c 72%, #1e100d 100%); }
.pg-hero--full { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.pg-hero--short { padding-bottom: clamp(64px, 8vh, 112px); }
.pg-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.pg-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vh, 36px); max-width: 1100px; }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--x-soft-dark); }
.pg-crumbs a { color: var(--x-soft-dark); text-decoration: none; } .pg-crumbs a:hover { color: var(--coral); }
.pg-crumbs i { font-style: normal; opacity: 0.5; } .pg-crumbs span { color: var(--x-paper); }
.pg-hero__h { margin: 0; font: var(--heading-weight) clamp(2.6rem, 1rem + 4.6vw, 7rem)/0.96 var(--font-heading); letter-spacing: -0.055em; color: var(--x-paper); max-width: 16ch; }
.pg-hero--split .pg-hero__h { font-size: clamp(2.4rem, 1rem + 3.4vw, 5.5rem); }
.pg-hero__lead { margin: 0; max-width: 52ch; color: var(--x-soft-dark); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); line-height: 1.6; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pg-hero__echo { position: absolute; z-index: 0; top: 50%; right: -6%; height: min(140%, 1200px); transform: translateY(-50%); pointer-events: none; opacity: 0.7; }
.pg-echo { height: 100%; width: auto; overflow: visible; }
.pg-echo path { fill: none; stroke: var(--x-paper); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.pg-hero__visual { position: relative; }
.pg-visual.sb-tile { width: 100%; height: clamp(380px, 52vh, 600px); border-radius: 0; background: #1d1918; border-color: var(--x-line-dark); }
.pg-visual.sb-tile:hover { transform: none; border-color: var(--x-line-dark); }
.pg-visual .sb-tile__link { padding: clamp(24px, 2.6vw, 40px); }
.pg-visual .sb-prev { margin-top: 0; }
.pg-visual .sb-cubewrap { transform: scale(1.9); }
@media (min-width: 1100px) { .pg-hero--split .pg-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

/* shared section head */
.pg-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: clamp(56px, 6vw, 112px); }
.pg-head .x-label { margin-bottom: clamp(20px, 2.4vw, 36px); }
.pg-head .x-h2 { max-width: 20ch; }
.pg-head__p { margin: clamp(20px, 2vw, 32px) 0 0; max-width: 56ch; color: var(--x-soft); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.6; }
[data-x-dark] .pg-head__p { color: var(--x-soft-dark); }
[data-x-dark] .x-label { color: var(--x-soft-dark); }

/* intro: question + answer */
.pg-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
.pg-intro__a { margin: 0; color: var(--x-ink); font: var(--heading-weight) clamp(1.25rem, 0.9rem + 1vw, 2rem)/1.45 var(--font-heading); letter-spacing: -0.02em; }
@media (min-width: 1000px) { .pg-intro__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(80px, 8vw, 160px); align-items: start; } }

/* is this you? */
.pg-pains { background: var(--x-ink); }
.pg-pains__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-pain { display: flex; flex-direction: column; gap: 24px; min-height: clamp(240px, 22vw, 340px); padding: clamp(28px, 2.6vw, 44px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.pg-pain .x-mono { color: var(--coral); }
.pg-pain__q { margin: auto 0 0; color: var(--x-paper); font: var(--heading-weight) clamp(1.375rem, 1rem + 1vw, 2.1rem)/1.2 var(--font-heading); letter-spacing: -0.03em; }
.pg-pain__fix { margin: 0; padding-top: 18px; border-top: 1px solid var(--x-line-dark); color: var(--x-soft-dark); line-height: 1.55; }
.pg-pain__fix b { color: var(--coral); font-weight: 500; }
@media (min-width: 800px) { .pg-pains__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-pains__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pg-pains__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* what you get */
.pg-get__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
.pg-get__item { display: flex; gap: 20px; padding: clamp(28px, 3vw, 44px) clamp(8px, 1.6vw, 28px) clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--x-line); }
.pg-get__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: rgba(236, 97, 64, 0.14); color: var(--coral-deep); }
.pg-get__item h3 { margin: 6px 0 0; font: var(--heading-weight) clamp(1.2rem, 1rem + 0.6vw, 1.6rem)/1.2 var(--font-heading); letter-spacing: -0.025em; }
.pg-get__item p { margin: 10px 0 0; color: var(--x-soft); line-height: 1.55; max-width: 36ch; }
@media (min-width: 700px) { .pg-get__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-get__item:nth-child(odd) { border-right: 1px solid var(--x-line); } .pg-get__item:nth-child(even) { padding-left: clamp(20px, 2.6vw, 44px); } }
@media (min-width: 1100px) {
  .pg-get__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-get__item:nth-child(odd) { border-right: 0; } .pg-get__item:nth-child(even) { padding-left: 0; }
  .pg-get__item:not(:nth-child(3n)) { border-right: 1px solid var(--x-line); }
  .pg-get__item:not(:nth-child(3n + 1)) { padding-left: clamp(20px, 2.6vw, 44px); }
}

/* steps */
.pg-steps__wrap { position: relative; }
.pg-steps__line { position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--x-line); display: none; }
.pg-steps__line i { position: absolute; inset: 0; background: var(--coral); transform-origin: left; transform: scaleX(1); }
.pg-steps__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.pg-step { position: relative; display: flex; flex-direction: column; gap: 14px; }
.pg-step__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--x-paper); border: 1px solid var(--x-line); color: var(--coral-deep); font-size: 0.8rem; }
.pg-step h3 { margin: 10px 0 0; font: var(--heading-weight) clamp(1.375rem, 1rem + 0.9vw, 2rem)/1.1 var(--font-heading); letter-spacing: -0.035em; }
.pg-step p { margin: 0; color: var(--x-soft); line-height: 1.6; max-width: 34ch; }
@media (min-width: 900px) {
  .pg-steps__line { display: block; }
  .pg-steps__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-steps__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pg-steps__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-steps__list { gap: clamp(24px, 3vw, 56px); }
}

/* comparison table */
.pg-table { overflow-x: auto; border: 1px solid var(--x-line); border-radius: 0; }
.pg-table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.pg-table th, .pg-table td { padding: clamp(16px, 1.6vw, 24px); text-align: left; vertical-align: top; border-bottom: 1px solid var(--x-line); line-height: 1.5; }
.pg-table thead th { font: var(--heading-weight) 1.0625rem/1.3 var(--font-heading); }
.pg-table tbody th { font-weight: 500; color: var(--x-ink); width: 22%; }
.pg-table td { color: var(--x-soft); }
.pg-table .is-us { background: var(--x-ink); color: var(--x-paper); }
.pg-table thead .is-us { color: var(--coral); }
.pg-table tbody tr:last-child > * { border-bottom: 0; }

/* example */
.pg-example { background: var(--x-ink); }
.pg-example__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.pg-example__inner .pg-head__p { margin-top: 20px; }
.pg-example__apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pg-example__apps li { display: grid; place-items: end start; aspect-ratio: 9 / 13; padding: 18px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); font: var(--heading-weight) 1.25rem/1 var(--font-heading); }
.pg-example__apps li:first-child { background: var(--coral); color: var(--ink); }
@media (min-width: 1000px) { .pg-example__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .pg-example__apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* statement */
.pg-statement__h { max-width: 28ch !important; }
.pg-statement__p { margin: clamp(28px, 3vw, 48px) 0 0; max-width: 60ch; color: var(--x-soft); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.65; }
.pg-statement--dark { background: var(--x-ink); }
.pg-statement--dark .pg-statement__p { color: var(--x-soft-dark); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; list-style: none; }
.pg-chips li { padding: 10px 16px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-paper); }

/* benefits / beliefs */
.pg-benefits, .pg-beliefs { background: var(--x-ink); }
.pg-benefits__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-benefit { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 2.6vw, 44px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.pg-benefit .x-mono { color: var(--coral); }
.pg-benefit h3 { margin: 12px 0 0; color: var(--x-paper); font: var(--heading-weight) clamp(1.375rem, 1rem + 0.8vw, 1.9rem)/1.15 var(--font-heading); letter-spacing: -0.03em; }
.pg-benefit p { margin: 0; color: var(--x-soft-dark); line-height: 1.6; }
@media (min-width: 800px) { .pg-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pg-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-benefits__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* related */
.pg-rel__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-rel__card { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 240px; padding: clamp(28px, 2.6vw, 40px); border-radius: 0; background: var(--x-ink); color: var(--x-paper); text-decoration: none; transition: transform 400ms var(--x-ease); }
.pg-rel__card:hover { transform: translateY(-4px); }
.pg-rel__card .x-mono { color: var(--coral); }
.pg-rel__card h3 { margin: auto 0 0; font: var(--heading-weight) clamp(1.5rem, 1.1rem + 1vw, 2.2rem)/1.1 var(--font-heading); letter-spacing: -0.035em; }
.pg-rel__card p { margin: 0; color: var(--x-soft-dark); line-height: 1.55; }
.pg-rel__go { position: absolute; top: clamp(24px, 2.4vw, 36px); right: clamp(24px, 2.4vw, 36px); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--x-line-dark); transition: background-color 250ms var(--x-ease), color 250ms var(--x-ease), transform 300ms var(--x-ease); }
.pg-rel__card:hover .pg-rel__go { background: var(--coral); color: var(--ink); border-color: var(--coral); transform: rotate(45deg); }
@media (min-width: 900px) { .pg-rel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* about: numbers + people */
.pg-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); }
.pg-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 280px; padding: clamp(28px, 2.6vw, 44px); border-radius: 0; background: var(--x-paper-2); }
.pg-stat:nth-child(2) { background: var(--x-ink); color: var(--x-paper); }
.pg-stat p:last-child { margin: 0; font-size: 1.0625rem; }
@media (min-width: 800px) { .pg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-people { border-top: 1px solid var(--x-line); }
.pg-people__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); }
.pg-person { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.pg-person__img { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 0; background: linear-gradient(135deg, var(--brown), #2b1416); color: rgba(244, 240, 234, 0.5); }
.pg-person--team .pg-person__img { aspect-ratio: 16 / 10; }
.pg-person figcaption { display: flex; flex-direction: column; gap: 6px; }
.pg-person strong { font: var(--heading-weight) 1.4rem/1.2 var(--font-heading); letter-spacing: -0.02em; }
.pg-person .x-mono { color: var(--x-soft); }
.pg-person p { margin: 6px 0 0; color: var(--x-soft); }
@media (min-width: 900px) { .pg-people__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }

/* industries */
.pg-jump { position: sticky; top: 90px; z-index: 5; margin-bottom: clamp(48px, 6vw, 96px); }
.pg-jump ul { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 8px; list-style: none; border-radius: 0; background: rgba(244, 240, 234, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--x-line); scrollbar-width: none; }
.pg-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 0; color: var(--x-ink); text-decoration: none; white-space: nowrap; font-size: 0.9375rem; transition: background-color 200ms var(--x-ease), color 200ms var(--x-ease); }
.pg-jump a:hover, .pg-jump a.is-on { background: var(--x-ink); color: var(--x-paper); }
.pg-inds__list { border-top: 1px solid var(--x-line); }
.pg-ind { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; padding: clamp(48px, 6vw, 96px) 0; border-bottom: 1px solid var(--x-line); scroll-margin-top: 160px; }
.pg-ind__n { color: var(--coral-deep); }
.pg-ind__head h2 { margin: 0; font: var(--heading-weight) clamp(2rem, 1.2rem + 2.4vw, 3.75rem)/1 var(--font-heading); letter-spacing: -0.045em; }
.pg-ind__head p { margin: 16px 0 0; color: var(--x-soft); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem); }
.pg-ind__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pg-ind__list li { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; }
.pg-ind__list .bb-icon { flex: none; display: grid; place-items: center; width: 28px !important; height: 28px !important; border-radius: 50%; background: rgba(236, 97, 64, 0.14); color: var(--coral-deep); }
.pg-ind__list .bb-icon svg { width: 14px; height: 14px; }
.pg-ind__go { align-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--x-ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pg-ind__go:hover { color: var(--coral-deep); }
@media (min-width: 1000px) { .pg-ind { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr) auto; align-items: start; } }

/* contact */
.pg-contact { padding-top: clamp(150px, 20vh, 240px); overflow: hidden; }
.pg-contact .pg-hero__echo { opacity: 0.35; }
.pg-contact .x-contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pg-contact .pg-hero__h { font-size: clamp(2.6rem, 1rem + 4vw, 6rem); }
.pg-ways { display: grid; gap: 18px; margin: 12px 0 0; padding: 0; list-style: none; }
.pg-ways li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; }
.pg-ways .x-mono { color: var(--x-soft-dark); }
.pg-ways a { color: var(--x-paper); text-decoration: none; font: var(--heading-weight) clamp(1.1rem, 0.95rem + 0.5vw, 1.5rem)/1.2 var(--font-heading); }
.pg-ways a:hover { color: var(--coral); }
.pg-ways span:last-child { color: var(--x-soft-dark); }
.pg-next { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--x-line-dark); width: 100%; }
.pg-next .x-mono { color: var(--x-soft-dark); margin-bottom: 16px; }
.pg-next ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--x-paper); }
.pg-next b { display: inline-block; width: 40px; color: var(--coral); font: 500 0.8rem/1 var(--x-mono); }

/* legal prose */
.pg-prose { max-width: 760px; color: var(--x-ink); font-size: 1.0625rem; line-height: 1.75; }
.pg-prose h2 { margin: 2.4em 0 0.6em; font: var(--heading-weight) clamp(1.5rem, 1.2rem + 0.8vw, 2.1rem)/1.15 var(--font-heading); letter-spacing: -0.03em; }
.pg-prose h3 { margin: 1.8em 0 0.4em; font: var(--heading-weight) 1.25rem/1.25 var(--font-heading); }
.pg-prose p, .pg-prose ul, .pg-prose ol { margin: 0 0 1em; color: #3a3330; }
.pg-prose ul, .pg-prose ol { padding-left: 1.3em; }
.pg-prose a { color: var(--coral-deep); }
.pg-prose blockquote { margin: 0 0 2em; padding: 18px 22px; border-left: 3px solid var(--coral); border-radius: 0; background: var(--x-paper-2); }
.pg-prose blockquote p { margin: 0; }
.pg-prose code { font-family: var(--x-mono); font-size: 0.9em; }
.pg-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.95rem; }
.pg-prose th, .pg-prose td { padding: 10px 12px; border: 1px solid var(--x-line); text-align: left; vertical-align: top; }

/* the automation page keeps its two interactive tools (old styles) inside the new rhythm */
.pg-legacy > section { padding-top: clamp(120px, 13vw, 248px) !important; padding-bottom: clamp(120px, 13vw, 248px) !important; border-top: 1px solid var(--x-line); background: transparent !important; }
/* the echo-line logo sits behind the header text (beats the generic dark-section child rule) */
[data-x-dark] > .pg-hero__echo { position: absolute; z-index: 0; }

/* ---------------------------------------------------------------- automation: benefits orbit */
.pg-orbitSec { background: var(--x-ink); }
.pg-orbit { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.pg-orbit__ring { position: relative; width: min(100% - 200px, 500px); min-width: 240px; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.pg-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-orbit__track { fill: none; stroke: var(--x-line-dark); stroke-width: 1.5; }
.pg-orbit__glow { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 86; transform-origin: 200px 200px; transform: rotate(-140.4deg); opacity: 0.9; }
.pg-orbit__spin { position: absolute; inset: 7.5%; border-radius: 50%; pointer-events: none; }
.pg-orbit__spin i { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(236, 97, 64, 0.2), 0 0 30px rgba(236, 97, 64, 0.7); }
.pg-orbit__core { position: absolute; inset: 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2e2522, #1b1615); border: 1px solid var(--x-line-dark); color: var(--x-paper); text-align: center; }
.pg-orbit__core b { font: var(--heading-weight) clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.pg-orbit__core span { color: var(--x-soft-dark); font: 500 0.8rem/1.4 var(--x-mono); text-transform: uppercase; letter-spacing: 0.08em; }
/* nodes sit on the ring (radius = 42.5% of the box) */
.pg-orbit__node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--a)) translateY(-42.5cqw) rotate(calc(-1 * var(--a))); }
.pg-orbit__node i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #221e1c; border: 2px solid rgba(244, 240, 234, 0.35); transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease), transform 300ms var(--x-ease); }
.pg-orbit__node span { position: absolute; width: 150px; color: var(--x-soft-dark); font-size: 0.875rem; line-height: 1.3; transition: color 300ms var(--x-ease); }
.pg-orbit__node--top span { left: -75px; bottom: 22px; text-align: center; }
.pg-orbit__node--right span { left: 24px; top: -10px; text-align: left; }
.pg-orbit__node--left span { right: 24px; top: -10px; text-align: right; }
.pg-orbit__node.is-on i { background: var(--coral); border-color: var(--coral); transform: scale(1.25); box-shadow: 0 0 0 8px rgba(236, 97, 64, 0.18); }
.pg-orbit__node.is-on span { color: var(--x-paper); }
.pg-orbit__texts { position: relative; min-height: 240px; }
.pg-orbit__text { position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; gap: 16px; max-width: 46ch; opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--x-ease), transform 500ms var(--x-ease); pointer-events: none; }
.pg-orbit__text.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pg-orbit__text .x-mono { color: var(--coral); }
.pg-orbit__text h3 { margin: 0; color: var(--x-paper); font: var(--heading-weight) clamp(1.8rem, 1.2rem + 1.8vw, 3.2rem)/1.05 var(--font-heading); letter-spacing: -0.04em; }
.pg-orbit__text p { margin: 0; color: var(--x-soft-dark); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.6; }
@media (min-width: 1000px) { .pg-orbit { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
@media (max-width: 640px) { .pg-orbit__node span { width: 92px; font-size: 0.72rem; } .pg-orbit__node--top span { left: -46px; } }

/* ---------------------------------------------------------------- automation: score bars */
.pg-bars__legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 28px; color: var(--x-soft); }
.pg-bars__legend span { display: inline-flex; align-items: center; gap: 8px; }
.pg-bars__legend i { width: 22px; height: 8px; border-radius: 0; background: #cfc7bd; }
.pg-bars__legend span:nth-child(2) i { background: #a49a92; }
.pg-bars__legend span:nth-child(3) i { background: var(--coral); }
.pg-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
.pg-bars__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--x-line); }
.pg-bars__row h3 { margin: 0 0 6px; font: var(--heading-weight) clamp(1.3rem, 1rem + 0.8vw, 1.9rem)/1.15 var(--font-heading); letter-spacing: -0.03em; }
.pg-bar { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "name track" ". cap"; gap: 4px 18px; align-items: center; }
.pg-bar__name { grid-area: name; color: var(--x-soft); font-size: 0.875rem; }
.pg-bar__track { grid-area: track; position: relative; height: 10px; border-radius: 0; background: rgba(24, 21, 20, 0.06); overflow: hidden; }
.pg-bar__track i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #cfc7bd; transform-origin: left; }
.pg-bar:nth-of-type(2) .pg-bar__track i { background: #a49a92; }
.pg-bar__cap { grid-area: cap; color: var(--x-soft); font-size: 0.875rem; }
.pg-bar--us .pg-bar__name { color: var(--x-ink); font-weight: 600; }
.pg-bar--us .pg-bar__track { height: 14px; }
.pg-bar--us .pg-bar__track i { background: linear-gradient(90deg, var(--coral-deep), var(--coral)); }
.pg-bar--us .pg-bar__cap { color: var(--x-ink); font-weight: 500; }
.pg-bars__note { margin: 20px 0 0; color: var(--x-soft); font-size: 0.875rem; }
@media (min-width: 1000px) { .pg-bars__row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; } .pg-bars__row h3 { grid-row: span 3; } .pg-bar { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "name track cap"; } }

/* ---------------------------------------------------------------- automation: shared vs your own server */
.pg-own { background: var(--x-ink); }
.pg-own__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.pg-own__art { margin: 0; }
.pg-own__art svg { width: 100%; height: auto; display: block; overflow: visible; }
.pg-own__lbl { fill: var(--x-soft-dark); font: 500 12px var(--x-mono); letter-spacing: 0.1em; }
.pg-own__lbl--us { fill: var(--coral); }
.pg-own__box { fill: #1f1b1a; stroke: var(--x-line-dark); stroke-width: 1.5; }
.pg-own__cell { fill: #2e2826; }
.pg-own__mine { fill: #241c1a; stroke: var(--coral); stroke-width: 2; }
.pg-own__slot { fill: #2e2522; }
.pg-own__t { fill: var(--x-paper); font: 500 15px var(--font-body); }
.pg-own__t--s { fill: var(--x-soft-dark); font-size: 13px; }
.pg-own__led { fill: #7fc8a9; }
.pg-own__path { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.7; }
.pg-own__you { fill: var(--coral); }
@media (min-width: 1000px) { .pg-own__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------------------------------------------------------------- automation: one system that grows */
.pg-grow__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-grow__stage { display: flex; flex-direction: column; gap: 16px; }
.pg-grow__stage > .x-mono { color: var(--coral-deep); }
.pg-grow__sys { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2vw, 32px); border-radius: 0; background: var(--x-ink); color: var(--x-paper); min-height: 240px; }
.pg-grow__sys > b { color: var(--x-soft-dark); font-weight: 500; }
.pg-grow__mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-grow__mod { display: flex; align-items: center; min-height: 56px; padding: 0 16px; border-radius: 0; background: #2a2422; border: 1px solid var(--x-line-dark); font: var(--heading-weight) 1.05rem/1.2 var(--font-heading); }
.pg-grow__mod.is-new { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.pg-grow__cap { margin: clamp(28px, 3vw, 44px) 0 0; font: var(--heading-weight) clamp(1.2rem, 1rem + 0.6vw, 1.6rem)/1.3 var(--font-heading); letter-spacing: -0.02em; }
@media (min-width: 900px) { .pg-grow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- automation: how it works, stacking cards */
.pg-stackSec__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.pg-stack { display: grid; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-stack__card { position: sticky; top: calc(120px + var(--i) * 28px); display: flex; flex-direction: column; gap: 14px; min-height: clamp(260px, 30vh, 340px); padding: clamp(28px, 3vw, 48px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); box-shadow: 0 -24px 40px -28px rgba(0, 0, 0, 0.55); }

.pg-stack__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 0; background: rgba(244, 240, 234, 0.08); color: var(--coral); margin-bottom: 8px; }

.pg-stack__card .x-mono { color: var(--coral); }
.pg-stack__card h3 { margin: auto 0 0; font: var(--heading-weight) clamp(1.8rem, 1.2rem + 1.8vw, 3rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.pg-stack__card p { margin: 0; max-width: 44ch; line-height: 1.6; color: var(--x-soft-dark); }
@media (min-width: 1000px) { .pg-stackSec__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .pg-stackSec__intro { position: sticky; top: 140px; } }

.pg-stackSec { background: var(--x-ink); color: var(--x-paper); }
.pg-stackSec .x-label, .pg-stackSec .pg-head__p { color: var(--x-soft-dark); }
.pg-stackSec .x-h2 { color: var(--x-paper); }

/* ---------------------------------------------------------------- automation: "Sound familiar?" stacking cards (home style) */
.pg-painSec { background: var(--x-ink); }
.pg-painSec__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
.pg-pstack { display: grid; gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.pg-pc { position: sticky; top: calc(110px + var(--i) * 26px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(28px, 3vw, 44px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); box-shadow: 0 -24px 40px -28px rgba(0, 0, 0, 0.6); }
.pg-pc__txt { display: flex; flex-direction: column; gap: 16px; }
.pg-pc__tag { color: var(--coral); }
.pg-pc h3 { margin: 0; font: var(--heading-weight) clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem)/1.12 var(--font-heading); letter-spacing: -0.035em; }
.pg-pc p { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--x-line-dark); color: var(--x-soft-dark); line-height: 1.55; }
.pg-pc p b { color: var(--coral); font-weight: 500; }
.pg-pc__ill { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 200px; padding: 22px; border-radius: 0; background: #1a1615; border: 1px solid var(--x-line-dark); font-size: 0.875rem; }
.pg-pc__flag { align-self: flex-start; padding: 6px 12px; border-radius: 0; background: var(--coral); color: var(--ink); font-weight: 600; font-size: 0.8125rem; }
.pg-pc__files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-pc__files li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 0; background: #2a2422; }
.pg-pc__files li:nth-child(2) { transform: translateX(10px) rotate(-1deg); } .pg-pc__files li:nth-child(3) { transform: translateX(20px) rotate(1deg); }
.pg-pc__file { color: var(--x-paper); font-family: var(--x-mono); font-size: 0.8rem; }
.pg-pc__files em { font-style: normal; color: var(--x-soft-dark); white-space: nowrap; }
.pg-pc__apps { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-pc__apps span { flex: 1; display: grid; place-items: center; min-height: 64px; border-radius: 0; background: #2a2422; border: 1px solid var(--x-line-dark); color: var(--x-paper); font: var(--heading-weight) 1rem/1 var(--font-heading); }
.pg-pc__apps i { font-style: normal; color: var(--coral); }
.pg-pc__people { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pg-pc__ravi { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--coral); color: var(--ink); font: var(--heading-weight) 1.4rem/1 var(--font-heading); box-shadow: 0 0 0 8px rgba(236, 97, 64, 0.18); }
.pg-pc__people b { font-weight: 500; }
.pg-pc__wait { display: flex; align-items: center; gap: 6px; }
.pg-pc__wait span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2a2422; border: 1px solid var(--x-line-dark); color: var(--x-soft-dark); font-size: 0.8rem; }
.pg-pc__wait em { margin-left: 8px; font-style: normal; color: var(--x-soft-dark); }
.pg-pc__time { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 22px; list-style: none; }
.pg-pc__time::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--x-line-dark); }
.pg-pc__time li { position: relative; color: var(--x-paper); }
.pg-pc__time li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #2a2422; border: 2px solid var(--x-soft-dark); }
.pg-pc__time li.is-bad::before { background: var(--coral); border-color: var(--coral); }
.pg-pc__time b { display: inline-block; width: 72px; color: var(--x-soft-dark); font: 500 0.8rem/1 var(--x-mono); }
.pg-pc__time li.is-bad { color: var(--coral); }
@media (min-width: 700px) { .pg-pc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; } }
@media (min-width: 1100px) { .pg-painSec__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .pg-painSec__intro { position: sticky; top: 140px; } }

/* ---------------------------------------------------------------- automation: keys handed over */
.pg-own__hook { stroke: var(--x-soft-dark); stroke-width: 3; stroke-linecap: round; }
.pg-slot__box { fill: #241c1a; stroke: var(--x-line-dark); stroke-width: 1.5; transition: stroke 400ms var(--x-ease), fill 400ms var(--x-ease); }
.pg-slot.is-on .pg-slot__box { stroke: var(--coral); fill: #2e1f1b; }
.pg-slot__t { fill: var(--x-paper); font: 500 16px var(--font-body); }
.pg-key__bow { fill: none; stroke: var(--coral); stroke-width: 5; }
.pg-key__hole { fill: var(--coral); }
.pg-key__blade { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; }

/* ---------------------------------------------------------------- automation: chat demo + savings calculator in the home style */
.pg-legacy > section { background: var(--x-paper) !important; color: var(--x-ink); }
.pg-legacy .bb-container { width: min(100% - 2 * var(--x-gutter), var(--x-max)); max-width: none; margin-inline: auto; padding: 0; }
.pg-legacy .bb-head { margin-bottom: clamp(56px, 6vw, 112px); max-width: none; text-align: left; }
.pg-legacy .bb-h2 { margin: 0; max-width: 18ch; font: var(--heading-weight) clamp(2.25rem, 1.3rem + 3.4vw, 6rem)/1.02 var(--font-heading); letter-spacing: -0.045em; color: var(--x-ink); }
.pg-legacy .bb-h2::before { display: block; margin-bottom: clamp(20px, 2.4vw, 36px); color: var(--x-soft); font: 400 0.75rem/1.5 var(--x-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.pg-legacy .svc-roi .bb-h2::before { content: "// Estimate"; }
.pg-legacy .bb-lead, .pg-legacy .bb-body { color: var(--x-soft); font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.6; max-width: 56ch; }
.pg-legacy .chat { border-radius: 0 !important; background: #1b1716 !important; border: 1px solid var(--x-line-dark); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5); }
.pg-legacy .bb-btn, .pg-legacy .bb-btn--accent { border-radius: 0 !important; background: var(--coral) !important; color: var(--ink) !important; border: 0 !important; font-weight: 600; }
.pg-legacy .roi__inputs { background: transparent; }
.pg-legacy .roi__out { border-radius: 0 !important; background: var(--x-ink) !important; color: var(--x-paper); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.45); }
.pg-legacy .roi__big { font-family: var(--font-heading) !important; font-weight: var(--heading-weight) !important; letter-spacing: -0.04em; }
.pg-legacy .roi__fill--time { background: var(--coral) !important; } .pg-legacy .roi__fill--subs { background: var(--x-paper) !important; }
.pg-legacy .bb-input { border-radius: 0 !important; border: 1px solid var(--x-line) !important; background: #fff !important; }
.pg-legacy .bb-range { accent-color: var(--coral); }
.pg-legacy .bb-field-label { font-weight: 500; color: var(--x-ink); }
.pg-legacy .chat__window { background: #221e1c !important; color: var(--x-paper) !important; border-color: var(--x-line-dark) !important; }
.pg-legacy .chat__window * { border-color: var(--x-line-dark); }
.pg-legacy .chat__head, .pg-legacy .chat__label { color: var(--x-paper) !important; }
.pg-legacy .chat__sub, .pg-legacy .chat__meta, .pg-legacy .chat__ex { color: var(--x-soft-dark) !important; }
.pg-legacy .chat__q { background: var(--coral) !important; color: var(--ink) !important; }
.pg-legacy .chat__a { background: #2e2826 !important; color: var(--x-paper) !important; }
.pg-legacy .chat__action { color: var(--coral) !important; }
.pg-legacy .chat__table, .pg-legacy .chat__bars { color: var(--x-paper); }
.pg-legacy .chat__pause { border-radius: 0 !important; }
@media (min-width: 1100px) { .pg-painSec__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------------------------------------------------------------- automation: benefits as a scroll story */
.pg-ben { background: var(--x-ink); }
.pg-ben__items { display: grid; gap: clamp(72px, 10vw, 140px); }
.pg-ben__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.pg-ben__txt { display: flex; flex-direction: column; gap: 18px; }
.pg-ben__txt .x-mono { color: var(--coral); }
.pg-ben__txt h3 { margin: 0; color: var(--x-paper); font: var(--heading-weight) clamp(2.2rem, 1.2rem + 3vw, 4.5rem)/1 var(--font-heading); letter-spacing: -0.05em; }
.pg-ben__txt p { margin: 0; max-width: 44ch; color: var(--x-soft-dark); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.6; }
.pg-ben__vis { display: grid; place-items: center; min-height: clamp(320px, 44vh, 480px); padding: clamp(20px, 2.4vw, 40px); border-radius: 0; background: #1d1918; border: 1px solid var(--x-line-dark); }
.pg-ben__dots { display: none; }
@media (min-width: 1000px) { .pg-ben__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); } }
/* pinned version (set by home.js): items stack in one place and swap */
.pg-ben.is-pin { padding-top: clamp(90px, 11vh, 140px); padding-bottom: clamp(40px, 6vh, 80px); min-height: 100vh; min-height: 100svh; }
.pg-ben.is-pin .pg-head { margin-bottom: clamp(28px, 4vh, 56px); }
.pg-ben.is-pin .pg-ben__stage { position: relative; }
.pg-ben.is-pin .pg-ben__items { display: grid; }
.pg-ben.is-pin .pg-ben__item { grid-area: 1 / 1; }
.pg-ben.is-pin .pg-ben__dots { position: absolute; right: -28px; top: 50%; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.pg-ben__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 240, 234, 0.2); transition: background-color 300ms var(--x-ease), transform 300ms var(--x-ease); }
.pg-ben__dots i.is-on { background: var(--coral); transform: scale(1.3); }

/* shared visual frame */
.bv { width: min(100%, 520px); color: var(--x-paper); font-size: 0.9375rem; }
.bv-k { color: var(--x-soft-dark); margin-bottom: 14px; }
/* 1 chat */
.bv-chat { border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); overflow: hidden; }
.bv-chat__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--x-line-dark); }
.bv-chat__bar i { width: 26px; height: 26px; border-radius: 0; background: var(--coral); }
.bv-chat__bar span { margin-left: auto; color: var(--x-soft-dark); }
.bv-chat__body { display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 20px 18px; }
.bv-q { align-self: flex-end; max-width: 80%; margin: 0; padding: 12px 16px; border-radius: 0; background: var(--coral); color: var(--ink); font-weight: 500; }
.bv-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 0; background: #2e2826; }
.bv-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--x-soft-dark); }
.bv-a { align-self: flex-start; max-width: 88%; padding: 14px 16px; border-radius: 0; background: #2e2826; }
.bv-a p { margin: 0 0 12px; line-height: 1.5; }
.bv-a__bars { display: grid; gap: 8px; }
.bv-a__bars span { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--x-soft-dark); }
.bv-a__bars em { font-style: normal; }
.bv-a__bars i { height: 8px; width: var(--v); border-radius: 0; background: var(--coral); }
.bv-a__bars b { color: var(--x-paper); text-align: right; }
/* 2 tasks */
.bv-tasks ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bv-tasks li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); transition: border-color 400ms var(--x-ease), background-color 400ms var(--x-ease); }
.bv-tasks li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(244, 240, 234, 0.3); transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.bv-tasks li em { font-style: normal; font-size: 0.8rem; color: var(--x-soft-dark); opacity: 0; transition: opacity 300ms var(--x-ease); }
.bv-tasks li.is-done { border-color: rgba(236, 97, 64, 0.5); background: #2a201d; }
.bv-tasks li.is-done i { background: var(--coral); border-color: var(--coral); box-shadow: inset 0 0 0 4px #2a201d; }
.bv-tasks li.is-done em { opacity: 1; color: var(--coral); }
.bv-tasks__foot { margin: 18px 0 0; color: var(--x-soft-dark); }
.bv-tasks__foot b { color: var(--x-paper); font-weight: 500; }
/* 3 fit */
.bv-fit__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.bv-fit__steps span, .bv-fit__slots span { padding: 10px 16px; border-radius: 0; background: #2a2422; border: 1px dashed rgba(244, 240, 234, 0.35); }
.bv-fit__sys { padding: 20px; border-radius: 0; background: #221e1c; border: 1px solid var(--coral); }
.bv-fit__sys .x-mono { color: var(--coral); margin-bottom: 14px; }
.bv-fit__slots { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bv-fit__slots span { border-style: solid; border-color: var(--coral); background: var(--coral); color: var(--ink); font-weight: 600; }
.bv-fit__slots i { flex: 1; min-width: 12px; height: 2px; background: var(--coral); transform-origin: left; }
/* 4 staff */
.bv-staff { position: relative; padding: 22px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.bv-staff__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bv-staff__top b { font: var(--heading-weight) 1.25rem/1.2 var(--font-heading); }
.bv-staff__top .x-mono { color: var(--coral); }
.bv-staff__prog { height: 8px; border-radius: 0; background: #2e2826; overflow: hidden; margin-bottom: 18px; }
.bv-staff__prog i { display: block; height: 100%; width: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0.34); }
.bv-staff ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bv-staff li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 0; background: #2a2422; color: var(--x-soft-dark); }
.bv-staff li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(244, 240, 234, 0.3); }
.bv-staff li.is-done { color: var(--x-paper); }
.bv-staff li.is-done::before { background: var(--coral); border-color: var(--coral); }
.bv-staff__tip { position: absolute; right: -10px; bottom: 34%; padding: 10px 14px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); font-size: 0.8125rem; font-weight: 500; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
/* 5 anywhere */
.bv-any { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding-bottom: 44px; }
.bv-any__laptop { width: 66%; }
.bv-any__laptop .bv-any__scr { aspect-ratio: 16 / 10; border-radius: 0; border: 8px solid #0f0c0b; }
.bv-any__base { display: block; height: 10px; margin: 0 -8%; border-radius: 0; background: #0f0c0b; }
.bv-any__phone { width: 22%; }
.bv-any__phone .bv-any__scr { aspect-ratio: 9 / 18; border-radius: 0; border: 6px solid #0f0c0b; }
.bv-any__scr { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #221e1c; }
.bv-any__scr span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 0; background: #2e2826; }
.bv-any__scr span:first-child { background: var(--coral); color: var(--ink); }
.bv-any__scr em { font-style: normal; font-size: 0.72rem; opacity: 0.8; }
.bv-any__scr b { font: var(--heading-weight) 1.4rem/1 var(--font-heading); }
.bv-any__phone b { font-size: 1.05rem; }
.bv-any__scr i { height: 7px; border-radius: 0; background: rgba(244, 240, 234, 0.15); }
.bv-any__sync { position: absolute; left: 66%; bottom: 46%; display: flex; gap: 5px; transform: translateX(6px); }
.bv-any__sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.bv-any__badge { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 0; border: 1px solid var(--x-line-dark); color: var(--x-soft-dark); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- automation: growth as a mind map */
.pg-mm__key { display: flex; gap: 10px; margin-bottom: clamp(20px, 3vw, 40px); }
.pg-mm__key span { padding: 8px 16px; border-radius: 0; border: 1px solid var(--x-line); color: var(--x-soft); transition: background-color 300ms var(--x-ease), color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.pg-mm__key span.is-on { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-paper); }
.pg-mm__map { margin: 0; padding: clamp(16px, 3vw, 48px); border-radius: 0; background: var(--x-ink); }
.pg-mm__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-mm__link { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; }
.pg-mm__link--next { stroke: #f39a7f; } .pg-mm__link--later { stroke: rgba(244, 240, 234, 0.55); stroke-dasharray: 0.02 0.015; }
.pg-mm__core circle { fill: var(--coral); }
.pg-mm__coreT { fill: var(--ink); font: 600 26px var(--font-heading); letter-spacing: -0.02em; }
.pg-mm__node rect { fill: #221e1c; stroke: var(--coral); stroke-width: 2; }
.pg-mm__node text { fill: var(--x-paper); font: 500 18px var(--font-body); }
.pg-mm__node--next rect { stroke: #f39a7f; }
.pg-mm__node--later rect { stroke: rgba(244, 240, 234, 0.55); stroke-dasharray: 6 5; }
@media (max-width: 700px) { .pg-mm__node text { font-size: 24px; } .pg-mm__coreT { font-size: 30px; } }

/* ---------------------------------------------------------------- Build your product: a sketch becomes the app */
.sk .sb-tile__link { display: grid; place-items: center; padding: clamp(16px, 2vw, 32px); }
.sk__stage { position: relative; width: 100%; height: 100%; min-height: 360px; display: grid; place-items: center; perspective: 1200px; }
.sk__phone { position: relative; z-index: 2; width: clamp(180px, 16vw, 230px); aspect-ratio: 200 / 410; padding: 10px; border-radius: 0; background: #0f0c0b; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1.5px rgba(244, 240, 234, 0.12); transform-style: preserve-3d; }
.sk__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 0; background: var(--x-paper); }
.sk__real { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 16px 12px 12px; color: var(--x-ink); font-size: clamp(0.6rem, 0.5rem + 0.2vw, 0.75rem); clip-path: inset(0 0 0 0); }
.sk__hi { margin: 0 0 2px; font: var(--heading-weight-strong) 1.15em/1.2 var(--font-heading); }
.sk__hero { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 0; background: var(--coral); }
.sk__hero em { font-style: normal; opacity: 0.8; } .sk__hero b { font: var(--heading-weight-strong) 2.2em/1 var(--font-heading); letter-spacing: -0.03em; } .sk__hero span { font-size: 0.9em; opacity: 0.8; }
.sk__row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 0; background: #e9e3db; }
.sk__row i { width: 22px; height: 22px; border-radius: 0; background: var(--brown); }
.sk__row u { text-decoration: none; padding: 2px 7px; border-radius: 0; background: #fff; font-size: 0.9em; }
.sk__row u.is-go { background: var(--x-ink); color: var(--x-paper); }
.sk__tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 9px; border-radius: 0; background: #e9e3db; }
.sk__tabs i { width: 16px; height: 16px; border-radius: 0; background: #cfc6bc; } .sk__tabs i.is-on { background: var(--coral); }
.sk__sketch { position: absolute; inset: 0; background: #f7f3ec; opacity: 0; }
.sk__sketch svg { width: 100%; height: 100%; }
.sk__sketch path { fill: none; stroke: #3a3330; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sk__note { position: absolute; right: 10px; top: 14px; padding: 2px 8px; border: 1px dashed #3a3330; border-radius: 0; color: #3a3330; font: 500 0.6rem/1.4 var(--x-mono); transform: rotate(4deg); }
.sk__scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--coral); box-shadow: 0 0 18px 4px rgba(236, 97, 64, 0.6); opacity: 0; }
.sk__web { position: absolute; z-index: 1; left: 2%; top: 50%; width: 52%; border-radius: 0; overflow: hidden; background: #221e1c; border: 1px solid var(--x-line-dark); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); color: var(--x-paper); font-size: 0.68rem; transform: translateY(-50%); }
.sk__webbar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--x-line-dark); color: var(--x-soft-dark); }
.sk__webbar i { width: 6px; height: 6px; border-radius: 50%; background: #3a3331; } .sk__webbar span { margin-left: 6px; }
.sk__webbody { display: grid; grid-template-columns: 22% 1fr; min-height: 130px; }
.sk__webside { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: #1a1615; }
.sk__webside b { width: 14px; height: 14px; border-radius: 0; background: var(--coral); margin-bottom: 4px; } .sk__webside i { height: 5px; border-radius: 0; background: rgba(244, 240, 234, 0.15); }
.sk__webmain { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.sk__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sk__kpis span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 0; background: #2e2826; } .sk__kpis em { font-style: normal; color: var(--x-soft-dark); } .sk__kpis b { font: var(--heading-weight-strong) 1.15rem/1.1 var(--font-heading); }
.sk__chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 50px; }
.sk__chart i { flex: 1; height: var(--h); border-radius: 0; background: rgba(244, 240, 234, 0.25); } .sk__chart i:nth-child(6) { background: var(--coral); }
.sk__iot { position: absolute; z-index: 3; right: 3%; bottom: 16%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8); }
.sk__iot em { display: block; font-style: normal; font-size: 0.72rem; color: var(--x-soft); } .sk__iot b { font: var(--heading-weight-strong) 1.3rem/1.1 var(--font-heading); }
.sk__dot { width: 10px; height: 10px; border-radius: 50%; background: #3f9b74; box-shadow: 0 0 0 4px rgba(63, 155, 116, 0.2); }
@media (prefers-reduced-motion: reduce) { .sk__phone { transform: translateX(40px) rotateY(-14deg); } }
.sk .sb-tile__link { padding: clamp(14px, 1.6vw, 24px); }
.sk__stage { height: 100%; }
.sk__phone { width: auto; height: min(94%, 470px); }
.sk__real { font-size: clamp(0.55rem, 0.45rem + 0.18vw, 0.7rem); }
.sk__row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk__web { left: 0; width: 48%; }
@media (prefers-reduced-motion: reduce) { .sk__phone { transform: translateX(70px) rotateY(-14deg); } }

/* ===================================================================== Build your product: story-led sections */
/* AI alone vs Brown Button */
.pv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: stretch; }
.pv__card { display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 3vw, 52px); border-radius: 0; }
.pv__card ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pv__card li { display: flex; align-items: center; gap: 14px; font: var(--heading-weight) clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem)/1.3 var(--font-heading); letter-spacing: -0.02em; }
.pv__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.pv__card--ai { background: var(--x-paper-2); color: var(--x-soft); }
.pv__card--ai .x-mono { color: var(--x-soft); }
.pv__card--ai .pv__ic { background: rgba(24, 21, 20, 0.08); color: #8a7f79; }
.pv__card--ai li span:last-child { text-decoration: line-through; text-decoration-color: rgba(180, 69, 43, 0.6); text-decoration-thickness: 2px; }
.pv__card--bb { background: var(--x-ink); color: var(--x-paper); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px var(--coral); }
.pv__card--bb .x-mono { color: var(--coral); }
.pv__card--bb .pv__ic { background: var(--coral); color: var(--ink); }
@media (min-width: 900px) { .pv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .pv__card--bb { transform: translateY(-16px); } }

/* what we build: four live cards, hover to widen */
.pbs { background: var(--x-ink); }
.pbs__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pb { display: flex; flex-direction: column; min-height: 440px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); overflow: hidden; outline: none; transition: flex-grow 600ms var(--x-ease), border-color 300ms var(--x-ease); }
.pb:hover, .pb:focus-visible, .pb.is-on { border-color: rgba(236, 97, 64, 0.6); }
.pb__vis { flex: 1; display: grid; place-items: center; min-height: 220px; padding: 24px; background: #1b1716; border-bottom: 1px solid var(--x-line-dark); }
.pb__txt { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2vw, 32px); }
.pb__txt .x-mono { color: var(--coral); }
.pb__txt h3 { margin: 0; color: var(--x-paper); font: var(--heading-weight) clamp(1.5rem, 1.1rem + 1vw, 2.2rem)/1.05 var(--font-heading); letter-spacing: -0.035em; white-space: nowrap; }
.pb__txt p { margin: 0; color: var(--x-soft-dark); line-height: 1.55; }
@media (min-width: 1000px) {
  .pbs__list { display: flex; }
  .pb { flex: 1 1 0; min-width: 0; }
  .pb.is-on { flex-grow: 1.9; }
  .pb__txt p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms var(--x-ease), opacity 400ms var(--x-ease); }
  .pb.is-on .pb__txt p { max-height: 120px; opacity: 1; }
  .pb__txt h3 { font-size: clamp(1.3rem, 0.9rem + 0.9vw, 2rem); white-space: normal; }
}
@media (min-width: 700px) and (max-width: 999px) { .pbs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pw { width: min(100%, 300px); color: var(--x-paper); font-size: 0.8rem; }
.pw-bar { display: flex; gap: 5px; padding: 8px 10px; border-radius: 0; background: #2e2826; } .pw-bar i { width: 7px; height: 7px; border-radius: 50%; background: #4a413d; }
.pw-web__body { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 0; background: #26211f; border: 1px solid var(--x-line-dark); border-top: 0; }
.pw-k { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 0; background: var(--coral); color: var(--ink); } .pw-k em { font-style: normal; opacity: 0.8; } .pw-k b { font: var(--heading-weight-strong) 1.4rem/1.1 var(--font-heading); }
.pw-web__chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; } .pw-web__chart i { flex: 1; height: var(--h); border-radius: 0; background: rgba(244, 240, 234, 0.25); transform-origin: bottom; } .pw-web__chart i:last-child { background: var(--coral); }
.pw-phone { width: 120px; } .pw-phone__scr { display: flex; flex-direction: column; gap: 7px; aspect-ratio: 9 / 17; padding: 12px 9px 8px; border-radius: 0; border: 5px solid #0f0c0b; background: var(--x-paper); color: var(--x-ink); }
.pw-phone__card { padding: 8px; border-radius: 0; background: var(--coral); font-weight: 600; font-size: 0.7rem; }
.pw-phone__row { height: 22px; border-radius: 0; background: #e6dfd6; } .pw-phone__tab { margin-top: auto; display: flex; justify-content: space-around; padding: 6px; border-radius: 0; background: #e6dfd6; } .pw-phone__tab i { width: 10px; height: 10px; border-radius: 0; background: #c9c0b6; }
.pw-iot svg { width: 100%; height: auto; overflow: visible; } .pw-iot__l { stroke: rgba(244, 240, 234, 0.25); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pw-iot__n { fill: #2e2826; stroke: var(--x-paper); stroke-width: 1.5; } .pw-iot__n.is-on { fill: var(--coral); stroke: var(--coral); }
.pw-iot__hub { fill: var(--coral); } .pw-iot__ping { fill: none; stroke: var(--coral); stroke-width: 2; transform-origin: 110px 70px; }
.pw-hw { display: grid; gap: 14px; justify-items: center; } .pw-hw__gauge { display: grid; justify-items: center; gap: 4px; } .pw-hw__gauge svg { width: 170px; height: auto; }
.pw-hw__arc { fill: none; stroke: #2e2826; stroke-width: 10; stroke-linecap: round; } .pw-hw__val { fill: none; stroke: var(--coral); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 40; }
.pw-hw__needle { stroke: var(--x-paper); stroke-width: 3; stroke-linecap: round; transform-origin: 60px 64px; transform: rotate(20deg); }
.pw-hw__gauge b { font: var(--heading-weight-strong) 1.2rem/1 var(--font-heading); }
.pw-hw__sw { display: flex; gap: 8px; } .pw-hw__sw span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 0; background: #2e2826; color: var(--x-soft-dark); }
.pw-hw__sw i { width: 26px; height: 16px; border-radius: 0; background: #4a413d; position: relative; } .pw-hw__sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--x-paper); transition: transform 300ms var(--x-ease); }
.pw-hw__sw .is-on { color: var(--x-paper); } .pw-hw__sw .is-on i { background: var(--coral); } .pw-hw__sw .is-on i::after { transform: translateX(10px); }

/* idea to scale: pinned, the product grows step by step */
.ps__bar { position: relative; margin-bottom: clamp(32px, 4vw, 56px); }
.ps__track { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--x-line); } .ps__track i { position: absolute; inset: 0; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.ps__steps { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.ps__steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 28px; color: var(--x-soft); font: var(--heading-weight) clamp(0.95rem, 0.8rem + 0.4vw, 1.2rem)/1.2 var(--font-heading); transition: color 300ms var(--x-ease); }
.ps__steps li::before { content: ""; position: absolute; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--x-paper); border: 2px solid var(--x-line); transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.ps__steps li:last-child { align-items: flex-end; } .ps__steps li:last-child::before { right: 0; }
.ps__steps li .x-mono { color: inherit; font-size: 0.7rem; }
.ps__steps li.is-on { color: var(--x-ink); } .ps__steps li.is-on::before { background: var(--coral); border-color: var(--coral); }
.ps__items { display: grid; gap: 48px; }
.ps__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.ps__txt h3 { margin: 0 0 14px; font: var(--heading-weight) clamp(2.2rem, 1.2rem + 3vw, 4.5rem)/1 var(--font-heading); letter-spacing: -0.05em; }
.ps__txt p { margin: 0; max-width: 40ch; color: var(--x-soft); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.6; }
.ps__vis { display: grid; place-items: center; min-height: clamp(300px, 40vh, 440px); border-radius: 0; background: var(--x-ink); }
.ps-v { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ps-note { display: flex; flex-direction: column; gap: 10px; max-width: 220px; padding: 22px; border-radius: 0; background: #f6e7a8; color: #3a3330; font: 500 1rem/1.4 var(--font-body); transform: rotate(-3deg); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7); }
.ps-note em { font-style: normal; font: 500 0.7rem/1 var(--x-mono); opacity: 0.6; }
.ps-phone { display: flex; flex-direction: column; gap: 9px; width: 150px; aspect-ratio: 9 / 17; padding: 18px 12px 12px; border-radius: 0; border: 6px solid #0f0c0b; background: var(--x-paper); color: var(--x-ink); }
.ps-phone b { font: var(--heading-weight-strong) 1rem/1.2 var(--font-heading); } .ps-phone i { height: 34px; border-radius: 0; background: #e6dfd6; } .ps-phone i.s { height: 20px; width: 70%; }
.ps-phone u { margin-top: auto; padding: 9px; border-radius: 0; background: var(--coral); text-align: center; text-decoration: none; font-weight: 600; font-size: 0.8rem; }
.ps-phone--wire { background: #f7f3ec; } .ps-phone--wire i, .ps-phone--wire u { background: transparent; border: 1.5px dashed #6f6560; } .ps-phone--wire u { min-height: 34px; }
.ps-badges { display: grid; gap: 8px; } .ps-badges span { padding: 10px 16px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); font-weight: 500; font-size: 0.85rem; }
.ps-scale .ps-web { display: grid; gap: 8px; width: 170px; padding: 12px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); } .ps-web span { height: 22px; border-radius: 0; background: #2e2826; } .ps-web span.is-c { background: var(--coral); height: 48px; }
.ps-users { display: grid; grid-template-columns: repeat(3, 18px); gap: 8px; } .ps-users i { width: 18px; height: 18px; border-radius: 50%; background: var(--coral); }
@media (min-width: 1000px) { .ps__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); } }
.ps.is-pin { padding-top: clamp(90px, 11vh, 140px); padding-bottom: clamp(40px, 6vh, 80px); min-height: 100vh; min-height: 100svh; }
.ps.is-pin .pg-head { margin-bottom: clamp(24px, 3vh, 48px); }
.ps.is-pin .ps__items { display: grid; } .ps.is-pin .ps__item { grid-area: 1 / 1; }
.pvs .pg-head .x-h2 { max-width: 22ch; }

/* ---------------------------------------------------------------- IoT: flat smart-factory scene + use cases */
.iot { width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.iot__link { fill: none; stroke: rgba(244, 240, 234, 0.2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.iot__link--app { stroke: rgba(236, 97, 64, 0.45); }
.iot__cloudp { fill: #2a2422; stroke: rgba(244, 240, 234, 0.4); stroke-width: 1.5; }
.iot__cloudt { fill: var(--x-paper); font-size: 13px; font-weight: 600; }
.iot__devbox { fill: #221e1c; stroke: var(--x-line-dark); stroke-width: 1.5; transition: stroke 300ms var(--x-ease); }
.iot__dev.is-warn .iot__devbox { stroke: var(--coral); stroke-width: 2.5; }
.iot__ic { stroke: var(--coral); fill: var(--coral); }
.iot__ic path, .iot__ic rect, .iot__ic circle[fill="none"] { fill: none; }
.iot__live { fill: #3f9b74; }
.iot__dev.is-warn .iot__live { fill: var(--coral); }
.iot__name { fill: var(--x-soft-dark); font-size: 11px; }
.iot__val { fill: var(--x-paper); font-size: 15px; font-weight: 600; }
.iot__phonebox { fill: #0f0c0b; }
.iot__scr { fill: var(--x-paper); }
.iot__ptitle { fill: var(--x-ink); font-size: 13px; font-weight: 700; }
.iot__alert rect { fill: #e9e3db; }
.iot__alert.is-warn rect { fill: var(--coral); }
.iot__at { fill: var(--x-soft); font-size: 9.5px; }
.iot__as { fill: var(--x-ink); font-size: 11px; font-weight: 600; }
.iot__alert.is-warn .iot__at, .iot__alert.is-warn .iot__as { fill: var(--ink); }
.iot__pk { fill: var(--coral); opacity: 0; filter: drop-shadow(0 0 5px rgba(236, 97, 64, 0.9)); }
.pw-iot, .pb[data-pb="iot"] .pb__vis .iot { width: min(100%, 320px); }
.iots { border-top: 1px solid var(--x-line); }
.iots__art { padding: clamp(24px, 4vw, 64px); border-radius: 0; background: var(--x-ink); margin-bottom: clamp(48px, 6vw, 96px); }
.iots__art .iot { display: block; max-width: 1000px; margin-inline: auto; }
.iots__uses { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.iotu { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); border-radius: 0; background: var(--x-paper-2); }
.iotu__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 0; background: var(--x-ink); color: var(--coral); margin-bottom: 8px; }
.iotu h3 { margin: 0; font: var(--heading-weight) clamp(1.25rem, 1rem + 0.6vw, 1.6rem)/1.15 var(--font-heading); letter-spacing: -0.025em; }
.iotu p { margin: 0; color: var(--x-soft); line-height: 1.55; }
@media (min-width: 700px) { .iots__uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .iots__uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iot__minibar { fill: #e2dbd2; } .iot__minibar.is-warn { fill: var(--coral); }
.pb[data-pb="iot"] .pb__vis .iot--mini { width: min(100%, 300px); }

/* ===================================================================== Websites & visibility */
/* header: the site builds, climbs the rankings, brings enquiries */
.ws .sb-tile__link { padding: clamp(14px, 1.6vw, 24px); }
.ws__stage { position: relative; width: 100%; height: 100%; min-height: 360px; }
.ws__browser { position: absolute; left: 0; top: 50%; translate: 0 -55%; width: 70%; border-radius: 0; overflow: hidden; background: var(--x-paper); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.ws__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e4ddd4; color: var(--x-soft); font-size: 0.72rem; }
.ws__bar > i { width: 8px; height: 8px; border-radius: 50%; background: #c9c0b6; } .ws__bar > span { margin-left: 8px; padding: 2px 10px; border-radius: 0; background: #f2eee8; }
.ws__bar u { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 0; background: var(--x-ink); color: var(--x-paper); text-decoration: none; font: 500 0.65rem/1.5 var(--x-mono); }
.ws__bar u i { width: 6px; height: 6px; border-radius: 50%; background: #7fc8a9; }
.ws__page { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9px 14px; padding: 14px 16px 16px; }
.ws__nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ws__nav b { width: 16px; height: 16px; border-radius: 0; background: var(--brown); } .ws__nav b + i { margin-left: auto; } .ws__nav i { width: 26px; height: 5px; border-radius: 0; background: #d8d0c6; } .ws__nav s { width: 44px; height: 15px; border-radius: 0; background: var(--coral); }
.ws__h { grid-column: 1; height: 15px; border-radius: 0; background: var(--x-ink); } .ws__h--2 { width: 70%; }
.ws__p { grid-column: 1; height: 6px; width: 85%; border-radius: 0; background: #ddd5cb; }
.ws__cta { grid-column: 1; justify-self: start; padding: 6px 12px; border-radius: 0; background: var(--coral); color: var(--ink); font-size: 0.68rem; font-weight: 600; }
.ws__img { grid-column: 2; grid-row: 2 / span 4; border-radius: 0; background: linear-gradient(135deg, var(--coral), var(--brown)); min-height: 80px; }
.ws__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; } .ws__cards i { height: 38px; border-radius: 0; background: #e7e0d7; }
.ws__rank { position: absolute; right: 0; top: 0; width: 38%; padding: 14px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8); }
.ws__rank .x-mono { color: var(--x-soft-dark); font-size: 0.6rem; } .ws__rank b { display: block; margin: 4px 0 6px; font: var(--heading-weight-strong) 1.8rem/1 var(--font-heading); color: var(--coral); }
.ws__rank svg { width: 100%; height: auto; } .ws__rankbg { fill: none; stroke: rgba(244, 240, 234, 0.12); stroke-width: 2; } .ws__rankln { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ws__phone { position: absolute; right: 4%; bottom: 2%; width: 34%; padding: 7px; border-radius: 0; background: #0f0c0b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.ws__scr { display: flex; flex-direction: column; gap: 7px; min-height: 190px; padding: 12px 9px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); }
.ws__pt { margin: 0 0 2px; font: var(--heading-weight-strong) 0.85rem/1 var(--font-heading); }
.ws__n { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 8px; border-radius: 0; background: #ece6de; font-size: 0.66rem; }
.ws__n i { grid-row: span 2; width: 20px; height: 20px; border-radius: 0; background: var(--brown); } .ws__n i.is-call { background: var(--coral); } .ws__n i.is-wa { background: #3f9b74; }
.ws__n b { font-weight: 600; } .ws__n em { font-style: normal; color: var(--x-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* get found everywhere */
.wfs { background: var(--x-ink); }
.wfs__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wfc { display: flex; flex-direction: column; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); overflow: hidden; }
.wfc__vis { display: grid; place-items: center; min-height: 240px; padding: 24px; background: #1b1716; border-bottom: 1px solid var(--x-line-dark); }
.wfc__txt { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2vw, 32px); }
.wfc__txt .x-mono { color: var(--coral); }
.wfc__txt h3 { margin: 0; color: var(--x-paper); font: var(--heading-weight) clamp(1.5rem, 1.1rem + 1vw, 2.1rem)/1.05 var(--font-heading); letter-spacing: -0.035em; }
.wfc__txt p { margin: 0; color: var(--x-soft-dark); line-height: 1.55; }
@media (min-width: 900px) { .wfs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wf { width: min(100%, 300px); font-size: 0.8rem; color: var(--x-ink); }
.wf-q { display: block; margin-bottom: 10px; padding: 9px 14px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); font-size: 0.75rem; }
.wf-seo ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wf-seo li { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-radius: 0; background: #2a2422; color: var(--x-paper); }
.wf-seo li b { font-size: 0.78rem; font-weight: 500; color: #9fb8ff; } .wf-seo li i { height: 5px; width: 80%; border-radius: 0; background: rgba(244, 240, 234, 0.15); }
.wf-seo li.is-you { background: rgba(236, 97, 64, 0.16); box-shadow: inset 0 0 0 1.5px var(--coral); } .wf-seo li.is-you b { color: var(--coral); }
.wf-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 0; background: var(--x-paper); }
.wf-box .x-mono { color: var(--coral-deep); font-size: 0.6rem; } .wf-box p { margin: 0; line-height: 1.45; } .wf-box span { color: var(--x-soft); font-size: 0.72rem; }
.wf-aio { display: flex; flex-direction: column; gap: 10px; }
.wf-me { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 0; background: var(--coral); color: var(--ink); font-weight: 500; }
.wf-ai { display: flex; gap: 10px; max-width: 92%; padding: 12px 14px; border-radius: 0; background: #2e2826; color: var(--x-paper); line-height: 1.45; }
.wf-ai i { font-style: normal; color: var(--coral); } .wf-ai u { color: var(--coral); text-decoration: none; }

/* launch to leads visuals */
.ws-v { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ws-map { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 10px; justify-items: center; }
.ws-map span { padding: 10px 14px; border-radius: 0; background: #221e1c; border: 1px dashed rgba(244, 240, 234, 0.4); color: var(--x-paper); font-size: 0.85rem; }
.ws-map .is-top { grid-column: 1 / -1; border-style: solid; border-color: var(--coral); }
.ws-pg { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; width: 280px; padding: 16px; border-radius: 0; background: var(--x-paper); }
.ws-pg i { border-radius: 0; } .ws-pg .w1 { height: 18px; background: var(--x-ink); } .ws-pg .w2 { grid-row: span 2; background: linear-gradient(135deg, var(--coral), var(--brown)); min-height: 70px; } .ws-pg .w3 { height: 8px; width: 80%; background: #ddd5cb; } .ws-pg .w4 { grid-column: 1 / -1; height: 40px; background: #e7e0d7; }
.ws-pg--wire { background: #f7f3ec; } .ws-pg--wire i { background: transparent !important; border: 1.5px dashed #6f6560; }
.ws-live { position: absolute; right: 10px; top: -12px; padding: 4px 10px; border-radius: 0; background: var(--x-ink); color: #7fc8a9; font: 500 0.7rem/1.4 var(--x-mono); }
.ws-g { display: flex; flex-direction: column; gap: 4px; max-width: 220px; padding: 12px 14px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); } .ws-g b { color: var(--coral); font-weight: 500; font-size: 0.85rem; } .ws-g em { font-style: normal; color: var(--x-soft-dark); font-size: 0.78rem; }
.ws-grow .ws-chart { display: flex; align-items: flex-end; gap: 8px; width: 200px; height: 140px; padding: 14px; border-radius: 0; background: #221e1c; } .ws-chart i { flex: 1; height: var(--h); border-radius: 0; background: rgba(244, 240, 234, 0.25); } .ws-chart i:last-child { background: var(--coral); }
.ws-leads { display: grid; gap: 8px; } .ws-leads span { padding: 10px 14px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); font-weight: 500; font-size: 0.85rem; } .ws-leads span:first-child { background: var(--coral); }

/* ---------------------------------------------------------------- story pages: shared looping illustrations (.fc) */
.fc--hero { position: relative; width: 100%; height: 100%; min-height: 340px; }
.fc { color: var(--x-paper); font-size: 0.8rem; }
.ar-qr { display: block; width: 100%; height: auto; shape-rendering: crispEdges; } .ar-qr rect { fill: var(--x-ink); }

/* AR/VR header: product in your room */
.arh .sb-tile__link { padding: clamp(14px, 1.6vw, 24px); }
.arh__qr { position: absolute; left: 2%; top: 50%; translate: 0 -50%; display: grid; gap: 8px; width: 24%; padding: 12px; border-radius: 0; background: var(--x-paper); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8); }
.arh__qr .x-mono { color: var(--x-soft); font-size: 0.58rem; text-align: center; }
.arh__link { position: absolute; left: 28%; top: 50%; width: 13%; translate: 0 -50%; overflow: visible; fill: none; stroke: rgba(244, 240, 234, 0.45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arh__phone { position: absolute; left: 43%; top: 50%; translate: 0 -50%; height: 94%; aspect-ratio: 9 / 18.5; border: 7px solid #0f0c0b; border-radius: 0; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.arh__scr { position: relative; height: 100%; background: #e7ddd0; }
.arh__win { position: absolute; top: 14%; left: 14%; width: 36%; height: 24%; border: 3px solid #f4f0ea; border-radius: 0; background: linear-gradient(#bcd3dc, #d9e5e6); }
.arh__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 22%), linear-gradient(#cdb49a, #b89a7e); }
.arh__ring { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; width: 70%; aspect-ratio: 3 / 1; border: 2px dashed var(--coral); border-radius: 50%; }
.arh__chair { position: absolute; left: 50%; bottom: 17%; translate: -50% 0; width: 56%; }
.ar-chair { display: block; width: 100%; height: auto; overflow: visible; }
.ar-chair__back { fill: var(--coral); } .ar-chair__seat { fill: #c4502f; } .ar-chair__legs { fill: none; stroke: #3a2a24; stroke-width: 5; stroke-linecap: round; }
.arh__rot { position: absolute; top: 5%; left: 50%; translate: -50% 0; padding: 4px 10px; border-radius: 0; background: rgba(24, 21, 20, 0.75); color: var(--x-paper); font-size: 0.6rem; white-space: nowrap; }
.arh__tap { position: absolute; bottom: 4%; left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); font-size: 0.64rem; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); transition: background-color 300ms var(--x-ease); }
.arh__tap b { font-weight: 600; } .arh__tap b + b, .arh__tap.is-on b:first-child { display: none; } .arh__tap.is-on b + b { display: inline; } .arh__tap.is-on { background: var(--coral); }
.arh__tag { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); color: var(--x-paper); font-size: 0.72rem; white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
.arh__tag--a { top: 12%; } .arh__tag--b { bottom: 12%; max-width: 30%; white-space: normal; line-height: 1.35; } .arh__tag i { width: 7px; height: 7px; border-radius: 50%; background: #7fc8a9; }

/* Support header: red to green */
.sph .sb-tile__link { padding: clamp(14px, 1.6vw, 24px); }
.sph__panel { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; padding: clamp(16px, 2vw, 26px); border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.sph__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sph__top p { margin: 0; font: var(--heading-weight-strong) 1.1rem/1 var(--font-heading); }
.sph__state { padding: 5px 11px; border-radius: 0; background: rgba(236, 97, 64, 0.16); color: var(--coral); font: 500 0.68rem/1.3 var(--x-mono); transition: background-color 300ms var(--x-ease), color 300ms var(--x-ease); }
.sph__state b { font-weight: 500; } .sph__state b + b, .sph__state.is-on b:first-child { display: none; } .sph__state.is-on b + b { display: inline; } .sph__state.is-on { background: rgba(127, 200, 169, 0.16); color: #7fc8a9; }
.sph__rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sph__rows li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 0; background: #2a2422; font-size: 0.8rem; }
.sph__rows i { width: 10px; height: 10px; border-radius: 50%; background: #e5533d; box-shadow: 0 0 0 4px rgba(229, 83, 61, 0.18); transition: background-color 300ms var(--x-ease), box-shadow 300ms var(--x-ease); }
.sph__rows em { font-style: normal; font: 500 0.64rem/1 var(--x-mono); color: var(--coral); } .sph__rows em b { font-weight: 500; }
.sph__rows em b + b, .sph__rows li.is-on em b:first-child { display: none; } .sph__rows li.is-on em b + b { display: inline; }
.sph__rows li.is-on i { background: #7fc8a9; box-shadow: 0 0 0 4px rgba(127, 200, 169, 0.18); } .sph__rows li.is-on em { color: #7fc8a9; }
.sph__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
.sph__up { flex: 1; } .sph__up .x-mono { margin: 0 0 8px; color: var(--x-soft-dark); font-size: 0.58rem; }
.sph__bars { display: flex; gap: 3px; height: 30px; } .sph__bars i { flex: 1; border-radius: 0; background: rgba(127, 200, 169, 0.75); }
.sph__bk { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 0; background: var(--x-paper); color: var(--x-ink); font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .sph__bk i { width: 7px; height: 7px; border-radius: 50%; background: #3f9b74; }

/* Design header: sketch, brand, screen */
.dzh .sb-tile__link { padding: clamp(14px, 1.6vw, 24px); }
.dzh__stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; }
.dzh__col { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-height: 0; }
.dzh__card { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 14px; border-radius: 0; }
.dzh__card .x-mono, .dzh__phone > .x-mono { margin: 0; font-size: 0.58rem; color: var(--x-soft-dark); }
.dzh__card--sk { background: #f7f3ec; background-image: radial-gradient(rgba(24, 21, 20, 0.12) 1px, transparent 1px); background-size: 14px 14px; } .dzh__card--sk .x-mono { color: var(--x-soft); }
.dzh__sk { flex: 1; width: 100%; min-height: 0; fill: none; stroke: #3a3330; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dzh__card--br { background: #221e1c; border: 1px solid var(--x-line-dark); }
.dzh__brand { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 10px; }
.dzh__mk, .fc-mark svg { display: block; width: clamp(48px, 5vw, 70px); height: auto; } .dzh__mk rect, .fc-mark rect { fill: var(--coral); } .dzh__mk path, .fc-mark path { fill: none; stroke: var(--x-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dzh__sw, .fc-sw { display: grid; grid-template-columns: repeat(2, 22px); gap: 6px; } .dzh__sw i, .fc-sw i { width: 22px; height: 22px; border-radius: 0; }
.dzh__sw i:nth-child(1), .fc-sw i:nth-child(1) { background: var(--coral); } .dzh__sw i:nth-child(2), .fc-sw i:nth-child(2) { background: var(--brown); } .dzh__sw i:nth-child(3), .fc-sw i:nth-child(3) { background: var(--x-paper); } .dzh__sw i:nth-child(4), .fc-sw i:nth-child(4) { background: #0f0c0b; border: 1px solid var(--x-line-dark); }
.dzh__brand b { font: var(--heading-weight) clamp(1.6rem, 1rem + 1.4vw, 2.4rem)/1 var(--font-heading); color: var(--x-paper); }
.dzh__phone { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dzh__scr { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border: 7px solid #0f0c0b; border-radius: 0; background: var(--x-paper); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.dzh__nav { display: flex; align-items: center; gap: 6px; } .dzh__nav i { width: 20px; } .dzh__nav i svg { width: 100%; height: auto; display: block; } .dzh__nav s { width: 16px; height: 4px; border-radius: 0; background: #d8d0c6; } .dzh__nav s:first-of-type { margin-left: auto; }
.dzh__h { height: 12px; border-radius: 0; background: var(--x-ink); } .dzh__h--2 { width: 62%; }
.dzh__img { flex: 1; min-height: 50px; border-radius: 0; background: linear-gradient(135deg, var(--coral), var(--brown)); }
.dzh__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dzh__row i { height: 30px; border-radius: 0; background: #e7e0d7; }
.dzh__btn { padding: 8px; border-radius: 0; background: var(--coral); color: var(--x-ink); text-align: center; font-size: 0.68rem; font-weight: 600; }

/* feature card visuals */
.fc-phone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 150px; height: 200px; padding: 10px 8px; border: 6px solid #0f0c0b; border-radius: 0; background: linear-gradient(#e7ddd0 0 58%, #c4a98d 58%); }
.fc-url { padding: 3px 9px; border-radius: 0; background: var(--x-paper); color: var(--x-soft); font-size: 0.6rem; }
.fc-obj i { display: block; width: 54px; height: 64px; border-radius: 0; background: linear-gradient(160deg, var(--coral), var(--brown)); box-shadow: 0 14px 10px -8px rgba(0, 0, 0, 0.35); }
.fc-btn { padding: 6px 12px; border-radius: 0; background: var(--coral); color: var(--x-ink); font-size: 0.66rem; font-weight: 600; white-space: nowrap; }
.fc-plan { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; width: min(100%, 250px); }
.fc-plan span { position: relative; padding: 22px 10px; border-radius: 0; border: 1.5px dashed rgba(244, 240, 234, 0.3); color: var(--x-soft-dark); text-align: center; transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease), color 300ms var(--x-ease); }
.fc-plan span.is-on { border-style: solid; border-color: var(--coral); background: rgba(236, 97, 64, 0.14); color: var(--x-paper); }
.fc-plan span.is-on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.fc-art { position: relative; width: min(100%, 270px); height: 190px; }
.fc-art svg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 110px; fill: rgba(201, 162, 126, 0.16); stroke: #c9a27e; stroke-width: 2; }
.fc-hot { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 0; background: #2e2826; color: var(--x-paper); font-size: 0.7rem; white-space: nowrap; } .fc-hot i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(236, 97, 64, 0.25); }
.fc-hot--a { top: 6%; left: 0; } .fc-hot--b { top: 44%; right: 0; } .fc-hot--c { bottom: 4%; left: 6%; }
.fc-ups { display: grid; gap: 8px; width: min(100%, 270px); }
.fc-ups span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 0; background: #2a2422; } .fc-ups b { font-weight: 500; }
.fc-ups em { font-style: normal; font: 500 0.64rem/1 var(--x-mono); } .fc-ups u { text-decoration: none; color: var(--coral); } .fc-ups u + u, .fc-ups .is-on u:first-child { display: none; } .fc-ups .is-on u + u { display: inline; color: #7fc8a9; }
.fc-bk { display: grid; justify-items: center; gap: 16px; }
.fc-days { display: flex; gap: 6px; } .fc-days span { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--x-soft-dark); font-size: 0.6rem; }
.fc-days i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(244, 240, 234, 0.25); transition: background-color 250ms var(--x-ease), border-color 250ms var(--x-ease); } .fc-days .is-on i { background: #7fc8a9; border-color: #7fc8a9; }
.fc-mon { position: relative; width: min(100%, 270px); padding: 34px 0 30px; } .fc-mon svg { display: block; width: 100%; overflow: visible; fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fc-alert { position: absolute; top: 0; left: 34%; padding: 5px 10px; border-radius: 0; background: rgba(236, 97, 64, 0.18); color: var(--coral); font-size: 0.68rem; white-space: nowrap; }
.fc-fix { position: absolute; bottom: 0; right: 0; padding: 5px 10px; border-radius: 0; background: rgba(127, 200, 169, 0.16); color: #7fc8a9; font-size: 0.68rem; }
.fc-brand { display: flex; align-items: center; gap: 18px; } .fc-brand b { font: var(--heading-weight) 1.7rem/1 var(--font-heading); color: var(--x-paper); }
.fc-flow { display: flex; align-items: center; gap: 8px; } .fc-flow em { font-style: normal; color: var(--x-soft-dark); }
.fc-flow span { display: flex; flex-direction: column; gap: 6px; width: 62px; height: 108px; padding: 8px; border-radius: 0; background: #2e2826; border: 1.5px solid transparent; transition: background-color 300ms var(--x-ease), border-color 300ms var(--x-ease); }
.fc-flow i { height: 8px; border-radius: 0; background: rgba(244, 240, 234, 0.2); } .fc-flow i:first-child { height: 30px; }
.fc-flow u { display: grid; place-items: center; margin: auto auto 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(244, 240, 234, 0.2); color: transparent; text-decoration: none; font-size: 0.7rem; }
.fc-flow .is-on { background: var(--x-paper); border-color: var(--coral); } .fc-flow .is-on i { background: #ddd5cb; } .fc-flow .is-on u { background: var(--coral); color: var(--x-ink); }
.fc-sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 270px); align-items: center; }
.fc-b { padding: 8px 4px; border-radius: 0; background: var(--coral); color: var(--x-ink); text-align: center; font-size: 0.66rem; font-weight: 600; } .fc-b.is-h { background: #f08a6d; } .fc-b.is-p { background: var(--coral-deep); color: var(--x-paper); }
.fc-tg { position: relative; width: 44px; height: 24px; border-radius: 0; background: #3a3330; transition: background-color 300ms var(--x-ease); } .fc-tg i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--x-paper); transition: transform 300ms var(--x-ease); }
.fc-tg.is-on { background: #7fc8a9; } .fc-tg.is-on i { transform: translateX(20px); }
.fc-in { grid-column: span 2; padding: 9px 12px; border-radius: 0; background: var(--x-paper); color: var(--x-soft); font-size: 0.72rem; }

/* pinned-stage visuals */
.sv { color: var(--x-paper); }
.sv-card { min-width: 220px; padding: 18px 20px; border-radius: 0; background: #221e1c; border: 1px solid var(--x-line-dark); }
.sv-card > .x-mono { margin: 0 0 12px; color: var(--x-soft-dark); font-size: 0.62rem; }
.sv-list { display: grid; gap: 12px; } .sv-list span { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.sv-list i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: var(--x-ink); } .sv-list i svg { width: 12px; height: 12px; }
.sv-cube { min-width: 0; } .sv-cube svg { display: block; width: 120px; fill: none; stroke: var(--x-paper); stroke-width: 1.6; stroke-linejoin: round; }
.sv-poster { display: grid; gap: 10px; width: 150px; padding: 16px; border-radius: 0; background: var(--x-paper); text-align: center; } .sv-poster b { color: var(--x-ink); font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.sv-bars .ws-chart { display: flex; align-items: flex-end; gap: 8px; width: 180px; height: 110px; }
.sv-audit span { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--x-line-dark); font-size: 0.88rem; }
.sv-audit b { padding: 3px 8px; border-radius: 0; color: var(--x-ink); font: 500 0.6rem/1.2 var(--x-mono); } .sv-audit .is-h { background: var(--coral); } .sv-audit .is-m { background: #e0a84a; } .sv-audit .is-l { background: #7fc8a9; }
.sv-key { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--coral); } .sv-key svg { width: 32px; fill: none; stroke: var(--x-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-cal > div { display: grid; grid-template-columns: repeat(7, 18px); gap: 6px; } .sv-cal i { height: 18px; border-radius: 0; background: rgba(244, 240, 234, 0.1); } .sv-cal i.is-on { background: var(--coral); }
.sv-cal > span { display: block; margin-top: 12px; color: var(--x-soft-dark); font-size: 0.8rem; }
.sv-ship span { display: block; padding: 10px 0; border-top: 1px solid var(--x-line-dark); font-size: 0.9rem; } .sv-ship .is-new { color: var(--x-soft-dark); border-top-style: dashed; }
.sv-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .sv-flow em { font-style: normal; color: var(--x-soft-dark); }
.sv-flow span { padding: 12px 16px; border-radius: 0; border: 1.5px dashed rgba(244, 240, 234, 0.4); font-size: 0.9rem; } .sv-flow .is-c { border: 1.5px solid var(--coral); background: var(--coral); color: var(--x-ink); }
.sv-pal { display: grid; grid-template-columns: repeat(2, 40px); gap: 8px; min-width: 0; } .sv-pal i { height: 40px; border-radius: 0; } .sv-pal i:nth-child(1) { background: var(--coral); } .sv-pal i:nth-child(2) { background: var(--brown); } .sv-pal i:nth-child(3) { background: var(--x-paper); } .sv-pal i:nth-child(4) { background: #0f0c0b; border: 1px solid var(--x-line-dark); }
.sv-pal b { grid-column: span 2; text-align: center; font: var(--heading-weight) 2rem/1 var(--font-heading); }
.sv-note2 { background: #f3c9b8; transform: rotate(3deg); }
@media (max-width: 599px) { .arh__tag--b { display: none; } .dzh__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 10px; } }
.wfc__vis .fc { display: grid; place-items: center; width: min(100%, 300px); }
.arh__tag--b { right: auto; left: 2%; bottom: 10%; max-width: 24%; }
.sph__panel { padding: clamp(6px, 1vw, 12px); background: none; border: 0; gap: 14px; } .sph__rows li { padding: 13px 16px; font-size: 0.86rem; }
.dzh__img { flex: 0 1 34%; } .dzh__scr { justify-content: space-between; }

/* ---------------------------------------------------------------- design studio home (/design/) */
.dh { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: clamp(120px, 14vh, 190px) 0 clamp(64px, 9vh, 110px); overflow: hidden; color: var(--x-paper);
  background: radial-gradient(60% 55% at 0% 0%, rgba(122, 40, 30, 0.55), transparent 70%), radial-gradient(45% 45% at 100% 100%, rgba(236, 97, 64, 0.16), transparent 70%), var(--x-ink); }
.dh__inner { position: relative; z-index: 1; }
.dh__k { margin: 0 0 clamp(18px, 2vw, 28px); color: var(--x-soft-dark); }
.dh__title { margin: 0; font: var(--heading-weight) clamp(2.6rem, 0.4rem + 5.6vw, 8.6rem)/0.98 var(--font-heading); letter-spacing: -0.06em; }
.dh__line { display: block; white-space: nowrap; }
.dh__w { display: inline-block; transition: color 350ms var(--x-ease); }
.dh__w.is-a { color: var(--coral); }
.dh__w.is-b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -0.035em; }
.dh__w.is-c { color: transparent; -webkit-text-stroke: 1.5px var(--x-paper); }
.dh__sel { position: absolute; left: 0; top: 0; z-index: 2; border: 1.5px solid var(--coral); pointer-events: none; opacity: 0; visibility: hidden; }
.dh__sel i { position: absolute; width: 9px; height: 9px; background: var(--x-paper); border: 1.5px solid var(--coral); }
.dh__sel i:nth-child(1) { left: -5px; top: -5px; } .dh__sel i:nth-child(2) { right: -5px; top: -5px; } .dh__sel i:nth-child(3) { left: -5px; bottom: -5px; } .dh__sel i:nth-child(4) { right: -5px; bottom: -5px; }
.dh__sel em { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; padding: 3px 8px; border-radius: 0; background: var(--coral); color: var(--x-ink); font: 500 0.66rem/1.3 var(--x-mono); font-style: normal; white-space: nowrap; }
.dh__cur { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; visibility: hidden; }
.dh__cur svg { width: 24px; height: 24px; fill: var(--coral); stroke: var(--x-ink); stroke-width: 1.4; stroke-linejoin: round; }
.dh__cur b { margin: 18px 0 0 -4px; padding: 4px 9px; border-radius: 0; background: var(--coral); color: var(--x-ink); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.dh__lead { max-width: 46ch; margin: clamp(26px, 3vw, 40px) 0 0; color: var(--x-soft-dark); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.5; }
.dh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: clamp(28px, 3vw, 40px); }
.dh__shape { position: absolute; z-index: 0; border: 1.5px solid rgba(244, 240, 234, 0.18); pointer-events: none; }
.dh__shape--c { top: 16%; right: 9%; width: clamp(90px, 11vw, 170px); aspect-ratio: 1; border-radius: 50%; }
.dh__shape--s { bottom: 14%; right: 24%; width: clamp(60px, 7vw, 110px); aspect-ratio: 1; border-radius: 0; rotate: 14deg; }
.dh__shape--t { top: 54%; right: 5%; width: clamp(70px, 8vw, 120px); border: 0; } .dh__shape--t svg { display: block; width: 100%; fill: none; stroke: rgba(244, 240, 234, 0.18); stroke-width: 1.5; }
.dh__shape--p { top: 34%; right: 30%; width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--coral); }
@media (max-width: 699px) { .dh__line { white-space: normal; } .dh__shape--c, .dh__shape--s { opacity: 0.6; } .dh__shape--p { display: none; } }

/* services: big rows that open */
.ds__list { margin: clamp(28px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
.ds__row { border-bottom: 1px solid var(--x-line); }
.ds__row h3 { margin: 0; }
.ds__btn { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; width: 100%; padding: clamp(22px, 2.6vw, 38px) 0; border: 0; border-radius: 0; background: none; color: var(--x-ink); cursor: pointer; text-align: center; font: var(--heading-weight) clamp(1.9rem, 0.9rem + 3.2vw, 4.4rem)/1 var(--font-heading); letter-spacing: -0.045em; transition: background-color 400ms var(--x-ease), color 400ms var(--x-ease), padding 400ms var(--x-ease), border-radius 400ms var(--x-ease); }
.ds__btn .x-mono { justify-self: start; color: var(--x-soft); font-size: 0.72rem; letter-spacing: 0; }
.ds__ic { justify-self: end; transition: transform 400ms var(--x-ease); }
.ds__btn:hover .ds__name { color: var(--coral); } .ds__name { transition: color 300ms var(--x-ease); }
.ds__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.ds__row.is-open .ds__btn { padding-inline: clamp(18px, 2.4vw, 36px); border-radius: 0; background: var(--x-ink); color: var(--x-paper); }
.ds__row.is-open .ds__btn .x-mono { color: var(--x-soft-dark); } .ds__row.is-open .ds__name { color: var(--x-paper); } .ds__row.is-open .ds__ic { transform: rotate(45deg); }
.ds__panel { height: 0; overflow: hidden; } .ds__row.is-open .ds__panel { height: auto; }
.ds__in { display: grid; gap: 24px; padding: 0 clamp(18px, 2.4vw, 36px) clamp(24px, 3vw, 40px); border-radius: 0; background: var(--x-ink); color: var(--x-paper); }
.ds__subs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds__subs li { padding: 12px 0; border-top: 1px solid var(--x-line-dark); font: var(--heading-weight) clamp(1.15rem, 0.95rem + 0.6vw, 1.6rem)/1.2 var(--font-heading); letter-spacing: -0.02em; }
.ds__p { margin: 0; color: var(--x-soft-dark); line-height: 1.6; max-width: 44ch; }
.ds__vis { display: grid; place-items: center; min-height: 260px; padding: 24px; border-radius: 0; background: #1b1716; border: 1px solid var(--x-line-dark); }
.ds__vis .fc { display: grid; place-items: center; width: min(100%, 300px); }
@media (min-width: 900px) { .ds__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 72px); } .ds__subs { grid-column: 1; } .ds__p { grid-column: 1; align-self: end; } .ds__vis { grid-column: 2; grid-row: 1 / span 2; } }

/* featured projects */
.dw__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px); margin: clamp(28px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .dw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw__card:nth-child(even) { margin-top: clamp(60px, 8vw, 140px); } }
.dw__link { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.dw__shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; }
.dw__shot--ink { background: var(--x-ink); color: var(--x-paper); } .dw__shot--coral { background: var(--coral); color: var(--x-ink); } .dw__shot--brown { background: var(--brown); color: var(--x-paper); } .dw__shot--paper { background: #e7e0d7; color: var(--x-ink); }
.dw__img { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; transition: transform 900ms var(--x-ease); }
.dw__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw__img .x-mono { opacity: 0.6; } .dw__img b { font: var(--heading-weight) clamp(1.6rem, 1rem + 2vw, 3rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.dw__view { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--x-paper); color: var(--x-ink); font-weight: 600; translate: -50% -50%; scale: 0; transition: scale 450ms var(--x-ease); }
.dw__link:hover .dw__img { transform: scale(1.04); } .dw__link:hover .dw__view { scale: 1; }
.dw__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--x-soft); font-size: 0.9rem; } .dw__meta .x-mono { font-size: 0.7rem; }
.dw__name { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: var(--heading-weight) clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem)/1.05 var(--font-heading); letter-spacing: -0.045em; }
.dw__go { transition: transform 400ms var(--x-ease); } .dw__link:hover .dw__go { transform: rotate(45deg); color: var(--coral); }
.dw__desc { max-width: 54ch; color: var(--x-soft); line-height: 1.6; }
.dw__link:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; border-radius: 0; }
[data-x-dark] > .dh__shape { position: absolute; z-index: 0; }

/* design home services: a dial that turns as each service rises (reference: orionix) */
.dsw__stage { position: relative; }
.dsw__head { margin-bottom: clamp(32px, 4vw, 56px); }
.dsw__wheel, .dsw__dot { display: none; }
.dsw__items { display: grid; gap: clamp(56px, 7vw, 96px); width: min(100% - 2 * var(--x-gutter), 760px); margin: 0 auto; padding: 0; list-style: none; }
.dsw__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dsw__vis { display: grid; place-items: center; width: min(100%, 540px); aspect-ratio: 16 / 10; margin-bottom: clamp(24px, 3vw, 40px); border-radius: 0; background: radial-gradient(70% 70% at 50% 40%, #2a2321, var(--x-ink)); box-shadow: 0 40px 80px -40px rgba(24, 21, 20, 0.6); }
.dsw__vis .fc { display: grid; place-items: center; width: min(100%, 320px); transform: scale(1.15); }
.dsw__no { margin: 0 0 12px; color: var(--x-soft); font-size: 0.72rem; }
.dsw__name { margin: 0; font: var(--heading-weight) clamp(2.2rem, 1.2rem + 3vw, 4.4rem)/1 var(--font-heading); letter-spacing: -0.05em; }
.dsw__p { max-width: 46ch; margin: 16px 0 0; color: var(--x-soft); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.6; }
.dsw__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.dsw__chips li { padding: 8px 14px; border-radius: 0; background: #fff; border: 1px solid var(--x-line); font-size: 0.85rem; box-shadow: 0 6px 16px -10px rgba(24, 21, 20, 0.25); }
.fc-test { display: flex; align-items: center; gap: 14px; } .fc-test .ps-phone { width: 120px; padding: 14px 10px 10px; border-width: 5px; } .fc-test .ps-phone b { font-size: 0.8rem; } .fc-test .ps-phone i { height: 24px; } .fc-test .ps-phone u { font-size: 0.66rem; padding: 7px; }
.fc-test > span { display: block; } .fc-test { flex-wrap: wrap; justify-content: center; }
.fc-say { padding: 8px 12px; border-radius: 0; background: #2e2826; color: var(--x-paper); font-size: 0.72rem; white-space: nowrap; } .fc-say.is-ok { background: rgba(127, 200, 169, 0.16); color: #7fc8a9; }
.fc-test { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 10px; align-items: center; } .fc-test .ps-phone { grid-row: span 2; }
/* pinned (desktop, motion) */
.dsw.is-pin { padding: 0; }
.dsw.is-pin .dsw__stage { height: 100vh; height: 100svh; overflow: hidden; }
.dsw.is-pin .dsw__head { position: absolute; left: 0; right: 0; top: clamp(96px, 12vh, 140px); margin: 0 auto; z-index: 2; pointer-events: none; }
.dsw.is-pin .dsw__head .x-h2 { max-width: 9ch; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); }
.dsw.is-pin .dsw__wheel { --d: min(130vh, 1300px); display: block; position: absolute; top: 50%; left: calc(24vw - var(--d)); width: var(--d); height: var(--d); translate: 0 -50%; border-radius: 50%; border: 1px solid var(--x-line); }
.dsw__wheel ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.dsw__wheel li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--d) / 2 + 22px)); }
.dsw__wheel li span { position: absolute; left: 0; top: 0; translate: 0 -50%; color: var(--x-soft); font: var(--heading-weight) clamp(1.4rem, 1rem + 1vw, 2.2rem)/1 var(--font-heading); letter-spacing: -0.03em; opacity: 0.5; transition: color 400ms var(--x-ease), opacity 400ms var(--x-ease); }
.dsw__wheel li.is-on span { color: var(--x-ink); opacity: 1; }
.dsw.is-pin .dsw__dot { display: block; position: absolute; top: 50%; left: 24vw; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); translate: -50% -50%; box-shadow: 0 0 0 6px rgba(236, 97, 64, 0.18); z-index: 2; }
.dsw.is-pin .dsw__items { position: absolute; inset: 0 0 0 30vw; display: grid; place-items: center; width: auto; margin: 0; padding: clamp(96px, 12vh, 140px) var(--x-gutter) clamp(32px, 5vh, 64px); }
.dsw.is-pin .dsw__item { grid-area: 1 / 1; max-width: 640px; }
.dsw.is-pin .dsw__vis { width: min(100%, 480px); margin-bottom: clamp(18px, 2.6vh, 32px); }
.dsw.is-pin .dsw__no { display: none; }
@media (max-height: 820px) { .dsw.is-pin .dsw__vis { width: min(100%, 380px); } .dsw.is-pin .dsw__name { font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); } }
/* services: bold dial numbers, static abstract art per service */
.dsw__wheel li span { font-weight: 800; font-family: var(--font-heading); }
.dsw__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; }
.dsw__txt { display: flex; flex-direction: column; align-items: center; }
.dsw__art { width: min(100%, 340px); }
.dsw__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.dsw__art .a1 { fill: var(--coral); } .dsw__art .a2 { fill: var(--brown); } .dsw__art .a3 { fill: var(--x-ink); } .dsw__art .a4 { fill: #e2d8cc; } .dsw__art .a5 { fill: #fff; }
.dsw__art .al { fill: none; stroke: rgba(24, 21, 20, 0.22); stroke-width: 1.5; stroke-dasharray: 5 7; }
.dsw__art .ln { stroke: var(--x-ink); stroke-width: 2; }
.dsw.is-pin .dsw__items { inset: 0 0 0 28vw; padding-inline: 0 var(--x-gutter); }
.dsw.is-pin .dsw__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 80px); justify-items: stretch; width: 100%; max-width: none; }
.dsw.is-pin .dsw__txt { align-items: flex-start; text-align: left; }
.dsw.is-pin .dsw__chips { justify-content: flex-start; }
.dsw.is-pin .dsw__art { justify-self: end; width: min(100%, 60vh, 520px); }
.dsw.is-pin .dsw__items { inset: 0 0 0 34vw; }
.dsw__wheel li span { font-weight: 800; letter-spacing: -0.04em; color: var(--x-ink); opacity: 0.32; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.6rem); }
.dsw__wheel li.is-on span { opacity: 1; }

/* design home: why us, editorial numbered rows */
.dy { background: var(--x-ink); color: var(--x-paper); }
.dy .x-label { color: var(--x-soft-dark); }
.dy__list { margin: clamp(32px, 4vw, 64px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line-dark); }
.dy__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--x-line-dark); }
.dy__no { font: 800 clamp(1.4rem, 1rem + 1vw, 2.2rem)/1 var(--font-heading); letter-spacing: -0.04em; color: var(--coral); }
.dy__h { margin: 0; font: var(--heading-weight) clamp(1.9rem, 1rem + 2.8vw, 4rem)/1.02 var(--font-heading); letter-spacing: -0.05em; transition: color 350ms var(--x-ease), transform 500ms var(--x-ease); }
.dy__side p { margin: 0 0 12px; color: var(--x-soft-dark); line-height: 1.6; max-width: 44ch; }
.dy__side .x-mono { color: var(--x-paper); font-size: 0.72rem; opacity: 0.8; }
.dy__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.dy__row:hover .dy__h { color: var(--coral); transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .dy__line { transform: scaleX(1); opacity: 0.5; } }
@media (min-width: 1000px) { .dy__row { grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .dy__no { padding-top: 0.5em; } .dy__side { padding-top: 0.6em; } }

/* design home: alignment and spacing pass */
.dh__title { font-size: clamp(2.5rem, 0.4rem + 6.6vw, 9.6rem); }
.dh__inner { padding-top: clamp(0px, 2vh, 24px); }
.dp-tight-b { padding-bottom: clamp(88px, 8vw, 150px); }
.dp-tight-t { padding-top: clamp(88px, 8vw, 150px); }
.dsw:not(.is-pin) { padding-top: clamp(88px, 8vw, 150px); padding-bottom: clamp(56px, 5vw, 96px); border-top: 1px solid var(--x-line); }
.dsw:not(.is-pin) .dsw__head { margin-bottom: clamp(40px, 5vw, 72px); }
/* stacked services line up with the heading: text left, art right */
.dsw:not(.is-pin) .dsw__items { width: min(100% - 2 * var(--x-gutter), var(--x-max)); gap: 0; }
.dsw:not(.is-pin) .dsw__item { justify-items: start; padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--x-line); }
.dsw:not(.is-pin) .dsw__txt { align-items: flex-start; text-align: left; }
.dsw:not(.is-pin) .dsw__chips { justify-content: flex-start; }
.dsw:not(.is-pin) .dsw__art { width: min(100%, 260px); }
@media (min-width: 760px) { .dsw:not(.is-pin) .dsw__item { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px); } .dsw:not(.is-pin) .dsw__art { justify-self: end; width: min(100%, 300px); } }
/* pinned services: heading sits clear of the arc, text and art share a baseline grid */
.dsw.is-pin .dsw__head .x-h2 { max-width: 10ch; }
.dsw.is-pin .dsw__item { padding-right: clamp(0px, 2vw, 40px); }
/* featured projects: even rhythm between cards */
.dw__grid { row-gap: clamp(56px, 6vw, 96px); }
.dw__desc { margin-top: -4px; }
/* phones: keep the live cursor from covering the headline */
@media (max-width: 699px) { .dh__cur b, .dh__sel em { display: none; } .dh__cur svg { width: 18px; height: 18px; } .dh__title { line-height: 1.04; } .dh__sel i { width: 7px; height: 7px; } }
@media (max-width: 699px) { .dh__title { font-size: clamp(2.1rem, 1rem + 5.4vw, 2.6rem); } .dh__line { text-wrap: balance; } .dh__shape--t, .dh__shape--s { display: none; } .dh__shape--c { top: 9%; right: -30px; } }
.dh__shape--s { right: 18%; }

/* ---------------------------------------------------------------- work: filter grid */
.wk { padding-top: clamp(72px, 7vw, 120px); }
.wk__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(36px, 4vw, 64px); }
.wk__bar .x-label { margin: 0; }
.wk__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 0; border: 1px solid var(--x-line); background: #fff; color: var(--x-ink); font: 500 0.9rem/1 var(--font-body); cursor: pointer; transition: background-color 250ms var(--x-ease), color 250ms var(--x-ease), border-color 250ms var(--x-ease); }
.wk__chip span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 0; background: var(--x-paper); color: var(--x-soft); font: 500 0.68rem/1 var(--x-mono); }
.wk__chip:hover { border-color: var(--x-ink); }
.wk__chip.is-on { background: var(--x-ink); color: var(--x-paper); border-color: var(--x-ink); } .wk__chip.is-on span { background: var(--coral); color: var(--x-ink); }
.wk__chip:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.wk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk__card[hidden] { display: none; }
.wk__link { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.wk__img, .cs-img { position: relative; display: grid; place-content: center; gap: 10px; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: var(--pj-bg); color: #f4f0ea; text-align: center; }
.wk__img img, .cs-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--x-ease); }
.wk__img .x-mono, .cs-img .x-mono { color: var(--pj); opacity: 0.8; } .wk__img b, .cs-img b { font: var(--heading-weight) clamp(1.6rem, 1rem + 2vw, 3rem)/1 var(--font-heading); letter-spacing: -0.04em; }
.wk__link:hover .wk__img img { transform: scale(1.04); }
.wk__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.wk__name { font: var(--heading-weight) clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem)/1.05 var(--font-heading); letter-spacing: -0.045em; }
.wk__go { transition: transform 400ms var(--x-ease), color 300ms var(--x-ease); } .wk__link:hover .wk__go { transform: rotate(45deg); color: var(--coral); }
.wk__client { color: var(--x-soft); font-size: 0.95rem; }
.wk__res { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--x-line); }
.wk__res li { display: flex; flex-direction: column; gap: 4px; max-width: 200px; }
.wk__res b { font: var(--heading-weight-strong) clamp(1.3rem, 1rem + 0.8vw, 1.8rem)/1 var(--font-heading); letter-spacing: -0.03em; color: var(--coral-deep, var(--coral)); }
.wk__res span { color: var(--x-soft); font-size: 0.82rem; line-height: 1.35; }
.wk__tags, .cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.wk__tags a { display: inline-block; padding: 6px 12px; border-radius: 0; background: #fff; border: 1px solid var(--x-line); color: var(--x-ink); font-size: 0.78rem; text-decoration: none; transition: border-color 250ms var(--x-ease), color 250ms var(--x-ease); }
.wk__tags a:hover { border-color: var(--coral); color: var(--coral-deep, var(--coral)); }

/* ---------------------------------------------------------------- case study: themed per project via --pj-bg / --pj */
.cs-hero { position: relative; padding: clamp(130px, 15vh, 200px) 0 0; color: #f4f0ea; background: radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--pj) 22%, transparent), transparent 70%), var(--pj-bg); }
.cs-hero__k { margin: clamp(28px, 3vw, 44px) 0 14px; color: var(--pj); }
.cs-hero__h { margin: 0; font: var(--heading-weight) clamp(2.8rem, 1rem + 6vw, 8rem)/0.95 var(--font-heading); letter-spacing: -0.06em; }
.cs-hero__lead { max-width: 52ch; margin: clamp(22px, 2.6vw, 34px) 0 0; color: rgba(244, 240, 234, 0.72); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.6; }
.cs-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 24px 0 0; border-top: 1px solid rgba(244, 240, 234, 0.16); }
@media (min-width: 800px) { .cs-meta { grid-template-columns: 1fr 1.6fr 1fr; } }
.cs-meta dt { margin-bottom: 8px; color: rgba(244, 240, 234, 0.5); font-size: 0.66rem; } .cs-meta dd { margin: 0; }
.cs-tags { margin: 0; } .cs-tags a { display: inline-block; padding: 6px 12px; border-radius: 0; border: 1px solid rgba(244, 240, 234, 0.25); color: #f4f0ea; font-size: 0.82rem; text-decoration: none; transition: border-color 250ms var(--x-ease), color 250ms var(--x-ease); }
.cs-tags a:hover { border-color: var(--pj); color: var(--pj); }
.cs-hero__shot { position: relative; margin-top: clamp(40px, 5vw, 72px); margin-bottom: calc(-1 * clamp(80px, 10vw, 180px)); z-index: 1; }
.cs-img { aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--pj-bg) 70%, #000); border: 1px solid rgba(244, 240, 234, 0.12); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.6); }
.cs-res { padding-top: calc(clamp(80px, 10vw, 180px) + clamp(64px, 7vw, 120px)); padding-bottom: clamp(64px, 7vw, 120px); }
.cs-res__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
@media (min-width: 800px) { .cs-res__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .cs-res__list li + li { border-left: 1px solid var(--x-line); padding-left: clamp(20px, 3vw, 48px); } }
.cs-res__list li { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 40px) 0; padding-right: 20px; }
.cs-res__list b { font: var(--heading-weight) clamp(2.4rem, 1.4rem + 3vw, 4.8rem)/1 var(--font-heading); letter-spacing: -0.05em; color: color-mix(in srgb, var(--pj) 70%, var(--x-ink)); }
.cs-res__list span { max-width: 26ch; color: var(--x-soft); line-height: 1.45; }
.cs-body { padding-top: clamp(32px, 4vw, 64px); }
.cs-body__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
@media (min-width: 900px) { .cs-body__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.cs-block p { max-width: 56ch; margin: 18px 0 0; color: var(--x-soft); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.65; }
.cs-block .x-h2 { margin-top: 12px; }
.cs-fill { display: inline-block; padding: 4px 10px; border-radius: 0; background: rgba(236, 97, 64, 0.1); border: 1px dashed var(--coral); color: var(--coral-deep, var(--coral)); font: 500 0.78rem/1.4 var(--x-mono); }
.cs-gallery { padding: clamp(48px, 6vw, 96px) 0; background: var(--pj-bg); }
.cs-gallery__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); }
@media (min-width: 800px) { .cs-gallery__grid { grid-template-columns: 1fr 1fr; } .cs-gal--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9 !important; } }
.cs-gal { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 0; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(244, 240, 234, 0.2); } .cs-gal .x-mono { color: var(--pj); opacity: 0.8; }
.cs-out__in { max-width: 900px; } .cs-out__p { margin: 20px 0 0; }
.cs-next { background: var(--pj-bg); color: #f4f0ea; }
.cs-next__in { display: grid; gap: 14px; padding: clamp(72px, 9vw, 140px) 0; color: inherit; text-decoration: none; }
.cs-next__in .x-mono { color: var(--pj); }
.cs-next__name { display: flex; align-items: center; gap: 20px; font: var(--heading-weight) clamp(2.6rem, 1rem + 5vw, 6.6rem)/1 var(--font-heading); letter-spacing: -0.055em; transition: color 300ms var(--x-ease); }
.cs-next__name > span { transition: transform 400ms var(--x-ease); } .cs-next__in:hover .cs-next__name { color: var(--pj); } .cs-next__in:hover .cs-next__name > span { transform: translateX(10px); }
.cs-next__meta { color: rgba(244, 240, 234, 0.6); }
[data-x-dark] > .cs-hero__shot { position: relative; }
.cs-out__in { max-width: none; } .cs-out__in .x-h2 { max-width: 18ch; }
.cs-next__name .bb-icon { width: 0.5em !important; height: 0.5em !important; } .cs-next__name .bb-icon svg { width: 100%; height: 100%; }
/* case study: document-driven sections */
.cs-block > .x-h2 { font-size: clamp(1.8rem, 1rem + 2vw, 3rem); }
.cs-step { padding: 24px 0; border-top: 1px solid var(--x-line); } .cs-step:first-of-type { margin-top: 18px; }
.cs-step h3 { margin: 0 0 10px; font: var(--heading-weight) clamp(1.3rem, 1rem + 0.8vw, 1.8rem)/1.15 var(--font-heading); letter-spacing: -0.03em; }
.cs-step p, .cs-out__p p { max-width: 60ch; margin: 0 0 12px; color: var(--x-soft); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.65; }
.cs-ul { display: grid; gap: 8px; margin: 8px 0 14px; padding: 0; list-style: none; } .cs-ul li { position: relative; padding-left: 20px; color: var(--x-ink); } .cs-ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.cs-tech__k { margin: 32px 0 12px; color: var(--x-soft); font-size: 0.68rem; }
.cs-tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .cs-tech li { padding: 6px 12px; border-radius: 0; background: #fff; border: 1px solid var(--x-line); font: 500 0.75rem/1.3 var(--x-mono); }
.cs-caps { background: radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--pj) 16%, transparent), transparent 70%), var(--pj-bg); color: #f4f0ea; }
.cs-caps .x-label { color: var(--pj); } .cs-caps .x-h2 { color: #f4f0ea; }
.cs-caps__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .cs-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .cs-caps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-caps__grid li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(244, 240, 234, 0.1); font-size: 1rem; }
.cs-caps__grid i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pj); color: #181514; } .cs-caps__grid i svg { width: 13px; height: 13px; }
.cs-out__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(48px, 6vw, 96px); } @media (min-width: 900px) { .cs-out__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.cs-out__p { margin: 0; } .cs-out__p p:first-child { color: var(--x-ink); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; }
.cs-role { display: flex; flex-direction: column; gap: 6px; margin-top: 24px !important; padding-top: 20px; border-top: 1px solid var(--x-line); color: var(--x-ink) !important; } .cs-role .x-mono { color: var(--x-soft); font-size: 0.68rem; }
.cs-res__list b { font-size: clamp(2rem, 1.2rem + 2.4vw, 4.2rem); }
.wk__client { line-height: 1.4; }
.cs-block p.x-label, .cs-block p.cs-tech__k { margin: 0; font-size: 0.7rem; line-height: 1.4; color: var(--x-soft); }
.cs-block p.cs-tech__k { margin: 32px 0 12px; }
.cs-block > .x-h2 { margin-top: 14px; }
/* case study: built for the business */
.cs-biz { padding-top: clamp(40px, 5vw, 80px); }
.cs-biz__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--x-line); }
@media (min-width: 900px) { .cs-biz__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-biz__list li + li { border-left: 1px solid var(--x-line); } }
.cs-biz__list li { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px) clamp(0px, 2vw, 32px) clamp(24px, 3vw, 40px) 0; }
@media (min-width: 900px) { .cs-biz__list li + li { padding-left: clamp(20px, 2.4vw, 36px); } }
@media (max-width: 899px) { .cs-biz__list li + li { border-top: 1px solid var(--x-line); } }
.cs-biz__no { font: 800 clamp(1.4rem, 1rem + 1vw, 2.2rem)/1 var(--font-heading); letter-spacing: -0.04em; color: color-mix(in srgb, var(--pj) 75%, var(--x-ink)); }
.cs-biz__list p { margin: 0; font: var(--heading-weight) clamp(1.15rem, 1rem + 0.5vw, 1.45rem)/1.35 var(--font-heading); letter-spacing: -0.02em; color: var(--x-ink); }
.cs-won { display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 40px); padding: clamp(24px, 3vw, 40px); border-radius: 0; background: var(--pj-bg); color: #f4f0ea; }
.cs-won .x-mono { color: var(--pj); font-size: 0.7rem; }
.cs-won p { margin: 0; max-width: 40ch; font: var(--heading-weight) clamp(1.5rem, 1rem + 1.6vw, 2.6rem)/1.15 var(--font-heading); letter-spacing: -0.04em; }
/* case study: what we did, hub and spokes.
   Animated wrappers (.hub__anchor, .hub__node) carry no centring transform; the inner elements do,
   so GSAP's transforms never override the centring. */
.cs-did__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(48px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .cs-did__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.cs-did__p p { max-width: 58ch; margin: 0; color: var(--x-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.6; }
.hub { position: relative; }
.hub__lines { display: none; }
.hub__core { display: grid; gap: 8px; padding: 24px; border-radius: 0; background: var(--pj-bg); color: #f4f0ea; }
.hub__core .x-mono { color: var(--pj); font-size: 0.66rem; } .hub__core b { font: var(--heading-weight) clamp(1.4rem, 1rem + 1vw, 2rem)/1.05 var(--font-heading); letter-spacing: -0.04em; }
.hub__nodes { position: relative; display: grid; gap: 10px; margin: 16px 0 0; padding: 0 0 0 26px; list-style: none; }
.hub__nodes::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 18px; width: 2px; background: color-mix(in srgb, var(--pj) 60%, transparent); }
.hub__card { position: relative; display: grid; gap: 4px; padding: 14px 18px; border-radius: 0; background: #fff; border: 1px solid var(--x-line); }
.hub__card::before { content: ""; position: absolute; left: -24px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--pj); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pj) 25%, transparent); }
.hub__card b { font: var(--heading-weight-strong) 1.05rem/1.2 var(--font-heading); letter-spacing: -0.02em; }
.hub__card span { color: var(--x-soft); font-size: 0.88rem; line-height: 1.4; }
@media (min-width: 800px) {
  .hub { aspect-ratio: 16 / 9; max-height: 760px; margin-inline: auto; }
  .hub__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .hub__lines line { stroke: color-mix(in srgb, var(--pj) 65%, var(--x-ink)); stroke-width: 1.5; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; }
  .hub__anchor { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; }
  .hub__core { position: absolute; left: 0; top: 0; place-items: center; align-content: center; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; padding: 20px; border-radius: 50%; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 0 0 14px color-mix(in srgb, var(--pj) 14%, transparent), 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
  .hub__core b { font-size: clamp(1.15rem, 0.8rem + 0.9vw, 1.6rem); }
  .hub__nodes { position: absolute; inset: 0; margin: 0; padding: 0; }
  .hub__nodes::before { display: none; }
  .hub__node { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 0; height: 0; }
  .hub__card { position: absolute; left: 0; top: 0; width: clamp(170px, 15vw, 220px); text-align: center; transform: translate(-50%, -50%); box-shadow: 0 20px 40px -28px rgba(24, 21, 20, 0.35); transition: border-color 300ms var(--x-ease), transform 400ms var(--x-ease); }
  .hub__card::before { left: calc(50% - 6px); top: -6px; }
  .hub__card:hover { border-color: var(--pj); transform: translate(-50%, calc(-50% - 4px)); }
}
/* animated elements: centre without the CSS translate property (GSAP replaces it) */
.arh__qr { top: 0; bottom: 0; margin-block: auto; height: max-content; translate: none; }
.arh__ring { left: 15%; translate: none; }
.arh__chair { left: 22%; translate: none; }
.arh__rot { left: 0; right: 0; margin-inline: auto; width: max-content; translate: none; }
.dsw.is-pin .dsw__wheel { top: calc(50% - var(--d) / 2); translate: none; }
/* case study: hero links, simple discipline chips */
.cs-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.cs-did__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cs-did__chips li { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 0; background: #fff; border: 1px solid var(--x-line); font: var(--heading-weight-strong) 1.1rem/1 var(--font-heading); }
.cs-did__chips i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pj); color: #181514; } .cs-did__chips i svg { width: 12px; height: 12px; }
/* design page: brand identities grid */
.db__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .db__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .db__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.db__link { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.db__cover { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 0; overflow: hidden; background: radial-gradient(70% 70% at 30% 20%, color-mix(in srgb, var(--pj) 30%, transparent), transparent 70%), var(--pj-bg); color: #f4f0ea; transition: transform 700ms var(--x-ease); }
.db__cover b { font: var(--heading-weight) clamp(1.5rem, 1rem + 1.4vw, 2.4rem)/1 var(--font-heading); letter-spacing: -0.045em; color: var(--pj); }
.db__link:hover .db__cover { transform: scale(0.98); }
.db__name { display: flex; align-items: center; justify-content: space-between; font: var(--heading-weight) clamp(1.3rem, 1rem + 0.7vw, 1.7rem)/1.1 var(--font-heading); letter-spacing: -0.035em; }
.db__name > span { transition: transform 400ms var(--x-ease); } .db__link:hover .db__name > span { transform: rotate(45deg); color: var(--coral); }
.db__sub { color: var(--x-soft); font-size: 0.92rem; }
.cs-body--light { padding-top: calc(clamp(80px, 10vw, 180px) + clamp(64px, 7vw, 120px)); padding-bottom: clamp(64px, 7vw, 120px); }
.cs-body--light .cs-step:first-of-type { margin-top: 0; }
/* brand story pages (real brand material) */
.bs.x-sec { padding: clamp(64px, 7vw, 120px) 0; }
.bs--full { padding: clamp(20px, 2.4vw, 40px) 0; }
.bs--full .x-label { margin-bottom: 14px; }
.bs-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px clamp(40px, 6vw, 96px); }
@media (min-width: 900px) { .bs-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .bs-head .x-label { grid-column: 1; } .bs-head .x-h2 { grid-column: 1; } .bs-p { grid-column: 2; grid-row: 1 / span 2; align-self: end; } }
.bs-head .x-h2 { margin: 0; }
.bs-p p { max-width: 58ch; margin: 0 0 14px; color: var(--x-soft); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.65; } .bs-p p:last-child { margin-bottom: 0; }
.bs-fig { margin: clamp(28px, 3.4vw, 52px) 0 0; } .bs--full .bs-fig { margin: 0; }
.bs-fig img { display: block; width: 100%; height: auto; }
.bs-pal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: clamp(28px, 3.4vw, 52px) 0 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .bs-pal { grid-template-columns: 1.4fr 1fr 1fr; } }
.bs-sw { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: clamp(220px, 24vw, 340px); padding: clamp(22px, 2.4vw, 32px); border-radius: 0; border: 1px solid rgba(24, 21, 20, 0.08); }
.bs-sw b { margin-bottom: 8px; font: var(--heading-weight) clamp(1.4rem, 1rem + 1vw, 2rem)/1 var(--font-heading); letter-spacing: -0.03em; }
.bs-sw span { font: 500 0.78rem/1.4 var(--x-mono); opacity: 0.85; }
.bs-type { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: clamp(28px, 3.4vw, 52px) 0 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .bs-type { grid-template-columns: 1fr 1fr; } }
.bs-face { display: grid; gap: 12px; padding: clamp(24px, 3vw, 40px); border-radius: 0; background: #fff; border: 1px solid var(--x-line); }
.bs-face .x-mono { color: var(--x-soft); font-size: 0.7rem; } .bs-face b { font: var(--heading-weight) clamp(2rem, 1.2rem + 2.4vw, 3.6rem)/1 var(--font-heading); letter-spacing: -0.04em; } .bs-face p { margin: 0; color: var(--x-soft); line-height: 1.55; }
.db__cover img { width: 100%; height: 100%; object-fit: cover; }
/* compact identity strip (brand pages): smaller values, even columns, top-aligned */
.cs-res--compact .cs-res__list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cs-res--compact .cs-res__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cs-res--compact .cs-res__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-res--compact .cs-res__list li { justify-content: flex-start; gap: 8px; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 32px) 0; border-left: 0 !important; }
@media (min-width: 640px) { .cs-res--compact .cs-res__list li + li { border-left: 1px solid var(--x-line) !important; padding-left: clamp(16px, 2vw, 28px); } }
@media (min-width: 640px) and (max-width: 999px) { .cs-res--compact .cs-res__list li:nth-child(3) { border-left: 0 !important; padding-left: 0; } .cs-res--compact .cs-res__list li:nth-child(n+3) { border-top: 1px solid var(--x-line); } }
.cs-res--compact .cs-res__list b { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.05; white-space: nowrap; }
.cs-res--compact .cs-res__list span { font-size: 0.9rem; }
/* figures clip their image so the parallax never shows an edge */
.bs-fig { overflow: hidden; border-radius: 0; }
.cs-hero__shot .cs-img img { will-change: transform; }
/* brand story: social post grid (staggered masonry columns) */
.bs--grid { padding: clamp(20px, 2.4vw, 40px) 0 clamp(48px, 5vw, 80px); }
.bs--grid .x-label { margin-bottom: 14px; }
.bs-grid { columns: 2; column-gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .bs-grid { columns: 3; column-gap: 18px; } }
@media (min-width: 1100px) { .bs-grid { columns: 4; } }
.bs-cell { break-inside: avoid; margin-bottom: 18px; border-radius: 0; overflow: hidden; background: #e7e0d7; }
.bs-cell img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--x-ease); }
.bs-cell:hover img { transform: scale(1.04); }
.bs-grid { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { .bs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .bs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: 48px; } .bs-cell:nth-child(5n+2), .bs-cell:nth-child(5n+4) { margin-top: 48px; margin-bottom: -48px; } }
.bs-cell { margin-bottom: 0; }
/* brand story: full-bleed parallax bands */
.bs-band { padding: clamp(64px, 7vw, 120px) 0 clamp(20px, 2.4vw, 40px); }
.bs-band__head { margin-bottom: clamp(24px, 3vw, 44px); } .bs-band__head .x-h2 { margin: 12px 0 0; }
.bs-band__frame { position: relative; height: clamp(360px, 78vh, 820px); overflow: hidden; }
.bs-band__frame img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.bs--split.bs--img .bs-fig img[src*="b-post"] { max-width: 760px; margin-inline: auto; }
/* brand story: logo suite bento */
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(28px, 3.4vw, 52px) 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .bl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .bl-tile--big { grid-column: span 2; grid-row: span 2; } }
.bl-tile { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; border: 1px solid rgba(24, 21, 20, 0.06); }
.bl-tile--big { grid-column: span 2; aspect-ratio: auto; min-height: 280px; }
.bl-tile img { display: block; width: 86%; height: auto; transition: transform 600ms var(--x-ease); }
.bl-tile--big img { width: 78%; }
.bl-tile--mark img { width: 92%; } .bl-tile--stack img { width: 104%; }
.bl-tile:hover img { transform: scale(1.05); }
.bl-cap { position: absolute; left: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; color: rgba(245, 239, 227, 0.78); font: 500 0.64rem/1.35 var(--x-mono); letter-spacing: 0.02em; }
.bl-cap b { font-weight: 600; color: #f5efe3; }
.bl-tile.is-light .bl-cap { color: rgba(24, 21, 20, 0.55); } .bl-tile.is-light .bl-cap b { color: #181514; }
.bl-tile--mark img { width: 34%; } .bl-tile--stack img { width: 44%; } .bl-tile { padding-bottom: 18px; }
.bs-band--bare { padding: clamp(40px, 5vw, 80px) 0; } .bs-band__frame--full { height: 100vh; height: 100svh; max-height: 1000px; }
.bs-band__frame--full { height: auto; aspect-ratio: 1672 / 941; max-height: 100vh; max-height: 100svh; } .bs-band__frame--full img { top: -8%; height: 116%; }
/* brand story pages: more breathing room */
.bs.x-sec { padding: clamp(96px, 10vw, 180px) 0; }
.bs-head { row-gap: 20px; }
.bs-head .x-label { margin-bottom: 8px; }
.bs-fig, .bs-pal, .bs-type, .bl-grid { margin-top: clamp(44px, 5vw, 88px) !important; }
.bs--full { padding: clamp(48px, 5vw, 96px) 0; }
.bs-band--bare { padding: clamp(64px, 7vw, 128px) 0; }
.bl-grid { gap: 20px; } @media (min-width: 900px) { .bl-grid { gap: 24px; } }
.bs-pal, .bs-type { gap: 20px; }
.cs-res--compact { padding-top: calc(clamp(80px, 10vw, 180px) + clamp(80px, 8vw, 140px)); padding-bottom: clamp(48px, 5vw, 96px); }
.cs-hero:has(+ .cs-res--compact) .cs-hero__lead, .cs-hero__lead { margin-top: clamp(26px, 3vw, 40px); }
.cs-did { padding-top: clamp(96px, 10vw, 180px); padding-bottom: clamp(112px, 12vw, 200px); }
/* brand story: the mark, three equal tiles */
.bm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: clamp(44px, 5vw, 88px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .bm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.bm-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 12% 12% 18%; border-radius: 0; border: 1px solid rgba(24, 21, 20, 0.07); }
.bm-tile img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms var(--x-ease); }
.bm-tile--mark img { width: 82%; } .bm-tile--seal img { width: 92%; }
.bm-tile:hover img { transform: scale(1.04); }
.bm-tile .bl-cap { color: rgba(24, 21, 20, 0.55); } .bm-tile .bl-cap b { color: #181514; }
.bm-tile { overflow: hidden; grid-template-rows: minmax(0, 1fr); } .bm-tile img { min-height: 0; max-height: 100%; } .bm-tile--stack img { width: 78%; }
/* app story pages (Link Healthcare): flat design boards, lists, three-app cards */
.bs-fig--flat { padding: clamp(20px, 3.4vw, 56px); background: #e6f0ef; border: 1px solid rgba(0, 101, 96, 0.08); }
.bs-fig--flat img { border-radius: 0; }
.bs-ul { display: grid; gap: 10px; max-width: 58ch; margin: 0 0 18px; padding: 0; list-style: none; }
.bs-ul li { position: relative; padding-left: 24px; color: var(--x-soft); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); line-height: 1.6; }
.bs-ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 2px; background: var(--pj, #006560); }
.bs-p b, .bs-ul b { color: var(--x-ink, #181514); font-weight: 600; }
.bt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: clamp(44px, 5vw, 88px) 0 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .bt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.bt-card { display: grid; gap: 24px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: 0; background: #10292a; color: #e6f0ef; }
.bt-card b { font: var(--heading-weight) clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem)/1 var(--font-heading); letter-spacing: -0.04em; color: #5fc2b0; }
.bt-card dl { display: grid; gap: 16px; margin: 0; }
.bt-card dl div { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(230, 240, 239, 0.14); }
.bt-card dt { font-size: 0.68rem; color: rgba(230, 240, 239, 0.6); } .bt-card dd { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.bs-story .bs-fig--flat { background: color-mix(in srgb, var(--pj, #006560) 12%, #fff); border-color: color-mix(in srgb, var(--pj, #006560) 14%, transparent); }
.bs-story .bs-fig--bare { padding: 0; background: none; border: 0; }
.bs-story .bs-fig--bare img { border-radius: 0; }
.xw__shot--fit { background: none; } .xw__shot--fit img { object-fit: contain; }
.xw__shot--lh { background: linear-gradient(rgb(7, 81, 79), rgb(62, 126, 124)); }
/* Pleat: the self-running loop */
.lp { background: var(--pj-bg); color: #f5efe3; padding: clamp(96px, 10vw, 180px) 0; overflow: hidden; }
.lp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
@media (min-width: 1100px) { .lp__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.lp__copy .x-h2 { margin: 14px 0 22px; color: #f5efe3; }
.lp__copy > p { max-width: 46ch; margin: 0; color: rgba(245, 239, 227, 0.72); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.65; }
.lp__out { display: grid; gap: 8px; max-width: 46ch; margin-top: clamp(32px, 4vw, 52px); padding: 22px 24px; border: 1px dashed rgba(245, 239, 227, 0.28); border-radius: 0; }
.lp__out .x-mono { font-size: 0.68rem; color: var(--pj); } .lp__out p { margin: 0; color: rgba(245, 239, 227, 0.78); line-height: 1.55; } .lp__out b { color: #f5efe3; font-weight: 600; }
.lp__ring { position: relative; width: min(100%, 660px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.lp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp__svg circle { fill: none; stroke: color-mix(in srgb, var(--pj) 55%, transparent); stroke-width: 0.35; stroke-dasharray: 0.006 0.012; }
.lp__spin { position: absolute; inset: 0; pointer-events: none; }
.lp__spin i { position: absolute; left: 50%; top: 12.5%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pj); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pj) 25%, transparent), 0 0 28px var(--pj); }
.lp__core { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 6px; width: 40cqw; margin: 0; text-align: center; transform: translate(-50%, -50%); }
.lp__core b { font: var(--heading-weight) clamp(4rem, 16cqw, 7.5rem)/0.9 var(--font-heading); letter-spacing: -0.05em; color: var(--pj); }
.lp__core span { font: 500 0.72rem/1.4 var(--x-mono); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(245, 239, 227, 0.7); }
.lp__nodes { margin: 0; padding: 0; list-style: none; }
.lp__anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(37.5cqw) rotate(calc(-1 * var(--a))); }
.lp__c { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.lp__node { display: grid; gap: 4px; width: clamp(150px, 29cqw, 196px); padding: 14px 16px; border-radius: 0; background: color-mix(in srgb, var(--pj-bg) 82%, #000); border: 1px solid rgba(245, 239, 227, 0.14); transition: background 400ms var(--x-ease), border-color 400ms var(--x-ease), box-shadow 400ms var(--x-ease); }
.lp__node b { font-size: 0.98rem; line-height: 1.25; font-weight: 600; } .lp__d { font-size: 0.8rem; line-height: 1.4; color: rgba(245, 239, 227, 0.62); }
.lp__no { font-size: 0.64rem; color: rgba(245, 239, 227, 0.5); }
.lp__who { justify-self: start; margin-top: 6px; padding: 3px 8px; border-radius: 0; font-size: 0.62rem; color: var(--pj); border: 1px solid color-mix(in srgb, var(--pj) 45%, transparent); }
.lp__node.is-on { background: color-mix(in srgb, var(--pj) 18%, var(--pj-bg)); border-color: var(--pj); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pj) 16%, transparent); }
@media (max-width: 759px) {
  .lp__ring { aspect-ratio: auto; container-type: normal; }
  .lp__svg, .lp__spin { display: none; }
  .lp__core { position: static; width: auto; margin: 0 0 28px; transform: none; justify-items: start; text-align: left; }
  .lp__nodes { display: grid; gap: 12px; padding-left: 22px; border-left: 2px dashed color-mix(in srgb, var(--pj) 50%, transparent); }
  .lp__anchor, .lp__c { position: static; width: auto; height: auto; transform: none; }
  .lp__node { width: auto; }
}
/* story: two images side by side */
.bs-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .bs-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.bs-fig--pair { margin: 0 !important; } .bs-fig--pair img { width: 100%; height: 100%; object-fit: cover; }
.bs--full .bs-pair { margin-top: 0; }
/* story: 8-column image with 4-column copy */
.bs-side__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.bs-side .bs-side__fig { margin: 0 !important; }
.bs-side__copy .x-h2 { margin: 12px 0 20px; } .bs-side__copy .bs-p p { max-width: 40ch; }
@media (min-width: 960px) {
  .bs-side__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 40px); }
  .bs-side__fig { grid-column: 1 / span 8; grid-row: 1; } .bs-side__copy { grid-column: 9 / span 4; grid-row: 1; }
  .bs-side--rev .bs-side__fig { grid-column: 5 / span 8; } .bs-side--rev .bs-side__copy { grid-column: 1 / span 4; }
}
.bs-side__copy .bs-p { grid-column: auto; grid-row: auto; }
@media (min-width: 760px) { .bs-pair[style*="--cols"] { grid-template-columns: var(--cols); align-items: stretch; } }
.bs-fig--nat { display: grid; place-items: center; } .bs-fig--nat img { height: auto; object-fit: contain; }
.bm-tile--icon img { width: 70%; filter: drop-shadow(0 18px 30px rgba(37, 37, 37, 0.14)); }
/* logo tiles that carry their own ground (2 x 2), and four-colour palettes */
.bl-grid:has(.bl-tile--wide) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .bl-grid:has(.bl-tile--wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-tile--wide { aspect-ratio: 521 / 256; padding: 0; }
.bl-tile--wide img { width: 100% !important; height: 100%; object-fit: cover; }
@media (min-width: 800px) { .bs-pal:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* story images: no panel or border around images */
.bs-story .bs-fig--flat, .bs-fig--flat { padding: 0; background: none !important; border: 0 !important; }
.bs-fig--flat img { border-radius: 0; }
.bs-fig--nat img { border-radius: 0; }
@media (min-width: 900px) { .bs-type:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* logo tiles, three across, logo sized to leave room for the caption */
@media (min-width: 760px) { .bl-grid:has(.bl-tile--trio) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-tile--trio { aspect-ratio: 4 / 3; padding: 8% 10% 22%; }
.bl-tile--trio img { width: 62% !important; height: auto; max-height: 100%; object-fit: contain; }
.bl-tile--trio .bl-cap { left: 22px; bottom: 20px; }
/* Livyana: logo boards shown smaller, centred */
.bs-fig:has(img[src*="lv-concept"]) img, .bs-fig:has(img[src*="lv-variations"]) img { max-width: 620px; margin-inline: auto; }
.bs-pair:has(img[src*="lv-marks"]) { max-width: 980px; margin-inline: auto; align-items: center; }
.bs-pair:has(img[src*="lv-marks"]) img[src*="lv-construct"] { max-width: 300px; margin-inline: auto; }
.bs-pair:has(img[src*="lv-marks"]) { max-width: 1100px; column-gap: clamp(48px, 7vw, 120px); }
/* breathing room above the closing CTA panel on every page */
.x-cta { padding-top: clamp(64px, 7vw, 120px) !important; }
@media (min-width: 760px) { .bs-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.db__cover--logo img[style*="contain"] { padding: 14% 18%; }
.db__cover--logo { position: relative; } .db__cover--logo img { position: absolute; inset: 0; width: 100%; height: 100% !important; box-sizing: border-box; }
/* one button style site-wide: dark glass, hairline coral border, top highlight, arrow after the label */
.x-btn, .x-btn--dark, .x-btn--light, .x-btn--coral { position: relative; gap: 12px; min-height: 0; padding: 16px 26px; border-radius: 0; background: #1c1817; border: 1px solid rgba(236, 105, 74, 0.43); color: var(--x-paper); font-weight: 500; justify-content: center; transition: background-color 250ms var(--x-ease), border-color 250ms var(--x-ease); }
.x-btn::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 240, 234, 0.6), transparent); pointer-events: none; }
.x-btn:hover, .x-btn--dark:hover, .x-btn--light:hover, .x-btn--coral:hover { background: #2a2422; border-color: rgba(236, 97, 64, 0.7); }
.x-btn--lg { padding: 18px 30px; font-size: 1rem; }
.x-btn .x-btn__icon, .x-btn--coral .x-btn__icon, .x-btn--lg .x-btn__icon { order: 2; width: auto; height: auto; background: none; color: currentColor; border-radius: 0; }
.x-btn:hover .x-btn__icon { transform: translateX(4px); }
.xh__cta, .xh.is-dark .xh__cta { padding: 12px 20px; background: #1c1817; color: var(--x-paper); }
.xh__cta .x-btn__icon { width: auto; height: auto; }
.x-fill__sub { max-width: 56ch; margin: clamp(22px, 2.4vw, 34px) 0 0; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); line-height: 1.6; color: var(--x-soft); }
.x-tile--craft { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: #1c1817; color: var(--x-paper); position: relative; overflow: hidden; }
.x-tile--craft::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, rgba(236,97,64,.38), transparent 70%); pointer-events: none; }
.x-craft__badge { width: 96px; height: 96px; fill: none; stroke: rgba(244,240,234,.7); stroke-width: 1.4; position: relative; }
.x-craft__badge .a { stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.x-craft__t { position: relative; margin: 0; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.25 var(--font-heading); letter-spacing: -.02em; }
.x-tile--craft { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(24px, 3vw, 48px); padding: clamp(28px, 3vw, 44px); }
.x-craft__badge { flex: none; }
.x-tile--craft { display: flex !important; flex-direction: row !important; align-items: center !important; min-height: 0; }
.x-tile--craft > * { margin: 0 !important; position: relative; }
.x-craft__badge { width: 88px; height: 88px; }
.x-tile--craft.x-tile--quote { grid-column: auto; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between; border: 0; background: #1c1817; color: var(--x-paper); }
@media (min-width: 1100px) { .x-tile--craft.x-tile--quote { grid-column: span 5; } }
.x-tile--craft.x-tile--quote .x-craft__badge { width: 110px; height: 110px; }
.x-tile--craft.x-tile--quote .x-craft__t { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.03em; }
.x-tile--craft.x-tile--quote { padding: clamp(32px, 3vw, 44px) !important; }
.x-tile--craft.x-tile--quote .x-craft__badge { display: block; width: 72px; height: 72px; margin: 0 0 0 -4px !important; }
/* work reel: a looping background video that grows as the section scrolls up (same mechanic as halo-lab.com) */
.x-reel { background: var(--x-paper); padding: clamp(40px, 6vw, 96px) 0; }
.x-reel__box { width: 90%; max-width: 1600px; margin-inline: auto; }
.x-reel__frame { position: relative; width: 50%; height: 20rem; margin-inline: auto; overflow: hidden; background: #120d0c; border-radius: 0; }
.x-reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .x-reel__frame { width: 70%; height: 14rem; } }
.x-reel.is-static .x-reel__frame { width: 100%; height: 42rem; max-height: 70vh; }
/* testimonial arrows */
.xq { position: relative; }
.xq__arrow { position: absolute; top: clamp(20px, 3vw, 44px); z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 0; background: #1c1817; border: 1px solid rgba(236, 105, 74, .43); color: var(--x-paper); cursor: pointer; transition: background-color 250ms var(--x-ease), border-color 250ms var(--x-ease), transform 250ms var(--x-ease); }
.xq__arrow svg { width: 20px; height: 20px; }
.xq__arrow:hover { background: #2a2422; border-color: rgba(236, 97, 64, .75); }
.xq__arrow--prev { left: clamp(0px, 4vw, 72px); } .xq__arrow--next { right: clamp(0px, 4vw, 72px); }
.xq__arrow--prev:hover { transform: translateX(-3px); } .xq__arrow--next:hover { transform: translateX(3px); }
@media (max-width: 700px) { .xq__arrow { top: auto; bottom: 0; width: 46px; height: 46px; } .xq__arrow--prev { left: 0; } .xq__arrow--next { right: 0; } }
.xq__nav { display: flex; justify-content: center; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.xq__arrow, .xq__arrow--prev, .xq__arrow--next { position: static; top: auto; bottom: auto; left: auto; right: auto; }
@media (max-width: 700px) { .xq__arrow { width: 52px; height: 52px; } }
/* more air between the services heading and the cards */
.sb-head { margin-bottom: clamp(104px, 11vw, 200px); padding-bottom: clamp(16px, 2vw, 32px); }
.x-svc.is-pan .sb-head { margin-bottom: clamp(56px, 10vh, 112px); padding-bottom: 0; }
/* no arrow marks on buttons or text links */
.x-btn .x-btn__icon, .x-link .bb-icon, .x-link > svg, .x-cta__btn .x-btn__icon, .wy__txt .x-btn__icon { display: none !important; }
.x-btn, .x-btn--lg { gap: 0; }
/* service cards: no corner arrow circle */
.sb-tile__go, .sb-tile__top { display: none !important; }
/* testimonial portraits: the chosen one is always fully opaque and in colour, the rest sit back */
.xq__face.is-on { opacity: 1 !important; filter: none !important; }
.xq__face:not(.is-on) { opacity: .5; }
.xq__face.is-on .xq__img, .xq__face.is-on .xq__img img { opacity: 1; filter: none; }

/* Consistency: one rectangular button language everywhere (x-btn and bb-btn) */
.bb-btn, .x-btn { border-radius: 0; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; line-height: 1; min-height: 0; padding: 16px 26px; letter-spacing: 0; }
.bb-btn--primary, .bb-btn--accent { background: #1c1817; color: var(--x-paper, #F4F0EA); border: 1px solid rgba(236, 105, 74, 0.43); }
.bb-btn--primary:hover, .bb-btn--accent:hover { background: #2a2422; color: var(--x-paper, #F4F0EA); border-color: rgba(236, 97, 64, 0.7); }
.bb-btn--outline { background: transparent; color: var(--x-ink, #252525); border: 1px solid currentColor; }
.bb-btn--outline:hover { background: transparent; box-shadow: none; opacity: 0.7; }
.bb-btn--primary::before, .bb-btn--accent::before { display: none; }
input, select, textarea, button, .xf2__chip, .sb-chip, .wk__chip { border-radius: 0; }

/* Work page: asymmetric masonry, quiet captions, hover on images */
.wk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 7vw, 112px) 0; align-items: start; }
@media (min-width: 900px) {
  .wk__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 72px); row-gap: clamp(72px, 8vw, 136px); }
  .wk__card:nth-child(4n+1) { grid-column: 1 / span 7; }
  .wk__card:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: clamp(56px, 9vw, 160px); }
  .wk__card:nth-child(4n+3) { grid-column: 2 / span 5; }
  .wk__card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 112px); }
  .wk__card:nth-child(4n+1) .wk__img { aspect-ratio: 16 / 11; }
  .wk__card:nth-child(4n+2) .wk__img { aspect-ratio: 4 / 3; }
  .wk__card:nth-child(4n+3) .wk__img { aspect-ratio: 5 / 4; }
  .wk__card:nth-child(4n+4) .wk__img { aspect-ratio: 4 / 3; }
}
.wk__card { display: flex; flex-direction: column; }
.wk__link { display: flex; flex-direction: column; gap: 0; }
.wk__img { order: 0; position: relative; }
.wk__img::after { content: "View project"; position: absolute; left: 0; bottom: 0; padding: 12px 18px; background: var(--x-paper, #F4F0EA); color: var(--x-ink, #252525); font: 500 0.78rem/1 var(--x-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; transform: translateY(101%); transition: transform 450ms var(--x-ease, ease); }
.wk__link:hover .wk__img::after, .wk__link:focus-visible .wk__img::after { transform: translateY(0); }
.wk__img img { transition: transform 1100ms var(--x-ease, ease), filter 600ms var(--x-ease, ease); }
.wk__link:hover .wk__img img { transform: scale(1.06); }
.wk__client { order: 1; margin-top: 22px; font: 500 0.72rem/1.4 var(--x-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-soft); }
.wk__top { order: 2; margin-top: 10px; }
.wk__name { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem); letter-spacing: -0.03em; }
.wk__go { transform: none; } .wk__link:hover .wk__go { transform: translateX(4px); color: inherit; }
.wk__res { order: 3; display: flex; flex-wrap: nowrap; gap: 8px 28px; margin: 18px 0 0; padding: 0; border-top: 0; }
.wk__res li { flex-direction: row; align-items: baseline; gap: 8px; max-width: none; }
.wk__res li:nth-child(n+3) { display: none; }
.wk__res b { white-space: nowrap; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--x-ink); }
.wk__res span { font-size: 0.8rem; color: var(--x-soft); }
.wk__tags { margin: 14px 0 0; gap: 0 14px; }
.wk__tags a { padding: 0; border: 0; background: none; font-size: 0.78rem; color: var(--x-soft); text-decoration: none; }
.wk__tags a:hover { color: var(--x-ink); text-decoration: underline; border: 0; }
.wk__card[hidden] { display: none; }
@media (max-width: 899px) { .wk__res { flex-wrap: wrap; } .wk__card .wk__img { aspect-ratio: 4 / 3; } }

/* Work page: underline tabs, second image on hover, numbers set apart from titles */
.wk__bar { display: block; margin-bottom: clamp(56px, 6vw, 96px); border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.wk__chips { gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.wk__chip, .wk__chip.is-on { position: relative; padding: 22px 0 20px; border: 0; background: none; color: var(--x-soft); font: 500 1rem/1 var(--font-body); gap: 6px; }
.wk__chip:hover { color: var(--x-ink); border: 0; }
.wk__chip.is-on { color: var(--x-ink); background: none; }
.wk__chip.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--coral); }
.wk__chip span, .wk__chip.is-on span { min-width: 0; height: auto; padding: 0; background: none; color: inherit; opacity: 0.55; font: 500 0.7rem/1 var(--x-mono, monospace); align-self: flex-start; }
.wk__chip.is-on span { background: none; color: inherit; }
.wk__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--x-ease, ease), transform 1100ms var(--x-ease, ease); }
.wk__link:hover .wk__alt, .wk__link:focus-visible .wk__alt { opacity: 1; transform: scale(1); }
.wk__link:hover .wk__img .wk__alt + *, .wk__link:hover .wk__img img:not(.wk__alt) { transform: none; }
.wk__res { gap: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--x-line); }
.wk__res li { flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--x-line); }
.wk__res li:last-child, .wk__res li:nth-child(2) { border-right: 0; margin-right: 0; padding-right: 0; }
.wk__res b { font: 700 clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem)/1 var(--font-heading); letter-spacing: -0.03em; color: var(--coral-deep, var(--coral)); font-variant-numeric: tabular-nums; }
.wk__res span { font-size: 0.78rem; line-height: 1.35; max-width: 22ch; }
.wk__name { font-weight: 500; }
.wk__img .x-mono { display: none; }
.wk__res b { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem); }

/* Work cards: clean — tags sit on the image, one line, name; no stats, no arrow */
.wk__card { position: relative; }
.wk__res, .wk__go, .wk__img::after { display: none !important; }
.wk__client { order: 1; margin-top: 22px; font: 400 0.95rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--x-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk__top { margin-top: 6px; }
.wk__tags { position: absolute; top: clamp(14px, 1.6vw, 22px); left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); z-index: 3; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; pointer-events: none; }
.wk__tags li { pointer-events: auto; }
.wk__tags a { display: inline-block; padding: 9px 14px; background: var(--x-paper, #F4F0EA); color: var(--x-ink, #252525); border: 0; font: 500 0.78rem/1 var(--font-body); letter-spacing: 0; text-decoration: none; transition: background 250ms ease, color 250ms ease; }
.wk__tags a:hover { background: var(--x-ink, #252525); color: var(--x-paper, #F4F0EA); text-decoration: none; }

/* Work cards: tags back under the name, smaller */
.wk__tags { position: static; order: 4; margin: 16px 0 0; gap: 8px; pointer-events: auto; }
.wk__tags a { padding: 6px 10px; background: transparent; color: var(--x-soft); border: 1px solid var(--x-line); font: 500 0.7rem/1 var(--font-body); }
.wk__tags a:hover { background: var(--x-ink, #252525); color: var(--x-paper, #F4F0EA); border-color: var(--x-ink, #252525); }
.wk__tags { gap: 4px 16px; }
.wk__tags a, .wk__tags a:hover { padding: 0; border: 0; background: none; color: var(--x-soft); font-size: 0.78rem; }
.wk__tags a:hover { color: var(--x-ink, #252525); text-decoration: underline; text-underline-offset: 3px; }

/* Scroll performance */
html { scroll-behavior: auto !important; }
.x-reel.is-clip .x-reel__frame { width: 100%; height: 42rem; will-change: clip-path; }
@media (max-width: 700px) { .x-reel.is-clip .x-reel__frame { height: 26rem; } }
.xh__nav > ul, .pg-jump ul { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(244, 240, 234, 0.96); }
.sb-grid, .wy__card, .sb-tile { will-change: transform; }
.sb-tile { backface-visibility: hidden; }
.sb-prev { contain: layout style paint; }
.wy__bars { contain: layout style paint; }