/* Layout: editorial 12-column grid on warm ivory; one chocolate band carries the signature demo.
   Graphic language: twisting translucent ribbons, folded glass, connected square/diamond nodes, pearlescent edges. No spheres. */
:root {
  --ivory: #FBF7F0; --paper: #F4EDE3; --beige: #E8DDCE; --line: #DCCFBF;
  --choc: #4B3027; --choc-deep: #3A2620; --ink: #201D1B; --muted: #6A574C; --plum: #523857;
  --lilac: #C7B5E8; --peri: #AAB9FF; --blush: #F2B8D5; --mint: #A8E6D7; --peach: #FFC6AC;
  --on-dark: #FBF7F0; --on-dark-muted: #D9CBBB; --dark-line: rgba(251,247,240,0.16);
  --pearl: linear-gradient(115deg, #C7B5E8 0%, #AAB9FF 28%, #A8E6D7 52%, #F2B8D5 76%, #FFC6AC 100%);
  --display: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --max: 1240px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ivory); }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); color: var(--choc); margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--choc); color: var(--on-dark); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
:focus-visible { outline: 2px solid var(--choc); outline-offset: 3px; border-radius: 8px; }
.band-dark :focus-visible { outline-color: var(--on-dark); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.label { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--choc); display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; }
.h2 b { font-weight: 700; }
.intro { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* ---------- buttons ---------- */
.btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-dark { background: var(--choc); color: var(--on-dark); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -14px rgba(75,48,39,.7); }
.btn-dark:hover { background: var(--choc-deep); }
.btn-line { color: var(--choc); border-color: rgba(75,48,39,.32); background: rgba(251,247,240,.6); }
.btn-line:hover { border-color: var(--choc); }
.btn-sm { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-pearl { position: relative; color: var(--choc); background: var(--ivory); isolation: isolate; }
.btn-pearl::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--pearl); z-index: -1; }
.btn-pearl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ivory); z-index: -1; }
.btn-ghost-dark { color: var(--on-dark); border-color: var(--dark-line); background: transparent; }
.btn-ghost-dark:hover { border-color: rgba(251,247,240,.5); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arr { transition: none; } .btn:hover { transform: none; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(251,247,240,.86); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--choc); }
.brand svg { height: 34px; width: auto; display: block; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink); padding: 6px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--pearl); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav-toggle { display: none; }
.header-contact { display: none; }
@media (max-width: 860px) {
  .header-row { gap: 12px; min-height: 64px; }
  .brand svg { height: 30px; }
  .nav { margin-left: auto; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(75,48,39,.28); background: transparent; color: var(--choc); font: 600 14px var(--text); cursor: pointer; }
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .nav.is-open ul { display: flex; }
  .nav ul a { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--beige); }
  .nav ul a::after { display: none; }
  .header-cta { display: none; }
  .header-contact { display: inline-flex; margin-left: auto; min-height: 44px; }
  .header-contact + .nav { margin-left: 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.display { font-size: clamp(40px, 5.2vw, 78px); line-height: .94; letter-spacing: -0.05em; font-weight: 300; }
@media (max-width: 359px) { .display { font-size: 36px; } }   /* keeps the headline on two lines on the smallest phones */
.display .b { display: block; font-weight: 600; position: relative; }
.display .b::after { content: ""; display: block; height: 3px; width: min(62%, 420px); margin-top: 18px; border-radius: 3px; background: var(--pearl); }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--ink); max-width: 46ch; }
.lead-2 { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 48ch; margin-top: -6px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.for-list { list-style: none; padding: 18px 0 0; margin: 6px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--muted); }
.for-list li { display: inline-flex; align-items: center; gap: 8px; }
.for-list li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--lilac); }
.for-list li:nth-child(2)::before { background: var(--peri); } .for-list li:nth-child(3)::before { background: var(--mint); } .for-list li:nth-child(4)::before { background: var(--blush); }
.hero-ribbons { position: absolute; z-index: 0; inset: 0 0 0 38%; width: 62%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.hero-visual { position: relative; z-index: 1; aspect-ratio: 1 / 0.96; max-width: 100%; touch-action: pan-y; }
.net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net .ln { fill: none; stroke: var(--choc); stroke-width: 1; stroke-opacity: .2; transition: stroke-opacity .25s; }
.net .ln.hot { stroke: url(#pearlStroke); stroke-width: 1.4; }
.net .ln.flow { stroke-dasharray: 3 7; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.net .nd { fill: var(--ivory); stroke: var(--choc); stroke-opacity: .55; stroke-width: 1; transition: fill .25s; }
.net .nd.hot { stroke-opacity: .9; }
.net .junction { fill: var(--choc); fill-opacity: .55; }
.panel-wrap { position: absolute; left: 24%; top: 15%; width: 52%; height: 66%; filter: drop-shadow(0 28px 40px rgba(75,48,39,.14)) drop-shadow(0 2px 3px rgba(75,48,39,.06)); }
.panel { --mx: 50%; --my: 30%; position: absolute; inset: 0; border-radius: 26px; clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%); background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(251,247,240,.62) 55%, rgba(244,237,227,.7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from 210deg, rgba(255,255,255,.95), #C7B5E8, #AAB9FF, #A8E6D7, #F2B8D5, #FFC6AC, rgba(255,255,255,.95)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.panel::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 47%, rgba(199,181,232,.28) 50%, rgba(168,230,215,.22) 53%, transparent 62%); transform: translate(calc((var(--mx) - 50%) * .6), calc((var(--my) - 50%) * .4)); pointer-events: none; transition: transform .5s var(--ease); }
.panel-flap { position: absolute; right: 0; top: 0; width: 64px; height: 64px; background: linear-gradient(225deg, rgba(232,221,206,.0) 50%, rgba(255,255,255,.95) 50.5%, #EDE5F7 72%, #DDF3EC 100%); border-bottom-left-radius: 14px; box-shadow: -4px 4px 10px rgba(75,48,39,.10); z-index: 2; }
.panel .lockup { position: relative; z-index: 1; width: 76%; height: auto; color: var(--choc); }
.panel-caption { position: absolute; left: 24px; bottom: 20px; right: 24px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.fold { position: absolute; pointer-events: none; overflow: visible; }
.fold-a { left: 1%; bottom: 2%; width: 38%; }
.net-hint { position: absolute; right: 0; bottom: -6px; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.net-hint::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--choc); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-ribbons { inset: auto 0 0 0; width: 100%; height: 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .hero-visual { max-width: 520px; width: 100%; justify-self: center; margin-top: 8px; }
  .net-hint { display: none; }
}
@media (hover: none) { .net-hint { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(72px, 10vw, 140px); }
main section[id] { scroll-margin-top: 72px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .label { grid-column: 1 / -1; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); } }
.rule-top { border-top: 1px solid var(--line); }

/* ---------- tilt cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1100px; }
@media (max-width: 960px) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
.tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --ang: 210deg; --lift: 0; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform .6s var(--ease), box-shadow .6s var(--ease); border-radius: 22px; }
.tilt.is-live { transition: transform .12s linear, box-shadow .3s var(--ease); }
.surface { position: relative; height: 100%; border-radius: inherit; background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 46%, #F6F0E7 100%); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.08), 0 18px 40px -26px rgba(75,48,39,.45); overflow: hidden; transform-style: preserve-3d; }
.tilt:hover .surface, .tilt:focus-within .surface, .tilt.is-touched .surface { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.06), 0 30px 56px -30px rgba(75,48,39,.55); }
.surface .edge { position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, #C7B5E8 40deg, #AAB9FF 80deg, #A8E6D7 120deg, #F2B8D5 160deg, rgba(255,255,255,0) 210deg, rgba(255,255,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; }
.surface .sheen { position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 47%, rgba(199,181,232,.32) 50%, rgba(168,230,215,.26) 53%, rgba(242,184,213,.18) 56%, transparent 64%); transform: translate(calc((var(--mx) - 50%) * .7), calc((var(--my) - 50%) * .5)); opacity: 0; transition: opacity .4s, transform .6s var(--ease); pointer-events: none; mix-blend-mode: normal; }
.tilt.is-live .sheen { transition: opacity .4s, transform .12s linear; }
.tilt:hover .edge, .tilt:focus-within .edge, .tilt.is-touched .edge { opacity: 1; }
.tilt:hover .sheen, .tilt.is-touched .sheen { opacity: 1; }
.tilt:focus-within .sheen { opacity: .7; }
.layer-a { transform: translateZ(26px); }
.layer-b { transform: translateZ(14px); }
@media (prefers-reduced-motion: reduce) { .tilt, .tilt.is-live { transform: none !important; transition: none; } .surface .sheen, .tilt.is-live .sheen { transition: opacity .2s; } .layer-a, .layer-b { transform: none; } }

.svc { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; min-height: 100%; }
.svc .glyph { height: 64px; display: flex; align-items: center; }
.svc .glyph svg { width: 112px; height: 64px; overflow: visible; }
.svc h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-top: 6px; }
.svc p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.svc .svc-for { font-size: 14px; line-height: 1.5; color: var(--plum); padding: 10px 12px; border-radius: 12px; background: rgba(199,181,232,.18); }
.svc .svc-for b { font-weight: 600; }
.svc .svc-k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); margin-bottom: -6px; }
.svc .svc-exp { font-size: 13px; line-height: 1.5; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
.svc .svc-exp + .card-link { margin-top: 0; }
.svc .svc-exp b { font-weight: 600; color: var(--choc); }
.tags { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12px; font-weight: 500; color: var(--choc); padding: 5px 10px; border-radius: 999px; background: rgba(232,221,206,.6); }
.card-link { margin-top: auto; padding-top: 10px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--choc); text-decoration: none; }
.card-link .arr { transition: transform .2s var(--ease); }
.card-link:hover .arr { transform: translateX(3px); }
.glyph .g-ln { fill: none; stroke: var(--choc); stroke-opacity: .45; stroke-width: 1.2; }
.glyph .g-nd { fill: var(--ivory); stroke: var(--choc); stroke-width: 1.2; }

/* ---------- compact cards on phones (same content, less scrolling) ---------- */
@media (max-width: 620px) {
  .svc { gap: 11px; padding: 20px 18px 16px; }
  .svc .glyph { height: 40px; }
  .svc .glyph svg { width: 80px; height: 46px; }
  .svc h3 { font-size: 20px; margin-top: 2px; }
  .svc p { font-size: 14.5px; line-height: 1.55; }
  .svc .svc-for { font-size: 13.5px; padding: 9px 11px; }
  .svc .svc-exp { padding-top: 10px; }
  .tags { gap: 5px; } .tags li { padding: 4px 9px; font-size: 11.5px; }
  .card-link { padding-top: 2px; }
  .work-grid { gap: 14px; }
  .proj { gap: 10px; padding: 16px 16px 18px; }
  .proj-map { padding: 14px 12px; min-height: 0; }
  .flowlist { gap: 8px 0; }
  .flowlist li span { padding: 5px 8px; font-size: 12px; }
  .flowlist li + li::before { width: 12px; }
  .proj h3 { font-size: 21px; }
  .proj p { font-size: 14.5px; }
}

/* ---------- demo band ---------- */
.band-dark { background: var(--choc); color: var(--on-dark); position: relative; overflow: hidden; }
.band-dark .h2 { color: var(--on-dark); }
.band-dark .label { color: var(--on-dark-muted); }
.band-dark .intro { color: var(--on-dark-muted); }
.band-dark::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(251,247,240,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(251,247,240,.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.demo-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
@media (max-width: 860px) { .demo-head { grid-template-columns: minmax(0, 1fr); } }
.demo { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 18px; }
.demo-status { font-size: 14px; color: var(--on-dark-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .demo-status { margin-left: 0; width: 100%; } }
.stage { position: relative; height: 470px; border-radius: 26px; background: linear-gradient(180deg, rgba(58,38,32,.65), rgba(58,38,32,.35)); box-shadow: inset 0 0 0 1px var(--dark-line); overflow: hidden; touch-action: pan-y; }
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tangle path { fill: none; stroke: var(--on-dark-muted); stroke-opacity: .42; stroke-width: 1; stroke-dasharray: 3 6; transition: opacity .35s; }
.flow { filter: drop-shadow(0 0 3px rgba(199,181,232,.55)); }
.flow path { fill: none; stroke: url(#flowGrad); stroke-width: 2; stroke-linecap: round; }
.flow path.tool-ln { stroke-width: 1.3; }
.demo[data-state="connected"] .tangle path { opacity: 0; }
.spark { fill: #FFFFFF; opacity: 0; }
.demo[data-state="connected"] .spark { opacity: .95; }
.steps, .tools { list-style: none; margin: 0; padding: 0; }
.step, .tool { position: absolute; left: 0; top: 0; will-change: transform; transition: transform .95s var(--ease) var(--d, 0ms), box-shadow .5s; }
.no-anim .step, .no-anim .tool { transition: none !important; }
.step { width: var(--cw, 180px); min-height: var(--ch, 112px); padding: 14px 16px 14px; border-radius: 16px; background: var(--ivory); color: var(--ink); box-shadow: 0 16px 30px -18px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 4px; }
.step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: var(--pearl); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .6s .5s; }
.demo[data-state="connected"] .step::before { opacity: 1; }
.step-n { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.step p { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 9px; background: #5E4036; border: 1px solid rgba(251,247,240,.26); color: var(--on-dark); font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); transition: transform .95s var(--ease) var(--d, 0ms), background-color .4s, color .4s, border-color .4s; }
.demo[data-state="connected"] .tool { border-color: rgba(251,247,240,.42); }
.tool.docked { background: #EFE6DA; color: var(--choc); border-color: rgba(75,48,39,.16); box-shadow: none; }
.shape { width: 9px; height: 9px; flex: none; border: 1.2px solid currentColor; }
.shape.dia { transform: rotate(45deg) scale(.9); }
.shape.pill { width: 14px; height: 8px; border-radius: 4px; }
.tool[data-accent="lilac"] .shape { background: var(--lilac); border-color: var(--lilac); }
.tool[data-accent="peri"] .shape { background: var(--peri); border-color: var(--peri); }
.tool[data-accent="mint"] .shape { background: var(--mint); border-color: var(--mint); }
.tool[data-accent="blush"] .shape { background: var(--blush); border-color: var(--blush); }
.tool[data-accent="peach"] .shape { background: var(--peach); border-color: var(--peach); }
.demo-foot { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--on-dark-muted); }
.demo-foot span { display: inline-flex; align-items: center; gap: 8px; }
.demo-foot .k-step { width: 14px; height: 9px; border-radius: 3px; background: var(--ivory); }
.demo-foot .k-tool { width: 9px; height: 9px; border: 1.2px solid var(--on-dark-muted); }
.demo-foot .k-dia { width: 8px; height: 8px; border: 1.2px solid var(--on-dark-muted); transform: rotate(45deg); }
.stage.is-narrow .step { padding-bottom: 58px; }
@media (prefers-reduced-motion: reduce) { .step, .tool { transition: none; } .step::before { transition: none; } .flow path { transition: none !important; } .net .ln.flow { animation: none; } }

/* ---------- approach ---------- */
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps4 li { padding: 26px 26px 6px 0; border-top: 1px solid var(--line); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.steps4 li + li { padding-left: 26px; border-left: 1px solid var(--line); }
.steps4 .num { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--choc); display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.steps4 .num::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.steps4 h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
.steps4 p { color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps4 li:nth-child(3) { padding-left: 0; border-left: 0; } .steps4 li { padding-bottom: 28px; } }
@media (max-width: 560px) { .steps4 { grid-template-columns: minmax(0, 1fr); } .steps4 li + li { padding-left: 0; border-left: 0; } }

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1100px; }
@media (max-width: 1000px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
.proj { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; height: 100%; }
.proj-map { position: relative; border-radius: 16px; background: linear-gradient(160deg, #F4EDE3, #FBF7F0); box-shadow: inset 0 0 0 1px rgba(75,48,39,.07); padding: 22px 18px; overflow: hidden; min-height: 168px; display: flex; align-items: center; }
.proj-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.flowlist { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; z-index: 1; }
.flowlist li { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--choc); }
.flowlist li span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(75,48,39,.12), 0 6px 14px -10px rgba(75,48,39,.5); }
.flowlist li span::before { content: ""; width: 7px; height: 7px; border: 1.2px solid var(--choc); background: var(--ivory); flex: none; }
.flowlist li:nth-child(odd) span::before { transform: rotate(45deg); background: var(--lilac); border-color: var(--choc); }
.flowlist li + li::before { content: ""; width: 18px; height: 1px; background: var(--choc); opacity: .45; }
.proj h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.proj .for { font-size: 14px; line-height: 1.55; color: var(--ink); }
.proj .for b, .proj p b { font-weight: 600; color: var(--choc); }
.proj p { font-size: 15px; color: var(--muted); }
.badge { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(82,56,87,.3); }
.note { margin-top: 22px; font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.section-cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 16px; color: var(--ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-weight: 600; color: var(--choc); text-decoration: underline; text-decoration-color: rgba(75,48,39,.3); text-underline-offset: 5px; }
.text-link:hover { text-decoration-color: var(--choc); }
.band-dark .text-link { color: var(--on-dark); text-decoration-color: rgba(251,247,240,.4); }
.demo-cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--dark-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 16px; color: var(--on-dark); }
.note::before { content: ""; width: 8px; height: 8px; margin-top: 7px; flex: none; transform: rotate(45deg); background: var(--peri); }

/* ---------- portfolio: client case study ---------- */
.case { border-radius: 22px; }
.case-surface { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 3vw, 32px); align-items: center; }
.case-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.case-meta { font-size: 12.5px; color: var(--muted); }
.case h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-top: 14px; }
.case-facts { margin: 18px 0 0; display: grid; gap: 14px; }
.case-facts div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--choc); padding-top: 3px; }
.case-facts dd { margin: 0; font-size: 15px; color: var(--ink); }
.case-visual { margin: 0; }
.case-visual .proj-map { min-height: 200px; }
.case-visual figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
/* ---------- portfolio: demonstration projects ---------- */
.demos { margin-top: clamp(40px, 5vw, 64px); }
.demos-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 40px; align-items: end; }
.demos-title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.demos-head p { font-size: 15px; color: var(--muted); max-width: 60ch; }
.tabs { display: none; flex-wrap: wrap; gap: 8px; margin-top: 24px; scroll-margin-top: 90px; }
.has-tabs .tabs { display: flex; }
.tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(75,48,39,.28); background: rgba(251,247,240,.7); color: var(--choc); font: 600 14.5px var(--text); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tab:hover { border-color: var(--choc); }
.tab[aria-selected="true"] { background: var(--choc); color: var(--on-dark); border-color: var(--choc); }
.demo-panel { margin-top: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 50%, #F6F0E7 100%); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.08), 0 18px 40px -26px rgba(75,48,39,.45); }
.demo-panel[hidden] { display: none; }
.demo-panel:focus-visible { outline-offset: 4px; }
.panel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.concept { font-size: 12.5px; color: var(--muted); }
.demo-panel h4 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--choc); margin: 14px 0 0; }
.panel-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 16px; }
.panel-why p { font-size: 15px; color: var(--ink); }
.panel-why b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--choc); margin-bottom: 4px; }
.sample-note { margin-top: 18px; font-size: 13px; color: var(--plum); display: flex; gap: 8px; align-items: baseline; }
.sample-note::before { content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg) translateY(-1px); background: var(--lilac); }
.demo-panel h5 { font-family: var(--display); font-size: 15.5px; font-weight: 600; color: var(--choc); margin: 0; line-height: 1.25; }
/* A: service blueprint */
.bp-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.bp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bp-legend span::before { content: ""; width: 14px; height: 10px; border-radius: 3px; }
.lg-front::before { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(75,48,39,.18); }
.lg-back::before { background: rgba(232,221,206,.9); }
.bp { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.bp::before { content: ""; position: absolute; top: 14px; left: 14px; right: calc((100% - 48px) / 5 - 14px); height: 1.5px; background: var(--pearl); }
.bp li { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bp-n { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; background: var(--ivory); box-shadow: inset 0 0 0 1.3px var(--choc); border-radius: 8px; font: 600 12px var(--display); color: var(--choc); margin-bottom: 4px; }
.bp-front, .bp-back { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; }
.bp-front { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(75,48,39,.12); color: var(--ink); }
.bp-back { background: rgba(232,221,206,.6); color: var(--ink); }
/* B: pipeline board */
.board { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.col { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(232,221,206,.45); box-shadow: inset 0 0 0 1px rgba(75,48,39,.06); min-width: 0; }
.col .rule { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.recs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.recs li { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.10), 0 6px 14px -12px rgba(75,48,39,.5); font-size: 12.5px; color: var(--ink); }
.recs b { font-size: 12px; font-weight: 600; color: var(--choc); }
.recs .next { color: var(--plum); }
/* C: follow-up sequence */
.seq { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; display: grid; gap: 14px; position: relative; }
.seq::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(180deg, #C7B5E8, #AAB9FF, #A8E6D7, #F2B8D5); }
.seq li { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 18px; align-items: start; }
.seq li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--ivory); box-shadow: inset 0 0 0 1.3px var(--choc); }
.when { grid-row: span 2; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--plum); padding-top: 1px; }
.seq blockquote, .seq-end p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.seq blockquote { padding: 10px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(75,48,39,.12); font-style: italic; }
.seq-rules { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seq-rules li { font-size: 13px; padding: 7px 12px; border-radius: 999px; background: rgba(168,230,215,.35); color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1000px) {
  .case-surface { grid-template-columns: minmax(0, 1fr); }
  .bp { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bp::before { top: 14px; bottom: 14px; left: 13px; right: auto; width: 1.5px; height: auto; }
  .bp li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  .bp-n { grid-row: span 4; margin: 0; }
  .bp li > :not(.bp-n) { grid-column: 2; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .demos-head, .panel-why { grid-template-columns: minmax(0, 1fr); }
  .case-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .tab { flex: 1 1 auto; padding: 0 14px; font-size: 14px; }
  .seq li { grid-template-columns: minmax(0, 1fr); }
  .when { grid-row: auto; }
}
.t-short { display: none; }
@media (max-width: 620px) {
  .t-long { display: none; } .t-short { display: inline; }
  .tabs { flex-wrap: nowrap; } .tab { flex: 1 1 0; padding: 0 8px; }
  .demo-panel { padding: 18px 16px; }
  .case-surface { padding: 18px 16px; }
  .case-facts { gap: 10px; } .case-facts div { padding-top: 10px; }
  .recs li + li { display: none; }
  .col { padding: 10px; }
  .panel-why { gap: 10px; }
}
/* ---------- connected workflow ---------- */
.concept-line { margin-top: 14px; font-size: 13.5px; color: var(--ink); padding: 10px 14px; border-radius: 12px; background: rgba(232,221,206,.55); }
.concept-line b { color: var(--choc); }
.flow-strip { margin-top: 18px; }
.fs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; }
.fs-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 1.5px; background: var(--pearl); z-index: 0; }
.fs-step { position: relative; z-index: 1; width: 100%; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--ivory); color: var(--choc); cursor: pointer; font: inherit; }
.fs-step:hover { border-color: var(--choc); }
.fs-step[aria-current="step"] { border-color: var(--choc); box-shadow: inset 0 0 0 1px var(--choc); }
.fs-n { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1.3px var(--choc); font: 600 12px var(--display); }
.fs-step[aria-current="step"] .fs-n { background: var(--choc); color: var(--on-dark); }
.fs-t { font: 600 14.5px var(--display); line-height: 1.2; }
.fs-s { font-size: 12.5px; color: var(--muted); }
.fs-sample { margin-top: 12px; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sample-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--plum); padding: 4px 10px; border-radius: 999px; background: rgba(199,181,232,.28); }
.sample-tag::before, .lg-sample::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--plum); border-radius: 1px; }
.lg-sample::before { width: 8px; height: 8px; }
.bp-sample, .seq-sample { font-size: 12.5px; line-height: 1.45; color: var(--plum); padding: 7px 10px; border-radius: 10px; background: rgba(199,181,232,.2); border-left: 2px solid var(--plum); }
.bp-sample[data-state="later"], .seq-sample[data-state="only-if-needed"] { opacity: .8; border-left-style: dashed; }
.st { display: inline-block; margin-right: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.seq-sample { grid-column: 2; margin-top: 2px; }
.recs li.is-sample { box-shadow: 0 0 0 1.5px var(--plum), 0 8px 18px -12px rgba(82,56,87,.6); }
.you-are-here { margin-top: 4px; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); background: var(--plum); padding: 2px 8px; border-radius: 999px; }
.handoff { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; }
.handoff .text-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
@media (max-width: 620px) {
  .fs-steps { gap: 6px; }
  .fs-step { min-height: 52px; padding: 6px 8px; grid-template-columns: minmax(0, 1fr); row-gap: 4px; justify-items: start; }
  .fs-s { display: none; } .fs-n { grid-row: auto; width: 22px; height: 22px; font-size: 11px; }
  .fs-t { font-size: 12.5px; }
  .fs-sample { margin-top: 8px; font-size: 12.5px; }
  .demos-head p { display: none; }
  .case-visual .proj-map { min-height: 0; }
  .case-visual figcaption { margin-top: 6px; }
  .demos { margin-top: 32px; }
  .handoff { margin-top: 12px; }
  .bp li { row-gap: 5px; }
  .bp-front, .bp-back { font-size: 13px; padding: 7px 10px; }
  .bp-sample { padding: 5px 8px; font-size: 12px; }
  .panel-why p { font-size: 14.5px; }
  .seq-sample { grid-column: 1; }
  .recs li.is-sample + li { display: none; }
}
/* ================= Round 7 preview: Process — visuals first, details on demand ================= */
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; position: relative; }
.pcards::before { content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; top: 98px; height: 1.5px; background: var(--pearl); }
.pcard { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 14px 14px 18px; border-radius: 26px; background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 70%); box-shadow: 0 0 0 1px rgba(75,48,39,.08), 0 22px 44px -32px rgba(75,48,39,.55); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover, .pcard:focus-within { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(75,48,39,.14), 0 30px 56px -32px rgba(75,48,39,.6); }
.pcard-art { height: 168px; border-radius: 18px; background: linear-gradient(160deg, #F4EDE3, #FBF7F0); box-shadow: inset 0 0 0 1px rgba(75,48,39,.06); display: grid; place-items: center; }
.pcard-art svg, .xd-art svg { width: min(80%, 250px); height: auto; overflow: visible; }
.glyph .g-ln.dash { stroke-dasharray: 3 4; stroke-opacity: .35; }
.pcard-top { display: flex; align-items: center; gap: 10px; margin: 18px 8px 0; }
.pcard-mark { width: 10px; height: 10px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.3px var(--choc); }
.pcard:nth-child(1) .pcard-mark { background: var(--lilac); } .pcard:nth-child(2) .pcard-mark { background: var(--peri); } .pcard:nth-child(3) .pcard-mark { background: var(--mint); }
.pcard-n { font: 600 12.5px var(--display); letter-spacing: .14em; color: var(--muted); }
.pcard h3 { margin: 8px 8px 0; font-size: clamp(22px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; }
.pcard > p { margin: 6px 8px 0; font-size: 15px; color: var(--muted); max-width: 32ch; }
.xlink { color: var(--choc); }
.pcard .xlink { margin: 10px 8px 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
.pcard .xlink .arr { transition: transform .2s var(--ease); }
.pcard:hover .xlink .arr { transform: translateX(3px); }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }
.pcard .stretch:focus-visible { outline: none; }
.pcard .stretch:focus-visible::after { outline: 2px solid var(--choc); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard .xlink .arr { transition: none; } .pcard:hover, .pcard:focus-within { transform: none; } }

/* ================= Round 7 preview: Systems in action ================= */
.sv { margin-top: clamp(48px, 6vw, 80px); }
.sv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "i c"; gap: 6px 32px; align-items: end; }
.sv-title { grid-area: t; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; }
.sv-intro { grid-area: i; font-size: 16px; color: var(--muted); }
.sv-concept { grid-area: c; align-self: end; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 9px 14px; border-radius: 14px; background: rgba(232,221,206,.55); font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.sv-concept b { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); background: var(--plum); padding: 4px 9px; border-radius: 999px; }
.sv-tabs { display: none; gap: 8px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; scroll-margin-top: 90px; padding: 2px; }
.sv-tabs::-webkit-scrollbar { display: none; }
.has-tabs .sv-tabs { display: flex; }
.sv-tab { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(75,48,39,.2); background: rgba(251,247,240,.8); color: var(--choc); font: 600 14.5px var(--text); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.sv-tab:hover { border-color: var(--choc); }
.sv-tab .ic { width: 18px; height: 18px; }
.sv-tab[aria-selected="true"] { background: var(--choc); border-color: var(--choc); color: var(--on-dark); box-shadow: 0 10px 22px -14px rgba(75,48,39,.9); }
.sv-panel { margin-top: 18px; }
.sv-panel[hidden], .pick-pane[hidden], [data-pick-empty][hidden] { display: none; }
.sv-panel:focus-visible { outline-offset: 6px; border-radius: 26px; }
.sv-panel + .sv-panel { margin-top: 36px; }
.has-tabs .sv-panel + .sv-panel { margin-top: 18px; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic .fill { fill: currentColor; stroke: none; }
/* window chrome */
.mock { position: relative; border-radius: 26px; background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 58%, #F5EEE4 100%); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.09), 0 40px 80px -50px rgba(75,48,39,.6); overflow: hidden; }
.mk-bar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 22px; background: rgba(232,221,206,.4); }
.mk-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--pearl); }
.mk-mono { height: 26px; width: auto; color: var(--choc); flex: none; }
.mk-title { font: 600 15px var(--display); color: var(--choc); }
.mk-chip { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(82,56,87,.35); }
.mk-stage { padding: clamp(22px, 3.4vw, 44px); min-height: 400px; }
/* journey */
.jline { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.jline::before { content: ""; position: absolute; top: 36px; left: 10%; width: 60%; height: 2px; background: var(--choc); }
.jline::after { content: ""; position: absolute; top: 36px; left: 70%; width: 20%; border-top: 2px dashed rgba(75,48,39,.3); }
.js { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.js-ic { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: #FFFFFF; color: var(--choc); box-shadow: 0 0 0 1px rgba(75,48,39,.12), 0 14px 28px -18px rgba(75,48,39,.6); }
.js-ic .ic { width: 30px; height: 30px; }
.js[data-state="done"] .js-ic { background: var(--choc); color: var(--on-dark); }
.js[data-state="now"] .js-ic { background: linear-gradient(150deg, #EDE5F8, #C7B5E8); color: var(--plum); box-shadow: 0 0 0 1.6px var(--plum), 0 0 0 9px rgba(199,181,232,.35), 0 18px 34px -16px rgba(82,56,87,.6); transform: scale(1.08); }
.js[data-state="later"] .js-ic { background: transparent; color: var(--muted); box-shadow: none; outline: 1.5px dashed rgba(75,48,39,.4); outline-offset: -1.5px; }
.js-l { font: 600 16px var(--display); color: var(--choc); margin-top: 4px; }
.js-s { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.js-s .ic { width: 14px; height: 14px; stroke-width: 2.2; color: var(--choc); }
.js[data-state="now"] .js-s { color: var(--plum); }
.js-flag { position: absolute; top: -42px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); background: var(--plum); padding: 4px 11px; border-radius: 999px; }
.jcard { margin: 44px auto 0; max-width: 560px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.1), 0 20px 40px -28px rgba(75,48,39,.6); }
.jcard-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(199,181,232,.3); color: var(--plum); }
.jcard-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--muted); }
.jcard-t b { font: 600 15px var(--display); color: var(--ink); }
.jcard-pill { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); padding: 5px 10px; border-radius: 999px; background: rgba(199,181,232,.3); }
/* CRM board */
.kb-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.kb-k { font: 600 18px var(--display); color: var(--choc); margin-right: 8px; }
.kb-pill { font-size: 12.5px; font-weight: 600; color: var(--choc); padding: 5px 12px; border-radius: 999px; background: rgba(232,221,206,.7); }
.kb-pill.on { background: var(--choc); color: var(--on-dark); }
.kb-count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.kboard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kcol { --acc: var(--lilac); min-width: 0; padding: 10px; border-radius: 18px; background: rgba(232,221,206,.4); }
.kcol[data-accent="peri"] { --acc: var(--peri); } .kcol[data-accent="plum"] { --acc: var(--plum); } .kcol[data-accent="mint"] { --acc: var(--mint); } .kcol[data-accent="peach"] { --acc: var(--peach); }
.kcol[data-focus] { background: rgba(199,181,232,.25); box-shadow: inset 0 0 0 1px rgba(82,56,87,.18); }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.kcol-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--acc); flex: none; }
.kcol-t { font: 600 13.5px var(--display); color: var(--choc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcol-n { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--choc); background: rgba(251,247,240,.95); }
.kcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kc { display: flex; flex-direction: column; gap: 8px; padding: 11px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.08), 0 8px 18px -14px rgba(75,48,39,.55); }
.kc-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kc-row b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.kc-av { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font: 600 10.5px var(--display); color: var(--choc); background: color-mix(in srgb, var(--acc) 38%, #FFFFFF); }
.kc-av.s { background: var(--plum); color: var(--on-dark); }
.kc-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.kc-ch { display: inline-grid; place-items: center; color: var(--choc); }
.kc-ch .ic { width: 15px; height: 15px; }
.kc-due { margin-left: auto; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--plum); }
.kc.is-sample { box-shadow: 0 0 0 1.7px var(--plum), 0 16px 30px -18px rgba(82,56,87,.75); }
.kc-tag { align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark); background: var(--plum); padding: 2px 8px; border-radius: 999px; }
/* follow-up timeline */
.fline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .8fr); gap: 14px; position: relative; }
.fline::before { content: ""; position: absolute; top: 31px; left: 4%; right: 6%; height: 1.5px; background: linear-gradient(90deg, #C7B5E8, #AAB9FF, #A8E6D7, #F2B8D5); }
.fc { position: relative; min-width: 0; }
.fc-b, .fc-end { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "day day" "ic t" "s s" "o o"; gap: 8px 10px; align-items: center; padding: 0 0 14px; border: 0; background: transparent; font: inherit; text-align: left; color: var(--ink); }
.fc-day { grid-area: day; position: relative; z-index: 1; justify-self: start; font: 600 12px var(--display); color: var(--plum); background: var(--ivory); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(82,56,87,.25); margin: 18px 0 8px; }
.fc-b > :not(.fc-day) { position: relative; }
.fc-b::after { content: ""; position: absolute; inset: 58px 0 0; z-index: 0; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.09), 0 14px 28px -20px rgba(75,48,39,.6); transition: box-shadow .2s; }
.fc-b > * { z-index: 1; }
.fc-b { cursor: pointer; }
.fc-b .fc-ic { margin-left: 14px; margin-top: 14px; }
.fc-b .fc-t { margin-top: 14px; padding-right: 14px; }
.fc-b .fc-s, .fc-b .fc-open { margin: 0 14px; }
.fc-ic { grid-area: ic; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(232,221,206,.7); color: var(--choc); }
.fc-ic .ic { width: 20px; height: 20px; }
.fc[data-state="sent"] .fc-ic { background: var(--choc); color: var(--on-dark); }
.fc[data-state="due"] .fc-ic { background: linear-gradient(150deg, #EDE5F8, #C7B5E8); color: var(--plum); box-shadow: 0 0 0 1.5px var(--plum); }
.fc-t { grid-area: t; font: 600 15px var(--display); color: var(--choc); line-height: 1.2; }
.fc-s { grid-area: s; justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(232,221,206,.85); color: var(--choc); }
.fc[data-state="due"] .fc-s { background: var(--plum); color: var(--on-dark); }
.fc[data-state="maybe"] .fc-s { background: transparent; box-shadow: inset 0 0 0 1px rgba(75,48,39,.3); }
.fc-open { grid-area: o; justify-self: start; font-size: 13px; font-weight: 600; color: var(--choc); text-decoration: underline; text-decoration-color: rgba(75,48,39,.3); text-underline-offset: 4px; }
.fc-b:hover::after { box-shadow: 0 0 0 1px rgba(75,48,39,.2), 0 18px 32px -20px rgba(75,48,39,.7); }
.fc-b[aria-expanded="true"]::after { box-shadow: 0 0 0 1.7px var(--plum), 0 18px 32px -20px rgba(82,56,87,.7); }
.fc-b[aria-expanded="true"] .fc-open { color: var(--plum); }
.fc-end { grid-template-areas: "day day" "t t" "s s"; }
.fc-end .fc-t { color: var(--muted); }
.fc-end .fc-day { margin-top: 8px; }
.fc-end .fc-s { background: transparent; box-shadow: inset 0 0 0 1px rgba(75,48,39,.2); color: var(--muted); }
.fu-preview { margin-top: 18px; }
.fm-empty { display: grid; place-items: center; min-height: 120px; border-radius: 18px; border: 1.5px dashed rgba(75,48,39,.2); font-size: 14px; color: var(--muted); }
.fm { padding: 22px 24px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.1), 0 22px 44px -32px rgba(75,48,39,.6); }
.fm + .fm { margin-top: 10px; }
.fm-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--beige); }
.fm-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(199,181,232,.3); color: var(--plum); flex: none; }
.fm-head > span:last-child { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.fm-head b { font: 600 15px var(--display); color: var(--choc); }
.fm blockquote { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.3; color: var(--ink); max-width: 46ch; }
/* caption row */
.sv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 18px; }
.sv-cap { font-size: 15px; color: var(--muted); }
.sv-foot .btn { --h: 44px; }
/* explanations: shown as normal content without JavaScript, in the drawer with it */
.xd-store { margin-top: 32px; display: grid; gap: 16px; }
.has-explore .xd-store { display: none; }
.xd { padding: 24px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(75,48,39,.1); }
.xd-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.xd h4 { margin: 6px 0 0; font: 600 clamp(26px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -0.025em; color: var(--choc); }
.xd h5 { margin: 24px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); }
.xd-art { margin-top: 18px; height: 150px; border-radius: 18px; background: linear-gradient(160deg, #F4EDE3, #FBF7F0); display: grid; place-items: center; }
.xd-lead { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.xd-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.xd h5 + .xd-list { margin-top: 0; }
.xd-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(244,237,227,.7); }
.xd-list b { font: 600 14.5px var(--display); color: var(--choc); grid-column: 2; }
.xd-list span:not(.xd-dot):not(.xd-ic) { grid-column: 2; font-size: 14px; color: var(--muted); line-height: 1.45; }
.xd-dot, .xd-ic { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #FFFFFF; color: var(--choc); box-shadow: inset 0 0 0 1px rgba(75,48,39,.12); }
.xd-dot::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--lilac); box-shadow: inset 0 0 0 1.2px var(--choc); }
.xd-ic .ic { width: 19px; height: 19px; }
.xd-see { font-size: 14.5px; color: var(--ink); padding: 10px 14px; border-radius: 12px; background: rgba(199,181,232,.2); border-left: 2px solid var(--plum); }
.xd-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xd-chip { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(168,230,215,.35); color: var(--ink); }
.xd-chip.now { background: var(--plum); color: var(--on-dark); }
.xd-arrow { color: var(--muted); } .xd-note { font-size: 12.5px; color: var(--muted); }
/* the drawer */
.xdlg:modal { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px, 100vw); max-width: 100vw; height: 100%; max-height: 100%; padding: 0; border: 0; border-radius: 26px 0 0 26px; background: var(--ivory); color: var(--ink); box-shadow: -40px 0 80px -40px rgba(32,29,27,.5); overflow: auto; overscroll-behavior: contain; }
.xdlg::backdrop { background: rgba(32,29,27,.34); }
.xdlg[open] { animation: xd-in .38s var(--ease); }
@keyframes xd-in { from { opacity: 0; transform: translateX(28px); } }
.xdlg-in { position: relative; min-height: 100%; padding: 20px 30px 44px; }
.xdlg-x { position: sticky; top: 0; z-index: 2; float: right; width: 44px; height: 44px; display: grid; place-items: center; margin: 0 -8px 0 12px; border: 0; border-radius: 14px; background: rgba(232,221,206,.8); color: var(--choc); cursor: pointer; }
.xdlg-x .ic { width: 20px; height: 20px; }
.xdlg-x:hover { background: var(--beige); }
.xdlg .xd { padding: 6px 0 0; background: none; box-shadow: none; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .xdlg[open] { animation: none; } .sv-tab { transition: none; } .fc-b::after { transition: none; } }

