.hero { position: relative; display: grid; min-height: calc(100vh - 5.25rem); grid-template-columns: minmax(0, .9fr) minmax(34rem, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(2.8rem, 5vw, 4.5rem); }
.hero-copy { position: relative; z-index: 2; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: center; margin-bottom: var(--s3); }
.hero-meta .eyebrow { margin: 0; }
.availability-badge { display: inline-flex; align-items: center; gap: .48rem; padding: .38rem .62rem; border: 1px solid var(--ink); background: var(--surface); color: var(--text); box-shadow: .2rem .2rem 0 var(--blue); font: 700 .58rem var(--mono); letter-spacing: .075em; text-decoration: none; text-transform: uppercase; transform: rotate(-1deg); transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms; }
.availability-badge i { width: .45rem; height: .45rem; background: var(--rust); clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%); animation: availability-pulse 1.8s steps(2, end) infinite; }
.availability-badge:hover, .availability-badge:focus-visible { box-shadow: .35rem .35rem 0 var(--rust); transform: rotate(1deg) translateY(-.12rem); }
.hero::after { position: absolute; right: 1.5rem; bottom: 1.1rem; color: var(--muted); content: "FIELD NOTE 01 / APPLIED SYSTEMS"; font: .61rem var(--mono); letter-spacing: .08em; }
.hero h1 { max-width: 12ch; margin-bottom: var(--s4); font-size: clamp(3.8rem, 6.2vw, 6.4rem); }
.hero-lead { max-width: 43rem; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.hero-card { position: relative; width: 100%; min-width: 0; padding: clamp(1rem, 2vw, 1.7rem); border: 2px solid rgba(255,255,255,.16); border-radius: .2rem; background: #102d3b; color: var(--paper); box-shadow: .8rem .8rem 0 var(--ink), 0 2rem 6rem rgba(20,44,56,.2); overflow: hidden; }
.hero-card::before { position: absolute; top: -.45rem; left: 50%; width: 5rem; height: 1rem; background: rgba(173, 135, 83, .24); content: ""; transform: translateX(-50%) rotate(-2deg); }
.signal-lab { --active-signal: #2f9fc4; }
.signal-lab::after { position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(47,159,196,.2), transparent 28%), radial-gradient(circle at 82% 72%, rgba(217,54,54,.18), transparent 31%), linear-gradient(132deg, transparent 22%, rgba(232,185,35,.06) 42%, transparent 63%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, auto, auto, 1.5rem 1.5rem, 1.5rem 1.5rem; content: ""; pointer-events: none; }
.signal-lab-topline, .signal-readout { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.signal-lab .annotation { margin: 0; color: #c98668; }
.signal-status { display: inline-flex; align-items: center; gap: .42rem; color: #aeb9ad; font: .56rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.signal-status i { width: .42rem; height: .42rem; border-radius: 50%; background: #2f9fc4; box-shadow: 0 0 .8rem #2f9fc4; }
.signal-stage { position: relative; z-index: 2; height: clamp(25rem, 44vw, 34rem); max-height: 34rem; perspective: 55rem; transform-style: preserve-3d; touch-action: pan-y; }
.system-core { position: absolute; inset: 0; isolation: isolate; width: clamp(12rem, 23vw, 17rem); height: clamp(12rem, 23vw, 17rem); margin: auto; transform-style: preserve-3d; will-change: transform; }
.core-globe { position: absolute; inset: 12.5%; width: 75%; height: 75%; filter: drop-shadow(0 0 1.2rem rgba(194,100,65,.36)); }
.core-globe circle, .core-globe ellipse, .core-globe path { fill: none; stroke: var(--active-signal); stroke-width: 1; opacity: .82; transition: stroke 320ms ease; vector-effect: non-scaling-stroke; }
.core-globe ellipse { stroke-dasharray: 3 4; }
.core-halo { position: absolute; inset: .2rem; z-index: -1; border: 1px solid color-mix(in srgb, var(--active-signal), transparent 55%); border-radius: 50%; box-shadow: inset 0 0 3rem color-mix(in srgb, var(--active-signal), transparent 82%), 0 0 3rem color-mix(in srgb, var(--active-signal), transparent 75%); transition: border-color 320ms, box-shadow 320ms; }
.core-halo::before { position: absolute; inset: -4rem; z-index: -1; border-radius: 50%; background: conic-gradient(from 30deg, rgba(47,159,196,.36), transparent 28%, rgba(217,54,54,.32), transparent 62%, rgba(232,185,35,.18), transparent 88%); filter: blur(1.5rem); content: ""; opacity: .72; animation: spectrum-turn 14s linear infinite; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(229,218,196,.22); border-radius: 50%; }
.orbit::before { position: absolute; top: -.25rem; left: 50%; width: .45rem; height: .45rem; border-radius: 50%; background: var(--active-signal); box-shadow: 0 0 .8rem var(--active-signal); content: ""; transition: background 320ms, box-shadow 320ms; }
.orbit-a { transform: rotateX(68deg) rotateZ(12deg); }
.orbit-b { transform: rotateY(65deg) rotateZ(42deg); }
.orbit-c { inset: -1.7rem; border-style: dashed; transform: rotateX(74deg) rotateZ(-32deg); }
.core-dot { position: absolute; top: 50%; left: 50%; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--active-signal), transparent 76%), 0 0 1.5rem var(--active-signal); transform: translate(-50%,-50%); transition: box-shadow 320ms; }
.signal-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.signal-links path { fill: none; stroke: color-mix(in srgb, var(--active-signal), transparent 55%); stroke-width: 1; stroke-dasharray: 4 8; filter: drop-shadow(0 0 .25rem var(--active-signal)); transition: stroke 320ms; vector-effect: non-scaling-stroke; }
.signal-node { --node-color: #2f9fc4; position: absolute; z-index: 4; display: grid; width: 3.15rem; height: 3.15rem; place-items: center; border: 1px solid color-mix(in srgb, var(--node-color), transparent 38%); border-radius: 50%; background: rgba(15,32,44,.86); color: #d7eaf1; box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.22), inset 0 0 1rem color-mix(in srgb, var(--node-color), transparent 88%); cursor: pointer; font: 600 .56rem var(--mono); letter-spacing: .06em; backdrop-filter: blur(6px); }
.signal-node::after { position: absolute; inset: -.35rem; border: 1px solid rgba(194,100,65,.16); border-radius: 50%; content: ""; }
.signal-node:hover, .signal-node:focus-visible, .signal-node.is-active { border-color: var(--node-color); color: #fff; background: color-mix(in srgb, var(--node-color), transparent 68%); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--node-color), transparent 82%), 0 0 1.8rem color-mix(in srgb, var(--node-color), transparent 35%); }
.node-api { --node-color: #2f9fc4; }.node-vision { --node-color: #d93636; }.node-geo { --node-color: #e8b923; }.node-product { --node-color: #8f3038; }
.node-api { top: 14%; left: 10%; }.node-vision { top: 12%; right: 9%; }.node-geo { right: 10%; bottom: 12%; }.node-product { bottom: 11%; left: 9%; }
.stage-axis { position: absolute; top: 50%; left: 50%; background: rgba(229,218,196,.08); pointer-events: none; }
.axis-x { width: 86%; height: 1px; transform: translate(-50%,-50%); }.axis-y { width: 1px; height: 86%; transform: translate(-50%,-50%); }
.signal-readout { display: grid; grid-template-columns: auto 1fr; gap: .05rem .8rem; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .55rem; background: rgba(255,255,255,.035); }
.signal-readout span { grid-row: 1 / 3; align-self: center; color: #c98668; font: .55rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.signal-readout strong { font: 600 .75rem var(--sans); }
.signal-readout small { color: #818b81; font: .53rem var(--mono); text-transform: uppercase; }
.signal-color-spread { position: absolute; z-index: 1; width: 4rem; aspect-ratio: 1; margin: -2rem 0 0 -2rem; border-radius: 50%; background: var(--spread-color, #2f9fc4); filter: blur(1rem); mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: scale(0); }
@keyframes spectrum-turn { to { transform: rotate(360deg); } }

/* The signal web shares the site's paper, ink, and cutout language. */
.hero-card.signal-lab { border-color: var(--ink); background: color-mix(in srgb, var(--surface), transparent 4%); color: var(--text); box-shadow: .7rem .7rem 0 var(--ink), 1rem 1rem 0 color-mix(in srgb, var(--rust), transparent 20%); }
.signal-lab::after { background: radial-gradient(circle at 18% 22%, rgba(47,159,196,.12), transparent 29%), radial-gradient(circle at 82% 72%, rgba(217,54,54,.1), transparent 31%), linear-gradient(132deg, transparent 22%, rgba(232,185,35,.045) 42%, transparent 63%), linear-gradient(rgba(17,24,29,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17,24,29,.055) 1px, transparent 1px); background-size: auto, auto, auto, 1.5rem 1.5rem, 1.5rem 1.5rem; }
.signal-lab .annotation, .signal-readout span { color: var(--rust); }
.signal-status { color: var(--muted); }
.signal-stage::before { border-radius: 0; background: repeating-radial-gradient(circle, transparent 0 2.2rem, rgba(17,24,29,.055) 2.26rem 2.32rem), repeating-conic-gradient(from 3deg, rgba(17,24,29,.075) 0 .6deg, transparent .8deg 30deg); }
.core-globe { filter: drop-shadow(.12rem .12rem 0 color-mix(in srgb, var(--ink), transparent 65%)); }
.core-halo { border-color: color-mix(in srgb, var(--active-signal), transparent 45%); border-radius: 14%; box-shadow: inset 0 0 2.2rem color-mix(in srgb, var(--active-signal), transparent 88%), 0 0 2rem color-mix(in srgb, var(--active-signal), transparent 82%); transform: rotate(45deg); }
.core-halo::before { opacity: .36; filter: blur(2.4rem); }
.orbit { border-color: color-mix(in srgb, var(--ink), transparent 78%); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.orbit-a { inset: 0; transform: rotateZ(12deg); }.orbit-b { inset: 1.5rem; transform: rotateZ(42deg); }.orbit-c { inset: -1.5rem; transform: rotateZ(-32deg); }
.signal-links path { stroke: color-mix(in srgb, var(--active-signal), var(--ink) 30%); filter: none; }
.signal-node { border-radius: .12rem; background: color-mix(in srgb, var(--surface), transparent 8%); color: var(--text); box-shadow: .25rem .25rem 0 color-mix(in srgb, var(--node-color), var(--ink) 28%); clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 90%); backdrop-filter: none; }
.signal-node::after { inset: -.3rem; border-color: color-mix(in srgb, var(--node-color), transparent 62%); border-radius: .1rem; }
.signal-node:hover, .signal-node:focus-visible, .signal-node.is-active { color: var(--paper); background: var(--node-color); box-shadow: .35rem .35rem 0 var(--ink); }
.stage-axis { background: color-mix(in srgb, var(--ink), transparent 88%); }
.signal-readout { border-color: var(--line); border-radius: 0; background: color-mix(in srgb, var(--paper-deep), transparent 20%); box-shadow: .25rem .25rem 0 color-mix(in srgb, var(--blue), transparent 42%); }
.signal-readout small { color: var(--muted); }
.signal-color-spread { mix-blend-mode: multiply; filter: blur(1.6rem); }

.home-section { padding-block: clamp(3.4rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.featured { display: grid; grid-template-columns: 3rem minmax(0, 1.25fr) minmax(15rem, .6fr); gap: var(--s4); padding-block: var(--s5); border-block: 1px solid var(--line); }
.featured h3 { margin-bottom: var(--s2); font: 400 clamp(2rem, 4vw, 3.9rem) var(--serif); }
.project-number { color: var(--rust); font: .74rem var(--mono); }
.system-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-block: var(--s4); color: var(--rope); font: .64rem var(--mono); }
.system-flow span { padding: .45rem .65rem; border: 1px solid var(--line); color: var(--text); }
.project-facts { padding-left: var(--s4); border-left: 1px solid var(--line); }
.project-facts p { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .79rem; }
.project-facts strong { display: block; margin-bottom: .2rem; color: var(--text); font: .61rem var(--mono); text-transform: uppercase; }
.preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s3); }
.preview { --accent: var(--moss); display: flex; min-height: 23rem; flex-direction: column; padding: var(--s4); border: 1px solid var(--line); border-top: .3rem solid var(--accent); border-radius: var(--radius); background: rgba(255, 250, 240, .45); }
.preview:nth-child(2) { --accent: var(--blue); } .preview:nth-child(3) { --accent: var(--rope); } .preview:nth-child(4) { --accent: var(--rust); }
.preview h3 { margin: var(--s5) 0 var(--s2); font: 400 2rem var(--serif); }
.preview > p { color: var(--muted); }
.preview .tag-list { margin-top: auto; margin-bottom: var(--s4); }
.projects-showcase { padding-bottom: var(--s3); }
.noir-interlude { position: relative; z-index: 2; display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(11rem, .35fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; margin: -1rem 0 0; padding: clamp(2rem, 5vw, 4.5rem); border: 3px solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: .8rem .8rem 0 var(--rust); clip-path: polygon(0 5%, 97% 0, 100% 88%, 96% 100%, 2% 96%); overflow: hidden; }
.noir-interlude::before { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 2rem, rgba(237,243,237,.055) 2.05rem 2.12rem), radial-gradient(circle at 84% 45%, rgba(237,88,61,.24), transparent 26%); content: ""; pointer-events: none; }
.noir-interlude::after { position: absolute; top: -35%; right: -8%; width: 22rem; aspect-ratio: 1; border: 1px solid rgba(237,243,237,.16); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(237,243,237,.035), 0 0 0 6rem rgba(237,243,237,.025); content: ""; }
.case-file-mark, .interlude-copy, .signal-words { position: relative; z-index: 1; }
.case-file-mark { display: grid; aspect-ratio: 1; place-items: center; border: 2px solid var(--paper); transform: rotate(-4deg); }
.case-file-mark span { font: 700 clamp(3.5rem, 8vw, 6rem)/.75 var(--serif); }
.case-file-mark small { font: 700 .52rem var(--mono); letter-spacing: .08em; }
.interlude-copy .eyebrow { color: #ff826a; }
.interlude-copy h2 { max-width: 11ch; margin-bottom: var(--s3); font-size: clamp(3rem, 7vw, 6rem); }
.interlude-copy > p:last-child { max-width: 42rem; margin-bottom: 0; color: #afc4c9; }
.signal-words { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.signal-words li { padding: .55rem .8rem; border: 1px solid rgba(237,243,237,.25); background: rgba(237,243,237,.05); font: 700 .67rem var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: skewX(-7deg); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr 10rem; gap: var(--s6); align-items: start; }
.about-copy { color: var(--muted); font-size: 1.03rem; }
.about-note { padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--rust); font: .69rem var(--mono); }
.mascot { margin: 0; padding: var(--s3); border: 1px solid var(--line); background: var(--paper-deep); text-align: center; transform: rotate(2deg); }
.mascot img { aspect-ratio: 1; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.mascot figcaption { font: .59rem var(--mono); text-transform: uppercase; }
.home-contact { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .75fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; margin: -1px 0 0; padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.home-contact::before { position: absolute; top: 2.2rem; right: 0; color: color-mix(in srgb, var(--blue), transparent 70%); content: "✦"; font: clamp(5rem, 13vw, 10rem)/1 var(--serif); transform: rotate(12deg); pointer-events: none; }
.contact-callout h2 { max-width: 9ch; margin-bottom: var(--s3); font-size: clamp(3.1rem, 7vw, 6.6rem); }
.contact-callout > p:last-child, .contact-action > p { max-width: 36rem; color: var(--muted); }
.contact-action { position: relative; z-index: 1; padding: clamp(1.4rem, 3vw, 2.2rem); border: 2px solid var(--ink); background: var(--surface); box-shadow: .55rem .55rem 0 var(--blue); transform: rotate(1deg); }
.availability-stamp { display: inline-block; margin-bottom: var(--s3); padding: .38rem .58rem; background: var(--ink); color: var(--paper); font: 700 .59rem var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
@keyframes availability-pulse { 50% { transform: scale(1.45) rotate(45deg); } }
@media (max-width: 68rem) { .hero { min-height: auto; grid-template-columns: 1fr; } .hero-copy { max-width: 52rem; } .hero-card { width: min(100%, 48rem); margin-inline: auto; } .featured { grid-template-columns: 2rem 1fr; } .project-facts { grid-column: 2; padding-left: 0; border-left: 0; } .noir-interlude { grid-template-columns: 6rem 1fr; } .signal-words { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } .about-grid { grid-template-columns: 1fr 1fr; } .mascot { display: none; } }
@media (max-width: 40rem) { .hero { padding-block: var(--s6); } .hero::after { display: none; } .hero-card { display: block; width: 100%; box-shadow: .4rem .4rem 0 var(--ink); } .signal-stage { height: 20rem; } .system-core { width: 10rem; height: 10rem; } .signal-node { width: 2.75rem; height: 2.75rem; } .signal-readout { grid-template-columns: 1fr; } .signal-readout span { grid-row: auto; } .featured { grid-template-columns: 1fr; } .project-number { display: none; } .project-facts { grid-column: 1; } .preview-grid, .about-grid, .home-contact { grid-template-columns: 1fr; } .contact-action { transform: rotate(.5deg); } .noir-interlude { grid-template-columns: 1fr; padding: 2.4rem 1.5rem; box-shadow: .4rem .4rem 0 var(--rust); } .case-file-mark { width: 4.5rem; } .signal-words { grid-column: auto; grid-template-columns: repeat(2, 1fr); } }