:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--demo-ink);
  background: var(--demo-bg);
  font-family: var(--demo-body), Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
a { color: inherit; }
button,input,textarea { font: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #111; }
.demo-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px; color: var(--demo-bg); background: var(--demo-ink); transform: translateY(-150%); }
.demo-skip:focus { transform: none; }
.concept-ribbon {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 16px;
  min-height: 44px;
  align-items: center;
  padding: 8px clamp(18px,4vw,64px);
  color: #17161a;
  background: #f2b535;
  font: 700 .7rem/1.2 Arial,sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.concept-ribbon a { display: inline-flex; min-height: 44px; align-items: center; }
.concept-ribbon a:last-child { justify-self: end; font-weight: 900; }
.demo-site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  min-height: 72px;
  align-items: center;
  padding: 12px clamp(18px,4vw,64px);
  border-bottom: 2px solid currentColor;
  background: color-mix(in srgb,var(--demo-bg) 92%,transparent);
  backdrop-filter: blur(10px);
}
.demo-logo { display: inline-flex; min-height: 44px; max-width: 30ch; align-items: center; font-family: var(--demo-display),Impact,sans-serif; font-weight: 800; line-height: 1; text-decoration: none; }
.demo-site-header nav { display: flex; align-items: center; gap: clamp(14px,2vw,32px); }
.demo-site-header nav a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.demo-nav-cta,.demo-actions a:first-child,.demo-close>a { padding: 12px 16px; color: var(--demo-surface); background: var(--demo-ink); text-decoration: none; }
.demo-menu { display: none; min-width: 48px; min-height: 48px; border: 2px solid currentColor; color: inherit; background: transparent; font-weight: 900; }
main { overflow: hidden; }
.demo-hero {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr);
  min-height: calc(100svh - 116px);
  border-bottom: 2px solid currentColor;
}
.demo-hero-copy { display: grid; align-content: center; padding: clamp(64px,9vw,150px) clamp(22px,7vw,110px); }
.demo-kicker,.demo-services header>p,.demo-about>div>p,.demo-process header>p,.demo-proof-safe>p,.demo-close>div>p { margin: 0 0 18px; font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1,h2,h3 { margin: 0; font-family: var(--demo-display),Impact,sans-serif; font-weight: 800; line-height: .94; letter-spacing: -.03em; }
h1 { max-width: 11ch; font-size: clamp(3.8rem,8vw,6rem); }
h2 { max-width: 13ch; font-size: clamp(2.7rem,5.2vw,6rem); }
h3 { font-size: clamp(1.55rem,2.4vw,2.8rem); }
.demo-lede { max-width: 58ch; margin: 28px 0; font-size: clamp(1.05rem,1.4vw,1.3rem); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-actions a { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 16px; border: 2px solid currentColor; font-weight: 900; text-decoration: none; }
.demo-actions a:nth-child(2) { background: transparent; }
.demo-hero-scene { position: relative; isolation: isolate; display: grid; min-height: 520px; place-items: center; overflow: hidden; color: var(--demo-ink); background: var(--demo-accent); }
.demo-hero-scene::before,.demo-hero-scene::after { position: absolute; z-index: -1; content: ""; }
.demo-motif { position: absolute; inset: 20px 20px auto; max-width: 38ch; font-size: .72rem; font-weight: 800; }
.demo-scene-core { display: grid; width: min(78%,620px); min-height: 52%; align-content: end; padding: clamp(24px,5vw,72px); border: 3px solid currentColor; background: var(--demo-surface); box-shadow: 18px 18px 0 var(--demo-accent-2); }
.demo-scene-core small { max-width: 45ch; margin-bottom: 28px; font-weight: 700; }
.demo-scene-core strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(3rem,6vw,7rem); line-height: .84; text-transform: uppercase; }
.demo-scene-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.demo-scene-items span { padding: 6px 9px; border: 2px solid currentColor; font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.demo-task { padding: clamp(64px,8vw,120px) clamp(20px,6vw,96px); border-bottom: 2px solid currentColor; scroll-margin-top: 88px; }
.demo-task>header { display: grid; grid-template-columns: minmax(160px,.35fr) minmax(0,1.65fr); gap: 40px; margin-bottom: 42px; }
.demo-task>header>p,.demo-task>div>p:first-child,.demo-task-status { font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.demo-task button,.demo-task label { min-height: 48px; cursor: pointer; }
.demo-task button { color: inherit; background: transparent; }
.demo-task-status { margin: 28px 0 0; }
.demo-task [data-selected="true"] { color: var(--demo-surface); background: var(--demo-ink); }

.demo-task[data-task-mode="index"] ol { margin: 0; padding: 0; border-top: 3px solid currentColor; list-style: none; }
.demo-task[data-task-mode="index"] li { display: grid; grid-template-columns: 64px minmax(220px,.65fr) minmax(260px,1.35fr); gap: 24px; align-items: center; min-height: 94px; border-bottom: 2px solid currentColor; }
.demo-task[data-task-mode="index"] li>span { font-family: var(--demo-display),Impact,sans-serif; font-size: 1.5rem; }
.demo-task[data-task-mode="index"] button { border: 0; text-align: left; font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.3rem,2vw,2rem); font-weight: 800; }
.demo-task[data-task-mode="index"] li p { max-width: 54ch; }

.demo-task[data-task-mode="map"] { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); gap: clamp(40px,8vw,120px); align-items: center; color: var(--demo-surface); background: var(--demo-bg); }
.demo-task-map { position: relative; min-height: 520px; border: 3px solid currentColor; border-radius: 48% 52% 42% 58%; }
.demo-task-map::before,.demo-task-map::after,.demo-task-map i { position: absolute; border: 3px solid var(--demo-accent); border-radius: 50%; content: ""; }
.demo-task-map::before { inset: 10%; }
.demo-task-map::after { inset: 24%; border-color: var(--demo-accent-2); }
.demo-task-map i:nth-child(1) { inset: 18% 62% 58% 16%; background: var(--demo-accent); }
.demo-task-map i:nth-child(2) { inset: 58% 16% 18% 62%; border-color: var(--demo-accent-2); background: var(--demo-accent-2); }
.demo-task-map i:nth-child(3) { inset: 39% 39%; background: var(--demo-surface); }
.demo-task[data-task-mode="map"] fieldset { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; border: 0; }
.demo-task[data-task-mode="map"] legend { margin-bottom: 14px; font-weight: 900; }
.demo-task[data-task-mode="map"] label { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 2px solid currentColor; font-weight: 800; }
.demo-task[data-task-mode="map"] input { width: 22px; height: 22px; accent-color: var(--demo-accent); }

.demo-task[data-task-mode="shelf"] { color: var(--demo-surface); background: var(--demo-bg); }
.demo-task-shelves { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; padding-block: 10px 22px; }
.demo-task-shelves button { display: grid; flex: 1 0 min(280px,72vw); min-height: 330px; align-content: space-between; padding: 28px 22px; border: 3px solid currentColor; text-align: left; }
.demo-task-shelves button:nth-child(3n+1) { color: var(--demo-ink); background: var(--demo-accent); }
.demo-task-shelves button:nth-child(3n+2) { color: var(--demo-ink); background: var(--demo-accent-2); }
.demo-task-shelves strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(2rem,3vw,3.5rem); line-height: .95; }