@media (max-width: 1000px) {
  .kboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fline::before { display: none; } .fc-end { display: none; }
}
@media (max-width: 860px) {
  .pcards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pcards::before { top: 40px; bottom: 40px; left: 50%; right: auto; width: 1.5px; height: auto; }
  .pcard { padding: 10px 10px 6px; border-radius: 22px; }
  .pcard-art { height: 104px; border-radius: 15px; }
  .pcard-art svg { width: min(62%, 230px); }
  .pcard-top { margin: 14px 8px 0; } .pcard h3 { margin: 6px 8px 0; font-size: 21px; } .pcard > p { margin: 4px 8px 0; font-size: 14.5px; }
  .pcard .xlink { margin: 4px 8px 0; }
  .stretch::after { border-radius: 22px; }
  .sv-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "i" "c"; }
  .sv-concept { margin-top: 8px; max-width: none; }
}
@media (max-width: 620px) {
  .mk-bar { padding: 8px 14px; min-height: 48px; } .mk-mono { height: 22px; } .mk-title { font-size: 14px; }
  .mk-stage { padding: 18px 14px 20px; min-height: 0; }
  .sv-tabs { margin-left: -16px; margin-right: -16px; padding: 2px 16px; }
  .sv-tab { min-height: 44px; padding: 0 14px 0 12px; font-size: 14px; }
  /* journey becomes a vertical path */
  .jline { margin: 6px 0 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jline::before { top: 26px; left: 25px; width: 2px; height: calc(60% + 8px); }
  .jline::after { top: calc(60% + 34px); left: 25px; width: 0; height: calc(20% - 18px); border-top: 0; border-left: 2px dashed rgba(75,48,39,.3); }
  .js { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
  .js-ic { width: 52px; height: 52px; border-radius: 16px; } .js-ic .ic { width: 24px; height: 24px; }
  .js[data-state="now"] .js-ic { transform: none; box-shadow: 0 0 0 1.6px var(--plum), 0 0 0 6px rgba(199,181,232,.35); }
  .js-l { margin: 0; font-size: 15px; min-width: 70px; }
  .js-flag { position: static; margin-left: auto; font-size: 9.5px; padding: 3px 8px; }
  .js-s { font-size: 10px; }
  .js[data-state="now"] .js-s { display: none; }
  .jcard { margin-top: 18px; padding: 12px; gap: 10px; } .jcard-ic { width: 38px; height: 38px; } .jcard-t b { font-size: 14px; } .jcard-t { font-size: 12px; } .jcard-pill { display: none; }
  /* CRM board becomes a stage list with the focused column open */
  .kb-tools { margin-bottom: 12px; } .kb-pill:not(.on) { display: none; }
  .kboard { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kcol { padding: 6px 8px; border-radius: 14px; } .kcol-h { padding: 6px 4px; }
  .kcol:not([data-focus]) .kcs { display: none; }
  .kcol[data-focus] { padding: 8px 8px 10px; } .kcol[data-focus] .kcol-h { padding-bottom: 8px; }
  /* follow-up becomes a vertical timeline */
  .fline { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 0; }
  .fline::before { display: block; top: 10px; bottom: 10px; left: 27px; right: auto; width: 1.5px; height: auto; background: linear-gradient(180deg, #C7B5E8, #AAB9FF, #A8E6D7, #F2B8D5); }
  .fc-end { display: grid; }
  .fc-b, .fc-end { grid-template-columns: 56px 50px minmax(0, 1fr) auto; grid-template-areas: "day ic t s"; padding: 0; min-height: 60px; gap: 0 8px; }
  .fc-end { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "day t s"; }
  .fc-day, .fc-end .fc-day { margin: 0; padding: 3px 8px; font-size: 11px; justify-self: center; }
  .fc-b::after { inset: 0 0 0 62px; border-radius: 16px; }
  .fc-b .fc-ic { margin: 10px 0 10px 10px; width: 36px; height: 36px; } .fc-b .fc-t { margin: 0; font-size: 14px; } .fc-b .fc-s { margin: 0 10px 0 0; font-size: 9.5px; padding: 2px 7px; }
  .fc-open { display: none; }
  .fm { padding: 16px; } .fm blockquote { font-size: 20px; }
  .fm-empty { min-height: 72px; font-size: 13.5px; }
  .sv-cap { font-size: 14px; }
  .sv-foot .btn { width: 100%; }
  .xdlg:modal { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88dvh; border-radius: 26px 26px 0 0; box-shadow: 0 -30px 60px -30px rgba(32,29,27,.5); }
  @keyframes xd-in { from { opacity: 0; transform: translateY(32px); } }
  .xdlg-in { padding: 16px 20px 32px; }
}

/* ================= Round 8 proof of concept: interactive Enquiry journey ================= */
.jx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 22px; }
.jx-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.jx-dia { width: 8px; height: 8px; transform: rotate(45deg); background: var(--plum); border-radius: 1px; }
.jx-play { display: none; --h: 44px; gap: 8px; padding: 0 18px 0 14px; }
.jx.is-live .jx-play { display: inline-flex; }
.jx-play .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.jx-play[aria-pressed="true"] { background: var(--choc); color: var(--on-dark); border-color: var(--choc); }
.jx-play[aria-pressed="true"] .ic { display: none; }
.jx-map { position: relative; }
.jx-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.jx .jline { z-index: 1; }
.jx.is-live .jline::before, .jx.is-live .jline::after { display: none; }        /* the drawn SVG path replaces the static CSS line */
.jx-b { fill: none; stroke: rgba(75,48,39,.22); stroke-width: 1.5; stroke-dasharray: 3 6; transition: stroke .35s; }
.jx-b.is-on { stroke: rgba(75,48,39,.18); stroke-dasharray: none; }
.jx-b.is-hl { stroke: rgba(82,56,87,.6); stroke-dasharray: none; }
.jx-l { fill: none; stroke: url(#jx-grad); stroke-width: 2.6; stroke-linecap: round; }
.jx-glow { fill: none; stroke: url(#jx-grad); stroke-width: 11; stroke-linecap: round; opacity: .2; }
.jx-s { fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(199,181,232,.95)) drop-shadow(0 0 7px rgba(168,230,215,.7)); }
/* nodes */
.js-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px 6px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 22px; -webkit-tap-highlight-color: transparent; }
.js-node:focus-visible { outline: none; }
.js-node:focus-visible .js-ic { outline: 2px solid var(--choc); outline-offset: 6px; }
.js-ic { transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.js-node:hover .js-ic { translate: 0 -2px; }
.js .js-s .ic-check { display: none; }
.js[data-state="done"] .js-s .ic-check { display: inline-block; }
.js[data-state="now"] .js-ic { animation: jx-pop .7s var(--ease); }
@keyframes jx-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1.08); } }
.js.is-sel .js-ic { outline: 2px solid var(--plum); outline-offset: 6px; }
.js.is-sel .js-l { text-decoration: underline; text-decoration-color: var(--plum); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.jx .js-flag { display: none; }
.jx .js[data-state="now"] .js-flag { display: inline-block; }
/* stage card */
.jx-cards { margin: 34px auto 0; max-width: 720px; }
.jx-card { padding: 18px 20px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(75,48,39,.09), 0 24px 46px -32px rgba(75,48,39,.6); }
.jx-card + .jx-card { margin-top: 10px; }
.jx-card[hidden] { display: none; }
.jx.is-live .jx-card { animation: jx-card .4s var(--ease); }
@keyframes jx-card { from { opacity: 0; transform: translateY(6px); } }
.jx-card-h { display: flex; align-items: center; gap: 12px; }
.jx-card-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(199,181,232,.3); color: var(--plum); flex: none; }
.jx-card-t { display: flex; flex-direction: column; }
.jx-card-k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jx-card-t b { font: 600 18px var(--display); color: var(--choc); }
.jx-card-d { margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.jx-card-d dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--choc); }
.jx-card-d dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.jx-card-d .is-sample { padding-left: 12px; border-left: 2px solid var(--plum); } .jx-card-d .is-sample dt { color: var(--plum); }
@media (max-width: 620px) {
  .jx-top { margin-bottom: 14px; } .jx-legend { font-size: 12px; } .jx-play { width: 100%; justify-content: center; }
  .js-node { flex-direction: row; gap: 14px; padding: 0; text-align: left; }
  .js-l { min-width: 72px; }
  .jx .js[data-state="now"] .js-flag { display: inline-block; }
  .js { align-items: center; }
  .jx-cards { margin-top: 18px; }
  .jx .jline { gap: 20px; }
  .jx .js-ic { width: 46px; height: 46px; border-radius: 14px; } .jx .js-ic .ic { width: 22px; height: 22px; }
  .jx .jx-card-h { gap: 10px; } .jx .jx-card-ic { width: 36px; height: 36px; } .jx .jx-card-d { margin-top: 10px; }
  .js.is-sel .js-ic, .js-node:focus-visible .js-ic { outline-offset: 3px; }
  .jx-card { padding: 14px; } .jx-card-d { grid-template-columns: minmax(0, 1fr); gap: 8px; } .jx-card-t b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-ic, .jx-b { transition: none; } .js-node:hover .js-ic { translate: none; }
  .js[data-state="now"] .js-ic, .jx.is-live .jx-card { animation: none; }
}

/* ---- Round 8.1 refinements: calmer glow, one-time pulse, "up next", controls, focus ---- */
.jx .js[data-state="now"] .js-ic { box-shadow: 0 0 0 1.6px var(--plum), 0 0 0 5px rgba(199,181,232,.26), 0 14px 26px -16px rgba(82,56,87,.5); }
.jx-glow { stroke-width: 8; opacity: .14; }
.js-ic::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--lilac); opacity: 0; pointer-events: none; }
.jx.is-live .js[data-state="now"] .js-ic::after, .jx.is-live .js[data-state="ahead"] .js-ic::after { animation: jx-ring .9s var(--ease) 1; }
@keyframes jx-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.32); } }
.js[data-state="ahead"] .js-ic { background: #FFFFFF; color: var(--plum); box-shadow: 0 0 0 1px rgba(82,56,87,.2); outline: 1.5px dashed var(--plum); outline-offset: -1.5px; }
.js[data-state="ahead"] .js-s { color: var(--plum); }
.jx-b.is-proj { stroke: rgba(82,56,87,.55); stroke-dasharray: 4 5; }
.jx-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }
.jx-ctrl .btn { --h: 44px; }
.jx-replay { display: none; gap: 8px; padding: 0 16px 0 12px; }
.jx.is-live .jx-replay:not([hidden]) { display: inline-flex; }
.jx-replay .ic { width: 16px; height: 16px; }
.jx-pause-ic { display: none; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.jx-play[data-mode="playing"] .ic { display: none; } .jx-play[data-mode="playing"] .jx-pause-ic { display: inline-block; }
.jx-play[data-mode="playing"] { background: var(--choc); color: var(--on-dark); border-color: var(--choc); }
.jx-card-h { flex-wrap: wrap; }
.jx-card-t { flex: 1 1 160px; min-width: 0; }
.jx-card-st { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(232,221,206,.8); color: var(--choc); }
.jx-card-st[data-st="now"] { background: var(--plum); color: var(--on-dark); }
.jx-card-st[data-st="ahead"] { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px rgba(82,56,87,.4); }
.jx-card-st[data-st="later"] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(75,48,39,.25); }
/* focus: a clear ring on the stage plus an underlined name */
.js-node:focus-visible .js-ic { outline: 2.5px solid var(--choc); outline-offset: 5px; }
.js-node:focus-visible .js-l { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 620px) {
  .jx-ctrl { width: 100%; } .jx-ctrl .btn { flex: 1 1 0; justify-content: center; }
  .jx .js { border-radius: 18px; padding: 6px; margin: -6px; transition: background-color .3s; }
  .jx .js.is-sel { background: rgba(199,181,232,.22); }
  .js.is-sel .js-ic { outline-offset: 3px; }
  .jx-card-st { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .jx.is-live .js[data-state="now"] .js-ic::after, .jx.is-live .js[data-state="ahead"] .js-ic::after { animation: none; } .jx .js { transition: none; } }

/* ================= Round 9: shared lab cards ================= */
.jx-card-b { margin-top: 12px; }
.jx-lbl { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--choc); }
.jx-card-lead { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.jx-more-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; font: 600 13.5px var(--text); color: var(--choc); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(75,48,39,.3); text-underline-offset: 5px; }
.jx-more-btn[hidden] { display: none; }
.jx-more-arr { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.jx-more-btn[aria-expanded="true"] .jx-more-arr { transform: rotate(-135deg) translateY(-1px); }
.jx-more-body.is-closed { display: none; }
.jx-more-body .jx-card-d { margin-top: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 621px) {                                     /* the journey shows everything on wide screens, as approved */
  .jx[data-more="mobile"] .jx-card-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 20px; }
  .jx[data-more="mobile"] .jx-more-btn { display: none; }
  .jx[data-more="mobile"] .jx-more-body.is-closed { display: block; }
  .jx[data-more="mobile"] .jx-more-body .jx-card-d { margin-top: 0; }
}
.jx-card .jx-card-d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jx-fu .jx-card-lead q, .jx-fu .jx-card-lead { quotes: "“" "”"; }
.jx-fu .jx-card-lead q { display: block; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; color: var(--ink); }
/* ================= CRM lab ================= */
.jx-crm .jx-svg { z-index: 1; }
.jx-crm .kboard { position: relative; }
.kcol { transition: background-color .4s, box-shadow .4s; }
.jx-crm .kcol[data-state="now"] { background: rgba(199,181,232,.24); box-shadow: inset 0 0 0 1px rgba(82,56,87,.16); }
.jx-crm .kcol.is-sel { box-shadow: inset 0 0 0 1.6px var(--plum); }
.kcol-h { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 4px 4px 8px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.kcol-h:focus-visible { outline: 2.5px solid var(--choc); outline-offset: 2px; }
.kcol-ic { position: relative; z-index: 2; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #FFFFFF; color: var(--choc); box-shadow: 0 0 0 1px rgba(75,48,39,.14); transition: background-color .4s, color .4s, box-shadow .4s; }
.kcol-ic .ic { width: 18px; height: 18px; }
.kcol[data-state="done"] .kcol-ic { background: var(--choc); color: var(--on-dark); box-shadow: none; }
.kcol[data-state="now"] .kcol-ic { background: linear-gradient(150deg, #EDE5F8, #C7B5E8); color: var(--plum); box-shadow: 0 0 0 1.5px var(--plum), 0 0 0 4px rgba(199,181,232,.3); }
.kcol[data-state="ahead"] .kcol-ic { color: var(--plum); box-shadow: none; outline: 1.5px dashed var(--plum); outline-offset: -1.5px; }
.kcol-ic::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--lilac); opacity: 0; pointer-events: none; }
.jx.is-live .kcol[data-state="now"] .kcol-ic::after, .jx.is-live .kcol[data-state="ahead"] .kcol-ic::after { animation: jx-ring .9s var(--ease) 1; }
.kcol-tx { display: flex; flex-direction: column; min-width: 0; }
.kcol-t { font: 600 13.5px var(--display); color: var(--choc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcol-st { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kcol[data-state="now"] .kcol-st, .kcol[data-state="ahead"] .kcol-st { color: var(--plum); }
.kcol-h .kcol-n { margin-left: auto; }
.kc-next { color: var(--plum); font-weight: 500; }
.kc.is-sim { box-shadow: 0 0 0 1.7px var(--plum), 0 0 0 6px rgba(199,181,232,.25), 0 16px 30px -18px rgba(82,56,87,.75); }
.kc.is-sim .kc-tag { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1.2px var(--plum); }
.kc-ghost { gap: 3px; border: 1.5px dashed rgba(82,56,87,.45); box-shadow: none; background: rgba(251,247,240,.7); font-size: 12px; color: var(--muted); }
.kc-ghost b { font-size: 13px; color: var(--plum); }
.kc-ghost .kc-tag { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1.2px rgba(82,56,87,.5); }
.kcol { position: relative; }
.jx-crm .kboard { margin-top: 30px; }
.kcol-node { position: absolute; z-index: 2; left: 50%; top: -22px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--ivory); box-shadow: inset 0 0 0 1.4px rgba(75,48,39,.45); transition: background-color .4s, box-shadow .4s; }
.kcol[data-state="done"] .kcol-node { background: var(--choc); box-shadow: none; }
.kcol[data-state="now"] .kcol-node { background: var(--lilac); box-shadow: inset 0 0 0 1.6px var(--plum), 0 0 0 4px rgba(199,181,232,.35); }
.kcol[data-state="ahead"] .kcol-node { background: #FFFFFF; box-shadow: inset 0 0 0 1.6px var(--plum); }
/* ================= Follow-up lab ================= */
.js-sub { font-size: 12.5px; color: var(--muted); margin-top: -6px; }
.jx-fu .js-l { font-size: 15px; }
.jx-fu .js[data-state="later"]:last-child .js-ic { outline-style: solid; outline-color: rgba(75,48,39,.25); }
@media (max-width: 620px) {
  .jx-more-body .jx-card-d, .jx-card .jx-card-d { grid-template-columns: minmax(0, 1fr); }
  .jx-card-lead { font-size: 14px; }
  .jx[data-more="mobile"] .jx-card-lead .jx-lbl { display: none; }
  /* CRM: one readable vertical stage list; only the sample's column (and the "if they book" placeholder) show cards */
  .jx-crm .kboard { gap: 8px; margin-top: 0; padding-left: 26px; }
  .kcol-node { left: -19px; top: 26px; margin: -6px 0 0 0; }
  .jx-crm .kcol { padding: 4px 8px; border-radius: 16px; }
  .jx-crm .kcol .kcs { display: none; }
  .jx-crm .kcol.has-sample .kcs, .jx-crm .kcol.has-ghost .kcs { display: grid; padding-bottom: 6px; }
  .jx-crm .kcol.has-sample .kc:not(.is-sample):not(.kc-ghost) { display: none; }
  .kcol-h { min-height: 52px; padding: 6px 2px; }
  /* follow-up rows: day, message name, status */
  .jx-fu .js-node { display: grid; grid-template-columns: 46px 54px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; }
  .jx-fu .js-l { min-width: 0; font-size: 14px; } .jx-fu .js-sub { margin: 0; font-size: 13.5px; color: var(--ink); }
  .jx-fu .js { gap: 0; } .jx-fu .js .js-flag { display: none !important; }
  .jx-fu .jx-card-lead q { font-size: 18px; }
  .jx-fu .js[data-state="now"] .js-s { display: inline-flex; }
  .mk-chip-x { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kcol, .kcol-ic, .kcol-node, .jx-more-arr { transition: none; } .jx.is-live .kcol[data-state] .kcol-ic::after { animation: none; } }

/* ================= Round 10: positioning copy ================= */
.r10-display { font-size: clamp(38px, 4.6vw, 70px); }
.for-list li.for-also { flex-basis: 100%; font-size: 12.5px; }
.for-list li.for-also::before { background: transparent; box-shadow: inset 0 0 0 1.2px var(--muted); }
/* four pillars: a 2 × 2 grid on wide screens */
.cards.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
#services .services-thread { height: 62%; }
@media (min-width: 961px) { #services .services-thread { height: 46%; } }
@media (max-width: 860px) { .cards.cards-4 { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
.svc .svc-num { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.svc .svc-num span { font: 600 12.5px var(--display); letter-spacing: .1em; color: var(--choc); }
.svc .svc-line { font-size: 14px; line-height: 1.5; color: var(--ink); }
.svc .svc-line b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); margin-bottom: 4px; }
.svc .svc-dev { padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); }
.svc .svc-dev b { color: var(--plum); }
.svc .svc-safe { font-size: 13px; line-height: 1.45; color: var(--plum); padding-left: 10px; border-left: 2px solid var(--lilac); }
.svc .card-link { margin-top: auto; }
.svc-legend { margin-top: 22px; max-width: 78ch; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.svc-legend b { color: var(--choc); font-weight: 600; }
/* offers band */
.offers { margin-top: clamp(48px, 6vw, 80px); }
.offers-title { margin-top: 14px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.offers-title b { font-weight: 700; }
.offer-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.offer { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; border-radius: 22px; background: linear-gradient(170deg, #FFFFFF, #FBF7F0); box-shadow: 0 0 0 1px rgba(75,48,39,.09), 0 20px 40px -30px rgba(75,48,39,.5); }
.offer h4 { margin: 0; font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; color: var(--choc); }
.offer p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.offer .offer-note { font-size: 13px; color: var(--muted); }
.offer-k { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) !important; }
.offer-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; background: rgba(232,221,206,.9); color: var(--choc); }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.offer-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--lilac); }
.offer-btn { margin-top: auto; align-self: flex-start; --h: 44px; }
.offer-free { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(75,48,39,.16); }
.offer-main { background: var(--choc); color: var(--on-dark); box-shadow: 0 30px 60px -36px rgba(58,38,32,.85); padding: 30px 28px 28px; }
.offer-main h4 { color: var(--on-dark); font-size: 24px; }
.offer-main p, .offer-main .offer-list li { color: var(--on-dark); }
.offer-main .offer-note, .offer-main .offer-k { color: var(--on-dark-muted) !important; }
.offer-main .offer-pill { background: var(--lilac); color: var(--choc); }
.offer-main .offer-list li::before { background: var(--mint); }
.offer-main :focus-visible { outline-color: var(--on-dark); }
.offer-compare { margin-top: 18px; display: grid; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); font-size: 13.5px; }
.offer-compare [role="row"] { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr) minmax(0, 1fr); }
.offer-compare [role="row"] + [role="row"] { border-top: 1px solid var(--line); }
.offer-compare span { padding: 11px 14px; color: var(--ink); }
.offer-compare .oc-head span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--choc); background: rgba(232,221,206,.5); }
.offer-compare [role="rowheader"] { font-weight: 600; color: var(--choc); background: rgba(244,237,227,.55); }
@media (max-width: 960px) { .offer-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .offer-main { order: 0; } }
@media (max-width: 620px) {
  .offer { padding: 20px 18px; } .offer-main { padding: 22px 18px; } .offer-btn { align-self: stretch; justify-content: center; }
  .offer-compare { font-size: 12.5px; } .offer-compare [role="row"] { grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr); } .offer-compare span { padding: 9px 8px; }
}
/* case study */
.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.case-list li { position: relative; padding-left: 16px; }
.case-list li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--choc); }
.case-progress dt { color: var(--plum) !important; }
.case-progress dd { color: var(--ink); }
.flowlist li.is-progress span { border: 1.5px dashed var(--plum); box-shadow: none; background: rgba(251,247,240,.9); color: var(--plum); }
.xd-gap { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
/* contact */
.field .opt { font-weight: 500; color: var(--muted); }
.field-hint { font-size: 12.5px; color: var(--muted); }
.copy-email { margin-top: 6px; --h: 44px; }

/* ---------- r11: Business Systems Clarity Assessment ---------- */
.assess { background: linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%); border-top: 1px solid var(--line); }
.assess-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.assess-intro .h2 { margin-top: 18px; }
.assess-intro .intro { margin-top: 18px; }
.assess-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink); }
.assess-facts li { display: flex; align-items: center; gap: 10px; }
.assess-facts li::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); border-radius: 1.5px; background: var(--pearl); }
.assess-privacy { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.assess-privacy b { color: var(--choc); font-weight: 600; }
.assess-card { border-radius: 24px; padding: clamp(20px, 3vw, 34px); background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 60%, #F6F0E7 100%); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.09), 0 26px 50px -34px rgba(75,48,39,.55); min-height: 420px; }
.assess-card.is-live .assess-nojs { display: none; }
.assess-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin: 0 0 10px; }
.assess-card h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.assess-card h3:focus { outline: none; }
.assess-card h3:focus-visible { outline: 2px solid var(--choc); outline-offset: 4px; }
.as-start p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; }
.as-topics { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.as-topics li { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: rgba(199,181,232,.18); color: var(--plum); box-shadow: inset 0 0 0 1px rgba(82,56,87,.16); }
.aq-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aq-top b { color: var(--plum); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.aq-bar { height: 4px; border-radius: 4px; background: var(--beige); margin: 10px 0 22px; overflow: hidden; }
.aq-bar i { display: block; height: 100%; background: var(--pearl); border-radius: inherit; transition: width .4s var(--ease); }
.aq fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aq legend { padding: 0; font-family: var(--display); font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--choc); margin-bottom: 18px; }
.aq legend:focus { outline: none; }
.aq-opts { display: grid; gap: 10px; }
.aq-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; min-height: 52px; border-radius: 14px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); transition: box-shadow .2s, background .2s; }
.aq-opt:hover { box-shadow: inset 0 0 0 1px rgba(75,48,39,.4); }
.aq-opt input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid rgba(75,48,39,.45); background: #fff; display: grid; place-content: center; cursor: pointer; }
.aq-opt input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--choc); transform: scale(0); transition: transform .15s; }
.aq-opt input:checked::before { transform: scale(1); }
.aq-opt input:focus-visible { outline: 2px solid var(--choc); outline-offset: 3px; }
.aq-opt:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--choc), 0 10px 22px -18px rgba(75,48,39,.6); }
.aq-err { margin: 12px 0 0; font-size: 14px; color: #8A2F2A; }
.aq-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.aq-nav .btn:only-child { margin-left: auto; }
.ar-sum { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--choc); font-weight: 500; }
.ar p { color: var(--ink); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.ar-note-top { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.ar h4 { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); margin: 22px 0 8px; }
.ar-obs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-obs li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ar-obs li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1.5px; background: var(--pearl); }
.ar-rec { margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(168,230,215,.16); box-shadow: inset 0 0 0 1px rgba(75,48,39,.1); }
.ar-next { margin-top: 22px; padding: 20px; border-radius: 18px; background: var(--choc); color: var(--on-dark); }
.ar-next h4 { margin-top: 0; color: var(--on-dark-muted); }
.ar-next p { color: var(--on-dark); margin: 0 0 16px; }
.ar-next :focus-visible { outline-color: var(--on-dark); }
.ar-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ar-small { margin: 12px 0 0; font-size: 13px !important; line-height: 1.55 !important; color: var(--muted) !important; }
@media (max-width: 860px) { .assess-grid { grid-template-columns: minmax(0, 1fr); } .assess-card { min-height: 0; } }
@media (max-width: 700px) { .assess-card .btn-sm { --h: 44px; } }
@media (max-width: 480px) { .aq-nav .btn, .ar-tools .btn { flex: 1 1 auto; } .ar-next .btn { width: 100%; } }

