:root{
  --navy:#1C2B39; --navy-deep:#0F1A23; --amber:#F59E0B; --cream:#F5F2ED;
  --steel:#7C8795;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--navy-deep); color:var(--cream); font-family:'Space Grotesk', sans-serif;
  background-image:
    linear-gradient(rgba(245,242,237,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,237,0.045) 1px, transparent 1px);
  background-size:40px 40px;
}
a{color:inherit;}

/* nav */
nav{
  position:sticky; top:0; z-index:10; height:87px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; background:rgba(15,26,35,0.85); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(245,242,237,0.08); overflow:visible;
}
nav .brand{overflow:visible;}
nav .brand img{height:58px; width:auto; display:block;}
nav .links{display:flex; gap:36px; font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.5px;}
nav .links a{color:var(--cream); text-decoration:none; opacity:0.7;}
nav .links a:hover, nav .links a.active{opacity:1;}

/* page hero (used on every page, shorter on interior pages) */
.hero{padding:90px 56px 70px; max-width:900px;}
.hero.compact{padding:64px 56px 48px;}
.hero-tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px; color:var(--amber);
  text-transform:uppercase; border:1px solid var(--amber); display:inline-block; padding:4px 10px; margin-bottom:20px;
}
h1{font-size:52px; font-weight:700; line-height:1.15; margin-bottom:24px;}
.hero.compact h1{font-size:38px;}
.hero p{font-size:18px; line-height:1.6; color:rgba(245,242,237,0.75); max-width:640px; margin-bottom:36px;}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  background:var(--amber); color:var(--navy-deep); border:none; padding:14px 28px; font-weight:500;
  text-decoration:none; display:inline-block; cursor:pointer;
}

/* two-up pillar / content grid band */
.grid{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(245,242,237,0.12);}
.cell{padding:52px 56px; border-right:1px solid rgba(245,242,237,0.12);}
.cell:first-child{background:var(--cream); color:var(--navy);}
.cell:last-child{border-right:none; background:rgba(245,158,11,0.06);}
.cell .tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--navy); background:var(--amber); padding:4px 10px; margin-bottom:16px;
}
.cell:last-child .tag{color:var(--navy-deep);}
.cell h2{font-family:'Archivo', sans-serif; font-size:26px; font-weight:900; text-transform:uppercase; letter-spacing:-0.5px; margin-bottom:14px;}
.cell:first-child p{color:rgba(28,43,57,0.65);}
.cell:last-child p{color:rgba(245,242,237,0.65);}
.cell p{font-size:15px; line-height:1.6; margin-bottom:20px;}
.cell:first-child a{color:var(--navy); border-bottom:1px solid var(--navy);}
.cell:last-child a{color:var(--amber); border-bottom:1px solid var(--amber);}
.cell a{font-family:'IBM Plex Mono', monospace; font-size:13px; text-decoration:none; padding-bottom:2px;}

/* single-column content sections (Services, About, Ventures list) */
.content{padding:16px 56px 64px; max-width:760px;}
.content h2{font-family:'Archivo', sans-serif; font-size:22px; font-weight:700; margin:36px 0 12px;}
.content h2:first-child{margin-top:0;}
.content p{font-size:16px; line-height:1.7; color:rgba(245,242,237,0.75); margin-bottom:16px;}
.content .status{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); padding:2px 8px; margin-top:4px;
  text-decoration:none;
}
/* 3 Aug 2026: Approve2Go is live — status badge becomes a clickable link
   instead of a static amber outline, using its own brand green (matches
   approve2go.com.au) so it reads as "this one's real and shippable" rather
   than another "in development" placeholder. */
.content .status-live{
  color:#7ED321; border-color:#7ED321; cursor:pointer; transition:background 0.15s ease, color 0.15s ease;
}
.content .status-live:hover{background:#7ED321; color:var(--navy-deep);}
.content .venture{padding:28px 0; border-top:1px solid rgba(245,242,237,0.12);}
.content .venture:first-of-type{border-top:none;}
.content .tagline{font-style:italic; color:var(--amber); font-size:15px; margin-bottom:10px;}
.content .venture h2{display:flex; align-items:center; gap:10px;}
.content .venture-logo{height:28px; width:auto; display:block;}
/* Approve2Go's own brand accent (matches approve2go.com.au's --green), used
   only for its wordmark here — deliberately distinct from this site's amber
   so the logo/wordmark reads correctly as Approve2Go's own brand, not
   MineDesk's. */
.content .accent-green{color:#7ED321;}

/* CTA band */
.cta-band{padding:56px; border-top:1px solid rgba(245,242,237,0.12);}
.cta-band .tag{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; margin-bottom:14px;}
.cta-band h3{font-size:24px; font-weight:700; margin-bottom:14px;}
.cta-band p{font-size:15px; color:rgba(245,242,237,0.7); max-width:560px; margin-bottom:22px;}

/* simple form (contact page) */
form.contact-form{max-width:520px; padding:16px 56px 64px;}
form.contact-form label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--amber); margin:20px 0 8px;
}
form.contact-form input, form.contact-form textarea{
  width:100%; background:rgba(245,242,237,0.05); border:1px solid rgba(245,242,237,0.2);
  color:var(--cream); padding:12px 14px; font-family:'Space Grotesk', sans-serif; font-size:15px;
}
form.contact-form textarea{min-height:140px; resize:vertical;}
form.contact-form button{margin-top:24px;}

footer{
  padding:28px 56px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(245,242,237,0.4);
  display:flex; justify-content:space-between; border-top:1px solid rgba(245,242,237,0.12); flex-wrap:wrap; gap:8px;
}

@media (max-width:720px){
  nav{padding:1rem 1.25rem;}
  nav .links{gap:20px; font-size:12px;}
  .hero, .hero.compact{padding:56px 24px 40px;}
  h1{font-size:34px;}
  .hero.compact h1{font-size:28px;}
  .grid{grid-template-columns:1fr;}
  .cell{border-right:none; border-top:1px solid rgba(245,242,237,0.12);}
  .cell:first-child{border-top:none;}
  .content, form.contact-form, .cta-band, footer{padding-left:24px; padding-right:24px;}
  footer{flex-direction:column;}
}