/* ============================================================
   Butler Performance — HOME (cockpit direction)
   Loaded ONLY on index.html, layered over styles.css. All homepage
   classes are ck-* so nothing here can affect other pages. Overrides
   to the shared nav/footer/contact are gated by home.css being
   homepage-only, so generated pages are untouched.
   ============================================================ */
:root{
  --ck-bg:#08080a; --ck-panel:#0f0f13; --ck-panel2:#15151a; --ck-line:#26262c;
  --ck-ink:#f2f2f4; --ck-mut:#8a8a93; --ck-crim:#E01420; --ck-crim2:#C70F18;
  --ck-crim-text:#FF3B41; /* small crimson TEXT on dark — clears WCAG AA 4.5:1 */
  --ck-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ck-body:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --ck-edge:clamp(1.1rem,4vw,4rem);
}
body{ background:var(--ck-bg); color:var(--ck-ink); font-family:var(--ck-body); }
#main{ overflow:clip; }
.ck-wrap{ max-width:1240px; margin-inline:auto; padding-inline:var(--ck-edge); }
.ck-mono{ font-family:var(--ck-mono); }
.ck-kick{ font-family:var(--ck-mono); font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ck-mut); }
.ck-kick .c{ color:var(--ck-crim-text); }

/* ---- nav: mono cockpit skin (homepage only) ---- */
.site-header{ background:rgba(8,8,10,.6); border-bottom:1px solid transparent; backdrop-filter:blur(8px); }
.site-header.scrolled{ background:rgba(8,8,10,.9); border-bottom-color:var(--ck-line); box-shadow:none; }
.brand-word{ font-family:var(--ck-mono); font-style:normal; font-weight:800; letter-spacing:.03em; text-transform:uppercase; font-size:1rem; }
.footer-tag, .tri li{ font-family:var(--ck-mono); font-style:normal; }
.brand-word .accent{ color:var(--ck-crim-text); }
.nav a{ font-family:var(--ck-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ck-mut); }
.nav a:hover{ color:var(--ck-ink); }
.nav .nav-cta{ border:1px solid var(--ck-ink); background:transparent; color:var(--ck-ink); border-radius:999px; }
.nav .nav-cta:hover{ background:var(--ck-ink); color:var(--ck-bg); }

