/* Approved public homepage. Local component rules preserve its visual identity. */
:root { color-scheme:dark; --bg:#07090c; --ink:#eceef2; --muted:#a1a9b7; --dim:#818b9c; --blue:#89aeff; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font:16px/1.6 var(--sans); background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
button,input,select { font:inherit; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; border:0; background:none; border-radius:.2rem; }
a { color:inherit; text-decoration:none; }
a:hover,button:hover { color:#fff; }
button:disabled { cursor:default; color:var(--dim); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
p,h1,h2,h3 { margin:0; }
h1,h2,h3 { font-weight:500; }
[hidden] { display:none!important; }
::selection { background:#365078; color:#fff; }
.eyebrow { font-family:var(--mono); text-transform:uppercase; }
.skip { position:fixed; left:1rem; top:-5rem; z-index:100; background:var(--blue); color:#000; padding:.5rem; }
.skip:focus { top:1rem; }
.icon { width:1em; height:1em; display:inline-block; vertical-align:-.12em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.frontier {background:#07090c;color:#ededf0}
.frontier-nav {position:absolute;z-index:3;top:0;left:0;right:0;height:6rem;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.055)}
.frontier-brand {font-family:var(--mono);font-size:1.1rem;letter-spacing:.22em;display:flex;align-items:center;gap:1.6rem}
.frontier-brand span {font-size:.52rem;letter-spacing:.15em;color:#868b94}
.frontier-nav nav {display:flex;gap:2.5rem;align-items:center}
.frontier-nav button {font-size:.73rem;color:#b5bac3;padding:.5rem 0}
.frontier-hero {height:min(53rem,90dvh);min-height:39rem;position:relative;isolation:isolate;overflow:hidden}
#frontier-field {position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero-shade {position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07090c99,transparent 65%),linear-gradient(0deg,#07090c,transparent 18%)}
.field-fallback {background:radial-gradient(ellipse at 80% 25%,#60456435,transparent 52%),radial-gradient(ellipse at 85% 60%,#30756e30,transparent 48%),radial-gradient(ellipse at 70% 45%,#2d3952,#080a0f 65%)}
.hero-copy {padding:12rem 0 0 8%;max-width:55rem}
.hero-copy .eyebrow {font-size:.62rem;letter-spacing:.23em;color:#9b9faa;margin-bottom:2.2rem}
.hero-copy h1 {font-size:clamp(2.7rem,4.65vw,5rem);font-weight:400;letter-spacing:-.055em;line-height:1.3}
.hero-copy h1 span {color:#aeb4bf}
.hero-description {font-size:.9rem;line-height:2;color:#9a9fab;margin-top:1.8rem;letter-spacing:.06em}
.hero-link {margin-top:2.4rem;border-bottom:1px solid #6f747e;padding:.6rem 0;font-size:.76rem;letter-spacing:.04em;display:flex;align-items:center;gap:3rem}
.hero-link:hover {border-color:var(--muted)}
.hero-bottom {position:absolute;bottom:2.1rem;left:8%;right:6%;display:flex;align-items:center;gap:2rem;font-size:.54rem;letter-spacing:.16em;font-family:var(--mono);color:#828895}
.hero-bottom button {margin-left:auto;font:inherit;font-size:.57rem;color:#a6acb7}
.hero-coordinate {margin-left:2rem}
.clients-section {border-top:1px solid #22262e;padding:2.5rem 0 1.8rem}
.clients-section header {margin:0 8%;display:flex;align-items:center;gap:2rem}
.clients-section .eyebrow {font-size:.56rem;color:#79808e;letter-spacing:.18em;margin-bottom:.5rem}
.clients-section h2 {font-size:1.1rem;letter-spacing:.01em}
.clients-section header>p {font-size:.7rem;margin-left:auto;color:#969eab}
.carousel-control {font-size:.62rem;color:#7e8795;border:1px solid #2a303a;width:1.6rem;height:1.6rem;display:grid;place-content:center;border-radius:50%}
.client-window {overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);margin-top:2rem}
.client-track {display:flex;width:max-content;animation:clients-drift 35s linear infinite}
.client-track:hover, .client-track:focus-within, .client-track.paused {animation-play-state:paused}
.client-group {display:flex;align-items:center;justify-content:space-around;width:max(100vw,64rem);gap:5rem;padding:0 3rem}
.client-logo {width:15rem;height:6rem;display:flex;align-items:center;justify-content:center;opacity:.62;transition:opacity .3s,transform .3s;flex-shrink:0;padding:0}
.client-logo:hover, .client-logo:focus-visible {opacity:1;transform:translateY(-3px)}
.client-logo img {width:100%;height:100%;object-fit:contain;filter:grayscale(1)}
.client-logo.sg {width:13rem}
.philosophy-section {display:grid;grid-template-columns:1fr 2fr 1.2fr;gap:3rem;margin:2.5rem 8% 0;border-top:1px solid #242a32;padding:4rem 0;align-items:start}
.philosophy-section>p {font-size:1.85rem;line-height:1.7;letter-spacing:-.04em}
.philosophy-section>div {font-size:.75rem;line-height:2.3;color:#939ba9;padding-top:.7rem}
.philosophy-section .eyebrow {font-size:.56rem;padding-top:.8rem}
.frontier-footer {display:flex;justify-content:space-between;margin:0 8%;padding:1.6rem 0 2.3rem;border-top:1px solid #242a32;gap:2rem;font: .57rem var(--mono);letter-spacing:.1em;color:#7c8594}
@keyframes clients-drift {to{transform:translateX(-50%)}}
@media(max-width:1180px) {
.hero-copy {padding-top:11rem}
.hero-copy h1 {font-size:3.8rem}
.hero-coordinate {display:none}
}
@media(max-width:760px) {
.frontier-nav {height:4.5rem;padding:0 1.5rem}
.frontier-brand {font-size:.85rem}
.frontier-brand span {display:none}
.frontier-nav nav {gap:1.3rem}
.frontier-nav button {font-size:.64rem}
.frontier-hero {height:43rem;min-height:36rem;max-height:90dvh}
.hero-copy {padding:10rem 1.5rem 0}
.hero-copy .eyebrow {font-size:.55rem;margin-bottom:1.8rem}
.hero-copy h1 {font-size:2.8rem}
.hero-description {font-size:.76rem;margin-top:1.5rem}
.hero-link {font-size:.7rem;margin-top:2rem;gap:2rem}
.hero-shade {background:linear-gradient(90deg,#07090ca0,transparent),linear-gradient(0deg,#07090c,transparent 25%)}
.hero-bottom {left:1.5rem;right:1.5rem;font-size:.46rem;gap:.4rem;bottom:1.5rem}
.hero-bottom button {font-size:.5rem}
.clients-section {padding:1.6rem 0 1rem}
.clients-section header {margin:0 1.5rem;gap:.5rem;align-items:flex-start}
.clients-section h2 {font-size:.95rem}
.clients-section header>p {display:none}
.clients-section .carousel-control {margin-left:auto}
.client-group {width:48rem;gap:3rem;padding:0 2rem}
.client-logo {width:13rem;height:5rem}
.client-logo.sg {width:11rem}
.philosophy-section {margin:2rem 1.5rem 0;padding:2rem 0;grid-template-columns:1fr;gap:1.2rem}
.philosophy-section>p {font-size:1.6rem}
.philosophy-section>div {font-size:.7rem}
.frontier-footer {margin:0 1.5rem;font-size:.5rem;gap:1rem;flex-wrap:wrap}
.frontier-footer>span:nth-child(2) {display:none}
}
@media(prefers-reduced-motion:reduce) {
.client-track {animation:none}
.client-window {overflow:auto;mask-image:none}
.client-group {width:auto;gap:2rem}
.client-group[aria-hidden=true] {display:none}
.client-logo {transition:none}
}
.filament-fallback {position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.frontier-hero.field-fallback {background:#07090c}
.hero-shade {background:linear-gradient(90deg,#07090cbb,transparent 53%),linear-gradient(0deg,#07090c,transparent 17%)}
.field-toolbar {position:absolute;right:6%;bottom:4.6rem;z-index:2;display:flex;align-items:center;gap:.8rem;font:.6rem var(--mono);color:#8994a3}
.field-shapes {display:flex;border:1px solid #313947;padding:.15rem;background:#0b1016cc}
.field-shapes button {min-width:2.5rem;min-height:1.8rem;padding:.3rem .65rem;color:#84909e;font:inherit}
.field-shapes button[aria-pressed=true] {background:#202a35;color:#d8e1ea}
.field-shapes button:hover {color:#edf2f6}
.field-auto {display:flex;align-items:center;gap:.5rem;color:#8994a3;font:inherit;padding:.4rem 0}
.field-auto span {width:1.4rem;height:.75rem;border:1px solid #3b4654;border-radius:1rem;position:relative}
.field-auto span:after {content:"";position:absolute;left:.14rem;top:.14rem;width:.35rem;height:.35rem;border-radius:50%;background:#6d7786}
.field-auto[aria-pressed=true] span {border-color:#718795;background:#31434c}
.field-auto[aria-pressed=true] span:after {left:.75rem;background:#b8d7db}
.field-auto:disabled {opacity:.45;cursor:default}
@media(max-width:760px) {
.frontier-hero {height:calc(100svh - 2rem);min-height:43rem;max-height:55rem}
.hero-copy {padding:6.7rem 1.5rem 0;max-width:none}
.hero-copy .eyebrow {font-size:.53rem;margin-bottom:1.1rem}
.hero-copy h1 {font-size:clamp(2.35rem,9.4vw,2.9rem);line-height:1.24}
.hero-description {font-size:.74rem;line-height:1.8;margin-top:1rem}
.hero-link {font-size:.67rem;margin-top:1.2rem;padding:.45rem 0;gap:2rem}
.hero-shade {background:linear-gradient(0deg,#07090c,transparent 15%)}
.field-toolbar {right:1.5rem;left:1.5rem;bottom:4.3rem;justify-content:center;gap:.6rem;font-size:.53rem}
.field-shapes button {min-width:2rem;min-height:1.75rem;padding:.3rem .5rem}
.field-auto {gap:.35rem}
.hero-bottom {bottom:1.65rem}
.hero-bottom>span:first-child {font-size:.43rem;letter-spacing:.06em}
}
.client-window {margin-top:1.9rem;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.client-track {animation-duration:90s}
.client-track.reverse {animation-direction:reverse;animation-duration:84s}
.client-group {width:auto;gap:0;padding:0;flex-shrink:0;justify-content:flex-start}
.client-logo, .client-logo.sg {width:17rem;height:6.1rem;padding:1rem 1.5rem;opacity:.76;flex-shrink:0;position:relative;transform:none}
.client-logo img {width:auto;height:var(--ink-height);max-width:14rem;object-fit:contain;display:block;filter:none}
.client-logo:hover {transform:none}
a.client-logo:hover, a.client-logo:focus-visible {opacity:1;background:rgba(255,255,255,.025)}
a.client-logo::after {content:'↗';position:absolute;right:.7rem;bottom:.75rem;font: .6rem var(--mono);opacity:0;color:#c1c5cb}
a.client-logo:hover::after, a.client-logo:focus-visible::after {opacity:1}
.client-logo:focus-visible {outline:1px solid #959ca6;outline-offset:-6px}
.client-window:focus-within .client-track, .client-window:hover .client-track {animation-play-state:paused}
.client-window.is-paused .client-track {animation-play-state:paused}
.client-window.keyboard-mode {overflow-x:auto;mask-image:none}
.client-window.keyboard-mode .client-track {animation:none}
.client-window.keyboard-mode .client-group[aria-hidden=true] {display:none}
@media(max-width:760px) {
.client-logo, .client-logo.sg {width:14.5rem;height:5.2rem;padding:1rem}
.client-logo img {height:calc(var(--ink-height) * .87);max-width:12rem}
.client-track {animation-duration:105s}
.client-track.reverse {animation-duration:98s}
}
@media(prefers-reduced-motion:reduce) {
.client-window {overflow:visible;mask-image:none;margin-left:6%;margin-right:6%}
.client-track {width:100%;animation:none}
.client-group {width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.client-group[aria-hidden=true] {display:none}
.client-logo, .client-logo.sg {width:100%}
.carousel-control {display:none}
}
/* Production navigation and static first-frame behavior. */
.frontier-nav nav>a,.frontier-nav summary { font-size:.73rem; color:#b5bac3; padding:.5rem 0; cursor:pointer; }
.frontier-nav .access-link,.frontier-nav .account-menu { border-left:1px solid #34383f; padding-left:2.4rem; }
.frontier-nav nav>a:hover,.frontier-nav summary:hover { color:var(--ink); }
.frontier-nav summary { list-style:none; }
.frontier-nav summary::-webkit-details-marker { display:none; }
.frontier-nav details { position:relative; }
.frontier-nav .icon { margin-left:.7rem; }
.nav-dropdown { position:absolute; top:calc(100% + .7rem); right:0; min-width:11.5rem; padding:.5rem; background:#10151bf5; border:1px solid #343b46; display:flex; flex-direction:column; gap:.15rem; box-shadow:0 .6rem 2rem #0005; }
.nav-dropdown>a,.nav-dropdown button,.account-label { display:block; width:100%; text-align:left; padding:.6rem .7rem; font:.7rem/1.5 var(--sans); }
.nav-dropdown>a:hover,.nav-dropdown button:hover { background:#202a35; }
.nav-dropdown form { margin:0; }
.account-label { color:#8994a3; max-width:17rem; overflow-wrap:anywhere; }
.field-still { position:absolute; left:46.5%; top:18%; width:50%; height:64%; object-fit:contain; z-index:-3; }
.hero-link { width:fit-content; }
.hero-bottom .icon { margin-right:.5rem; }
[data-motion][data-state=pause] .icon-play,[data-motion]:not([data-state=pause]) .icon-pause,
[data-carousel][data-state=pause] .icon-play,[data-carousel]:not([data-state=pause]) .icon-pause { display:none; }
.carousel-control { width:2rem; height:2rem; }
.footer-links { display:flex; gap:1.3rem; flex-wrap:wrap; }
.frontier-footer a:hover { color:var(--ink); }
#main:focus { outline:none; }
.client-window:not(.is-enhanced) { overflow:visible; mask-image:none; margin-left:6%; margin-right:6%; }
.client-window:not(.is-enhanced) .client-track { width:100%; animation:none; }
.client-window:not(.is-enhanced) .client-group { width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.client-window:not(.is-enhanced) .client-group[aria-hidden=true] { display:none; }
.client-window:not(.is-enhanced) .client-logo { width:100%; }
@media(max-width:760px) {
  .frontier-nav { padding:0 1.5rem; gap:1rem; }
  .frontier-nav nav { gap:1rem; }
  .frontier-nav nav>a,.frontier-nav summary { font-size:.64rem; }
  .frontier-nav .access-link,.frontier-nav .account-menu { padding-left:1rem; }
  .frontier-nav .icon { display:none; }
  .frontier-hero { height:100svh; }
  .field-still { left:6.5%; top:46%; width:87%; height:34%; }
  .footer-links { gap:1rem; }
}
@media(max-width:390px) {
  .frontier-nav { padding:0 1rem; gap:.6rem; }
  .frontier-brand { font-size:.78rem; letter-spacing:.17em; }
  .frontier-nav nav { gap:.65rem; }
  .frontier-nav .access-link,.frontier-nav .account-menu { padding-left:.65rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }
/* Approved full-screen framing, shared by the first frame and live artwork. */
:root {--field-still-padding:1.02}
.frontier-hero {height:100svh;min-height:42rem;max-height:none}
.field-still-picture,.field-still {position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.field-still {left:57%;top:52%;width:calc(117% * var(--field-still-padding));height:calc(144% * var(--field-still-padding));object-fit:contain;transform:translate(-50%,-50%)}
.hero-copy {position:relative;padding-top:clamp(11rem,25svh,16rem);z-index:1;pointer-events:none}
.hero-copy a {pointer-events:auto}
.hero-copy:before {content:"";position:absolute;left:3%;top:8rem;width:min(38rem,75vw);height:27rem;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 50%,#07090cbf,#07090c80 45%,transparent 74%)}
.hero-shade {background:linear-gradient(90deg,#07090cda 0%,#07090c9c 24%,#07090c1a 54%,transparent 80%),linear-gradient(0deg,#07090c 0%,transparent 15%,transparent 88%,#07090c80)}
.hero-copy h1 {text-shadow:0 .1rem 1.5rem #07090c80}
.hero-copy .eyebrow {color:#bbc1cb}
.hero-description {color:#c0c6d0}
.frontier-nav {border-bottom-color:#ffffff0d}
.hero-bottom {font-size:.57rem;color:#9da5b3}
.field-toolbar {bottom:5.4rem}
@media(max-width:760px) {
  .frontier-hero {height:100svh;min-height:43rem;max-height:none}
  .field-still {left:51%;top:68%;width:calc(190% * var(--field-still-padding));height:calc(78% * var(--field-still-padding))}
  .hero-copy {padding:7rem 1.5rem 0}
  .hero-copy:before {left:0;top:4rem;width:100%;height:25rem;background:radial-gradient(ellipse at 30% 35%,#07090cc7,transparent 74%)}
  .hero-shade {background:linear-gradient(180deg,#07090ce0,#07090c9e 30%,transparent 56%,#07090c55 88%,#07090c)}
  .hero-copy h1 {font-size:clamp(2.35rem,9.4vw,2.9rem)}
  .field-toolbar {bottom:4.5rem}
  .hero-bottom {font-size:.5rem}
}