/* ================================================================
   Praxis Ab Machina - shared site styles
   Used by /about and /services/* pages.
   Mirrors the design language of the homepage:
   - palette: bone / paper / ink / cyan
   - faces: Instrument Serif (display), Inter (body), JetBrains Mono (chrome)
   - blueprint frame, corner ticks, mono eyebrows, hairline rules
   ================================================================ */

:root{
  --bone: #0a0d12;
  --bone-2: #10141b;
  --paper: #141923;
  --ink: #e6edf5;
  --ink-2: #c8d2de;
  --ink-soft: #6c7a8c;
  --rule: #1f2733;
  --copper: #00d4ff;
  --copper-deep: #0099c2;
  --machine: #050709;
  --grid: rgba(0,212,255,0.06);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ background:var(--bone); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; }
::selection{ background:var(--copper); color:#001018; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.mono{ font-family:'JetBrains Mono',monospace; font-weight:400; letter-spacing:0.01em; }
.serif{ font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-0.01em; }
.it{ font-style:italic; }
.uc{ text-transform:uppercase; letter-spacing:0.14em; }

/* ambient grid + glow (same as homepage) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:80px 80px;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(60vw 60vh at 80% 10%, rgba(0,212,255,0.06), transparent 60%),
    radial-gradient(50vw 50vh at 10% 80%, rgba(0,212,255,0.04), transparent 60%);
}
.grain{ position:fixed; inset:0; pointer-events:none; z-index:60; mix-blend-mode:screen; opacity:.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.85 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
section, footer, .page-hero{ position:relative; z-index:2; }

/* ───────────────────── NAV ───────────────────── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; backdrop-filter:blur(10px); background:rgba(10,13,18,0.6); border-bottom:1px solid var(--rule); }
.nav .lockup{ display:flex; gap:10px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
.nav .marker{ width:10px; height:10px; border:1px solid currentColor; transform:rotate(45deg); }
.nav ul{ list-style:none; display:flex; gap:28px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
.nav ul a{ position:relative; padding-bottom:2px; }
.nav ul a.active{ color:var(--copper); }
.nav ul a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--copper); }
.nav .cta-mini{ border:1px solid currentColor; padding:6px 12px; }
.nav .cta-mini:hover{ background:var(--copper); border-color:var(--copper); color:#001018; }
/* lockup pure white */
.nav .lockup{ color:#fff; }

/* ───────────────────── NAV DROPDOWN ───────────────────── */
.nav .has-sub{ position:relative; }
.nav .has-sub > a{ display:inline-flex; align-items:center; gap:6px; }
.nav .has-sub > a .chev{ display:inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); font-size:8px; color:var(--ink-soft); }
.nav .has-sub:hover > a .chev,
.nav .has-sub:focus-within > a .chev{ transform: rotate(180deg); color:var(--copper); }
.nav .has-sub::after{ content:""; position:absolute; left:-12px; right:-12px; top:100%; height:18px; pointer-events:none; }
.nav .has-sub:hover::after,
.nav .has-sub:focus-within::after{ pointer-events:auto; }
.nav .submenu{
  list-style:none; position:absolute; top:calc(100% + 14px); left:50%; transform: translate(-50%, -8px);
  display:flex; flex-direction:column; gap:0; min-width:260px; padding:6px 0;
  background: rgba(10,13,18,0.94); backdrop-filter: blur(14px) saturate(140%);
  border:1px solid var(--rule);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  opacity:0; pointer-events:none; visibility:hidden;
  transition: opacity .26s ease, transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
  box-shadow: 0 22px 48px rgba(0,0,0,0.5);
}
.nav .submenu::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transition: width .55s cubic-bezier(.2,.8,.2,1) .12s;
}
.nav .has-sub:hover .submenu,
.nav .has-sub:focus-within .submenu{
  opacity:1; pointer-events:auto; visibility:visible;
  transform: translate(-50%, 0);
  transition: opacity .26s ease, transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.nav .has-sub:hover .submenu::before,
.nav .has-sub:focus-within .submenu::before{ width:100%; }
.nav .submenu li{ display:block; opacity:0; transform: translateY(-6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.nav .has-sub:hover .submenu li,
.nav .has-sub:focus-within .submenu li{ opacity:1; transform: translateY(0); }
.nav .has-sub:hover .submenu li:nth-child(1){ transition-delay:.06s; }
.nav .has-sub:hover .submenu li:nth-child(2){ transition-delay:.12s; }
.nav .has-sub:hover .submenu li:nth-child(3){ transition-delay:.18s; }
.nav .submenu a{
  display:flex; align-items:center; gap:10px; padding:11px 18px 11px 22px; color:var(--ink-2);
  position:relative; transition: background .25s ease, color .25s ease, padding-left .3s ease;
  white-space:nowrap;
}
.nav .submenu a .num{ color:var(--copper); font-size:9px; opacity:.7; }
.nav .submenu a.active{ color:var(--copper); }
.nav .submenu a::before{
  content:""; position:absolute; left:10px; top:50%; transform: translateY(-50%);
  width:0; height:1px; background: var(--copper); transition: width .3s ease;
}
.nav .submenu a:hover{ color: var(--copper); padding-left:34px; background: rgba(0,212,255,0.05); }
.nav .submenu a:hover::before{ width:14px; }
@media (max-width: 920px){ .nav .submenu{ display:none; } }

/* HUD verticals */
.hud{ position:fixed; left:14px; top:50%; transform:translateY(-50%) rotate(180deg); z-index:40; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--ink-soft); writing-mode:vertical-rl; }
.hud-r{ position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:40; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--ink-soft); writing-mode:vertical-rl; }

/* progress (passive on inner pages) */
.progress{ position:fixed; bottom:18px; left:28px; right:28px; z-index:50; display:flex; gap:18px; align-items:center; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; }
.progress .bar{ flex:1; height:1px; background:var(--rule); position:relative; overflow:hidden; }
.progress .bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--copper); width:0%; box-shadow:0 0 8px var(--copper); }

