/* Scipio Solutions LLC front page (site/index.html). Public file.
   Only the six font files below are public. Do not declare other faces or weights,
   and keep every URL absolute, or locked visitors get 403s. */
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url("/assets/fonts/cinzel-600.woff2") format("woff2")}
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url("/assets/fonts/cinzel-700.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-500.woff2") format("woff2")}
@font-face{font-family:"Rajdhani";font-weight:600;font-display:swap;src:url("/assets/fonts/rajdhani-600.woff2") format("woff2")}

/* ---- tokens: gold is an accent, ivory carries the type ---- */
:root{
  --gold:#E7C24A;--gold-soft:#D4B05A;--cyan:#48E0D2;--ivory:#EEE7D6;--body:#CFC7B4;--dim:#9A9384;
  --bg0:#05060A;--bg1:#0A0D14;--surface:rgba(9,11,17,.78);--rule:rgba(238,231,214,.12);--rule-gold:rgba(231,194,74,.35);
  --serif:"Cormorant Garamond",Georgia,serif;--display:"Cinzel",Georgia,serif;--label:"Rajdhani","Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,64px);--max:1240px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--bg0)}
/* Background lives on html only: a body background would paint over the negative z-index canvas. */
body{margin:0;color:var(--ivory);font-family:var(--serif);font-size:20px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ivory)}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--bg1);color:var(--ivory);padding:8px 14px}
.skip:focus{left:8px}

