/* Route-scoped refractive glass for licensed 3D artwork and secondary links.
   The moving light is a compositor-transformed overlay, never a filter per frame. */
:root { --holo-blue: #3c62bd; --holo-violet: #8463b9; --holo-cyan: #268ba1; --holo-solid: #f4f6fb; --glass-base: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(235 240 252 / .47) 58%, rgb(232 228 247 / .64)); --glass-edge: rgb(255 255 255 / .7); --glass-shadow: inset 1px 1px 0 rgb(255 255 255 / .9), inset -1px -1px 0 rgb(107 133 200 / .12), 0 14px 36px -22px rgb(43 61 111 / .35); }
html[data-theme="dark"] { --holo-blue: #87b7ff; --holo-violet: #be9ded; --holo-cyan: #77d6d6; --holo-solid: #171d29; --glass-base: linear-gradient(145deg, rgb(46 58 87 / .67), rgb(20 27 43 / .7) 60%, rgb(44 34 66 / .58)); --glass-edge: rgb(183 203 255 / .2); --glass-shadow: inset 1px 1px 0 rgb(221 232 255 / .18), inset -1px -1px 0 rgb(128 167 255 / .13), 0 20px 44px -30px rgb(0 0 0 / .55); }
.holographic-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass-base);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
  box-shadow: var(--glass-shadow);
}
/* Existing editorial rows use visible overflow; contain only the glass layers. */
.site-shell:is(.home-quality, .information-page) .holographic-surface[data-holographic] { overflow: clip; border-radius: 18px; background: var(--glass-base); box-shadow: var(--glass-shadow); transition-property: color, border-color; }
.holographic-surface > :is(.glass-reflection, .glass-bounce) { grid-area: auto; }
.holographic-surface > .glass-reflection {
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  margin: 0;
  width: auto;
  height: auto;
  background: linear-gradient(var(--glass-angle, 118deg), transparent 20%, rgb(122 189 255 / .2) 37%, rgb(239 210 255 / .6) 48%, rgb(147 226 227 / .28) 57%, transparent 72%);
  opacity: .45;
  transform: translate3d(0, 0, 0);
  transition: opacity 200ms ease;
}
.holographic-surface:focus-within > .glass-reflection { opacity: .55; }
[data-kinetic-cluster] > :nth-child(2n) { --glass-angle: 38deg; }
[data-kinetic-cluster] > :nth-child(3n) { --glass-angle: 155deg; }
.process-infographic > li:nth-child(2) { --glass-angle: 38deg; --glass-light-x: 78%; --glass-light-y: 30%; }
.process-infographic > li:nth-child(3) { --glass-angle: 155deg; --glass-light-x: 28%; --glass-light-y: 70%; }
.process-infographic > li:nth-child(4) { --glass-angle: 72deg; --glass-light-x: 75%; --glass-light-y: 60%; }
.process-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(ellipse at var(--glass-light-x, 22%) var(--glass-light-y, 18%), #cdeaff34, transparent 60%), radial-gradient(circle at 84% 19%, #fff9 0, #bbdfff24 2px, transparent 7px), radial-gradient(circle at 67% 72%, #b2d5ff77 0, transparent 4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.075' filter='url(%23f)' d='M0 0h120v120H0z'/%3E%3C/svg%3E"); }
.glass-bounce { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--glass-light-x, 22%) var(--glass-light-y, 18%), #d8eeff, #bba3ee66 30%, transparent 72%); z-index: -1; }
.home-quality .hero-project-link figure { position: relative; }
.home-quality .hero-project-link figcaption { position: absolute; inset: auto 14px 14px; display: flex; padding: 0; min-height: 0; pointer-events: none; }
.home-quality .hero-project-link figcaption strong { display: inline-block; width: fit-content; padding: 6px 12px; border: 1px solid rgb(255 255 255 / .65); border-radius: 999px; color: #17243b; background: rgb(244 248 255 / .8); -webkit-backdrop-filter: blur(18px) saturate(110%); backdrop-filter: blur(18px) saturate(110%); box-shadow: inset 0 1px 0 #fff9, 0 3px 10px #182a4b12; font-size: 14px; line-height: 1.3; font-weight: 600; }
.home-quality .hero-project-link:is(:hover, :focus-visible) figcaption strong { color: #17243b; background: rgb(250 252 255 / .9); }
.holo-diagram { display: grid; place-items: center; width: 160px; max-width: 100%; aspect-ratio: 1; position: relative; isolation: isolate; }
.holo-diagram::before { content: ""; position: absolute; inset: 7%; z-index: -1; border: 1px solid #fff7; border-radius: 30%; background: radial-gradient(ellipse at 20% 14%, #edfaffb3, #bad9f024 48%, #e2bcff42 85%); box-shadow: inset 1px 2px 1px #ffffff70, inset -2px -2px 8px #83a2e024, 0 9px 14px -12px #375e9a77; transform: perspective(400px) rotateX(8deg) rotateY(-8deg); }
.holo-diagram::after { content: ""; position: absolute; inset: 18%; z-index: -1; background: radial-gradient(ellipse at 65% 65%, #dd9eeb48, #82d5f91f 48%, transparent 70%); transform: translateY(12%); }
.holo-diagram img { display: block; width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 7px 6px rgb(46 60 105 / .17)); }
html[data-theme="dark"] .holo-diagram::before { border-color: #c0d9ff30; background: radial-gradient(ellipse at 20% 14%, #c6e7ff42, #688bb11a 48%, #ba9dea26 85%); }

/* Space between subjects is deliberately larger than space within each subject. */
.home-quality .home-featured-work,
.home-quality .capability-overview { padding-block: clamp(72px, 8vw, 120px); }
.home-quality .home-process-section { padding-block: clamp(88px, 10vw, 152px); }
.home-quality .home-process-section .section-heading { max-width: 840px; margin-bottom: 48px; }
.home-quality .home-process-section h2 { max-width: 24ch; text-wrap: balance; }
.home-quality .home-process-section .process-infographic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.home-quality .process-infographic > li { display: flex; min-width: 0; }
.home-quality .process-infographic .process-panel { width: 100%; padding: clamp(28px, 3.2vw, 44px); }
.process-panel .holo-diagram { width: 160px; height: 160px; margin: -12px 0 24px -12px; }
.home-quality .process-infographic h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; margin-bottom: 16px; }
.home-quality .process-infographic p { max-width: 44ch; margin: 0; font-size: 17px; line-height: 1.65; }
.process-detail { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.process-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; }
.process-detail summary::-webkit-details-marker { display: none; }
.process-detail summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 3px; }
.process-detail .detail-close, .process-detail[open] .detail-open { display: none; }
.process-detail[open] .detail-close { display: inline; }
.detail-toggle { display: block; position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.detail-toggle::before, .detail-toggle::after { content: ""; position: absolute; background: currentColor; width: 14px; height: 1.5px; left: 1px; top: 7px; }
.detail-toggle::after { transform: rotate(90deg); transition: transform 160ms ease; }
.process-detail[open] .detail-toggle::after { transform: rotate(0); }
.home-quality .process-detail p { margin: 14px 0 4px; }
.home-quality .capability-overview article,
.home-quality .capability-overview article:first-child { grid-template-columns: 100px minmax(0, .95fr) minmax(0, 1.05fr); padding: clamp(24px, 3vw, 36px); margin-top: 20px; border: 1px solid var(--glass-edge); background: var(--glass-base); box-shadow: var(--glass-shadow); }
.home-quality .capability-overview article .capability-symbol { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.home-quality .capability-overview article h3,
.home-quality .capability-overview article:first-child h3 { grid-column: 2; }
.home-quality .capability-overview article > :is(p, a) { grid-column: 3; }

/* The same on-demand film is now part of Contact and About's opening moment. */
.information-page .film-hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.information-page .film-hero-copy { min-width: 0; }
.information-page .film-hero-copy h1 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.08; max-width: 16ch; text-wrap: balance; margin-bottom: 24px; }
.information-page .film-hero-copy > p:not(.section-kicker) { font-size: 18px; line-height: 1.65; max-width: 44ch; }
.information-page .film-hero .portfolio-film-hero { min-width: 0; width: 100%; margin: 0; padding: 0; }
.portfolio-film-hero .portfolio-film-heading { margin: 0 0 16px; }
.portfolio-film-hero h2 { font-size: 19px; line-height: 1.4; letter-spacing: -.015em; margin: 0; }
.portfolio-film-hero video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #0b0d12; border-radius: 12px; }
.portfolio-film-hero .portfolio-film-transcript { font-size: 15px; line-height: 1.65; }
.portfolio-film-hero .portfolio-film-transcript summary { cursor: pointer; padding: 12px 0; }
.portfolio-film-hero :is(video, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.about-page .about-opening { display: block; }
.about-page .about-opening .page-intro { max-width: none; width: 100%; padding-inline: 0; }
.about-page .about-opening .standalone-about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 88px); max-width: none; margin-top: clamp(48px, 6vw, 88px); }
.about-page .about-opening .about-copy { max-width: 64ch; }
.about-page .about-facts { align-self: start; }
.information-page .about-credentials-section .about-detail-card.holographic-surface { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--glass-edge); background: var(--glass-base); box-shadow: var(--glass-shadow); }
.information-page .about-credentials-section .about-detail-grid { gap: 24px; }
.information-page :is(.about-credentials-section, .software-strip) { padding-block: clamp(64px, 7vw, 104px); }
.contact-page .contact-directory { gap: 24px; padding-block: 64px 96px; }
.information-page.contact-page .contact-directory .holographic-surface { padding: 28px; border: 1px solid var(--glass-edge); background: var(--glass-base); box-shadow: var(--glass-shadow); }
.services-page .service-engagements { gap: 24px; border: 0; }
.services-page .service-engagements > li { border: 0; }
.services-page .service-engagement.holographic-surface { height: 100%; padding: clamp(24px, 3vw, 40px); }
.services-page .service-list.service-kanban.capability-field { gap: 24px; }
.services-page .service-list.service-kanban.capability-field article.holographic-surface,
.service-offer-page .service-offer-grid article.holographic-surface { padding: clamp(24px, 3vw, 36px); overflow: clip; border: 1px solid var(--glass-edge); border-radius: 18px; background: var(--glass-base); box-shadow: var(--glass-shadow); }
.holographic-surface .service-icon { transform-box: fill-box; transform-origin: center; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .holographic-surface[data-kinetic-active="true"] > .glass-reflection { opacity: .7; }
  .home-quality .hero-project-link figcaption strong { transition: transform 200ms var(--ease), background 200ms ease; }
  .home-quality .hero-project-link:is(:hover, :focus-visible) figcaption strong { transform: perspective(500px) translateY(-2px) rotateX(5deg); }
  .home-quality .hero-project-link:active figcaption strong { transform: translateY(0) scale(.98); }
  .holographic-surface :is(.holo-diagram img, .service-icon) { transition: scale 180ms var(--ease); }
  .holographic-surface[data-kinetic-active="true"] :is(.holo-diagram img, .service-icon) { scale: 1.035; }
  .holographic-surface:active :is(.holo-diagram img, .service-icon) { scale: .97; }
}
@media (prefers-reduced-motion: no-preference) {
  .glass-bounce { transition: opacity 600ms ease-out; }
  .holographic-surface:active .glass-bounce { opacity: .4; transition-duration: 60ms; }
  [data-motion-revealed="true"] > .process-panel .holo-diagram,
  [data-motion-revealed="true"] > .capability-symbol .holo-diagram { animation: diagram-arrive 700ms var(--ease) both; animation-delay: var(--motion-delay, 0ms); }
  html[data-page-hidden="true"] .holo-diagram { animation-play-state: paused; }
}
@keyframes diagram-arrive { from { opacity: .45; transform: translateY(10px) rotate(-3deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@media (max-width: 940px) {
  .information-page .film-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .information-page .film-hero-copy h1 { max-width: 22ch; }
  .portfolio-film-hero { max-width: 760px; }
  .home-quality .capability-overview article, .home-quality .capability-overview article:first-child { grid-template-columns: 76px minmax(0, 1fr); gap: 14px 24px; }
  .home-quality .capability-overview article h3, .home-quality .capability-overview article:first-child h3 { grid-row: 1; }
  .home-quality .capability-overview article > :is(p, a) { grid-column: 2; }
}
@media (max-width: 640px) {
  .home-quality .home-process-section .process-infographic { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-quality .home-process-section .section-heading { margin-bottom: 32px; }
  .process-panel .holo-diagram { width: 128px; height: 128px; margin-bottom: 20px; }
  .home-quality .process-infographic .process-panel { padding: 28px; }
  .home-quality .capability-overview article, .home-quality .capability-overview article:first-child { grid-template-columns: minmax(0, 1fr); }
  .home-quality .capability-overview article .capability-symbol { grid-column: 1; grid-row: auto; width: 90px; }
  .home-quality .capability-overview article h3, .home-quality .capability-overview article:first-child h3,
  .home-quality .capability-overview article > :is(p, a) { grid-column: 1; grid-row: auto; }
  .about-page .about-opening .standalone-about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-page .contact-directory { padding-block: 40px 64px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  [data-kinetic-card][data-holographic], .holo-diagram, .holo-diagram img, .holographic-surface .service-icon { transform: none !important; animation: none !important; scale: 1 !important; }
  .holographic-surface > .glass-reflection { transform: none !important; transition: none; opacity: .18; }
}
@media (prefers-reduced-transparency: reduce) { .glass-reflection, .glass-bounce, .process-panel::before { display: none; } .holographic-surface { background: var(--surface-primary) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .home-quality .hero-project-link figcaption strong { background: #f4f8ff; backdrop-filter: none; } }
@media (forced-colors: active) { .holographic-surface { background: Canvas !important; border-color: CanvasText !important; box-shadow: none !important; } .glass-reflection, .glass-bounce { display: none; } .holo-diagram { display: none; } }