/* =========================================================
   REMOTE OFFICE — BASE STYLESHEET
   Shared across every page: variables, reset, typography,
   header/nav, buttons, page header, CTA band, footer.
   Page-specific layout lives in its own css/*.css file.
   ========================================================= */

:root{
  --ink:#0A0E1A;
  --ink-2:#141C2E;
  --ink-line:#2A3650;
  --paper:#121A2C;
  --paper-2:#1B2540;
  --paper-line:#303C58;
  --brass:#B9873C;
  --brass-dark:#8C6528;
  --forest:#3E5FA8;
  --forest-dark:#23345A;
  --ink-text:#F3EFE4;
  --ink-mute:#98A3BC;
  --paper-text:#EDEFF5;
  --paper-mute:#A9B2C7;
  --white:#FFFFFF;
  --radius:12px;
  --wrap:1160px;
}

/* ===== RESET ===== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--paper-text);
  font-family:'Inter', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:'Lora', serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
img,svg{display:block; max-width:100%;}
::selection{background:var(--brass); color:var(--ink);}
ul{list-style:none;}
section{padding:96px 0;}

/* ===== NAV / HEADER ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,26,0.94);
  border-bottom:1px solid var(--ink-line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:var(--wrap); margin:0 auto;
}
.logo{display:flex; align-items:center; gap:11px; font-family:'Lora',serif; font-weight:600; font-size:19px; color:var(--ink-text);}
.logo-mark{
  width:32px; height:32px; border-radius:50%;
  border:1.6px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass); font-family:'IBM Plex Mono',monospace; font-size:11px;
  flex-shrink:0;
}
.beta-tag{font-size:10px; color:var(--brass-dark); vertical-align:bottom;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{font-size:14.5px; color:var(--ink-mute); transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--ink-text);}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:6px; font-size:14.5px; font-weight:500;
  cursor:pointer; border:1px solid transparent; transition:all .2s; white-space:nowrap;
}
.btn-brass{background:var(--brass); color:#241A08;}
.btn-brass:hover{background:#cf9c4d; transform:translateY(-1px);}
.btn-outline-dark{border-color:var(--ink-line); color:var(--ink-text);}
.btn-outline-dark:hover{border-color:var(--ink-mute); background:var(--ink-2);}
.btn-outline-light{border-color:var(--paper-line); color:var(--paper-text);}
.btn-outline-light:hover{background:var(--paper-2);}
.btn-outline-semiDark{border-color:var(--white); color:var(--white); background:var(--paper);}
.btn-outline-semiDark:hover{background:var(--paper-2);}

/* ===== EYEBROW (badge) ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--brass-dark); background:rgba(185,135,60,0.08);
  padding:6px 13px; border-radius:20px; margin-bottom:24px;
}
.eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--brass);}
.eyebrow.on-paper{color:var(--white); border-color:#3A4668; background:rgba(58,80,130,0.12);}
.eyebrow.on-paper .dot{background:var(--forest-dark);}

/* ===== PAGE HEADER (inner pages) ===== */
.pagehead{background:var(--ink); color:var(--ink-text); padding:88px 0 76px; border-bottom:1px solid var(--ink-line);}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-mute); margin-bottom:22px;}
.breadcrumb a{color:var(--brass);}
.pagehead h1{font-size:44px; margin-bottom:18px; max-width:680px;}
.pagehead p{font-size:16.5px; color:var(--ink-mute); max-width:600px;}

/* ===== SECTION HEAD (used on index/about) ===== */
.section-head{max-width:660px; margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:33px; margin-bottom:14px;}
.section-head p{font-size:16px;}
.section-ink .section-head p{color:var(--ink-mute);}
section:not(.section-ink) .section-head p{color:var(--paper-mute);}
.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-ink{background:var(--ink); color:var(--ink-text);}

/* ===== CTA BAND ===== */
.cta-band{background:var(--forest-dark); color:#EAEEF7; text-align:center; padding:96px 0;}
.cta-band h2{font-size:32px; margin-bottom:14px; color:#fff;}
.cta-band .tag{font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:#C7D3EE; margin-bottom:34px;}
.cta-band .hero-cta{display:flex; justify-content:center; gap:14px;}

/* ===== FOOTER ===== */
footer{background:var(--ink); color:var(--ink-mute); padding:56px 0 30px;}
.foot-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:44px;}
.foot-brand p{font-size:13.5px; margin-top:14px; max-width:260px; color:var(--ink-mute);}
.foot-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; font-family:'IBM Plex Mono',monospace; margin-bottom:16px; color:#7E8AA5; font-weight:400;}
.foot-col a{display:block; font-size:14px; margin-bottom:10px; color:var(--ink-mute);}
.foot-col a:hover{color:var(--ink-text);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--ink-line); font-size:12.5px;}

/* ===== SHARED RESPONSIVE ===== */
@media (max-width:760px){

  nav{
    flex-direction:column;
    gap:15px;
    padding:15px 20px;
  }

  .nav-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
  }

  .btn-brass{
    width:100%;
    max-width:250px;
  }
}
@media (max-width:600px){
  .wrap{padding:0 20px;}
  section{padding:60px 0;}
  .foot-top{grid-template-columns:1fr;}
}