.demo-task[data-task-mode="assembly"] { color: var(--demo-surface); background: var(--demo-bg); }
.demo-task-assembly { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 42px; }
.demo-task-assembly button { display: grid; min-height: 360px; align-content: space-between; padding: 32px; border: 3px solid currentColor; margin-right: -3px; text-align: left; transform: rotate(var(--tilt,0deg)); }
.demo-task-assembly button:nth-child(1) { --tilt:-1deg; background: color-mix(in srgb,var(--demo-accent) 28%,transparent); }
.demo-task-assembly button:nth-child(2) { --tilt:1deg; background: color-mix(in srgb,var(--demo-accent-2) 32%,transparent); }
.demo-task-assembly button:nth-child(3) { --tilt:-.5deg; }
.demo-task-assembly strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(2rem,3vw,3.5rem); line-height: .95; }

.demo-task[data-task-mode="chooser"]>div { display: grid; grid-template-columns: repeat(2,1fr); border: 2px solid currentColor; }
.demo-task[data-task-mode="chooser"] button { display: grid; gap: 14px; min-height: 180px; align-content: space-between; padding: 24px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; text-align: left; }
.demo-task[data-task-mode="chooser"] button:nth-child(2n) { border-right: 0; }
.demo-task[data-task-mode="chooser"] button:nth-last-child(-n+2) { border-bottom: 0; }
.demo-task[data-task-mode="chooser"] strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.7rem,2.8vw,3rem); line-height: .95; }
.demo-task-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; margin-top: 30px; }
.demo-task-footer .demo-task-status { margin: 0; }
.demo-task-footer a { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 16px; color: var(--demo-surface); background: var(--demo-ink); font-weight: 900; text-decoration: none; }
.demo-task-footer a[hidden] { display: none; }
.demo-task-footer noscript a { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 16px; color: var(--demo-surface); background: var(--demo-ink); font-weight: 900; text-decoration: none; }

/* Contractor: a stamped permit line, not a generic option card. */
.demo-task[data-task-mode="permit"] { background: var(--demo-surface); }
.demo-task[data-task-mode="permit"] .permit-lines { margin: 0; padding: 0; border-top: 3px solid currentColor; list-style: none; }
.permit-lines li { display: grid; grid-template-columns: 64px minmax(230px,.7fr) minmax(280px,1.3fr); gap: 24px; align-items: center; min-height: 104px; border-bottom: 2px solid currentColor; }
.permit-lines li>span { font-family: var(--demo-display),Impact,sans-serif; font-size: 1.5rem; }
.permit-lines button { min-height: 54px; padding: 8px 14px; border: 3px double currentColor; font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.4rem,2.2vw,2.2rem); font-weight: 800; text-align: left; text-transform: uppercase; transform: rotate(-.4deg); }
.permit-lines button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); box-shadow: 6px 6px 0 var(--demo-ink); transform: rotate(-1.2deg); }
.permit-lines p { max-width: 58ch; }

/* Roofing: condition flags sit beneath a simple weather gauge. */
.demo-task[data-task-mode="roof"] { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(340px,1.25fr); gap: clamp(44px,8vw,120px); color: var(--demo-ink); background: var(--demo-surface); }
.roof-gauge { position: relative; display: grid; min-height: 430px; place-items: center; overflow: hidden; border: 3px solid currentColor; clip-path: polygon(50% 0,100% 16%,100% 100%,0 100%,0 16%); }
.roof-gauge::before { position: absolute; inset: 42% -10% auto; height: 10px; background: var(--demo-accent); content: ""; transform: rotate(-9deg); }
.roof-gauge span,.roof-gauge strong { position: absolute; font-family: var(--demo-display),Impact,sans-serif; }
.roof-gauge span { top: 23%; left: 14%; }
.roof-gauge strong { right: 12%; bottom: 12%; font-size: clamp(3rem,6vw,6rem); }
.roof-gauge i { width: 34%; aspect-ratio: 1; border: 18px solid var(--demo-accent-2); border-radius: 50%; }
.roof-conditions { display: grid; gap: 10px; margin-top: 34px; }
.roof-conditions button { position: relative; padding: 14px 64px 14px 18px; border: 2px solid currentColor; font-weight: 900; text-align: left; clip-path: polygon(0 0,96% 0,100% 50%,96% 100%,0 100%); }
.roof-conditions button::after { position: absolute; top: 50%; right: 24px; width: 18px; height: 18px; border: 3px solid currentColor; content: ""; transform: translateY(-50%) rotate(45deg); }
.roof-conditions button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); }
.roof-conditions button[data-selected="true"]::after { background: currentColor; }

