@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Space+Grotesk:wght@400;500;600&family=Bebas+Neue&display=swap');

:root{
  --ink: #171b21;
  --panel: #f4efe4;
  --panel-line: #d8cfb8;
  --amber: #e0a03f;
  --rust: #c1502e;
  --teal: #4c7a70;
  --cream-text: #f4efe4;
  --ink-70: rgba(23,27,33,.7);
  --max: 980px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream-text);
  font-family:'Space Grotesk', sans-serif;
  font-size:17px;
  line-height:1.6;
}

a{color:inherit;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  line-height:1.08;
  margin:0;
}

/* ---- Dial motif (shared) ---- */
.dial-mark{
  width:14px;height:14px;border-radius:50%;
  background:var(--amber);
  display:inline-block;
  box-shadow:0 0 0 3px rgba(224,160,63,.18);
}

/* ---- Header / nav ---- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(23,27,33,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(244,239,228,.12);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif;
  font-size:1.25rem;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--cream-text);
}
.brand img{
  height:34px;
  width:auto;
  display:block;
}
footer .brand img{height:30px;}
nav ul{
  list-style:none; display:flex; gap:30px; margin:0; padding:0;
}
nav a{
  text-decoration:none;
  font-size:.95rem;
  color:var(--ink-70);
  color:rgba(244,239,228,.75);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color .15s ease, color .15s ease;
}
nav a:hover, nav a.active{
  color:var(--cream-text);
  border-color:var(--amber);
}

/* ---- Hero ---- */
.hero{
  padding:88px 0 70px;
  border-bottom:1px solid rgba(244,239,228,.1);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--cream-text);
}
.hero .kicker{
  font-size:1rem;
  color:var(--amber);
  margin-bottom:16px;
  font-family:'Space Grotesk',sans-serif;
}
.hero p.lede{
  margin-top:22px;
  font-size:1.1rem;
  color:rgba(244,239,228,.78);
  max-width:46ch;
}
.hero-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}

.btn{
  display:inline-block;
  padding:13px 26px;
  border-radius:2px;
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-primary:hover{transform:translateY(-1px); background:#eab157;}
.btn-ghost{border-color:rgba(244,239,228,.35); color:var(--cream-text);}
.btn-ghost:hover{border-color:var(--cream-text);}

/* ---- Dial SVG panel ---- */
.dial-panel{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.dial-panel img{
  width:78%;
  max-width:320px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

/* ---- Mars space banner ---- */
.space-banner{
  position:relative;
  height:320px;
  overflow:hidden;
  border-bottom:1px solid rgba(244,239,228,.1);
}
.space-banner img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 65%;
  display:block;
}
.space-banner .banner-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,27,33,.15) 0%, rgba(23,27,33,.85) 92%);
  display:flex; align-items:flex-end;
  padding:0 0 26px;
}
.space-banner .banner-overlay .wrap{width:100%;}
.space-banner h2{
  color:var(--cream-text);
  font-size:clamp(1.4rem,2.8vw,2rem);
  max-width:22ch;
}

/* ---- Sections on cream panel ---- */
.panel-section{
  background:var(--panel);
  color:var(--ink);
  padding:78px 0;
}
.panel-section + .panel-section{
  border-top:1px solid var(--panel-line);
}
.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-bottom:48px;
  align-items:end;
}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);}
.section-head p{margin:0; color:var(--ink-70); max-width:42ch;}

.service-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--panel-line);
}
.service{
  padding:30px 26px;
  border-right:1px solid var(--panel-line);
  border-bottom:1px solid var(--panel-line);
}
.service:nth-child(3n){border-right:none;}
.service h3{font-size:1.2rem; margin-bottom:10px;}
.service p{margin:0; color:var(--ink-70); font-size:.98rem;}
.service .tag{
  font-size:.8rem;
  color:var(--rust);
  margin-bottom:10px;
  display:block;
}

/* ---- dark section ---- */
.dark-section{padding:78px 0;}
.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:40px;
}
.stat{border-left:1px solid rgba(244,239,228,.2); padding-left:20px;}
.stat .num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--amber);}
.stat .label{color:rgba(244,239,228,.7); font-size:.92rem; margin-top:6px;}

