/* Signature motion. Original artwork, native scroll, progressive enhancement. */
.kinetic-opening .op-namewrap { pointer-events:none; }
.kinetic-opening .op-mark { top:61%; width:clamp(440px,58vw,850px); }
.kinetic-opening .op-line { will-change:transform; }
.signature-float { position:relative; animation:signature-float 7s cubic-bezier(.45,0,.55,1) infinite; will-change:transform; }
@keyframes signature-float { 0%,100% { transform:translate3d(-8px,16px,0) rotate(-7deg); } 50% { transform:translate3d(8px,-20px,0) rotate(7deg); } }
.motion-toggle { position:fixed; z-index:90; bottom:16px; right:16px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #aaa6; color:#111; background:#f6f5f3; cursor:pointer; box-shadow:0 3px 18px #0001; }
.motion-toggle svg { width:13px; height:13px; fill:currentColor; }
.motion-toggle:focus-visible,.deck-nav button:focus-visible,.card-front a:focus-visible { outline:3px solid #42e5ef; outline-offset:5px; }
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.motion-hidden * { animation-play-state:paused !important; }
.motion-paused .reveal { opacity:1; transform:none; transition:none; }
/* Drawn strokes arrive from beyond the page edge. */
.ribbon-section { position:relative; isolation:isolate; overflow:clip; }
.ribbon-section > .wrap { z-index:1; }
.color-ribbon { position:absolute; z-index:0; width:min(86vw,1100px); height:auto; top:0; left:-36%; pointer-events:none; overflow:visible; transform:translateX(var(--ribbon-x,0px)) rotate(-12deg); }
.color-ribbon path { stroke:#8393ff; stroke-width:44px; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:var(--ribbon-draw,0); }
.ribbon--right { left:auto; right:-35%; transform:translateX(var(--ribbon-x,0px)) scaleX(-1) rotate(-12deg); }
.ribbon--cyan path { stroke:#42dbe6; }
.statement-motion { padding-block:clamp(6rem,13vw,12rem); }
.statement-motion .color-ribbon { top:2%; left:-28%; }
.statement-motion h2 { position:relative; }
.statement-motion .split { margin-top:clamp(3rem,7vw,6rem); }
.work-motion .color-ribbon { top:-4rem; width:min(67vw,800px); right:-35%; }
.kinetic-about .page-head .color-ribbon { top:8%; right:-33%; opacity:.85; }
/* Static, readable cards are the default without JS. */
.scroll-deck { position:relative; background:#060811; color:#fff; }
.deck-stage { position:relative; isolation:isolate; padding-block:clamp(4rem,8vw,7rem); }
.deck-flood { position:absolute; inset:0; background:#0009f2; clip-path:circle(var(--flood-radius,145%) at 100% 44%); pointer-events:none; z-index:-1; }
.deck-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.deck-heading .section-num { color:#ffffffa6; }
.deck-heading h2 { font-weight:400; font-size:clamp(3.5rem,6.6vw,6.3rem); line-height:.96; letter-spacing:-.055em; margin-top:1.6rem; }
.deck-nav { display:none; gap:10px; margin-top:2.5rem; }
.deck-nav button { display:grid; place-items:center; width:52px; height:52px; border-radius:12px; border:1px solid #ffffff80; color:#fff; background:transparent; font:400 12px var(--font-mono); cursor:pointer; transition:color .2s,background .2s; }
.deck-nav button[aria-pressed="true"] { background:#fff; color:#0009f2; border-color:#fff; }
.deck-cards { position:relative; width:100%; max-width:560px; justify-self:center; perspective:1600px; }
.turn-card { position:relative; margin-bottom:2rem; }
.card-turner { position:relative; transform-style:preserve-3d; }
.card-face { border-radius:26px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.card-front { position:relative; background:#fff; color:#0a0a0a; padding:clamp(1.7rem,3.5vw,3rem); min-height:530px; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; transform:translateZ(.5px); border:1px solid #fff; }
.card-corner { display:flex; align-items:center; justify-content:space-between; gap:1rem; font:400 13px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.card-symbol { width:38px; height:38px; background:#0009f2; mask:url('/assets/img/brand/asterisk-symbol.svg') center/contain no-repeat; }
.card-copy h3 { font-size:clamp(2.1rem,3.5vw,3.4rem); font-weight:400; line-height:1; letter-spacing:-.045em; margin-bottom:1.25rem; }
.card-copy p { font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.55; color:#55534f; }
.card-bottom { position:relative; padding-top:1.1rem; border-top:1px solid #ddd; padding-right:3rem; }
.card-bottom p { font:400 11px/1.5 var(--font-mono); color:#76736c; max-width:28ch; }
.card-bottom a { display:inline-flex; align-items:center; gap:1.2rem; min-height:44px; font-size:15px; margin-top:.3rem; }
.card-bottom a:hover { color:#0009f2; }
.card-index { position:absolute; right:0; bottom:0; font:400 2.8rem/1 var(--font-display); letter-spacing:-.06em; transform:rotate(180deg); }
.card-back { display:none; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; background:#eee; color:#0009f2; transform:rotateY(180deg) translateZ(.5px); border:1px solid #fff; }
.card-back-border { position:absolute; inset:16px; border:1px solid #0009f2; border-radius:16px; }
.card-back-border::before,.card-back-border::after { content:''; position:absolute; width:65%; aspect-ratio:1; border-radius:50%; border:1px solid #0009f2; top:50%; left:50%; transform:translate(-50%,-50%); }
.card-back-border::after { width:87%; }
.card-back img { width:38%; height:auto; filter:brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(7150%) hue-rotate(244deg) brightness(86%) contrast(133%); }
.back-corner { position:absolute; top:38px; left:38px; font:400 12px var(--font-mono); }
.back-sign { position:absolute; bottom:38px; font:400 12px var(--font-mono); letter-spacing:.24em; }
.deck-enabled { height:390svh; }
.deck-enabled .deck-stage { position:sticky; top:0; height:100svh; min-height:650px; padding-block:6rem 3rem; overflow:clip; }
.deck-enabled .deck-layout { height:100%; }
.deck-enabled .deck-nav { display:flex; }
.deck-enabled .deck-cards { height:min(68svh,600px); min-height:530px; }
.deck-enabled .turn-card { position:absolute; inset:0; margin:0; will-change:opacity; }
.deck-enabled .card-turner { width:100%; height:100%; will-change:transform; }
.deck-enabled .card-front { height:100%; min-height:0; }
.deck-enabled .card-back { display:flex; }
#principles .card-copy h3 { font-size:clamp(2.3rem,4vw,3.8rem); }
#principles .card-copy p { font-size:clamp(1.05rem,1.5vw,1.25rem); }
#principles .card-bottom { min-height:55px; }
/* Chapters continue the color journey. */
.story-motion { background:var(--story-color,#080a17); color:#fff; }
.story-motion .lead,.story-motion .dim { color:#dddde7; }
.story-motion .section-num { color:#aeb0ca; }
.about-portrait { overflow:hidden; }
.about-portrait img { transform:translateY(var(--portrait-y,0px)) scale(1.07); }
.process-cinema { background:#070b31; color:#fff; }
.process-cinema .section-num { color:#b9bedb; }
.process-cinema .step-row { position:sticky; top:60px; background:#070b31; min-height:78svh; padding-block:clamp(3rem,6vw,6rem); transform-origin:50% 0%; border-color:#ffffff25; }
.process-cinema .step-row + .step-row { margin-top:8vh; }
.process-cinema .step-row:last-child { margin-bottom:8vh; }
.process-cinema .step-word { overflow:hidden; }
.process-cinema .step-word span { color:#fff; display:block; transform:translateX(var(--step-x,0px)); }
.process-cinema .step-body { color:#c4c8e0; margin-top:1.5rem; }
.process-cinema .step-visual { border-color:#ffffff20; }
.process-cinema .step-visual img { transform:scale(var(--process-scale,1)); }
.process-cinema .step-row::before { content:attr(data-step); position:absolute; top:20px; right:0; font:400 12px var(--font-mono); color:#aaaed0; }
.kinetic-work-image { overflow:hidden; border-radius:var(--radius); }
.kinetic-work-image img { transform:scale(var(--image-scale,1)); }
.kinetic-cta { min-height:90svh; display:flex; align-items:center; isolation:isolate; overflow:clip; color:#fff; background:#090c2a; padding-block:8rem; }
.kinetic-cta .wrap { z-index:2; }
.kinetic-cta .display { font-weight:400; font-size:clamp(3.5rem,8.4vw,8rem); }
.kinetic-cta .accent,.kinetic-cta .lead,.kinetic-cta .eyebrow { color:#fff; }
.kinetic-cta .eyebrow::before { background:#fff; }
.kinetic-cta .btn { background:#fff; color:#000; border-color:#fff; }
.kinetic-cta .btn:hover { background:#eee; }
.cta-flood { position:absolute; inset:0; z-index:0; background:#0009f2; clip-path:circle(var(--cta-radius,145%) at 0% 80%); }
.asterisk-field { position:absolute; inset:0; z-index:1; pointer-events:none; }
.asterisk-field i { display:block; position:absolute; width:var(--size); height:var(--size); left:var(--x); top:var(--y); background:#fff; opacity:var(--opacity); mask:url('/assets/img/brand/asterisk-symbol.svg') center/contain no-repeat; transform:translateY(var(--field-y,0px)) rotate(var(--turn,0deg)); }
.asterisk-field i:nth-child(3n) { border:2px solid #fff; background:none; mask:none; border-radius:50%; }
@media(min-width:1000px) { .story-motion .split > :first-child { position:sticky; top:100px; align-self:start; } }
@media(max-width:780px) {
  .kinetic-opening .op-mark { top:52%; width:min(112vw,570px); }
  .motion-toggle { right:12px; bottom:12px; }
  .color-ribbon { width:150vw; left:-94%; top:-2%; }
  .statement-motion .color-ribbon { left:-86%; top:-3%; }
  .ribbon--right { left:auto; right:-88%; }
  .kinetic-about .page-head .color-ribbon { right:-92%; top:12%; }
  .work-motion .color-ribbon { width:150vw; right:-96%; top:-7rem; }
  .color-ribbon path { stroke-width:35px; }
  .deck-layout { grid-template-columns:1fr; gap:2rem; }
  .deck-heading h2 { font-size:clamp(2.8rem,10.5vw,4rem); margin-top:.7rem; }
  .deck-heading h2 br { display:none; }
  .deck-heading .section-num { font-size:10px; letter-spacing:.13em; }
  .deck-heading { position:relative; }
  .deck-nav { margin-top:1.2rem; gap:8px; }
  .deck-nav button { width:44px; height:44px; border-radius:9px; font-size:11px; }
  .deck-enabled { height:380svh; }
  .deck-enabled .deck-stage { padding-block:4rem 2rem; min-height:690px; }
  .deck-enabled .deck-layout { grid-template-rows:auto 1fr; gap:1.5rem; }
  .deck-enabled .deck-cards { height:100%; max-height:520px; min-height:410px; width:100%; max-width:440px; }
  .card-front { padding:1.6rem; min-height:440px; border-radius:22px; gap:1.35rem; }
  .card-back { border-radius:22px; }
  .card-copy h3 { font-size:clamp(2rem,8vw,2.7rem); margin-bottom:.9rem; }
  .card-copy p { font-size:15px; line-height:1.5; }
  .card-corner { font-size:11px; }
  .card-symbol { width:29px; height:29px; }
  .card-bottom { padding-top:.8rem; }
  .card-bottom p { font-size:10px; }
  .card-bottom a { font-size:14px; }
  .card-index { font-size:2.2rem; }
  #principles .card-copy h3 { font-size:clamp(2.3rem,10vw,3rem); }
  #principles .card-copy p { font-size:17px; }
  .process-cinema .step-row { position:relative; top:auto; min-height:0; gap:1.8rem; padding-block:3rem; }
  .process-cinema .step-row + .step-row,.process-cinema .step-row:last-child { margin:0; }
  .process-cinema .step-word { font-size:22vw; }
  .kinetic-cta { min-height:90svh; padding-block:8rem; }
  .kinetic-cta .display { font-size:13vw; }
}
@media(max-width:780px) and (max-height:740px) {
  .deck-enabled .deck-stage { padding-top:2.5rem; min-height:640px; padding-bottom:1.5rem; }
  .deck-heading h2 { font-size:2.5rem; }
  .deck-nav { margin-top:.8rem; }
  .deck-enabled .deck-layout { gap:1rem; }
  .card-front { padding:1.25rem; gap:1rem; }
}
@media(prefers-reduced-motion:reduce) {
  .process-cinema .step-row { position:relative; top:auto; }
  .signature-float,.kinetic-work-image img,.about-portrait img { transform:none !important; }
  .color-ribbon path { stroke-dashoffset:0; }
}
.motion-paused .kinetic-work-image img,.motion-paused .about-portrait img { transform:none !important; }
@media print {
  .motion-toggle,.deck-nav,.card-back,.asterisk-field { display:none !important; }
  .deck-enabled,.deck-enabled .deck-stage,.deck-enabled .deck-layout,.deck-enabled .deck-cards { height:auto; min-height:0; position:static; display:block; }
  .deck-enabled .turn-card { position:relative; opacity:1 !important; visibility:visible !important; }
  .deck-enabled .card-turner { transform:none !important; margin-block:1rem; }
}