/* Supplied design: 1,694px canvas, 80px navigation, 866px artwork, 160px message. */
:root { --surface: #102c34; --surface-deep: var(--surface); --text: #f7f8f7; --linework: var(--color-ice); --line: color-mix(in srgb, var(--linework) 57%, transparent); --hero-accent: var(--color-orange); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface); }
body { margin: 0; padding: 0; color: var(--text); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-ice); outline-offset: -5px; }
.site-frame { position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); container-type: inline-size; }
.site-intro { display: none; position: fixed; inset: 0; z-index: 100; isolation: isolate; }
.intro-backdrop { position: absolute; inset: 0; background: var(--surface); }
.intro-logo { position: absolute; left: 50%; top: 50%; width: clamp(280px, 32vw, 580px); height: auto; transform: translate(-50%, -50%); transform-origin: top left; opacity: 0; will-change: transform, opacity; }
:is(.intro-pending, .intro-running) .site-intro { display: block; }
:is(.intro-pending, .intro-running) .brand img { visibility: hidden; }
:is(.intro-pending, .intro-running) :is(.site-header, .hero-message, .building-elevation, .building-glimmer, .building-issues, .stage-guides, .stage-ruler > span) { opacity: 0; }
:is(.intro-pending, .intro-running) :is(.guide-lines, .building-glimmer span, .issue-connectors circle, .issue-sheen, .benefit-track),
:is(.intro-pending, .intro-running) .issue-callout::after { animation-play-state: paused; }
/* Keep the building and annotations together, slightly down and left. */
.model-artwork { position: absolute; inset: 12% 10% 4% 6%; background: var(--surface); container-type: size; }
.stage-ruler { --ruler-color: color-mix(in srgb, var(--linework) 40%, transparent); position: absolute; inset: 10px; z-index: 4; pointer-events: none; }
.stage-ruler span { position: absolute; }
.ruler-top, .ruler-bottom { left: 12px; right: 12px; height: 6px; background: repeating-linear-gradient(90deg, var(--ruler-color) 0 1px, transparent 1px 9px); }
.ruler-top { top: 0; }
.ruler-bottom { bottom: 0; }
.ruler-left, .ruler-right { top: 12px; bottom: 12px; width: 6px; background: repeating-linear-gradient(180deg, var(--ruler-color) 0 1px, transparent 1px 9px); }
.ruler-left { left: 0; }
.ruler-right { right: 0; }
.ruler-plus { width: 10px; height: 10px; }
.ruler-plus::before, .ruler-plus::after { content: ''; position: absolute; background: var(--hero-accent); }
.ruler-plus::before { width: 10px; height: 1.5px; left: 0; top: 4.25px; }
.ruler-plus::after { width: 1.5px; height: 10px; left: 4.25px; top: 0; }
.ruler-plus-top-left { top: -2px; left: -2px; }
.ruler-plus-top-right { top: -2px; right: -2px; }
.ruler-plus-bottom-left { bottom: -2px; left: -2px; }
.ruler-plus-bottom-right { bottom: -2px; right: -2px; }
/* Undo the 84% artwork inset so guides cover the full middle panel. */
.stage-guides { position: absolute; top: -14.285714%; left: -7.142857%; width: 119.047619%; height: 119.047619%; pointer-events: none; stroke: var(--linework); stroke-width: 1.25; --guide-fade-x: linear-gradient(90deg, transparent 20px, rgb(0 0 0 / .35) 14%, #000 30%, #000 70%, rgb(0 0 0 / .35) 86%, transparent calc(100% - 20px)); --guide-fade-y: linear-gradient(180deg, transparent 20px, rgb(0 0 0 / .35) 14%, #000 30%, #000 70%, rgb(0 0 0 / .35) 86%, transparent calc(100% - 20px)); -webkit-mask-image: var(--guide-fade-x), var(--guide-fade-y); -webkit-mask-composite: source-in; mask-image: var(--guide-fade-x), var(--guide-fade-y); mask-composite: intersect; }
.guide-lines { vector-effect: non-scaling-stroke; }
.guide-lines { stroke-width: 1; stroke-opacity: .35; stroke-linecap: round; stroke-dasharray: 10 5; animation: guide-drift 8s linear infinite; }
/* One complete dash/gap interval makes the slow drift loop seamlessly. */
@keyframes guide-drift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -15; } }
.building-elevation { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 66.4%; height: auto; max-height: 72%; object-fit: contain; object-position: center; opacity: .92; filter: grayscale(1) invert(1) contrast(1.2); mix-blend-mode: screen; pointer-events: none; user-select: none; }
.building-glimmer { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#fff, #fff), url('./assets/images/bifrost-hero-linework-tall.png'); mask-image: linear-gradient(#fff, #fff), url('./assets/images/bifrost-hero-linework-tall.png'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-mode: luminance; -webkit-mask-composite: source-out; mask-composite: subtract; }
.building-glimmer span { position: absolute; inset: -15% auto -15% 0; width: 26%; background: linear-gradient(108deg, transparent 10%, rgba(222,242,255,.04) 30%, rgba(245,251,255,.2) 49%, rgba(245,251,255,.3) 50%, rgba(222,242,255,.08) 58%, transparent 85%); animation: building-glimmer 11s ease-in-out infinite; }
@keyframes building-glimmer {
  0%, 8% { transform: translateX(-105%); opacity: 0; }
  14% { opacity: .75; }
  62% { transform: translateX(400%); opacity: .75; }
  68%, 100% { transform: translateX(410%); opacity: 0; }
}
.building-issues { --issue-cycle: 3s; --issue-delay: 0s; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.issue-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: var(--hero-accent); stroke-width: clamp(2px, .21cqw, 3.5px); stroke-linecap: square; stroke-linejoin: miter; }
.issue-connectors path { vector-effect: non-scaling-stroke; }
.issue-line { stroke-dasharray: none; stroke-dashoffset: 0; }
.issue-connectors circle { fill: var(--hero-accent); stroke: none; animation: issue-source-pulse var(--issue-cycle) linear var(--issue-delay) infinite; }
.issue-sheen { opacity: 0; stroke-linecap: round; animation: issue-line-sheen var(--issue-cycle) linear var(--issue-delay) infinite; }
.issue-sheen-trail { stroke: #fff; stroke-width: 4px; stroke-opacity: .3; stroke-dasharray: 14 130; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .15)); }
.issue-sheen-core { stroke: #fff; stroke-width: 1.8px; stroke-opacity: .8; stroke-dasharray: 5 139; }
.issue-callout { --sheen-from: 220%; --sheen-to: -120%; position: absolute; display: flex; flex-direction: column; justify-content: flex-end; gap: .25cqw; padding: .7cqw; overflow: hidden; background: var(--hero-accent); color: #fff; pointer-events: auto; font-family: var(--font-body); font-size: clamp(9px, .68cqw, 12px); font-weight: 400; line-height: 1.2; }
.issue-callout::after { content: ''; position: absolute; left: 0; top: -20%; width: 50%; height: 140%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent); pointer-events: none; animation: issue-box-sheen var(--issue-cycle) linear var(--issue-delay) infinite; }
.issue-callout[data-connector-entry="left"] { --sheen-from: -120%; --sheen-to: 220%; }
@keyframes issue-source-pulse {
  0%, 23.333%, 100% { fill: var(--hero-accent); filter: drop-shadow(0 0 0 transparent); }
  7% { fill: var(--hero-accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hero-accent) 50%, transparent)); }
}
/* The connector starts at the box and ends at the circle; increasing the
   dash offset sends the highlight back along that path toward the box. */
@keyframes issue-line-sheen {
  0%, 4.667% { stroke-dashoffset: -100; opacity: 0; }
  9.333% { stroke-dashoffset: -96; opacity: .75; }
  56% { stroke-dashoffset: 0; opacity: .75; }
  65.333%, 100% { stroke-dashoffset: 18; opacity: 0; }
}
@keyframes issue-box-sheen {
  0%, 53.667% { transform: translateX(var(--sheen-from)) skewX(-18deg); opacity: 0; }
  56% { transform: translateX(var(--sheen-from)) skewX(-18deg); opacity: .7; }
  84% { transform: translateX(var(--sheen-to)) skewX(-18deg); opacity: .7; }
  88.667%, 100% { transform: translateX(var(--sheen-to)) skewX(-18deg); opacity: 0; }
}
/* Each six-second mobile scene fades as a unit: label, path, and marker.
   A short empty beat keeps outgoing and incoming scenes from stacking. */
@keyframes mobile-issue-scene {
  0%, 32%, 100% { opacity: 0; }
  4%, 28% { opacity: 1; }
}
.issue-callout p { margin: 0; font-weight: 500; }
.issue-code { font-family: var(--font-body); font-size: clamp(9.5px, .74cqw, 13px); font-weight: 700; line-height: 1.2; }
.issue-floor { left: 2.18%; top: 35.57%; width: 12.8%; min-height: 4.2cqw; }
.issue-clearance { left: 33.06%; top: 16.28%; width: 12.2%; min-height: 4.7cqw; }
.issue-sanitary { right: 2.48%; top: 47.46%; width: 14.1%; min-height: 4.2cqw; }
.issue-sanitary p { white-space: normal; }
.issue-handrails { left: 1.77%; top: 80.14%; width: 11.6%; min-height: 4.1cqw; }
.issue-guardrail { right: calc(2.24% + 60px); top: calc(88% - 30px); width: 13.1%; min-height: 4.5cqw; }
/* Compact desktop header with centered navigation labels. */
.site-header { --nav-inline-padding: 1.7cqw; display: flex; flex: 0 0 auto; height: clamp(64px, 4.05cqw, 78px); border-bottom: 1px solid var(--line); }
.hero-main { display: flex; flex: 1; min-height: 0; }
.hero { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; }
.brand { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; padding: .55cqw 1.8cqw; }
.brand img { width: 10cqw; height: auto; display: block; }
.desktop-nav { display: flex; flex: 0 0 auto; }
.nav-cell { display: flex; align-items: center; justify-content: center; position: relative; border-left: 1px solid var(--line); padding: .85cqw var(--nav-inline-padding); text-transform: uppercase; white-space: nowrap; font-family: var(--font-heading); font-size: clamp(11px, .72cqw, 14px); font-weight: 600; line-height: 1.2; letter-spacing: .04em; transition: color .2s; }
.nav-cell::after, .analysis-cta::after, .talk-cta::after { content: ''; position: absolute; right: .4cqw; bottom: .35cqw; width: .3cqw; height: .3cqw; border-right: 1px solid var(--linework); border-bottom: 1px solid var(--linework); transition: border-color .2s; }
.nav-cell:hover::after, .nav-cell:focus-visible::after { border-color: var(--hero-accent); }
.nav-cell:hover, .nav-cell:focus-visible, .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--hero-accent); }
.analysis-cta { position: relative; width: auto; flex: 0 0 auto; display: flex; align-items: stretch; background: var(--hero-accent); font-family: var(--font-heading); font-size: .88cqw; font-weight: 600; text-transform: uppercase; }
.analysis-cta > span:first-child { display: flex; align-items: center; justify-content: center; flex: 1; padding: .85cqw var(--nav-inline-padding); white-space: nowrap; line-height: 1.2; }
.analysis-cta:hover, .talk-cta:hover { background: var(--hero-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linework) 35%, transparent); }
.menu-toggle, .mobile-nav { display: none; }
.model-stage { position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; container-type: size; background: var(--surface-deep); }
.hero-message { display: grid; flex: 0 0 auto; grid-template-columns: 59% 41%; border-top: 1px solid var(--line); min-height: 9.45cqw; }
.headline-cell { padding: 1.55cqw 2.75cqw; display: flex; align-items: center; }
h1 { margin: 0; width: 100%; font-size: 3.38cqw; text-transform: uppercase; font-weight: 750; line-height: .9; letter-spacing: -.045em; }
h1 > span { display: block; white-space: nowrap; }
h1 em { color: var(--hero-accent); font-style: normal; }
.hero-detail { display: grid; grid-template-columns: 72% 28%; grid-template-rows: 1fr 2.2cqw; border-left: 1px solid var(--line); min-width: 0; }
.hero-intro { padding: 1.3cqw 1.25cqw; display: flex; align-items: center; }
.keep-together { white-space: nowrap; }
.intro-accent { color: var(--hero-accent); }
.hero-intro p { margin: 0; font-size: 1.2cqw; font-weight: 500; line-height: 1.18; letter-spacing: 0; text-wrap: balance; }
.talk-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: .5cqw; border-left: 1px solid var(--line); background: var(--hero-accent); font-family: var(--font-heading); font-size: .88cqw; text-transform: uppercase; font-weight: 600; }
.benefit-strip { grid-column: 1 / -1; min-width: 0; overflow: hidden; border-top: 1px solid var(--line); display: flex; align-items: stretch; }
.benefit-window { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; padding-left: .5cqw; }
.benefit-track { display: flex; align-items: center; flex-shrink: 0; width: max-content; font-family: var(--font-heading); font-weight: 850; text-transform: uppercase; font-size: .7cqw; line-height: 1; animation: benefit-marquee 48s linear infinite; }
.benefit-group { display: flex; align-items: center; flex: 0 0 auto; gap: 1.7cqw; padding-right: 1.7cqw; }
.benefit-track span { white-space: nowrap; }
.benefit-track i { flex: 0 0 .5cqw; width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--hero-accent); }
.benefit-strip:hover .benefit-track { animation-play-state: paused; }
@keyframes benefit-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.skip-link { position: fixed; z-index: 10; top: -80px; left: 20px; background: #fff; color: var(--color-ink); padding: 12px 20px; }
.skip-link:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.info-dialog { width: min(820px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.info-dialog::backdrop { background: rgba(3,13,18,.82); backdrop-filter: blur(7px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-left: 28px; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.dialog-close { width: 58px; height: 58px; border: 0; border-left: 1px solid var(--line); background: var(--hero-accent); font-size: 30px; }
.dialog-body { padding: clamp(24px, 5vw, 52px); }
.eyebrow { color: var(--color-ice); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.dialog-body h2 { font-size: clamp(25px, 3vw, 38px); text-transform: uppercase; line-height: 1.13; letter-spacing: -.05em; margin: 15px 0 28px; }
.dialog-body p { line-height: 1.6; }
.dialog-body > p:not(.eyebrow) { color: #d2dfe2; font-size: 18px; }
.text-link { display: inline-block; color: var(--color-ice); padding: 14px 0 5px; border-bottom: 1px solid var(--linework); }
.capability-list article { display: flex; align-items: baseline; gap: 20px; border-top: 1px solid var(--line); padding: 20px 0; }
.capability-list article > span { color: var(--hero-accent); font-size: 13px; }
.capability-list h3 { font-size: 17px; letter-spacing: -.035em; margin: 0 0 10px; }
.capability-list p { color: #d2dfe2; margin: 0; }
.contact-email, .contact-phone { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 22px 0; overflow-wrap: anywhere; font-size: clamp(16px, 2.6vw, 23px); }
.contact-email { margin-top: 30px; }
.contact-email span, .contact-phone span { color: var(--linework); }
/* White architectural sections continue below the full-viewport hero. */
.page-sections { --paper: #fafaf7; --paper-ink: #252c2e; --paper-muted: #686e6e; --paper-line: #c8cbc6; color: var(--paper-ink); background: var(--paper); padding: 9px; container-type: inline-size; }
.page-sections h2, .page-sections h3, .page-sections p { margin: 0; }
.page-sections a:focus-visible { outline-color: var(--color-orange); }
/* One model progressively completes beside four mutually exclusive panels. */
.value-section { height: 51cqw; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--paper-line); color: var(--color-ink); }
.value-illustration { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--paper-line); }
.value-model { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; transform: scale(var(--model-scale, 1)); transform-origin: 50% 100%; }
.model-skeleton { stroke: var(--color-ink); stroke-width: 1; stroke-linejoin: round; opacity: .5; transition: opacity 1.3s; }
.model-skeleton path { vector-effect: non-scaling-stroke; }
.model-skeleton.is-built { opacity: 0; }
.value-illustration.is-in-view .model-structure { animation: model-structure-draw 1.8s cubic-bezier(.22, 1, .36, 1) both; }
.model-layer { opacity: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.22, 1, .36, 1), opacity .7s; }
.model-layer-base { clip-path: inset(0 100% 0 0); }
.model-layer.is-built { opacity: 1; clip-path: inset(0); }
.model-complete-detail { opacity: 0; transition: opacity .45s; }
.model-coordination-line { stroke: var(--color-orange); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.8s ease; }
.model-detail-point { fill: var(--color-orange); }
.value-illustration[data-build-stage="4"] .model-complete-detail { opacity: .7; transition-delay: .9s; }
.value-illustration[data-build-stage="4"] .model-coordination-line { stroke-dashoffset: 0; transition-delay: .9s; }
.model-scan { opacity: 0; transition: opacity .4s; }
.value-illustration[data-build-stage="4"] .model-scan { opacity: 1; transition-delay: 1.1s; }
.model-scan-sweep { animation: model-scan 7s linear infinite; animation-play-state: paused; }
.value-illustration.is-in-view[data-build-stage="4"] .model-scan-sweep { animation-play-state: running; }
@keyframes model-structure-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes model-scan { 0%, 12% { transform: translateY(1080px); opacity: 0; } 18% { opacity: 1; } 80% { transform: translateY(0); opacity: 1; } 88%, 100% { transform: translateY(0); opacity: 0; } }
.value-markers { --issue-cycle: 3s; --issue-delay: 0s; position: absolute; inset: 0; }
.value-connectors { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--color-orange); stroke-width: 3; stroke-linejoin: miter; }
.value-connectors path { vector-effect: non-scaling-stroke; }
.value-connectors circle { fill: var(--color-orange); stroke: none; animation: issue-source-pulse var(--issue-cycle) linear var(--issue-delay) infinite; animation-play-state: paused; }
.value-connectors .issue-sheen { animation-play-state: paused; }
.value-callout { --sheen-from: -120%; --sheen-to: 220%; position: absolute; width: 21.8%; height: 9.2%; display: flex; flex-direction: column; justify-content: flex-end; gap: .21cqw; padding: .588cqw; overflow: hidden; background: var(--color-orange); color: white; font-family: var(--font-body); font-size: clamp(9px, .5712cqw, 12px); line-height: 1.2; font-weight: 500; text-transform: uppercase; }
.value-callout::after { content: ''; position: absolute; left: 0; top: -20%; width: 50%; height: 140%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent); pointer-events: none; animation: issue-box-sheen var(--issue-cycle) linear var(--issue-delay) infinite; animation-play-state: paused; }
.value-illustration.is-in-view .value-callout::after, .value-illustration.is-in-view .value-connectors :is(.issue-sheen, circle) { animation-play-state: running; }
.value-callout-code { font-size: clamp(9.5px, .6216cqw, 13px); font-weight: 700; line-height: 1.2; }
.value-callout p { margin: 0; font-weight: 500; }
.value-callout-top { left: 64.3%; top: 15.8%; }
.value-callout-left { --sheen-from: 220%; --sheen-to: -120%; left: 2.2%; top: 39.4%; }
.value-callout-bottom { left: 61.2%; top: 59%; }
.value-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.value-items { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.value-item { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 0 0 6.5cqw; min-height: 0; overflow: hidden; transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1), flex-basis .6s cubic-bezier(.22, 1, .36, 1); }
.value-item + .value-item { border-top: 1px solid var(--paper-line); }
.value-item.is-open { flex: 1 1 0; justify-content: center; }
.value-item h3 { flex: 0 0 auto; }
.value-trigger { width: 100%; min-height: 6.5cqw; padding: 0 6.5cqw 0 2.8cqw; display: flex; align-items: center; border: 0; background: transparent; color: inherit; text-align: left; font-family: var(--font-heading); font-size: 1.45cqw; line-height: 1.08; font-weight: 650; letter-spacing: -.04em; text-transform: uppercase; transition: font-size .6s cubic-bezier(.22, 1, .36, 1), padding .6s cubic-bezier(.22, 1, .36, 1), color .2s; }
.value-trigger em { color: var(--color-orange); font-style: normal; }
.value-trigger:hover { color: var(--color-orange); }
.value-trigger:focus-visible { outline-color: var(--color-orange); }
.value-trigger[aria-disabled="true"] { cursor: default; }
.value-item.is-open .value-trigger { min-height: 0; font-size: 2.4cqw; padding-top: 0; padding-right: 2.8cqw; }
.value-heading-label { position: relative; z-index: 1; }
.value-icon { position: absolute; top: 2.525cqw; right: 2.8cqw; width: 1.45cqw; height: 1.45cqw; fill: none; stroke: var(--color-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: width .65s cubic-bezier(.22, 1, .36, 1), height .65s cubic-bezier(.22, 1, .36, 1), top .65s cubic-bezier(.22, 1, .36, 1); }
.value-icon > * { vector-effect: non-scaling-stroke; }
.value-icon > :not(.value-icon-accent) { opacity: .65; transition: opacity .65s; }
.value-icon-accent { fill: var(--color-orange); stroke: none; opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .45s; }
.value-item.is-open .value-icon { top: 1.1cqw; width: 6.5cqw; height: 6.5cqw; }
.value-item.is-open .value-icon > :not(.value-icon-accent) { opacity: .13; }
.value-item.is-open .value-icon-accent { opacity: 1; transform: scale(1); transition-delay: .3s; }
.value-panel { padding: .95cqw 2.8cqw 2cqw; min-height: 0; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity .25s, transform .45s, visibility .25s; }
.value-item.is-open .value-panel { flex: 0 0 auto; padding-bottom: 0; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: .15s; }
.value-panel p { font-size: 1.15cqw; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; }
.value-more { display: inline-flex; align-items: center; min-height: 2.4cqw; margin-top: 2.6cqw; padding-left: 1.1cqw; gap: 1.15cqw; color: #fff; background: var(--color-orange); font-family: var(--font-heading); font-weight: 600; font-size: .82cqw; line-height: 1; letter-spacing: .025em; text-transform: uppercase; }
.value-more > span { position: relative; display: grid; place-items: center; align-self: stretch; width: 2.6cqw; background: var(--color-ink); }
.value-more > span svg { width: 1.1cqw; height: 1.1cqw; fill: none; stroke: var(--color-ice); stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; transition: transform .2s; }
.value-more:hover > span svg { transform: translateX(2px); }
.value-more:hover > span { background: var(--color-orange); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.value-marquee { display: flex; flex: 0 0 2cqw; min-height: 2cqw; min-width: 0; border-top: 1px solid var(--paper-line); color: var(--color-ink); overflow: hidden; }
.value-marquee-window { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
.value-marquee-track { display: flex; align-items: center; width: max-content; flex-shrink: 0; font-family: var(--font-heading); font-size: .7cqw; line-height: 1; font-weight: 650; text-transform: uppercase; animation: benefit-marquee 40s linear infinite; }
.value-marquee-group { display: flex; align-items: center; flex: 0 0 auto; gap: 1.5cqw; padding: 0 1.5cqw 0 0; margin: 0; list-style: none; }
.value-marquee-group li { display: flex; align-items: center; gap: 1.5cqw; white-space: nowrap; }
.value-marquee-group li::after { content: ''; display: block; width: .3cqw; height: .3cqw; border-radius: 50%; background: var(--color-orange); flex-shrink: 0; }
.value-marquee:hover .value-marquee-track, .value-marquee:focus-within .value-marquee-track { animation-play-state: paused; }
.value-marquee:focus-visible { outline: 1px solid var(--color-orange); outline-offset: -3px; }
/* Four equal service bays, following the supplied architectural layout. */
.services-section { color: var(--color-ink); border: 1px solid var(--paper-line); border-top: 0; }
.services-heading { display: grid; grid-template-columns: 65% 35%; align-items: center; min-height: 15.2cqw; padding: 3.8cqw 1.7cqw 2.8cqw; gap: 0; }
.services-eyebrow { color: var(--color-orange); font-family: var(--font-heading); font-size: .85cqw; font-weight: 700; line-height: 1; text-transform: uppercase; }
.services-heading h2 { margin-top: 1.25cqw; font-size: 3.35cqw; font-weight: 750; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.services-heading em { color: var(--color-orange); font-style: normal; }
.services-intro { padding: 1.2cqw 1cqw 0 2.6cqw; font-size: 1.38cqw; line-height: 1.2; font-weight: 500; }
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper-line); }
.service-card { --service-accent: var(--color-orange); --service-icon-fill: var(--paper); position: relative; min-width: 0; display: grid; grid-template-rows: 2.9cqw 21cqw 17.5cqw; color: var(--color-ink); background: var(--paper); transition: color .35s, background-color .35s; }
.service-card + .service-card { border-left: 1px solid var(--paper-line); }
.service-tag { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8cqw; padding: 0 1.05cqw; font-family: var(--font-heading); font-size: .99cqw; line-height: 1; font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; transition: background-color .35s, color .35s; }
.service-index { flex-shrink: 0; color: #8b9392; font-family: var(--font-body); font-size: .85cqw; font-weight: 400; letter-spacing: .04em; transition: opacity .2s; }
.service-active-marker { position: absolute; right: 1.2cqw; width: .72cqw; height: .72cqw; background: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s; }
.service-diagram { position: relative; display: grid; place-items: center; border-top: 1px dashed var(--paper-line); border-bottom: 1px dashed var(--paper-line); overflow: hidden; transition: border-color .35s; }
.service-diagram svg { width: 92%; height: 90%; stroke: #a8b0ad; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s, transform .7s cubic-bezier(.22, 1, .36, 1); }
.service-diagram svg * { vector-effect: non-scaling-stroke; }
.service-construction { stroke-dasharray: 10 4 2 4; opacity: .3; }
.service-hidden { stroke-dasharray: 8 4 2 4; opacity: .45; }
.service-shape { opacity: .8; }
.service-icon-accent { stroke: var(--service-accent); stroke-width: 1.3; transition: stroke .35s; }
.service-icon-node { fill: var(--service-accent); stroke: none; transition: fill .35s; }
.service-icon-ring { fill: var(--service-icon-fill); transition: fill .35s; }
.service-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 1.7cqw 1.7cqw 4.8cqw; }
.service-copy h3 { font-size: 1.69cqw; font-weight: 750; line-height: .97; letter-spacing: -.035em; text-transform: uppercase; }
.service-copy h3 > span { display: block; white-space: nowrap; }
.service-copy h3 em { color: var(--service-accent); font-style: normal; transition: color .35s; }
.service-copy p { margin-top: auto; padding-top: 2cqw; font-size: 1.02cqw; line-height: 1.22; font-weight: 400; }
.service-copy p > span { display: block; white-space: nowrap; }
.service-card.is-active { background: var(--surface); color: #fff; }
.service-card.is-active .service-tag { background: var(--color-orange); color: #fff; }
.service-card.is-active .service-index { opacity: 0; }
.service-card.is-active .service-active-marker { opacity: 1; transform: scale(1); }
.service-card.is-active .service-diagram { border-color: transparent; }
.service-card.is-active .service-diagram svg { stroke: color-mix(in srgb, var(--color-ice) 62%, transparent); transform: translateY(-3px); }
.service-card.is-active .service-copy p { color: #dbe6ea; }
.service-card:focus-visible { z-index: 1; outline: 2px solid var(--color-orange); outline-offset: -4px; }
.services-section-dark { --paper: var(--surface); --paper-line: color-mix(in srgb, var(--color-ice) 30%, transparent); background: var(--surface); color: var(--text); }
.services-section-dark .service-card { color: var(--text); }
.services-section-dark .service-index { color: color-mix(in srgb, var(--color-ice) 65%, transparent); }
.services-section-dark .service-diagram svg { stroke: #fff; }
.services-section-dark .service-copy p { color: var(--text); }
.services-section-dark .service-card.is-active { --service-accent: #fff; --service-icon-fill: var(--color-orange); background: var(--color-orange); color: #fff; }
.services-section-dark .service-card.is-active .service-diagram { border-color: rgb(255 255 255 / .25); }
.services-section-dark .service-card.is-active .service-diagram svg { stroke: #fff; }
.services-section-dark .service-card.is-active .service-copy p { color: #fff; }
@media (max-width: 760px) {
  .services-heading { grid-template-columns: 1fr; gap: 24px; padding: 38px 20px 32px; }
  .services-eyebrow { font-size: 11px; }
  .services-heading h2 { margin-top: 16px; font-size: clamp(25px, 5cqw, 38px); }
  .services-intro { max-width: 580px; padding: 0; font-size: 17px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { grid-template-rows: 52px 34cqw auto; }
  .service-card:nth-child(3) { border-left: 0; }
  .service-card:nth-child(n+3) { border-top: 1px solid var(--paper-line); }
  .service-tag { padding: 0 14px; gap: 6px; font-size: 10px; }
  .service-index { font-size: 10px; }
  .service-active-marker { width: 7px; height: 7px; right: 14px; }
  .service-copy { min-height: 210px; padding: 22px 16px; }
  .service-copy h3 { font-size: clamp(17px, 3.1cqw, 24px); }
  .service-copy p { padding-top: 24px; font-size: 14px; }
  .service-copy p > span { display: inline; white-space: normal; }
}
@media (max-width: 420px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { grid-template-rows: 44px 70cqw auto; }
  .service-card + .service-card { border-left: 0; border-top: 1px solid var(--paper-line); }
  .service-tag { font-size: 12px; }
  .service-copy { min-height: 205px; padding: 22px; }
  .service-copy h3 { font-size: 25px; }
  .service-copy p { font-size: 16px; }
}
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  .model-artwork { inset: 24px 12px; }
  .stage-guides { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
  .building-elevation { width: calc(100% - 44px); max-height: max(32px, calc(100% - 126px)); }
  .issue-callout { width: calc(50% - 28px); min-height: 52px; padding: 10px 8px; gap: 3px; font-size: clamp(8.5px, 2.05cqw, 10.25px); }
  .issue-code { font-size: clamp(8.5px, 2cqw, 10px); }
  .building-issues { --issue-delay: .7s; }
  .building-issues [data-mobile-phase] { opacity: 0; animation: mobile-issue-scene 18s ease-in-out var(--mobile-phase-delay, 0s) infinite; }
  .building-issues [data-mobile-phase="1"] { --mobile-phase-delay: -12s; }
  .building-issues [data-mobile-phase="2"] { --mobile-phase-delay: -6s; }
  .issue-callout { pointer-events: none; }
  .issue-sanitary p { font-size: inherit; letter-spacing: normal; white-space: normal; }
  .issue-floor { left: 14px; top: 18px; }
  .issue-clearance { left: 14px; right: auto; top: 18px; }
  .issue-sanitary { left: auto; right: 14px; top: 18px; }
  .issue-guardrail { right: 14px; top: 18px; }
  .issue-handrails { left: 14px; top: 18px; }
  .site-header { height: 84px; }
  .brand { flex: 1; padding: 12px 16px; }
  .brand img { width: 166px; }
  .desktop-nav, .analysis-cta { display: none; }
  .menu-toggle { width: 68px; border: 0; border-left: 1px solid var(--line); background: var(--hero-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
  .menu-toggle span { width: 24px; height: 1px; background: var(--linework); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav:not([hidden]) { position: absolute; top: 84px; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-nav a { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; font-weight: 700; padding: 20px 16px; border-bottom: 1px solid color-mix(in srgb, var(--linework) 20%, transparent); }
  .mobile-nav a:nth-child(odd) { border-right: 1px solid var(--line); }
  .hero-message { display: block; }
  .headline-cell { padding: 28px 18px; }
  h1 { font-size: 5.55cqw; line-height: 1.04; }
  .hero-detail { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 106px; grid-template-rows: 1fr 33px; }
  .hero-intro { padding: 20px 18px; }
  .hero-intro p { font-size: 15px; line-height: 1.45; }
  .talk-cta { font-size: 10px; gap: 7px; }
  .benefit-window { padding-left: 12px; }
  .benefit-track { font-size: 9px; }
  .benefit-group { gap: 20px; padding-right: 20px; }
  .benefit-track i { width: 5px; height: 5px; flex-basis: 5px; }
}
@media (max-width: 760px) and (max-height: 700px), (max-width: 960px) and (max-height: 500px) {
  .site-header { height: 70px; }
  .brand { padding: 8px 14px; }
  .menu-toggle { width: 56px; }
  .mobile-nav:not([hidden]) { top: 70px; }
  .headline-cell { padding: 18px 14px; }
  .hero-detail { grid-template-columns: 1fr 90px; }
  .hero-intro { padding: 12px 14px; }
  .hero-intro p { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 760px) and (orientation: landscape), (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .site-header { height: 60px; }
  .brand { padding: 7px 12px; }
  .brand img { width: 132px; }
  .menu-toggle { width: 50px; }
  .mobile-nav:not([hidden]) { top: 60px; }
  .hero-message { display: grid; grid-template-columns: 59% 41%; }
  .headline-cell { padding: 12px 16px; }
  h1 { font-size: 3.38cqw; line-height: .9; }
  .hero-detail { border-top: 0; border-left: 1px solid var(--line); grid-template-columns: 72% 28%; grid-template-rows: 1fr 22px; }
  .hero-intro { padding: 10px; }
  .hero-intro p { font-size: 10px; line-height: 1.2; }
  .talk-cta { font-size: 8px; gap: 4px; }
  .building-elevation { width: 66.4%; max-height: 72%; }
  .issue-callout { padding: 6px; min-height: 34px; gap: 2px; font-size: 7px; }
  .issue-code { font-size: 7px; }
  .issue-floor { left: 1.5%; top: 35.57%; width: 17%; }
  .issue-clearance { left: 33.06%; right: auto; width: 17%; }
  .issue-sanitary { left: auto; right: 1.5%; top: 47.46%; width: 19%; }
  .issue-handrails { left: 1.5%; top: 80.14%; width: 16%; }
  .issue-guardrail { right: 1.5%; top: 69.51%; width: 19%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .benefit-track { animation: none; }
  .benefit-group[aria-hidden="true"] { display: none; }
  .benefit-window { overflow-x: auto; scrollbar-width: none; }
  .value-marquee-track { animation: none; }
  .value-marquee-group[aria-hidden="true"] { display: none; }
  .value-marquee-window { overflow-x: auto; scrollbar-width: none; }
  .value-illustration.is-in-view .model-structure { animation: none; }
  .model-scan, .value-callout::after { display: none; animation: none; }
  .model-scan-sweep { animation: none; }
  .value-connectors circle { animation: none; }
  .guide-lines { animation: none; }
  .building-glimmer { display: none; }
  .building-glimmer span { animation: none; }
  .issue-connectors circle { animation: none; }
  .issue-sheen, .issue-callout::after { display: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px), (prefers-reduced-motion: reduce) and (max-width: 960px) and (max-height: 500px) {
  .building-issues [data-mobile-phase] { animation: none; opacity: 0; }
  .building-issues [data-mobile-phase="0"] { opacity: 1; }
}