/* ---- backdrop: CSS layers always, WebGL field on top when it runs ---- */
.backdrop{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(1200px 760px at 70% 10%,#121722 0%,var(--bg1) 45%,var(--bg0) 100%)}
.backdrop::before{content:"";position:absolute;inset:-80px;
  background-image:linear-gradient(rgba(238,231,214,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(238,231,214,.028) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(100% 80% at 60% 30%,#000 25%,transparent 75%);mask-image:radial-gradient(100% 80% at 60% 30%,#000 25%,transparent 75%)}
.js .backdrop::before{animation:drift 60s linear infinite}
@keyframes drift{to{transform:translate(80px,80px)}}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#field.on{opacity:1}
#field.off{display:none}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(140% 100% at 60% 45%,transparent 50%,rgba(0,0,0,.75) 100%)}

/* ---- intro: a short meander trace, then it lifts (CSS only, never blocks) ---- */
:root:has(:focus-visible) .intro{display:none}
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--bg0);pointer-events:none;
  animation:lift .6s .95s cubic-bezier(.7,0,.2,1) forwards}
.intro svg{width:min(200px,50vw);height:auto;overflow:visible}
.intro path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:420;stroke-dashoffset:420;animation:trace .9s .05s ease forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes lift{to{opacity:0;visibility:hidden}}

/* ---- top bar ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;
  height:68px;padding:0 var(--gutter);background:rgba(5,6,10,.7);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory);white-space:nowrap}
.brand .mark{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.6}
.brand span{font-family:var(--display);font-weight:600;letter-spacing:.24em;font-size:13.5px}
.top nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.top nav a{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;
  padding:12px 2px;margin:-12px -2px;transition:color .2s;white-space:nowrap}
.top nav a:hover,.top nav a.here{color:var(--ivory)}
.top nav a.nav-cta{color:var(--gold);border:1px solid var(--rule-gold);padding:9px 16px;margin:0;border-radius:2px;transition:background .2s,border-color .2s}
.top nav a.nav-cta:hover{background:rgba(231,194,74,.08);border-color:var(--gold)}
.pause{font-family:var(--label);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:transparent;
  border:0;border-left:1px solid var(--rule);padding:6px 0 6px 18px;cursor:pointer;white-space:nowrap}
.pause:hover,.pause[aria-pressed="true"]{color:var(--ivory)}
@media(max-width:900px){.top nav a:not(.nav-cta){display:none}}
@media(max-width:480px){.brand span{letter-spacing:.16em;font-size:12px}.pause{letter-spacing:.08em}.top nav a.nav-cta{display:none}.pause{border-left:0;padding-left:0}}

/* ---- shared ---- */
main,footer{overflow-x:clip}
main{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px}
h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:.01em;margin:0;color:var(--ivory)}
.section-head{margin-bottom:clamp(40px,6vw,72px)}
/* text that sits on the field without a surface gets a soft dark edge */
.eyebrow,.lead,.scene-copy p,.plist,footer{text-shadow:0 0 2px #05060A,0 0 14px #05060A}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;font-family:var(--label);font-weight:600;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:0 28px;border-radius:2px;border:1px solid var(--gold);color:var(--bg0);background:var(--gold);transition:background .2s,color .2s,box-shadow .3s}
.btn:hover{background:#F0D27A;box-shadow:0 8px 30px -8px rgba(231,194,74,.5)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:rgba(238,231,214,.35)}
.btn.ghost:hover{border-color:var(--ivory);box-shadow:none;background:rgba(238,231,214,.05)}

/* ---- hero ---- */
.hero{position:relative;overflow:clip;min-height:100vh;min-height:100svh;display:grid;align-items:center;text-align:center;padding:120px 0 100px}
.hero>.wrap{position:relative}
.hero>.wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(940px,100%);height:120%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,6,10,.8),rgba(5,6,10,.5) 60%,transparent)}
.hero h1{margin:0;font-family:var(--display);font-weight:700;line-height:.92}
.hero h1 .big{display:block;font-size:clamp(64px,12vw,156px);letter-spacing:.07em;padding-left:.07em;
  background:linear-gradient(180deg,#FBF1D2 0%,#EDD088 45%,#C9A24B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .small{display:block;margin-top:.7em;font-weight:600;font-size:clamp(14px,1.9vw,21px);letter-spacing:.7em;padding-left:.7em;color:var(--ivory)}
.hero .lead{font-size:clamp(19px,1.9vw,23px);color:var(--body);max-width:640px;margin:40px auto 0}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.scrollcue{position:absolute;left:50%;bottom:30px;width:1px;height:56px;transform:translateX(-50%);background:var(--rule);overflow:hidden}
.scrollcue i{position:absolute;left:0;top:0;width:1px;height:50%;background:var(--gold);animation:cue 2.4s cubic-bezier(.6,0,.3,1) 4}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.hero .eyebrow,.hero h1 .big,.hero h1 .small,.hero .lead,.hero .cta{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation-delay:1.05s}.hero h1 .big{animation-delay:1.1s}.hero h1 .small{animation-delay:1.25s}
.hero .lead{animation-delay:1.35s}.hero .cta{animation-delay:1.45s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- our work: text left, the field on the right ---- */
.work{padding-top:18vh}
.scene{position:relative;min-height:100vh;display:grid;align-items:center}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,10,.82) 0%,rgba(5,6,10,.55) 38%,transparent 62%)}
.scene>.wrap{width:100%}
.scene-copy{max-width:470px}
.index{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.24em;color:var(--gold);display:flex;align-items:center;gap:16px;margin-bottom:26px}
.index::after{content:"";width:56px;height:1px;background:var(--rule-gold)}
.scene-copy h3{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.6vw,60px);line-height:1.05;margin:0 0 22px;color:var(--ivory);letter-spacing:.005em}
.scene-copy p:not(.index){font-size:clamp(19px,1.8vw,22px);color:var(--body);line-height:1.62}
/* keep this query in step with PHONE in front.js */
@media(max-width:760px),(max-aspect-ratio:4/5){
  /* phones: the shape sits in the upper part of the scene, the text below it */
  .scene{min-height:100vh;align-items:end;padding-bottom:10vh}
  .scene::before{background:linear-gradient(180deg,transparent 40%,rgba(5,6,10,.85) 65%,rgba(5,6,10,.85) 88%,transparent)}
}

/* ---- approach ---- */
.approach{padding:22vh 0 12vh;position:relative}
.approach::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,6,10,.72) 25%,rgba(5,6,10,.72) 80%,transparent)}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.plist li{border-top:1px solid var(--rule);padding-top:28px}
.plist .n{display:block;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.24em;color:var(--gold);margin-bottom:22px}
.plist b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(21px,2vw,26px);color:var(--ivory);margin-bottom:10px;line-height:1.25}
.plist .t{display:block;color:var(--body);font-size:19px}
@media(max-width:820px){.plist{grid-template-columns:1fr}}

