/* PORRITT INC - Website Redesign design system v1.0 (PI-WEB-2026)
   Dark cinematic system, sun palette. Fonts: Archivo Black (display) / Inter (body). */
:root{
  --navy:#0D1B2A; --blue:#1A56DB; --gold:#B8960C;
  --text:#E8EDF5; --text2:#8FA3BC; --line:rgba(255,140,26,0.18);
  --sunhot:#FFD97A; --sunmid:#FF8C1A; --sundeep:#7A1F00;
  --bg0:#01040A; --bg1:#060C16;
  --display:'Archivo Black','Segoe UI Black','Arial Black',sans-serif;
  --body:'Inter','Segoe UI',system-ui,sans-serif;
  --mono:Consolas,'Cascadia Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:radial-gradient(ellipse 120% 80% at 50% 30%, #101D2E 0%, var(--bg1) 45%, var(--bg0) 100%);
  color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:rgba(255,140,26,0.35);}
a{color:inherit;text-decoration:none;}

/* ---------- top chrome (steven.com pattern) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:26px 40px;mix-blend-mode:normal;pointer-events:none;}
.topbar>*{pointer-events:auto;}
.brand{font-family:var(--display);font-size:15px;letter-spacing:0.12em;color:var(--text);}
.brand .dot{color:var(--sunmid);}
.topclock{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;color:var(--text2);position:absolute;left:50%;transform:translateX(-50%);}
.menuBtn{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:0.22em;color:var(--text);
  background:none;border:none;cursor:pointer;padding:8px 4px;transition:color .2s;}
.menuBtn:hover{color:var(--sunhot);}

/* ---------- fullscreen menu ---------- */
#menuOverlay{position:fixed;inset:0;z-index:60;background:rgba(3,7,14,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;flex-direction:column;}
#menuOverlay.active{opacity:1;pointer-events:auto;}
#menuOverlay .mhead{display:flex;justify-content:space-between;align-items:center;padding:14px 40px;border-bottom:1px solid var(--line);}
#menuOverlay .mhead .brand b{color:var(--sunmid);}
#menuOverlay .mclose{background:none;border:1px solid rgba(255,140,26,0.5);color:var(--sunhot);border-radius:5px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;padding:8px 16px;cursor:pointer;transition:all .15s;}
#menuOverlay .mclose:hover{background:rgba(255,140,26,0.18);}
#menuOverlay .mlinks{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:0;overflow-y:auto;min-height:0;}
#menuOverlay .mlink{display:flex;align-items:baseline;gap:22px;padding:clamp(4px,0.9vh,10px) 0;border-bottom:1px solid rgba(255,140,26,0.10);
  transform:translateY(16px);opacity:0;transition:all .3s ease;}
#menuOverlay.active .mlink{transform:translateY(0);opacity:1;}
#menuOverlay .mlink:nth-child(1){transition-delay:.05s;} #menuOverlay .mlink:nth-child(2){transition-delay:.09s;}
#menuOverlay .mlink:nth-child(3){transition-delay:.13s;} #menuOverlay .mlink:nth-child(4){transition-delay:.17s;}
#menuOverlay .mlink:nth-child(5){transition-delay:.21s;} #menuOverlay .mlink:nth-child(6){transition-delay:.25s;}
#menuOverlay .mlink:nth-child(7){transition-delay:.29s;}
#menuOverlay .mlink .n{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.2em;min-width:44px;}
#menuOverlay .mlink h2{font-family:var(--display);font-size:clamp(15px,3.6vh,34px);letter-spacing:.02em;color:var(--text2);
  transition:all .2s;text-transform:none;}
#menuOverlay .mlink .d{font-size:12px;color:var(--text2);letter-spacing:.06em;opacity:0;transition:opacity .2s;margin-left:auto;text-align:right;max-width:260px;}
#menuOverlay .mlink:hover h2,#menuOverlay .mlink.here h2{color:var(--text);text-shadow:0 0 22px rgba(255,140,26,0.5);transform:translateX(8px);}
#menuOverlay .mlink:hover .d{opacity:1;}
#menuOverlay .mfoot{padding:12px 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text2);}
#menuOverlay .mfoot a{color:var(--sunhot);}

/* ---------- hero (home) ---------- */
.heroStatement{position:fixed;left:40px;bottom:110px;z-index:20;max-width:min(680px,72vw);pointer-events:none;}
.heroStatement h1{font-family:var(--display);font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:.005em;
  text-transform:uppercase;color:var(--text);text-shadow:0 2px 30px rgba(1,4,10,0.8);}
