@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #111512;
  --ink: #f3f4ec;
  --muted: #aeb7aa;
  --quiet: #8b9987;
  --lime: #c4e885;
  --green: #5f9324;
  --line: rgba(213,232,200,.16);
  --display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font: 'DM Sans', 'Segoe UI', sans-serif;
  --gutter: clamp(24px,4.5vw,76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--lime); color: var(--bg); }
[hidden] { display: none !important; }
.page-shell { max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); overflow-x: clip; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 20px; background: var(--lime); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* A quiet header lets the type and the mark carry the identity. */
.site-header { height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: 146px; height: auto; }
.header-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.status-dot { width: 6px; height: 6px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px #c2e67b30; }
.header-contact { display: flex; align-items: center; gap: 28px; min-height: 46px; padding: 0 20px; border: 1px solid #c4e88545; border-radius: 999px; font-size: 14px; transition: background .25s, border-color .25s; }
.header-contact svg { width: 18px; height: 18px; color: var(--lime); transition: transform .25s; }
.header-contact:hover { background: #c4e8850c; border-color: var(--lime); }
.header-contact:hover svg { transform: translate(2px,-2px); }

/* The hero uses one typographic family, with a deliberate size change. */
.hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 736px; padding-top: 63px; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; font-size: 11px; font-weight: 600; letter-spacing: .15em; color: #c3cfb9; }
.eyebrow-line { width: 26px; height: 1px; background: var(--lime); }
h1 { margin: 0; font: 500 clamp(60px,6.25vw,104px)/1.06 var(--display); letter-spacing: -.045em; }
h1 > span { display: block; white-space: nowrap; }
h1 .title-accent { font-size: 1.28em; line-height: 1.02; color: var(--lime); letter-spacing: -.055em; }
.title-period { color: #739a42; }
.hero-description { max-width: 385px; margin: 25px 0 26px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.primary-link { display: inline-flex; align-items: center; gap: 24px; padding: 8px 9px 8px 24px; border-radius: 999px; background: var(--lime); color: #1a2914; font-size: 14px; font-weight: 600; transition: background .25s, transform .25s; }
.primary-link:hover { background: #d6f5a4; transform: translateY(-2px); }
.button-arrow { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #233519; color: var(--lime); }
.button-arrow svg { width: 18px; height: 18px; transition: transform .25s; }
.primary-link:hover svg { transform: translateX(2px); }
.coming-soon { display: block; margin-top: 15px; color: var(--quiet); font-size: 12px; }

/* A quiet stage gives the folded metal room to carry the identity. */
.hero-art { position: absolute; top: 8px; right: -32px; width: 58%; height: 620px; z-index: 1; }
.hero-art::before { content: ''; position: absolute; inset: 7% 0 0; background: radial-gradient(ellipse at 52% 42%,#8ca65018,transparent 64%); pointer-events: none; }
.art-grid { position: absolute; inset: 50px 15px; background-image: radial-gradient(#b9c5aa50 .6px,transparent .9px); background-size: 29px 29px; mask-image: radial-gradient(ellipse,#0008,transparent 70%); }
.art-halo { position: absolute; left: 17%; right: 12%; bottom: 134px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse,#a7d26927,transparent 66%); filter: blur(21px); }
.art-orbit { position: absolute; border: 1px solid #c4e8850a; border-radius: 50%; pointer-events: none; }
.orbit-one { inset: 60px 20px 66px 15px; transform: rotate(-19deg) scaleY(.81); }
.orbit-two { display: none; }
.art-cross { position: absolute; color: #9ba98a; font: 400 19px/1 var(--font); }
.cross-top { top: 68px; right: 48px; }
.cross-bottom { left: 46px; bottom: 63px; }
.art-coordinate { position: absolute; top: 73px; left: 76px; font-size: 9px; letter-spacing: .15em; color: #a2b391; }
.sculpture { position: absolute; inset: 0; z-index: 1; contain: layout; }
.sculpture canvas { display: block; width: 100%; height: 100%; }
.sculpture-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sculpture.is-ready .sculpture-fallback { display: none; }
.art-caption { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 11px; font-size: 11px; color: #a1b294; }
.caption-line { width: 19px; height: 1px; background: #a1b294; }
.hero-bottom { grid-column: 1/-1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0 27px; position: relative; z-index: 3; }
.scroll-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; color: var(--muted); }
.scroll-icon { display: grid; place-items: center; width: 30px; height: 38px; border: 1px solid var(--line); border-radius: 999px; color: var(--lime); font-size: 17px; transition: transform .25s; }
.scroll-link:hover .scroll-icon { transform: translateY(3px); }
.art-controls { display: flex; align-items: center; gap: 14px; }
.interaction-hint { color: var(--quiet); font-size: 11px; }
.motion-toggle { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: none; display: grid; place-items: center; position: relative; transition: border-color .25s; }
.motion-toggle::after { content: ''; position: absolute; inset: -4px; }
.motion-toggle:hover { border-color: var(--lime); }
.motion-toggle svg { width: 17px; height: 17px; }
.play-icon { display: none; stroke-width: 1.2; }
.motion-toggle[aria-pressed=true] .play-icon { display: block; }
.motion-toggle[aria-pressed=true] .pause-icon { display: none; }

.partners { display: flex; justify-content: space-between; align-items: center; gap: 38px; min-height: 192px; border-top: 1px solid var(--line); }
.section-index { display: block; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--quiet); }
.partners h2 { margin: 12px 0 0; font: 500 23px/1.32 var(--display); letter-spacing: -.025em; }
.partner-logos { display: flex; align-items: center; justify-content: center; gap: clamp(36px,5vw,76px); flex: 1; }
.partner { position: relative; opacity: .8; transition: opacity .25s; flex-shrink: 0; }
.partner:hover { opacity: 1; }
.partner-datadog { width: 108px; height: 76px; overflow: hidden; }
.partner-datadog img { position: absolute; width: 136px; height: auto; max-width: none; left: -14px; top: 0; filter: brightness(0) invert(1); }
.partner-elevenlabs { width: 168px; }
.partner-elevenlabs img { display: block; width: 100%; height: auto; }
.partner-guardline { font: 500 28px/1 var(--display); letter-spacing: -.04em; }
.guardline-dot { color: var(--lime); }
.partners-end { font: 500 38px/1 var(--display); color: #a3ba8a; }

/* Contact stays in the same dark space and becomes one clear invitation. */
.contact { position: relative; isolation: isolate; border-top: 1px solid var(--line); padding: 65px 0 60px; }
.contact::before { content: ''; position: absolute; inset: 8% 8% -6%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 95%,#76984613,transparent 66%); }
.contact-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.contact-topline .section-index { display: flex; align-items: center; gap: 10px; color: #b5c4a7; }
.contact-topline .status-dot { width: 5px; height: 5px; }
.contact-topline p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.contact-invitation { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 25px 0 33px; }
.contact h2 { margin: 0; font: 500 clamp(48px,6.8vw,108px)/1.12 var(--display); letter-spacing: -.045em; }
.contact h2 span { color: var(--lime); transition: color .3s; }
.contact-arrow { display: grid; place-items: center; width: 94px; height: 94px; flex-shrink: 0; border: 1px solid #c4e88575; border-radius: 50%; color: var(--lime); transition: background .3s, color .3s, transform .3s; }
.contact-arrow svg { width: 41px; height: 41px; stroke-width: 1.6; transition: transform .3s; }
.contact-invitation:hover .contact-arrow { background: var(--lime); color: #1a2914; transform: rotate(4deg); }
.contact-invitation:hover .contact-arrow svg { transform: translate(2px,-2px); }
.contact-invitation:hover h2 span { color: #def8b8; }
.contact-details { display: flex; align-items: center; gap: 23px; }
.email-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; color: #c2cbbb; text-decoration: underline; text-decoration-color: #a3ba8640; text-underline-offset: 7px; text-decoration-thickness: 1px; transition: color .25s, text-decoration-color .25s; }
.email-link:hover { color: var(--lime); text-decoration-color: var(--lime); }
.contact-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.copy-email { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 14px; font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; transition: color .25s, border-color .25s; }
.copy-email svg { width: 14px; height: 14px; }
.copy-email:hover { color: var(--lime); border-color: #c4e88570; }
.copy-status { font-size: 12px; color: var(--lime); }
.site-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.footer-message { display: flex; align-items: center; gap: 8px; }
.footer-message .status-dot { width: 5px; height: 5px; }
.site-footer a { display: flex; align-items: center; gap: 18px; min-height: 44px; }
.site-footer a:hover { color: var(--lime); }
.site-footer a span { font-size: 20px; }

@media (min-width:1500px) {
  .hero { min-height: 790px; padding-top: 77px; }
  .hero-art { height: 704px; top: 8px; }
  .hero-description { max-width: 420px; font-size: 17px; }
  .contact { padding-block: 76px 68px; }
}
@media (max-width:1100px) {
  .site-header { height: 98px; }
  .hero { min-height: 680px; padding-top: 51px; }
  h1 { font-size: 6.9vw; }
  .hero-description { max-width: 335px; font-size: 15px; }
  .hero-art { width: 57%; right: -31px; height: 555px; top: 25px; }
  .art-coordinate { left: 44px; font-size: 8px; }
  .cross-bottom { left: 23px; }
  .cross-top { right: 26px; }
  .interaction-hint { font-size: 10px; }
  .partners { gap: 30px; min-height: 175px; }
  .partners h2 { font-size: 20px; }
  .partners-end { display: none; }
  .partner-logos { justify-content: flex-end; gap: 38px; }
  .contact { padding-block: 56px; }
  .contact h2 { font-size: 6.7vw; }
  .contact-arrow { width: 78px; height: 78px; }
  .contact-topline p { font-size: 13px; }
}
@media (max-width:760px) {
  :root { --gutter: 24px; }
  .site-header { height: 92px; }
  .brand img { width: 125px; }
  .header-note { display: none; }
  .header-contact { min-height: 43px; padding: 0 16px; gap: 18px; font-size: 13px; }
  .header-contact svg { width: 16px; height: 16px; }
  .hero { display: flex; flex-direction: column; min-height: auto; padding-top: 36px; }
  .hero-copy { display: contents; }
  .eyebrow { order: 0; margin-bottom: 22px; font-size: 11px; letter-spacing: .08em; }
  h1 { order: 1; font-size: clamp(36px,10.8vw,74px); letter-spacing: -.04em; position: relative; z-index: 2; }
  h1 .title-accent { font-size: 1.24em; letter-spacing: -.045em; }
  .hero-art { order: 4; position: relative; width: calc(100% + 38px); height: 260px; top: auto; right: auto; margin: 10px -19px -12px; }
  .hero-description { order: 2; max-width: 37ch; font-size: 15px; line-height: 1.75; margin: 20px 0; }
  .primary-link { order: 3; align-self: flex-start; font-size: 14px; gap: 26px; }
  .coming-soon { order: 5; font-size: 11px; margin-top: 12px; }
  .hero-bottom { order: 6; width: 100%; padding: 24px 0 23px; gap: 12px; }
  .hero-copy a { pointer-events: auto; }
  .art-grid { inset: 16px; }
  .orbit-one { inset: 22px 0 33px; }
  .orbit-two { inset: 56px 27px 60px; }
  .art-halo { bottom: 90px; height: 70px; }
  .art-coordinate { top: 31px; left: 31px; font-size: 7px; letter-spacing: .1em; }
  .cross-top { top: 29px; right: 25px; font-size: 16px; }
  .cross-bottom { bottom: 30px; left: 24px; font-size: 16px; }
  .art-caption { bottom: 10px; font-size: 9px; }
  .scroll-link { font-size: 11px; gap: 10px; }
  .scroll-icon { width: 28px; height: 36px; flex-shrink: 0; }
  .interaction-hint { display: none; }
  .motion-toggle { width: 44px; height: 44px; }
  .partners { display: block; min-height: auto; padding: 31px 0 33px; }
  .partners-intro { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
  .partners-intro .section-index { max-width: 100px; font-size: 11px; }
  .partners h2 { margin: 0; font-size: 18px; text-align: right; }
  .partner-logos { justify-content: space-between; gap: 16px; margin-top: 30px; }
  .partner-datadog { width: 87px; height: 69px; }
  .partner-datadog img { width: 122px; left: -17px; }
  .partner-elevenlabs { width: 148px; }
  .partner-guardline { font-size: 23px; }
  .contact { padding-block: 38px 36px; }
  .contact-topline { display: block; }
  .contact-topline .section-index { font-size: 11px; }
  .contact-topline p { font-size: 14px; margin-top: 17px; }
  .contact-invitation { gap: 12px; padding: 25px 0 22px; }
  .contact h2 { font-size: clamp(29px,8.9vw,63px); letter-spacing: -.04em; }
  .contact h2 span { display: block; }
  .contact-arrow { width: 53px; height: 53px; }
  .contact-arrow svg { width: 26px; height: 26px; }
  .contact-details { flex-wrap: wrap; column-gap: 14px; row-gap: 12px; }
  .email-link { font-size: 17px; min-height: 44px; }
  .copy-email { min-height: 44px; padding: 5px 11px; font-size: 12px; }
  .contact-copy { flex-wrap: wrap; gap: 10px; }
  .copy-status { font-size: 11px; }
  .site-footer { flex-wrap: wrap; gap: 10px; padding-block: 20px 25px; font-size: 12px; }
  .footer-message { order: 3; width: 100%; }
  .site-footer a { gap: 12px; }
}
@media (max-width:370px) {
  :root { --gutter: 20px; }
  .brand img { width: 115px; }
  .hero-art { height: 236px; }
  .hero-description { font-size: 14px; }
  .scroll-link { font-size: 11px; }
  .partners h2 { font-size: 16px; }
  .partner-logos { gap: 10px; }
  .partner-datadog { width: 76px; }
  .partner-elevenlabs { width: 126px; }
  .partner-guardline { font-size: 18px; }
}
@media (hover:none) {
  .interaction-hint { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}