/* Landscape: use choices annotate a topographic site map. */
.demo-task[data-task-mode="landscape"] { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); gap: clamp(40px,8vw,120px); align-items: center; color: var(--demo-ink); background: var(--demo-accent-2); }
.landscape-map { position: relative; min-height: 520px; border: 3px solid currentColor; border-radius: 48% 52% 42% 58%; background: var(--demo-surface); }
.landscape-map::before,.landscape-map::after,.landscape-map i { position: absolute; border: 3px solid var(--demo-accent); border-radius: 50%; content: ""; }
.landscape-map::before { inset: 10%; }
.landscape-map::after { inset: 24%; border-color: var(--demo-ink); }
.landscape-map i:nth-child(1) { inset: 18% 62% 58% 16%; background: var(--demo-accent); }
.landscape-map i:nth-child(2) { inset: 58% 16% 18% 62%; background: var(--demo-accent-2); }
.landscape-map i:nth-child(3) { inset: 39%; background: var(--demo-bg); }
.landscape-map span { position: absolute; right: 12%; bottom: 8%; padding: 8px 12px; color: var(--demo-bg); background: var(--demo-ink); font-weight: 900; }
.demo-task[data-task-mode="landscape"] fieldset,.demo-task[data-task-mode="bodywork"] fieldset { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; border: 0; }
.demo-task[data-task-mode="landscape"] legend,.demo-task[data-task-mode="bodywork"] legend { margin-bottom: 14px; font-weight: 900; }
.demo-task[data-task-mode="landscape"] label,.demo-task[data-task-mode="bodywork"] label { display: flex; min-height: 48px; align-items: center; gap: 14px; padding: 12px 16px; border: 2px solid currentColor; font-weight: 800; cursor: pointer; }
.demo-task[data-task-mode="landscape"] input,.demo-task[data-task-mode="bodywork"] input { width: 22px; height: 22px; accent-color: var(--demo-accent); }

/* Plumbing: every issue occupies a branch on the same utility line. */
.demo-task[data-task-mode="plumbing"] { color: var(--demo-ink); background: var(--demo-surface); }
.pipe-route { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin-top: 42px; padding: 70px 24px; border: 3px solid currentColor; }
.pipe-route::before { position: absolute; top: 50%; right: 24px; left: 24px; height: 16px; background: var(--demo-accent); content: ""; transform: translateY(-50%); }
.pipe-route>div { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; }
.pipe-route i { width: 18px; height: 70px; background: var(--demo-accent); }
.pipe-route button { min-height: 76px; padding: 12px; border: 3px solid currentColor; border-radius: 50%; background: var(--demo-bg); font-weight: 900; }
.pipe-route button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); transform: rotate(-6deg); }
.pipe-source,.pipe-end { position: absolute; z-index: 2; top: calc(50% - 14px); padding: 4px 8px; color: var(--demo-bg); background: var(--demo-ink); font-size: .7rem; font-weight: 900; }
.pipe-source { left: 8px; }.pipe-end { right: 8px; }

/* Electrical: buttons behave like labeled breaker toggles. */
.demo-task[data-task-mode="electrical"] { color: var(--demo-ink); background: var(--demo-bg); }
.breaker-list { border: 3px solid var(--demo-accent); }
.breaker-list>div { display: grid; grid-template-columns: 110px minmax(0,1fr) 70px; align-items: center; min-height: 92px; border-bottom: 2px solid var(--demo-accent); }
.breaker-list>div:last-child { border-bottom: 0; }
.breaker-list span,.breaker-list b { padding: 16px; font-size: .72rem; letter-spacing: .06em; }
.breaker-list button { align-self: stretch; padding: 14px 20px; border: 0; border-right: 2px solid var(--demo-accent); border-left: 2px solid var(--demo-accent); font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.4rem,2.3vw,2.4rem); font-weight: 800; text-align: left; text-transform: uppercase; }
.breaker-list button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); }
.breaker-list button[data-selected="true"]+b { color: var(--demo-bg); background: var(--demo-accent-2); }

/* HVAC: a continuous duct connects room symptom to system planning. */
.demo-task[data-task-mode="comfort"] { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(340px,1.2fr); gap: clamp(40px,8vw,110px); align-items: center; }
.comfort-duct { position: relative; display: grid; min-height: 430px; place-items: center; background: linear-gradient(135deg,var(--demo-accent) 0 48%,var(--demo-surface) 48% 52%,var(--demo-accent-2) 52%); }
.comfort-duct i { width: 78%; height: 78px; border: 4px solid currentColor; background: repeating-linear-gradient(90deg,transparent 0 30px,color-mix(in srgb,var(--demo-ink) 30%,transparent) 30px 34px); transform: rotate(-8deg); }
.comfort-duct span { position: absolute; padding: 7px 10px; color: var(--demo-bg); background: var(--demo-ink); font-weight: 900; }
.comfort-duct span:first-child { top: 10%; left: 8%; }.comfort-duct span:last-child { right: 8%; bottom: 10%; }
.comfort-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.comfort-stage { margin-top: 30px; }
.comfort-stage h3 { margin-bottom: 14px; font-family: var(--demo-body),Arial,sans-serif; font-size: 1rem; letter-spacing: 0; }
.comfort-choices button { flex: 1 1 42%; min-height: 86px; padding: 16px; border: 3px solid currentColor; font-weight: 900; text-align: left; }
.comfort-choices button:nth-child(odd) { border-radius: 50% 0 0 50%; }
.comfort-choices button:nth-child(even) { border-radius: 0 50% 50% 0; }
.comfort-choices button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-ink); }
.comfort-locations { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.comfort-locations button { min-height: 54px; padding: 10px; border: 2px solid currentColor; font-weight: 900; }
.comfort-locations button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); }
[data-task-mode="comfort"][data-ready] .comfort-duct i { box-shadow: 0 0 28px color-mix(in srgb,var(--demo-accent-2) 65%,transparent); }

