/* Material-rich artwork and a consistent, finite motion vocabulary. */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.22, .61, .36, 1); --motion-short: 320ms; --motion-medium: 680ms; }
.product-art { position: relative; isolation: isolate; border-radius: 24px; overflow: hidden; background: var(--surface); perspective: 1400px; }
.product-art picture { display: block; width: 100%; aspect-ratio: 3 / 2; transform: rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)); transform-origin: 50% 50%; }
.product-art img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; object-position: center; }
.art-light { position: absolute; z-index: 2; pointer-events: none; inset: 0; background: linear-gradient(115deg, #ffffff00 35%, #ffffff0b 48%, #ffffff00 62%); opacity: 0; }
.art-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; color: #a4afbf; font-size: 12px; letter-spacing: .035em; border-top: 1px solid #ffffff0b; background: #0b1017; }
.art-caption span:last-child { color: #7c8d9e; letter-spacing: 0; }
.detail-artwork { max-width: 960px; margin: 58px auto 0; }
.detail-artwork .product-art { border-radius: 30px; box-shadow: 0 35px 85px #0004; }
.detail-hero .detail-showcase { margin-top: 32px; }
.showcase-panels { max-width: 960px; margin: 0 auto; }
.showcase-panel { max-width: none; }
.showcase-artwork { width: 100%; }
.showcase-artwork .product-art { border-radius: 30px 30px 0 0; }
.showcase-artwork .art-caption { display: none; }
.showcase-panel .showcase-ui { border-radius: 0 0 30px 30px; border-color: #ffffff10; padding: 38px 65px; background: #131820; }
.showcase-panel .showcase-ui .ui-fine-detail { display: none; }
.product-story .product-visual { padding: 0; overflow: hidden; background: #10151c; border-color: #ffffff16; }
.product-story .product-art { border-radius: 26px 26px 0 0; }
.product-interface { margin: 0; padding: 0 22px; border-top: 1px solid #ffffff10; }
.product-interface summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 14px; color: #afc9e4; cursor: pointer; list-style: none; }
.product-interface summary::-webkit-details-marker { display: none; }
.product-interface summary > span { font-size: 20px; transition: transform 450ms var(--ease); }
.product-interface[open] summary > span { transform: rotate(45deg); }
.product-interface .product-ui { margin: 0 0 22px; }
.product-story .illustrated-product-flow { padding: 12px 22px 24px; }
.highlight-grid .editorial-card h3 { font-size: clamp(25px, 2.2vw, 32px); line-height: 1.16; }
.interface-card { display: flex; flex-direction: column; background: #101a27; color: #f4f7fb; }
.interface-card .product-art { margin: 20px 0; border-radius: 0; overflow: hidden; flex: 1; min-height: 0; }
.interface-card .product-art img { position: static; height: 100%; min-height: 0; object-fit: contain; }
.interface-card .art-caption { display: none; }
.interface-card .search-visual { margin: 0 0 48px; z-index: 1; position: relative; }
.interface-card .search-response { display: none; }
.interface-card .search-question { background: #eef6fbec; border-color: #ffffff85; box-shadow: 0 15px 40px #0005; }
.interface-card > .round-arrow { background: #e5f0fa; color: #24364b; }

/* Native screen details, so interface text remains crisp and selectable. */
.product-ui { position: relative; border: 1px solid #71849c45; background: #111722; box-shadow: 0 20px 45px #0004, inset 0 1px #ffffff12; }
.ui-chrome { background: linear-gradient(180deg, #27313e, #1b2430); border-bottom: 1px solid #97b5d625; box-shadow: inset 0 1px #ffffff14; }
.ui-window-controls { display: flex; gap: 5px; padding-right: 2px; }
.ui-window-controls i { width: 6px; height: 6px; border-radius: 50%; background: #b6c7d5; box-shadow: inset 0 1px 1px #fff5, 0 1px 2px #0009; }
.ui-window-controls i:nth-child(2) { background: #708395; }
.ui-window-controls i:nth-child(3) { background: #4b6077; }
.ui-canvas { background: radial-gradient(ellipse at 85% 0, color-mix(in srgb, var(--ui-accent) 4%, transparent), transparent 65%); }
.ui-avatar { box-shadow: inset 0 1px #ffffff22, 0 3px 6px #0004; border: 1px solid #ffffff12; }
.ui-metrics > div { position: relative; background: linear-gradient(135deg, #263140, #1b2430); border-color: #8399b830; box-shadow: inset 0 1px #ffffff10, 0 5px 12px #0002; }
.ui-metrics > div::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--ui-accent), transparent); opacity: .35; }
.chart-bars i { background: linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 38%, #152131), var(--ui-accent) 50%, color-mix(in srgb, var(--ui-accent) 70%, #132132)); box-shadow: inset 0 1px #ffffff60, inset 1px 0 #ffffff24, 4px 0 8px #0003; border-radius: 4px 4px 1px 1px; }
.operations-chart { background: #111923; border-color: #718caf35; box-shadow: inset 0 1px 8px #0003; }
.paper { position: relative; background: repeating-linear-gradient(0deg, #ffffff00 0 3px, #e0d8c813 3px 4px), linear-gradient(125deg, #fffffa, #efece2); color: #252932; box-shadow: 3px 3px #dad9d1, 6px 6px #babbb7, 10px 14px 24px #0006; border-color: #fff9; }
.paper::after { content: ''; display: block; width: 34px; height: 34px; position: absolute; top: 0; right: 0; background: linear-gradient(225deg, #1f293600 49%, #d0cfc6 50%, #f2f0e8 54%, #fcfbf5); border-radius: 0 0 0 6px; }
.paper small { color: #686c6f; }
.paper-lines i { background: #949b9d52; height: 2px; box-shadow: 0 1px #fff; }
.signature-stroke { filter: drop-shadow(0 1px .5px #14263f22); }
.verified-seal { border: 1px solid #bca5ef38; padding: 13px; border-radius: 13px; background: linear-gradient(135deg, #3b314a, #242034); box-shadow: inset 0 1px #ffffff20; }
.progress-ring { box-shadow: 0 0 0 6px #ffffff04, inset 0 0 0 1px #ffffff15, 0 12px 28px #0003; }
.ui-field { background: linear-gradient(#1f2a35, #1b252e); border-color: #8197a73d; box-shadow: inset 0 1px #ffffff09; }
.ai-answer { position: relative; overflow: hidden; border: 1px solid #8eadd72c; background: linear-gradient(135deg, #233650, #1a283e); box-shadow: inset 0 1px #ffffff16, 0 10px 28px #0002; }
.ai-mark { padding: 10px; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #7aa2c74d, #2e456055); border: 1px solid #c4e6ff40; box-shadow: inset 0 1px #d5eeff44, 0 8px 20px #0003; }
.ai-mark .fw-icon { width: 26px; height: 26px; }
.ui-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ui-source-grid > div { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #ffffff13; border-radius: 10px; background: #ffffff03; }
.ui-source-grid .fw-icon { width: 20px; height: 20px; color: var(--ui-accent); }
.ui-source-grid strong, .ui-record-row strong { display: block; font-size: 13px; font-weight: 500; color: #e0e7f1; }
.ui-source-grid small, .ui-record-row small { display: block; font-size: 12px; color: #8c9bb0; margin-top: 3px; }
.ui-source-grid b { margin-left: auto; font-size: 12px; color: #7c98bb; }
.ui-records { margin-top: 24px; border-top: 1px solid #ffffff12; }
.ui-records-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #8295ad; padding-block: 14px 8px; }
.ui-record-row { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-top: 1px solid #ffffff07; }
.ui-record-mark { display: grid; place-items: center; width: 30px; height: 34px; border: 1px solid #ffffff16; border-radius: 7px; background: linear-gradient(140deg, #293548, #192433); color: var(--ui-accent); box-shadow: inset 0 1px #ffffff0c; flex: none; }
.ui-record-mark .fw-icon { width: 16px; height: 16px; }
.ui-record-state { font-size: 12px; padding: 4px 8px; border-radius: 20px; background: color-mix(in srgb, var(--ui-accent) 8%, transparent); color: var(--ui-accent); white-space: nowrap; margin-left: auto; }
.preview-caption-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #7292b3; vertical-align: middle; margin: 0 6px 2px 0; }
.community-cover { background: radial-gradient(circle at 82% 32%, #eec7b3, transparent 55%), linear-gradient(120deg, #d9d0bc, #b99ca1); box-shadow: inset 0 1px #ffffff7a; }
.circle-art i { background: linear-gradient(145deg, #ffe2d75c, #ffffff05 50%, #67395742); border: 1px solid #ffffff4a; box-shadow: inset 0 2px 8px #ffffff46, 0 15px 25px #52364422; }
.community-initial { box-shadow: inset 0 1px #ffffff45, 0 5px 10px #0003; border: 1px solid #ffffff1c; }
.sun-graphic { background: radial-gradient(circle at 35% 30%, #eadbb13d, #132f2980); border: 1px solid #c9f0d62f; box-shadow: inset 0 1px #ffffff40, 0 10px 40px #76d08a10; border-radius: 50%; }
.chart-area { fill: color-mix(in srgb, var(--ui-accent) 15%, transparent); }
.chart-line { filter: drop-shadow(0 3px 4px #7addb62b); stroke-linecap: round; }
.launch-computer .ui-fine-detail, .launch-computer .ui-window-controls, .story-screen .ui-fine-detail, .chapter-visual .ui-fine-detail, .case-art .ui-fine-detail { display: none; }
.story-screen { top: 90px; padding-block: 24px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 781px) {
    .case-study:not(:first-child) { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  }
}
.launch-computer .desktop-device { background: linear-gradient(120deg, #9daab6, #39434f 12%, #11171e 47%, #65717e 90%, #d9e4ee); box-shadow: 0 28px 45px #0008, -1px 0 #99b6cd40, 1px 0 #e4f5ff55, inset 0 1px 1px #ffffffe0; transform: rotateX(calc(var(--device-rotate, 4deg) + var(--pointer-y, 0deg))) rotateY(var(--pointer-x, 0deg)) scale(var(--device-scale, .98)); }
.launch-computer .desktop-device::after { content: ''; pointer-events: none; position: absolute; inset: 12px 8px 8px; border-radius: 9px 9px 1px 1px; border: 1px solid #ffffff0e; background: linear-gradient(116deg, #e1f4ff08, transparent 35%, #ffffff00 64%, #b4dbff05); }
.device-camera { box-shadow: inset 0 0 2px #001522, 0 0 0 1px #020306; background: radial-gradient(circle at 35% 25%, #365e71, #0b1016 55%); }
.motion-ready .launch-computer .desktop-device { transition: none; }
.laptop-base { height: clamp(8px, 1.25vw, 17px); background: linear-gradient(#d3dbe1, #9ba6b1 10%, #69737e 37%, #303943 75%, #11161e); box-shadow: 0 2px 1px #adbccc44, 0 13px 22px #000a; }
.laptop-base::after { content: ''; position: absolute; left: 5%; right: 5%; bottom: 2px; height: 1px; background: linear-gradient(90deg, transparent, #d5edff38, transparent); }

/* The shared SVG library gains beveled materials and a grounded physical presence. */
.info-diagram { aspect-ratio: 11 / 7; --diagram-tone: var(--info-tone, #9bcaff); color: var(--diagram-tone); }
.diagram-panel { fill: var(--material-panel); stroke: var(--material-edge); stroke-opacity: 1; }
.diagram-chip, .info-card:hover .diagram-chip, .illustrated-flow:hover .diagram-chip { fill: var(--material-chip); stroke: var(--material-edge); stroke-opacity: 1; }
.diagram-backing { fill: #0c1420; stroke: #809ab44d; stroke-width: 1; }
.diagram-screen { fill: #101a28; stroke: #99bdd326; stroke-width: .6; }
.diagram-edge { stroke: #d1efff; stroke-opacity: .45; stroke-width: .6; }
.diagram-fold { fill: #53637c; stroke: #a8bdcf50; stroke-width: .7; }
.diagram-micro { stroke: #adc6dd; stroke-width: .7; stroke-opacity: .35; }
.diagram-accent { stroke: var(--diagram-tone); stroke-width: 1.45; }
.diagram-muted { stroke: #b3c7db; stroke-opacity: .62; stroke-width: 1.2; }
.diagram-wire { stroke: var(--diagram-tone); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 2 4; }
.diagram-guide { stroke: #7394b725; stroke-width: .7; }
.diagram-dot { filter: drop-shadow(0 0 2px currentColor); }
.info-card > .info-diagram { transform: perspective(600px) rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)); }
.system-map-core { background: linear-gradient(135deg, #8daecf35, #23415b9c 40%, #192a40); border-color: #b2d6fa65; box-shadow: inset 0 1px 2px #deefff8a, inset 0 -1px 6px #070e168a, 0 20px 40px #0006; }
.system-map-sources > span, .system-map-outcomes > span { background: linear-gradient(125deg, #334152, #1a2534); box-shadow: inset 0 1px #e4f2ff1c, 0 10px 25px #0002; }
.suite-symbols a { background: linear-gradient(145deg, #323c4b, #19212c 58%, #0f141c); border-color: #a0b3c337; box-shadow: inset 0 1px #ffffff45, inset 0 -1px 2px #0005, 0 12px 24px #0004; }
.suite-symbols .fw-icon { filter: drop-shadow(0 1px 0 #fff4) drop-shadow(0 3px 4px #0008); }

/* Motion stays on transform/opacity except deliberate, short layout transitions. */
.motion-ready .reveal { transition: opacity 850ms var(--ease-soft), transform 1050ms var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready .reveal:not(.is-visible) { transform: translate3d(0, 28px, 0); }
.motion-ready .launch-computer.reveal, .motion-ready .launch-computer.reveal.is-visible { transform: none; opacity: 1; }
.motion-ready :is(.launch-summary, .editorial-opening, .product-intro, .work-opening, .contact-hero, .detail-hero) .reveal { opacity: 1; transform: none; }
.motion-ready .launch-eyebrow.reveal { transform: none; opacity: 1; }
.motion-ready .showcase-panel:not([hidden]) .product-ui, .motion-ready [data-story-panel]:not([hidden]) .product-ui { animation: none; }
.motion-ready [data-story-panel]:not([hidden]) { animation: none; }
.motion-ready .reveal.is-visible .system-map-lines { animation: map-flow 2400ms var(--ease-soft) both; }
.motion-ready .showcase-panel:not([hidden]) .chart-bars i { animation: bar-rise 1400ms var(--ease) both; animation-delay: calc(var(--bar-index, 0) * 65ms); }
.motion-ready .visual-entered .chart-bars i { animation: bar-rise 1500ms var(--ease) both; animation-delay: calc(var(--bar-index, 0) * 60ms); }
.motion-ready .visual-entered .signature-stroke path { animation: signature-draw 2300ms var(--ease-soft) both; }
.motion-ready .visual-entered .chart-line { animation: chart-draw 1900ms var(--ease-soft) both; }
.motion-ready .info-diagram.visual-entered .diagram-wire { animation: wire-connect 1800ms var(--ease-soft) both; }
.motion-ready .info-diagram.visual-entered .diagram-chip { animation: material-light 1600ms var(--ease-soft) both; }
.motion-ready .product-art.visual-entered img { animation: art-develop 1700ms var(--ease) both; }
.motion-ready .product-art.visual-entered .art-light { animation: light-pass 2200ms var(--ease-soft) 100ms both; }
.motion-ready .product-art:not(.in-view) *, .motion-ready [data-visual-motion]:not(.in-view) *, .motion-ready .info-diagram:not(.in-view) * { animation-play-state: paused !important; }
.motion-ready .concept-node { transition: transform 900ms var(--ease), border-color 800ms var(--ease-soft), box-shadow 900ms var(--ease-soft); }
.motion-ready .concept-node.is-active { transform: translateY(-4px); }
.motion-ready .concept-link.is-active .concept-signal { animation-duration: 1500ms; animation-timing-function: var(--ease-soft); }
.button, .round-arrow, .suite-symbols a { transition: transform 550ms var(--ease), background-color 350ms var(--ease-soft), box-shadow 550ms var(--ease); }
.button:active { transform: scale(.975); }
.photo-card img, .wide-editorial img, .case-art > img { transition: transform 1400ms var(--ease); }
.photo-card:hover img { transform: scale(1.045); }
.editorial-card, .info-card { transition: transform 700ms var(--ease), border-color 600ms var(--ease-soft), box-shadow 700ms var(--ease); }
.faq-item summary > span, .case-explanation summary > span { transition: transform 500ms var(--ease); }
.faq-item[open] summary > span, .case-explanation[open] summary > span { transform: rotate(45deg); }
.editorial-opening .wide-editorial img { transform: translate3d(0, var(--photo-depth, 0px), 0) scale(1.06); }
@keyframes art-develop { from { opacity: .25; transform: scale(.985) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes light-pass { 0% { transform: translateX(-80%); opacity: 0; } 25% { opacity: .65; } 100% { transform: translateX(80%); opacity: 0; } }
@keyframes wire-connect { from { stroke-dashoffset: 30; stroke-opacity: .1; } to { stroke-dashoffset: 0; stroke-opacity: .55; } }
@keyframes material-light { 0% { opacity: .45; } 45% { opacity: 1; } 100% { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .info-card:hover, .motion-ready :is(.engagement-options, .feature-list) > .info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px #0003, inset 0 1px #ffffff14; }
  .motion-ready .suite-symbols a:hover { transform: translateY(-6px) scale(1.035); box-shadow: inset 0 1px #ffffff70, 0 20px 35px #0005; }
  .product-art:hover .art-light { opacity: .28; transition: opacity 700ms; }
}
@media (max-width: 780px) {
  .detail-artwork { margin-top: 38px; }
  .detail-artwork .product-art { border-radius: 22px; }
  .showcase-panel .showcase-ui { padding: 24px 18px; border-radius: 0 0 24px 24px; }
  .showcase-artwork .product-art { border-radius: 24px 24px 0 0; }
  .art-caption { padding: 13px 16px; font-size: 12px; }
  .ui-source-grid { grid-template-columns: 1fr; }
  .ui-window-controls { display: none; }
  .product-interface { padding-inline: 16px; }
  .product-story .illustrated-product-flow { padding-inline: 18px; }
  .motion-ready .mobile-menu { transition: opacity 450ms var(--ease-soft), transform 650ms var(--ease), visibility 650ms; }
  .motion-ready .mobile-menu nav a { transition: opacity 350ms var(--ease-soft), transform 650ms var(--ease); transform: translateY(12px); opacity: 0; }
  .motion-ready .mobile-menu.open nav a { transform: none; opacity: 1; transition-delay: calc(var(--menu-index, 0) * 45ms); }
}
@container (max-width: 440px) {
  .ui-record-state { display: none; }
  .ui-records-heading span:last-child { display: none; }
  .ui-source-grid { grid-template-columns: 1fr; }
}
.motion-off .product-art picture, .motion-off .info-card > .info-diagram { transform: none; }
.motion-off .editorial-opening .wide-editorial img { transform: none; }
.tab-inactive *, .page-sleeping * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-art picture, .info-card > .info-diagram, .editorial-opening .wide-editorial img { transform: none; }
}