/* Scalehouse AI — shared site styles. Brand: ink/orange/white. */
:root{
  --ink:#0a0a0a; --panel:#141414; --orange:#ff7a1a; --text:#ededed;
  --dim:#a6a6a6; --line:#2e2e2e; --border:#3a3a3a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'Space Grotesk',Arial,sans-serif; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--orange)}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 32px}
.narrow{max-width:900px}

/* ---- header ---- */
.site-header{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.82); backdrop-filter:blur(10px)}
.site-header .bar{display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:12px 0}
.site-header .logo{height:62px; width:auto}
.site-nav{display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  font-size:15px; font-weight:700}
.site-nav a[aria-current="page"]{color:var(--orange)}

/* ---- brand lockup (mark + wordmark) ---- */
.brand{display:flex; align-items:center; gap:15px; text-decoration:none}
.brand img{height:56px; width:auto; display:block}
.brand .wm{display:flex; flex-direction:column; line-height:.88}
.brand .wm b{font-family:'Big Shoulders Display','Arial Narrow',sans-serif; font-weight:900;
  color:var(--text); letter-spacing:1.5px; font-size:31px}
.brand .wm small{font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--orange);
  letter-spacing:4px; font-size:10px; margin-top:4px}
.brand:hover .wm b{color:var(--text)}
.site-footer .brand img{height:62px}
@media (max-width:640px){
  .brand img{height:46px}
  .brand .wm b{font-size:25px}
}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:14px 24px; border-radius:6px; font-weight:700; font-size:16px; cursor:pointer;
  border:1px solid transparent; transition:transform .12s ease, background .15s ease, color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange); color:var(--ink)}
.btn--primary:hover{color:var(--ink); background:#ff8a33}
.btn--outline{border-color:var(--border); color:var(--text)}
.btn--outline:hover{border-color:var(--orange); color:var(--orange)}

/* ---- sections & type ---- */
.section{padding:92px 0}
.section--line{border-top:1px solid var(--line)}
.section--panel{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 10px; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:25px; line-height:1; color:var(--orange)}
.display{margin:0; font-weight:700; line-height:1.02; letter-spacing:-2px;
  font-size:clamp(44px,6vw,84px)}
.h-lg{margin:0; font-weight:700; line-height:1.06; letter-spacing:-1.5px;
  font-size:clamp(34px,4.4vw,58px)}
.h-md{margin:0; font-weight:700; line-height:1.08; letter-spacing:-1px;
  font-size:clamp(30px,3.4vw,46px)}
.lead{margin:0; font-size:19px; line-height:1.55; color:var(--dim); max-width:640px}
.accent{color:var(--orange)}

/* ---- numbered steps (the "what runs on its own" story) ---- */
.steps{display:flex; flex-direction:column; margin-top:8px}
.step{display:grid; grid-template-columns:72px 1fr; gap:8px 20px; align-items:start;
  padding:22px 0; border-top:1px solid var(--line)}
.step .num{font-family:'Big Shoulders Display','Arial Narrow',sans-serif; font-weight:900;
  font-size:46px; line-height:.8; color:var(--orange)}
.step h3{margin:0; font-size:clamp(20px,2.2vw,26px); font-weight:700; letter-spacing:-.3px}
.step p{margin:4px 0 0; grid-column:2; color:var(--dim); font-size:16px; line-height:1.5}

/* ---- lifecycle timeline (MGA flow — a distinct variant of .steps) ---- */
.steps--flow{position:relative}
.steps--flow::before{content:""; position:absolute; left:26px; top:40px; bottom:40px; width:2px; background:var(--border); z-index:0}
.steps--flow .step{border-top:0; grid-template-columns:54px 1fr; gap:4px 22px; padding:13px 0; align-items:start}
.steps--flow .step .num{width:54px; height:54px; border:2px solid var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:23px; line-height:1;
  color:var(--orange); background:var(--panel); position:relative; z-index:1}
.steps--flow .step h3{align-self:center}
.steps--flow .step p{grid-column:2}
@media (max-width:640px){
  .steps--flow::before{left:22px}
  .steps--flow .step{grid-template-columns:46px 1fr}
  .steps--flow .step .num{width:46px; height:46px; font-size:20px}
}

/* ---- capability grid ---- */
.capgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px 32px; margin-top:12px}
.capcell{border-top:3px solid var(--orange); padding-top:14px; display:flex; flex-direction:column; gap:8px}
.capcell h3{margin:0; font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
  font-weight:900; font-size:24px; letter-spacing:1px; color:var(--text)}
.capcell p{margin:0; font-size:15px; line-height:1.45; color:var(--dim)}

/* ---- download cards ---- */
.downloads{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:12px}
.dl-card{display:flex; flex-direction:column; gap:6px; padding:22px; border:1px solid var(--border);
  border-radius:10px; background:#111; transition:border-color .15s ease, transform .12s ease}
.dl-card:hover{border-color:var(--orange); transform:translateY(-2px)}
.dl-card .kicker{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; color:var(--dim)}
.dl-card h3{margin:0; font-size:19px; font-weight:700; color:var(--text)}
.dl-card .meta{margin:2px 0 0; font-size:14px; color:var(--dim)}
.dl-card .go{margin-top:8px; font-weight:700; color:var(--orange)}

/* ---- cta band ---- */
.cta-band{border-top:3px solid var(--orange); border-bottom:3px solid var(--orange); padding:72px 0}
.cta-band .inner{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}

/* ---- manifesto rows (why us) ---- */
.manifesto{width:100%; border-bottom:1px solid var(--line)}
.manifesto p{margin:0; padding:22px 0; border-top:1px solid var(--line); text-align:center;
  font-size:clamp(22px,2.6vw,32px); font-weight:700; line-height:1.2; letter-spacing:-.5px}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line); padding:40px 0}