.heroStatement h1 em{font-style:normal;color:var(--sunmid);text-shadow:0 0 30px rgba(255,140,26,0.55);}
.heroStatement h1 .line{display:block;overflow:hidden;}
.heroStatement h1 .line span{display:inline-block;transform:translateY(110%);animation:riseIn .9s cubic-bezier(.2,.7,.2,1) forwards;}
.heroStatement h1 .line:nth-child(2) span{animation-delay:.12s;} .heroStatement h1 .line:nth-child(3) span{animation-delay:.24s;}
@keyframes riseIn{to{transform:translateY(0);}}
.aboutRow{position:fixed;left:40px;bottom:44px;z-index:20;display:flex;align-items:center;gap:16px;}
.aboutRow a{display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;letter-spacing:.02em;}
.aboutRow .circ{width:46px;height:46px;border:1.5px solid var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all .25s;font-size:18px;}
.aboutRow a:hover .circ{background:var(--sunmid);border-color:var(--sunmid);color:#01040A;transform:translateX(4px);}
.motionToggle{position:fixed;right:40px;bottom:44px;z-index:20;width:52px;height:28px;border-radius:14px;border:1.5px solid var(--text2);
  background:rgba(232,237,245,0.08);cursor:pointer;transition:all .25s;}
.motionToggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:all .25s;}
.motionToggle.off .knob{left:26px;background:var(--text2);}
.motionToggle:hover{border-color:var(--sunhot);}

/* ---------- fixed scene layers ---------- */
#flagCanvas{position:fixed;top:0;left:0;width:100%;height:62%;opacity:0.13;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.55) 55%,transparent 96%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.55) 55%,transparent 96%);}
#skyline{position:fixed;left:0;width:100%;bottom:26%;height:14%;opacity:.75;pointer-events:none;z-index:1;}
#horizonGlow{position:fixed;left:50%;bottom:18%;width:130vmin;height:44vmin;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,140,26,0.20), rgba(255,140,26,0.07) 45%, transparent 75%);}
#scene{position:fixed;inset:0;display:block;cursor:grab;z-index:2;}
#scene:active{cursor:grabbing;}
.heroSpacer{height:100vh;position:relative;z-index:3;pointer-events:none;}
.scrollCue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;
  letter-spacing:.3em;color:var(--text2);animation:cueBob 2.2s ease-in-out infinite;pointer-events:none;}
@keyframes cueBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- content sections ---------- */
main.content{position:relative;z-index:5;background:linear-gradient(to bottom, transparent, var(--bg0) 120px);}
.sect{max-width:1200px;margin:0 auto;padding:110px 40px;}
.sect.tight{padding-top:60px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.eyebrow::before{content:'';display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px;}
h2.title{font-family:var(--display);font-size:clamp(30px,4.4vw,58px);text-transform:uppercase;line-height:1.05;margin-bottom:22px;}
h2.title em{font-style:normal;color:var(--sunmid);}
p.lead{font-size:17px;line-height:1.8;color:var(--text2);max-width:760px;}
p.lead b{color:var(--text);font-weight:600;}
.grid{display:grid;gap:22px;margin-top:48px;}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card{border:1px solid var(--line);border-radius:12px;padding:30px;background:linear-gradient(160deg,rgba(13,27,42,0.55),rgba(6,12,22,0.35));
  transition:all .3s ease;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,140,26,0.7),transparent);opacity:0;transition:opacity .3s;}
.card:hover{transform:translateY(-4px);border-color:rgba(255,140,26,0.45);box-shadow:0 18px 50px rgba(1,4,10,0.6),0 0 40px rgba(255,140,26,0.08);}
.card:hover::before{opacity:1;}
.card .num{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--gold);}
.card h3{font-family:var(--display);font-size:19px;text-transform:uppercase;margin:10px 0 12px;letter-spacing:.02em;}
.card p{font-size:13.5px;line-height:1.75;color:var(--text2);}
.card .stats{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;}
.card .stat .v{font-family:var(--mono);font-size:17px;color:var(--sunhot);}
.card .stat .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin-top:3px;}
.card.accentBlue:hover{border-color:rgba(26,86,219,0.6);box-shadow:0 18px 50px rgba(1,4,10,0.6),0 0 40px rgba(26,86,219,0.12);}
.card.accentBlue .num{color:#6FA0FF;}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--sunhot);
  border:1px solid rgba(255,140,26,0.5);border-radius:999px;padding:6px 14px;margin-bottom:18px;background:rgba(255,140,26,0.07);}