/* ---------- r11: Work in practice ---------- */
.wip { margin-top: clamp(56px, 7vw, 90px); }
.wip-head { display: grid; grid-template-areas: "t" "i"; gap: 8px; max-width: 70ch; }
.wip-proj { margin-top: 28px; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 46%, #F6F0E7 100%); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.08), 0 18px 40px -26px rgba(75,48,39,.45); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.wip-text h4 { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--choc); margin: 14px 0 0; }
.wip-text .case-facts div { grid-template-columns: 104px minmax(0, 1fr); }
.wip-status { font-size: 12px; font-weight: 600; color: var(--choc); padding: 5px 10px; border-radius: 999px; background: rgba(168,230,215,.28); }
.wip-status.is-progress { background: transparent; box-shadow: inset 0 0 0 1px rgba(82,56,87,.45); border: 0; color: var(--plum); background-image: none; outline: 1px dashed rgba(82,56,87,.5); outline-offset: -1px; }
.wip-shots { display: grid; gap: 18px; }
.wip-shots-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wip-shots-3 { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr); }
.wip-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wip-shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(75,48,39,.14), 0 14px 28px -20px rgba(75,48,39,.55); }
.wip-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s var(--ease); }
.wip-fig.is-phone .wip-shot img { object-fit: contain; object-position: center; background: #1e1e1f; }
.wip-shots-3 .wip-shot { aspect-ratio: 5 / 6; }
.wip-shots-3 .wip-fig:not(.is-phone) .wip-shot img { object-fit: contain; object-position: center; background: #F0F2F5; }
.wip-shot:hover img { transform: scale(1.02); }
.wip-zoom { position: absolute; right: 8px; bottom: 8px; font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(251,247,240,.92); color: var(--choc); box-shadow: 0 0 0 1px rgba(75,48,39,.14); opacity: 0; transition: opacity .2s; }
.wip-shot:hover .wip-zoom, .wip-shot:focus-visible .wip-zoom { opacity: 1; }
.wip-fig.is-wip .wip-shot { box-shadow: 0 0 0 1px rgba(75,48,39,.14), 0 14px 28px -20px rgba(75,48,39,.55); outline: 1.5px dashed rgba(82,56,87,.55); outline-offset: 3px; }
.wip-fig figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.wip-fig figcaption b { display: block; color: var(--choc); font-weight: 600; font-size: 14px; }
.wip-dlg { border: 0; padding: 0; width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 18px; background: var(--ivory); box-shadow: 0 30px 80px -30px rgba(32,29,27,.6); overflow: auto; }
.wip-dlg::backdrop { background: rgba(32,29,27,.55); }
.wip-dlg img { display: block; width: 100%; height: auto; }
.wip-dlg-cap { margin: 0; padding: 14px 56px 16px 18px; font-size: 14px; color: var(--ink); }
.wip-dlg-x { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--choc); color: var(--on-dark); font-size: 24px; line-height: 1; cursor: pointer; }
.wip-dlg-x:focus-visible { outline: 2px solid var(--choc); outline-offset: 3px; }
@media (max-width: 960px) { .wip-proj { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .wip-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -4px; padding: 4px 4px 10px; scrollbar-width: thin; }
  .wip-fig { flex: 0 0 84%; scroll-snap-align: start; }
  .wip-fig.is-phone { flex-basis: 64%; }
  .wip-text .case-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .wip-shot img, .aq-bar i { transition: none; } .wip-shot:hover img { transform: none; } }
@media print { .wip-shots { display: grid; overflow: visible; } .assess-card { min-height: 0; } }

/* ---------- r12: assessment email step and preview flags ---------- */
.pending-note { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--plum); background: rgba(199,181,232,.14); border: 1px dashed rgba(82,56,87,.45); }
.pending-note b { font-weight: 600; }
.pending-flag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--plum); padding: 2px 8px; border-radius: 999px; border: 1px dashed rgba(82,56,87,.45); white-space: normal; }
.assess-intro .pending-note { max-width: 52ch; }
.ae h3 { margin-top: 2px; }
.ae-intro { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ae .form-row { margin-top: 18px; }
.ae-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; min-height: 44px; }
.ae-check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 5px; border: 1.5px solid rgba(75,48,39,.45); background: #fff; display: grid; place-content: center; cursor: pointer; }
.ae-check input::before { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--on-dark); border-bottom: 2px solid var(--on-dark); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .15s; }
.ae-check input:checked { background: var(--choc); border-color: var(--choc); }
.ae-check input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.ae-check input:focus-visible { outline: 2px solid var(--choc); outline-offset: 3px; }
.ae-priv { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ar-sent { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; font-size: 14px; color: var(--choc); background: rgba(168,230,215,.22); }
.aq-nav .btn[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 560px) { .ae .form-row { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ae-check input::before { transition: none; } }

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(56px, 7vw, 100px); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.faq-head .h2 { margin-top: 18px; font-size: clamp(30px, 3.6vw, 46px); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--choc); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--choc); border-bottom: 1.5px solid var(--choc); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-list details p { padding: 0 0 18px; font-size: 15.5px; color: var(--muted); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- about: editorial introduction with an integrated portrait ---------- */
.about { --bleed: max(32px, calc((100vw - var(--max)) / 2 + 32px)); position: relative; overflow: hidden; background: linear-gradient(100deg, #FBF7F0 0%, #FAF3EC 40%, #F7E9E0 100%); }
.about-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); grid-template-areas: "intro portrait" "body portrait"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 4.5vw, 72px); }
.about-intro { grid-area: intro; padding-top: clamp(0px, 2vw, 32px); }
.about-hello { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 8.2vw, 120px); line-height: .92; letter-spacing: -0.015em; color: var(--choc); margin-top: 18px; }
.about-sub { font-family: var(--display); font-size: clamp(24px, 2.5vw, 33px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 400; color: var(--choc); margin-top: 22px; max-width: 21ch; text-wrap: balance; }
.about-sub b { font-weight: 700; }
.about-body { grid-area: body; display: flex; flex-direction: column; gap: 18px; font-size: 17px; margin-top: 30px; }
.about-body > p { max-width: 50ch; }
.philosophy { margin: 12px 0 4px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 30em; }
.philosophy p { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.22; color: var(--plum); }
.philosophy footer { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.about-body .cta-row { margin-top: 8px; }
.about-portrait { grid-area: portrait; position: relative; isolation: isolate; margin: 0 calc(-1 * var(--bleed)) 0 0; align-self: end; }
.portrait-img { position: relative; width: min(100%, 740px); margin-left: auto; aspect-ratio: 1122 / 1300; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 6%, #000 82%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 6%, #000 82%, transparent 100%); mask-composite: intersect; }
.portrait-img picture, .portrait-img img { display: block; width: 100%; height: 100%; }
.portrait-img img { object-fit: cover; object-position: 50% 0; }
.portrait-ribbons { position: absolute; z-index: -1; left: -6%; top: -12%; width: 106%; max-width: none; height: 124%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%), linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 20%), linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); mask-composite: intersect; }
.about-script { position: absolute; z-index: 2; right: max(8%, calc(var(--bleed) * 0.6)); bottom: 0; margin: 0; font-family: var(--script); font-size: clamp(36px, 3.4vw, 52px); line-height: 1; color: var(--plum); transform: rotate(-6deg); white-space: nowrap; pointer-events: none; }
.about-strengths { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.strengths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; position: relative; }
.strengths::before { content: ""; position: absolute; z-index: 0; top: 28px; left: 44px; right: calc((100% - 80px) / 3 - 44px); height: 1.5px; background: var(--pearl); transform-origin: left center; transition: transform 1.2s var(--ease) .15s; }
.strengths li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s-icon { width: 88px; height: 56px; border-radius: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -16px rgba(75,48,39,.4); display: grid; place-items: center; margin-bottom: 6px; }
.s-icon svg { width: 66px; height: 38px; overflow: visible; }
.strengths h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.strengths p { font-size: 15px; color: var(--muted); max-width: 40ch; }
.about-note { margin-top: 30px; font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.about-note::before { content: ""; width: 8px; height: 8px; margin-top: 7px; flex: none; transform: rotate(45deg); background: var(--blush); }
@media (max-width: 1100px) and (min-width: 861px) { .about-hello { font-size: clamp(60px, 8vw, 88px); } }
@media (max-width: 860px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "portrait" "body"; grid-template-rows: auto; }
  .about-portrait { margin: 26px calc(50% - 50vw) 0; }
  .portrait-img { width: 100%; max-width: 620px; margin: 0 auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 80%, transparent 100%); }
  .portrait-ribbons { left: 0; width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%); }
  .about-script { right: 6%; bottom: 2%; }
  .about-body { margin-top: 12px; }
  .strengths { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .strengths li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
  .strengths li .s-icon { grid-row: span 2; margin: 0; }
  .strengths::before { top: 28px; bottom: 28px; left: 44px; right: auto; width: 1.5px; height: auto; transform-origin: center top; }
}