.site-footer .bar{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.site-footer .logo{height:80px; width:auto}
.site-footer .tag{margin:0; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:26px; color:var(--dim)}
.site-footer .copy{margin:0; font-size:14px; color:var(--dim)}

/* ---- scroll reveal ---- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* signature: "UNDER A MINUTE" stamps in */
.umin{opacity:0; transform:scale(.93); transition:opacity .5s ease, transform .7s cubic-bezier(.2,1.1,.3,1)}
.umin.in{opacity:1; transform:none}

/* micro-interactions: card cursor glow + hover arrow-nudge */
.ncard{position:relative; overflow:hidden}
.ncard::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,122,26,.13), transparent 62%)}
.ncard:hover::after{opacity:1}
.ncard > span:last-child, .dl-card .go{display:inline-block; transition:transform .16s ease}
.ncard:hover > span:last-child, .dl-card:hover .go{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .umin{opacity:1; transform:none; transition:none}
  .ncard::after{display:none}
  .ncard > span:last-child, .dl-card .go{transition:none}
  .btn:hover,.dl-card:hover,.ncard:hover{transform:none}
  .ncard:hover > span:last-child, .dl-card:hover .go{transform:none}
}

/* ---- sidebar shell (top band + left rail) ---- */
.topband{display:flex; align-items:center; gap:28px;
  padding:20px 40px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  background:rgba(10,10,10,.92); backdrop-filter:blur(10px)}
.topbrand{display:flex; align-items:center; gap:28px; text-decoration:none}
.topbrand img{height:82px; width:auto; display:block}
.twm{display:flex; flex-direction:column; line-height:.86}
.twm b{font-family:'Big Shoulders Display','Arial Narrow',sans-serif; font-weight:900;
  font-size:clamp(30px,5vw,62px); letter-spacing:2px; color:var(--text)}
.twm .ai{font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--orange);
  letter-spacing:8px; font-size:15px; margin-top:7px}
.topband .tag{margin:0 0 0 auto; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:26px; color:var(--dim)}
.topband .tag span{color:var(--orange)}
.orule{height:3px; background:var(--orange)}

.shell{display:grid; grid-template-columns:232px 1fr}
.side{border-right:1px solid var(--line); padding:40px 28px; display:flex; flex-direction:column;
  gap:4px; position:sticky; top:126px; align-self:start; min-height:calc(100vh - 126px)}
.side-lbl{margin:0 0 14px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:2px; text-transform:uppercase; color:var(--dim)}
.side a{padding:13px 0; font-size:19px; font-weight:700; color:var(--text); border-bottom:1px solid var(--line)}
.side a:hover,.side a.active{color:var(--orange)}
.side a.active{position:relative}
.side a.side-cta{margin-top:26px; background:var(--orange); color:var(--ink); text-align:center;
  padding:14px 18px; border-radius:6px; font-size:16px; border-bottom:0}
.side a.side-cta:hover{color:var(--ink); background:#ff8a33}
.side-note{margin:26px 0 0; font-size:13.5px; line-height:1.5; color:var(--dim)}
.side-foot{margin:auto 0 0; padding-top:28px; font-size:13px; color:var(--dim)}
.main{min-width:0}

/* #5 active-nav tick */
.side a.active::before{content:""; position:absolute; left:-28px; top:7px; bottom:7px; width:4px;
  background:var(--orange); border-radius:0 2px 2px 0}

/* #3 home audience cards */
.ncard{display:flex; flex-direction:column; gap:14px; padding:32px; border:1px solid var(--border);
  border-radius:12px; background:#111; color:var(--text); transition:border-color .15s ease, transform .12s ease}
.ncard:hover{border-color:var(--orange); transform:translateY(-2px)}

/* #2 page footer (shown on mobile; sidebar carries it on desktop) */
.pagefoot{display:none; border-top:1px solid var(--line); padding:28px 20px; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap}
.pagefoot .pf-tag{margin:0; font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:20px; color:var(--dim)}
.pagefoot .pf-tag span{color:var(--orange)}
.pagefoot .pf-cta{font-weight:700; color:var(--orange); font-size:16px}
.pagefoot .pf-copy{margin:0; width:100%; font-size:13px; color:var(--dim)}

.navtoggle{display:none; margin-left:auto; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:transparent; border:1px solid var(--border);
  border-radius:6px; cursor:pointer}
.navtoggle span{display:block; width:20px; height:2px; background:var(--text)}

/* ---- responsive ---- */
@media (max-width:860px){
  .shell{display:block}
  .main{width:100%; overflow-x:hidden}
  .navtoggle{display:flex}
  .pagefoot{display:flex}
  .topband .tag{display:none}
  .side{position:fixed; top:0; left:0; width:264px; height:100vh; min-height:0; z-index:60;
    background:var(--ink); padding-top:92px; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.6)}
  .side.open{transform:none}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; opacity:0;
    pointer-events:none; transition:opacity .22s ease}
  .scrim.show{opacity:1; pointer-events:auto}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .section{padding:64px 0}
  .step{grid-template-columns:52px 1fr; gap:4px 14px}
  .step .num{font-size:34px}
  .topband{padding:12px 20px; gap:12px}
  .topbrand{gap:13px}
  .topbrand img{height:44px}
  .twm b{font-size:23px; letter-spacing:1px}
  .twm .ai{display:none}
}
@media (prefers-reduced-motion:reduce){ .side{transition:none} .scrim{transition:none} }