/* ───────────────────── PAGE HERO (dossier head) ───────────────────── */
.page-hero{ padding:140px 28px 60px; position:relative; }
.page-hero .frame{ position:absolute; inset:120px 28px 40px 28px; border:1px solid var(--rule); pointer-events:none; }
.page-hero .frame::before, .page-hero .frame::after{ content:""; position:absolute; width:14px; height:14px; border:1px solid var(--copper); }
.page-hero .frame::before{ top:-7px; left:-7px; }
.page-hero .frame::after{ bottom:-7px; right:-7px; }
.page-hero .frame-tr, .page-hero .frame-bl{ position:absolute; width:14px; height:14px; border:1px solid var(--copper); }
.page-hero .frame-tr{ top:113px; right:21px; }
.page-hero .frame-bl{ bottom:33px; left:21px; }

.page-hero-inner{ position:relative; max-width:1320px; margin:0 auto; padding:24px 28px 40px; }
.crumb{ display:flex; gap:14px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:48px; }
.crumb a:hover{ color:var(--copper); }
.crumb .sep{ opacity:.5; }
.crumb .here{ color:var(--copper); }

.page-meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:48px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.page-meta .dot{ display:inline-block; width:6px; height:6px; background:var(--copper); border-radius:50%; margin-right:8px; vertical-align:middle; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

.page-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--copper); margin-bottom:32px; display:flex; align-items:center; gap:10px; }
.page-eyebrow .ix{ color:var(--copper); }
.page-eyebrow::before{ content:""; width:24px; height:1px; background:var(--copper); display:inline-block; }

h1.page-h1{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(48px, 8vw, 124px); line-height:0.94; letter-spacing:-0.02em; max-width:18ch; }
h1.page-h1 .it{ font-style:italic; color:var(--copper); }
h1.page-h1 .small{ display:block; font-family:'Inter',sans-serif; font-style:normal; font-weight:300; font-size:0.16em; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.8em; }

