/* =========================================================
   MENSAH MASTERPIECE SITE
   Global styling is intentionally placed at the top.
   Change colors, fonts, spacing, radius, and shadows here.
========================================================= */
:root{
  --primary:#FF9900;
  --primary-dark:#cc7a00;
  --secondary:#111111;
  --secondary-soft:#1a1a1a;
  --panel:#222222;
  --white:#ffffff;
  --gray:#cfcfcf;
  --muted:#898989;
  --border:#333333;

  --heading:'Roboto Slab', serif;
  --body:'Libre Franklin', sans-serif;
  --script:'Ephesis', cursive;

  --container:1180px;
  --section-padding:92px;
  --radius:18px;
  --radius-lg:30px;
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --transition:260ms ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--secondary);
  color:var(--white);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea,select{font:inherit}

.wrap{width:min(100% - 36px,var(--container));margin-inline:auto}
.section{padding:var(--section-padding) 0}
.eyebrow{color:var(--primary);text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:.78rem;margin-bottom:14px}
.script{font-family:var(--script);font-size:clamp(2.2rem,6vw,5.4rem);font-weight:400;color:var(--primary);line-height:1}
.display{font-family:var(--heading);font-size:clamp(3.2rem,10vw,8.4rem);line-height:.93;font-weight:900;letter-spacing:-.06em}
h1,h2,h3{font-family:var(--heading);line-height:1.05}
h2{font-size:clamp(2.2rem,5vw,4.9rem);letter-spacing:-.045em}
h3{font-size:clamp(1.3rem,2vw,2rem)}
p{color:var(--gray)}
.muted{color:var(--muted)}
.orange{color:var(--primary)}

