/* Decorative fields: an absolutely positioned layer behind its section's content. */
.field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.field-canvas,.field-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:has(> .field){isolation:isolate}
/* Keep the rays anchored to their top-right origin; the module hides it once its first frame has drawn. */
.field-fallback{object-position:100% 0}
.field[data-field-ready] .field-fallback{visibility:hidden}

/* Entrance layer (reveal.js): children (buttons and links keep their own hover transitions) of each .reveal block rise in, staggered 70ms apart.
   The dimmed start state carries no transition; only a section that has entered (.is-in) transitions, so arming at load animates nothing. */
html[data-reveal] .reveal:not(.is-in) > :not(.button,a){opacity:.55;transform:translateY(20px)}
html[data-reveal] .reveal.is-in > :not(.button,a){transition:opacity .7s cubic-bezier(.2,1,.2,1),transform .7s cubic-bezier(.2,1,.2,1)}
html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(2){transition-delay:70ms}html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(3){transition-delay:140ms}html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(4){transition-delay:210ms}
html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(5){transition-delay:280ms}html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(6){transition-delay:350ms}html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(7){transition-delay:420ms}html[data-reveal] .reveal.is-in > :not(.button,a):nth-child(8){transition-delay:490ms}
[data-draw].is-drawn path,[data-draw].is-drawn line,[data-draw].is-drawn polyline,[data-draw].is-drawn circle{stroke-dashoffset:0!important;transition:stroke-dashoffset .8s cubic-bezier(.2,1,.2,1)}
body.motion-paused .reveal > *{opacity:1;transform:none;transition:none}
body.motion-paused [data-draw] *{stroke-dashoffset:0!important;transition:none}
@media (prefers-reduced-motion:reduce){.reveal > *{opacity:1;transform:none;transition:none}[data-draw] *{stroke-dashoffset:0!important;transition:none}}

/* Case block (tabs.js): a rail of case tabs beside one panel card. Panels are all visible until the script hides the inactive ones. */
.case-block{display:grid;grid-template-columns:216px minmax(0,1fr);gap:24px;align-items:start;background:var(--surface);margin:45px 0 0}
.case-rail{position:sticky;top:128px;display:flex;flex-direction:column;gap:8px}
.case-rail [role=tab]{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;background:var(--surface);color:var(--muted);border:0;border-left:3px solid transparent;border-radius:var(--radius);padding:14px 16px;transition:background .4s var(--ease),transform .4s var(--ease),color .4s var(--ease)}
.case-rail [role=tab]:hover{background:color-mix(in srgb,var(--ink) 7%,var(--surface));transform:translateY(-3px)}
.case-rail [role=tab][aria-selected=true]{background:var(--paper);color:var(--ink);border-left-color:var(--accent)}
.case-rail-title{font:500 15px/1.3 var(--display);letter-spacing:-.02em}
.case-rail-topic{font-size:12px;line-height:1.4;color:var(--muted)}
.case-panels{min-width:0}
.case-panels [role=tabpanel]{background:var(--paper);border-radius:var(--radius);padding:40px}
.case-panels [role=tabpanel]+[role=tabpanel]{margin-top:24px}
.case-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.case-panel-facts{min-width:0}
.case-panel-facts h2,.case-panel-facts h3{margin-bottom:18px}
.case-panel-facts p{color:var(--muted)}
.fact-strip{list-style:none;margin:24px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fact-strip li{border:1px solid var(--line);padding:6px 12px;font-size:13px;line-height:1.4}
.case-panel-grid .fragment{margin:0;min-width:0;align-self:stretch}
.case-panels [role=tabpanel].is-entering{animation:case-enter 400ms cubic-bezier(.2,1,.2,1) both}
@keyframes case-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
body.motion-paused .case-panels [role=tabpanel].is-entering{animation:none}
@media (prefers-reduced-motion:reduce){.case-panels [role=tabpanel].is-entering{animation:none}.case-rail [role=tab]{transition:none}.case-rail [role=tab]:hover{transform:none}}
body.motion-paused .case-rail [role=tab]{transition:none}
@media (max-width:999px){
  .case-block{grid-template-columns:minmax(0,1fr);gap:16px}
  .case-rail{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px}
  .case-rail [role=tab]{flex:0 0 auto;width:auto;max-width:240px;scroll-snap-align:start;border-left:0;border-bottom:3px solid transparent}
  .case-rail [role=tab][aria-selected=true]{border-bottom-color:var(--accent)}
  .case-panels [role=tabpanel]{padding:24px}
  .case-panel-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .case-panel-grid .fragment{order:-1}
}

/* Case-study pages: full-width hero photograph with the page's one slow drift (20 s, alternate); rail thumbnails. */
.case-hero{padding:0 var(--page-gutter,24px) 24px}
.case-hero .photo-hero,.photo-drift picture{overflow:hidden}
.photo-hero img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.photo-drift img{transform-origin:50% 50%;animation:photo-drift 20s ease-in-out infinite alternate}
@keyframes photo-drift{from{transform:scale(1)}to{transform:scale(1.04)}}
body.motion-paused .photo-drift img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.photo-drift img{animation:none}}
.photo-thumb{display:block;width:56px;flex:none}
.photo-thumb img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block}
.case-rail [role=tab]:has(.photo-thumb){display:grid;grid-template-columns:56px 1fr;column-gap:12px;align-items:center}
.case-rail [role=tab] .photo-thumb{grid-row:1/3}

