/* ShadowCast · "What we can build for you" 3D section · styles
   Self-contained: everything is scoped to .orbit-scene, so it can drop into any page. */
.orbit-scene{
  --gold:#e2b155; --gold-hi:#f8dfa2; --gold-lo:#8a5a1c; --bone:#efe6d2; --mute:#a59c8b; --line:rgba(226,177,85,.18);
  --f-display:'Syne','Avenir Next','Segoe UI',sans-serif; --f-body:'Manrope','Segoe UI',system-ui,sans-serif; --f-label:'Cinzel','Trajan Pro',Georgia,serif;
  --gut:clamp(16px,5vw,72px);
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;margin:0;padding:0;color:var(--bone);font:400 17px/1.6 var(--f-body);
  background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(226,177,85,.10),transparent 70%),radial-gradient(circle at 92% 6%,rgba(226,177,85,.14),transparent 30%),#060504}
.orbit-scene *,.orbit-scene *::before,.orbit-scene *::after{box-sizing:border-box}

/* the WebGL stage is sticky, so the canvas is never taller than the screen */
.orbit-scene .os-stage{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden;pointer-events:none;z-index:0}
.orbit-scene .os-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.orbit-scene.orbit-live .os-gl{opacity:1}
.orbit-scene .os-css3d{position:absolute;inset:0;pointer-events:none}

/* content column */
.orbit-scene .os-inner{position:relative;z-index:2;margin:0 auto;padding:clamp(64px,6.2vw,92px) var(--gut) clamp(56px,5vw,72px);max-width:calc(860px + 2 * var(--gut))}
.orbit-scene .os-head{display:grid;gap:10px;padding-left:clamp(0px,2.2vw,34px)}
.orbit-scene .label{font:700 12px/1.2 var(--f-label);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.orbit-scene .label::before{content:'';width:34px;height:1px;background:currentColor;opacity:.8;flex:none}
.orbit-scene h2,.orbit-scene h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance;color:var(--bone)}
.orbit-scene .os-head h2{font-size:clamp(34px,3.7vw,54px);line-height:.98;max-width:11.5ch}
.orbit-scene .os-head p{color:var(--mute);font-size:15px;line-height:1.5;max-width:58ch;margin:2px 0 0}

/* small corner captions */
.orbit-scene .os-cap{position:absolute;z-index:3;font:600 10px/1.7 var(--f-body);letter-spacing:.38em;text-transform:uppercase;color:rgba(239,230,210,.55);pointer-events:none;text-shadow:0 0 4px #000,0 0 12px #000,0 0 22px rgba(0,0,0,.9)}
.orbit-scene .os-cap::after{content:'';display:block;width:30px;height:1px;margin-top:12px;background:rgba(239,230,210,.45)}
.orbit-scene .os-cap.v::after{width:1px;height:60px}
@media (max-width:1100px){.orbit-scene .os-cap{display:none}}

/* the three cards. With the 3D scene running they are carved into the stone tablets and these
   HTML copies stay invisible (still read by screen readers). Without WebGL, they show as glass cards. */
.orbit-scene .os-stones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin:clamp(18px,1.6vw,24px) 0 clamp(50px,4.4vw,64px)}
.orbit-scene .stone{position:relative;border-radius:22px;padding:clamp(18px,1.6vw,24px);display:grid;gap:8px;align-content:start;min-width:0;color:var(--bone);
  background:linear-gradient(160deg,rgba(54,42,24,.55),rgba(12,10,8,.72) 42%,rgba(20,16,11,.66));-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);
  border:1px solid rgba(248,223,162,.42);box-shadow:inset 0 1px 0 rgba(255,240,205,.55),inset 0 0 46px rgba(226,177,85,.10),0 0 34px rgba(226,177,85,.30),0 34px 90px rgba(0,0,0,.65);transition:box-shadow .4s,opacity .6s}
.orbit-scene .stone .ict{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(60,46,24,.9),rgba(14,11,8,.9));border:1px solid rgba(248,223,162,.45);box-shadow:inset 0 1px 0 rgba(255,240,205,.5),0 0 22px rgba(226,177,85,.35)}
.orbit-scene .stone .ict svg{width:30px;height:30px}
.orbit-scene .stone h3{font-size:clamp(19px,1.6vw,23px);margin:6px 0 2px}
.orbit-scene .stone p{color:#d6cbb5;font-size:13.5px;line-height:1.45;margin:0}
.orbit-scene .stone ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:13px;line-height:1.4;color:#efe6d2}
.orbit-scene .stone li{padding-left:22px;position:relative}
.orbit-scene .stone li::before{content:'';position:absolute;left:0;top:9px;width:10px;height:2px;background:#e2b155;box-shadow:0 0 6px #e2b155}
.orbit-scene.orbit-3d .os-stones .stone{opacity:0!important;transform:none!important}

/* stats, on their own backing so they always read */
.orbit-scene .nums{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;padding:14px 22px 16px;border-radius:18px;
  background:rgba(8,6,4,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(226,177,85,.22);box-shadow:0 20px 60px rgba(0,0,0,.55)}
.orbit-scene .nums div{padding-top:12px;position:relative}
.orbit-scene .nums div::before{content:'';position:absolute;left:0;top:0;height:1px;width:100%;background:var(--line)}
.orbit-scene .nums div::after{content:'';position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gold);transform:scaleX(var(--fill,1));transform-origin:left}
.orbit-scene .nums b{display:block;font:800 clamp(32px,3.2vw,48px)/1 var(--f-display);font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#f2c46a 0%,#fff0c8 40%,#f5d38a 60%,#b8862f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.orbit-scene .nums span{color:#e8decb;font-size:13.5px;display:block;margin-top:8px;max-width:24ch}

@media (max-width:860px){.orbit-scene .os-stones{grid-template-columns:1fr;margin-bottom:56px}.orbit-scene .nums{grid-template-columns:1fr 1fr}}