/* Cleaning: multi-select room plan builds a visible scope. */
.demo-task[data-task-mode="cleaning"] { background: var(--demo-surface); }
.cleaning-step { margin-top: 40px; }
.cleaning-step h3 { margin-bottom: 16px; font-family: var(--demo-body),Arial,sans-serif; font-size: 1.1rem; letter-spacing: 0; }
.visit-types { display: grid; grid-template-columns: repeat(4,1fr); border: 2px solid currentColor; }
.visit-types button { min-height: 84px; padding: 12px; border: 0; border-right: 2px solid currentColor; font-weight: 900; text-align: left; }
.visit-types button:last-child { border-right: 0; }
.visit-types button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-ink); }
.room-plan { display: grid; grid-template-columns: repeat(2,1fr); border: 3px solid currentColor; }
.room-plan button { position: relative; display: grid; min-height: 220px; gap: 18px; align-content: space-between; padding: 24px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; text-align: left; }
.room-plan button:nth-child(2n) { border-right: 0; }.room-plan button:nth-last-child(-n+2) { border-bottom: 0; }
.room-plan button span { font-size: .7rem; font-weight: 900; }.room-plan button strong { max-width: 13ch; font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.8rem,3vw,3.2rem); line-height: .95; }
.room-plan button i { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 3px solid currentColor; }
.room-plan button[data-selected="true"] { color: var(--demo-bg); background: var(--demo-accent); }
.room-plan button[data-selected="true"] i::after { position: absolute; inset: 3px; background: currentColor; content: ""; }

/* Salon: each action cuts across a type-led service runway. */
.demo-task[data-task-mode="salon"] { color: var(--demo-surface); background: var(--demo-bg); }
.salon-runway { border-top: 3px solid currentColor; }
.salon-runway>div { display: grid; grid-template-columns: 70px minmax(260px,.75fr) minmax(280px,1.25fr); align-items: center; min-height: 116px; border-bottom: 2px solid currentColor; }
.salon-runway>div>span,.salon-runway small { padding: 18px; }
.salon-runway button { align-self: stretch; padding: 14px 22px; border: 0; border-right: 2px solid currentColor; border-left: 2px solid currentColor; font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(1.7rem,3vw,3.2rem); font-weight: 800; text-align: left; text-transform: uppercase; }
.salon-runway button[data-selected="true"] { color: var(--demo-ink); background: var(--demo-accent); transform: skewX(-7deg); }

/* Bodywork: quiet choice labels orbit an abstract pressure atlas. */
.demo-task[data-task-mode="bodywork"] { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); gap: clamp(40px,8vw,120px); align-items: center; color: var(--demo-surface); background: var(--demo-bg); }
.bodywork-atlas { position: relative; min-height: 520px; border: 3px solid currentColor; border-radius: 50%; }
.bodywork-atlas::before,.bodywork-atlas::after { position: absolute; border: 3px solid var(--demo-accent); border-radius: 50%; content: ""; }.bodywork-atlas::before { inset: 10%; }.bodywork-atlas::after { inset: 28%; border-color: var(--demo-accent-2); }
.bodywork-atlas i { position: absolute; z-index: 1; display: grid; width: 54px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--demo-ink); background: var(--demo-accent); font-style: normal; font-weight: 900; }.bodywork-atlas i:nth-child(1){top:17%;left:17%}.bodywork-atlas i:nth-child(2){right:18%;bottom:18%;background:var(--demo-accent-2)}.bodywork-atlas i:nth-child(3){top:44%;left:44%;background:var(--demo-surface)}

/* Bookstore: controls are literal shelf spines with different pulls. */
.demo-task[data-task-mode="bookshelf"] { color: var(--demo-surface); background: var(--demo-bg); }
.book-spines { display: flex; min-height: 460px; align-items: stretch; gap: 8px; overflow-x: auto; }
.book-spines { scroll-snap-type: x mandatory; }
.book-spines button { display: grid; flex: 1 0 min(260px,65vw); align-content: space-between; padding: 24px 18px; border: 3px solid currentColor; color: var(--demo-surface); text-align: left; transform: translateY(calc(var(--spine) * 3px)); }
.book-spines button { scroll-snap-align: start; }
.book-spines button:nth-child(1) { background: var(--demo-accent); color:var(--demo-ink); }.book-spines button:nth-child(2) { color:var(--demo-ink); background: var(--demo-accent-2); }.book-spines button:nth-child(3) { color:var(--demo-ink); background: #ef493f; }.book-spines button:nth-child(4) { background: #2458e9; }
.book-spines button strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(2rem,3vw,3.4rem); line-height: .95; writing-mode: vertical-rl; transform: rotate(180deg); }
.book-spines button[data-selected="true"] { outline: 8px solid var(--demo-surface); outline-offset: -12px; transform: translateY(0); }