/* ---- quote / callout ---- */
.callout{
  border-top:1px solid var(--panel-line);
  padding:70px 0;
  background:var(--panel);
  color:var(--ink);
}
.callout blockquote{
  margin:0;
  font-family:'Fraunces',serif;
  font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:500;
  max-width:26ch;
  line-height:1.25;
}
.callout cite{
  display:block; margin-top:20px; font-style:normal;
  color:var(--ink-70); font-size:.95rem;
}

/* ---- footer ---- */
footer{
  padding:50px 0 60px;
  border-top:1px solid rgba(244,239,228,.12);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
}
footer h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  color:rgba(244,239,228,.55);
  margin:0 0 14px;
  font-weight:500;
}
footer p, footer a{
  color:rgba(244,239,228,.85);
  font-size:.95rem;
  text-decoration:none;
}
footer .bottom{
  margin-top:40px; padding-top:24px;
  border-top:1px solid rgba(244,239,228,.12);
  font-size:.82rem; color:rgba(244,239,228,.45);
}

/* ---- inner page hero (services/contact) ---- */
.page-hero{
  padding:64px 0 50px;
  border-bottom:1px solid rgba(244,239,228,.1);
}
.page-hero .kicker{color:var(--amber); font-size:.95rem;}
.page-hero h1{font-size:clamp(2rem,4.2vw,2.9rem); margin-top:14px;}
.page-hero p{max-width:52ch; color:rgba(244,239,228,.78); margin-top:18px; font-size:1.05rem;}

/* ---- process list (services page) ---- */
.process{
  border-top:1px solid var(--panel-line);
}
.process-item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:30px;
  padding:34px 0;
  border-bottom:1px solid var(--panel-line);
}
.process-item .phase{
  font-family:'Fraunces',serif;
  color:var(--rust);
  font-size:1rem;
}
.process-item h3{font-size:1.3rem; margin-bottom:8px;}
.process-item p{margin:0; color:var(--ink-70); max-width:56ch;}

/* ---- contact page ---- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.contact-block h3{
  font-size:1rem;
  color:var(--amber);
  margin-bottom:10px;
  font-weight:500;
  font-family:'Space Grotesk',sans-serif;
}
.contact-block p, .contact-block a{
  color:rgba(244,239,228,.85);
  font-size:1.02rem;
  margin:0 0 4px;
  text-decoration:none;
}
.contact-block{margin-bottom:34px;}

form{display:flex; flex-direction:column; gap:16px;}
label{font-size:.85rem; color:var(--ink-70);}
input, textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--panel-line);
  background:#fff;
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:.98rem;
  border-radius:2px;
}
textarea{min-height:110px; resize:vertical;}
.field{display:flex; flex-direction:column; gap:6px;}

@media (max-width:800px){
  .hero-grid{grid-template-columns:1fr;}
  .dial-panel{max-width:280px; margin:0 auto;}
  .section-head{grid-template-columns:1fr;}
  .service-list{grid-template-columns:1fr;}
  .service{border-right:none;}
  .stat-row{grid-template-columns:1fr; gap:24px;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .process-item{grid-template-columns:1fr; gap:8px;}
  .contact-grid{grid-template-columns:1fr; gap:20px;}
}

/* Hero scribble-to-logo animation */
.mars-anim{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  min-height:280px;
}
.mars-scribble{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:220px; height:220px;
  transform-origin:center;
  animation:mars-spinfade 2.4s ease-in forwards;
}
.mars-still{
  width:200px;
  opacity:0;
  animation:mars-fadein 1.3s ease-out 2.2s forwards;
}
.mars-tagline{
  color:var(--cream-text);
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  letter-spacing:1px;
  font-weight:700;
  text-align:center;
  transform:skew(-4deg);
  opacity:0;
  animation:mars-fadein 1s ease-out 3.8s forwards;
}
@keyframes mars-spinfade{
  0%{ transform:translateX(-50%) rotate(0deg); opacity:0.46; }
  80%{ transform:translateX(-50%) rotate(650deg); opacity:0.13; }
  100%{ transform:translateX(-50%) rotate(720deg); opacity:0; }
}
@keyframes mars-fadein{
  from{ opacity:0; }
  to{ opacity:1; }
}