/* ---- section shell ---- */
.ck-sec{ position:relative; padding-block:clamp(4rem,9vw,7.5rem); border-top:1px solid var(--ck-line); }
.ck-head{ text-align:center; margin-bottom:2.8rem; }
.ck-head h2{ font-family:var(--ck-mono); font-weight:800; font-size:clamp(1.8rem,3.8vw,2.9rem); letter-spacing:-.02em; margin-top:.8rem; text-wrap:balance; }
.ck-head p{ color:#b9b9c1; max-width:56ch; margin:.9rem auto 0; }

/* ---- HERO ---- */
.ck-hero{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.ck-hud{ position:absolute; left:50%; top:-10%; width:200%; height:125%; transform:translateX(-50%) perspective(680px) rotateX(62deg); transform-origin:top center;
  background-image:linear-gradient(rgba(224,20,32,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(224,20,32,.15) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 82% at 50% 0%,#000 24%,transparent 72%); mask-image:radial-gradient(120% 82% at 50% 0%,#000 24%,transparent 72%);
  pointer-events:none; will-change:transform; }
.ck-glow{ position:absolute; left:50%; top:44%; width:900px; height:900px; max-width:120vw; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(224,20,32,.17),transparent 60%); filter:blur(8px); pointer-events:none; }
.ck-hero-inner{ position:relative; z-index:2; padding-top:5rem; }
.ck-hero h1{ font-family:var(--ck-mono); font-weight:800; font-size:clamp(2.4rem,7vw,5.4rem); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
.ck-hero h1 .c{ color:var(--ck-crim); }
.ck-hero .ck-sub{ max-width:52ch; margin:1.6rem auto 0; color:#c7c7ce; font-size:clamp(1rem,1.6vw,1.2rem); }
.ck-cta{ display:flex; gap:.8rem; justify-content:center; margin-top:2.2rem; flex-wrap:wrap; }
.ck-btn{ font-family:var(--ck-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; padding:.95rem 1.5rem; border-radius:999px; border:1px solid var(--ck-line); color:var(--ck-ink); transition:transform .18s var(--ease,ease), background .2s, color .2s, border-color .2s; }
.ck-btn-primary{ background:var(--ck-crim); border-color:var(--ck-crim); color:#fff; }
.ck-btn-primary:hover{ transform:translateY(-2px); background:var(--ck-crim2); }
.ck-btn-ghost:hover{ border-color:var(--ck-ink); transform:translateY(-2px); }
.ck-readout{ position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); display:flex; gap:2.2rem; font-family:var(--ck-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ck-mut); z-index:2; white-space:nowrap; }
.ck-readout b{ color:var(--ck-crim-text); font-weight:700; }
@media(max-width:640px){ .ck-readout{ gap:1rem; font-size:.58rem; } .ck-hero-inner{ padding-top:4rem; } }

/* ---- SYSTEMS (cockpit pills) ---- */
.ck-pills{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; max-width:920px; margin-inline:auto; }
.ck-pill{ font-family:var(--ck-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:#cfcfd6; background:var(--ck-panel); border:1px solid var(--ck-line); border-radius:11px; padding:.85rem 1.2rem; display:flex; align-items:center; gap:.6rem; transition:border-color .2s,color .2s,transform .2s,background .2s; }
.ck-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ck-crim); opacity:.5; transition:opacity .2s; }
.ck-pill:hover{ border-color:var(--ck-crim); color:#fff; transform:translateY(-3px); background:var(--ck-panel2); }
.ck-pill:hover::before{ opacity:1; }
.ck-more{ text-align:center; margin-top:2.1rem; }
.ck-more a{ font-family:var(--ck-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ck-mut); }
.ck-more a:hover{ color:var(--ck-crim); }

/* ---- FRAMEWORK (organized around the build) ---- */
.ck-frame{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ck-phase{ background:var(--ck-panel); border:1px solid var(--ck-line); border-radius:16px; padding:1.7rem 1.6rem; display:flex; flex-direction:column; min-height:220px; transition:border-color .25s, transform .25s, background .25s; }
.ck-phase:hover{ border-color:var(--ck-crim); transform:translateY(-4px); background:var(--ck-panel2); }
.ck-phase .ph-ico{ width:40px; height:40px; border-radius:10px; border:1px solid var(--ck-line); display:grid; place-items:center; color:var(--ck-crim); margin-bottom:1.1rem; }
.ck-phase .ph-ico svg{ width:20px; height:20px; }
.ck-phase .ph-step{ font-family:var(--ck-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ck-mut); }
.ck-phase h3{ font-family:var(--ck-mono); font-weight:700; font-size:1.25rem; margin:.25rem 0 .6rem; letter-spacing:-.01em; }
.ck-phase p{ color:#aeaeb6; font-size:1rem; margin-top:auto; }
@media(max-width:760px){ .ck-frame{ grid-template-columns:1fr; } .ck-phase{ min-height:0; } }

/* ---- WORK (flight log) ---- */
.ck-work-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(224px,1fr); grid-template-areas:"a a b" "c d b" "e f f"; }
.ck-wcard{ position:relative; border:1px solid var(--ck-line); border-radius:14px; overflow:hidden; background:#000; min-height:224px; }
.ck-wcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.6; transition:opacity .45s,transform .6s; }
.ck-wcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.95),transparent 66%); }
.ck-wcard:hover img{ opacity:.9; transform:scale(1.04); }
.ck-wcard:hover{ border-color:var(--ck-crim); }
.ck-wcard .m{ position:absolute; inset:auto 0 0 0; z-index:1; padding:1.2rem 1.35rem; }
.ck-wcard .t{ font-family:var(--ck-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ck-crim-text); }
.ck-wcard h3{ font-family:var(--ck-mono); font-weight:700; font-size:1.15rem; margin-top:.3rem; letter-spacing:-.01em; }
.ck-wcard .go{ display:block; margin-top:.5rem; font-family:var(--ck-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ck-mut); }
.ck-wcard:hover .go{ color:#fff; }
@media(max-width:760px){ .ck-work-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b b" "c d" "e f"; } }
@media(max-width:520px){ .ck-work-grid{ grid-template-columns:1fr; grid-template-areas:none; } .ck-wcard{ grid-area:auto!important; } }

/* ---- PROOF band ---- */
.ck-proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem; }
.ck-stat{ text-align:center; border:1px solid var(--ck-line); border-radius:14px; padding:1.6rem 1rem; background:var(--ck-panel); }
.ck-stat b{ display:block; font-family:var(--ck-mono); font-weight:800; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--ck-ink); }
.ck-stat span{ font-family:var(--ck-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ck-mut); }
@media(max-width:620px){ .ck-proof-grid{ grid-template-columns:1fr; } }

/* ---- CONTACT (reuse the shared form markup, cockpit skin) ---- */
.contact.section-dark{ background:transparent; border-top:1px solid var(--ck-line); }
#contact .sec-num{ font-family:var(--ck-mono); letter-spacing:.16em; }
#contact .sec-h, #contact .sec-h .red{ font-family:var(--ck-mono); font-style:normal; font-weight:800; letter-spacing:-.02em; }
#contact .sec-h .red{ color:var(--ck-crim); }
#contact .sec-lead{ color:#b9b9c1; }
.contact-form{ background:var(--ck-panel); border:1px solid var(--ck-line); border-radius:16px; }
.contact-form label{ font-family:var(--ck-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ck-mut); }
.contact-form input, .contact-form select, .contact-form textarea{ background:var(--ck-bg); border:1px solid var(--ck-line); color:var(--ck-ink); border-radius:10px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--ck-crim); outline:none; }
.contact-form .btn-red{ background:var(--ck-crim); border-radius:999px; font-family:var(--ck-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.contact-direct .cd-label{ font-family:var(--ck-mono); }
.contact-direct a{ font-family:var(--ck-mono); font-size:.9rem; }

/* ---- reveal (visible by default; JS hides via .js-anim then reveals on scroll,
   so no-JS / reduced-motion / CDN-fail all stay visible) ---- */
.ck-anim{ transition:opacity .7s var(--ease-expo,cubic-bezier(.16,1,.3,1)), transform .7s var(--ease-expo,cubic-bezier(.16,1,.3,1)); }
.js-anim .ck-anim{ opacity:0; transform:translateY(22px); }
.ck-anim.in{ opacity:1; transform:none; }
/* hero pieces hidden pre-reveal (motion.js reveals them, then drops .pre-motion) */
.pre-motion .ck-hero h1, .pre-motion .ck-hero .ck-kick, .pre-motion .ck-hero .ck-sub, .pre-motion .ck-hero .ck-cta, .pre-motion .ck-hero .ck-readout{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .js-anim .ck-anim, .ck-anim{ opacity:1!important; transform:none!important; transition:none; }
  .pre-motion .ck-hero h1, .pre-motion .ck-hero .ck-kick, .pre-motion .ck-hero .ck-sub, .pre-motion .ck-hero .ck-cta, .pre-motion .ck-hero .ck-readout{ opacity:1; }
}