/* ---------- shared ribbon layers: one engine, a preset per section ---------- */
.ribbon-host { position: relative; overflow: hidden; }
.ribbon-host > .wrap { position: relative; z-index: 1; }
.section-ribbons { position: absolute; z-index: 0; pointer-events: none; }
.services-thread { inset: 0; width: 100%; height: 100%; }
.work-accent { right: 0; bottom: 0; width: 48%; height: 340px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.contact-calm { inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 62%); }
@media (max-width: 860px) { .work-accent { width: 80%; height: 220px; } .contact-calm { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 70%); } }

/* ---------- reveal on scroll (only when motion is welcome) (r20: the reveal styles now live in src/r20-scroll.css) ---------- */
.js-motion .strengths:not(.is-in)::before { transform: scaleX(0); }
@media (max-width: 860px) { .js-motion .strengths:not(.is-in)::before { transform: scaleY(0); } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { position: relative; display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: linear-gradient(170deg, #FFFFFF, #FBF7F0); box-shadow: 0 0 0 1px rgba(75,48,39,.08), 0 30px 60px -40px rgba(75,48,39,.5); }
.form::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; background: var(--pearl); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; pointer-events: none; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--choc); }
.field input, .field textarea, .field select { font: 16px/1.4 var(--text); color: var(--ink); background: var(--ivory); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--choc); box-shadow: 0 0 0 3px rgba(199,181,232,.55); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-note { font-size: 13px; color: var(--muted); }
.form-status { font-size: 13.5px; line-height: 1.5; color: var(--ink); padding: 12px 14px; border-radius: 12px; background: rgba(232,221,206,.55); }
.needs-badge { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); box-shadow: inset 0 0 0 1px rgba(82,56,87,.35); background: var(--ivory); vertical-align: 1px; }
.field-error { font-size: 13.5px; font-weight: 500; color: #8A2E2E; display: flex; gap: 6px; align-items: baseline; }
.field-error::before { content: "!"; font-weight: 700; }
.field [aria-invalid="true"] { border-color: #8A2E2E; box-shadow: 0 0 0 3px rgba(138,46,46,.14); }
.email-contact { margin-top: 26px; padding: 18px 20px; border-radius: 16px; border: 1.5px dashed rgba(82,56,87,.4); background: rgba(251,247,240,.7); }
.email-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); }
.email-v { margin-top: 6px; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.email-missing { color: var(--muted); font-style: italic; }
.email-v a { color: var(--choc); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.form-msg { font-size: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(199,181,232,.22); color: var(--ink); }
.contact-intro { margin-top: 18px; font-size: 17px; color: var(--muted); max-width: 42ch; }
.next-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; counter-reset: n; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.next-steps li::before { content: "0" counter(n); font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--choc); padding-top: 2px; font-variant-numeric: tabular-nums; }
.next-steps b { display: block; font-family: var(--display); font-weight: 600; color: var(--choc); font-size: 16.5px; margin-bottom: 2px; }

/* ---------- footer ---------- */
.site-footer { background: var(--choc-deep); color: var(--on-dark); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); position: relative; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; position: relative; z-index: 1; }
.foot-logo { color: var(--on-dark); width: 220px; height: auto; display: block; }
.foot-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 14px; }
.foot-links a { color: var(--on-dark); text-decoration: none; opacity: .85; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--dark-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--on-dark-muted); position: relative; z-index: 1; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* review link to the identity page */
.preview-bar { background: var(--ink); color: var(--on-dark-muted); font-size: 13px; }
.preview-bar .wrap { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
.preview-bar a { color: var(--on-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.preview-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.preview-bar i { width: 18px; height: 5px; border-radius: 3px; background: var(--pearl); display: inline-block; }

/* ---------- r13: three pages ---------- */
/* hidden means hidden, even where a component sets its own display (the old publish wrapper used to add this) */
[hidden] { display: none !important; }
/* navigation: current page */
.nav a[aria-current="page"] { color: var(--choc); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* services: three cards */
.cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
@media (max-width: 960px) { .cards.cards-3 { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
#services .services-thread { height: 70%; }

/* two destination cards */
.explore { padding-top: 0; }
.dest-grid { margin-top: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; perspective: 1100px; }
.dest { border-radius: 24px; }
.dest-surface { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; }
.dest h3 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.dest p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.6; max-width: 52ch; }
.dest .offer-k { margin: 0; }
.dest-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink); }
.dest-list li { display: flex; align-items: center; gap: 10px; }
.dest-list li::before { content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); border-radius: 1.5px; background: var(--pearl); }
.dest-link { align-self: flex-start; margin-top: auto; position: static; }
.dest-link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; z-index: 2; }   /* the whole card opens the page */
.dest-surface > .dest-link { margin-top: 8px; }
.dest-art { position: relative; height: 150px; margin-bottom: 6px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, rgba(199,181,232,.28), rgba(170,185,255,.18) 35%, rgba(168,230,215,.22) 65%, rgba(242,184,213,.22)); box-shadow: inset 0 0 0 1px rgba(75,48,39,.08); }
.dest-art-assess { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 22px; }
.da-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.da-bar i { height: 6px; border-radius: 6px; background: rgba(75,48,39,.14); }
.da-bar i:nth-child(-n+4) { background: var(--choc); }
.da-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.da-chips span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--plum); box-shadow: inset 0 0 0 1px rgba(82,56,87,.16); }
.da-chips span:nth-child(2) { background: var(--choc); color: var(--on-dark); box-shadow: none; }
.dest-art-work img { position: absolute; width: 46%; height: 128px; object-fit: cover; object-position: top center; border-radius: 10px; box-shadow: 0 0 0 1px rgba(75,48,39,.12), 0 14px 26px -16px rgba(75,48,39,.6); background: #fff; }
.dest-art-work img:nth-child(1) { left: 6%; top: 18px; transform: rotate(-4deg); object-position: center 30%; }
.dest-art-work img:nth-child(2) { left: 30%; top: 12px; z-index: 1; transform: rotate(1.5deg); object-position: 88% 18%; }
.dest-art-work img:nth-child(3) { right: 5%; top: 20px; width: 24%; object-fit: cover; object-position: top; transform: rotate(4deg); background: #1e1e1f; }
.dest:hover .dest-link.btn-line, .dest:focus-within .dest-link.btn-line { border-color: var(--choc); }
@media (max-width: 860px) { .dest-grid { grid-template-columns: minmax(0, 1fr); } }

/* offers: two cards */
.offers-sec .intro .text-link { color: var(--choc); }
.offer-grid.offer-grid-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: 980px; }
@media (max-width: 860px) { .offer-grid.offer-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* inner pages */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(44px, 7vw, 96px) clamp(28px, 4vw, 48px); background: linear-gradient(180deg, var(--ivory), var(--paper)); border-bottom: 1px solid var(--line); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .page-title { margin-top: 16px; }
.page-hero .intro { margin-top: 16px; max-width: 64ch; }
.page-accent { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--choc); text-underline-offset: 3px; display: inline-block; padding: 10px 0; margin: -10px 0; }
.jump { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--choc); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(75,48,39,.18); }
.jump a:hover { box-shadow: inset 0 0 0 1px var(--choc); }
.status-key { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--muted); }
.status-key .wip-status { margin-left: 6px; }
.status-key .wip-status:first-child { margin-left: 0; }
.wip-status.is-concept { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(75,48,39,.25); }
.case-badges .wip-status { white-space: nowrap; }
.work-sec { padding-block: clamp(48px, 7vw, 96px); }
.wip.wip-page { margin-top: 0; }
.wip-page .wip-proj h3 { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--choc); margin: 14px 0 0; }
#client-work .section-head { margin-bottom: 26px; display: grid; grid-template-areas: "t" "i"; gap: 8px; }
#systems-lab .sv { margin-top: 0; }
.assess-page { border-top: 0; padding-top: clamp(40px, 6vw, 80px); }
.assess-page .crumbs ol { margin-bottom: 18px; }
.cta-band { padding: clamp(26px, 4vw, 44px); border-radius: 24px; background: var(--choc); color: var(--on-dark); display: grid; gap: 12px; justify-items: start; }
.cta-band .cta-title { color: var(--on-dark); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.cta-band p { margin: 0; color: var(--on-dark-muted); max-width: 60ch; }
.cta-band .cta-row { margin-top: 8px; }
.cta-band .btn-dark { background: var(--ivory); color: var(--choc); }
.cta-band .btn-line { color: var(--on-dark); border-color: var(--dark-line); background: transparent; }
.cta-band :focus-visible { outline-color: var(--on-dark); }
.page-cta { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .dest-art-work img { transform: none !important; } }

/* heading levels follow each page's outline: offer cards are h3 on the homepage, assessment steps are h2 on their own page */
.offer h3 { margin: 0; font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; color: var(--choc); }
.offer-main h3 { color: var(--on-dark); font-size: 24px; }
.assess-card h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.assess-card h2:focus { outline: none; }
.assess-card h2:focus-visible { outline: 2px solid var(--choc); outline-offset: 4px; }
.ae h2 { margin-top: 2px; }
@media (max-width: 700px) { .dest-link { --h: 44px; } }
.ar h3 { font-family: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choc); margin: 22px 0 8px; }
.ar-next h3 { margin-top: 0; color: var(--on-dark-muted); }
.dest.is-clickable { cursor: pointer; }
/* r13.1: Anatomy demo back on the homepage, with the same concept notice as Systems in action */
.anatomy-concept { grid-area: auto; margin-top: 4px; background: rgba(251,247,240,.1); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.band-dark .anatomy-concept b { background: var(--lilac); color: var(--choc); }
.cta-band-light { background: linear-gradient(170deg, #FFFFFF 0%, #FBF7F0 60%, #F6F0E7 100%); color: var(--ink); box-shadow: 0 0 0 1px rgba(75,48,39,.09), 0 20px 40px -30px rgba(75,48,39,.5); }
.cta-band-light .cta-title { color: var(--choc); }
.cta-band-light p { color: var(--muted); }
.cta-band-light .btn-dark { background: var(--choc); color: var(--on-dark); }
.cta-band-light .btn-line { color: var(--choc); border-color: rgba(75,48,39,.32); background: rgba(251,247,240,.6); }
.cta-band-light :focus-visible { outline-color: var(--choc); }
#demonstrations-link { padding-top: 0; }
@media (min-width: 861px) { .anatomy-concept { grid-column: 2; justify-self: start; } }

/* ================= r14: UI/UX elevation (same palette, type and components) ================= */

/* ---------- first five seconds: hero entrance (CSS only; the class is set in <head>, so nothing flashes) ---------- */
.hero .display .l { display: block; }
@keyframes r14Rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes r14Line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r14Panel { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes r14Fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .r14-js .hero .eyebrow, .r14-js .hero .display .l, .r14-js .hero .display .b, .r14-js .hero .lead, .r14-js .hero .cta-row, .r14-js .hero .for-list { animation: r14Rise .9s var(--ease) both; }
  .r14-js .hero .display .l { animation-delay: .08s; }
  .r14-js .hero .display .b { animation-delay: .18s; }
  .r14-js .hero .display .b::after { transform-origin: left; animation: r14Line 1s var(--ease) .65s both; }
  .r14-js .hero .lead { animation-delay: .32s; }
  .r14-js .hero .cta-row { animation-delay: .44s; }
  .r14-js .hero .for-list { animation-delay: .56s; }
  .r14-js .hero .panel { animation: r14Panel 1.1s var(--ease) .2s both; }
  .r14-js .hero .net, .r14-js .hero .fold, .r14-js .hero .net-hint { animation: r14Fade 1.4s ease .5s both; }
}

/* ---------- hero: iridescent halo around the monogram panel, and a gentle lean toward the cursor ---------- */
.panel-wrap { --lx: 0deg; --ly: 0deg; transform: perspective(900px) rotateX(var(--lx)) rotateY(var(--ly)); transition: transform .6s var(--ease); }
.panel-wrap::before { content: ""; position: absolute; inset: -12% -10%; z-index: -1; border-radius: 46%;
  background: conic-gradient(from 0deg, #C7B5E8, #AAB9FF, #A8E6D7, #F2B8D5, #FFC6AC, #C7B5E8); filter: blur(46px); opacity: .42; }
@keyframes r14Halo { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: no-preference) { .panel-wrap::before { animation: r14Halo 28s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .panel-wrap { transition: none; transform: none; } }

/* ---------- buttons and links: hover, pressed and focus feel the same everywhere ---------- */
.btn { transition: transform .22s var(--ease), box-shadow .3s var(--ease), background-color .25s, border-color .25s, color .25s; }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .08s; }
.btn-dark { position: relative; overflow: hidden; isolation: isolate; }
.btn-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(199,181,232,.38) 45%, rgba(168,230,215,.3) 55%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-dark:hover::after { transform: translateX(120%); }
.btn-dark:hover { box-shadow: 0 0 0 3px rgba(199,181,232,.4), 0 16px 30px -16px rgba(75,48,39,.85); }
.btn-line:hover { background: #fff; box-shadow: 0 12px 24px -18px rgba(75,48,39,.65); }
.btn-pearl:hover { box-shadow: 0 0 0 3px rgba(251,247,240,.18), 0 16px 30px -16px rgba(0,0,0,.6); }
.text-link { text-underline-offset: 4px; transition: text-decoration-color .25s, text-underline-offset .25s var(--ease); }
.text-link:hover { text-underline-offset: 6px; }
.text-link > span[aria-hidden] { display: inline-block; transition: transform .2s var(--ease); }
.text-link:hover > span[aria-hidden] { transform: translateX(3px); }
.nav a { transition: color .2s; }
:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-dark::after { display: none; } .btn, .text-link, .text-link > span[aria-hidden] { transition: none; } .btn:active { transform: none; } }

/* ---------- "Start here": its own tinted band, asymmetric rather than another equal row ---------- */
.explore { padding-block: clamp(64px, 8vw, 112px); background:
  radial-gradient(60% 70% at 12% 0%, rgba(199,181,232,.24), transparent 70%),
  radial-gradient(50% 60% at 95% 100%, rgba(168,230,215,.2), transparent 70%), var(--paper);
  border-block: 1px solid var(--line); }
@media (min-width: 861px) {
  .dest-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: stretch; }
  .dest-grid .dest:first-child .dest-surface { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 28px; align-content: start; }
  .dest-grid .dest:first-child .dest-art { grid-row: span 6; height: auto; min-height: 100%; margin: 0; }
  .dest-grid .dest:first-child .dest-art-assess { justify-content: center; }
  .dest-grid .dest:last-child .dest-art { height: 190px; }
  .dest-grid .dest:last-child .dest-art-work img { height: 160px; }
}
.dest-surface { transition: box-shadow .35s var(--ease); }
.dest:hover .dest-surface { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.06), 0 34px 60px -32px rgba(75,48,39,.55); }
.da-bar i { transition: background-color .4s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .dest:hover .da-bar i:nth-child(5) { background: var(--choc); transition-delay: .05s; }
  .dest:hover .da-bar i:nth-child(6) { background: var(--choc); transition-delay: .15s; }
  .dest:hover .da-bar i:nth-child(7) { background: var(--choc); transition-delay: .25s; }
  .dest-art-work img { transition: transform .5s var(--ease); }
  .dest:hover .dest-art-work img:nth-child(1) { transform: rotate(-6deg) translateX(-6px); }
  .dest:hover .dest-art-work img:nth-child(3) { transform: rotate(6deg) translateX(6px); }
}

/* ---------- the signature: Anatomy + Systems in action in one dark band ---------- */
#anatomy { padding-bottom: clamp(72px, 9vw, 120px); }
.stage { box-shadow: inset 0 0 0 1px var(--dark-line), 0 40px 80px -50px rgba(0,0,0,.6); }
#demo-connect[aria-pressed="true"] { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
#demo-connect[aria-pressed="true"]::before, #demo-connect[aria-pressed="true"]::after { display: none; }
.demo-status { transition: color .3s; }
.demo[data-state="connected"] .demo-status { color: var(--on-dark); }
/* step states while the signal travels */
.step-st { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 999px; opacity: 0; transition: opacity .3s, background-color .3s, color .3s; }
.step-st:empty { display: none; }
.demo[data-state="connected"] .step-st { opacity: 1; }
.step[data-st="Done"] .step-st { background: rgba(168,230,215,.55); color: var(--choc); }
.step[data-st="Now"] .step-st { background: var(--choc); color: var(--on-dark); }
.step[data-st="Next"] .step-st { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(75,48,39,.25); }
.step { transition: transform .95s var(--ease) var(--d, 0ms), box-shadow .45s var(--ease); }
.demo[data-state="connected"] .step[data-st="Now"] { box-shadow: 0 0 0 3px rgba(199,181,232,.55), 0 0 34px 2px rgba(170,185,255,.35), 0 16px 30px -18px rgba(0,0,0,.55); }
.demo[data-state="connected"] .step[data-st="Next"] { box-shadow: 0 16px 30px -18px rgba(0,0,0,.55); }
.demo[data-state="connected"] .step[data-st="Next"] h3, .demo[data-state="connected"] .step[data-st="Next"] p { opacity: .72; transition: opacity .4s; }
/* Systems in action, now inside the band */
.sv-in-band { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--dark-line); }
.sv-bridge { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.sv-bridge span { width: 26px; height: 1.5px; background: var(--pearl); }
.band-dark .sv-title { color: var(--on-dark); }
.band-dark .sv-intro { color: var(--on-dark-muted); }
.band-dark .sv-concept { background: rgba(251,247,240,.1); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.band-dark .sv-concept b { background: var(--lilac); color: var(--choc); }
.band-dark .sv-tab { background: transparent; color: var(--on-dark); border-color: var(--dark-line); transition: background-color .25s, color .25s, border-color .25s; }
.band-dark .sv-tab:hover { border-color: var(--on-dark-muted); }
.band-dark .sv-tab[aria-selected="true"] { background: var(--ivory); color: var(--choc); border-color: var(--ivory); box-shadow: 0 10px 22px -14px rgba(0,0,0,.6); }
.band-dark .sv-cap { color: var(--on-dark-muted); }
.band-dark .sv-foot .btn-line { color: var(--on-dark); border-color: var(--dark-line); background: transparent; }
.band-dark .sv-foot .btn-line:hover { background: rgba(251,247,240,.08); border-color: var(--on-dark-muted); box-shadow: none; }
.band-dark .mock { color: var(--ink); }
.band-dark .mock :focus-visible { outline-color: var(--choc); }
.band-dark .xd-store .xd { background: var(--ivory); color: var(--ink); border-radius: 18px; padding: 20px; margin-top: 14px; }   /* no-JavaScript fallback */
@keyframes r14View { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .has-tabs .sv-panel:not([hidden]) { animation: r14View .45s var(--ease) both; } }
@media (prefers-reduced-motion: reduce) { .step, .step-st { transition: none; } }

/* ---------- Process: a light, connected timeline instead of a third row of cards ---------- */
#approach .pcard { background: transparent; box-shadow: none; padding-inline: 0; }
#approach .pcard:hover, #approach .pcard:focus-within { transform: none; box-shadow: none; }
#approach .pcard-art { background: linear-gradient(160deg, #FFFFFF, #F6F0E7); box-shadow: 0 0 0 1px rgba(75,48,39,.08), 0 18px 34px -26px rgba(75,48,39,.45); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
#approach .pcard:hover .pcard-art, #approach .pcard:focus-within .pcard-art { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(75,48,39,.12), 0 28px 50px -30px rgba(75,48,39,.6); }
#approach .pcard h3, #approach .pcard > p, #approach .pcard .xlink, #approach .pcard-top { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { #approach .pcard-art { transition: none; } #approach .pcard:hover .pcard-art { transform: none; } }

/* ---------- small screens: comfortable, never hover-dependent ---------- */
@media (max-width: 700px) {
  .step-st { top: 10px; right: 10px; }
  .sv-in-band { margin-top: 48px; padding-top: 36px; }
  .explore { padding-block: 56px; }
}
@media (min-width: 861px) { .dest-grid .dest:first-child .dest-link { justify-self: start; } }

/* ================= r17 · Effect 1: hero entrance and iridescent focal point (built from r14; hero only) ================= */
:root { --e17: cubic-bezier(.22, 1, .36, 1); }   /* a soft ease-out with no overshoot, used for the whole entrance */

@keyframes r17Rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r17RiseH { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r17Fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes r17Line  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r17Panel { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes r17Sweep { 0% { transform: translateX(-62%); opacity: 0; } 4% { opacity: 1; } 22% { transform: translateX(62%); opacity: 1; } 24%, 100% { transform: translateX(62%); opacity: 0; } }

/* ---------- depth for the RR panel: clearer glass, a soft highlight, a still glow beneath, a visible (still) halo ---------- */
.panel { background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(251,247,240,.5) 55%, rgba(244,237,227,.6)); }
.panel::before { padding: 2px; }
.panel-glint { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(110% 70% at 12% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 46%),
              radial-gradient(90% 55% at 88% 100%, rgba(199,181,232,.22), rgba(199,181,232,0) 60%); }
.panel .lockup { position: relative; z-index: 1; }
/* one realistic reflection: plain white light, low contrast, passing behind the monogram */
.panel-sweep { position: absolute; inset: -10% -70%; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,.55) 48.5%, rgba(255,255,255,.2) 51%, rgba(255,255,255,0) 56%);
  transform: translateX(-62%); }
/* the drop-shadow filter is replaced by one pre-blurred shadow and glow layer (lighter to draw) */
.panel-wrap { filter: none; transition: transform .9s var(--e17); }
.panel-wrap::after { content: ""; position: absolute; inset: 8% 6% -5% 6%; z-index: -1; border-radius: 30px; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 62%, rgba(75,48,39,.22), rgba(75,48,39,0) 75%), radial-gradient(80% 70% at 50% 45%, rgba(199,181,232,.55), rgba(199,181,232,0) 72%);
  filter: blur(24px); }
.panel-wrap::before { inset: -20% -16%; opacity: .45; animation: none; }   /* the halo is now visible around the panel, and still */

@media (prefers-reduced-motion: no-preference) {
  /* ---------- entrance, about 2.1 s: eyebrow → headline → paragraph → labels → buttons last; the panel eases in alongside ---------- */
  .r14-js .hero .eyebrow     { animation: r17Rise  .7s  var(--e17) .1s  both; }
  .r14-js .hero .display .l  { animation: r17RiseH .9s  var(--e17) .3s  both; }
  .r14-js .hero .display .b  { animation: r17RiseH .9s  var(--e17) .45s both; }
  .r14-js .hero .display .b::after { animation: r17Line .9s var(--e17) 1s both; }
  .r14-js .hero .lead        { animation: r17Rise  .8s  var(--e17) .8s  both; }
  .r14-js .hero .for-list    { animation: r17Fade  .8s  var(--e17) 1s   both; }
  .r14-js .hero .cta-row     { animation: r17Rise  .8s  var(--e17) 1.15s both; }
  .r14-js .hero .panel       { animation: r17Panel 1.4s var(--e17) .55s both; }
  .r14-js .hero .panel-wrap::before, .r14-js .hero .panel-wrap::after { animation: r17Fade 1.4s ease-out .6s both; }
  .r14-js .hero .hero-ribbons { animation: r17Fade 1.6s ease-out .4s both; }
  .r14-js .hero .net, .r14-js .hero .fold, .r14-js .hero .net-hint { animation: r17Fade 1s ease-out .9s both; }
  /* the reflection crosses once the entrance has settled, then rests for about 13 s between passes */
  .panel-sweep { animation: r17Sweep 16s cubic-bezier(.45, .05, .35, 1) 2.4s infinite; }
}
@media (prefers-reduced-motion: reduce) { .panel-sweep { display: none; } .panel-wrap { transition: none; } }

/* ================= r18 · hero refinement (built from r17; hero only) ================= */
/* Two easings: a soft ease-out for the copy, and a longer, gentler settle for the visual layers */
:root { --e18: cubic-bezier(.22, 1, .36, 1); --e18-settle: cubic-bezier(.16, 1, .3, 1); }

@keyframes r18Rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r18RiseH  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes r18Fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes r18Line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r18Panel  { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes r18Silk   { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes r18Glint  { 0%, 100% { transform: translate(-5%, -3%); } 50% { transform: translate(6%, 4%); } }
@keyframes r18Sweep  { 0% { transform: translateX(-62%); opacity: 0; } 4% { opacity: 1; } 28% { transform: translateX(62%); opacity: 1; } 31%, 100% { transform: translateX(62%); opacity: 0; } }

/* ---------- composition at rest: keep the silk away from the copy so the text stays crisp ---------- */
.hero-ribbons { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 46%); }
@media (max-width: 860px) { .hero-ribbons { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); } }
/* the glass highlight becomes a soft light source that can drift very slowly */
.panel-glint { inset: -20%; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- entrance, about 2.8 s: one sequence in reading order, then the visual layers settle ---------- */
  .r14-js .hero .eyebrow     { animation: r18Rise  .9s  var(--e18) .15s both; }
  .r14-js .hero .display .l  { animation: r18RiseH 1.1s var(--e18) .35s both; }
  .r14-js .hero .display .b  { animation: r18RiseH 1.1s var(--e18) .55s both; }
  .r14-js .hero .lead        { animation: r18Rise  1s   var(--e18) 1s   both; }
  .r14-js .hero .display .b::after { animation: r18Line 1s var(--e18) 1.35s both; }
  .r14-js .hero .for-list    { animation: r18Fade  .9s  var(--e18) 1.4s  both; }
  .r14-js .hero .cta-row     { animation: r18Rise  1s   var(--e18) 1.6s  both; }   /* the buttons arrive last */
  .r14-js .hero .panel       { animation: r18Panel 1.9s var(--e18-settle) .75s both; }
  .r14-js .hero .panel-wrap::before, .r14-js .hero .panel-wrap::after { animation: r18Fade 1.9s ease-out .85s both; }
  .r14-js .hero .hero-ribbons { animation: r18Silk 2.3s var(--e18-settle) .5s both; }
  .r14-js .hero .net, .r14-js .hero .fold, .r14-js .hero .net-hint { animation: r18Fade 1.4s ease-out 1.1s both; }

  /* ---------- after it settles: one slow light source on the glass, and an occasional soft reflection ---------- */
  .panel-glint { animation: r18Glint 24s ease-in-out 3s infinite; }
  .panel-sweep { animation: r18Sweep 18s cubic-bezier(.45, .05, .35, 1) 3.2s infinite; }   /* a 5 s pass, then 13 s of rest */
}
@media (prefers-reduced-motion: reduce) { .panel-glint { animation: none; transform: none; } }

/* ================= r19 · hero refinement (built from r18; hero only) ================= */
/* One rhythm for the copy: a 0.2 s beat, one duration (1 s), one easing; the visual layers settle a little later */
:root { --e19: cubic-bezier(.22, 1, .36, 1); --e19-settle: cubic-bezier(.16, 1, .3, 1); }

@keyframes r19Rise   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes r19Fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes r19Line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r19Panel  { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes r19Silk   { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes r19Rest   { from { opacity: 1; } to { opacity: .82; } }            /* once settled, the silk steps back slightly */
@keyframes r19Glint  { 0%, 100% { transform: translate(-3%, -2%); } 50% { transform: translate(3%, 2%); } }
@keyframes r19Sweep  { 0% { transform: translateX(-62%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(62%); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- entrance: eyebrow → headline (with its underline) → paragraph → buttons, on an even 0.2 s beat ---------- */
  .r14-js .hero .eyebrow     { animation: r19Rise 1s var(--e19) .1s  both; }
  .r14-js .hero .display .l  { animation: r19Rise 1s var(--e19) .3s  both; }
  .r14-js .hero .display .b  { animation: r19Rise 1s var(--e19) .5s  both; }
  .r14-js .hero .display .b::after { animation: r19Line 1s var(--e19) .9s both; }   /* draws as line two settles */
  .r14-js .hero .lead        { animation: r19Rise 1s var(--e19) .7s  both; }
  .r14-js .hero .cta-row     { animation: r19Rise 1s var(--e19) .9s  both; }
  .r14-js .hero .for-list    { animation: r19Fade 1s var(--e19) 1.1s both; }    /* a quiet last note, finishing with the buttons */
  /* the visual arrives alongside and settles just after the copy */
  .r14-js .hero .panel       { animation: r19Panel 1.8s var(--e19-settle) .6s both; }
  .r14-js .hero .panel-wrap::before, .r14-js .hero .panel-wrap::after { animation: r19Fade 1.8s ease-out .7s both; }
  .r14-js .hero .hero-ribbons { animation: r19Silk 2.2s var(--e19-settle) .4s both, r19Rest 4s ease-in-out 3.2s forwards; }
  .r14-js .hero .net, .r14-js .hero .fold, .r14-js .hero .net-hint { animation: r19Fade 1.3s ease-out 1s both; }

  /* ---------- resting state: one reflection crosses once, then only a very slow light remains ---------- */
  .panel-glint { animation: r19Glint 36s ease-in-out 3s infinite; }
  .panel-sweep { animation: r19Sweep 5s cubic-bezier(.45, .05, .35, 1) 2.8s 1 both; }
}
@media (prefers-reduced-motion: reduce) { .hero-ribbons { opacity: .82; } }

/* ================= r20 · Effect 2: the scroll experience (homepage sections below the hero; the hero is untouched) =================
   How it works
   - site.js adds .js-motion only when motion is welcome, and marks each block .is-in once, the first time it is about 15% in view.
     Nothing is ever hidden again, so scrolling back up is calm.
   - Blocks that arrive together in one section form a short sequence: the heading block first, the next block about 240 ms
     later, cards about 120 ms apart (site.js sets the start as --rb). No block waits more than about half a second.
   - Headings get the most movement (18 px); supporting copy and labels a little (6-8 px); lists and FAQ simply fade.
   - Everything here is opacity and transform, run as one-off animations with a "backwards" fill: once an entrance ends,
     the element's own hover and focus transitions are back in charge. No layout changes, no scroll handlers that move things. */
:root { --rv: cubic-bezier(.22, 1, .36, 1); --rb: 0ms; }

@keyframes r20Head  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes r20Soft  { from { opacity: 0; transform: translateY(7px); }  to { opacity: 1; transform: none; } }
@keyframes r20Block { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r20Card  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes r20Light { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r20Stage { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes r20Fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes r20Fan   { from { transform: rotate(0deg) translateY(6px); } }   /* the screenshots settle into their usual fan */

/* ---------- 1. the default for any revealed block (also used on the Work and Assessment pages) ---------- */
.js-motion [data-reveal] { transition: none; }
.js-motion [data-reveal]:not(.is-in) { opacity: 0; }
.js-motion [data-reveal].is-in { animation: r20Block .8s var(--rv) var(--rb) backwards; }

/* ---------- 2. heading blocks: label → heading → supporting line, so the heading leads ---------- */
.js-motion :is(.section-head, .faq-head, .demo-head, .about-intro, .contact-lead)[data-reveal] { opacity: 1; animation: none; }
.js-motion :is(.section-head, .faq-head, .demo-head, .about-intro, .contact-lead)[data-reveal]:not(.is-in) :is(.label, .h2, .about-hello, .intro, .about-sub, .contact-intro, .sv-concept, .next-steps, .email-contact) { opacity: 0; }
.js-motion :is(.section-head, .faq-head, .demo-head, .about-intro, .contact-lead).is-in .label { animation: r20Soft .55s var(--rv) var(--rb) backwards; }
.js-motion :is(.section-head, .faq-head, .demo-head, .about-intro, .contact-lead).is-in :is(.h2, .about-hello) { animation: r20Head .75s var(--rv) calc(var(--rb) + 90ms) backwards; }
.js-motion :is(.section-head, .faq-head, .demo-head, .about-intro, .contact-lead).is-in :is(.intro, .about-sub, .contact-intro, .sv-concept) { animation: r20Soft .65s var(--rv) calc(var(--rb) + 210ms) backwards; }
.js-motion .contact-lead.is-in :is(.next-steps, .email-contact) { animation: r20Fade .6s ease-out calc(var(--rb) + 320ms) backwards; }

/* ---------- 3. card groups: the row itself stays put; each card arrives in turn ---------- */
.js-motion :is(.cards, .dest-grid, .offer-grid, .pcards)[data-reveal] { opacity: 1; animation: none; }
.js-motion [data-reveal-item].tilt:not(.is-in) > .surface { opacity: 0; }
.js-motion [data-reveal-item].tilt.is-in > .surface { animation: r20Card .85s var(--rv) var(--rb) backwards; }
/* A. Services: the most presence below the hero */
/* B. Start here: same card entrance; the three screenshots then settle into their fan (understated, and hover still works) */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .dest.is-in .dest-art-work img { animation: r20Fan .9s var(--rv) calc(var(--rb) + 260ms) backwards; }
}
/* D. Offers and Process: supporting information, so lighter (10 px, quicker) */
.js-motion .offer[data-reveal-item]:not(.is-in), .js-motion .pcard[data-reveal-item]:not(.is-in) { opacity: 0; }
.js-motion .offer[data-reveal-item].is-in, .js-motion .pcard[data-reveal-item].is-in { animation: r20Light .65s var(--rv) var(--rb) backwards; }
/* the process timeline draws first, then the three steps appear along it */
.pcards::before { transform-origin: left center; transition: transform .9s var(--rv); }
.js-motion .pcards[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
@media (max-width: 860px) { .pcards::before { transform-origin: center top; } .js-motion .pcards[data-reveal]:not(.is-in)::before { transform: scaleY(0); } }

/* ---------- 4. single blocks, tuned per role ---------- */
.js-motion .svc-legend.is-in, .js-motion .faq-list.is-in { animation: r20Fade .6s ease-out var(--rb) backwards; }   /* small print and FAQ rows: a fade, no movement */
.js-motion #demo.is-in { animation: r20Stage .9s var(--rv) var(--rb) backwards; }                                    /* the Anatomy stage arrives as one piece */

/* ---------- 5. C. ivory → chocolate → ivory: a deliberate change of light ---------- */
/* the band reads as a recessed stage: a little deeper at its top and bottom edges (static, costs nothing) */
#anatomy { background: linear-gradient(180deg, rgba(34, 20, 15, .34) 0, rgba(34, 20, 15, 0) 200px), linear-gradient(0deg, rgba(34, 20, 15, .22) 0, rgba(34, 20, 15, 0) 160px), var(--choc); }
/* an iridescent hairline along the top edge, which draws outward from the centre as the band arrives */
#anatomy::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; box-shadow: 0 0 22px 3px rgba(199,181,232,.28);
  background: linear-gradient(90deg, rgba(199,181,232,0) 4%, rgba(199,181,232,.75) 22%, rgba(170,185,255,.8) 40%, rgba(168,230,215,.8) 58%, rgba(242,184,213,.75) 76%, rgba(255,198,172,0) 96%);
  transform-origin: center; transition: transform .9s var(--rv); }
#anatomy::before { transition: opacity .9s ease-out .15s; }   /* the faint grid comes up with it, like a stage light */
.js-motion #anatomy:not(.sec-in)::after { transform: scaleX(0); }
.js-motion #anatomy:not(.sec-in)::before { opacity: 0; }
/* leaving the band: the ivory below starts in its soft shadow, so the return to light is gradual */
#offers { background: linear-gradient(180deg, rgba(75, 48, 39, .06) 0, rgba(75, 48, 39, 0) 160px); }

/* ---------- 6. focus, reduced motion, print: content is never left hidden ---------- */
.js-motion [data-reveal]:focus-within, .js-motion [data-reveal-item]:focus-within,
.js-motion [data-reveal]:focus-within :is(.label, .h2, .about-hello, .intro, .about-sub, .contact-intro, .sv-concept, .next-steps, .email-contact),
.js-motion [data-reveal-item]:focus-within > .surface { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {   /* site.js also removes .js-motion here, so this is only a backstop */
  .strengths::before, .pcards::before, #anatomy::after { transition: none; transform: none !important; }
  #anatomy::before { transition: none; opacity: 1; }
}
@media print {
  .js-motion [data-reveal], .js-motion [data-reveal-item], .js-motion [data-reveal-item] > .surface,
  .js-motion [data-reveal] :is(.label, .h2, .about-hello, .intro, .about-sub, .contact-intro, .sv-concept, .next-steps, .email-contact) { opacity: 1 !important; animation: none !important; }
  .js-motion .strengths::before, .js-motion .pcards::before, #anatomy::after { transform: none !important; }
  .js-motion #anatomy::before { opacity: 1 !important; }
}

/* ================= r21 · Effect 3A: premium service cards (#services only; the hero, scroll system and "Start here" cards are untouched) =================
   Idle: still and composed. Hover (real pointers only): a 3 px rise, depth that eases in, a soft pearl/lilac sheen,
   the diagram lines strengthen and shift 3 px, the link underline and arrow follow. Everything returns at the same pace.
   The JS cursor tilt still runs (it is shared with the "Start here" cards) but has no visible effect here. */
:root { --e21: cubic-bezier(.22, 1, .36, 1); }

/* ---------- idle ---------- */
#services .tilt { isolation: isolate; --ang: 205deg !important; }             /* a fixed rim angle instead of one that follows the cursor */
#services .tilt, #services .tilt.is-live { transform: none; transition: transform .75s var(--e21); }
/* depth: a ready-made soft shadow layer that fades in, rather than an animated box-shadow */
#services .tilt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 30px 56px -34px rgba(75, 48, 39, .42), 0 12px 26px -18px rgba(150, 128, 196, .38);
  opacity: 0; transition: opacity .8s var(--e21); }
/* the card face keeps its resting shadow in every state (no snap) */
#services .tilt:hover .surface, #services .tilt:focus-within .surface, #services .tilt.is-touched .surface {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(75,48,39,.08), 0 18px 40px -26px rgba(75,48,39,.45); }
/* the content sits above the light, so the sheen never washes over the text */
#services .svc { position: relative; z-index: 1; }
/* a softer, pearl-led sheen that drifts once across part of the card rather than tracking the cursor */
#services .tilt .sheen, #services .tilt.is-live .sheen {
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.6) 45%, rgba(199,181,232,.24) 50%, rgba(242,184,213,.12) 55%, transparent 64%);
  transform: translateX(-16%); opacity: 0; transition: opacity .8s var(--e21), transform .85s var(--e21); }
#services .tilt .edge { transition: opacity .8s var(--e21); }
#services .tilt:focus-within .edge, #services .tilt:focus-within .sheen { opacity: 0; }   /* a mouse click on the link no longer leaves the card lit */
#services .glyph svg { transition: transform .8s var(--e21) 60ms; }
#services .glyph .g-ln { transition: stroke-opacity .8s var(--e21) 60ms; }
/* a hairline under the words only (not the arrow) that draws in from the left */
#services .card-link { position: relative; align-self: flex-start; padding-right: 8px; }   /* the link hugs its words, so the line ends before the arrow */
#services .card-link::after { content: ""; position: absolute; left: 0; right: calc(1em + 16px); top: calc(50% + .8em); height: 1px; background: currentColor; pointer-events: none;
  opacity: 0; transform: scaleX(.35); transform-origin: left center; transition: opacity .65s var(--e21), transform .75s var(--e21); }
#services .card-link .arr { display: inline-block; transition: transform .7s var(--e21) 80ms; }

/* phones keep :hover after a tap, so the older site-wide hover light is switched off here and only real pointers get it back */
#services .tilt:hover .edge, #services .tilt:hover .sheen { opacity: 0; }

/* ---------- hover: only on devices with a real pointer, so a tap never leaves a card stuck in its hover state ---------- */
@media (hover: hover) and (pointer: fine) {
  #services .tilt:hover { transform: translateY(-3px); }
  #services .tilt:hover::before { opacity: 1; }
  #services .tilt:hover .sheen { opacity: .7; transform: translateX(6%); }
  #services .tilt:hover .edge { opacity: .75; }
  #services .tilt:hover .glyph svg { transform: translateX(3px); }
  #services .tilt:hover .glyph .g-ln { stroke-opacity: .75; }
  #services .tilt:hover .card-link::after { opacity: .35; transform: none; }
  #services .tilt:hover .card-link .arr { transform: translateX(4px); }
  #services .card-link:hover::after { opacity: .75; }
}

/* ---------- keyboard: the same lift and depth, plus the site's usual focus ring on the link ---------- */
#services .tilt:has(:focus-visible) { transform: translateY(-3px); }
#services .tilt:has(:focus-visible)::before { opacity: 1; }
#services .tilt:has(:focus-visible) .edge { opacity: 1; }
#services .tilt:has(:focus-visible) .glyph .g-ln { stroke-opacity: .75; }
#services .tilt:has(:focus-visible) .card-link::after { opacity: .75; transform: none; }
#services .tilt:has(:focus-visible) .card-link .arr { transform: translateX(4px); }

/* ---------- touch: a brief, soft acknowledgement (site.js clears it after 1.4 s); no lift ---------- */
#services .tilt.is-touched::before { opacity: .8; }
#services .tilt.is-touched .edge { opacity: .6; }
#services .tilt.is-touched .sheen { opacity: 0; }

/* ---------- reduced motion: no movement at all; depth and rim simply fade ---------- */
@media (prefers-reduced-motion: reduce) {
  #services .tilt, #services .tilt.is-live, #services .tilt:hover, #services .tilt:has(:focus-visible) { transform: none !important; transition: none; }
  #services .tilt .sheen, #services .tilt.is-live .sheen, #services .tilt:hover .sheen { transform: none; transition: opacity .3s; }
  #services .glyph svg, #services .tilt:hover .glyph svg { transform: none; transition: none; }
  #services .card-link .arr, #services .tilt:hover .card-link .arr, #services .tilt:has(:focus-visible) .card-link .arr { transform: none; transition: none; }
  #services .tilt::before, #services .tilt .edge, #services .glyph .g-ln { transition-duration: .3s; transition-delay: 0s; }
  #services .card-link::after { transform: none; transition: opacity .3s; }
}

/* ================= r21.1 · refinement of the r21 service cards (#services only; loaded after r21-cards.css) =================
   One curve, one tempo: the card, its shadow and its rim rise and settle together over 0.9 s, and return the same way.
   The light is a single soft pass across the surface that fades away by itself, so a card at rest under the pointer
   looks composed rather than "lit". The diagram no longer moves; the link underline and arrow arrive last, quietly. */
:root { --e211: cubic-bezier(.33, 1, .68, 1); --t211: .9s; }   /* a gentle ease-out (no sharp start), the same in both directions */

@keyframes r211Light {
  0%   { opacity: 0;   transform: translateX(-34%); }
  38%  { opacity: .85; }
  100% { opacity: 0;   transform: translateX(30%); }
}

/* ---------- the object: card, shadow layer and rim move as one ---------- */
#services .tilt, #services .tilt.is-live { transition: transform var(--t211) var(--e211); }
#services .tilt::before { box-shadow: 0 28px 54px -34px rgba(75, 48, 39, .40), 0 12px 26px -20px rgba(150, 128, 196, .26);
  transition: opacity var(--t211) var(--e211); }
#services .tilt .edge { transition: opacity var(--t211) var(--e211); }

/* ---------- the light: broad, low-contrast pearl with only a breath of lilac, beneath the text ---------- */
#services .tilt .sheen, #services .tilt.is-live .sheen {
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.5) 44%, rgba(255,255,255,.62) 48%, rgba(214,202,238,.2) 53%, transparent 66%);
  opacity: 0; transform: translateX(-34%); transition: none; animation: none; }