/* Before/after switch (switch.js): two toggle buttons over two fragments; both show without JS. */
.switch{margin-top:24px}
.switch [role=group]{display:inline-flex;border:1px solid var(--line);margin-bottom:16px}
.switch [role=group] button{background:transparent;color:var(--muted);border:0;padding:8px 16px;font:500 14px/1.3 var(--display);cursor:pointer}
.switch [role=group] button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.switch [role=group] button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.switch-views{display:grid;gap:16px}
.switch[data-ready] .switch-views figure[hidden]{display:none}
.switch figure.is-fading{animation:switch-fade 250ms ease-out}
@keyframes switch-fade{from{opacity:0}to{opacity:1}}
body.motion-paused .switch figure.is-fading{animation:none}
@media (prefers-reduced-motion:reduce){.switch figure.is-fading{animation:none}}

/* Product pages: the live fragment full width under the hero; capability drawings; the context photograph. */
.product-live{padding:0 var(--page-gutter) 56px}
.product-live .fragment .ui{max-width:none}
[data-diagram^="capability-"]{display:block;width:200px;height:80px;max-width:100%;margin:0 0 20px}
[data-diagram^="capability-"] .cap-ink{stroke:currentColor;opacity:.45}
[data-diagram^="capability-"] .cap-accent{stroke:var(--accent)}
#context .photo{margin-top:28px;max-width:860px}
#context .photo img{aspect-ratio:3/2;object-fit:cover}
@media (max-width:760px){.product-live{padding-bottom:36px}}

/* Sequence (sequence.js): children appear in turn. Hidden only once the script has marked the sequence ready. */
[data-sequence-ready] > *{transition:opacity .3s cubic-bezier(.2,1,.2,1),transform .3s cubic-bezier(.2,1,.2,1)}
[data-sequence-ready] > :not(.is-shown){opacity:0;transform:translateY(6px)}
body.motion-paused [data-sequence] > *{opacity:1!important;transform:none!important;transition:none}
@media (prefers-reduced-motion:reduce){[data-sequence] > *{opacity:1!important;transform:none!important;transition:none}}