/* ---- contact and archive ---- */
.archive{padding:12vh 0 10vh}
.archive .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;border:1px solid var(--rule);background:var(--surface);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.archive .grid>div{padding:clamp(28px,4vw,56px)}
.archive .access{border-left:1px solid var(--rule)}
@media(max-width:820px){.archive .grid{grid-template-columns:minmax(0,1fr)}.archive .access{border-left:0;border-top:1px solid var(--rule)}}
.archive h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
.contact p:not(.eyebrow){color:var(--body)}
.contact a{color:var(--ivory);text-decoration-color:var(--rule-gold);text-underline-offset:4px;overflow-wrap:anywhere}
.contact a:hover{text-decoration-color:var(--gold)}
.access p:not(.eyebrow):not(.error){color:var(--dim);font-size:18px}
.access label{display:block;font-family:var(--label);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:28px 0 10px}
.access .row{display:flex;gap:10px}
.access input{flex:1;min-width:0;width:0;height:52px;background:rgba(5,6,10,.7);color:var(--ivory);border:1px solid var(--dim);border-radius:2px;padding:0 16px;font:inherit;font-size:18px;letter-spacing:.04em;transition:border-color .2s}
.access input:focus-visible{border-color:var(--gold);outline-offset:2px}
.access button{height:52px;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  background:var(--gold);color:var(--bg0);border:1px solid var(--gold);border-radius:2px;padding:0 26px;transition:background .2s}
.access button:hover{background:#F0D27A}
.access .error{color:#E0795E;font-size:17px;margin:0 0 10px}
@media(max-width:700px){.archive .grid,.top{backdrop-filter:none;-webkit-backdrop-filter:none}.archive .grid{background:rgba(9,11,17,.92)}.top{background:rgba(5,6,10,.94)}}

/* ---- footer ---- */
footer{padding:0 0 56px;color:var(--dim);font-size:15px}
footer .foot{border-top:1px solid var(--rule);padding-top:32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
footer strong{color:var(--ivory);font-weight:500}
footer .privacy{max-width:760px}
footer .copy{font-family:var(--label);font-weight:600;letter-spacing:.16em;font-size:12px;text-transform:uppercase;white-space:nowrap}
@media(max-width:760px){footer .foot{grid-template-columns:1fr}}

/* ---- no WebGL (front.js adds .nogl): a still of each scene's shape ----
   front/still.webp is a 2x2 sprite of 4:3 cells (crown, network, city, globe), rendered
   from the field itself on black. Screen blending drops the black, like the field's
   additive blend, so main gives up its stacking context to let the stills reach the
   backdrop. Each still sits where the live shape would, sized to the viewport height
   like the camera. Only .nogl visitors download it. */
.nogl main{z-index:auto}
.nogl .hero::after,.nogl .scene::after,.nogl .approach::after{content:"";position:absolute;z-index:-2;pointer-events:none;aspect-ratio:4/3;width:109vh;
  transform:translate(-50%,-50%);mix-blend-mode:screen;filter:brightness(1.35);background:url("/front/still.webp?v=1") no-repeat 0 0/200% 200%}
.nogl .hero::after{left:50%;top:58vh}
.nogl .scene::after,.nogl .approach::after{left:67%;top:50%}
.nogl .scene[data-shape="1"]::after{background-position:100% 0}
.nogl .scene[data-shape="2"]::after{background-position:0 100%}
.nogl .scene[data-shape="3"]::after,.nogl .approach::after{background-position:100% 100%}
.nogl .approach::after{opacity:.35} /* the live globe dims here too (data-glow) */
/* keep in step with PHONE in front.js. The camera pulls back on narrow screens and
   widens its view on portrait ones (aspect under 0.8), so each gets its own size. */
@media(max-width:760px),(max-aspect-ratio:4/5){
  .nogl .hero::after,.nogl .scene::after,.nogl .approach::after{width:91vh}
  .nogl .scene::after,.nogl .approach::after{left:50%;top:calc(50% - 18vh)}
}
@media(max-aspect-ratio:4/5){.nogl .hero::after,.nogl .scene::after,.nogl .approach::after{width:66vh}}

/* "Pause motion" stops the WebGL loop (front.js) and the looping CSS animations only,
   so a pause never freezes the hero mid-fade. */
.still .backdrop::before,.still .scrollcue i{animation-play-state:paused!important}

/* ---- high contrast mode: plain text instead of gradient-clipped text ---- */
@media(forced-colors:active){.hero h1 .big{background:none;color:CanvasText}}

/* ---- reduced motion: everything static and visible ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .intro{display:none}
  .js .reveal{opacity:1;transform:none}
}