/* ---------- the diagram: its lines settle a touch darker; it no longer shifts ---------- */
#services .glyph svg { transition: none; }
#services .glyph .g-ln { transition: stroke-opacity var(--t211) var(--e211); }

/* ---------- the finishing detail: returns with everything else (no delay on the way back) ---------- */
#services .card-link::after { transition: opacity .7s var(--e211), transform var(--t211) var(--e211); }
#services .card-link .arr { transition: transform var(--t211) var(--e211); }

@media (hover: hover) and (pointer: fine) {
  #services .tilt:hover .edge { opacity: .45; }
  #services .tilt:hover .sheen { opacity: 0; transform: translateX(30%); animation: r211Light 1.7s cubic-bezier(.45, .05, .35, 1) 80ms both; }
  #services .tilt:hover .glyph svg { transform: none; }
  #services .tilt:hover .glyph .g-ln { stroke-opacity: .62; }
  /* on the way in only, the link details wait a beat so they read as the last touch */
  #services .tilt:hover .card-link::after { opacity: .28; transition: opacity .7s var(--e211) .18s, transform var(--t211) var(--e211) .18s; }
  #services .tilt:hover .card-link .arr { transform: translateX(3px); transition: transform var(--t211) var(--e211) .18s; }
  #services .card-link:hover::after { opacity: .6; }
}