.badge.blue{color:#6FA0FF;border-color:rgba(26,86,219,0.55);background:rgba(26,86,219,0.08);}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ---------- family blocks (software page) ---------- */
.family{border-top:1px solid var(--line);padding:70px 0;display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:50px;}
.family .fhead .fno{font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--gold);}
.family .fhead h3{font-family:var(--display);font-size:clamp(26px,3vw,40px);text-transform:uppercase;margin:12px 0;line-height:1.05;}
.family .fhead p{font-size:14px;line-height:1.7;color:var(--text2);}
.appRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;}
.app{border:1px solid rgba(143,163,188,0.18);border-radius:10px;padding:18px;transition:all .25s;background:rgba(13,27,42,0.35);}
.app:hover{border-color:rgba(255,140,26,0.5);background:rgba(255,140,26,0.06);transform:translateY(-3px);}
.app h4{font-size:14px;font-weight:700;letter-spacing:.03em;}
.app h4 span{color:var(--sunmid);}
.app p{font-size:11.5px;color:var(--text2);line-height:1.6;margin-top:6px;}

/* ---------- tabs (process facilities sub-menu) ---------- */
.tabRow{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 34px;border-bottom:1px solid var(--line);padding-bottom:18px;}
.tabBtn{background:none;border:1px solid rgba(143,163,188,0.3);color:var(--text2);border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.05em;padding:11px 22px;cursor:pointer;transition:all .2s;}
.tabBtn:hover{border-color:rgba(255,140,26,0.5);color:var(--text);}
.tabBtn.on{background:linear-gradient(135deg,rgba(255,140,26,0.22),rgba(184,150,12,0.14));border-color:var(--sunmid);color:var(--sunhot);
  box-shadow:0 0 20px rgba(255,140,26,0.2);}
.tabPane{display:none;}
.tabPane.on{display:block;animation:paneIn .45s ease;}
@keyframes paneIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- big number strip ---------- */
.numStrip{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:60px;flex-wrap:wrap;}
.numStrip .ns{flex:1;min-width:200px;padding:34px 26px;border-right:1px solid var(--line);}
.numStrip .ns:last-child{border-right:none;}
.numStrip .v{font-family:var(--display);font-size:34px;color:var(--sunhot);text-shadow:0 0 18px rgba(255,140,26,0.35);}
.numStrip .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin-top:8px;}

/* ---------- CTA + footer ---------- */
.cta{border:1px solid var(--line);border-radius:16px;padding:56px;text-align:center;margin-top:90px;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,140,26,0.10),transparent 65%);}
.cta h2{font-family:var(--display);font-size:clamp(24px,3.4vw,44px);text-transform:uppercase;margin-bottom:14px;}
.cta p{color:var(--text2);max-width:560px;margin:0 auto 28px;line-height:1.7;}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;padding:15px 32px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(255,140,26,0.65);color:var(--sunhot);background:linear-gradient(135deg,rgba(255,140,26,0.2),rgba(184,150,12,0.14));transition:all .2s;}
.btn:hover{box-shadow:0 0 26px rgba(255,140,26,0.45);background:rgba(255,140,26,0.3);transform:translateY(-2px);}
.btn.ghost{border-color:rgba(143,163,188,0.4);color:var(--text);background:none;}
.btn.ghost:hover{border-color:var(--sunhot);color:var(--sunhot);box-shadow:0 0 20px rgba(255,140,26,0.25);}
footer{border-top:1px solid var(--line);margin-top:110px;padding:44px 40px;position:relative;z-index:5;background:var(--bg0);}
footer .frow{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text2);}
footer a{color:var(--sunhot);}
footer .fbrand{font-family:var(--display);font-size:13px;letter-spacing:.12em;color:var(--text);}
footer .fbrand .dot{color:var(--sunmid);}

/* ---------- page hero (subpages, no sun) ---------- */
.pageHero{padding:190px 40px 60px;max-width:1200px;margin:0 auto;position:relative;z-index:5;}
.pageHero h1{font-family:var(--display);font-size:clamp(38px,6vw,84px);line-height:1.0;text-transform:uppercase;max-width:1000px;}
.pageHero h1 em{font-style:normal;color:var(--sunmid);text-shadow:0 0 34px rgba(255,140,26,0.5);}
.orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;}
.orb.a{width:520px;height:520px;right:-140px;top:-120px;background:rgba(255,140,26,0.14);}
.orb.b{width:420px;height:420px;left:-160px;top:40vh;background:rgba(26,86,219,0.12);}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(232,237,245,0.012) 2px 3px);}

/* ---------- image bands (AI imagery slots) ---------- */
.imgBand{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:48px;
  height:clamp(280px,52vh,560px);clip-path:inset(0 round 14px);}
