/* QSC motion tokens: no changes to component geometry, typography or colour palette. */
:root {
  --qsc-motion-fast: 260ms;
  --qsc-motion-panel: 340ms;
  --qsc-motion-close: 240ms;
  --qsc-motion-text: 580ms;
  --qsc-motion-card: 700ms;
  --qsc-motion-media: 820ms;
  --qsc-motion-hover: 440ms;
  --qsc-motion-stagger: 110ms;
  --qsc-motion-stagger-cap: 330ms;
  --qsc-motion-step-gap: 190ms;
  --qsc-motion-step-number: 800ms;
  --qsc-motion-step-line: 1000ms;
  --qsc-motion-invite: 1100ms;
  --qsc-motion-distance: 22px;
  --qsc-motion-parallax-limit: 10;
  --qsc-motion-ease: cubic-bezier(.2,.7,.2,1);
  --qsc-motion-state-ease: cubic-bezier(.2,.65,.3,1);
  --qsc-anchor-offset: 24px;
}
main [id] { scroll-margin-top: var(--qsc-anchor-offset); }
@media (prefers-reduced-motion: no-preference) {
  [data-qsc-motion] { --qsc-reveal-time: var(--qsc-motion-text); }
  html [data-qsc-motion][data-qsc-state] {
    transition: opacity var(--qsc-reveal-time) var(--qsc-motion-ease) var(--qsc-reveal-delay,0ms),
      transform var(--qsc-reveal-time) var(--qsc-motion-ease) var(--qsc-reveal-delay,0ms),
      translate var(--qsc-motion-hover) var(--qsc-motion-ease),
      scale var(--qsc-motion-hover) var(--qsc-motion-ease),
      box-shadow var(--qsc-motion-hover) var(--qsc-motion-ease);
  }
  [data-qsc-motion="card"], [data-qsc-motion="section"] { --qsc-reveal-time: var(--qsc-motion-card); }
  [data-qsc-motion="media"] { --qsc-reveal-time: var(--qsc-motion-media); }
  html [data-qsc-motion][data-qsc-state="pending"] { opacity: 0; transform: translate3d(0,var(--qsc-motion-distance),0); transition: none; }
  html [data-qsc-motion="card"][data-qsc-state="pending"] { transform: translate3d(0,var(--qsc-motion-distance),0) scale(.985); }
  [data-qsc-state="revealed"] { opacity: 1; transform: none; }
  html [data-qsc-motion][data-qsc-instant="true"] { transition: none; }
  .story-flourish[data-qsc-state="pending"] path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .story-flourish[data-qsc-state="revealed"] path { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--qsc-motion-ease); }
  details[open]:not([data-qsc-disclosure="closing"]) > :not(summary) { animation: qsc-answer-in var(--qsc-motion-panel) var(--qsc-motion-ease); }
  @keyframes qsc-answer-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  html body > header > nav.open, html .qsc-app-header nav.is-open { animation: qsc-menu-in var(--qsc-motion-panel) var(--qsc-motion-ease); }
  @keyframes qsc-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes qsc-invite { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
  .button.cta-attention { animation-duration: var(--qsc-motion-invite); animation-timing-function: var(--qsc-motion-ease); }
  /* Numbers lead the chapter; their accents complete after the card has entered. */
  [data-qsc-step] .number, [data-qsc-step] .method-number { position: relative; transform-origin: left center; }
  [data-qsc-step] .method-number { transform-origin: center; }
  [data-qsc-step][data-qsc-state="revealed"] .number,
  [data-qsc-step][data-qsc-state="revealed"] .method-number {
    animation: qsc-step-number var(--qsc-motion-step-number) var(--qsc-motion-ease) var(--qsc-step-delay,0ms) both;
  }
  [data-qsc-step="home"] .number::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: #024767; transform: scaleX(0); transform-origin: left;
  }
  [data-qsc-step="home"][data-qsc-state="revealed"] .number::after {
    animation: qsc-step-line var(--qsc-motion-step-line) var(--qsc-motion-ease) calc(var(--qsc-step-delay,0ms) + 100ms) both;
  }
  [data-qsc-step="method"] .method-number::after {
    content: ''; position: absolute; inset: -5px; border: 1px solid #719cb6; border-radius: 50%; opacity: 0;
  }
  [data-qsc-step="method"][data-qsc-state="revealed"] .method-number::after {
    animation: qsc-step-ring var(--qsc-motion-step-number) var(--qsc-motion-ease) calc(var(--qsc-step-delay,0ms) + 120ms) both;
  }
  [data-qsc-step][data-qsc-instant="true"] .number,
  [data-qsc-step][data-qsc-instant="true"] .method-number,
  [data-qsc-step][data-qsc-instant="true"] .number::after,
  [data-qsc-step][data-qsc-instant="true"] .method-number::after { animation: none; }
  @keyframes qsc-step-number { from { opacity: 0; transform: translate3d(0,12px,0) scale(.78); } to { opacity: 1; transform: none; } }
  @keyframes qsc-step-line { from { opacity: 0; transform: scaleX(0); } to { opacity: .7; transform: scaleX(1); } }
  @keyframes qsc-step-ring { from { opacity: 0; transform: scale(.78); } to { opacity: .42; transform: scale(1); } }
  .cta.brush-revealed > .qsc-brush { animation-duration: 2200ms; }
  .atelier-feature-copy .eyebrow:after { transition-duration: 1000ms; }
}
/* Compositor hints exist only on visible desktop photographs. */
body main .motion-media > img { will-change: auto; }
body main .motion-media[data-qsc-parallax="true"] > img { will-change: transform; }
html :is(.button, .art-primary, .art-outline, .qsc-contact,
.menu-toggle, .qsc-menu-toggle, .vg-expand, .ve-expand, .story-zoom,
.vg-close, .vg-prev, .vg-next, .art-option, .art-association-color, .qsc-social-link) {
  transition: background-color var(--qsc-motion-fast) var(--qsc-motion-state-ease),
    border-color var(--qsc-motion-fast) var(--qsc-motion-state-ease),
    color var(--qsc-motion-fast) var(--qsc-motion-state-ease),
    box-shadow var(--qsc-motion-fast) var(--qsc-motion-state-ease),
    transform var(--qsc-motion-fast) var(--qsc-motion-ease);
}
main :is(input,select,textarea), html .art-consultant :is(input,select,textarea) {
  transition: border-color var(--qsc-motion-fast) ease, background-color var(--qsc-motion-fast) ease, box-shadow var(--qsc-motion-fast) ease;
}
main :is(input,select,textarea):focus-visible { box-shadow: 0 0 0 4px #719cb61c; }
main :is(.button,.art-primary,.art-outline):active { transform: translateY(1px); box-shadow: none; }
main :is(.button,.art-primary,.art-outline):disabled { transform: none; }
body > header nav > a:not(.button), .qsc-app-header nav > a:not(.qsc-contact) {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: color var(--qsc-motion-fast) ease, text-decoration-color var(--qsc-motion-fast) ease;
}
.menu-toggle span, .qsc-menu-toggle span { display: inline-block; transition: transform var(--qsc-motion-panel) var(--qsc-motion-ease); }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.method-list > a > span:last-child, .ve-gallery-button > span, .vg-text-link span { transition-duration: var(--qsc-motion-panel); }
.form-status:not(:empty), .art-feedback, .art-call-confirmation { animation: qsc-answer-in var(--qsc-motion-panel) var(--qsc-motion-ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main :is(.button,.art-primary,.art-outline):hover { transform: translateY(-2px); box-shadow: 0 5px 16px #02476715; }
  main :is(.button,.art-primary,.art-outline):active { transform: translateY(1px); box-shadow: none; }
  html :is(.blog-card,.project,.editorial-related-card,.blog-story-links>a)[data-qsc-state="revealed"]:hover {
    transform: none;
  }
  html :is(.blog-card,.project,.editorial-related-card,.blog-story-links>a)[data-qsc-settled="true"] {
    transition: transform var(--qsc-motion-fast) var(--qsc-motion-ease),
      translate var(--qsc-motion-hover) var(--qsc-motion-ease), scale var(--qsc-motion-hover) var(--qsc-motion-ease),
      box-shadow var(--qsc-motion-hover) var(--qsc-motion-ease);
  }
  html .editorial-related-card:hover img { transform: scale(1.015); }
  body > header nav > a:not(.button):is(:hover,:focus-visible), .qsc-app-header nav > a:not(.qsc-contact):is(:hover,:focus-visible) { color: #024767; text-decoration-color: #719cb6; }
}
/* Only real links/buttons respond. Captions never inherit an artificial frame. */
@media (min-width: 851px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html [data-qsc-surface] {
    transition: translate var(--qsc-motion-hover) var(--qsc-motion-ease),
      box-shadow var(--qsc-motion-hover) var(--qsc-motion-ease),
      background-color var(--qsc-motion-fast) var(--qsc-motion-state-ease),
      border-color var(--qsc-motion-fast) var(--qsc-motion-state-ease);
  }
  /* Translation keeps lettering crisp and composes with reveal/parallax. */
  html [data-qsc-surface]:not(:disabled):is(:hover,:focus-visible) { translate: 0 -3px; }
  html [data-qsc-surface="card"]:not(:disabled):is(:hover,:focus-visible) { box-shadow: 0 8px 22px #02476714; }
  html [data-qsc-motion][data-qsc-instant="true"][data-qsc-surface] {
    transition: translate var(--qsc-motion-hover) var(--qsc-motion-ease),
      box-shadow var(--qsc-motion-hover) var(--qsc-motion-ease);
  }
  /* Gallery buttons contain an image and a separate caption. Only the rounded
     image casts a shadow; no rectangle, gradient or glow surrounds the title. */
  html [data-qsc-surface="gallery"] { box-shadow: none; }
  html [data-qsc-surface="gallery"] > .vg-frame {
    transition: box-shadow var(--qsc-motion-hover) var(--qsc-motion-ease);
  }
  html [data-qsc-surface="gallery"]:not(:disabled):is(:hover,:focus-visible) > .vg-frame { box-shadow: 0 8px 22px #02476718; }
  .vg-tile-title > span { transition-duration: var(--qsc-motion-hover); transition-timing-function: var(--qsc-motion-ease); }
  .visual-gallery .vg-frame img, .ve-photo img { transition-duration: 1000ms; }
}
@media (hover: none), (pointer: coarse) { main .button:hover { transform: none; box-shadow: none; } }
@media (max-width: 850px) {
  :root {
    --qsc-motion-fast: 220ms;
    --qsc-motion-panel: 280ms;
    --qsc-motion-close: 220ms;
    --qsc-motion-text: 460ms;
    --qsc-motion-card: 560ms;
    --qsc-motion-media: 660ms;
    --qsc-motion-stagger: 80ms;
    --qsc-motion-stagger-cap: 160ms;
    --qsc-motion-step-gap: 130ms;
    --qsc-motion-step-number: 650ms;
    --qsc-motion-step-line: 800ms;
    --qsc-motion-invite: 1000ms;
    --qsc-motion-distance: 16px;
    --qsc-anchor-offset: 104px;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  [data-qsc-step="home"] .number::after { top: 52px; bottom: 0; left: 18px; right: auto; width: 1px; height: auto; transform-origin: top; }
  [data-qsc-step="home"][data-qsc-state="revealed"] .number::after { animation-name: qsc-step-line-mobile; }
  .steps > [data-qsc-step="home"]:last-child .number::after { display: none; }
  @keyframes qsc-step-line-mobile { from { opacity: 0; transform: scaleY(0); } to { opacity: .4; transform: scaleY(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html [data-qsc-motion][data-qsc-state] { opacity: 1; transform: none; transition: none; }
  html :is(.button, .art-primary, .art-outline, .qsc-contact,
  .menu-toggle, .qsc-menu-toggle, .menu-toggle span, .qsc-menu-toggle span,
  .vg-expand, .ve-expand, .story-zoom, .art-option, .art-association-color,
  .form-status, .art-feedback, .art-call-confirmation),
  main :is(input,select,textarea), html .art-consultant :is(input,select,textarea) { transition: none; animation: none; }
  .button.cta-attention { animation: none; }
  main :is(.button,.art-primary,.art-outline):hover { transform: none; }
}
