:root {
  color-scheme: dark;
  --bg: #030b1a;
  --ink: #e7edf6;
  --muted: #8b9bb0;
  --blue: #25a4ff;
  --blue-light: #8bdbff;
  --stroke: rgba(173, 199, 237, .15);
  --ease: cubic-bezier(.19, 1, .22, 1);
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100svh; color: var(--ink); background: radial-gradient(ellipse 75% 63% at 50% 39%, #0e203b 0%, #081329 43%, #030a1a 77%, #020713 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #67c6ff; outline-offset: 3px; }
.ambient, .fine-grid, .edge-vignette { position: fixed; inset: 0; pointer-events: none; }
.ambient { z-index: 0; filter: blur(5px); }
.ambient-one { background: radial-gradient(ellipse 37% 31% at 51% 37%, rgba(18, 105, 221, .10), transparent 85%); }
.ambient-two { background: radial-gradient(ellipse 33% 26% at 49% 78%, rgba(2, 92, 198, .07), transparent 83%); }
.fine-grid { z-index: 0; opacity: .19; background-image: linear-gradient(rgba(91, 132, 194, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 132, 194, .055) 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(ellipse at 50% 55%, black, transparent 78%); }
.edge-vignette { z-index: 0; box-shadow: inset 0 0 170px rgba(0,0,0,.38); }
.page-shell { position: relative; z-index: 1; width: 100%; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { min-height: 78px; padding: 22px clamp(22px, 4.8vw, 88px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topline, .header-contact, .eyebrow, .replay, .dialog-kicker { text-transform: uppercase; letter-spacing: .19em; font-size: 10px; font-weight: 700; }
.topline { color: #a3b3ca; display: inline-flex; align-items: center; gap: 12px; }
.topline-dot { width: 5px; height: 5px; background: #34b3ff; box-shadow: 0 0 10px #1f83ef; border-radius: 50%; }
.header-contact { background: transparent; border: 1px solid rgba(187, 209, 241, .2); color: #e2eaf4; padding: 12px 15px; display: inline-flex; align-items: center; gap: 18px; transition: background .2s, border-color .2s; }
.header-contact span { color: #59bbff; font-size: 14px; }
.header-contact:hover { background: rgba(54, 126, 215, .1); border-color: rgba(126, 190, 255, .55); }
.hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4px 20px 22px; min-height: 0; }
.logo-stage { width: min(860px, 84vw, max(280px, (100svh - 395px)*1.44)); max-width: 100%; aspect-ratio: 995 / 605; position: relative; flex: none; isolation: isolate; overflow: clip;
  /* Feather the full layer composite into the page on all four sides. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 5%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 5%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.logo-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; user-select: none; pointer-events: none; backface-visibility: hidden; transform: translate3d(0,0,0); }
.stage-blue-aura { position: absolute; inset: 7% 15% 30%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 116, 255, .13), transparent 66%); filter: blur(30px); opacity: 0; }
.logo-stage .mark-left, .logo-stage .mark-right { z-index: 1; }
.logo-stage .mark-center { z-index: 2; }
.logo-stage .wordmark { z-index: 3; }
.logo-stage .lightline { z-index: 4; }
.reveal-beam { position: absolute; z-index: 5; height: 100%; width: 30%; top: 0; left: -45%; background: linear-gradient(90deg, transparent 0%, rgba(57, 158, 255, .0) 25%, rgba(100, 197, 255, .12) 50%, transparent 80%); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.hero-content { position: relative; z-index: 6; margin-top: -8px; display: flex; flex-direction: column; align-items: center; }
.eyebrow { color: #8bbddd; margin: 0 0 15px; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; }
.availability-pulse { width: 6px; height: 6px; border-radius: 50%; background: #61d6a6; box-shadow: 0 0 12px rgba(97,214,166,.6); }
h1 { margin: 0; max-width: 850px; font-size: clamp(22px, 2.3vw, 33px); line-height: 1.21; letter-spacing: -.035em; font-weight: 580; text-wrap: balance; opacity: 0; }
.service-list { color: #a7b9ce; font-size: clamp(11px, 1.1vw, 14px); line-height: 1.6; margin: 17px 0 0; font-weight: 450; letter-spacing: .005em; opacity: 0; }
.service-list span { color: #4d95d2; margin: 0 9px; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 21px; row-gap: 12px; margin-top: 25px; opacity: 0; }
.primary-button { border: 1px solid rgba(143, 211, 255, .48); background: linear-gradient(115deg,#1184db 0%, #0871c8 52%,#0953a1 100%); padding: 13px 18px 14px 22px; min-height: 49px; display: inline-flex; justify-content: center; align-items: center; gap: 27px; color: white; font-size: 13px; font-weight: 620; letter-spacing: .012em; box-shadow: 0 4px 27px rgba(0, 84, 203, .26), inset 0 1px rgba(255,255,255,.2); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 7px 30px rgba(0, 111, 236, .36), inset 0 1px rgba(255,255,255,.2); filter: brightness(1.06); }
.primary-button:disabled { opacity: .48; cursor: not-allowed; transform: none; filter: grayscale(.3); box-shadow: none; }
.button-arrow { font-size: 18px; font-weight: 400; }
.under-construction { font-size: 12px; line-height: 1.6; color: #8496b0; margin: 0; max-width: 320px; text-align: left; }
.page-footer { min-height: 64px; border-top: 1px solid rgba(154,187,239,.10); padding: 16px clamp(22px, 4.8vw, 88px); display: flex; gap: 16px; justify-content: space-between; align-items: center; color: #7489a4; font-size: 11px; letter-spacing: .016em; }
.footer-sep { margin: 0 5px; color: #3889c1; }
.replay { display: inline-flex; gap: 8px; align-items: center; background: transparent; border: 0; color: #9ab0c9; white-space: nowrap; padding: 4px 0; transition: color .2s; }
.replay:hover { color: #e5effb; }
.replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The logo is reconstructed in real layers: brackets → monogram → name → light streak. */
.is-ready .stage-blue-aura { animation: aura-in 2.2s var(--ease) .2s both; }
.is-ready .mark-left { animation: from-left 1.05s var(--ease) .28s both; }
.is-ready .mark-right { animation: from-right 1.05s var(--ease) .4s both; }
.is-ready .mark-center { animation: rise-mark 1.15s var(--ease) .75s both; }
.is-ready .wordmark { animation: title-reveal 1s var(--ease) 1.38s both; }
.is-ready .lightline { animation: line-in 1.1s var(--ease) 1.95s both; }
.is-ready .reveal-beam { animation: sweep 1.35s ease-out 1.1s both; }
.is-ready .eyebrow { animation: content-in .8s var(--ease) 2.15s both; }
.is-ready h1 { animation: content-in .85s var(--ease) 2.32s both; }
.is-ready .service-list { animation: content-in .85s var(--ease) 2.48s both; }
.is-ready .hero-actions { animation: content-in .9s var(--ease) 2.63s both; }
@keyframes from-left { 0% {opacity: 0; transform: translate3d(-58px, 10px, 0) scale(.97); filter: blur(12px)} 63%{opacity:1} 100% {opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)} }
@keyframes from-right { 0% {opacity: 0; transform: translate3d(58px, 10px, 0) scale(.97); filter:blur(12px)} 63% {opacity:1} 100%{opacity:1; transform:translate3d(0,0,0) scale(1);filter:blur(0)} }
@keyframes rise-mark {0%{opacity:0;transform:translateY(48px) scale(.96);filter:blur(15px)} 65%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes title-reveal {0%{opacity:0;transform:translateY(11px) scale(.985);filter:blur(13px)} 55%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
@keyframes line-in {0%{opacity:0;transform:scaleX(.05);filter:brightness(2)} 45%{opacity:1;filter:brightness(1.65)} 100%{opacity:1;transform:scaleX(1);filter:brightness(1)} }
@keyframes sweep {0%{left:-40%;opacity:0} 20%{opacity:1} 80%{opacity:.9} 100%{left:115%;opacity:0} }
@keyframes aura-in {0%{opacity:0;transform:scale(.6)} 60%{opacity:1} 100%{opacity:1;transform:scale(1)} }
@keyframes content-in {0%{opacity:0;transform:translateY(17px);filter:blur(4px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} }
/* Native dialog so Escape and keyboard focus work correctly. */
.contact-dialog { width: min(94vw, 590px); max-height: min(90svh, 780px); overflow-y:auto; border: 1px solid rgba(101,164,236,.34); color:var(--ink); background:linear-gradient(155deg,#101f37 0%,#081326 48%,#060c1c 100%); box-shadow:0 30px 110px rgba(0,0,0,.7),0 0 80px rgba(19,100,209,.12); padding:0; border-radius: 3px; }
.contact-dialog::backdrop { background: rgba(0,6,18,.83); backdrop-filter: blur(10px); }
.dialog-inner { padding:clamp(24px, 4vw, 40px); }
.dialog-heading { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.dialog-kicker { display:block; color:#61b9f2; font-size:10px; margin-bottom:12px; }
.dialog-heading h2 { font-size:clamp(23px,3.2vw,33px); font-weight:580; line-height:1.18; letter-spacing:-.04em; margin:0; }
.close-dialog { border:1px solid var(--stroke); background:rgba(255,255,255,.03); color:#d8e8f8; flex:0 0 34px; height:34px; font-size:24px; line-height:1; }
.close-dialog:hover { background:rgba(255,255,255,.1); }
.dialog-description { color:#9aabc0; font-size:14px; line-height:1.6; margin:14px 0 23px; }
.contact-unavailable { display:grid; gap:9px; margin-top:22px; padding:18px; border:1px solid rgba(101,164,236,.3); background:rgba(1,8,21,.55); color:#dbe7f7; font-size:13px; line-height:1.55; }
.contact-unavailable[hidden] { display:none; }
.contact-unavailable strong { font-size:14px; }
.contact-unavailable span { color:#9fb1c9; }
#contactForm { display:grid; gap:17px; }
#contactForm[hidden] { display:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
#contactForm label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:600; color:#d1dbea; }
#contactForm input, #contactForm textarea { background:rgba(1,8,21,.6); border:1px solid rgba(166,191,235,.23); padding:12px 13px; color:white; border-radius:0; font-weight:400; font-size:13px; width:100%; resize:vertical; }
#contactForm input::placeholder, #contactForm textarea::placeholder { color:#70839e; }
.trap-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.turnstile-slot:empty { display:none; }
.form-status { font-size:12px; line-height:1.5; margin:0; min-height:0; color:#b4c9e5; }
.form-status:empty { display:none; }
.form-status.error { color:#ffb9bc; }
.form-status.success { color:#86e4c5; }
.form-submit { width:100%; justify-content:space-between; }
.privacy-note { font-size:11px; color:#8095b2; margin:-4px 0 0; line-height:1.55; }
@media(max-width:760px) {
  .topbar { min-height:67px; padding:16px 20px; }
  .topline { font-size:9px; letter-spacing:.13em; }
  .header-contact { font-size:9px; letter-spacing:.1em; padding:10px 12px; gap:6px; }
  .hero { padding:0 17px 15px; }
  .logo-stage { width:min(87vw, calc(100vw - 68px), 570px, max(240px,(100svh - 345px)*1.44)); }
  .hero-content { margin-top:-4px; }
  .eyebrow { font-size:9px; letter-spacing:.13em; margin:0 0 12px; }
  h1 { max-width:550px; font-size:clamp(20px, 4vw, 27px); line-height:1.28; }
  .service-list { font-size:12px; max-width:420px; margin-top:15px; }
  .service-list span { margin:0 5px; }
  .hero-actions { margin-top:22px; flex-direction:column; gap:13px; }
  .under-construction { text-align:center; font-size:11px; max-width:310px; }
  .page-footer { padding:15px 20px; font-size:10px; line-height:1.5; }
  .page-footer > span { max-width:220px; }
  .replay { font-size:9px; letter-spacing:.08em; }
}
@media(max-width:410px) {
  .topline { max-width:160px; line-height:1.5; }
  .service-list { max-width:335px; }
  .form-row { grid-template-columns:1fr; }
  .page-footer > span { max-width:200px; }
}
@media(max-height:680px) and (min-width:761px) {
  .topbar { min-height:58px; padding-top:10px; padding-bottom:10px; }
  .page-footer { min-height:46px; padding-top:10px; padding-bottom:10px; }
  .logo-stage { width:min(720px, 80vw, max(270px, (100svh - 300px)*1.44)); }
  .hero-actions { margin-top:15px; }
  .service-list { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .logo-part, .eyebrow, h1, .service-list, .hero-actions, .stage-blue-aura { opacity:1 !important; filter:none !important; transform:none !important; clip-path:none !important; }
  .reveal-beam { display:none; }
}