.imgBand img{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;}
.imgBand .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 24px;z-index:2;
  background:linear-gradient(to top, rgba(1,4,10,0.85), transparent);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--text2);}
.imgBand .cap b{color:var(--sunhot);}
.imgBand.pending img{display:none;}
.imgBand.pending::before{content:'IMAGE SLOT \00b7 SEE assets/img/IMAGE_PROMPTS.md';display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--text2);
  background:repeating-linear-gradient(45deg, rgba(255,140,26,0.04) 0 14px, transparent 14px 28px);}
.imgPair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:48px;}
.imgPair .imgBand{margin-top:0;height:clamp(240px,40vh,420px);}

/* HUD (helios page) reuses Helm style */
.hud{position:fixed;z-index:10;background:rgba(13,27,42,0.60);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(184,150,12,0.5);border-radius:8px;padding:14px 16px;}
.hud::before,.hud::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;}
.hud::before{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);border-top-left-radius:8px;}
.hud::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);border-bottom-right-radius:8px;}
.hud .heye{font-size:10px;letter-spacing:.2em;text-transform:none;color:var(--gold);margin-bottom:6px;font-weight:600;}
.hud .heye .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:7px;
  box-shadow:0 0 10px var(--gold);animation:dotpulse 2.2s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tRow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;padding:3px 0;border-bottom:1px dashed rgba(255,140,26,0.14);}
.tRow:last-child{border-bottom:none;}
.tRow .k{color:var(--text2);letter-spacing:.06em;}
.tRow .v{color:var(--text);} .tRow .v.gold{color:var(--gold);} .tRow .v.sun{color:var(--sunmid);}
.tRow .v.blue{color:#6FA0FF;} .tRow .v.ok{color:#39D98A;}

@media (max-width:860px){
  .topbar{padding:20px 22px;} .topclock{display:none;}
  .heroStatement{left:22px;bottom:120px;}
  .aboutRow{left:22px;} .motionToggle{right:22px;}
  .sect{padding:70px 22px;} .pageHero{padding:150px 22px 40px;}
  .family{grid-template-columns:1fr;gap:26px;padding:50px 0;}
  #panelTelemetry{display:none;}
  footer{padding:34px 22px;}
}


/* ---------- menu sub-pages (v2) ---------- */
#menuOverlay .mgroup{border-bottom:1px solid rgba(255,140,26,0.10);}
#menuOverlay .mrow{display:flex;align-items:center;gap:12px;}
#menuOverlay .mrow .mlink{flex:1;border-bottom:none;}
#menuOverlay .mtog{background:none;border:1px solid rgba(255,140,26,0.35);color:var(--sunhot);
  width:26px;height:26px;line-height:1;border-radius:5px;cursor:pointer;font-family:var(--mono);
  font-size:15px;flex:0 0 auto;transition:all .15s;}
#menuOverlay .mtog:hover{background:rgba(255,140,26,0.18);border-color:var(--sunmid);}
#menuOverlay .msubs{display:none;padding:2px 0 10px 66px;}
#menuOverlay .mgroup.open .msubs{display:flex;flex-wrap:wrap;gap:6px 26px;}
#menuOverlay .msub{font-family:var(--body);font-size:12.5px;letter-spacing:.04em;color:var(--text2);
  text-decoration:none;padding:3px 0;transition:color .15s;white-space:nowrap;}
#menuOverlay .msub::before{content:'\2039 ';color:var(--gold);}
#menuOverlay .msub:hover{color:var(--sunhot);}
#menuOverlay .msub.here{color:var(--text);}
@media (max-width:860px){#menuOverlay .msubs{padding-left:24px;} #menuOverlay .mgroup.open .msubs{flex-direction:column;gap:2px;}}


/* ---------- NON-LINK CARDS: no fake affordance (v3) ---------- */
.card:not(a):hover{transform:none !important;border-color:var(--line) !important;box-shadow:none !important;cursor:default;}
.card:not(a):hover::before{opacity:0 !important;}
.app:not(a):hover{transform:none !important;border-color:rgba(143,163,188,0.18) !important;background:rgba(13,27,42,0.35) !important;cursor:default;}
a.card,a.app{text-decoration:none;color:inherit;display:block;}
a.card h3::after{content:' \2192';color:var(--sunmid);opacity:0;transition:opacity .2s;}
a.card:hover h3::after{opacity:1;}
a.app h4::after{content:' \2192';color:var(--sunmid);opacity:0;transition:opacity .2s;}
a.app:hover h4::after{opacity:1;}