:root {
  color-scheme: light;
  --white: #fff;
  --ink: #241b2b;
  --muted: #586174;
  --soft: #f6f3f7;
  --pink: #ff0054;
  --action: #b80c49;
  --wine: #490c2b;
  --blush: #fff0f5;
  --line: #dce0e8;
  --container: 1180px;
  --header-height: 88px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; font-family: "Manrope", system-ui, sans-serif; color: var(--ink); background: var(--white); font-size: 1rem; line-height: 1.65; }
body, button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
button { font: inherit; }
button, a { touch-action: manipulation; }
button:not(:disabled), summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
main:focus { outline: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
h1, h2 { font-weight: 800; letter-spacing: -.055em; line-height: 1.09; }
h1 { font-size: clamp(2.125rem, 5.2vw, 4.5rem); max-width: 12ch; }
h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); }
h3 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.025em; }
p { text-wrap: pretty; }
p + p { margin-top: 18px; }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.section { padding-block: 112px; }
.anchor-alias { display: block; scroll-margin-top: var(--header-height); }
.skip-link { position: fixed; top: 12px; left: 16px; padding: 12px 20px; background: var(--ink); color: var(--white); z-index: 100; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid #edf0f4; }
.nav-shell { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: block; flex: 0 0 auto; }
.brand img { width: 172px; }
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav > a:not(.button) { text-decoration: none; padding-block: 12px; font-size: .875rem; font-weight: 600; }
.main-nav > a:not(.button):hover { color: var(--action); text-decoration: underline; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; padding: 14px 24px; border: 2px solid transparent; border-radius: 8px; color: var(--white); background: var(--action); font-size: .9375rem; font-weight: 700; text-decoration: none; line-height: 1.5; transition: background-color .18s ease, border-color .18s ease; }
.button:hover { background: var(--wine); }
.button:active { background: #721238; }
.button-small { min-height: 46px; padding: 10px 18px; font-size: .8125rem; }
.button span { font-size: 1.2em; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-weight: 700; font-size: .9rem; color: var(--action); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link span { font-size: 1.25em; }
.menu-toggle { align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: .875rem; font-weight: 700; }
.menu-symbol { position: relative; width: 18px; height: 14px; border-top: 2px solid; border-bottom: 2px solid; }
.menu-symbol::before { content: ""; position: absolute; width: 18px; top: 4px; border-top: 2px solid; }
/* Art direction: everyday work becomes a connected process. */
.hero { padding-top: 64px; background: var(--action); color: var(--white); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.hero h1 { font-size: clamp(2.5rem, 5.1vw, 4.625rem); max-width: 12ch; line-height: 1.02; letter-spacing: -.065em; }
.hero-description { margin-top: 28px; color: #fff0f5; font-size: 1.125rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.hero .button { background: var(--white); color: #8c0938; }
.hero .button:hover { background: #ffd6e5; }
.hero .text-link { color: var(--white); }
.hero a:focus-visible, .flow-studio button:focus-visible { outline-color: #fff; }
.hero-note { margin-top: 20px; font-size: .8125rem; max-width: 44ch; color: #ffe0eb; }
.hero-footnote { display: flex; align-items: start; gap: 12px; margin-top: 48px; padding-block: 24px; border-top: 1px solid #d3658b; font-size: .8125rem; color: #ffe0eb; }
.accent-dot { width: 7px; height: 7px; flex: 0 0 auto; background: #ffc0d8; border-radius: 50%; margin-top: 9px; }
.flow-studio { position: relative; min-width: 0; padding: 24px; border-radius: 22px 22px 70px 22px; background: #490c2b; color: #fff; box-shadow: 0 24px 48px #68012b40; }
.studio-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.studio-wordmark { font-size: .8125rem; font-weight: 700; }
.studio-symbol { color: #ffc0d8; font-size: 1.5rem; }
.scene-switch { display: flex; gap: 4px; margin-top: 20px; padding: 4px; background: #641837; border-radius: 8px; }
.scene-switch button { flex: 1; min-width: 0; min-height: 44px; border: none; border-radius: 5px; padding: 8px 6px; background: transparent; color: #ffd6e5; font-size: .75rem; font-weight: 700; transition: background-color .2s ease; }
.scene-switch button:hover { background: #86244d; }
.scene-switch button[aria-pressed="true"] { color: #490c2b; background: #ffd6e5; }
.studio-scene { position: relative; padding-top: 138px; padding-bottom: 48px; }
.studio-connections { position: absolute; inset: 0; height: 100%; width: 100%; stroke: #b9547c; stroke-width: 1.2; }
.studio-connections circle:nth-of-type(1), .studio-connections circle:nth-of-type(2) { stroke: #782547; }
.incoming-slip { position: absolute; top: 26px; left: 0; width: 81%; padding: 16px; border-radius: 10px; display: flex; align-items: center; gap: 12px; background: #ffe2ed; color: #490c2b; transform: rotate(-5deg); box-shadow: 8px 12px 0 #2b051c50; }
.slip-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #fff; }
.slip-icon svg { width: 28px; stroke: #b80c49; stroke-width: 1.7; }
.incoming-slip div { flex: 1; min-width: 0; }
.incoming-slip div > span { display: block; font-size: .625rem; }
.incoming-slip strong { display: block; font-size: .8125rem; line-height: 1.45; margin-top: 4px; }
.slip-dot { width: 8px; height: 8px; background: #b80c49; border-radius: 50%; }
.routing-core { position: absolute; right: 1%; top: 72px; width: 88px; height: 88px; padding: 10px; border-radius: 23px; background: #ef9bbe; transform: rotate(9deg); box-shadow: 6px 7px 0 #31071e; }
.routing-core svg { width: 100%; height: 100%; stroke: #490c2b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.workflow-window { position: relative; margin-left: 9%; width: 91%; background: #fff; border-radius: 12px; overflow: hidden; color: var(--ink); box-shadow: -14px 18px 0 #31071e70; }
.window-toolbar { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 12px 16px; background: #f3eaf0; color: #755466; font-size: .625rem; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 5px; height: 5px; background: #a98c9a; border-radius: 50%; }
.window-body { padding: 18px; }
.window-title { display: flex; gap: 12px; align-items: center; }
.document-tile { width: 40px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; background: #fbe3ed; border-radius: 9px; }
.document-tile svg { width: 26px; stroke: #b80c49; stroke-width: 1.6; }
.window-title div > span { font-size: .625rem; color: #755466; display: block; }
.window-title strong { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.4; }
.studio-steps { list-style: none; padding: 0; margin: 18px 0 16px; display: grid; gap: 14px; }
.studio-steps li { display: flex; align-items: start; gap: 12px; }
.studio-steps li > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e6f2ef; color: #356357; font-size: .75rem; font-weight: 700; }
.studio-steps li:nth-child(2) > span { background: #fbe3ed; color: #b80c49; }
.studio-steps li:nth-child(3) > span { background: #eeedf3; color: #655b76; }
.studio-steps strong { font-size: .75rem; display: block; line-height: 1.4; }
.studio-steps small { font-size: .625rem; display: block; color: #635766; margin-top: 3px; }
.window-bottom { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid #eadfe5; color: #635766; font-size: .5625rem; }
.status-point { width: 6px; height: 6px; flex: 0 0 auto; background: #447565; border-radius: 50%; }
.studio-note { position: absolute; right: 15px; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 10px; background: #d6eae2; color: #254d41; transform: rotate(5deg); box-shadow: 5px 6px 0 #31071e50; }
.studio-note svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; }
.studio-note span { font-size: .6875rem; line-height: 1.4; font-weight: 700; }
.flow-studio figcaption { max-width: 42ch; color: #f1b5cd; font-size: .625rem; margin-top: 20px; padding-right: 12px; }
.scene-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.partner-band { background: var(--white); }
.partner-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-block: 12px; }
.partner-logo { width: 230px; height: auto; }
.partner-layout p { margin: 0; }
.partner-layout p strong { display: block; color: var(--ink); font-size: 1.125rem; letter-spacing: -.025em; }
.partner-layout p span { display: block; max-width: 47ch; margin-top: 8px; color: var(--muted); font-size: .875rem; }
.partner-layout .text-link { font-size: .8125rem; }
.ecosystem-band { background: #fbe9f0; }
.ecosystem-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2.3fr); align-items: center; gap: 40px; padding-block: 40px; }
.ecosystem-intro h2 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.035em; color: #490c2b; }
.ecosystem-intro p { max-width: 27ch; font-size: .8125rem; color: #755466; margin-top: 12px; }
.ecosystem-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ecosystem-stage { position: relative; min-width: 0; }
.ecosystem-stage h3 { color: #755466; font-size: .6875rem; letter-spacing: 0; font-weight: 600; margin-bottom: 18px; }
.ecosystem-stage ul { list-style: none; display: grid; gap: 16px; padding: 0; margin: 0; }
.ecosystem-stage li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .75rem; font-weight: 700; line-height: 1.4; color: #490c2b; }
.ecosystem-stage img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.ecosystem-connector { position: absolute; right: -24px; top: 67px; color: #98677e; font-size: 1.125rem; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 100px; align-items: end; margin-bottom: 48px; }
.section-intro > p { color: var(--muted); max-width: 43ch; }
.use-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.solution-art { width: 100%; border-radius: 12px; margin-bottom: 28px; }
.use-case { display: flex; flex-direction: column; align-items: start; padding: 0; border-top: none; }
.use-case-featured { border-top-color: var(--pink); }
.topic { display: block; color: var(--action); font-size: .8125rem; margin-bottom: 16px; font-weight: 700; }
.case-heading { min-height: 105px; }
.use-case > p { color: var(--muted); margin-top: 18px; }
.case-outcome { margin-top: 26px; margin-bottom: 24px; }
.outcome-label { font-size: .75rem; font-weight: 700; display: block; margin-bottom: 8px; }
.case-outcome p { font-size: .9375rem; }
.use-case .text-link { margin-top: auto; }
.automation-signals { margin-top: 48px; padding: 32px; border-radius: 12px; background: #e6f2ef; border-left: 5px solid #598574; }
.automation-signals h3 { margin-bottom: 14px; }
.automation-signals p { color: var(--muted); max-width: 85ch; font-size: .9375rem; }
.automation-signals .text-link { margin-top: 16px; }
.services { background: #f6eaf0; }
.engagement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.engagement-offer { position: relative; display: flex; flex-direction: column; align-items: start; padding: 32px; border-radius: 16px; background: var(--white); }
.offer-art { width: 105px; height: 100px; stroke: #b80c49; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 24px; }
.engagement-offer[data-offer="labs"] { background: #ffd6e5; }
.engagement-offer[data-offer="capacity"] { background: #e0ece9; }
.engagement-offer[data-offer="capacity"] .offer-art { stroke: #356357; }
.offer-origin { color: var(--action); font-size: .75rem; font-weight: 700; margin-bottom: 18px; }
.engagement-offer h3 { font-size: 1.5rem; letter-spacing: -.04em; margin-bottom: 18px; }
.engagement-offer > p:not(.offer-origin) { color: var(--muted); font-size: .9375rem; }
.engagement-offer ul { margin: 24px 0; padding-left: 18px; display: grid; gap: 12px; font-size: .875rem; }
.engagement-offer li { padding-left: 4px; }
.engagement-offer li::marker { color: var(--action); }
.engagement-offer .text-link { margin-top: auto; font-size: .8125rem; }
.capabilities-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.2fr); gap: 100px; margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.services-intro h3 { font-size: 1.625rem; max-width: 16ch; }
.services-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.2fr); gap: 100px; }
.services-intro h2 { max-width: 12ch; }
.services-intro > p { color: var(--muted); margin-top: 24px; }
.services-intro .text-link { margin-top: 24px; }
.service-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 32px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.service-row:first-child { padding-top: 0; }
.service-row:last-child { border-bottom: 0; padding-bottom: 0; }
.service-row h3 { font-size: 1.0625rem; }
.service-row p { color: var(--muted); font-size: .9375rem; }
.service-row .technology { color: var(--action); font-size: .75rem; margin-top: 12px; }
.section-context { font-size: .875rem; color: var(--action); font-weight: 700; margin-bottom: 16px; }
.method-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: method; }
.methodology { background: #490c2b; color: #fff; }
.methodology .section-context, .methodology .phase-name { color: #f7b4cf; }
.methodology .section-intro > p, .methodology .method-steps p, .methodology .method-scope p { color: #f0d4e2; }
.methodology .method-scope strong { color: #fff; }
.methodology .method-perspectives { background: #651d3e; }
.methodology .method-perspectives span { color: #f0d4e2; }
.methodology .method-steps li { border-top-color: #b85d85; }
.methodology .method-steps li::before { width: 52px; height: 52px; display: grid; place-items: center; margin-top: -53px; margin-bottom: 24px; border: 7px solid #490c2b; border-radius: 50%; background: #ffc0d8; color: #490c2b; font-size: .8125rem; }
.methodology .method-steps { margin-top: 64px; gap: 0; }
.methodology .method-steps li { padding-right: 24px; }
.method-perspectives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; padding: 28px; border-radius: 10px; background: var(--soft); }
.method-perspectives p { margin: 0; }
.method-perspectives strong { display: block; font-size: .875rem; }
.method-perspectives span { display: block; margin-top: 8px; color: var(--muted); font-size: .8125rem; }
.phase-name { display: block; font-size: .75rem; font-weight: 700; color: var(--action); margin-bottom: 14px; }
.method-scope { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.method-scope p { color: var(--muted); font-size: .875rem; margin: 0; }
.method-scope strong { color: var(--ink); }
.project-evidence { background: #fcf8fa; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.published-project { border: none; padding: 0; }
.project-art { margin-bottom: 28px; border-radius: 16px; overflow: hidden; background: #f1dce7; }
.project-art img, .project-art > svg { display: block; width: 100%; height: auto; }
.project-art-doc { background: #e4dff1; }
.published-project h3 { font-size: 1.5rem; margin-bottom: 20px; }
.published-project > p:not(.section-context) { color: var(--muted); font-size: .9375rem; }
.published-project .project-learning { font-size: .875rem; }
.published-project .text-link { margin-top: 18px; }
.published-note { color: var(--muted); font-size: .75rem; margin-top: 32px; }
.method-steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--pink); counter-increment: method; }
.method-steps li::before { content: counter(method, decimal-leading-zero); display: block; color: var(--action); font-size: .8125rem; font-weight: 800; margin-bottom: 26px; }
.step-duration { position: absolute; right: 0; top: 25px; color: var(--muted); font-size: .75rem; }
.method-steps h3 { margin-bottom: 16px; }
.method-steps p { color: var(--muted); font-size: .9375rem; }
.step-deliverable { display: block; margin-top: 24px; font-size: .75rem; font-weight: 700; }
.hr-example { background: var(--blush); }
.example-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; align-items: center; }
.example-copy h2 { max-width: 14ch; margin-bottom: 24px; }
.example-copy > p:not(.section-context) { color: var(--muted); }
.example-copy .text-link { margin-top: 24px; }
.example-conversation { padding: 32px; background: var(--white); border-radius: 16px; }
.example-conversation figcaption { font-size: .75rem; color: var(--muted); padding-bottom: 24px; }
.employee-question { padding: 20px 24px; background: var(--action); color: var(--white); border-radius: 12px 12px 0 12px; margin-left: 28px; }
.employee-question > span { font-size: .6875rem; }
.employee-question p { margin-top: 8px; font-weight: 700; font-size: 1.125rem; }
.assistant-response { padding-top: 28px; }
.response-label { font-size: .75rem; font-weight: 700; }
.assistant-response ol { padding: 0; margin: 20px 0 0; list-style: none; display: grid; gap: 18px; }
.assistant-response li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; font-size: .875rem; }
.assistant-response li strong { color: var(--action); }
.assistant-response li span { color: var(--muted); }
.example-note { color: var(--muted); font-size: .6875rem; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.business-cases { background: #f4e9f0; }
.business-cases .section-intro { margin-bottom: 24px; }
.cases-disclosure { max-width: 85ch; font-size: .8125rem; color: var(--muted); margin-bottom: 32px; }
.business-case { border-top: 1px solid #dfcbd3; border-radius: 0; }
.business-case:last-child { border-bottom: 1px solid #dfcbd3; }
.business-case[open] { box-shadow: 0 12px 40px #6e305412; background: var(--white); border-color: transparent; border-radius: 12px; margin-block: 12px; }
.business-case[open] + .business-case { border-top-color: transparent; }
.business-case summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; align-items: center; gap: 24px; padding: 26px 32px; list-style: none; border-radius: 10px; }
.business-case summary::-webkit-details-marker { display: none; }
.business-case summary:hover { background: #fbe4ed; }
.business-case[open] summary:hover { background: var(--soft); }
.case-area { color: var(--action); font-size: .8125rem; font-weight: 700; }
.case-summary-copy { min-width: 0; }
.case-summary-copy strong { display: block; font-size: 1.125rem; letter-spacing: -.025em; line-height: 1.4; }
.case-summary-copy > span { display: block; color: var(--muted); font-size: .8125rem; margin-top: 5px; }
.case-toggle { position: relative; display: block; width: 24px; height: 24px; color: var(--action); }
.case-toggle::before, .case-toggle::after { content: ""; position: absolute; background: currentColor; }
.case-toggle::before { width: 16px; height: 2px; left: 4px; top: 11px; }
.case-toggle::after { height: 16px; width: 2px; top: 4px; left: 11px; }
.business-case[open] .case-toggle::after { display: none; }
.business-case-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 16px 32px 40px; align-items: start; }
.business-case-content > * { min-width: 0; }
.business-case-copy h3 { font-size: 1.625rem; letter-spacing: -.04em; margin-bottom: 20px; }
.business-case-copy > p { color: var(--muted); font-size: .9375rem; }
.case-pilot { padding: 18px 20px; background: var(--soft); border-radius: 8px; margin-top: 24px; }
.case-pilot > strong { font-size: .8125rem; }
.case-pilot p { margin-top: 8px; color: var(--muted); font-size: .875rem; }
.business-case-copy .case-stack { margin-top: 20px; color: var(--action); font-size: .75rem; line-height: 1.8; }
.business-case-copy .text-link { margin-top: 12px; }
.business-case-content .example-conversation { border: 1px solid var(--line); }
.workflow-mockup { padding: 24px; background: #eef4f1; border-radius: 12px; border: 1px solid var(--line); }
.workflow-mockup figcaption { color: var(--muted); font-size: .75rem; padding-bottom: 24px; }
.mockup-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.mockup-app-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; background: var(--wine); color: var(--white); font-weight: 800; font-size: .875rem; }
.mockup-topline > div { flex: 1 1 130px; min-width: 0; }
.mockup-topline strong { font-size: .875rem; display: block; line-height: 1.4; }
.mockup-topline div > span { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; }
.mockup-status { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; color: var(--wine); background: #fbe4ed; font-size: .6875rem; font-weight: 700; max-width: 100%; }
.status-neutral { color: #35435a; background: #e5eaf2; }
.mockup-document, .mockup-excerpt { display: grid; gap: 10px; padding: 18px; background: var(--white); border-radius: 8px; }
.mockup-document > span:first-child, .mockup-excerpt > span { color: var(--muted); font-size: .6875rem; }
.mockup-document > strong { font-size: .9375rem; overflow-wrap: anywhere; }
.mockup-document .mockup-status { justify-self: start; }
.mockup-excerpt p { font-size: .875rem; }
.mockup-fields { margin: 20px 0 0; }
.mockup-fields > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--line); }
.mockup-fields dt { color: var(--muted); font-size: .75rem; }
.mockup-fields dd { font-size: .8125rem; font-weight: 600; margin: 0; }
.mockup-attention { color: var(--action); }
.mockup-event { padding: 16px; margin-top: 20px; border-radius: 8px; background: #eaeef4; color: #35435a; font-size: .75rem; }
.mockup-timeline { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.mockup-timeline li { border-left: 2px solid var(--line); padding: 0 0 20px 16px; }
.mockup-timeline li:last-child { padding-bottom: 0; }
.mockup-timeline li.current { border-left-color: var(--action); }
.mockup-timeline strong { font-size: .8125rem; display: block; }
.mockup-timeline span { color: var(--muted); display: block; margin-top: 4px; font-size: .75rem; }
.mockup-requests { list-style: none; padding: 0; margin: 0; }
.mockup-requests li { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.mockup-requests li > div { flex: 1 1 160px; min-width: 0; }
.mockup-requests strong { display: block; font-size: .8125rem; }
.mockup-requests div > span { display: block; color: var(--muted); font-size: .75rem; margin-top: 5px; }
.mockup-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.mockup-checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; }
.mockup-checklist strong { display: block; font-size: .875rem; }
.mockup-checklist div > span { display: block; color: var(--muted); font-size: .75rem; margin-top: 4px; }
.check-complete, .check-pending { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 5px; font-size: .875rem; }
.check-complete { color: var(--white); background: var(--action); }
.check-pending { border: 1px solid #7c8594; }
.mockup-data-flow { display: grid; gap: 8px; text-align: center; padding: 16px; background: var(--white); border-radius: 8px; font-size: .8125rem; }
.mockup-data-flow span[aria-hidden] { color: var(--action); }
.mockup-alert { margin-top: 20px; padding: 18px; border-left: 3px solid var(--action); background: var(--white); }
.mockup-alert strong { display: block; font-size: .875rem; }
.mockup-alert p { font-size: .8125rem; color: var(--muted); margin-top: 8px; margin-bottom: 14px; }
.case-connection { max-width: 850px; margin: 40px auto 0; text-align: left; }
.case-connection h3 { font-size: 1.375rem; margin-bottom: 16px; }
.case-connection p { color: var(--muted); }
.case-connection .text-link { margin-top: 16px; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 100px; }
.about-copy > p { color: var(--muted); }
.about-copy .about-lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.partnership { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.partnership h3 { font-size: 1.375rem; margin-bottom: 28px; }
.partnership-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.partnership-list strong { font-size: .875rem; display: block; }
.partnership-list span { display: block; color: var(--muted); font-size: .8125rem; margin-top: 8px; }
.contact { position: relative; padding-block: 96px; background: var(--action); color: var(--white); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: center; }
.contact-context { font-size: .875rem; margin-bottom: 20px; }
.contact h2 { max-width: 12ch; font-size: clamp(2.25rem, 4.5vw, 4rem); }
.contact h2 + p { max-width: 54ch; margin-top: 24px; color: #ffe4ef; }
.contact-actions { display: flex; align-items: start; flex-direction: column; gap: 16px; }
.button-white { background: var(--white); color: var(--wine); }
.button-white:hover { color: var(--white); background: transparent; border-color: var(--white); }
.button-white:focus-visible, .contact a:focus-visible { outline-color: var(--white); }
.contact-email { font-weight: 600; overflow-wrap: anywhere; }
.contact-actions > p { font-size: .6875rem; margin: 0; color: #ffe4ef; }
.site-footer { padding-block: 32px; }
.footer-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; }
.footer-grid > p { color: var(--muted); font-size: .8125rem; }
.footer-grid > p span { font-size: .75rem; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-grid nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; text-decoration: none; }
.footer-grid nav a:hover { color: var(--action); text-decoration: underline; }
.footer-grid .copyright { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); font-size: .6875rem; }
@media (max-width: 1100px) {
  .engagement-offer { padding: 24px; }
  .engagement-offer h3 { font-size: 1.375rem; }
  .capabilities-layout { gap: 56px; }
  .main-nav { gap: 20px; }
  .hero-grid { gap: 32px; }
  .flow-studio { padding: 20px; }
  .section-intro, .services-layout, .example-layout, .about-layout { gap: 56px; }
  .contact-layout { gap: 48px; }
  .footer-grid { gap: 20px 28px; }
}
@media (max-width: 900px) {
  .engagement-grid { grid-template-columns: minmax(0, 1fr); }
  .engagement-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
  .engagement-offer .offer-origin, .engagement-offer h3, .engagement-offer > p:not(.offer-origin) { grid-column: 1; }
  .engagement-offer ul { grid-column: 2; grid-row: 1 / 5; margin-top: 0; }
  .engagement-offer .text-link { grid-column: 1 / -1; justify-self: start; }
  .capabilities-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 40px; }
  .method-perspectives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-scope { gap: 28px; }
  .project-grid { gap: 36px; }
  .partnership-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --header-height: 80px; }
  .nav-shell { flex-wrap: wrap; gap: 0 20px; }
  .menu-toggle:not([hidden]) { display: inline-flex; }
  .main-nav { width: 100%; display: grid; gap: 4px; padding-block: 12px 24px; max-height: calc(100dvh - var(--header-height) - 16px); overflow-y: auto; }
  .main-nav > a:not(.button) { padding: 12px; }
  .main-nav .button { justify-self: start; margin-top: 8px; }
  .site-header { position: relative; }
  [data-enhanced-navigation] .site-header { position: sticky; }
  .hero { padding-top: 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-copy { max-width: 650px; }
  .hero h1 { max-width: 15ch; font-size: clamp(3rem, 7vw, 4rem); }
  .flow-studio { width: 100%; max-width: 560px; justify-self: end; }
  .partner-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 0 24px; }
  .partner-logo { width: 200px; grid-row: 1 / 3; }
  .partner-layout .text-link { grid-column: 2; justify-self: start; }
  .ecosystem-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ecosystem-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .ecosystem-intro p { margin-top: 0; }
  .engagement-offer .offer-art { grid-column: 1; }
  .engagement-offer ul { align-self: center; }
  .methodology .method-steps { gap: 48px 0; }
  h1 { font-size: clamp(2.125rem, 5.4vw, 3.5rem); }
  .hero-description { font-size: 1rem; }
  .process-figure { padding: 20px; }
  .process-before, .process-after { padding: 20px; }
  .process-flow strong { font-size: .8125rem; }
  .hero-footnote { margin-top: 48px; }
  .section { padding-block: 80px; }
  .section-intro { gap: 36px; }
  .use-cases { gap: 24px; }
  .use-case h3 { font-size: 1.15rem; }
  .case-heading { min-height: 100px; }
  .use-case > p, .case-outcome p { font-size: .875rem; }
  .services-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 40px; }
  .service-row { grid-template-columns: 1fr; gap: 12px; }
  .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .example-layout { gap: 36px; }
  .example-conversation { padding: 24px; }
  .employee-question { margin-left: 0; }
  .business-case summary { grid-template-columns: 110px minmax(0, 1fr) 24px; padding: 24px; gap: 20px; }
  .business-case-content { gap: 32px; padding-inline: 24px; }
  .business-case-copy h3 { font-size: 1.375rem; }
  .workflow-mockup { padding: 20px; }
  .assistant-response li { grid-template-columns: 1fr; gap: 4px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 32px; }
  .footer-grid { grid-template-columns: auto 1fr; }
  .footer-grid nav { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .engagement-offer { display: flex; }
  .engagement-offer ul { margin-top: 24px; }
  .capabilities-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; padding-top: 32px; }
  .method-perspectives { padding: 24px; gap: 24px; }
  .method-scope, .project-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .project-grid { gap: 40px; }
  .partnership-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .container { width: calc(100% - 40px); }
  .brand img { width: 150px; }
  .hero-grid, .section-intro, .services-layout, .example-layout, .about-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 32px; }
  .flow-studio { padding: 20px; }
  h1 { max-width: 14ch; font-size: clamp(2.125rem, 8.8vw, 3.25rem); }
  .hero-description { margin-top: 24px; }
  .hero-actions { align-items: start; flex-direction: column; gap: 12px; margin-top: 24px; }
  .hero-actions .button { gap: 16px; padding-inline: 18px; }
  .hero-note { margin-top: 12px; }
  .flow-studio { padding: 20px; border-radius: 16px 16px 42px 16px; }
  .studio-scene { padding-top: 140px; padding-bottom: 0; }
  .studio-note { display: none; }
  .workflow-window { margin-left: 5%; width: 95%; }
  .window-body { padding: 16px; }
  .incoming-slip { width: 87%; padding: 12px; }
  .routing-core { top: 83px; right: 0; width: 64px; height: 64px; padding: 7px; border-radius: 17px; }
  .studio-wordmark { font-size: .75rem; }
  .hero h1 { font-size: clamp(2.6rem, 10vw, 3.75rem); }
  .partner-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 20px 28px; }
  .partner-logo { width: 200px; grid-row: auto; }
  .partner-layout .text-link { grid-column: 1; margin-top: 12px; }
  .ecosystem-layout { padding-block: 32px; }
  .ecosystem-intro { display: block; }
  .ecosystem-intro p { margin-top: 12px; max-width: 35ch; }
  .ecosystem-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ecosystem-stage h3 { font-size: .625rem; }
  .ecosystem-stage li { font-size: .6875rem; gap: 8px; }
  .ecosystem-stage img { width: 30px; height: 30px; }
  .ecosystem-stage:nth-child(2) .ecosystem-connector { display: none; }
  .ecosystem-connector { right: -18px; font-size: 1rem; }

  .offer-art { width: 90px; height: 84px; margin-bottom: 20px; }
  .solution-art { margin-bottom: 24px; }
  .methodology .method-steps { gap: 48px 16px; }
  .methodology .method-steps li { padding-right: 0; }
  .process-heading { margin-bottom: 20px; }
  .hero-footnote { margin-top: 32px; }
  .section { padding-block: 64px; }
  .section-intro { gap: 24px; margin-bottom: 32px; }
  .desktop-break { display: none; }
  .use-cases { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .use-case { padding: 0; }
  .case-heading { min-height: 0; }
  .topic { margin-bottom: 12px; }
  .use-case h3 { font-size: 1.375rem; }
  .use-case > p, .case-outcome p { font-size: 1rem; }
  .case-outcome { margin-top: 20px; margin-bottom: 16px; }
  .automation-signals { margin-top: 8px; padding: 24px; }
  .services-intro h2 { max-width: 15ch; }
  .services-layout { gap: 40px; }
  .service-row { grid-template-columns: minmax(0, 1fr); }
  .service-row h3 { font-size: 1.2rem; }
  .service-row .technology { font-size: .8125rem; }
  .method-steps { gap: 32px 24px; }
  .method-steps h3 { font-size: 1.2rem; }
  .method-steps p { font-size: .875rem; }
  .step-duration { position: static; display: block; margin-bottom: 10px; }
  .method-steps li::before { margin-bottom: 16px; }
  .step-deliverable { font-size: .6875rem; margin-top: 16px; }
  .example-layout { gap: 32px; }
  .example-copy h2 { max-width: 17ch; }
  .example-conversation { padding: 24px; }
  .business-case summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 16px; padding: 22px 18px; }
  .case-area { grid-column: 1; font-size: .75rem; }
  .case-summary-copy { grid-column: 1; }
  .case-summary-copy strong { font-size: 1.0625rem; }
  .case-toggle { grid-column: 2; grid-row: 1 / 3; }
  .business-case-content { grid-template-columns: minmax(0, 1fr); padding: 8px 18px 28px; gap: 28px; }
  .business-case-content .example-conversation { padding: 20px; }
  .workflow-mockup { padding: 18px; }
  .mockup-fields > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .case-connection { margin-top: 32px; }
  .about-layout { gap: 24px; }
  .contact { padding-block: 56px; }
  .contact-layout { gap: 32px; }
  .contact h2 { max-width: 13ch; }
  .footer-grid { grid-template-columns: 1fr; gap: 12px; }
  .footer-grid .brand { justify-self: start; }
  .footer-grid nav { gap: 0 20px; }
}
@media (max-width: 359px) {
  .method-perspectives { grid-template-columns: minmax(0, 1fr); }
  .container { width: calc(100% - 32px); }
  .flow-studio, .example-conversation { padding: 16px; }
  .scene-switch button { font-size: .6875rem; }
  .window-title strong { font-size: .8125rem; }
  .window-toolbar { padding: 10px; gap: 8px; }
  .window-body { padding: 14px; }
  .window-bottom { font-size: .5rem; }
  .process-before, .process-after { padding: 18px; }
  .method-steps { grid-template-columns: minmax(0, 1fr); }
  .step-duration { position: absolute; right: 0; top: 25px; }
  .method-steps li::before { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
