/* Hand-editable enhancements. styles.css contains the existing site's visual styles. */
body { font-family: Geist, Arial, sans-serif; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,80px); max-width: 1160px; margin: auto; padding: 0 32px; position: relative; }
.contact-copy { padding-top: 5px; }
.contact-kicker { color: var(--primary); font-size: 14px; font-weight: 500; letter-spacing: .1em; margin-bottom: 16px; }
.contact-copy h2 { color: var(--foreground); font-size: clamp(32px,3.5vw,48px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; max-width: 500px; }
.contact-copy h2 span { display: block; color: var(--primary); }
.contact-note { color: #a6b3c3; font-size: 17px; line-height: 1.65; margin: 22px 0 26px; max-width: 460px; }
.contact-email { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.6; }
.contact-email > span { color: var(--foreground); font-size: 14px; font-weight: 500; }
.company-email { color: #a6b3c3; text-decoration: none; overflow-wrap: anywhere; }
.company-email:hover { color: #c4f2ff; }
.contact-form { background: #0d18294d; border: 1px solid #60a5fa33; border-radius: 16px; padding: 32px; backdrop-filter: blur(12px); display: grid; gap: 22px; }
.contact-field { display: grid; gap: 9px; }
.contact-field label { color: var(--foreground); font-size: 14px; line-height: 1.5; font-weight: 500; }
.contact-field label span { color: #9cabbf; font-size: 12px; font-weight: 400; }
#contact .contact-field input, #contact .contact-field select, #contact .contact-field textarea { width: 100%; min-width: 0; background: #070e18; border: 1px solid #60a5fa33; border-radius: 6px; padding: 12px 13px; font: 14px/1.5 Geist,Arial,sans-serif; color: #eef4fa; transform: none; transition: border-color .2s; }
#contact .contact-field input { min-height: 44px; }
#contact .contact-field textarea { min-height: 116px; resize: vertical; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #8f9fb2; opacity: 1; }
#contact input:focus, #contact select:focus, #contact textarea:focus { border-color: #75d4f4; outline: 2px solid #75d4f4; outline-offset: 2px; }
.email-draft-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 6px; padding: 12px 20px; border-radius: 6px; background: var(--primary); color: var(--background); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 15px #60a5fa26; transition: background .2s, box-shadow .2s; }
.email-draft-button:hover { background: #80c7f9; box-shadow: 0 12px 22px #60a5fa33; }
.email-draft-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.email-hint { color: #9baec2; font-size: 12px; line-height: 1.6; margin-top: -10px; }
@media (max-width: 760px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; padding: 0 22px; } .contact-form { padding: 24px 20px; } .contact-copy h2 { max-width: 420px; } }
/* Align the content, rather than the padded section edge, below navigation. */
section[id] { --section-space: 96px; padding-block: var(--section-space); scroll-margin-top: calc(104px - var(--section-space)); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 48px; margin-bottom: 48px; }
.section-heading > * { min-width: 0; }
.section-heading h2, #industries h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.14; letter-spacing: -.025em; }
.section-heading p { max-width: 460px; }
#services .effect-card { display: flex; flex-direction: column; }
#services .effect-card > .relative { display: flex; flex-direction: column; flex: 1; }
#services .effect-card > .relative > a { margin-top: auto; padding-top: 20px; }
.featured-project { margin-top: 48px; }
.featured-project > .max-w-4xl { max-width: none; }
.values-summary { margin-top: 48px; padding-top: 32px; }
/* Annotated section transitions: keep the content close without changing anchors. */
#services, #work, #industries, #about, #contact { --section-space: 40px; }
#industries > .max-w-7xl > .grid { margin-bottom: 0; }
.process-grid { grid-auto-rows: 1fr; align-items: stretch; }
.process-grid > .relative { height: 100%; min-width: 0; }
.process-grid > .relative > .group { height: 100%; }
.static-hero h1 { font-size: clamp(36px, 5vw, 64px); }
.static-hero h1 > .block.mt-2 { min-height: 1.1em; }
@media (max-width: 767px) {
  section[id] { --section-space: 64px; scroll-margin-top: calc(88px - var(--section-space)); }
  #services, #work, #industries, #about, #contact { --section-space: 32px; }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 32px; }
  #industries .text-center.mb-16 { margin-bottom: 32px; }
  .static-hero h1 { font-size: 36px; }
  .static-hero h1 > .block.mt-2 { min-height: 2.2em; }
}
header { background: transparent; border-bottom: 1px solid transparent; }
header.scrolled { background: rgba(3,7,18,.9); border-bottom-color: #60a5fa33; backdrop-filter: blur(20px); }
.static-hero { background: radial-gradient(ellipse at 80% 45%, #143659 0, #07111f 45%, #030712 80%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(#60a5fa12 1px, transparent 1px), linear-gradient(90deg, #60a5fa12 1px, transparent 1px); background-size: 60px 60px; transform: perspective(600px) rotateX(35deg) scale(1.5); }
.hero-grid { animation: grid-drift 12s linear infinite; }
@keyframes grid-drift { to { background-position: 0 60px, 0 60px; } }
.network-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .6; }
.hero-scene { pointer-events: none; }
.hero-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-ready .hero-grid { visibility: hidden; }
.spatial-visual { position: absolute; z-index: 15; width: 43%; max-width: 650px; top: 16%; right: 0; pointer-events: none; overflow: visible; }
@media (min-width: 1280px) {
  /* Keep the sphere beside the centered content, not against the viewport edge. */
  .spatial-visual { right: max(0px, calc((100% - 1280px) / 2 - 80px)); }
}
.spatial-float { animation: spatial-drift 10s ease-in-out infinite; }
.spatial-orbit { transform-origin: 280px 270px; animation: spatial-orbit 42s linear infinite; }
.spatial-pulse { animation: spatial-pulse 5s ease-in-out infinite; }
@keyframes spatial-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spatial-orbit { to { transform: rotate(360deg); } }
@keyframes spatial-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (min-width: 1024px) { .static-hero .max-w-3xl { max-width: 62%; } }
@media (max-width: 1023px) { .spatial-visual { width: 55%; top: 15%; right: -10%; opacity: .4; } }
@media (max-width: 639px) { .spatial-visual { width: 90%; top: 9rem; right: -40%; opacity: .23; } }
.typing-cursor { animation: cursor-blink 1s steps(2) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
h1 > .block.mt-2 { min-height: 2.2em; }
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .7s, transform .7s; transition-delay: var(--reveal-delay, 0ms); }
.reveal.revealed { opacity: 1; transform: none; }
.effect-card:hover > .opacity-0, .effect-card:hover .blur-xl.opacity-0 { opacity: 1; }
#services .effect-card:hover .w-1.h-1 { opacity: 1; top: 20% !important; }
#industries .effect-card:hover > .h-px { opacity: 1; top: 100% !important; }
#work .effect-card > .w-64 { left: calc(var(--mouse-x, 128px) - 128px) !important; top: calc(var(--mouse-y, 128px) - 128px) !important; }
.industry-highlight { background: #0d18294d !important; border-color: #60a5fa33 !important; color: var(--muted-foreground) !important; }
.industry-highlight.active-highlight { background: #60a5fa33 !important; border-color: var(--primary) !important; color: var(--primary) !important; }
.process-card { border-color: #60a5fa1a !important; background: #0d18294d !important; box-shadow: none !important; }
.process-card > .absolute.h-1 { width: 0 !important; }
.process-card .text-4xl { color: #60a5fa33 !important; }
.process-card h3 { color: var(--foreground) !important; }
.process-card .p-2.rounded-lg { background: #60a5fa1a !important; color: var(--primary) !important; }
.process-card .blur-xl { opacity: 0; }
.process-card.past-step { border-color: #60a5fa4d !important; background: #60a5fa0d !important; }
.process-card.active-step { border-color: var(--primary) !important; background: #60a5fa1a !important; box-shadow: 0 10px 15px #60a5fa33 !important; }
.process-card.active-step > .absolute.h-1, .process-card.past-step > .absolute.h-1 { width: 100% !important; }
.process-card.active-step .text-4xl, .process-card.active-step h3, #about .active-highlight { color: var(--primary) !important; }
.process-card.active-step .p-2.rounded-lg { background: var(--primary) !important; color: var(--background) !important; }
.process-card.active-step .blur-xl { opacity: 1; }
#contact input:focus, #contact textarea:focus { transform: scale(1.02); }
.mobile-navigation { display: none; }
.native-select { width: 100%; min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid #60a5fa44; border-radius: .5rem; background: #07111f; color: #f3f7fb; font: inherit; }
.native-select:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; background: #07111f; color: #fff; padding: 1rem; }
.skip-link:focus { top: 1rem; }
#contact-status { font-size: .875rem; color: #9fcaff; }
@media (max-width: 1023px) {
  .mobile-navigation.is-open { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: rgba(3,7,18,.96); }
  .mobile-navigation a { display: block; padding: .6rem; }
  html:not(.js) .mobile-navigation { display: flex; flex-wrap: wrap; gap: .7rem; padding: .5rem 0; }
  html:not(.js) header { position: relative; }
  html:not(.js) #menu-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

#contact-status:empty { display: none; }