.page-lede{ font-family:'Instrument Serif',serif; font-size:clamp(20px, 2vw, 28px); line-height:1.3; max-width:54ch; color:var(--ink-2); margin-top:48px; }
.page-lede em{ color:var(--copper); font-style:italic; }

/* ───────────────────── SECTION SCAFFOLD ───────────────────── */
section.std{ padding:120px 28px; position:relative; }
section.std.tight{ padding:80px 28px; }
.container{ max-width:1320px; margin:0 auto; width:100%; position:relative; }
.section-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; margin-bottom:64px; padding-bottom:24px; border-bottom:1px solid var(--rule); }
.section-head .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.section-head .eyebrow .num{ color:var(--copper); }
.section-head h2{ font-family:'Instrument Serif',serif; font-size:clamp(36px, 5.4vw, 76px); line-height:0.98; letter-spacing:-0.02em; max-width:18ch; }
.section-head h2 .it{ font-style:italic; color:var(--copper); }
.section-head .right{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); text-align:right; min-width:180px; line-height:1.7; }

/* hairline rule */
.rule{ border:none; border-top:1px solid var(--rule); margin:0; }

/* ───────────────────── CTA BAND (shared) ───────────────────── */
.cta{ background:var(--paper); color:var(--ink); padding:140px 28px; position:relative; overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.cta .container{ position:relative; z-index:2; text-align:center; }
.cta h2{ font-family:'Instrument Serif',serif; font-size:clamp(56px, 9vw, 144px); line-height:0.95; letter-spacing:-0.02em; }
.cta h2 .it{ font-style:italic; color:var(--copper); }
.cta .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.cta-btn{ display:inline-flex; align-items:center; gap:14px; padding:18px 26px; border:1px solid var(--ink); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; transition:all .3s ease; cursor:pointer; background:transparent; color:inherit; }
.cta-btn.primary{ background:var(--copper); border-color:var(--copper); color:#001018; box-shadow:0 0 24px rgba(0,212,255,0.35); }
.cta-btn:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.cta-btn.primary:hover{ background:#fff; border-color:#fff; color:#001018; box-shadow:0 0 36px rgba(0,212,255,0.55); }
.cta-btn .arrow{ display:inline-block; transition:transform .3s ease; }
.cta-btn:hover .arrow{ transform:translateX(4px); }
.cta .ortho{ position:absolute; inset:0; opacity:.16; }
.cta .ortho .ring1{ transform-origin:center; animation:spin 60s linear infinite; }
.cta .ortho .ring2{ transform-origin:center; animation:spin 80s linear infinite reverse; }
.cta .ortho .ring3{ transform-origin:center; animation:spin 120s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.cta .small-print{ margin-top:36px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }

/* ───────────────────── FOOTER ───────────────────── */
footer{ background:var(--bone); padding:60px 28px 28px; border-top:1px solid var(--rule); }
footer .container{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; }
footer .col h5{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; }
footer .col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
footer .col ul li{ font-size:14px; }
footer .col ul li a:hover{ color:var(--copper); }
footer .footer-mark{ font-family:'Instrument Serif',serif; font-size:clamp(64px, 10vw, 156px); line-height:0.9; letter-spacing:-0.03em; }
footer .footer-mark .it{ font-style:italic; color:var(--copper); }
footer .copyline{ display:flex; justify-content:space-between; padding-top:60px; margin-top:60px; border-top:1px solid var(--rule); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); }

/* reveal */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:.1s; }
.reveal-d2{ transition-delay:.2s; }
.reveal-d3{ transition-delay:.3s; }

/* responsive */
@media (max-width: 920px){
  .nav ul{ display:none; }
  .hud, .hud-r{ display:none; }
  .section-head{ grid-template-columns:1fr; }
  .section-head .right{ text-align:left; }
  footer .container{ grid-template-columns:1fr 1fr; }
  .progress{ display:none; }
}