/* ---------- keyboard: same lift, shadow and rim, plus the site's focus ring; no light pass ---------- */
#services .tilt:has(:focus-visible) .edge { opacity: .7; }
#services .tilt:has(:focus-visible) .glyph .g-ln { stroke-opacity: .62; }
#services .tilt:has(:focus-visible) .card-link::after { opacity: .6; }
#services .tilt:has(:focus-visible) .card-link .arr { transform: translateX(3px); }

/* ---------- touch stays as r21: a soft shadow and rim that clear after about 1.4 s; no lift, no light ---------- */
#services .tilt.is-touched .edge { opacity: .45; }

/* ---------- reduced motion: nothing moves and there is no light pass; depth and rim fade in 0.3 s ---------- */
@media (prefers-reduced-motion: reduce) {
  #services .tilt .sheen, #services .tilt:hover .sheen { animation: none !important; opacity: 0 !important; }
  #services .tilt::before, #services .tilt .edge, #services .glyph .g-ln { transition: opacity .3s, stroke-opacity .3s; }
  #services .card-link::after, #services .tilt:hover .card-link::after { transition: opacity .3s; }
  #services .card-link .arr, #services .tilt:hover .card-link .arr, #services .tilt:has(:focus-visible) .card-link .arr { transform: none; transition: none; }
}

