@font-face {
  font-family: Outfit;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --dark: #080808;
  --dark-soft: #14110f;
  --surface: #14100e;
  --white: #f3e9dd;
  --muted: #b5a494;
  --orange: #cf6b32;
  --orange-deep: #9d481f;
  --font-body: Inter, Arial, sans-serif;
  --font-display: Outfit, Arial, sans-serif;
  --font-editorial: Georgia, 'Times New Roman', serif;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --page-gutter: 56px;
  --page-safe-gutter: max(var(--page-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --page-inline-space: calc(var(--page-safe-gutter) * 2);
  --header-content-height: 91px;
  --header-height: calc(var(--header-content-height) + var(--safe-area-top));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--dark); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--white); background: var(--dark); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
body, main { overflow-x: clip; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible { outline: 2px solid #e39a60; outline-offset: 6px; }
::selection { color: #1a100b; background: #c26530; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
em { font-weight: 400; }
section[id], article[id] { scroll-margin-top: calc(var(--header-height) + 20px); }
.page-width { width: min(calc(100% - var(--page-inline-space)), 1440px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: calc(12px + var(--safe-area-top)); left: max(16px, var(--page-safe-gutter)); padding: 10px 20px; background: var(--white); color: var(--dark); border-radius: 3px; transform: translateY(calc(-100% - 24px - var(--safe-area-top))); }
.skip-link:focus { transform: translateY(0); }

/* A quiet frame around a deliberately larger composition */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-height); padding-top: var(--safe-area-top); transition: background .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(8, 8, 8, .94); border-color: rgba(184, 113, 60, .15); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand-symbol { width: 35px; height: 40px; color: #d6b99c; }
.brand-emblem { object-fit: contain; }
.brand-name { font: 500 18px/1.15 var(--font-display); letter-spacing: .055em; }
.brand-name > span { font-size: 10px; letter-spacing: .09em; margin-left: 3px; }
.brand-name small { display: block; font: 400 8px/1.5 var(--font-body); letter-spacing: .24em; color: #b5a494; margin-top: 7px; }
.desktop-nav { display: flex; flex: 1 1 auto; min-width: 0; gap: 3px; align-items: center; margin: 0 12px 0 auto; padding: 6px 2px; overflow-x: auto; overscroll-behavior-inline: contain; white-space: nowrap; scrollbar-width: thin; scrollbar-color: #8f623e #15110e; scroll-padding-inline: 3px; }
.desktop-nav::-webkit-scrollbar { height: 4px; }
.desktop-nav::-webkit-scrollbar-thumb { background: #8f623e; border-radius: 2px; }
.desktop-nav .nav-item { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #bcae9f; font: 400 11px/1.35 var(--font-body); white-space: nowrap; text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.desktop-nav .nav-item:first-child { margin-left: auto; }
.desktop-nav .nav-item:last-child { margin-right: auto; }
.desktop-nav .nav-item::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 1px; background: linear-gradient(90deg, #a96b3b, #f0c28b 55%, #98613b); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; pointer-events: none; }
.desktop-nav a:hover, .desktop-nav .nav-item:enabled:hover, .desktop-nav .nav-item:focus-visible { color: #ffe0ba; border-color: #a8744545; background: #6c3d1d1c; }
.desktop-nav a:hover::after, .desktop-nav .nav-item:enabled:hover::after, .desktop-nav .nav-item:focus-visible::after, .desktop-nav a[aria-current='location']::after { transform: scaleX(1); }
.desktop-nav a[aria-current='location'] { color: #f6d3aa; border-color: #9c6b3f66; background: linear-gradient(135deg, #6f3e232c, #20140d22); box-shadow: inset 0 1px 0 #e6ae7624; }
.desktop-nav .nav-item:focus-visible { outline-offset: -3px; }
.desktop-nav .nav-item:disabled { cursor: default; color: #ab9783; border-color: #8f69432e; border-style: dashed; opacity: 1; -webkit-text-fill-color: currentColor; }
.header-contact { flex-shrink: 0; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid #735238; border-radius: 3px; padding: 10px 16px; min-height: 44px; transition: background .25s ease, color .25s ease; white-space: nowrap; }
.header-contact > span { font-size: 19px; line-height: 1; }
.header-contact:hover { background: #3a1d10; color: #ffe0b9; border-color: #c57a43; }
.reading-progress { position: absolute; height: 1px; bottom: -1px; left: 0; right: 0; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: #d77736; transform: scaleX(0); transform-origin: left; opacity: .5; }

/* Opening, black titanium, copper edges and controlled amber light */
.hero { position: relative; isolation: isolate; background: radial-gradient(ellipse at 78% 49%, rgba(151, 65, 23, .16), transparent 48%), var(--dark); }
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(transparent, var(--dark)); z-index: -1; pointer-events: none; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .16; background-image: linear-gradient(#b7754216 1px, transparent 1px), linear-gradient(90deg, #b7754216 1px, transparent 1px); background-size: 84px 84px; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent 10%, #000 70%, transparent); }
.hero-layout { position: relative; display: grid; grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr); gap: 0 44px; align-items: start; width: min(1600px, calc(100% - var(--page-inline-space))); padding-top: calc(clamp(104px, calc(8vw - 22px), 138px) + var(--safe-area-top)); min-height: min(1080px, 100svh); }
.hero-copy { position: relative; z-index: 3; isolation: isolate; width: 100%; max-width: 430px; padding: 42px 0 26px; }
.eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .19em; line-height: 1.7; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; color: #c3b09a; margin-bottom: 28px; }
.small-rule { display: inline-block; width: 25px; height: 1px; flex: 0 0 auto; background: #cb763f; }
h1 { font: 400 clamp(54px, 4.6vw, 74px)/1.025 var(--font-display); letter-spacing: -.052em; }
h1 em { display: inline-block; font-family: var(--font-editorial); letter-spacing: -.065em; line-height: 1.08; color: #d4b08c; }
/* Editorial company introduction, independent of the building's perspective scene */
.hero-ambient { position: absolute; z-index: -1; inset: -48px -70px -26px -52px; pointer-events: none; opacity: .65; background: radial-gradient(ellipse at 35% 58%, #a55c3020, transparent 58%), radial-gradient(ellipse at 65% 24%, #c68c5010, transparent 46%); }
.hero-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: #c89b73; font: 500 9px/22px var(--font-body); letter-spacing: .21em; }
.hero-identity-detail { display: grid; align-content: center; gap: 3px; width: 22px; height: 22px; flex: 0 0 22px; }
.hero-identity-detail i { display: block; height: 3px; border: 1px solid #c2915e9c; background: #9d603c1c; transform: skewY(-14deg); }
.hero-identity-detail i:nth-child(2) { margin-inline: 3px 0; }
.hero-identity-detail i:nth-child(3) { margin-inline: 6px 0; }
.hero-identity-rule { width: 62px; height: 1px; margin-left: 4px; flex: 0 1 62px; background: linear-gradient(90deg, #b67c4e88, transparent); }
.hero-title { position: relative; letter-spacing: -.055em; }
.hero-title .hero-title-line { display: block; }
.hero-title-lead { font-weight: 500; color: #f5eee5; text-shadow: 0 1px 0 #fff1; }
.hero-title .hero-title-accent { color: #d8ac81; text-shadow: 0 2px 22px #a56a3521; }
.hero-message { position: relative; max-width: 390px; margin: 30px 0 0 26px; padding: 0; border-left: 1px solid #9b684b66; }
.hero-themes { display: grid; gap: 16px; }
.hero-theme { position: relative; min-width: 0; padding-left: 20px; }
.hero-theme::before { content: ''; position: absolute; left: -3px; top: 6px; width: 5px; height: 5px; background: #c18d61; box-shadow: 0 0 12px #bc78432e; }
.hero-theme-title { margin: 0; color: #ead7c2; font: 500 12.5px/1.4 var(--font-body); letter-spacing: .025em; }
.hero-theme-description { margin: 5px 0 0; color: #bba997; font-size: 12px; font-weight: 350; line-height: 1.65; letter-spacing: .005em; }
.hero-theme-description > span { display: block; white-space: nowrap; }
.hero-conduit { display: block; width: calc(100% + 44px); max-width: none; height: 38px; margin: 22px 0 0 26px; overflow: visible; pointer-events: none; }
.hero-conduit-track { stroke: #9b633e6e; stroke-width: 1; }
.hero-conduit-signal { stroke: url(#hero-conduit-copper); stroke-width: 1.5; stroke-dasharray: 70 930; stroke-dashoffset: 1000; opacity: 0; }
.hero-conduit-terminal { fill: #1c140d; stroke: #bd956b8f; stroke-width: 1; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-title .hero-title-accent { background: linear-gradient(112deg, #b67e55, #eed1ad 34%, #cc976d 60%, #deb58d); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero-description { max-width: 460px; color: #b9ab9d; font-size: 15px; line-height: 1.85; letter-spacing: -.01em; margin-top: 30px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; padding: 14px 20px; text-decoration: none; font-size: 12px; font-weight: 500; border-radius: 3px; transition: background .25s ease, transform .25s ease; }
.button-primary { color: #fff0dd; border: 1px solid #dc905b55; background: linear-gradient(125deg, #ad4d20, #793015); box-shadow: inset 0 1px 0 #efb17c24, 0 8px 28px #00000038; }
.button-primary:hover { transform: translateY(-2px); background: linear-gradient(125deg, #bf5d29, #93401c); box-shadow: inset 0 1px 0 #ffd2a344, 0 10px 28px #a74e1829; }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; text-decoration: none; font-size: 11px; color: #d1bda6; }
.text-link > span { font-size: 17px; transition: transform .25s ease; }
.text-link:hover > span { transform: translate(2px, -2px); }
.hero-signature { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.signature-label { font-size: 7px; letter-spacing: .16em; line-height: 1.7; color: #a9917b; max-width: 55px; }
.ecp360 { display: inline-flex; align-items: center; font: 400 25px/1 var(--font-display); letter-spacing: -.055em; }
.ecp360 > span { color: #d58d58; font-weight: 500; }
.ecp360 i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #d47b3d; margin: -13px 0 0 3px; }
.signature-line { height: 31px; width: 1px; background: #aa693d40; margin-inline: 2px; }
.signature-description { font-size: 9px; color: #ae9883; line-height: 1.65; }
.hero-art { position: relative; margin: 0; align-self: start; min-width: 0; }
.service-house { width: calc(100% + 24px); margin-right: -24px; padding-top: 0; justify-self: end; }
.building-layout { position: relative; display: block; }
.building-view { position: relative; width: 100%; max-width: 620px; margin-inline: auto 0; }
.art-glow { position: absolute; inset: 5% -8% 4%; background: radial-gradient(ellipse at 55% 46%, #c4742222, transparent 65%); pointer-events: none; }
.sculpture-stage { position: relative; }
.hero-sculpture { display: block; width: 100%; height: auto; user-select: none; }
.sculpture-space { position: absolute; inset: 0; display: none; perspective: 1600px; perspective-origin: 50% 50%; pointer-events: none; }
.sculpture-ready .sculpture-space { display: block; }
.sculpture-ready .hero-sculpture { visibility: hidden; }
.sculpture-camera { position: absolute; width: 560px; height: 1000px; left: 50%; top: 50%; margin: -500px 0 0 -280px; transform: scale(var(--scene-scale, 1)); transform-style: preserve-3d; }
.sculpture-assembly { position: absolute; inset: 0; transform-style: preserve-3d; }
.sculpture-world { position: absolute; left: 50%; top: 82%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(72deg) rotateZ(24deg); }
.sculpture-solid, .building-floor { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.sculpture-solid { transform: translate3d(var(--x), var(--y), var(--z)); }
.solid-face { position: absolute; left: 0; top: 0; backface-visibility: hidden; border: .65px solid #5e4935; }
.solid-top, .solid-bottom { width: var(--w); height: var(--h); transform: translate(-50%, -50%) translateZ(var(--half-d)); }
.solid-bottom { transform: translate(-50%, -50%) rotateX(180deg) translateZ(var(--half-d)); background: #090909; }
.solid-front, .solid-back { width: var(--w); height: var(--d); }
.solid-front { transform: translate(-50%, -50%) translateY(var(--half-h)) rotateX(-90deg); background: linear-gradient(0deg, #100d0b, #34271e 47%, #17110e 80%, #b17a50); }
.solid-back { transform: translate(-50%, -50%) translateY(calc(0px - var(--half-h))) rotateX(90deg); background: linear-gradient(0deg, #18120e, #2e251e 70%, #9f7859); }
.solid-right, .solid-left { width: var(--d); height: var(--h); }
.solid-right { transform: translate(-50%, -50%) translateX(var(--half-w)) rotateY(90deg); background: linear-gradient(90deg, #a66a42, #3d2b1f 15%, #15110e 65%, #6f482e); }
.solid-left { transform: translate(-50%, -50%) translateX(calc(0px - var(--half-w))) rotateY(-90deg); background: linear-gradient(90deg, #15110e, #4a3525 70%, #c2946d); }
.solid-top { background: linear-gradient(128deg, #39332d, #857467 2%, #2b2723 4%, #514133 24%, #201c18 47%, #0e0d0c 70%, #6c4a32 97%, #d4a77d); box-shadow: inset 0 0 0 1px #ebbb8b44; }
.sculpture-plinth .solid-top { background: repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 4px), linear-gradient(125deg, #413b34, #151310 46%, #302319); box-shadow: inset 0 0 0 1px #9b7652, inset 0 0 0 8px #191612, inset 0 0 0 9px #b277434d, inset 0 0 32px #000; }
.sculpture-plinth .solid-front, .sculpture-plinth .solid-right { border-color: #725135; background-image: repeating-linear-gradient(0deg, #080808 0 4px, #68472d 4px 5px, #16120e 5px 7px); }
.sculpture-copper .solid-top { background: linear-gradient(110deg, #7c3e1b, #ffe0b1 25%, #b26a38 48%, #4b2411 80%, #c48c5a); }
.building-floor { --room-light: #926641; --pull-x: 0px; --pull-y: 0px; transform: translate3d(var(--pull-x), var(--pull-y), var(--floor-z)); transition: transform .36s cubic-bezier(.2,.65,.3,1); }
.building-floor.is-selected { --room-light: #ffd39b; --pull-x: 28px; --pull-y: 112px; transition-duration: .6s; }
.floor-interior { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.floor-interior .solid-face { transition: border-color .35s ease, box-shadow .35s ease; }
.building-floor.is-selected .floor-interior .solid-face { border-color: #e5b984; }
.building-floor.is-selected .sculpture-display .solid-front { background: linear-gradient(135deg, #b96c3938, #ffe2b147 48%, #2e1a0c), repeating-linear-gradient(90deg, #0000 0 11px, #daa56644 11px 12px); box-shadow: inset 0 0 17px #e8a65055; }
.building-floor.is-selected .sculpture-console .solid-top { box-shadow: inset 0 0 0 1px #efc28a88, inset 0 0 16px #d08c3b33; }
.motion-paused .building-floor { transition: none; }
.sculpture-deck .solid-top { background: repeating-linear-gradient(90deg, transparent 0 28px, #c28b4c0d 28px 29px), linear-gradient(135deg, #2d2823, #0e0e0d 65%, #3a281a); box-shadow: inset 0 0 0 1px #c08d5a88, inset 0 0 0 6px #11100e, inset 0 0 0 7px #a4713e44; }
.sculpture-deck .solid-front { background: linear-gradient(0deg, #0b0908, #2b1c12 65%, var(--room-light)); border-color: #a36d3e; }
.sculpture-deck .solid-right { background: linear-gradient(90deg, var(--room-light), #382519 16%, #0f0d0a 65%, #7c4c28); }
.building-floor.is-selected .sculpture-deck .solid-top { box-shadow: inset 0 0 0 1px #e7b77d, inset 0 0 0 6px #26180f, inset 0 0 0 7px #e8a76088, inset 0 0 30px #c0752322; }
.room-back { position: absolute; width: 300px; height: var(--room-back-height, 54px); margin: calc(0px - var(--room-back-half-height, 27px)) 0 0 -150px; transform: translate3d(0, -94px, var(--room-back-z, 36px)) rotateX(-90deg); border: 1px solid #b4865d55; background: linear-gradient(110deg, #f6c99312, #70462205 35%, #ffc78c15), repeating-linear-gradient(90deg, transparent 0 45px, #d6a77422 45px 46px); backface-visibility: hidden; }
.building-floor.is-selected .room-back { border-color: #e8b77d99; background: linear-gradient(110deg, #f6c99329, #7046220c 35%, #ffc78c33), repeating-linear-gradient(90deg, transparent 0 45px, #d6a77444 45px 46px); }
.room-back::before { content: attr(data-room-label); position: absolute; right: 8px; top: 6px; color: #cba577; font-size: 6px; letter-spacing: .19em; }
.sculpture-signal .solid-face { background: var(--room-light); border-color: #e5ad6a77; }
.sculpture-display .solid-front { background: linear-gradient(135deg, #9c542629, #ffd09b24 48%, #19120b), repeating-linear-gradient(90deg, #0000 0 11px, #b27e4b33 11px 12px); border-color: var(--room-light); box-shadow: inset 0 0 12px #d98a3c33; }
.sculpture-display .solid-top, .sculpture-display .solid-right { background: #b28150; }
.sculpture-console .solid-top { background: repeating-linear-gradient(90deg, transparent 0 9px, #ac774622 9px 10px), linear-gradient(135deg, #b3956f, #211b14 8%, #171410 70%, #9f6940); }
/* Cloud equipment, photographed surfaces and matte hardware, no wireframe outlines */
.cloud-room .solid-face { background: #18212a; border: 0; }
.cloud-room .solid-bottom { background: #080d12; }
.cloud-room .sculpture-cloud-aisle .solid-top { background: linear-gradient(#1018204d, #1018204d), url('../images/cloud/raised-floor.jpg') center / 100% 100% no-repeat, linear-gradient(90deg, #647680, #8d9ba3 48%, #647680); box-shadow: none; }
.cloud-room .sculpture-cloud-guide .solid-face { background: #627984; }
.cloud-room .sculpture-cloud-guide .solid-top { background: #8ca0a9; box-shadow: none; }
.cloud-room .sculpture-cloud-link .solid-face { background: #203138; }
.cloud-room .sculpture-cloud-link .solid-top { background: repeating-linear-gradient(90deg, #20373b 0 9px, #487b80 9px 12px, #20373b 12px 19px); background-size: 38px 100%; }
.building-floor.is-selected .cloud-room .sculpture-cloud-link .solid-top { animation: cloud-floor-data 3.8s linear infinite; }
.cloud-room .sculpture-cloud-rack .solid-front { background: linear-gradient(100deg, #17212a14, transparent 25%, #03070c2b), url('../images/cloud/rack-front.jpg') center / 100% 100% no-repeat, repeating-linear-gradient(0deg, #10171f 0 5px, #50636e 5px 6px, #26313b 6px 8px); box-shadow: inset 0 0 4px #02050844; }
.cloud-room .sculpture-cloud-rack .solid-top { background: linear-gradient(130deg, #18232e10, #00000033), url('../images/cloud/rack-top.jpg') center / 100% 100% no-repeat, repeating-linear-gradient(90deg, #18232c 0 3px, #526875 3px 4px); box-shadow: none; }
.cloud-room .sculpture-cloud-rack .solid-right, .cloud-room .sculpture-cloud-rack .solid-left, .cloud-room .sculpture-cloud-rack .solid-back { background: linear-gradient(100deg, #26394510, #00000040), url('../images/cloud/rack-side.jpg') center / 100% 100% no-repeat, linear-gradient(100deg, #374b58, #131d27 72%, #4d6574); box-shadow: none; }
.cloud-room .sculpture-cloud-vault .solid-face { background: linear-gradient(110deg, #6d9eb312, #142a3610 60%, #a2cad818); }
.cloud-room .sculpture-cloud-vault .solid-top { background: linear-gradient(125deg, #a8cadb20, #42657512 45%, #8bb5c526); box-shadow: none; }
.cloud-room .sculpture-cloud-vault .solid-front { background: linear-gradient(110deg, #aac9d51a, #ffffff02 42%, #5a879b1c 48%, #bad9e322 52%, #668d9e0d 62%); box-shadow: inset .5px 0 0 #52677455, inset -.5px 0 0 #52677433; }
.cloud-room .sculpture-cloud-blade .solid-top { background: repeating-linear-gradient(90deg, transparent 0 4px, #0f1c2733 4px 5px), linear-gradient(125deg, #7a8e9c, #445967 8%, #344654 70%, #657e90); }
.cloud-room .sculpture-cloud-blade .solid-front { background: linear-gradient(#08121a22, #08121a22), url('../images/cloud/storage-front.jpg') center / 100% 100% no-repeat, linear-gradient(90deg, #7f97a7 0 15%, #233541 15% 68%, #4b9a8c 68% 78%, #7a909f 78%); }
.cloud-room .sculpture-cloud-frame .solid-face, .cloud-room .sculpture-cloud-cable .solid-face { background: linear-gradient(90deg, #3e4b54, #81939e 28%, #657c8b 45%, #344753 78%, #6d8391); }
.cloud-room .sculpture-cloud-cable .solid-top { background: repeating-linear-gradient(90deg, #718795 0 2px, #405767 2px 3px); }
.cloud-room .sculpture-cloud-patch-blue .solid-face { background: #386993; }
.cloud-room .sculpture-cloud-patch-teal .solid-face { background: #447d77; }
.cloud-room .sculpture-cloud-hub .solid-top { background: linear-gradient(125deg, #7e929e, #344653); }
.cloud-room .sculpture-cloud-hub .solid-front { background: repeating-linear-gradient(90deg, #111f2a 0 3px, #587483 3px 4px); box-shadow: none; }
.cloud-room .sculpture-cloud-hub .solid-front::after { content: ''; position: absolute; left: 3px; top: 4px; width: 1px; height: 1px; background: #66b99f; box-shadow: 5px 0 0 #6c9fbc, 10px 0 0 #66b99f, 15px 0 0 #6c9fbc; }
.cloud-room .sculpture-cloud-console .solid-top { background: repeating-linear-gradient(90deg, transparent 0 3px, #8a9da322 3px 4px) center 12px / 30px 7px no-repeat, repeating-linear-gradient(0deg, #15232a 0 2px, #3f5663 2px 3px) center 12px / 30px 7px no-repeat, linear-gradient(125deg, #768a96, #3b4b56 8%, #566a77 70%, #2a3943); box-shadow: none; }
.cloud-room .sculpture-cloud-console .solid-front { background: linear-gradient(0deg, #283a47, #566c7b 70%, #738b9a); }
.cloud-room .sculpture-cloud-terminal .solid-front { background: url('../images/cloud/monitor.jpg') center / 100% 100% no-repeat, repeating-linear-gradient(0deg, #0b1927 0 4px, #2e6374 4px 5px); box-shadow: inset 0 0 0 .7px #0a1017; }
.cloud-room .sculpture-cloud-terminal .solid-top, .cloud-room .sculpture-cloud-terminal .solid-right, .cloud-room .sculpture-cloud-terminal .solid-left, .cloud-room .sculpture-cloud-terminal .solid-back { background: linear-gradient(100deg, #3b4c58, #131c24 65%, #435d6d); }
/* Project the room into its actual cavity, never share the roof's 3D depth buffer */
.floor-interior.cloud-room { transform: none; }
.has-cloud-room-media > .floor-interior, .has-cloud-room-media > .room-back { visibility: hidden; }
.cloud-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.cloud-room-occlusion, .cloud-room-opening { position: absolute; inset: 0; pointer-events: none; }
.cloud-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.cloud-room-poster, .cloud-room-video { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor02 media, no accepted Cloud selector or material is changed */
.has-ai-room-media > .floor-interior, .has-ai-room-media > .room-back { visibility: hidden; }
.ai-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.ai-room-occlusion, .ai-room-opening { position: absolute; inset: 0; pointer-events: none; }
.ai-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.ai-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor03 media, both accepted floor materials remain unchanged */
.has-voice-room-media > .floor-interior, .has-voice-room-media > .room-back { visibility: hidden; }
.voice-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.voice-room-occlusion, .voice-room-opening { position: absolute; inset: 0; pointer-events: none; }
.voice-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.voice-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor04 media, all three accepted rooms keep their selectors and materials */
.has-vpn-room-media > .floor-interior, .has-vpn-room-media > .room-back { visibility: hidden; }
.vpn-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.vpn-room-occlusion, .vpn-room-opening { position: absolute; inset: 0; pointer-events: none; }
.vpn-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.vpn-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor05 media, all four accepted rooms retain their selectors and materials */
.has-marketing-room-media > .floor-interior, .has-marketing-room-media > .room-back { visibility: hidden; }
.marketing-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.marketing-room-occlusion, .marketing-room-opening { position: absolute; inset: 0; pointer-events: none; }
.marketing-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.marketing-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor06 media, all five accepted rooms retain their selectors and materials */
.has-content-room-media > .floor-interior, .has-content-room-media > .room-back { visibility: hidden; }
.content-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.content-room-occlusion, .content-room-opening { position: absolute; inset: 0; pointer-events: none; }
.content-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.content-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Independent Floor07 media, all six accepted rooms retain their selectors and materials */
.has-agents-room-media > .floor-interior, .has-agents-room-media > .room-back { visibility: hidden; }
.agents-room-projection { position: absolute; inset: 0; z-index: 1; visibility: hidden; pointer-events: none; }
.agents-room-occlusion, .agents-room-opening { position: absolute; inset: 0; pointer-events: none; }
.agents-room-surface { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.agents-room-source { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.room-shield { position: absolute; width: 44px; height: 36px; margin: -18px 0 0 -22px; transform: translate3d(0, 26px, 28px) rotateX(-90deg); clip-path: polygon(50% 0, 95% 17%, 87% 69%, 50% 100%, 13% 69%, 5% 17%); background: linear-gradient(115deg, #5f351b, #efbf7e 48%, #59351d); }
.room-shield::after { content: ''; position: absolute; inset: 8px 13px 12px; border: 2px solid #17100b; border-radius: 7px 7px 2px 2px; }
.sculpture-shadow { position: absolute; width: 490px; height: 350px; left: -245px; top: -175px; transform: translateZ(-35px); background: radial-gradient(ellipse, #000000b8 22%, #00000055 43%, transparent 68%); }
.sculpture-lens { position: absolute; pointer-events: none; inset: 0; background: radial-gradient(ellipse at 65% 30%, #f0b8790b, transparent 38%); }
.building-ground { display: block; text-align: center; margin-top: -13px; color: #ad8a68; font-size: 6px; letter-spacing: .18em; line-height: 1.8; }
/* Foreground controls stay outside the perspective scene and its media masks */
.service-directory { position: absolute; z-index: 5; top: clamp(196px, 18vw, 260px); left: clamp(-88px, calc(220px - 20vw), 0px); min-width: 0; width: clamp(264px, 22vw, 320px); padding: 18px; border: 1px solid #a778484d; border-top-color: #d29c6466; border-radius: 3px; background: radial-gradient(ellipse at 0 0, #97572c1a, transparent 65%), linear-gradient(140deg, #211810f5, #0c0b0af5 64%); box-shadow: 0 22px 54px #0009, inset 0 1px 0 #e3b38329, inset 0 0 28px #0004; scroll-margin-top: calc(var(--header-height) + 25px); isolation: isolate; }
.service-directory::before { content: ''; position: absolute; inset: 5px; border: 1px solid #c28b5720; border-radius: 1px; pointer-events: none; }
.directory-edge-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.directory-edge-trace rect { fill: none; stroke: #efbd86; stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
/* Preserve the former divider + heading's 66.4px normal-flow allocation */
.directory-heading { position: relative; display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; height: 66.4px; padding: 0 8px 12px; }
.directory-title { margin: 0; font: 400 24px/1.07 var(--font-display); letter-spacing: -.025em; color: #f3e9dd; }
.directory-title > span, .directory-title > em { display: block; }
.directory-title > em { font-family: var(--font-editorial); font-size: 25px; line-height: 1.05; letter-spacing: -.035em; color: #d9ac7b; text-shadow: 0 1px 12px #ad6a3026; }
.directory-heading-mark { display: grid; gap: 4px; width: 16px; margin-top: 9px; color: #cf9c64; }
.directory-heading-mark i { display: block; height: 2px; background: currentColor; box-shadow: 0 0 8px #c88a4033; }
.directory-heading-mark i:nth-child(2) { margin-left: 4px; }
.directory-heading-mark i:nth-child(3) { margin-left: 8px; }
.service-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid #a36f4233; }
.service-index button { position: relative; display: flex; gap: 10px; align-items: center; width: 100%; min-height: 47px; text-align: left; border: 0; border-bottom: 1px solid #9c694125; border-left: 1px solid transparent; background: transparent; color: #c0b09d; padding: 10px 8px; font-size: 12px; line-height: 1.4; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.service-index button::before { content: ''; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 2px; background: linear-gradient(#7e4e29, #f0c18c 45%, #a2683e); box-shadow: 0 0 12px #d3954e70; opacity: 0; transform: scaleY(.3); transition: opacity .25s ease, transform .3s ease; pointer-events: none; }
.service-index button::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1px; background: linear-gradient(90deg, #b77946, #e5b88788 65%, transparent); transform: scaleX(.15); transform-origin: left; opacity: 0; transition: opacity .25s ease, transform .35s ease; pointer-events: none; }
.service-number { font-size: 9px; color: #a77b51; font-variant-numeric: tabular-nums; flex: 0 0 17px; transition: color .25s ease, text-shadow .25s ease; }
.service-name { flex: 1; }
.service-indicator { font-size: 16px; color: #ba8551; visibility: hidden; transition: color .25s ease; }
.service-index button:enabled:hover, .service-index button:enabled:focus-visible { color: #ffdfb7; background: linear-gradient(90deg, #8b421524, #8b421508); }
.service-index button:enabled:hover .service-number, .service-index button:enabled:focus-visible .service-number { color: #e6b987; text-shadow: 0 0 10px #c48c4e55; }
.service-index button:enabled:hover::after, .service-index button:enabled:focus-visible::after, .service-index button[aria-pressed='true']::after { opacity: 1; transform: scaleX(1); }
.service-index button:disabled { cursor: default; opacity: 1; -webkit-text-fill-color: currentColor; }
.service-index button[aria-pressed='true'] { color: #ffdfb7; background: linear-gradient(90deg, #a854243d, #a8542410 70%, transparent); box-shadow: inset 0 0 18px #bc773b0d; }
.service-index button[aria-pressed='true']::before { opacity: 1; transform: scaleY(1); }
.service-index button[aria-pressed='true'] .service-number { color: #ffc183; }
.service-index button[aria-pressed='true'] .service-indicator { visibility: visible; }
.art-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #98633c33; margin-top: 10px; padding: 6px 8px; font-size: 7px; letter-spacing: .16em; color: #b09071; }
.motion-toggle { background: transparent; border: 0; border-bottom: 1px solid #93634377; padding: 8px 0; min-height: 44px; color: #c9ac90; font-size: 9px; letter-spacing: .02em; }
.motion-toggle:hover { color: #ffe1b8; border-color: #e2a76b; }
.hero-floor { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 36px 0 26px; margin-top: 35px; border-top: 1px solid #a6673f2e; position: relative; z-index: 3; }
.hero-floor > * { font-size: 8px; letter-spacing: .15em; color: #b8a18b; }
.location { display: flex; align-items: center; gap: 10px; }
.location > span { font-size: 15px; color: #d6b18c; }
.scroll-cue { display: flex; align-items: center; gap: 20px; text-decoration: none; min-height: 44px; }
.scroll-line { height: 1px; width: 44px; background: #a4663b; }
.scroll-arrow { font-size: 19px; color: #d3aa83; }
.hero-floor-note { text-align: right; }
.chapter-bridge { position: relative; height: clamp(105px, 12.5vw, 180px); overflow: hidden; pointer-events: none; }
.chapter-bridge svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.bridge-track { stroke: #aa663833; stroke-width: 1; }
.bridge-bloom, .bridge-light { stroke: url(#handoff-copper); stroke-dasharray: 1000; stroke-dashoffset: var(--conduit-offset, 0); }
.bridge-bloom { stroke-width: 5; filter: url(#handoff-bloom); opacity: .55; }
.bridge-light { stroke-width: 1.4; }
.bridge-atmosphere { position: absolute; inset: 0; background: radial-gradient(ellipse at 52% 100%, #d96d2417, transparent 57%); }
.bridge-caption { position: absolute; left: max(var(--page-safe-gutter), calc((100vw - 1440px) / 2)); bottom: 25px; color: #bfa085; letter-spacing: .2em; font-size: 7px; }


/* Architectural shell, one fixed right-front view, all service rooms remain cutaways */
.sculpture-podium .solid-face { border-color: #4b4034; background: #151413; }
.sculpture-podium .solid-top { background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 5px), linear-gradient(135deg, #48423a, #171614 42%, #32271e); box-shadow: inset 0 0 0 1px #c3996a55, inset 0 0 0 6px #181715; }
.sculpture-podium .solid-front, .sculpture-podium .solid-right { background: linear-gradient(0deg, #0a0a09, #30271e 70%, #75573d); }
.sculpture-base-core .solid-face { border-color: #4d3d2e; background: #181714; }
.sculpture-base-core .solid-front, .sculpture-base-core .solid-right { background: repeating-linear-gradient(90deg, #0000 0 16px, #a9845b22 16px 17px), linear-gradient(0deg, #090a0b, #24211d 80%, #644932); }
.sculpture-terrace .solid-top { background: repeating-linear-gradient(90deg, transparent 0 28px, #c9ab7d0c 28px 29px), linear-gradient(120deg, #726455, #24211c 8%, #191a18 70%, #58432f); box-shadow: inset 0 0 0 1px #bb946455, inset 0 0 0 8px #1e1c18; }
.sculpture-entry-step .solid-top { background: linear-gradient(120deg, #605547, #38332c 70%, #88694a); box-shadow: inset 0 0 0 1px #a8845d66; }
.sculpture-entry-step .solid-front { background: linear-gradient(#382b1d, #11110f); }
.building-entrance { position: absolute; width: 112px; height: 27px; margin: -13.5px 0 0 -56px; padding: 3px 9px 2px; display: flex; justify-content: space-between; transform: translate3d(0, 135px, 6px) rotateX(-90deg); border: 1.5px solid #9b7751; background: linear-gradient(90deg, #141d224d, #b18a4c22 48%, #0a1012); box-shadow: inset 0 0 10px #000; backface-visibility: hidden; }
.building-entrance span { width: 45%; border: .6px solid #ba9a7155; background: linear-gradient(125deg, #6b889122, #182c3322 60%, #c7b5971c); }
.sculpture-spine .solid-face { border-color: #3d352b; background: linear-gradient(90deg, #151719, #4b4338 24%, #1b1b19 52%, #393329); }
.sculpture-spine .solid-front { background: repeating-linear-gradient(0deg, #181b1b 0 8px, #7a60422e 8px 9px); }
.sculpture-column .solid-face { border-color: #756044; background: linear-gradient(90deg, #161b1c, #8f795d 35%, #373a36 65%, #171c1c); }
.sculpture-soffit .solid-face { border-color: #4e3e2c; background: #161817; }
.sculpture-soffit .solid-bottom { background: repeating-linear-gradient(90deg, #0f1211 0 30px, #b9956122 30px 32px), linear-gradient(0deg, #191a17, #3b3022); }
.sculpture-roof-crown .solid-top { background: linear-gradient(125deg, #8a7963, #34332d 6%, #171b1b 52%, #4a3d2d 96%, #bb9260); }
.sculpture-roof-crown .solid-front, .sculpture-roof-crown .solid-right { background: repeating-linear-gradient(0deg, transparent 0 3px, #d0b1890b 3px 4px), linear-gradient(90deg, #202425, #594935 10%, #151a1c 38%, #272e2c 80%, #8f704b); border-color: #9b7c535c; }
.sculpture-crown-trim .solid-face { border-color: #b08a5766; background: linear-gradient(90deg, #4a3320, #c49a65 35%, #735135 74%, #b48a57); }
.sculpture-roof-terrace .solid-top { background: repeating-linear-gradient(90deg, #1b201f 0 18px, #4c554c 18px 19px), linear-gradient(#353d37, #1d2421); box-shadow: inset 0 0 0 3px #232722; }
.sculpture-crown-cap .solid-top { background: repeating-linear-gradient(90deg, #212827 0 14px, #576357 14px 15px), linear-gradient(120deg, #596051, #242e29); box-shadow: inset 0 0 0 2px #b2935b66; }
.sculpture-vent-fin .solid-face { border-color: #65736455; background: linear-gradient(90deg, #34443d, #87937d 45%, #24342e); }
.building-roof-wordmark { position: absolute; width: 192px; height: 15px; margin: -7.5px 0 0 -96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transform: translate3d(0, 70px, var(--brand-z)) rotateX(-90deg); background: #13191b; color: #e5c093; backface-visibility: hidden; text-shadow: 0 0 4px #c38d4233; }
.building-roof-wordmark strong { font: 500 8px/1 var(--font-display); letter-spacing: .18em; }
.building-roof-wordmark span { font-size: 3.8px; line-height: 1; letter-spacing: .18em; color: #bba58b; }
.sculpture-floor-sill .solid-face { border-color: #303735; background: #212724; }
.sculpture-floor-sill .solid-top { background: repeating-linear-gradient(90deg, transparent 0 25px, #a6b2a00d 25px 26px), repeating-linear-gradient(0deg, transparent 0 25px, #a6b2a00d 25px 26px), linear-gradient(135deg, #46504a, #252e2b 40%, #1b2221 75%, #414d43); box-shadow: inset 0 0 0 2px #151d1b; }
.sculpture-fascia .solid-face { border-color: #95724a66; background: linear-gradient(90deg, #27221b, #a17e4d 24%, #342b20 65%, #715235); }
.sculpture-copper-reveal .solid-face { border: 0; background: linear-gradient(90deg, #785435, #caa26b 38%, #614126 80%); }
.building-floor.is-selected .sculpture-copper-reveal .solid-face { background: #e7b57a; }
.sculpture-room-rack .solid-face { border-color: #3b484a; background: #192327; }
.sculpture-room-rack .solid-front { background: repeating-linear-gradient(0deg, #111b20 0 4px, #3f5054 4px 5px, #17252b 5px 7px); box-shadow: inset 3px 0 0 #28383e, inset -3px 0 0 #111a1e; }
.sculpture-room-rack .solid-top { background: repeating-linear-gradient(90deg, #17242a 0 3px, #4c5d61 3px 4px); }
.sculpture-room-aisle .solid-top { background: linear-gradient(90deg, #778580, #a2aaa1 40%, #5c716b); border-color: #647771; }
.sculpture-room-console .solid-top { background: linear-gradient(130deg, #62706a, #263a39 15%, #172627 80%, #3f5751); }
.sculpture-tool-module .solid-front { background: repeating-linear-gradient(90deg, #182b2c 0 5px, #778b6a 5px 6px); }

/* Cloud, a second dark architectural chapter in black and burnt orange */
.cloud-section { position: relative; background: radial-gradient(ellipse at 27% 0, #95461e19, transparent 38%), radial-gradient(ellipse at 20% 48%, #5c2b1426, transparent 49%), linear-gradient(150deg, #13100e, #090909 75%); color: var(--white); padding-bottom: 47px; color-scheme: dark; border-top: 1px solid #ad683b38; }
.section-topline { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #b77b4f26; padding-block: 26px; }
.section-index, .chapter-label { font-size: 8px; letter-spacing: .15em; color: #b59d86; }
.section-index > span { color: #d8945b; font-weight: 600; margin-right: 9px; }
.chapter-label { margin-left: auto; margin-right: 36px; }
.chapter-mark { font-size: 24px; font-weight: 300; color: #bc8353; }
.cloud-heading { display: grid; grid-template-columns: 1.45fr .65fr; gap: 85px; align-items: end; padding-top: 94px; }
.cloud-eyebrow { color: #b69b80; margin-bottom: 22px; font-size: 8px; }
h2 { font: 400 clamp(45px, 4.6vw, 74px)/1.07 var(--font-display); letter-spacing: -.045em; }
h2 em { font-family: var(--font-editorial); letter-spacing: -.058em; color: #d0a582; }
.cloud-intro { max-width: 320px; font-size: 14px; line-height: 1.9; color: #baa996; padding-bottom: 5px; }
.cloud-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(55px, 7.2vw, 115px); margin-top: 62px; align-items: start; }
.cloud-visual { border-top: 1px solid #a76a434a; border-bottom: 1px solid #a76a434a; background: radial-gradient(ellipse at 48% 57%, #7f3c1c32, transparent 68%), linear-gradient(145deg, #19120e55, #08080800); padding-bottom: 20px; }
.diagram-heading { display: flex; align-items: center; justify-content: space-between; padding-block: 17px; }
.diagram-title { font-size: 8px; letter-spacing: .18em; color: #c09971; }
.diagram-icon { font-size: 21px; color: #bd8252; }
.cloud-diagram { margin: -9px -28px -5px; }
.cloud-diagram svg { width: 100%; height: auto; overflow: visible; }
.cloud-visual figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 16px; }
.cloud-visual figcaption > span:first-child { font-size: 7px; letter-spacing: .14em; color: #bd9b78; }
.cloud-visual figcaption > span:last-child { font-size: 8px; color: #aa937b; text-align: right; }
.diagram-layer { transition: transform .65s cubic-bezier(.2,.65,.3,1); }
.layer-network { transform: translate(var(--network-x, 0px), calc(var(--network-y, 0px) + var(--entry-network, 0px))); }
.layer-compute { transform: translate(var(--compute-x, 0px), calc(var(--compute-y, 0px) + var(--entry-compute, 0px))); }
.layer-applications { transform: translate(var(--app-x, 0px), calc(var(--app-y, 0px) + var(--entry-app, 0px))); }
.arrival-light { stroke-dasharray: 100; stroke-dashoffset: var(--arrival-offset, 0); }
.arrival-halo { opacity: var(--arrival-glow, .35); }
.network-signal { opacity: .65; stroke-dasharray: 12 30; animation: network-flow 8s linear infinite; }
.observation-signal { opacity: .3; }
.cloud-visual[data-focus='migration'] { --app-x: 15px; --app-y: -17px; --compute-x: 3px; --compute-y: -6px; --network-x: -13px; --network-y: 8px; }
.cloud-visual[data-focus='operations'] .network-signal { opacity: 1; stroke-width: 3; }
.cloud-visual[data-focus='operations'] .observation-signal { opacity: 1; animation: network-flow 6s linear infinite; }
.cloud-content { padding-top: 0; min-width: 0; }
.cloud-controls { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #a4673d4a; margin: 0 0 36px; }
.cloud-controls button { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 12px 4px; font-size: 12px; color: #b49d87; background: transparent; border: 0; transition: color .25s ease, background .25s ease; }
.cloud-controls button > span { font-size: 8px; color: #b18d6c; }
.cloud-controls button::after { content: ''; position: absolute; height: 2px; inset: auto 0 -1px; background: #cc7139; transform: scaleX(0); transition: transform .35s ease; transform-origin: left; }
.cloud-controls button[aria-pressed='true'] { color: #f3bd8f; background: linear-gradient(180deg, transparent, #8f3d171a); }
.cloud-controls button[aria-pressed='true']::after { transform: scaleX(1); }
.cloud-controls button[aria-pressed='true'] > span { color: #f3bd8f; }
.cloud-controls button:hover { background: #a94b2029; color: #f3bd8f; }
.panel-kicker { font-size: 8px; letter-spacing: .16em; color: #ce925f; margin-bottom: 16px; }
h3 { font: 400 clamp(35px, 3vw, 49px)/1.1 var(--font-display); letter-spacing: -.035em; color: #f2e4d3; }
.panel-description { color: #bdac98; font-size: 14px; line-height: 1.85; margin-top: 20px; max-width: 390px; }
.capability-list { list-style: none; margin: 27px 0 0; padding: 0; max-width: 390px; }
.capability-list li { display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: #c9b69e; padding: 11px 0; border-top: 1px solid #b1744529; line-height: 1.6; }
.capability-list li > span { font-size: 8px; color: #c0824d; flex-shrink: 0; }
.cloud-panels.is-enhanced { min-height: 400px; }
.cloud-panel.is-entering { animation: panel-enter .42s ease both; }
.cloud-panels:not(.is-enhanced) .cloud-panel + .cloud-panel { border-top: 1px solid #a66a4145; margin-top: 36px; padding-top: 36px; }
.cloud-cta { display: flex; justify-content: space-between; gap: 30px; align-items: center; max-width: 390px; margin-top: 28px; padding: 15px 0; border-top: 1px solid #ab6638; border-bottom: 1px solid #ab6638; text-decoration: none; color: #efb988; font-size: 12px; font-weight: 500; }
.cloud-cta svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.25; transition: transform .25s ease; }
.cloud-cta:hover svg { transform: translate(3px, -3px); }
.cloud-note { font-size: 8px; color: #b29a82; margin-top: 13px; }
.cloud-closing { display: flex; align-items: center; gap: 22px; padding-top: 51px; margin-top: 69px; border-top: 1px solid #a66a4145; }
.closing-symbol { font-size: 31px; font-weight: 200; color: #b87542; line-height: 1; }
.cloud-closing p { font-size: 11px; color: #b29a82; line-height: 1.85; }
.cloud-closing strong { font-weight: 400; color: #dec5a6; }
.back-top { margin-left: auto; display: grid; place-items: center; min-width: 44px; min-height: 44px; font-size: 24px; color: #dda576; text-decoration: none; border: 1px solid #bb74406e; border-radius: 50%; transition: transform .25s ease; }
.back-top:hover { transform: translateY(-3px); }
.site-footer { background: #080807; color: #b29a80; }
.footer-inner { padding-top: 30px; padding-bottom: calc(30px + var(--safe-area-bottom)); display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer-inner > * { font-size: 8px; letter-spacing: .08em; }
.footer-inner > span { font-size: 7px; letter-spacing: .16em; }
.footer-inner a { text-decoration: none; min-height: 44px; display: flex; align-items: center; gap: 16px; }
.footer-inner a > span { font-size: 17px; color: #dbac7d; }

@keyframes cloud-floor-data { to { background-position: 38px 0; } }
@keyframes network-flow { to { stroke-dashoffset: -168; } }
@keyframes panel-enter { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes section-arrive { from { transform: translateY(16px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
@keyframes hero-editorial-arrive { from { transform: translateY(10px); opacity: .65; } to { transform: translateY(0); opacity: 1; } }
@keyframes hero-copper-drift { from { opacity: .5; transform: translate(-8px, 0); } to { opacity: .85; transform: translate(10px, 6px); } }
@keyframes hero-copper-trace { to { stroke-dashoffset: 0; } }
@keyframes directory-copper-trace { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: .9; } 78% { stroke-dashoffset: 0; opacity: .65; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .service-house:has(.sculpture-ready) .directory-edge-trace rect { animation: directory-copper-trace 1.6s ease-out .15s both; }
  .hero-identity { animation: hero-editorial-arrive .8s cubic-bezier(.2,.65,.3,1) both; }
  .hero-title-line { animation: hero-editorial-arrive .8s cubic-bezier(.2,.65,.3,1) .12s both; }
  .hero-title-line:nth-child(2) { animation-delay: .2s; }
  .hero-title-line:nth-child(3) { animation-delay: .28s; }
  .hero-message { animation: hero-editorial-arrive .8s cubic-bezier(.2,.65,.3,1) .38s both; }
  .hero-conduit { animation: hero-editorial-arrive .8s cubic-bezier(.2,.65,.3,1) .46s both; }
  .hero:has([data-motion-toggle]:not([hidden])) .hero-ambient { animation: hero-copper-drift 14s ease-in-out infinite alternate; }
  .hero:has([data-motion-toggle]:not([hidden])) .hero-conduit-signal { opacity: .75; animation: hero-copper-trace 12s linear infinite; }
  .hero:has(.hero-art.is-offscreen) .hero-ambient, .hero:has(.hero-art.is-offscreen) .hero-conduit-signal { animation-play-state: paused; }
}
.reveal-in { animation: section-arrive .8s cubic-bezier(.2,.65,.3,1) both; }
.motion-paused *, .hero-art.is-offscreen *, .cloud-visual.is-offscreen .network-signal, .cloud-visual.is-offscreen .observation-signal { animation-play-state: paused !important; }

/* Desktop Overview uses one screen, the scene retains its 560x1000 proportions */
@media (min-width: 960px) and (min-height: 520px) {
  .hero-layout {
    --overview-top: calc(var(--header-height) + 12px);
    --overview-content-height: calc(100svh - var(--overview-top) - 76px);
    --overview-stage-height: calc(var(--overview-content-height) - 80px);
    --overview-menu-width: clamp(264px, 22vw, 320px);
    --overview-building-width: min(620px, calc(var(--overview-stage-height) * .56), calc(100% - var(--overview-menu-width) + 64px));
    height: 100svh;
    min-height: 0;
    padding-top: var(--overview-top);
    padding-bottom: 12px;
    grid-template-rows: minmax(0, 1fr) 64px;
  }
  .hero-copy { padding-top: clamp(8px, 3svh, 32px); }
  .hero-art { height: 100%; min-height: 0; }
  .building-layout { height: auto; }
  .building-view { width: var(--overview-building-width); }
  .service-directory {
    top: 50%;
    left: max(0px, calc(100% - var(--overview-building-width) - var(--overview-menu-width) - 24px));
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: var(--overview-menu-width);
    max-height: calc(100% - 16px);
    padding: 16px;
  }
  .service-directory > .directory-heading { flex: 0 0 auto; }
  .service-directory .service-index { min-height: 0; flex: 0 1 auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a8794d #15110e; }
  .service-directory .service-index button { min-height: 42px; padding-block: 8px; }
  .service-directory .service-index button:focus-visible { outline-offset: -3px; }
  .art-caption { width: var(--overview-building-width); margin-left: auto; }
  .art-caption > span { max-width: 18ch; font-size: 6px; letter-spacing: .1em; }
  .hero-floor { height: 64px; min-height: 0; margin-top: 0; padding: 8px 0; align-self: end; }
}

/* Compact only the editorial copy, the approved building/menu budgets stay intact */
@media (min-width: 960px) and (min-height: 520px) and (max-height: 900px) {
  .hero-message { margin-top: 24px; }
  .hero-themes { gap: 14px; }
  .hero-theme-title { font-size: 11.5px; }
  .hero-theme-description { font-size: 11px; line-height: 1.6; }
  .hero-conduit { height: 28px; margin-top: 14px; }
}

@media (min-width: 960px) and (min-height: 520px) and (max-height: 800px) {
  .hero-copy { padding-top: 12px; }
  .hero-identity { margin-bottom: 18px; }
  .hero-message { margin-top: 18px; }
  .hero-themes { gap: 12px; }
  .hero-conduit { height: 24px; margin-top: 10px; }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero-copy h1 { font-size: clamp(44px, 6svh, 62px); }
  .service-directory { padding: 12px; }
  .service-directory .directory-heading { height: 56.4px; padding-bottom: 8px; }
  .directory-title { font-size: 22px; line-height: 1.05; }
  .directory-title > em { font-size: 23px; line-height: 1.02; }
  .service-directory .service-index button { min-height: 36px; padding-block: 6px; font-size: 11px; }
}

/* On very short desktop windows scroll the whole panel, never collapse its list */
@media (min-width: 960px) and (min-height: 520px) and (max-height: 650px) {
  .hero-copy { padding-top: 6px; padding-bottom: 6px; }
  .hero-identity { gap: 8px; margin-bottom: 14px; font-size: 8px; line-height: 16px; }
  .hero-identity-detail { height: 16px; }
  .hero-copy .hero-title { font-size: clamp(36px, 7svh, 44px); }
  .hero-message { margin-top: 12px; animation: none; }
  .hero-themes { gap: 10px; }
  .hero-theme-description { margin-top: 4px; font-size: 11.5px; line-height: 1.55; }
  .hero-conduit { height: 14px; margin-top: 12px; animation: none; }
  .service-directory { display: block; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a8794d #15110e; }
  .service-directory .service-index { overflow: visible; }
}

@media (min-width: 960px) and (min-height: 520px) and (max-height: 580px) {
  .hero-message { margin-top: 8px; animation: none; }
  .hero-themes { gap: 6px; }
  .hero-theme-title { font-size: 10.5px; }
  .hero-theme-description { margin-top: 3px; font-size: 10px; line-height: 1.45; }
  .hero-conduit { height: 12px; margin-top: 8px; animation: none; }
}

@media (max-width: 1199px) {
  :root { --page-gutter: 36px; }
  .page-width { width: calc(100% - var(--page-inline-space)); }
  .hero-layout { width: calc(100% - var(--page-inline-space)); grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr); column-gap: 20px; }
  h1 { font-size: clamp(52px, 5.35vw, 65px); }
  .service-index button { font-size: 11px; gap: 7px; }
  .bridge-caption { left: var(--page-safe-gutter); }
  .hero-actions { gap: 14px; }
  .hero-description { font-size: 15px; }
  .hero-signature { margin-top: 43px; }
  .header-inner { gap: 12px; }
  .desktop-nav { margin-right: 6px; gap: 2px; }
  .desktop-nav .nav-item { padding-inline: 6px; font-size: 10.5px; }
  .cloud-heading { gap: 45px; grid-template-columns: 1.3fr .7fr; }
  .cloud-body { gap: 50px; grid-template-columns: 1.05fr .95fr; }
  .cloud-controls button { gap: 7px; }
  .cloud-panels.is-enhanced { min-height: 414px; }
}

@media (max-width: 959px) {
  .desktop-nav .nav-item { min-height: 44px; font-size: 11px; }
  .hero-layout { padding-top: calc(var(--header-height) + 32px); grid-template-columns: 1fr; }
  .hero-art { width: 100%; margin: 35px 0 0; max-width: 800px; justify-self: center; }
  .building-layout { display: flex; flex-direction: column; gap: 26px; }
  .building-view { order: 1; margin-inline: auto; }
  .service-directory { position: relative; top: auto; left: auto; order: 2; width: 100%; max-width: 620px; margin-inline: auto; }
  .hero-copy { max-width: 650px; padding-top: 0; }
  .hero-conduit { width: min(460px, calc(100% - 26px)); }
  .service-index button { font-size: 12px; min-height: 46px; }
  .hero-eyebrow { max-width: 290px; font-size: 8px; }
  h1 { font-size: clamp(62px, 8vw, 78px); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 5px; }
  .hero-signature { margin-top: 30px; gap: 12px; }
  .hero-floor-note { display: none; }
  .cloud-heading { padding-top: 72px; grid-template-columns: 1fr; gap: 26px; }
  h2 { font-size: 65px; }
  .cloud-intro { max-width: 430px; font-size: 14px; }
  .cloud-body { grid-template-columns: 1fr 1fr; gap: 35px; margin-top: 45px; }
  .cloud-controls { margin-bottom: 30px; }
  .cloud-controls button { gap: 5px; font-size: 11px; }
  .cloud-controls button > span { font-size: 7px; }
  .cloud-visual { margin-top: 30px; }
  .diagram-title { font-size: 7px; }
  .cloud-visual figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cloud-visual figcaption > span:first-child { font-size: 6px; }
  h3 { font-size: 36px; }
  .panel-description { font-size: 14px; }
  .capability-list li { font-size: 12px; gap: 10px; }
  .cloud-panels.is-enhanced { min-height: 440px; }
}

@media (max-width: 759px) {
  :root { --header-content-height: 102px; --page-gutter: 20px; }
  .page-width { width: calc(100% - var(--page-inline-space)); }
  .brand-symbol { width: 28px; height: 35px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 14px; }
  .brand-name > span { font-size: 8px; }
  .brand-name small { font-size: 6px; letter-spacing: .18em; margin-top: 5px; }
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 50px; column-gap: 16px; row-gap: 0; align-content: center; }
  .header-inner > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .desktop-nav { grid-column: 1 / -1; grid-row: 2; align-self: stretch; width: 100%; margin: 0; padding: 0 1px; overflow-y: hidden; scrollbar-width: thin; background: linear-gradient(90deg, #b8804e66, transparent 20%, transparent 80%, #b8804e66) left bottom / 100% 1px no-repeat; }
  .desktop-nav::-webkit-scrollbar { display: block; height: 4px; }
  .desktop-nav::-webkit-scrollbar-track { background: #20160f; }
  .desktop-nav .nav-item { min-height: 44px; padding: 8px; font-size: 11px; }
  .desktop-nav .nav-item::after { bottom: 5px; }
  .header-contact { grid-column: 2; grid-row: 1; font-size: 10px; gap: 13px; padding: 9px 12px; }
  .hero-layout { width: calc(100% - var(--page-inline-space)); grid-template-columns: 1fr; padding-top: calc(var(--header-height) + 30px); min-height: 0; }
  .hero-copy { padding-bottom: 0; }
  .hero-identity { gap: 10px; margin-bottom: 22px; font-size: 8px; letter-spacing: .18em; }
  .hero-message { margin-left: 12px; }
  .hero-theme { padding-left: 16px; }
  .hero-theme-description { font-size: 12px; }
  .hero-theme-description > span { display: inline; white-space: normal; }
  .hero-conduit { width: calc(100% - 12px); height: 28px; margin-left: 12px; margin-top: 18px; }
  .hero-eyebrow { max-width: none; font-size: 7px; letter-spacing: .12em; gap: 10px; margin-bottom: 22px; }
  h1 { font-size: clamp(52px, 11.9vw, 88px); line-height: 1.035; letter-spacing: -.05em; }
  h1 em { letter-spacing: -.065em; }
  .hero-description { font-size: 15px; line-height: 1.8; margin-top: 22px; }
  .desktop-break { display: none; }
  .hero-actions { flex-direction: row; gap: 17px; flex-wrap: wrap; margin-top: 26px; }
  .button { font-size: 10px; min-height: 49px; padding: 13px 15px; gap: 20px; }
  .text-link { font-size: 10px; gap: 8px; }
  .hero-signature { margin-top: 34px; gap: 14px; }
  .hero-art { width: 100%; max-width: 600px; justify-self: center; margin: 45px 0 0; }
  .building-layout { grid-template-columns: 1fr; gap: 20px; }
  .building-view { max-width: 520px; width: 100%; }
  .service-directory { padding: 16px; }
  .directory-heading { font-size: 8px; }
  .service-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .service-index button { min-height: 55px; padding-inline: 7px; font-size: 11px; }
  .art-caption { font-size: 6px; letter-spacing: .1em; }
  .motion-toggle { font-size: 8px; }
  .chapter-bridge { height: 105px; }
  .bridge-caption { left: var(--page-safe-gutter); bottom: 16px; font-size: 6px; letter-spacing: .12em; max-width: 130px; line-height: 1.7; }
  .hero-floor { padding-block: 16px; margin-top: 21px; gap: 15px; }
  .hero-floor > * { font-size: 6px; letter-spacing: .1em; }
  .scroll-cue { gap: 11px; }
  .scroll-line { display: none; }
  .location { gap: 6px; }
  .section-topline { padding-block: 18px; }
  .section-index, .chapter-label { font-size: 7px; }
  .chapter-label { margin-right: 15px; }
  .chapter-mark { font-size: 21px; }
  .cloud-heading { padding-top: 55px; gap: 24px; }
  .cloud-eyebrow { font-size: 7px; letter-spacing: .14em; margin-bottom: 17px; }
  h2 { font-size: clamp(42px, 8.7vw, 64px); }
  .cloud-intro { font-size: 14px; max-width: 430px; }
  .cloud-body { display: flex; flex-direction: column; margin-top: 35px; gap: 39px; }
  .cloud-visual { width: 100%; max-width: 550px; margin: 0 auto; }
  .cloud-diagram { max-width: 580px; margin: -22px -5px -14px; }
  .cloud-diagram svg { max-height: 390px; }
  .diagram-title { font-size: 8px; }
  .cloud-visual figcaption { flex-direction: row; align-items: baseline; gap: 12px; padding-top: 10px; }
  .cloud-visual figcaption > span:first-child { font-size: 6px; }
  .cloud-visual figcaption > span:last-child { font-size: 7px; }
  .cloud-content { width: 100%; }
  .cloud-controls { margin-bottom: 31px; }
  .cloud-controls button { justify-content: flex-start; gap: 10px; padding-left: 8px; font-size: 13px; }
  .cloud-controls button > span { font-size: 8px; }
  h3 { font-size: 43px; }
  .panel-description { font-size: 14px; max-width: 480px; margin-top: 18px; }
  .capability-list { max-width: none; margin-top: 24px; }
  .capability-list li { font-size: 12px; padding-block: 12px; gap: 16px; }
  .cloud-panels.is-enhanced { min-height: 395px; }
  .cloud-cta { max-width: none; margin-top: 25px; font-size: 13px; padding-block: 17px; }
  .cloud-note { font-size: 9px; }
  .cloud-closing { padding-top: 31px; margin-top: 45px; gap: 15px; }
  .cloud-closing p { font-size: 10px; }
  .cloud-section { padding-bottom: 34px; }
  .footer-inner { flex-wrap: wrap; gap: 5px 16px; padding-top: 25px; padding-bottom: calc(25px + var(--safe-area-bottom)); }
  .footer-inner > p { flex: 1; min-width: 170px; }
  .footer-inner a { flex-basis: 100%; margin-top: 4px; }
}

@media (max-width: 359px) {
  :root { --page-gutter: 16px; }
  .page-width { width: calc(100% - var(--page-inline-space)); }
  .brand-name { font-size: 12px; }
  .brand-name small { font-size: 5px; }
  .brand-symbol { width: 24px; }
  .header-contact { padding-inline: 10px; gap: 8px; font-size: 9px; }
  .header-inner { column-gap: 10px; }
  h1 { font-size: 48px; }
  .hero-eyebrow { font-size: 6px; }
  .hero-actions { gap: 8px; }
  .hero-actions .text-link { font-size: 9px; }
  .signature-label { font-size: 6px; max-width: 48px; }
  .signature-description { font-size: 8px; }
  h2 { font-size: 39px; }
  .chapter-label { margin-right: 10px; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-toggle { display: none; }
}

@media (forced-colors: active) {
  .desktop-nav .nav-item { color: CanvasText; border-color: ButtonText; background: Canvas; box-shadow: none; }
  .desktop-nav .nav-item:disabled { color: GrayText; border-color: GrayText; }
  .desktop-nav .nav-item::after { display: none; }
  .desktop-nav a[aria-current='location'] { color: CanvasText; outline: 2px solid Highlight; outline-offset: -3px; background: Canvas; box-shadow: none; }
  .service-directory::before, .directory-edge-trace, .directory-heading-mark, .service-index button::before, .service-index button::after { display: none; }
  .directory-title, .directory-title > em { color: CanvasText; text-shadow: none; }
  .hero-ambient, .hero-conduit, .hero-identity-detail, .hero-identity-rule, .hero-theme::before { display: none; }
  .hero-identity, .hero-theme-title, .hero-theme-description, .hero-title-lead { color: CanvasText; text-shadow: none; }
  .hero-title .hero-title-accent { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; text-shadow: none; }
  .hero-message { border-left-color: CanvasText; }
  .building-view, .hero-grid, .chapter-bridge, .cloud-visual, .reading-progress { display: none; }
  .hero-art { display: block; width: 100%; height: auto; margin: 30px 0; }
  .building-layout { display: block; height: auto; }
  .service-directory { position: relative; inset: auto; display: block; width: 100%; max-width: none; max-height: none; overflow: visible; transform: none; padding: 0; border: 0; background: Canvas; box-shadow: none; }
  .service-directory .service-index { overflow: visible; }
  .art-caption { width: 100%; }
  .service-index button, .service-number, .directory-heading, .art-caption { color: CanvasText; }
  .service-index button { border: 1px solid ButtonText; }
  .service-index button[aria-pressed='true'] { outline: 2px solid Highlight; }
  .hero-layout, .cloud-body, .cloud-heading { display: block; }
  .hero-layout { height: auto; min-height: 0; }
  .hero-copy { padding-bottom: 40px; }
  .hero, .cloud-section, .site-header, .site-footer { background: Canvas; color: CanvasText; }
  h1 em, h2 em, h3, p, .eyebrow, .text-link, .cloud-cta, .brand-name small { color: CanvasText; }
  .button, .header-contact, .cloud-controls button { border: 1px solid ButtonText; }
  .cloud-controls button[aria-pressed='true'] { outline: 2px solid Highlight; }
  .cloud-intro { margin-top: 30px; }
}