:root{--navy:#031e44;--deep:#020916;--plum:#290b27;--rasp:#b31b64;--ivory:#f2f1df;--muted:#c9d2dc;--line:rgba(242,241,223,.17);--focus:#f0c44f}
*{box-sizing:border-box}html{background:var(--deep);color:var(--ivory);scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(120% 75% at 52% 40%,#082b5a 0,var(--navy) 35%,#07162f 65%,var(--deep) 100%);letter-spacing:.01em}.skip{position:fixed;left:1rem;top:-5rem;z-index:99;background:var(--ivory);color:var(--deep);padding:.65rem 1rem}.skip:focus{top:1rem}main{width:min(1500px,100%);margin:auto;padding:clamp(12px,2vh,24px) clamp(18px,3vw,54px) 0}.intro{min-height:15vh;display:flex;align-items:center;justify-content:space-between;gap:3rem;border-bottom:1px solid var(--line);padding:0 1vw clamp(12px,1.8vh,22px)}h1{margin:0;font-family:"Reem Kufi Fun",ui-sans-serif,system-ui,sans-serif;font-size:clamp(1.7rem,2.75vw,2.8rem);line-height:1;font-weight:500;letter-spacing:.015em}.definition{margin:.28rem 0 0;color:var(--muted);font-size:clamp(.72rem,.85vw,.92rem)}.riddle{margin:0;max-width:48rem;text-align:right;color:#d8e2ee;font-size:clamp(.78rem,1vw,1rem);line-height:1.55}.riddle em{color:#f4c7dd}.riddle strong{color:var(--ivory);font-weight:500}.window{height:58vh;min-height:360px;max-height:650px;position:relative;overflow:hidden;border:1px solid rgba(176,199,222,.16);border-radius:18px;isolation:isolate;background:radial-gradient(110% 95% at 50% 42%,#041126 0,#020916 42%,#01050d 76%,#000307 100%);box-shadow:inset 0 0 120px rgba(0,0,0,.72),0 18px 60px rgba(0,0,0,.18)}.depth,#agents,#glass-sensor,.glass,.hud{position:absolute;inset:0}#agents{width:100%;height:100%;display:block}
#glass-sensor{z-index:1;width:100%;height:100%;display:block;touch-action:none}.haze{position:absolute;border-radius:50%;filter:blur(90px);opacity:.055}.haze-a{width:42%;height:55%;left:4%;top:12%;background:#b31b64}.haze-b{width:35%;height:45%;right:8%;bottom:5%;background:#0072b2}.glass{z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,3,9,.52) 100%);box-shadow:inset 0 0 130px rgba(0,0,0,.62),inset 0 1px 0 rgba(225,239,255,.08)}.hud{z-index:4;pointer-events:none;color:rgba(242,241,223,.58);font:500 clamp(.56rem,.62vw,.7rem)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}.hud-a{position:absolute;left:1.2rem;top:1.1rem}.hud-b{position:absolute;right:1.2rem;bottom:1.1rem}.corner{position:absolute;width:24px;height:24px;opacity:.28}.c1{left:10px;top:10px;border-left:1px solid var(--ivory);border-top:1px solid var(--ivory)}.c2{right:10px;top:10px;border-right:1px solid var(--ivory);border-top:1px solid var(--ivory)}.c3{left:10px;bottom:10px;border-left:1px solid var(--ivory);border-bottom:1px solid var(--ivory)}.c4{right:10px;bottom:10px;border-right:1px solid var(--ivory);border-bottom:1px solid var(--ivory)}.glass-name{pointer-events:none;position:absolute;z-index:5;left:50%;bottom:8%;transform:translateX(-50%);font-size:clamp(1rem,2.3vw,2.35rem);font-weight:560;letter-spacing:.5em;color:rgba(242,241,223,.12);text-shadow:-1px -1px 0 rgba(0,0,0,.85),1px 1px 0 rgba(255,255,255,.10),0 3px 5px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden}.glass-name span{position:relative}.glass-name span:after{content:"GUARDIANIUM";position:absolute;inset:0;color:transparent;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.72) 49%,rgba(244,199,221,.78) 52%,transparent 65%);background-size:260% 100%;background-position:130% 0;background-clip:text;-webkit-background-clip:text;animation:spot 17s ease-in-out infinite}@keyframes spot{0%,72%{background-position:130% 0}82%{background-position:-30% 0}100%{background-position:-30% 0}}.contact{min-height:20vh;display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:clamp(20px,4vw,70px);align-items:center;padding:clamp(16px,2.3vh,28px) 1vw}.contact h2{font-size:clamp(.9rem,1.1vw,1.12rem);margin:0 0 .35rem;letter-spacing:.08em}.contact p{margin:0;color:var(--muted);font-size:clamp(.7rem,.78vw,.82rem);line-height:1.5}.contact p strong{color:var(--ivory);font-weight:500}form{display:grid;grid-template-columns:.7fr 1fr 2fr auto;gap:10px;align-items:end}label span{display:block;margin:0 0 5px;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}input,textarea{width:100%;border:1px solid rgba(242,241,223,.28);border-radius:4px;background:rgba(2,9,22,.36);color:var(--ivory);padding:.65rem .7rem;font:inherit;resize:vertical;min-height:42px}textarea{max-height:90px}input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button{height:42px;border:1px solid rgba(242,241,223,.45);border-radius:4px;background:rgba(179,27,100,.22);color:var(--ivory);padding:0 1rem;letter-spacing:.14em;font-weight:650;cursor:pointer}button:hover{background:rgba(179,27,100,.4)}footer{width:min(1500px,100%);margin:auto;min-height:5vh;border-top:1px solid var(--line);padding:10px clamp(18px,4vw,68px);display:flex;justify-content:space-between;align-items:center;color:#aebdcb;font-size:.64rem;letter-spacing:.06em}@media(max-width:800px){main{padding-inline:16px}.intro{min-height:auto;padding:22px 2px;display:block}.riddle{text-align:left;margin-top:1.2rem}.window{height:64svh;min-height:420px}.contact{grid-template-columns:1fr;padding-block:24px}form{grid-template-columns:1fr 1fr}.message{grid-column:1/-1}button{grid-column:1/-1}footer{gap:1rem;flex-wrap:wrap}.glass-name{letter-spacing:.28em}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glass-name span:after{animation:none}.depth{transform:none!important}}

.hud-a.active-flash{
  color:#F2F1DF;
  text-shadow:0 0 7px rgba(104,255,24,.65),0 0 16px rgba(104,255,24,.28);
}
.hud-a{transition:color .28s ease,text-shadow .28s ease;}
@media (prefers-reduced-motion: reduce){
  .hud-a{transition:none;}
}

/* v7: stronger hero hierarchy */
.riddle{
  font-size:clamp(1rem,1.45vw,1.32rem);
  line-height:1.48;
  max-width:42rem;
}
.riddle strong{
  font-weight:650;
}
.riddle .before{
  color:#F2F1DF;
  font-weight:800;
  letter-spacing:.035em;
  text-shadow:0 0 10px rgba(179,27,100,.52),0 0 20px rgba(179,27,100,.22);
  position:relative;
}
.riddle .before::after{
  content:"";
  position:absolute;
  left:2%;
  right:2%;
  bottom:-.13em;
  height:1px;
  background:linear-gradient(90deg,transparent,#B31B64 18%,#B31B64 82%,transparent);
  opacity:.9;
}
.hud-a.active-flash{
  color:#F2F1DF !important;
  text-shadow:0 0 8px rgba(104,255,24,.78),0 0 18px rgba(104,255,24,.34) !important;
}

.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.privacy-note{grid-column:1/-1;margin:.15rem 0 0;color:#aebdcb;font-size:.62rem;line-height:1.45}

/* Guardianium brand lockup — incremental v11 branding patch */
.brand-lockup{display:flex;align-items:center;gap:clamp(.45rem,1vw,.9rem);min-width:max-content}
.brand-signet{display:block;width:clamp(74px,8vw,122px);height:auto;object-fit:contain;flex:0 0 auto;margin:-10px -3px -10px -8px}
.brand-copy{display:flex;flex-direction:column;justify-content:center}
@media(max-width:800px){.brand-lockup{min-width:0}.brand-signet{width:78px;margin:-6px 0 -6px -5px}h1{font-size:clamp(1.8rem,8vw,2.55rem)}}


/* v9: factual research description + visually separate collaboration callout */
.research{
  width:min(1180px,96%);
  margin:0 auto;
  padding:clamp(30px,5vh,58px) 1vw clamp(28px,4.5vh,52px);
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
  border-bottom:1px solid var(--line);
}
.research-main{min-width:0}
.research-kicker{
  margin:0 0 .7rem;
  color:#aebdcb;
  font-size:.64rem;
  letter-spacing:.14em;
}
.research h2{
  max-width:56rem;
  margin:0 0 1rem;
  color:var(--ivory);
  font-size:clamp(1.02rem,1.5vw,1.34rem);
  line-height:1.42;
  font-weight:600;
}
.research-copy{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,34px);
}
.research-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(.72rem,.82vw,.86rem);
  line-height:1.62;
}

.research-callout{
  position:relative;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid rgba(242,241,223,.16);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(179,27,100,.08),rgba(2,9,22,.18));
}
.research-callout::before{
  content:"";
  position:absolute;
  left:0;
  top:1rem;
  bottom:1rem;
  width:2px;
  background:linear-gradient(180deg,transparent,#B31B64 18%,#B31B64 82%,transparent);
  opacity:.8;
}
.research-callout-kicker,
.research-dare,
.research-signal{
  font-family:"Reem Kufi Fun",ui-sans-serif,system-ui,sans-serif;
}
.research-callout-kicker{
  margin:0 0 .85rem;
  color:#c8d3dc;
  font-size:.68rem;
  line-height:1.3;
  letter-spacing:.11em;
}
.research-callout-copy{
  margin:0;
  color:#c2ced8;
  font-size:clamp(.76rem,.86vw,.9rem);
  line-height:1.62;
}
.research-dare{
  margin:1.35rem 0 .5rem;
  color:var(--ivory);
  font-size:clamp(1.18rem,1.7vw,1.6rem);
  line-height:1.2;
  font-weight:500;
  letter-spacing:.01em;
}
.research-signal-note{
  margin:.35rem 0 0;
  color:#c8d3dc;
  font-family:"Reem Kufi Fun",ui-sans-serif,system-ui,sans-serif;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.045em;
  line-height:1.4;
}

/* Optional research-interest field remains part of the contact form */
form .research-check{
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  width:max-content;
  max-width:100%;
  cursor:pointer;
}
form .research-check input{
  width:1rem;
  height:1rem;
  min-height:0;
  flex:0 0 auto;
  margin:.08rem 0 0;
  accent-color:#B31B64;
}
form .research-check span{
  display:block;
  margin:0;
  color:#aebdcb;
  font-size:.68rem;
  line-height:1.4;
  text-transform:none;
  letter-spacing:.02em;
}

@media(max-width:980px){
  .research{
    grid-template-columns:1fr;
  }
  .research-callout{
    max-width:46rem;
  }
}
@media(max-width:800px){
  .research{
    width:100%;
    padding-inline:2px;
  }
  .research-copy{
    grid-template-columns:1fr;
  }
}


/* v10: visible inline Formspree submission state */
.form-status{
  grid-column:1/-1;
  min-height:1.25rem;
  margin:.15rem 0 0;
  font-size:.7rem;
  line-height:1.45;
  letter-spacing:.025em;
}
.form-status:empty{min-height:0;margin:0}
.form-status.sending{color:#aebdcb}
.form-status.success{
  color:var(--ivory);
  text-shadow:0 0 10px rgba(104,255,24,.20);
}
.form-status.error{color:#f0b7cf}
button[disabled]{opacity:.62;cursor:wait}


/* v12: framed contact panel + visible, non-color-only navigation target */
.contact-wrap{
  width:min(1180px,96%);
  margin:0 auto;
  padding:clamp(28px,4.5vh,48px) 1vw clamp(32px,5vh,56px);
}
.contact-panel{
  scroll-margin-top:clamp(18px,4vh,42px);
  border:1px solid rgba(242,241,223,.24);
  border-radius:10px;
  padding:clamp(22px,3vw,34px);
  background:rgba(2,9,22,.20);
  box-shadow:0 0 0 rgba(242,241,223,0);
  transition:
    background .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    border-color .24s ease;
}
.contact-panel.contact-arrived{
  background:rgba(242,241,223,.055);
  border-color:rgba(242,241,223,.46);
  box-shadow:
    0 0 0 1px rgba(242,241,223,.10),
    0 0 26px rgba(242,241,223,.12),
    0 8px 34px rgba(0,0,0,.18);
  transform:translateY(-4px) scale(1.004);
}
.contact-copy{
  text-align:center;
  margin:0 auto clamp(20px,2.6vw,30px);
  max-width:44rem;
}
.contact-copy h2{
  margin:0 0 .45rem;
  color:var(--ivory);
  font-size:clamp(1rem,1.35vw,1.22rem);
  letter-spacing:.08em;
}
.contact-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(.72rem,.82vw,.86rem);
  line-height:1.55;
}
.contact-copy p strong{
  color:var(--ivory);
  font-weight:500;
}
#contact-title:focus{
  outline:2px solid currentColor;
  outline-offset:6px;
  border-radius:2px;
}
.contact-panel form{
  display:grid;
  grid-template-columns:.8fr 1fr 2fr auto;
  gap:10px;
  align-items:end;
}
.contact-panel .research-check,
.contact-panel .form-status,
.contact-panel .privacy-note{
  grid-column:1/-1;
}
.contact-panel .privacy-note{
  margin:.45rem 0 0;
  text-align:center;
}

/* clickable research CTA restored */
.research-signal{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.35rem;
  color:var(--ivory);
  font-family:"Reem Kufi Fun",ui-sans-serif,system-ui,sans-serif;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.11em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:.12rem;
}
.research-signal:hover{
  transform:translateY(-1px);
}
.research-signal:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}

@media(max-width:800px){
  .contact-wrap{width:100%;padding-inline:2px}
  .contact-panel form{grid-template-columns:1fr 1fr}
  .contact-panel .message{grid-column:1/-1}
  .contact-panel button{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .contact-panel{transition:none}
  .contact-panel.contact-arrived{transform:none}
  .research-signal:hover{transform:none}
}

.riddle-line{display:block}
.riddle{
  font-size:clamp(.88rem,1.25vw,1.05rem);
  line-height:1.42;
  font-weight:400;
}
.riddle .riddle-outcome{
  font-weight:500;
}
.riddle .riddle-outcome strong{
  font-weight:650;
}
.riddle .riddle-focus{
  margin:.28em 0 .34em;
}
.riddle .riddle-focus strong{
  font-weight:650;
}
.riddle .riddle-between{
  margin-top:.08em;
}
.riddle .riddle-detail{
  font-weight:400;
}

@media (min-width: 900px){
  .riddle{
    width:min(850px,72vw);
    max-width:none;
    margin-left:-180px;
  }
}

.riddle{text-align:left}

/* v21 — lower sections use the same content axis as the intro.
   The glass remains naturally only ~1vw wider on each side. */
@media (min-width: 801px){
  .research,
  .contact-wrap{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}


/* v22 — align hero copy to the same right edge as the content below
   and switch to stacked layout before logo/copy can collide. */
@media (min-width: 1100px){
  .intro{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    column-gap:72px;
  }

  .riddle{
    width:auto;
    max-width:none;
    margin-left:0;
    justify-self:stretch;
    text-align:left;
  }
}

@media (min-width: 801px) and (max-width: 1099px){
  .intro{
    display:grid;
    grid-template-columns:1fr;
    row-gap:18px;
    align-items:start;
  }

  .riddle{
    width:100%;
    max-width:none;
    margin-left:0;
    text-align:left;
  }
}

/* v23 — shift only the desktop hero copy to the right.
   Existing breakpoint/stacking behavior remains unchanged. */
@media (min-width: 1100px){
  .riddle{
    position:relative;
    left:clamp(90px, 9vw, 145px);
  }
}

/* v24 — a small additional desktop shift to the right (~3–4 letters). */
@media (min-width: 1100px){
  .riddle{
    left:calc(clamp(90px, 9vw, 145px) + 36px);
  }
}

/* v25 — contact form: identity/options left, message right */
@media (min-width: 801px){
  .contact-panel form{
    grid-template-columns:minmax(230px,.8fr) minmax(0,1.45fr);
    grid-template-areas:
      "name    message"
      "email   message"
      "check   message"
      "button  message"
      "status  status";
    gap:10px 18px;
    align-items:stretch;
  }

  .contact-panel form > label:nth-of-type(1){grid-area:name}
  .contact-panel form > label:nth-of-type(2){grid-area:email}

  .contact-panel .message{
    grid-area:message;
    display:flex;
    flex-direction:column;
  }
  .contact-panel .message textarea{
    flex:1 1 auto;
    min-height:100%;
    max-height:none;
    resize:vertical;
  }

  .contact-panel .research-check{
    grid-area:check;
    align-self:start;
  }

  .contact-panel button{
    grid-area:button;
    align-self:end;
    justify-self:start;
    min-width:9rem;
  }

  .contact-panel .form-status{
    grid-area:status;
  }
}

/* Mobile keeps the established stacked/two-up responsive behavior. */
@media (max-width:800px){
  .contact-panel .research-check,
  .contact-panel .form-status{
    grid-column:1/-1;
  }
}