/* ================= r22 · Effect 4: the Anatomy of a Working System, assembled as a sequence (#demo only) =================
   Assemble: step 1 settles, its tools dock, the line draws into step 2 as it arrives ... through to Onboarding (about 4 s).
   Then one guided walk-through (Done / Now / Next, about 1.4 s on each step) and a finished, still state: every step Done.
   Take apart / Replay: the lines and light fade first, then the pieces drift apart. Copy, layout and controls are unchanged. */
:root { --e22: cubic-bezier(.33, 1, .68, 1); --e22-part: cubic-bezier(.45, 0, .25, 1); }

/* each piece settles with a long, soft ease-out; a docking tool takes its light colour as it lands, not before */
.stage.is-assembling .step { transition: transform 1.05s var(--e22) var(--d, 0ms), box-shadow .45s var(--ease); }
.stage.is-assembling .tool { transition: transform 1.05s var(--e22) var(--d, 0ms), background-color .5s ease calc(var(--d, 0ms) + 500ms), color .5s ease calc(var(--d, 0ms) + 500ms), border-color .5s ease calc(var(--d, 0ms) + 500ms); }
.stage.is-parting .step, .stage.is-parting .tool { transition: transform .9s var(--e22-part) var(--d, 0ms), box-shadow .45s var(--ease), background-color .4s, color .4s, border-color .4s; }

