/* ============================================================
   ALBRI INTEGRATED — BRAND FOUNDATION
   Mark: Adinkrahene (concentric rings + compass) · Type: Avenir Next / Mulish
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* Official palette: Deep Navy · Ochre Gold · Warm Stone · Sand · White */
  --ink:#0B1D3A;        /* Deep Navy — primary, backgrounds, text */
  --ink-2:#081422;      /* deeper navy */
  --blue:#20406A;       /* secondary navy — UI / links */
  --blue-l:#3E5C82;     /* light navy */
  --blue-ll:#AFB6AC;    /* stone mist — on-dark text/lines */
  --ochre:#C98E2B;      /* Ochre Gold — accent */
  --ochre-d:#A5741F;    /* ochre shade */
  --ochre-l:#E0AE5C;    /* ochre tint */

  /* Neutrals */
  --stone:#8E887B;      /* Warm Stone — neutral tone */
  --stone-l:#B7B2A8;    /* stone tint */
  --slate:#6A6459;      /* secondary text */
  --slate-l:#9A9384;
  --mist:#E8E4DC;       /* lines / borders */
  --sand:#FAF8F5;       /* Sand — warm surface */
  --paper:#FFFDFA;      /* base background */
  --white:#FFFFFF;

  /* Type */
  --f-head:"Avenir Next LT Pro","Avenir Next","Mulish",system-ui,sans-serif;
  --f-body:"Avenir Next LT Pro","Avenir Next","Mulish",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --maxw:1180px;
}

/* ---- Reset / base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.05;letter-spacing:-.02em;font-weight:700}
a{color:inherit}
img,svg{display:block}

.b-mono{font-family:var(--f-mono)}
.b-wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.b-eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ochre);font-weight:500}

/* ============================================================
   SHOWCASE CHROME — shared by every deliverable page
   ============================================================ */
.sc-top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60}
.sc-top .b-wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.sc-brand{display:flex;align-items:center;gap:11px;font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:.01em}
.sc-brand .sub{color:var(--blue-ll);font-weight:400}
.sc-top nav{display:flex;gap:26px;align-items:center}
.sc-top nav a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ll);text-decoration:none}
.sc-top nav a:hover{color:#fff}
.sc-top nav a.home{color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 13px;border-radius:3px}
.sc-top nav a.home:hover{background:var(--ochre);border-color:var(--ochre)}

.sc-head{background:var(--sand);border-bottom:1px solid var(--mist);padding:60px 0}
.sc-head .ix{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--blue-l)}
.sc-head h1{font-size:clamp(34px,5vw,56px);font-weight:700;color:var(--ink);margin:14px 0 16px;letter-spacing:-.03em}
.sc-head p{font-size:19px;color:var(--slate);max-width:64ch}

.sc-section{padding:70px 0;border-bottom:1px solid var(--mist)}
.sc-section:last-of-type{border-bottom:none}
.sc-kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:30px}
.sc-kicker .n{font-family:var(--f-mono);font-size:13px;color:var(--blue-l)}
.sc-kicker h2{font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--ink)}
.sc-note{font-size:16px;color:var(--slate);max-width:62ch;margin-bottom:30px}

.sc-stage{background:var(--sand);border:1px solid var(--mist);border-radius:14px;padding:54px;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.sc-stage.dark{background:var(--ink);border-color:var(--ink)}
.sc-stage.tight{padding:34px}

.sc-foot{background:var(--ink);color:var(--blue-ll);padding:46px 0}
.sc-foot .b-wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.sc-foot .m{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em}
.sc-foot a.next{font-family:var(--f-head);font-weight:600;color:#fff;text-decoration:none;font-size:15px;border:1px solid rgba(255,255,255,.25);padding:11px 20px;border-radius:3px}
.sc-foot a.next:hover{background:var(--ochre);border-color:var(--ochre)}

/* ---- Wordmark lockup (reusable) ---- */
.albri-lock{display:flex;align-items:center;gap:16px}
.albri-lock .am-txt{display:flex;flex-direction:column;line-height:1}
.albri-lock .am-name{font-family:var(--f-head);font-weight:700;letter-spacing:-.015em;color:var(--ink);font-size:30px;white-space:nowrap}
.albri-lock .am-name .lt{font-weight:500;color:var(--slate)}
.albri-lock .am-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--slate);margin-top:8px;padding-left:2px}
.albri-lock.rev .am-name{color:#fff}
.albri-lock.rev .am-name .lt{color:var(--blue-ll)}
.albri-lock.rev .am-sub{color:var(--blue-ll)}
.albri-lock.stack{flex-direction:column;gap:14px;text-align:center}
.albri-lock.stack .am-sub{letter-spacing:.4em}

/* ---- Spec list ---- */
.spec-list{list-style:none}
.spec-list li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--mist);align-items:baseline}
.spec-list li b{font-family:var(--f-mono);font-size:12px;color:var(--ochre);min-width:96px;letter-spacing:.06em;flex-shrink:0}
.spec-list li span{color:var(--slate);font-size:15px}

@media(max-width:820px){
  .b-wrap{padding:0 22px}
  .sc-top nav{gap:14px}
  .sc-top nav a:not(.home){display:none}
  .sc-stage{padding:30px}
}