/* Solutions drawings: the parallel run and the four "What we build" pictures. Ink at reduced weight, one red thread. */
.diagram .dg-ink{stroke:var(--ink);stroke-opacity:.5}
.diagram .dg-faint{stroke:var(--ink);stroke-opacity:.28}
.diagram .dg-accent{stroke:var(--accent)}
.diagram .dg-thick{stroke-width:2.5}
.diagram .dg-paper{fill:var(--paper)}
.diagram .dg-solid{fill:currentColor;stroke:none}
.diagram .dg-accent.dg-solid,.diagram .dg-accent .dg-solid{fill:var(--accent)}
.diagram .dg-ink.dg-solid{fill:var(--ink);fill-opacity:.6}
.diagram .dg-tint{fill:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.diagram .dg-none{stroke:none}
.diagram .dg-labels text{fill:var(--ink);stroke:none;font:400 17px/1 var(--body)}
.diagram .dg-labels .dg-label-accent{fill:var(--accent);font-weight:500}
[data-diagram^="build-"]{max-width:280px}
[data-diagram="parallel"]{max-width:760px}
@media (max-width:760px){.diagram .dg-labels text{font-size:22px}}

/* Evaluation: the ten-dimension explorer (tabs.js), the same rail-and-panel pattern as the case block.
   Without JS every panel is visible, stacked. */
.explorer-live{margin:32px 0 0}
.explorer{display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;align-items:start;background:var(--surface);padding:20px}
.explorer-rail{display:flex;flex-direction:column;gap:4px}
.explorer-rail [role=tab]{display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;font:inherit;background:transparent;color:var(--muted);border:0;border-left:3px solid transparent;border-radius:var(--radius);padding:10px 14px;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.explorer-rail [role=tab]:hover{background:color-mix(in srgb,var(--ink) 6%,var(--surface));color:var(--ink)}
.explorer-rail [role=tab][aria-selected=true]{background:var(--paper);color:var(--ink);border-left-color:var(--accent)}
.explorer-rail [role=tab]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.explorer-num{font-size:12px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.explorer-rail [role=tab][aria-selected=true] .explorer-num{color:var(--accent)}
.explorer-title{font:500 15px/1.3 var(--display);letter-spacing:-.01em}
.explorer-panels{min-width:0}
.explorer-panels [role=tabpanel]{background:var(--paper);border-radius:var(--radius);padding:36px 40px;min-height:100%}
.explorer-panels [role=tabpanel]+[role=tabpanel]{margin-top:16px}
.explorer-panels [role=tabpanel]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.explorer-panels h3{margin:0 0 14px;font-size:28px}
.explorer-panels p{max-width:56ch}
.explorer-label{margin:28px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.explorer-options{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.explorer-options li{margin:0}
.explorer-options a{display:inline-block;border:1px solid var(--line);padding:7px 14px;font-size:14px;line-height:1.35;color:var(--ink);text-decoration:none;transition:border-color .3s var(--ease)}
.explorer-options a:hover{border-color:var(--accent)}
.explorer-panels [role=tabpanel].is-entering{animation:case-enter 400ms cubic-bezier(.2,1,.2,1) both}
body.motion-paused .explorer-panels [role=tabpanel].is-entering{animation:none}
body.motion-paused .explorer-rail [role=tab]{transition:none}
@media (prefers-reduced-motion:reduce){.explorer-panels [role=tabpanel].is-entering{animation:none}.explorer-rail [role=tab]{transition:none}}
@media (max-width:999px){
  .explorer{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
  .explorer-rail{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;padding-bottom:6px}
  .explorer-rail [role=tab]{flex:0 0 auto;width:auto;white-space:nowrap;scroll-snap-align:start;border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
  .explorer-rail [role=tab][aria-selected=true]{border-bottom-color:var(--accent)}
  .explorer-panels [role=tabpanel]{padding:24px 20px}
  .explorer-panels h3{font-size:23px}
}

/* Evaluation drawings: the signed independence rule and the annex stack. */
[data-diagram="document"],[data-diagram="stack"]{max-width:620px}