.btn{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--primary);background:var(--primary);color:#111;padding:14px 22px;border-radius:999px;font-weight:900;transition:var(--transition);cursor:pointer}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(255,153,0,.25)}
.btn.ghost{background:transparent;color:var(--white)}
.btn.ghost:hover{background:var(--primary);color:#111}

.site-header{position:sticky;top:0;z-index:50;background:rgba(17,17,17,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--heading);font-size:1.35rem;font-weight:900;letter-spacing:.04em}
.logo-mark{width:44px;height:44px;border:3px solid #000;background:var(--primary);color:#111;display:grid;place-items:center;border-radius:12px;box-shadow:6px 6px 0 #000;font-weight:900}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.92rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{color:var(--gray);transition:var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}
.menu-btn{display:none;border:0;background:var(--primary);color:#111;border-radius:10px;padding:10px 13px;font-weight:900}

.hero{min-height:calc(100vh - 82px);display:grid;align-items:center;position:relative;padding:70px 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:7% -18% auto auto;width:520px;height:520px;background:radial-gradient(circle,rgba(255,153,0,.28),transparent 60%);filter:blur(10px);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero-copy p{max-width:640px;font-size:clamp(1.08rem,2vw,1.45rem);margin:24px 0 30px;font-style:italic}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-card{position:relative;background:var(--panel);border:12px solid #000;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);transform:rotate(2deg)}
.hero-art{aspect-ratio:4/5;border-radius:20px;background:linear-gradient(135deg,var(--primary),#fff 55%,#333);display:grid;place-items:center;color:#111;min-height:430px;overflow:hidden}
.hero-art span{font-family:var(--script);font-size:clamp(5rem,12vw,9rem);transform:rotate(-7deg)}
.hero-badge{position:absolute;left:-28px;bottom:38px;background:#000;border:2px solid var(--primary);border-radius:999px;padding:13px 18px;font-weight:900;color:var(--primary)}

.marquee{display:flex;gap:32px;overflow:hidden;border-block:1px solid var(--border);background:#080808;color:var(--primary);font-family:var(--heading);font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:18px 0;white-space:nowrap}
.marquee span{animation:scroll 22s linear infinite;display:inline-block;min-width:100%}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.panel{background:var(--secondary-soft);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}
.panel.orange-panel{background:var(--primary);color:#111;border-color:#000}
.panel.orange-panel p{color:#271900}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.stat{background:#000;border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.stat strong{display:block;font-family:var(--heading);font-size:2rem;color:var(--primary)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px}
.section-head p{max-width:520px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--secondary-soft);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:var(--transition);min-height:240px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;background:rgba(255,153,0,.11);border-radius:50%}
.card:hover{transform:translateY(-8px);border-color:var(--primary)}
.card .num{font-family:var(--heading);color:var(--primary);font-size:2rem;font-weight:900}
.card p{margin-top:14px}
.arrow{position:absolute;right:26px;bottom:20px;font-size:1.7rem;color:var(--primary)}

.project-list{border-top:1px solid var(--border)}
.project-row{display:grid;grid-template-columns:70px 1.2fr .8fr 80px;gap:20px;align-items:center;padding:26px 0;border-bottom:1px solid var(--border);transition:var(--transition)}
.project-row:hover{padding-left:18px;background:linear-gradient(90deg,rgba(255,153,0,.12),transparent)}
.project-row .num{color:var(--primary);font-weight:900}
.ptitle{font-family:var(--heading);font-size:1.45rem;font-weight:900}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{background:var(--secondary-soft);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);position:relative}
.work:hover{transform:translateY(-8px);border-color:var(--primary)}
.work-img{aspect-ratio:1.2/1;background:linear-gradient(135deg,#333,var(--primary));display:grid;place-items:center;font-family:var(--script);font-size:4rem;color:#111}
.work-body{padding:22px}
.work small{color:var(--primary);text-transform:uppercase;letter-spacing:.13em;font-weight:900}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter-btn{background:#000;border:1px solid var(--border);color:var(--gray);border-radius:999px;padding:10px 15px;cursor:pointer;transition:var(--transition);font-weight:900}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#111;border-color:var(--primary)}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px}
.form{display:grid;gap:14px}
.input{width:100%;background:#0b0b0b;border:1px solid var(--border);border-radius:14px;padding:16px 18px;color:var(--white);outline:none;transition:var(--transition)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,153,0,.12)}
textarea.input{min-height:170px;resize:vertical}
.contact-card{display:grid;gap:16px;margin-top:24px}
.contact-item{background:#000;border:1px solid var(--border);border-radius:18px;padding:18px}

.footer{border-top:1px solid var(--border);padding:38px 0;background:#080808}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.footer-links{display:flex;gap:18px;color:var(--gray);font-weight:900}
.signature{font-family:var(--script);font-size:2.6rem;color:var(--primary);margin-top:10px}

.reveal{opacity:0;transform:translateY(24px);transition:900ms ease}
.reveal.show{opacity:1;transform:none}

.page-hero{padding:90px 0 40px}.page-hero p{max-width:760px;font-size:1.2rem;margin-top:20px;font-style:italic}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.mini{background:#000;border:1px solid var(--border);border-radius:18px;padding:20px}.mini b{color:var(--primary)}

@media(max-width:900px){
  .menu-btn{display:block}.nav-links{position:absolute;top:82px;left:0;right:0;background:#090909;display:none;flex-direction:column;padding:24px;border-bottom:1px solid var(--border)}.nav-links.open{display:flex}.hero-grid,.grid-2,.contact-grid{grid-template-columns:1fr}.cards,.portfolio-grid{grid-template-columns:1fr 1fr}.hero-card{transform:none}.section-head{display:block}.mini-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  :root{--section-padding:64px}.cards,.portfolio-grid,.stats,.mini-grid{grid-template-columns:1fr}.project-row{grid-template-columns:42px 1fr}.project-row .ptype,.project-row .year{grid-column:2}.footer-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.hero-actions{display:grid}.btn{justify-content:center}
}

/* =========================================================
   404 PAGE
========================================================= */
.error-hero{
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  padding:76px 0;
  position:relative;
}
.error-hero::before{
  content:"404";
  position:absolute;
  right:-4vw;
  top:4vh;
  font-family:var(--heading);
  font-size:clamp(7rem,18vw,18rem);
  font-weight:900;
  color:rgba(255,153,0,.06);
  line-height:1;
  z-index:-1;
}
.error-text{
  max-width:620px;
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-style:italic;
  margin:24px 0 30px;
}
.error-animation{
  position:relative;
  border:12px solid #000;
  background:linear-gradient(180deg,var(--secondary-soft),#0b0b0b);
  overflow:hidden;
}
.error-animation::before{
  content:"";
  position:absolute;
  inset:auto -20% -30% auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(255,153,0,.22);
  filter:blur(25px);
}
.lost-card{
  position:absolute;
  left:24px;
  bottom:24px;
  background:#000;
  border:2px solid var(--primary);
  border-radius:999px;
  padding:12px 18px;
  display:flex;
  gap:10px;
  align-items:center;
}
.lost-card span{
  color:var(--muted);
  font-style:italic;
}
.lost-card strong{
  color:var(--primary);
  font-family:var(--heading);
}
@media(max-width:900px){
  .error-hero{grid-template-columns:1fr;padding:58px 0}
  .error-animation{order:-1}
}

/* ================================
   THANK YOU PAGE
================================ */

.thank-you-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(255,153,0,0.22), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255,153,0,0.12), transparent 35%),
        #111;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
    text-align:center;
}

.thank-you-card{
    width:100%;
    max-width:850px;
    border:12px solid #000;
    background:#181818;
    padding:50px 30px;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
    position:relative;
    overflow:hidden;
}

.thank-you-card::before{
    content:"";
    position:absolute;
    inset:20px;
    border:2px solid rgba(255,153,0,0.45);
    pointer-events:none;
}

.lottie-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
    position:relative;
    z-index:2;
}

.thank-you-card .eyebrow{
    font-family:var(--script);
    color:#FF9900;
    font-size:2rem;
    margin-bottom:10px;
    position:relative;
    z-index:2;
}

.thank-you-card h1{
    font-family:var(--heading);
    color:#FF9900;
    font-size:clamp(4rem, 11vw, 8rem);
    line-height:0.9;
    margin:0 0 20px;
    position:relative;
    z-index:2;
}

.thank-you-card h2{
    font-family:var(--heading);
    font-size:clamp(1.5rem, 4vw, 2.6rem);
    margin-bottom:20px;
    position:relative;
    z-index:2;
}

.thank-you-card p{
    max-width:650px;
    margin:0 auto;
    color:#ccc;
    font-size:1.1rem;
    line-height:1.8;
    position:relative;
    z-index:2;
}

.thank-you-actions{
    margin-top:35px;
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}

.btn-outline{
    background:transparent;
    color:#FF9900;
    border:2px solid #FF9900;
}

.btn-outline:hover{
    background:#FF9900;
    color:#111;
}