/* while the journey builds, pieces still waiting their turn recede a little, so the part already built leads the eye */
@keyframes r22Wake { from { opacity: .42; } to { opacity: 1; } }
.stage.is-assembling .step, .stage.is-assembling .tool { animation: r22Wake .6s ease var(--d, 0ms) backwards; }

/* the light only appears for the walk-through, with a soft lilac halo, and fades rather than blinking */
.spark { transition: opacity .5s ease; filter: drop-shadow(0 0 5px rgba(199, 181, 232, .9)); }
.demo[data-state="connected"]:not(.is-walking) .spark { opacity: 0; }
.demo.is-walking .spark { opacity: .95; }

/* taking it apart: the connections and status chips fade before anything moves */
.stage-lines .flow { transition: opacity .4s ease; }
.demo.is-fading .stage-lines .flow, .demo.is-fading .step-st { opacity: 0 !important; }
.demo.is-fading .step { box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55) !important; }

@media (prefers-reduced-motion: reduce) {
  .stage.is-assembling .step, .stage.is-assembling .tool, .stage.is-parting .step, .stage.is-parting .tool { transition: none; }
  .spark { display: none; }
  .stage.is-assembling .step, .stage.is-assembling .tool { animation: none; }
}

/* ================= r22.1 · Effect 4 refined: the Anatomy of a Working System (#demo only; loaded after r22-anatomy.css) =================
   Build (about 5.5 s): the scattered pieces fade out (0.48 s); then, one step every 0.95 s, the card fades in with a 14 px rise,
   its tools settle beneath it 0.38 s later (8 px rise), and the line draws on to the next step. One curve throughout.
   Walk-through: about 1.7 s on each step and a 0.8 s glide between, with a quieter highlight. Then a still, all-Done journey.
   The rise uses the separate CSS "translate" property, so it never disturbs the positions the script sets with "transform". */
:root { --e221: cubic-bezier(.22, 1, .36, 1); }

@keyframes r221Card { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes r221Tool { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes r221Fade { from { opacity: 0; } to { opacity: 1; } }

/* r22's "waiting pieces dim" entrance is replaced by the in-place build below */
.stage.is-assembling .step, .stage.is-assembling .tool { animation: none; }

/* 1. everything on the stage fades out before a build (also used to reset a build that is interrupted) */
.stage.is-gathering .step, .stage.is-gathering .tool, .stage.is-gathering .stage-lines { opacity: 0; transition: opacity .45s ease; }

/* 2. the build: each piece waits invisibly for its turn (backwards fill), then fades in and rises a little */
.stage.is-building .step { animation: r221Card .9s var(--e221) var(--d, 0ms) backwards; }
.stage.is-building .tool { animation: r221Tool .7s var(--e221) var(--d, 0ms) backwards; }

/* 3. after an interrupted build is reset, the scattered pieces simply fade back in */
.stage.is-appearing .step, .stage.is-appearing .tool, .stage.is-appearing .stage-lines { animation: r221Fade .6s ease both; }

/* 4. the walk-through: a quieter highlight on the current step; finished and upcoming steps stay clearly legible */
.demo[data-state="connected"] .step[data-st="Now"] { box-shadow: 0 0 0 2px rgba(199, 181, 232, .75), 0 0 22px rgba(170, 185, 255, .16), 0 16px 30px -18px rgba(0, 0, 0, .55); }
.demo[data-state="connected"] .step[data-st="Next"] h3, .demo[data-state="connected"] .step[data-st="Next"] p { opacity: .8; transition: opacity .5s ease; }
.stage.is-assembling .step { transition: transform 1.05s var(--e22) var(--d, 0ms), box-shadow .6s ease; }
/* tool colours change promptly (r22 delayed them to match the old flight; with the in-place build that delay only lingered) */
.stage.is-assembling .tool { transition: transform 1.05s var(--e22) var(--d, 0ms), background-color .5s ease, color .5s ease, border-color .5s ease; }
.step-st { transition: opacity .45s ease, background-color .45s ease, color .45s ease; }
/* the light: smaller halo, and a slower fade at the end so the finish feels settled */
.spark { transition: opacity .8s ease; filter: drop-shadow(0 0 4px rgba(199, 181, 232, .75)); }

@media (prefers-reduced-motion: reduce) {
  .stage.is-building .step, .stage.is-building .tool, .stage.is-appearing .step, .stage.is-appearing .tool, .stage.is-appearing .stage-lines { animation: none; }
  .stage.is-gathering .step, .stage.is-gathering .tool, .stage.is-gathering .stage-lines { opacity: 1; transition: none; }
}

/* ================= r23 · Effect 5: Systems in action (#systems-lab only; loaded last) =================
   Small, targeted refinements to an engine that already works well:
   - the current stage settles in gently (no 116% pop and snap back), with a smaller, softer ring;
   - the travelling light has one soft lilac glow instead of a double white-and-mint glow;
   - on Play / Replay the drawn path fades out before the stages reset, instead of vanishing;
   - the stage card arrives on the site's shared curve. Wording, pacing and controls are unchanged. */
:root { --e23: cubic-bezier(.22, 1, .36, 1); }

@keyframes r23Settle { from { transform: scale(.94); } to { transform: none; } }
@keyframes r23Ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes r23Card { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the current stage */
#systems-lab .js[data-state="now"] .js-ic { animation: r23Settle .6s var(--e23); }
#systems-lab .jx.is-live .js[data-state="now"] .js-ic::after,
#systems-lab .jx.is-live .js[data-state="ahead"] .js-ic::after,
#systems-lab .jx.is-live .kcol[data-state="now"] .kcol-ic::after,
#systems-lab .jx.is-live .kcol[data-state="ahead"] .kcol-ic::after { animation: r23Ring 1s var(--e23) 1; }

/* the travelling light */
#systems-lab .jx-s { stroke-width: 3; filter: drop-shadow(0 0 4px rgba(199, 181, 232, .85)); }

/* a calm restart */
#systems-lab .jx-lit { transition: opacity .4s ease; }
#systems-lab .jx.is-resetting .jx-lit { opacity: 0; }

/* the stage card */
#systems-lab .jx.is-live .jx-card { animation: r23Card .45s var(--e23); }

@media (prefers-reduced-motion: reduce) {
  #systems-lab .js[data-state="now"] .js-ic, #systems-lab .jx.is-live .jx-card { animation: none; }
  #systems-lab .jx.is-live .js[data-state] .js-ic::after, #systems-lab .jx.is-live .kcol[data-state] .kcol-ic::after { animation: none; }
  #systems-lab .jx-lit { transition: none; }
}

/* ================= s1-restructure EXPERIMENT: layouts for the simplified homepage and the two new pages =================
   Everything else (hero, services, About, contact, offers, FAQ, Anatomy, Systems in action) keeps its existing styles. */

/* ---------- old homepage section links (/#approach, /#offers, /#faq, /#anatomy, /#systems-lab, /#demo) land on the matching card ---------- */
.anchor-target { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 120px; pointer-events: none; }
.dest { position: relative; }

/* ---------- Home: Selected work ---------- */
.selwork { padding-bottom: clamp(56px, 7vw, 96px); }
.selwork .status-key { margin-top: 10px; }
.sw-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.sw-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 20px; border-radius: 22px;
  background: linear-gradient(170deg, #FFFFFF, #FBF7F0); box-shadow: 0 0 0 1px rgba(75, 48, 39, .08), 0 22px 44px -32px rgba(75, 48, 39, .5);
  transition: box-shadow .8s cubic-bezier(.33, 1, .68, 1), transform .8s cubic-bezier(.33, 1, .68, 1); }
.sw-media { height: 190px; border-radius: 14px; overflow: hidden; background: #F1E8DC; box-shadow: inset 0 0 0 1px rgba(75, 48, 39, .08); }
.sw-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sw-map { display: grid; }
.sw-map .proj-map { display: flex; align-items: center; padding: 18px 16px; height: 100%; border-radius: 0; }
.sw-card .case-badges { padding: 0 4px; gap: 6px 8px; }
.sw-card .case-badges .wip-status { white-space: normal; }
.sw-card h3 { padding: 0 4px; font: 600 18px/1.3 var(--display); letter-spacing: -0.01em; color: var(--choc); }
.sw-card h3 a { color: inherit; text-decoration: none; }
.sw-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }          /* the whole card opens the project */
.sw-card h3 a:focus-visible { outline: none; }
.sw-card:has(h3 a:focus-visible) { outline: 2.5px solid var(--choc); outline-offset: 4px; }
.sw-card p { padding: 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .sw-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(75, 48, 39, .1), 0 30px 54px -32px rgba(75, 48, 39, .55); }
  .sw-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(75, 48, 39, .35); }
}
.sw-more { margin-top: 26px; }
@media (max-width: 960px) { .sw-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .sw-media { height: 210px; } }
@media (max-width: 620px) { .sw-media { height: 170px; } .sw-card { padding: 10px 10px 16px; } .sw-card h3 { font-size: 17px; } }

/* ---------- Home: Explore further (the "Start here" card design, with process glyphs and the journey steps as artwork) ---------- */
/* the "Start here" grid gave its first card a two-column layout; both cards here use the simple stacked layout */
@media (min-width: 861px) { .dest-grid.ef-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dest-grid.ef-grid .dest:first-child .dest-surface { display: flex; }
  .dest-grid.ef-grid .dest:first-child .dest-art, .dest-grid.ef-grid .dest:last-child .dest-art { grid-row: auto; height: 170px; min-height: 0; margin: 0 0 6px; }
  .dest-grid.ef-grid .dest:first-child .dest-link { justify-self: auto; } }
.ef-art-process { display: flex; align-items: center; justify-content: center; gap: 4%; padding: 0 6%; height: 170px; }
.ef-art-process .ef-glyph { width: 30%; height: auto; max-height: 90px; overflow: visible; }
.ef-art-systems { display: flex; align-items: center; justify-content: center; padding: 18px; height: 170px;
  background: linear-gradient(158deg, #4B3027 0%, #442C2D 50%, #3A2440 100%); border-radius: 16px; }
.ef-art-systems .flowlist { justify-content: center; }
.ef-art-systems .flowlist li + li::before { background: var(--lilac); opacity: .7; }
@media (max-width: 860px) { .ef-art-process, .ef-art-systems { height: 140px; } }

/* ---------- Home: contact keeps the free-assessment pointer from the offers section ---------- */
.contact-assess { margin-top: 14px; font-size: 15px; color: var(--muted); }
.contact-assess .text-link { color: var(--choc); }

/* ---------- My Process: the three steps as a connected timeline, details shown in place ---------- */
.proc-sec { padding-top: clamp(32px, 4vw, 56px); }
.proc-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(20px, 3vw, 32px); max-width: 980px; }
.proc-list::before { content: ""; position: absolute; left: clamp(88px, 11vw, 120px); top: 40px; bottom: 40px; width: 1.5px;
  background: linear-gradient(180deg, var(--lilac), var(--peri) 50%, var(--mint)); opacity: .8; }
.proc-step { position: relative; display: grid; grid-template-columns: clamp(176px, 22vw, 240px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.proc-art { position: relative; z-index: 1; display: grid; place-items: center; height: 120px; border-radius: 22px;
  background: linear-gradient(160deg, #FFFFFF, #F6F0E7); box-shadow: 0 0 0 1px rgba(75, 48, 39, .08), 0 18px 34px -26px rgba(75, 48, 39, .45); }
.proc-art svg { width: 78%; height: auto; overflow: visible; }
.proc-body { padding: 22px 24px 24px; border-radius: 22px; background: linear-gradient(170deg, #FFFFFF, #FBF7F0); box-shadow: 0 0 0 1px rgba(75, 48, 39, .08), 0 22px 44px -32px rgba(75, 48, 39, .5); }
.proc-body h3 { margin-top: 6px; font: 600 clamp(22px, 2.2vw, 26px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--choc); }
.proc-lead { margin-top: 6px; font-size: 16px; color: var(--ink); }
.proc-body .xd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.proc-body .xd-list li { align-items: start; background: rgba(199, 181, 232, .12); }
@media (max-width: 980px) { .proc-body .xd-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .proc-list::before { left: 28px; top: 28px; bottom: 28px; }
  .proc-step { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .proc-art { width: 56px; height: 56px; border-radius: 16px; margin: 0 0 -28px 0; }
  .proc-art svg { display: none; }
  .proc-art::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); background: var(--lilac); box-shadow: inset 0 0 0 1.4px var(--choc); }
  .proc-body { margin-left: 0; padding: 40px 16px 18px; }
}

/* ---------- Systems in Action: the page heading carries the concept notice too ---------- */
.page-concept { margin-top: 18px; max-width: 640px; }

/* ---------- Header: six links need about 1,000px; below 1024px the existing Menu button is used (same rules as the phone header) ---------- */
.nav a { white-space: nowrap; }
.header-cta { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1023px) {
  .header-row { gap: 12px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(75,48,39,.28); background: transparent; color: var(--choc); font: 600 14px var(--text); cursor: pointer; }
  .nav ul { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--line); padding: 8px max(24px, env(safe-area-inset-right, 0px)) 16px max(24px, env(safe-area-inset-left, 0px)); }
  .nav.is-open ul { display: flex; }
  .nav ul a { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--beige); }
  .nav ul a::after { display: none; }
  .header-cta { display: none; }
  .header-contact { display: inline-flex; margin-left: auto; min-height: 44px; }
  .header-contact + .nav { margin-left: 0; }
}

/* ---------- About (approved shorter version): the clinician note sits under the buttons ---------- */
.about-body .about-note-under { margin-top: 4px; }

/* ---------- Systems in Action (approved 30 Oct): the demo band's empty bottom strip fades into the footer colour ----------
   Matches only the page whose last section is the dark #anatomy band (Systems in Action); no other page has it. */
main > section#anatomy.band-dark:last-child { background-image: linear-gradient(180deg, transparent calc(100% - 140px), var(--choc-deep) 100%), linear-gradient(180deg, rgba(34, 20, 15, .34) 0, rgba(34, 20, 15, 0) 200px), linear-gradient(0deg, rgba(34, 20, 15, .22) 0, rgba(34, 20, 15, 0) 160px); }   /* fade on top; r20's top and bottom shading kept underneath */
@media (max-width: 720px) { main > section#anatomy.band-dark:last-child { background-image: linear-gradient(180deg, transparent calc(100% - 90px), var(--choc-deep) 100%), linear-gradient(180deg, rgba(34, 20, 15, .34) 0, rgba(34, 20, 15, 0) 200px), linear-gradient(0deg, rgba(34, 20, 15, .22) 0, rgba(34, 20, 15, 0) 160px); } }

/* ---------- Privacy policy (launch, 3 Nov 2026): a plain, readable text column ---------- */
.legal-date { margin-top: 14px; font-size: 14px; color: var(--muted); }
.legal-sec { padding-top: clamp(36px, 5vw, 64px); }
.legal > * { max-width: 760px; }
.legal h2 { margin-top: 40px; font: 600 clamp(22px, 2.2vw, 26px)/1.25 var(--display); letter-spacing: -0.02em; color: var(--choc); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin-top: 22px; font: 600 17px/1.35 var(--display); color: var(--choc); }
.legal p, .legal li { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.legal ul { margin: 10px 0 0; padding-left: 20px; }
.legal a { color: var(--choc); text-underline-offset: 3px; }