/* Florist: three folded panels assemble one gift direction. */
.demo-task[data-task-mode="gift-builder"] { color: var(--demo-surface); background: var(--demo-bg); }
.gift-folds { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; }
.gift-folds button { display: grid; min-width: 0; min-height: 370px; align-content: space-between; padding: 30px; border: 3px solid currentColor; margin-right: -3px; color: inherit; overflow-wrap: anywhere; text-align: left; clip-path: polygon(0 3%,94% 0,100% 94%,5% 100%); }
.gift-folds button:nth-child(1){background:color-mix(in srgb,var(--demo-accent) 32%,transparent)}.gift-folds button:nth-child(2){background:color-mix(in srgb,var(--demo-accent-2) 46%,transparent)}.gift-folds button:nth-child(3){background:color-mix(in srgb,var(--demo-accent) 18%,var(--demo-bg))}
.gift-folds strong { font-family: var(--demo-display),Impact,sans-serif; font-size: clamp(2rem,3vw,3.5rem); line-height: .95; }
.gift-folds button[data-selected="true"] { color: var(--demo-ink); background: var(--demo-surface); transform: rotate(-1deg) translateY(-8px); }

/* Retail and personal service concepts use brand fields for spectacle and light paper for reading. */
[data-site-slug="switchyard-salon"],[data-site-slug="still-current-bodywork"],[data-site-slug="margin-electric-books"],[data-site-slug="parcel-and-petal"] { color: var(--demo-ink); background: var(--demo-surface); }
[data-site-slug="switchyard-salon"] .demo-about,[data-site-slug="still-current-bodywork"] .demo-about,[data-site-slug="margin-electric-books"] .demo-about,[data-site-slug="parcel-and-petal"] .demo-about { color: var(--demo-surface); background: var(--demo-bg); }

/* Eleven action signatures: each primary control belongs to its business world. */
[data-site-slug="quarry-and-beam-general-contracting"] :is(.demo-actions a:first-child,.demo-close>a) { border: 4px double currentColor; color: var(--demo-bg); background: var(--demo-accent); box-shadow: 6px 6px 0 var(--demo-ink); transform: rotate(-.6deg); }
[data-site-slug="highline-roofing"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-bg); background: var(--demo-accent); clip-path: polygon(0 0,94% 0,100% 50%,94% 100%,0 100%); }
[data-site-slug="field-and-stone-landscapes"] :is(.demo-actions a:first-child,.demo-close>a) { border-radius: 50% 48% 46% 52%; color: var(--demo-bg); background: var(--demo-accent); }
[data-site-slug="branchline-plumbing"] :is(.demo-actions a:first-child,.demo-close>a) { border-radius: 50%; color: var(--demo-bg); background: var(--demo-accent); box-shadow: 0 0 0 5px var(--demo-surface),0 0 0 8px var(--demo-ink); }
[data-site-slug="common-circuit-electric"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-bg); background: var(--demo-accent); box-shadow: inset -20px 0 0 var(--demo-accent-2); }
[data-site-slug="north-return-heating-and-air"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-bg); background: linear-gradient(110deg,var(--demo-accent) 0 48%,var(--demo-accent-2) 49%); transform: skewX(-5deg); }
[data-site-slug="good-order-cleaning-company"] :is(.demo-actions a:first-child,.demo-close>a) { border: 3px dashed currentColor; color: var(--demo-bg); background: var(--demo-accent); }
[data-site-slug="switchyard-salon"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-ink); background: var(--demo-accent); box-shadow: 8px 8px 0 var(--demo-bg); transform: skewX(-7deg); }
[data-site-slug="still-current-bodywork"] :is(.demo-actions a:first-child,.demo-close>a) { border-radius: 50%; color: var(--demo-ink); background: var(--demo-accent); }
[data-site-slug="margin-electric-books"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-ink); background: var(--demo-accent); box-shadow: 8px 8px 0 var(--demo-accent-2); transform: rotate(-1deg); }
[data-site-slug="parcel-and-petal"] :is(.demo-actions a:first-child,.demo-close>a) { color: var(--demo-ink); background: var(--demo-accent); clip-path: polygon(0 4%,94% 0,100% 90%,5% 100%); transform: rotate(-1deg); }
[data-site-slug="parcel-and-petal"] .demo-scene-core strong { font-size: clamp(2.2rem,4.4vw,4.8rem); overflow-wrap: anywhere; }
.demo-close>a { max-width: 100%; overflow-wrap: anywhere; }
.demo-services,.demo-process { padding: clamp(74px,10vw,160px) clamp(20px,6vw,96px); }
.demo-services>header,.demo-process>header { display: grid; grid-template-columns: minmax(140px,.35fr) minmax(0,1.65fr); gap: 40px; margin-bottom: clamp(48px,7vw,100px); }
.demo-services>div { border-top: 2px solid currentColor; }
.demo-services article { display: grid; grid-template-columns: 60px minmax(220px,.6fr) minmax(280px,1.4fr); gap: clamp(18px,4vw,64px); align-items: baseline; padding: clamp(22px,3vw,42px) 0; border-bottom: 2px solid currentColor; }
.demo-services article>span { font-weight: 900; }
.demo-services article p { max-width: 55ch; margin: 0; }
.demo-about { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); min-height: 70svh; color: var(--demo-bg); background: var(--demo-ink); }
.demo-about-mark { display: grid; place-items: center; padding: 40px; overflow: hidden; color: var(--demo-ink); background: var(--demo-accent-2); font: 800 clamp(1.4rem,3vw,3.8rem)/1 var(--demo-display),Impact,sans-serif; text-align: center; text-transform: uppercase; }
.demo-about>div:last-child { display: grid; align-content: center; padding: clamp(60px,9vw,150px); }
.demo-about>div:last-child>p:last-child { max-width: 65ch; font-size: 1.1rem; }
.demo-process ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0; padding: 0; border: 2px solid currentColor; list-style: none; }
.demo-process li { min-height: 280px; padding: clamp(24px,4vw,54px); border-right: 2px solid currentColor; }
.demo-process li:last-child { border-right: 0; }
.demo-process li>span { display: block; margin-bottom: 70px; font: 800 2rem/1 var(--demo-display),Impact,sans-serif; }
.demo-process li p { max-width: 38ch; }
.demo-proof-safe { display: grid; grid-template-columns: 170px minmax(260px,.8fr) minmax(280px,1.2fr); gap: 40px; padding: clamp(44px,7vw,96px) clamp(20px,6vw,96px); color: var(--demo-bg); background: var(--demo-accent); }
.demo-proof-safe h2 { font-size: clamp(2rem,3vw,3.6rem); }
.demo-proof-safe>p:last-child { max-width: 58ch; margin: 0; }
.demo-visit { display: grid; grid-template-columns: 170px minmax(260px,.8fr) minmax(280px,1.2fr); gap: 40px; align-items: start; padding: clamp(60px,8vw,120px) clamp(20px,6vw,96px); border-bottom: 2px solid currentColor; background: var(--demo-surface); }
.demo-visit>p:first-child { margin: 0; font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.demo-visit>p:last-child { max-width: 58ch; margin: 0; }
.demo-close { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: end; padding: clamp(70px,10vw,160px) clamp(20px,6vw,96px); }
.demo-close>div>p:last-child { max-width: 58ch; }
.demo-close>a { display: inline-flex; min-height: 56px; align-items: center; font-weight: 900; }
.demo-site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; min-height: 100px; padding: 24px clamp(20px,6vw,96px); border-top: 2px solid currentColor; }
.demo-site-footer a { min-height: 44px; align-content: center; }

