:root {
  --canvas: #fafaf7; --ink: #111111; --blue: #023e8a; --soft: #edf1f5;
  --muted: #46505d; --line: #c9d0d9; --white: #ffffff;
  --sc-canvas: #fafaf7; --sc-ink: #111111; --sc-accent: #023e8a; --sc-accent-ink: #ffffff;
  --sc-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4vw, 48px); --section: clamp(64px, 7vw, 100px);
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--ink); font-family: var(--sc-font-text); font-size: 18px; line-height: 1.6; overflow-x: clip; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { text-wrap: balance; font-weight: 500; }
h2 { font-size: clamp(34px, 3.7vw, 52px); line-height: 1.13; letter-spacing: -0.04em; }
h3 { font-size: 25px; line-height: 1.3; letter-spacing: -0.025em; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
button { font: inherit; }
a:focus-visible,button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
::selection { color: white; background: var(--blue); }
img { max-width: 100%; height: auto; }
.wrap { width: min(1100px, calc(100% - var(--gutter)*2)); margin-inline: auto; }
.section-space { padding-block: var(--section); }
section[id] { scroll-margin-top: 28px; }
.opening,.masthead { background: var(--ink); color: var(--white); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 32px; }
.wordmark { width: 252px; }
.site-header nav { display: flex; align-items: center; gap: 32px; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; }
.nav-link:hover { text-decoration: underline; }
.header-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid currentColor; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.header-link:hover { text-decoration: underline; }
.masthead a:focus-visible,.opening a:focus-visible { outline-color: var(--white); }
.hero { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 48px; min-height: 660px; padding-top: 54px; padding-bottom: 112px; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(48px, 5.1vw, 72px); line-height: 1.06; letter-spacing: -0.055em; }
.hero h1 span { display: block; }
.hero-copy p { max-width: 550px; margin-top: 28px; color: #dde2e8; font-size: 19px; line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 14px 20px; border: 1px solid transparent; border-radius: 6px; color: var(--blue); background: var(--white); font-size: 16px; line-height: 1.4; font-weight: 600; text-decoration: none; }
.button-arrow { font-size: 22px; line-height: 1; }
.button:hover { text-decoration: underline; }
.button:active { transform: translateY(1px); }
.hero-cta { margin-top: 32px; }
.hero-rule { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #40464e; }
.brand-scene { position: relative; width: 100%; height: 420px; perspective: 1000px; --lean-x: 0deg; --lean-y: 0deg; }
.scene-grid { position: absolute; inset: -16px -16px 24px; background-image: linear-gradient(#31343a 1px,transparent 1px),linear-gradient(90deg,#31343a 1px,transparent 1px); background-size: 52px 52px; opacity: 0.3; }
.scene-back { position: absolute; inset: 44px 26px 40px 22px; border: 1px solid #647080; border-radius: 6px; background: #1c242f; box-shadow: 18px 28px 52px #00000060; rotate: -8deg; }
.scene-subject { position: absolute; top: 82px; right: 12px; left: 38px; bottom: 26px; rotate: 4deg; transform-style: preserve-3d; }
.scene-subject img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.scene-edge { translate: 10px 14px; opacity: 0.8; }
.scene-mark { filter: drop-shadow(14px 18px 13px #00000050); }
.scene-front { position: absolute; bottom: 20px; right: -18px; width: 166px; height: 110px; border-right: 2px solid #7e90a6; border-bottom: 2px solid #7e90a6; rotate: -8deg; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.section-intro { color: var(--muted); font-size: 16px; }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.solution { position: relative; padding: 28px 0 32px; border-top: 1px solid var(--line); }
.solution-select { display: flex; align-items: start; justify-content: space-between; gap: 24px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font-size: 27px; line-height: 1.25; letter-spacing: -0.03em; text-align: left; cursor: pointer; }
.select-symbol { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 22px; letter-spacing: 0; }
.solution p { max-width: 42ch; margin-top: 18px; font-size: 17px; color: var(--muted); }
.solution.selected .solution-select { color: var(--blue); }
.solution.selected .select-symbol { color: var(--white); background: var(--blue); }
.solution:hover .solution-select { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.selection-status { min-height: 27px; margin-top: 16px; font-size: 16px; color: var(--blue); }
.method { background: var(--soft); }
.method-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 100px; }
.method-heading { align-self: start; position: sticky; top: 48px; }
.method-heading p { max-width: 32ch; margin-top: 24px; color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.steps li { position: relative; padding: 0 0 38px 72px; counter-increment: steps; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 16px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 50px; bottom: 10px; width: 1px; background: #a6b8d1; }
.steps h3 { font-size: 24px; }
.steps p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.example-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 76px; }
.example-heading h2 { max-width: 12ch; }
.fictional-label { display: inline-block; margin-top: 28px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 6px; color: var(--blue); font-size: 15px; line-height: 1.5; font-weight: 600; }
.audit-example { padding: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.example-company { padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 25px; line-height: 1.35; letter-spacing: -0.025em; }
.example-columns { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
.example-columns h3 { margin-bottom: 10px; color: var(--blue); font-size: 18px; font-weight: 600; }
.example-columns p { font-size: 16px; color: var(--muted); }
.contact { position: relative; overflow: clip; color: var(--white); background: var(--blue); }
.contact-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.5fr; gap: 84px; align-items: start; }
.contact h2 { font-size: clamp(52px, 6vw, 84px); letter-spacing: -0.055em; }
.contact-copy p { max-width: 42ch; font-size: 21px; line-height: 1.5; }
.contact-selected { margin-top: 20px; font-size: 16px; }
.contact-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.email-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; overflow-wrap: anywhere; }
.contact a:focus-visible { outline-color: var(--white); }
.contact-edge { position: absolute; top: 0; right: 0; width: 140px; height: 140px; border-top: 1px solid #ffffff70; border-right: 1px solid #ffffff70; transform-origin: top right; rotate: -45deg; }
.site-footer { color: var(--white); background: var(--ink); }
.footer-layout { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; }
.footer-wordmark { width: 220px; }
.site-footer p { font-size: 14px; }

/* B: Light field guide. A centred introduction, a compact capability index,
   and an open, horizontal method. Its rhythm comes from spacing and type. */
.theme-b .masthead,.theme-b .opening { background: var(--canvas); color: var(--ink); }
.theme-b .site-header { border-bottom: 1px solid var(--line); }
.theme-b .header-link { color: var(--white); background: var(--blue); border-color: var(--blue); }
.theme-b .masthead a:focus-visible,.theme-b .opening a:focus-visible { outline-color: var(--blue); }
.theme-b .hero { display: block; text-align: center; min-height: 660px; padding-top: 92px; padding-bottom: 100px; }
.theme-b .hero h1 { max-width: 1100px; margin-inline: auto; font-size: clamp(48px,6.5vw,92px); font-weight: 500; }
.theme-b .hero-copy p { max-width: 640px; margin-inline: auto; margin-top: 30px; color: var(--muted); font-size: 20px; }
.theme-b .hero-cta { background: var(--blue); color: var(--white); }
.theme-b .brand-scene { display: none; }
.theme-b .hero-rule { background: var(--line); }
.theme-b .solutions { padding-top: 64px; }
.theme-b .solution-grid { grid-template-columns: repeat(3,1fr); gap: 24px 48px; }
.theme-b .solution { padding-block: 24px; }
.theme-b .solution-select { font-size: 24px; }
.theme-b .section-heading h2 { font-size: 40px; }
.theme-b .method { background: var(--blue); color: var(--white); }
.theme-b .method-layout { display: block; }
.theme-b .method-heading { position: static; display: flex; align-items: end; justify-content: space-between; gap: 64px; }
.theme-b .method-heading h2 { max-width: 16ch; }
.theme-b .method-heading p { color: var(--white); max-width: 29ch; }
.theme-b .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 60px; }
.theme-b .steps li { padding: 64px 0 0; }
.theme-b .steps li::before { color: var(--white); border-color: var(--white); top: 0; }
.theme-b .steps li::after { display: none; }
.theme-b .steps p { color: var(--white); }
.theme-b .example-layout { display: block; }
.theme-b .example-heading { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.theme-b .example-heading h2 { max-width: none; }
.theme-b .fictional-label { margin-top: 0; }
.theme-b .example-columns { grid-template-columns: 1fr 1fr; gap: 56px; }
.theme-b .audit-example { background: var(--soft); padding: 40px; }
.theme-b .contact { color: var(--white); background: var(--ink); }
.theme-b .contact-button { color: var(--blue); }
.theme-b .footer-layout { border-top: 1px solid #434952; }

/* C: Blue poster. The supplied white mark occupies a separate visual plane,
   with an oversized left title and a compact solution ledger below it. */
.theme-c .masthead,.theme-c .opening { background: var(--blue); }
.theme-c .site-header { padding-block: 28px; border-bottom: 1px solid #ffffff50; }
.theme-c .wordmark { width: 280px; }
.theme-c .hero { min-height: 690px; grid-template-columns: 1.6fr 1fr; padding-top: 74px; padding-bottom: 104px; gap: 0; }
.theme-c .hero h1 { font-size: clamp(48px,6vw,84px); max-width: 14ch; }
.theme-c .hero-copy p { color: var(--white); max-width: 500px; }
.theme-c .brand-scene { height: 480px; }
.theme-c .scene-grid,.theme-c .scene-back,.theme-c .scene-front,.theme-c .scene-mark { display: none; }
.theme-c .scene-subject { top: 0; bottom: 0; left: -36px; right: -60px; rotate: 0deg; }
.theme-c .scene-edge { translate: 0 0; opacity: 0.35; }
.theme-c .hero-rule { background: #ffffff50; }
.theme-c .section-heading { margin-bottom: 56px; }
.theme-c .solution-grid { display: block; }
.theme-c .solution { display: grid; grid-template-columns: 1fr 1.2fr; align-items: start; gap: 76px; padding-block: 28px; }
.theme-c .solution-select { font-size: 32px; }
.theme-c .solution p { margin-top: 0; max-width: 48ch; font-size: 18px; }
.theme-c .method { background: var(--ink); color: var(--white); }
.theme-c .method-heading p,.theme-c .steps p { color: #dde2e8; }
.theme-c .steps li::before { color: var(--white); border-color: var(--white); }
.theme-c .steps li::after { background: #7a8798; }
.theme-c .example { background: var(--soft); }
.theme-c .audit-example { background: var(--canvas); }
.theme-c .contact-layout { display: block; }
.theme-c .contact h2 { font-size: clamp(60px,8vw,112px); }
.theme-c .contact-copy { display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-top: 28px; }
.theme-c .contact-actions { margin-top: 0; }

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .scene-subject img { transform: rotateY(var(--lean-x)) rotateX(var(--lean-y)); }
}
@media (max-width: 1100px) {
  .site-header nav { gap: 24px; }
  .hero { gap: 28px; }
  .hero h1 { font-size: 64px; }
  .brand-scene { height: 350px; }
  .scene-subject { top: 54px; bottom: 18px; left: 20px; right: 0; }
  .method-layout { gap: 56px; }
  .example-layout { gap: 40px; }
  .contact-layout { gap: 52px; }
  .contact-actions { gap: 16px; }
}
@media (max-width: 900px) {
  .wordmark,.theme-c .wordmark { width: 230px; }
  .site-header nav { gap: 20px; }
  .nav-link { font-size: 14px; }
  .header-link { padding-inline: 14px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; padding-bottom: 72px; }
  .hero h1 { font-size: 64px; }
  .hero-copy p { max-width: 560px; }
  .brand-scene { position: absolute; right: 0; top: 64px; width: 250px; height: 300px; opacity: 0.2; }
  .scene-grid,.scene-back,.scene-front { display: none; }
  .scene-subject { inset: 0; }
  .solution-grid { gap: 0 36px; }
  .solution-select { font-size: 24px; }
  .method-layout,.example-layout,.contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .method-heading { position: static; }
  .method-heading h2 { max-width: 18ch; }
  .method-heading p { max-width: none; }
  .example-heading h2 { max-width: none; }
  .fictional-label { margin-top: 20px; }
  .example-columns { grid-template-columns: 1fr 1fr; gap: 36px; }
  .theme-b .hero { min-height: 600px; padding-top: 72px; }
  .theme-b .hero h1 { font-size: 72px; }
  .theme-b .solution-grid { grid-template-columns: 1fr 1fr; }
  .theme-b .method-heading { display: block; }
  .theme-b .steps { gap: 28px; }
  .theme-b .steps h3 { font-size: 22px; }
  .theme-b .example-heading { display: block; }
  .theme-b .fictional-label { margin-top: 20px; }
  .theme-c .hero { display: block; min-height: 590px; padding-block: 66px 86px; }
  .theme-c .hero h1 { font-size: 72px; max-width: 16ch; }
  .theme-c .brand-scene { width: 340px; height: 380px; top: 66px; opacity: 0.4; }
  .theme-c .solution { gap: 40px; }
  .theme-c .solution-select { font-size: 26px; }
  .theme-c .contact-copy { display: block; }
  .theme-c .contact-actions { margin-top: 32px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .site-header { gap: 12px; padding-block: 24px; }
  .wordmark,.theme-c .wordmark { width: 188px; }
  .site-header nav { gap: 0; }
  .nav-link { display: none; }
  .header-link { min-height: 44px; padding-inline: 10px; font-size: 14px; }
  .hero { padding-block: 38px 60px; }
  .hero h1,.theme-b .hero h1,.theme-c .hero h1 { font-size: clamp(42px,11.7vw,64px); line-height: 1.09; letter-spacing: -0.045em; }
  .hero-copy p { font-size: 18px; margin-top: 24px; }
  .hero-cta { margin-top: 28px; }
  .brand-scene { position: relative; top: auto; right: auto; width: 100%; height: 210px; margin-top: 36px; opacity: 1; }
  .scene-grid { display: block; inset: 0; background-size: 40px 40px; }
  .scene-back { display: block; inset: 10px 56px 20px; rotate: -6deg; }
  .scene-subject { inset: 14px 56px 0; rotate: 4deg; }
  .scene-front { display: block; right: 44px; bottom: 0; width: 70px; height: 60px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-intro { margin-top: 16px; }
  .solution-grid,.theme-b .solution-grid { grid-template-columns: 1fr; gap: 0; }
  .solution { padding-block: 24px; }
  .solution-select { font-size: 24px; }
  .solution p { max-width: none; margin-top: 14px; }
  .steps li { padding-left: 60px; }
  .steps h3 { font-size: 22px; }
  .example-columns,.theme-b .example-columns { grid-template-columns: 1fr; gap: 28px; }
  .fictional-label { font-size: 15px; padding-inline: 10px; }
  .audit-example,.theme-b .audit-example { padding: 24px; }
  .example-company { font-size: 24px; padding-bottom: 24px; }
  .example-columns { padding-top: 24px; }
  .contact-copy p { font-size: 20px; }
  .contact-actions { flex-direction: column; align-items: start; gap: 20px; }
  .footer-layout { flex-direction: column; align-items: start; gap: 20px; padding-block: 28px; }
  .theme-b .hero { min-height: 0; padding-block: 58px 76px; }
  .theme-b .hero-copy p { font-size: 18px; }
  .theme-b .section-heading h2 { font-size: 34px; }
  .theme-b .steps { display: block; margin-top: 40px; }
  .theme-b .steps li { padding: 0 0 32px 60px; }
  .theme-b .steps li:last-child { padding-bottom: 0; }
  .theme-b .steps li::before { top: 0; }
  .theme-c .hero { min-height: 0; padding-block: 38px 60px; }
  .theme-c .brand-scene { position: relative; top: auto; width: 210px; height: 210px; margin: 32px 0 0 auto; opacity: 0.7; }
  .theme-c .scene-subject { inset: 0; }
  .theme-c .solution { display: block; padding-block: 24px; }
  .theme-c .solution-select { font-size: 24px; }
  .theme-c .solution p { margin-top: 14px; font-size: 17px; }
  .theme-c .contact h2 { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  [data-sc-parallax] { transform: none !important; }
  .scene-subject img { transform: none !important; }
}

.solution-select { min-height: 44px; }
.solution-select:disabled { opacity: 1; cursor: default; }
.solution-select:disabled .select-symbol { visibility: hidden; }

.example-content .fictional-label { margin: 0 0 24px; }

/* The selected B direction: exact brand marks, restrained line drawing,
   and separate blue/cyan block planes. Typography does not move. */
.theme-b .wordmark { width: 320px; }
.theme-b .site-header { padding-block: 30px; }
.theme-b .hero { min-height: 706px; padding-block: 82px 116px; }
.theme-b .hero h1 { max-width: 840px; font-size: clamp(48px,5.85vw,84px); }
.theme-b .hero-copy p { max-width: 650px; font-size: 20px; }
.theme-b .brand-system { display: block; position: absolute; top: 152px; right: -12px; width: 170px; height: 254px; margin: 0; opacity: 1; perspective: none; }
.theme-b .brand-system .scene-grid { inset: -26px -16px -12px; background: none; opacity: 1; }
.theme-b .brand-trace { width: 100%; height: 100%; overflow: visible; }
.theme-b .brand-trace path { stroke: #023e8a; stroke-width: 1; opacity: .34; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sc-p, .55)); }
.theme-b .brand-trace .trace-secondary { stroke: #48cae4; opacity: .9; }
.theme-b .brand-system .scene-back { display: block; inset: 38px 4px 42px 26px; border: 1px solid #c9d0d9; border-radius: 0; background: none; box-shadow: none; rotate: 0deg; }
.theme-b .brand-system .scene-subject { top: 70px; left: 5px; right: 28px; bottom: 46px; rotate: 0deg; }
.theme-b .brand-system .scene-edge { display: none; }
.theme-b .brand-system .scene-mark { filter: none; }
.theme-b .brand-system .scene-front { display: block; right: 6px; bottom: 18px; width: 42px; height: 42px; border: 0; background: #48cae4; opacity: .25; rotate: 0deg; }
.edge-blocks { display: none; }
.theme-b .edge-blocks { display: block; position: absolute; left: 4px; top: 218px; width: 126px; height: 190px; }
.edge-line { position: absolute; left: 8px; top: 18px; width: 88px; height: 142px; border-left: 1px solid #a7bddb; border-bottom: 1px solid #a7bddb; }
.edge-blue { position: absolute; left: 56px; top: 42px; width: 40px; height: 40px; background: var(--blue); opacity: .14; }
.edge-cyan { position: absolute; left: 8px; bottom: 14px; width: 24px; height: 24px; background: #48cae4; }
.theme-b .hero-rule { background: #b5c7dd; }
.theme-b .solution-grid { column-gap: 48px; }
.theme-b .solution.selected { border-top-color: var(--blue); }
.theme-b .method .steps { position: relative; }
.theme-b .method .steps::before,.theme-b .method .steps::after { content: ''; position: absolute; height: 1px; top: 20px; left: 20px; right: calc((100% - 96px)/3 - 20px); background: #ffffff55; }
.theme-b .method .steps::after { background: var(--white); transform: scaleX(clamp(0,calc(var(--sc-p,.5)*1.75 - .2),1)); transform-origin: left; }
.theme-b .method .steps li::before { z-index: 1; background: var(--blue); }
.theme-b .footer-wordmark { width: 260px; }
.workflow-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 40px; }
.workflow-heading h2 { max-width: 15ch; }
.workflow-heading p { max-width: 32ch; color: var(--muted); font-size: 17px; }
.workflow-chart { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; padding: 0; margin: 0; list-style: none; }
.workflow-node { position: relative; padding: 24px; border: 1px solid #a6b8d1; background: var(--white); }
.workflow-tag { display: block; margin-bottom: 28px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.workflow-node h3 { font-size: 23px; }
.workflow-node p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.workflow-core { border-color: var(--blue); background: var(--blue); color: var(--white); }
.workflow-core .workflow-tag,.workflow-core p { color: var(--white); }
.workflow-node:not(:last-child)::before { content: ''; position: absolute; left: calc(100% + 1px); top: 50%; width: 32px; height: 1px; background: var(--blue); transform: scaleX(clamp(.15,calc(var(--sc-p,.7)*1.5),1)); transform-origin: left; }
.workflow-node:not(:last-child)::after { content: ''; position: absolute; left: calc(100% + 24px); top: calc(50% - 3px); width: 6px; height: 6px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue); rotate: 45deg; }
@media (max-width: 1100px) and (min-width: 901px) {
  .theme-b .hero h1 { font-size: 72px; max-width: 680px; }
  .theme-b .brand-system { width: 130px; right: -8px; }
  .theme-b .edge-blocks { left: -4px; width: 88px; }
  .workflow-node { padding: 20px; }
  .workflow-node h3 { font-size: 21px; }
}
@media (max-width: 900px) {
  .theme-b .wordmark { width: 248px; }
  .theme-b .hero { min-height: 0; padding-block: 66px 70px; }
  .theme-b .hero h1 { font-size: 64px; max-width: 680px; }
  .theme-b .hero-copy p { max-width: 600px; }
  .theme-b .brand-system { position: relative; top: auto; right: auto; width: 116px; height: 152px; margin: 38px auto 0; }
  .theme-b .brand-system .scene-grid { inset: -10px -16px -6px; }
  .theme-b .brand-system .scene-back { inset: 10px 2px 10px 16px; }
  .theme-b .brand-system .scene-subject { inset: 24px 14px 12px 4px; }
  .theme-b .brand-system .scene-front { right: -4px; bottom: -4px; width: 24px; height: 24px; }
  .theme-b .edge-blocks { top: auto; bottom: 88px; left: 32px; width: 100px; height: 120px; }
  .theme-b .edge-line { height: 108px; }
  .theme-b .method .steps::before,.theme-b .method .steps::after { right: calc((100% - 56px)/3 - 20px); }
  .workflow-heading { display: block; }
  .workflow-heading h2 { max-width: none; }
  .workflow-heading p { max-width: 46ch; margin-top: 20px; }
  .workflow-chart { grid-template-columns: 1fr; }
  .workflow-node { display: grid; grid-template-columns: 110px 1fr; gap: 0 24px; }
  .workflow-tag { grid-row: span 2; margin: 5px 0 0; }
  .workflow-node p { grid-column: 2; margin-top: 8px; }
  .workflow-node:not(:last-child)::before { top: calc(100% + 1px); left: 50%; width: 1px; height: 32px; transform: scaleY(clamp(.15,calc(var(--sc-p,.7)*1.5),1)); transform-origin: top; }
  .workflow-node:not(:last-child)::after { top: calc(100% + 24px); left: calc(50% - 3px); rotate: 135deg; }
}
@media (max-width: 600px) {
  .theme-b .wordmark { width: 188px; }
  .theme-b .site-header { padding-block: 24px; }
  .theme-b .hero { padding-block: 44px 60px; }
  .theme-b .hero h1 { font-size: clamp(42px,11.7vw,64px); }
  .theme-b .hero-copy p { font-size: 18px; }
  .theme-b .brand-system { width: 106px; height: 134px; margin-top: 34px; }
  .theme-b .edge-blocks { left: 8px; bottom: 78px; width: 72px; height: 98px; }
  .theme-b .edge-line { left: 0; width: 50px; height: 68px; }
  .theme-b .edge-blue { width: 26px; height: 26px; left: 36px; top: 36px; }
  .theme-b .edge-cyan { width: 16px; height: 16px; left: 0; bottom: 0; }
  .theme-b .method .steps::before,.theme-b .method .steps::after { display: none; }
  .theme-b .steps li:not(:last-child)::after { display: block; background: #ffffff70; }
  .theme-b .footer-wordmark { width: 230px; }
  .workflow-node { display: block; padding: 24px; }
  .workflow-tag { margin: 0 0 16px; }
  .workflow-node p { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-b .brand-trace path { stroke-dashoffset: 0; }
  .theme-b .method .steps::after { transform: scaleX(1); }
  .workflow-node:not(:last-child)::before { transform: none; }
}