/* CELLUREX v2 — style.css — 2026-10-18 staging */
/* Fonts */
@font-face{font-family:Noto;src:url(assets/noto.ttf)}
@font-face{font-family:Montserrat;src:url(assets/montserrat.ttf)}
@font-face{font-family:OpenSans;src:url(assets/opensans.ttf)}
@font-face{font-family:Poppins;src:url(assets/poppins.ttf)}

/* Reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#0B0F1A;overflow-x:hidden}
body{margin:0;color:#f4f0e9;background:#0B0F1A;font-family:OpenSans,Noto,sans-serif;line-height:1.6;overflow-x:hidden}
body.kol{--accent:#E9A974;--panel:#191e2b;font-family:Poppins,Noto,sans-serif}
body.cell{--accent:#8DA9C4;--panel:#0B2545}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a.btn{cursor:pointer}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;padding:12px 24px;background:var(--accent);color:#0b0f1a;font-weight:700;border-radius:0 0 4px 0}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;overflow:visible}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Review bar */
.reviewbar{background:#242b37;color:#d4c9b5;font:13px/1.65 Noto,sans-serif;padding:8px 5vw;overflow-wrap:break-word;word-break:break-word}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;border-bottom:1px solid #ffffff20;gap:20px}
.wordmark{font:700 21px Montserrat,Noto,sans-serif;letter-spacing:.08em}
nav{display:flex;gap:28px;font-size:13px}
nav a:hover,nav a[aria-current=page]{color:var(--accent)}
nav a[aria-current=page]{border-bottom:2px solid var(--accent);padding-bottom:2px}
.menu{display:none;padding:12px 16px;min-width:44px;min-height:44px}

/* Breadcrumb */
.breadcrumb{padding:16px 0 0}
.breadcrumb ol{list-style:none;display:flex;gap:8px;padding:0;margin:0;font-size:13px;color:#9ea9b8}
.breadcrumb li+li::before{content:"/ ";color:#6b7a8d;margin-right:8px}
.breadcrumb a{color:var(--accent)}
.breadcrumb a:hover{text-decoration:underline}

/* Layout */
.wrap{max-width:1440px;margin:auto;padding:0 5vw;overflow-x:hidden}

/* Hero */
.hero{min-height:720px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;position:relative;overflow:hidden}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);word-break:break-word}
h1{font:600 clamp(44px,5.8vw,86px)/1.07 Montserrat,Noto,sans-serif;letter-spacing:-.06em;margin:28px 0}
.kol h1{font-family:Poppins,Noto,sans-serif}
h1 em{font-style:normal;color:var(--accent)}
h2{font:600 clamp(30px,3.4vw,50px)/1.2 Montserrat,Noto,sans-serif;letter-spacing:-.04em}
h3{font-size:21px;line-height:1.35}

/* Contrast-fixed text (WCAG AA 4.5:1 against #0B0F1A) */
.intro{max-width:500px;color:#c8ced8;font-size:16px;overflow-wrap:break-word}
.fine{font-size:12px;color:#b3bcc8;overflow-wrap:break-word}

/* Buttons */
.btn,button{border:1px solid #ffffff40;background:transparent;color:inherit;padding:13px 22px;border-radius:3px;display:inline-block;transition:transform .18s,background .18s,box-shadow .18s;min-height:44px}
.btn.primary,button.primary{background:var(--accent);color:#0b0f1a;border-color:var(--accent);font-weight:600}
button:hover,.btn:hover{transform:translateY(-3px);background:var(--panel);box-shadow:0 4px 16px #0004}
button.primary:hover,.btn.primary:hover{background:#fff}
button:active,.btn:active{transform:translateY(0);box-shadow:none}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Focus (high contrast for all interactive) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=tab]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Stage / depth card */
.stage{height:530px;position:relative;perspective:1000px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,var(--panel),transparent 67%);margin-top:18px;overflow:hidden}
.depth{width:68%;height:365px;position:relative;transform-style:preserve-3d;transform:rotateY(-12deg) rotateX(5deg);transition:transform .2s;animation:arrive .75s cubic-bezier(.2,.9,.1,1)}
@keyframes arrive{from{transform:translateY(90px) rotateY(40deg) scale(.8)}to{transform:rotateY(-12deg) rotateX(5deg)}}
.face{position:absolute;inset:0;background:linear-gradient(145deg,#293342,#111623);border:1px solid #ffffff35;box-shadow:25px 30px 70px #0008;padding:30px;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(35px)}
.rear{position:absolute;inset:0;transform:translate3d(30px,-24px,-45px);border:1px solid var(--accent);opacity:.45}
.giant{font:700 76px/1 Montserrat,Noto,sans-serif;letter-spacing:-.07em;position:relative;z-index:3}
.orb{height:175px;width:175px;border:1px solid var(--accent);border-radius:50%;position:absolute;right:-30px;top:175px;transform:translateZ(65px);animation:orbit 14s linear infinite;opacity:.16;pointer-events:none}
.orb:before,.orb:after{content:'';position:absolute;inset:20px;border:1px solid var(--accent);border-radius:50%;transform:rotateX(64deg)}
.orb:after{transform:rotateY(64deg)}
@keyframes orbit{to{transform:translateZ(65px) rotate(360deg)}}
.pin{position:absolute;z-index:2;background:#0b0f1ae8;padding:10px 15px;border:1px solid #ffffff30;font-size:11px;max-width:160px;transform:translateZ(100px)}
.pin.one{top:-38px;left:0}
.pin.two{bottom:-25px;right:0}
.stage-caption{position:absolute;bottom:0;left:10%;right:10%;text-align:center;font-size:12px;color:#ccd4df}
.face .status{padding-top:15px;font-size:10px}

/* Band */
.band{border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25;display:flex;justify-content:space-between;gap:20px;padding:22px 0;color:#b3bcc8;font-size:12px;letter-spacing:.12em}

/* Sections */
.section{padding:100px 0;border-bottom:1px solid #ffffff20}
.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.sectionhead p{max-width:440px;color:#b3bcc8}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:30px;background:#111827;border:1px solid #ffffff20;transition:transform .25s,border-color .25s;min-height:240px}
.card:hover{transform:perspective(800px) rotateY(-4deg) translateY(-6px);border-color:var(--accent)}
.number{font:400 45px Montserrat,sans-serif;color:var(--accent)}
.card p{color:#b3bcc8;font-size:14px}

/* Tabs */
.tabs{display:flex;gap:12px;flex-wrap:wrap}
.tabs button{min-height:44px;min-width:44px}
.tabs button[aria-selected=true]{background:var(--accent);color:#0b0f1a}
.tabpanel{padding:35px;border-left:2px solid var(--accent);margin-top:25px;background:var(--panel);min-height:190px;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px}

/* Evidence */
.evidence{border:1px dashed #738295;padding:32px;min-height:250px;color:#b3bcc8;background:#0c121d}
.evidence strong{display:block;font:600 30px Montserrat,sans-serif;color:#f3f1ec;margin-bottom:16px}
.status{font-size:11px;letter-spacing:.1em;color:var(--accent)}

/* FAQ details */
details{border-bottom:1px solid #ffffff30;padding:20px 0}
summary{cursor:pointer;font-size:18px;min-height:44px;display:flex;align-items:center}
details p{color:#b3bcc8}

/* Form */
.form{background:var(--panel);padding:32px;border-radius:4px}
.field{margin-bottom:20px}
.form label{display:block;margin-bottom:6px;font-size:13px}
.required{color:var(--accent)}
input,select,textarea{width:100%;background:#0b0f1a;color:white;border:1px solid #ffffff40;padding:13px;border-radius:3px;min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#e74c3c}
textarea{min-height:100px;resize:vertical}
.field-error{font-size:12px;color:#e74c3c;min-height:18px;display:block}
.field-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.char-counter{font-size:12px;color:#9ea9b8}
.result{margin-top:20px;white-space:pre-wrap;color:#e8d5b9}
.slider{margin:20px 0;min-height:44px}
.note{padding:20px;border-left:2px solid var(--accent);color:#c0c9d5}

/* Reveal animation — starts visible, JS adds .js-reveal to enable animation */
.js-reveal .reveal{transition:transform .65s,opacity .65s;transform:translateY(32px);opacity:0}
.js-reveal .reveal.visible{transform:translateY(0);opacity:1}

/* Staggered card animation */
.js-reveal .card{transition:transform .25s,border-color .25s,opacity .5s;opacity:0}
.js-reveal .reveal.visible .card{opacity:1}
.reveal.visible .card:nth-child(1){transition-delay:.1s}
.reveal.visible .card:nth-child(2){transition-delay:.25s}
.reveal.visible .card:nth-child(3){transition-delay:.4s}

/* Back to top */
.back-to-top{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--panel);border:1px solid var(--accent);color:var(--accent);font-size:20px;display:grid;place-items:center;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;z-index:100;cursor:pointer}
.back-to-top.show{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);color:#0b0f1a}

/* Footer */
footer{padding:35px 5vw;display:flex;justify-content:space-between;align-items:center;gap:25px;color:#9ea9b8;font-size:12px}
footer nav{display:flex;gap:16px}
footer a:hover{color:var(--accent)}

/* ========== TABLET 700-1024px ========== */
@media(min-width:701px) and (max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:auto;gap:32px}
  .stage{height:400px}
  .depth{width:55%}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid .card:last-child{grid-column:span 2}
  .split{grid-template-columns:1fr;gap:40px}
  .sectionhead{flex-direction:column;align-items:start}
  h1{font-size:clamp(38px,5vw,60px)}
}

/* ========== MOBILE <=700px ========== */
@media(max-width:700px){
  header{padding:18px 6vw;flex-wrap:wrap}
  .wordmark{font-size:16px}
  .menu{display:block}
  nav{display:none;width:100%;flex-direction:column;gap:15px;padding-top:12px}
  nav.open{display:flex}
  .wrap{padding:0 6vw}
  .hero{display:block;min-height:0;padding-top:48px}
  h1{font-size:38px;word-break:break-word}
  .eyebrow{font-size:10px;letter-spacing:.12em}
  .kol h1{font-size:42px}
  .kol h1 em{font-size:40px;white-space:nowrap}
  .hero .intro{font-size:14px}
  .hero .actions{gap:10px;flex-direction:column}
  .hero .actions .btn{text-align:center}
  .stage{height:340px;margin-top:20px;overflow:hidden;perspective:none}
  .depth{height:250px;width:65%;transform-style:flat;transform:none}
  .giant{font-size:48px}
  .orb{width:100px;height:100px;top:120px}
  .face{padding:22px}
  .pin.one{left:0;top:-28px;font-size:9px;max-width:130px;transform:none}
  .pin.two{right:0;bottom:-18px;font-size:9px;max-width:130px;transform:none}
  .depth{transform-style:flat}
  .face{transform:none}
  .rear{transform:none;display:none}
  .orb{transform:none}
  .band{flex-wrap:wrap;font-size:10px}
  .section{padding:65px 0}
  .sectionhead{display:block}
  .grid,.split{grid-template-columns:1fr;gap:20px}
  .grid .card:last-child{grid-column:auto}
  .card{min-height:180px}
  .form{padding:22px}
  .tabpanel{padding:24px}
  footer{flex-direction:column}
  h2{font-size:34px}
  .stage-caption{font-size:11px}
  .reviewbar{font-size:12px}
  .back-to-top{bottom:16px;right:16px}
}

/* ========== LANDSCAPE PHONE ========== */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:24px}
  .stage{height:300px}
  .depth{height:220px}
  .section{padding:48px 0}
}

/* ========== REDUCED MOTION ========== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{transform:none!important;opacity:1!important}
  .depth{transform:none!important}
  .card{opacity:1!important}
  .back-to-top{transition:none!important}
}

/* ========== PRINT ========== */
@media print{
  body{background:#fff;color:#111}
  .reviewbar,.stage,.orb,.back-to-top,.menu,footer nav{display:none}
  header{border-bottom:1px solid #ccc}
  .wordmark{color:#111}
  a{color:#0B2545}
  .card{border:1px solid #ccc;break-inside:avoid}
  .section{padding:24px 0;border-bottom:1px solid #ddd}
  .evidence{border:1px dashed #999;background:#f9f9f9;color:#333}
  .evidence strong{color:#111}
  .form{background:#f5f5f5}
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}