/* Presentation refinements. Motion is an enhancement; content is visible by default. */
/* Clip sideways paint without creating a scroll container that breaks sticky navigation. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
html { scroll-padding-top: 112px; }
h2, h3 { letter-spacing: -.035em; }
.header-shell { position: sticky; top: 0; z-index: 20; background: var(--paper); transition: box-shadow 220ms, background 220ms; }
.header-shell.is-scrolled { background: #fafbf7f5; box-shadow: 0 1px 0 #dfe2d8, 0 8px 28px #1a201b06; backdrop-filter: blur(14px); }
.header { height: 94px; }
.reading-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #a4b451; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.header nav a { position: relative; padding: 13px 0; }
.header nav a::after { content: ''; position: absolute; bottom: 6px; left: 0; right: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 230ms; }
.header nav a:is(:hover, :focus-visible, [aria-current="location"])::after { transform: scaleX(1); }
.language { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: border-color 200ms, background 200ms; }
.language:is(:hover, :focus-visible) { border-color: var(--ink); background: var(--cream); }
.button { transition: background 200ms, transform 200ms, box-shadow 200ms; }
.button span, .case-link span { display: inline-block; transition: transform 250ms; }
.button:is(:hover, :focus-visible) span, .case-card:is(:hover, :focus-visible) .case-link span { transform: translate(3px, -3px); }
.button:active { transform: translateY(0); }
.hero { padding-top: 34px; padding-bottom: 74px; }
.hero-description { max-width: 405px; line-height: 1.8; }
.hero-footnote { font-size: 11px; }
.hero-art { border: 1px solid #d7dfb9; border-radius: 12px; }
.art-sculpture { position: absolute; inset: 0; transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0); transition: transform 700ms cubic-bezier(.2,.75,.25,1); }
.art-label, .art-coordinate { font-size: 10px; }
.hero h1 em::after { transform-origin: left; }
.section-heading .muted { line-height: 1.8; }
.service-card { position: relative; border: 1px solid transparent; border-radius: 8px; transition: background 240ms, border-color 240ms; }
.service-card p { font-size: 14px; }
.service-number, .process-grid article>span { font-size: 11px; }
.tag { font-size: 11px; line-height: 1.6; }
.service-symbol { transition: transform 450ms cubic-bezier(.2,.75,.25,1); transform-origin: 30% 50%; }
.case-card { border-radius: 10px; }
.case-art::before, .case-art::after { transition: transform 600ms cubic-bezier(.2,.75,.25,1); }
.case-art-label, .case-art-bottom { font-size: 10px; }
.pill { font-size: 10px; }
.case-copy p { font-size: 14px; }
.case-link { font-size: 13px; }
.process-grid article { position: relative; border-color: var(--line); }
.process-grid article::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: left; }
.process-grid p { font-size: 14px; line-height: 1.8; }
.filters button { min-height: 44px; font-size: 12px; transition: background 180ms, border-color 180ms, color 180ms; }
.filters button:is(:hover, :focus-visible):not(.active) { border-color: var(--ink); background: var(--cream); }
.insight-art { border-radius: 8px; }
.insight-art>span, .mini-chart { transition: transform 450ms cubic-bezier(.2,.75,.25,1); }
.insight-art small { font-size: 10px; line-height: 1.4; max-width: calc(100% - 40px); }
.insight-meta { font-size: 11px; letter-spacing: .045em; }
.read-link { font-size: 12px; transition: transform 240ms; }
.insight-card:is(:hover, :focus-visible) .read-link { transform: translateX(4px); }
.cms-callout { border-radius: 10px; }
.cms-callout>div { min-width: 0; }
.cms-callout p { font-size: 14px; line-height: 1.8; }
.cms-card { border: 1px solid var(--line); padding: 25px; border-radius: 10px; }
.cms-card-header { font-size: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cms-ready { font-size: 10px; letter-spacing: .035em; }
.cms-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cms-types span { font-size: 11px; padding: 6px 10px; border: 1px solid #d5dacb; border-radius: 30px; }
.cms-steps { list-style: none; margin: 0; padding: 6px 0 18px; }
.cms-steps li { display: flex; align-items: center; gap: 13px; padding: 16px 0; }
.cms-steps li+li { border-top: 1px solid #e6e9de; }
.step-index { display: grid; place-items: center; flex-shrink: 0; font-size: 10px; width: 28px; height: 28px; background: #edf2e0; border-radius: 50%; color: #667250; }
.cms-steps strong { display: block; font-size: 13px; font-weight: 600; }
.cms-steps div>span { display: block; font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 3px; }
.step-icon { font-size: 19px; margin-left: auto; padding-left: 8px; }
.cms-card p { font-size: 11px; }
.contact-bottom p { font-size: 14px; line-height: 1.8; }
.footer p, .footer>a:last-child { font-size: 11px; }
.close-button { min-width: 44px; min-height: 44px; }
.cms-toolbar>div>span, .cms-notice, .cms-status { font-size: 11px; }
.cms-toolbar-actions>button:not(.close-button) { min-height: 44px; font-size: 12px; }
.content-dialog[open], .cms-dialog[open] { animation: dialog-in 220ms cubic-bezier(.2,.75,.25,1); }
.content-dialog::backdrop, .cms-dialog::backdrop { animation: backdrop-in 180ms ease-out; }

@media (hover:hover) and (pointer:fine) {
  .service-card:hover { border-color: #cbd5b6; background: #ebeee2; }
  .service-card:hover .symbol-brand { transform: rotate(15deg); }
  .service-card:hover .symbol-campaign { transform: translate(6px, -6px); }
  .service-card:hover .symbol-strategy { transform: translateX(5px); }
  .case-card:hover .case-art::before { transform: translate(-15px, 12px); }
  .case-card:hover .case-art::after { transform: translate(9px, -8px); }
  .insight-card:hover .insight-art>span { transform: translateY(-4px) rotate(-3deg); }
  .insight-card:hover .mini-chart { transform: translateY(-5px); }
}
.insight-card:focus-visible .insight-art>span { transform: translateY(-4px); }
.case-card:focus-visible .case-art::before { transform: translate(-15px, 12px); }

/* Short, finite entrances. Never hide content until JavaScript is ready. */
.motion-ready .hero-copy>* { animation: arrive 650ms cubic-bezier(.2,.75,.25,1) both; }
.motion-ready .hero-copy>:nth-child(2) { animation-delay: 70ms; }
.motion-ready .hero-copy>:nth-child(3) { animation-delay: 140ms; }
.motion-ready .hero-copy>:nth-child(4) { animation-delay: 210ms; }
.motion-ready .hero-copy>:nth-child(5) { animation-delay: 280ms; }
.motion-ready .hero h1 em::after { animation: underline-in 700ms cubic-bezier(.2,.75,.25,1) 320ms both; }
.motion-ready .orb { animation: shape-in 1000ms cubic-bezier(.2,.75,.25,1) both; }
.motion-ready .orb-two { animation-delay: 90ms; }
.motion-ready .orb-three { animation-delay: 180ms; }
.motion-ready .art-center { animation: shape-in 850ms cubic-bezier(.2,.75,.25,1) 220ms both; }
.motion-ready .art-label, .motion-ready .art-coordinate { animation: arrive 650ms ease-out 450ms both; }
.reveal-pending { opacity: 0; translate: 0 18px; }
.reveal-entering { animation: arrive 650ms cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms) both; }
.process-grid article.reveal-entering::before { animation: line-in 850ms cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms) both; }
@keyframes arrive { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes shape-in { from { opacity: 0; translate: 0 24px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes underline-in { from { transform: rotate(-1.7deg) scaleX(0); } to { transform: rotate(-1.7deg) scaleX(1); } }
@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dialog-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width:1100px) {
  .cms-callout { gap: 35px; }
  .cms-card { padding: 20px; }
}
@media (max-width:800px) {
  html { scroll-padding-top: 100px; }
  .header { height: 80px; }
  .header nav { top: 72px; box-shadow: 0 16px 30px #1a201b0d; }
  .header nav a { min-height: 44px; padding: 11px 4px; }
  .header nav a::after { bottom: 4px; left: 4px; width: 35px; }
  .menu-toggle { width: 44px; height: 44px; padding: 10px; }
  .menu-toggle span { transition: transform 200ms; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .header-actions { gap: 8px; }
  .demo-bar { font-size: 10px; padding: 7px 15px; }
  .demo-bar .text-button { min-height: 32px; font-size: 10px; }
  .hero { padding-top: 25px; padding-bottom: 45px; }
  .hero-description { font-size: 15px; }
  .art-label, .art-coordinate { font-size: 10px; }
  .service-card p, .process-grid p { font-size: 13px; }
  .case-art-label, .case-art-bottom { font-size: 9px; }
  .insight-art small { font-size: 9px; left: 12px; bottom: 12px; max-width: calc(100% - 24px); letter-spacing: .035em; }
  .insight-meta { font-size: 10px; flex-wrap: wrap; gap: 4px; }
  .cms-callout { gap: 30px; }
  .cms-ready { font-size: 10px; }
  .cms-notice { font-size: 10px; }
}
@media (max-width:550px) {
  .hero h1 { font-size: clamp(46px, 12.6vw, 63px); }
  .hero-description { max-width: 330px; }
  .discipline-strip .wrap { font-size: 11px; }
  .tag { font-size: 10px; }
  .service-card h3 { font-size: 24px; }
  .insight-art { height: 170px; }
  .insight-card h3 { font-size: 19px; }
  .insight-meta { font-size: 10px; letter-spacing: 0; }
  .cms-callout { padding: 25px; }
  .cms-card { padding: 18px; }
  .cms-card-header { gap: 7px; font-size: 12px; }
  .cms-ready { font-size: 10px; max-width: 70px; line-height: 1.4; text-align: right; }
  .cms-card .button { gap: 16px; padding: 16px 18px; font-size: 12px; }
  .cms-steps li { gap: 9px; }
  .cms-steps div>span { font-size: 11px; }
  .cms-toolbar-actions>button:not(.close-button) { font-size: 11px; padding: 7px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
  .art-sculpture { transform: none; }
  .button:is(:hover, :focus-visible) span, .case-link span, .insight-card .read-link, .service-symbol { transform: none !important; }
}