/* Permit-set index: structural rules and drawing stamps. */
[data-layout*="Permit-set"] .demo-hero-scene { background: var(--demo-surface); }
[data-layout*="Permit-set"] .demo-hero-scene::before { inset: 0; background: linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--demo-ink) 30%,transparent) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,color-mix(in srgb,var(--demo-ink) 30%,transparent) 50%,transparent 50.3%); background-size: 76px 76px; }
[data-layout*="Permit-set"] .demo-scene-core { transform: rotate(-2deg); }
[data-layout*="Permit-set"] .demo-services article:nth-child(even) { padding-left: 8vw; }

/* Roofing: protective horizon with the CTA held beneath the roof line. */
[data-layout*="weather horizon"] .demo-hero { color: var(--demo-ink); }
[data-layout*="weather horizon"] .demo-hero-scene { background: var(--demo-surface); clip-path: polygon(0 13%,50% 0,100% 13%,100% 100%,0 100%); }
[data-layout*="weather horizon"] .demo-hero-scene::before { inset: 38% -20% auto; height: 9px; background: var(--demo-accent); transform: rotate(-8deg); }
[data-layout*="weather horizon"] .demo-scene-core { color: var(--demo-bg); background: var(--demo-ink); box-shadow: 18px 18px 0 var(--demo-accent); }

/* Landscape: topographic paths with broad, planted intervals. */
[data-layout*="Topographic"] .demo-hero-scene { border-radius: 50% 0 0 50%; background: var(--demo-accent-2); }
[data-layout*="Topographic"] .demo-hero-scene::before { inset: 8%; border: 3px solid var(--demo-accent); border-radius: 48% 52% 60% 40%; }
[data-layout*="Topographic"] .demo-hero-scene::after { inset: 18%; border: 3px solid var(--demo-accent); border-radius: 60% 40% 45% 55%; }
[data-layout*="Topographic"] .demo-services article { grid-template-columns: 80px 1fr; }
[data-layout*="Topographic"] .demo-services article p { grid-column: 2; }

/* Plumbing: branching utility diagram. */
[data-layout*="Branching"] .demo-hero-scene { background: var(--demo-surface); }
[data-layout*="Branching"] .demo-hero-scene::before { inset: 8% 45% 8% auto; width: 18px; background: var(--demo-accent); box-shadow: 90px 90px 0 var(--demo-accent-2),-90px 180px 0 var(--demo-accent); }
[data-layout*="Branching"] .demo-scene-core { border-radius: 80px 0 0; box-shadow: 16px 16px 0 var(--demo-accent); }
[data-layout*="Branching"] .demo-services article:nth-child(even) { color: var(--demo-bg); background: var(--demo-accent); padding-inline: 24px; }

/* Electrical: breaker directory, ordered and high contrast. */
[data-layout*="breaker"] .demo-hero-scene { background: var(--demo-ink); }
[data-layout*="breaker"] .demo-hero-scene::before { inset: 7%; border: 2px solid var(--demo-accent); background: repeating-linear-gradient(90deg,transparent 0 52px,color-mix(in srgb,var(--demo-accent) 35%,transparent) 52px 54px); }
[data-layout*="breaker"] .demo-scene-core { color: var(--demo-ink); background: var(--demo-accent); box-shadow: 18px 18px 0 var(--demo-accent-2); }
[data-layout*="breaker"] .demo-services article { grid-template-columns: 72px 1fr 1fr; }

/* HVAC: one continuous airflow line crosses hot and cool fields. */
[data-layout*="airflow"] .demo-hero-scene { background: linear-gradient(90deg,var(--demo-accent) 0 50%,var(--demo-accent-2) 50%); }
[data-layout*="airflow"] .demo-hero-scene::before { top: 50%; right: -10%; left: -10%; height: 16px; border: 4px solid var(--demo-ink); border-right: 0; border-left: 0; transform: rotate(-9deg); }
[data-layout*="airflow"] .demo-scene-core { box-shadow: none; }

/* Cleaning: rooms fold into an explicit scope. */
[data-layout*="Folded"] .demo-hero-scene { background: conic-gradient(from 90deg at 50% 50%,var(--demo-accent-2) 0 25%,var(--demo-surface) 0 50%,var(--demo-accent) 0 75%,var(--demo-bg) 0); }
[data-layout*="Folded"] .demo-scene-core { transform: rotate(3deg); }
[data-layout*="Folded"] .demo-services>div { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid currentColor; }
[data-layout*="Folded"] .demo-services article { grid-template-columns: 48px 1fr; border: 0; padding: 34px; }
[data-layout*="Folded"] .demo-services article p { grid-column: 2; }

/* Salon: type becomes the architecture and service runway. */
[data-layout*="wordmark"] .demo-hero { grid-template-columns: .8fr 1.2fr; }
[data-layout*="wordmark"] .demo-site-header,[data-layout*="pressure atlas"] .demo-site-header,[data-layout*="shelf wall"] .demo-site-header,[data-layout*="wrapping table"] .demo-site-header { color: var(--demo-surface); }
[data-layout*="wordmark"] .demo-hero-copy { background: var(--demo-surface); }
[data-layout*="wordmark"] .demo-hero-scene { background: var(--demo-bg); }
[data-layout*="wordmark"] .demo-hero-scene::before { inset: 0; background: linear-gradient(118deg,transparent 0 47%,var(--demo-accent) 47.2% 55%,transparent 55.2%); }
[data-layout*="wordmark"] .demo-scene-core { width: 88%; color: var(--demo-ink); background: var(--demo-accent); transform: rotate(-5deg); box-shadow: 18px 18px 0 var(--demo-accent-2); }
[data-layout*="wordmark"] .demo-services article:nth-child(odd) { transform: translateX(7vw); }

/* Massage: pressure atlas stays anchored while copy moves past it. */
[data-layout*="pressure atlas"] .demo-hero { grid-template-columns: .72fr 1.28fr; color: var(--demo-surface); background: var(--demo-bg); }
[data-layout*="pressure atlas"] .demo-hero-scene { grid-column: 1; grid-row: 1; background: var(--demo-bg); }
[data-layout*="pressure atlas"] .demo-hero-copy { grid-column: 2; color: var(--demo-ink); background: var(--demo-surface); }
[data-layout*="pressure atlas"] .demo-hero-scene::before,[data-layout*="pressure atlas"] .demo-hero-scene::after { width: 70%; aspect-ratio: 1; border: 3px solid var(--demo-accent); border-radius: 50%; }
[data-layout*="pressure atlas"] .demo-hero-scene::after { width: 45%; border-color: var(--demo-accent-2); }
[data-layout*="pressure atlas"] .demo-scene-core { color: var(--demo-surface); background: transparent; box-shadow: none; }

/* Bookstore: shelf spines expand sideways. */
[data-layout*="shelf wall"] .demo-hero { grid-template-columns: 1.15fr .85fr; color: var(--demo-surface); background: var(--demo-bg); }
[data-layout*="shelf wall"] .demo-hero-scene { background: repeating-linear-gradient(90deg,var(--demo-accent) 0 15%,var(--demo-accent-2) 15% 18%,var(--demo-bg) 18% 34%); }
[data-layout*="shelf wall"] .demo-scene-core { color: var(--demo-ink); background: var(--demo-accent); box-shadow: 18px 18px 0 var(--demo-accent-2); transform: rotate(90deg) scale(.8); }
[data-layout*="shelf wall"] .demo-services>div { display: flex; overflow-x: auto; border: 0; }
[data-layout*="shelf wall"] .demo-services article { min-width: min(76vw,360px); grid-template-columns: 1fr; align-content: space-between; border: 2px solid currentColor; padding: 34px; }

/* Florist: a diagonal wrapping table assembles the request. */
[data-layout*="wrapping table"] .demo-hero { color: var(--demo-surface); background: var(--demo-bg); }
[data-layout*="wrapping table"] .demo-hero-scene { background: var(--demo-accent-2); clip-path: polygon(15% 0,100% 0,100% 100%,0 80%); }
[data-layout*="wrapping table"] .demo-hero-scene::before { inset: -20% 44% -20% auto; width: 14%; background: var(--demo-accent); transform: rotate(18deg); }
[data-layout*="wrapping table"] .demo-scene-core { color: var(--demo-ink); background: var(--demo-surface); box-shadow: 18px 18px 0 var(--demo-accent); transform: rotate(4deg); }
[data-layout*="wrapping table"] .demo-services article { border: 2px solid currentColor; margin-top: -2px; padding-inline: 24px; transform: rotate(calc((var(--i,0) - 2) * .35deg)); }

@media (max-width: 900px) {
  .concept-ribbon { grid-template-columns: 1fr auto; }
  .concept-ribbon span,.concept-ribbon strong { display: none; }
  .demo-site-header { grid-template-columns: 1fr; }
  .demo-site-header nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .demo-enhanced .demo-site-header { grid-template-columns: minmax(0,1fr) auto; }
  .demo-enhanced .demo-menu { display: block; justify-self: end; }
  .demo-enhanced .demo-site-header nav { position: absolute; top: 100%; right: 12px; left: 12px; display: none; padding: 12px; border: 2px solid currentColor; background: var(--demo-bg); box-shadow: 8px 8px 0 var(--demo-accent); }
  .demo-enhanced .demo-site-header nav[data-open="true"] { display: grid; }
  .demo-hero,[data-layout*="wordmark"] .demo-hero,[data-layout*="pressure atlas"] .demo-hero,[data-layout*="shelf wall"] .demo-hero { grid-template-columns: 1fr; }
  [data-layout*="pressure atlas"] .demo-hero-copy,[data-layout*="pressure atlas"] .demo-hero-scene { grid-column: 1; grid-row: auto; }
  .demo-hero-copy { min-height: 64svh; padding: 64px 22px; }
  h1 { font-size: clamp(3.4rem,15vw,5.8rem); }
  .demo-hero-scene { min-height: 460px; }
  .demo-services,.demo-process { padding: 70px 20px; }
  .demo-task { padding: 70px 20px; }
  .demo-task>header { grid-template-columns: 1fr; gap: 8px; }
  .demo-task[data-task-mode="index"] li { grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; }
  .demo-task[data-task-mode="index"] li p { grid-column: 2; margin: 0; }
  .demo-task[data-task-mode="map"] { grid-template-columns: 1fr; }
  .demo-task-map { min-height: 360px; }
  .demo-task-assembly { grid-template-columns: 1fr; gap: 10px; }
  .demo-task-assembly button { min-height: 240px; margin: 0; }
  .demo-task-footer { grid-template-columns: 1fr; align-items: start; }
  .demo-task-footer a { justify-self: start; }
  .permit-lines li { grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 18px 0; }
  .permit-lines li p { grid-column: 2; margin: 0; }
  .demo-task[data-task-mode="roof"],.demo-task[data-task-mode="landscape"],.demo-task[data-task-mode="comfort"],.demo-task[data-task-mode="bodywork"] { grid-template-columns: 1fr; }
  .roof-gauge,.landscape-map,.comfort-duct,.bodywork-atlas { min-height: 300px; }
  .pipe-route { grid-template-columns: 1fr; gap: 0; padding: 28px 18px; overflow: visible; }
  .pipe-route::before { top: 28px; right: auto; bottom: 28px; left: 40px; width: 14px; height: auto; transform: none; }
  .pipe-route>div { grid-template-columns: 44px minmax(0,1fr); justify-items: stretch; align-items: center; gap: 12px; padding: 8px 0; }
  .pipe-route i { width: 44px; height: 14px; }
  .pipe-route button { min-height: 64px; border-radius: 40px 0 0 40px; }
  .pipe-source,.pipe-end { position: relative; top: auto; right: auto; left: auto; justify-self: start; margin: 5px 0; }
  .breaker-list>div { grid-template-columns: 82px minmax(0,1fr) 52px; }
  .breaker-list span,.breaker-list b { padding: 10px; }
  .breaker-list button { padding: 12px; font-size: 1.3rem; }
  .comfort-choices button { flex-basis: 100%; border-radius: 0!important; }
  .comfort-locations { display: grid; grid-template-columns: 1fr; }
  .room-plan { grid-template-columns: 1fr; }
  .visit-types { grid-template-columns: 1fr 1fr; }
  .visit-types button { border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .visit-types button:nth-child(2n) { border-right: 0; }
  .visit-types button:nth-last-child(-n+2) { border-bottom: 0; }
  .room-plan button { min-height: 160px; border-right: 0; border-bottom: 2px solid currentColor; }
  .room-plan button:nth-last-child(-n+2) { border-bottom: 2px solid currentColor; }
  .room-plan button:last-child { border-bottom: 0; }
  .salon-runway>div { grid-template-columns: 44px minmax(0,1fr); padding-block: 10px; }
  .salon-runway>div>span { padding: 10px; }
  .salon-runway button { min-height: 72px; padding: 12px; border-right: 0; }
  .salon-runway small { grid-column: 2; padding: 10px 12px; }
  .bodywork-atlas { width: min(100%,420px); aspect-ratio: 1; justify-self: center; }
  .gift-folds { grid-template-columns: 1fr; gap: 12px; }
  .gift-folds button { min-height: 250px; margin: 0; }
  .demo-services>header,.demo-process>header { grid-template-columns: 1fr; gap: 8px; margin-bottom: 42px; }
  .demo-services article,[data-layout*="breaker"] .demo-services article { grid-template-columns: 44px 1fr; gap: 12px; }
  .demo-services article p { grid-column: 2; }
  [data-layout*="Folded"] .demo-services>div { grid-template-columns: 1fr; }
  [data-layout*="Topographic"] .demo-hero-scene { border-radius: 50% 50% 0 0; }
  .demo-about { grid-template-columns: 1fr; }
  .demo-about-mark { min-height: 300px; }
  .demo-about>div:last-child { padding: 70px 20px; }
  .demo-process ol { grid-template-columns: 1fr; }
  .demo-process li { min-height: 0; border-right: 0; border-bottom: 2px solid currentColor; }
  .demo-process li:last-child { border-bottom: 0; }
  .demo-process li>span { margin-bottom: 24px; }
  .demo-proof-safe { grid-template-columns: 1fr; gap: 12px; padding: 54px 20px; }
  .demo-visit { grid-template-columns: 1fr; gap: 12px; padding: 54px 20px; }
  .demo-close { grid-template-columns: 1fr; align-items: start; padding: 70px 20px; }
  .demo-close>a { justify-self: start; }
  .demo-site-footer { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 480px) {
  .concept-ribbon { padding-inline: 12px; font-size: .58rem; }
  .concept-ribbon a:last-child { max-width: 18ch; text-align: right; }
  .demo-site-header { min-height: 64px; padding-inline: 14px; }
  .demo-logo { max-width: 23ch; font-family: var(--demo-body),Arial,sans-serif; font-size: 1rem; }
  .demo-hero-copy { min-height: 560px; }
  .demo-hero-scene { min-height: 380px; }
  .demo-scene-core { width: 84%; min-height: 58%; padding: 24px; box-shadow: 10px 10px 0 var(--demo-accent-2); }
  .demo-scene-core strong { font-size: 2.8rem; }
  .demo-services article { padding: 20px 0; }
  .demo-services article h3 { font-size: 1.5rem; }
  .demo-about-mark { min-height: 220px; padding: 22px; }
  .demo-task[data-task-mode="chooser"]>div { grid-template-columns: 1fr; }
  .demo-task[data-task-mode="chooser"] button { border-right: 0; border-bottom: 2px solid currentColor; }
  .demo-task[data-task-mode="chooser"] button:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}