/* ============================================================
   MONARK DIGITAL — DESIGN SYSTEM
   Tokens, base reset, buttons, eyebrow, section/wrap utilities,
   animated gradient border. Ported from the approved concept
   (concept/index_v1.html) and the client's brand token pack
   (Logo/03-tokens/tokens.css) reconciled where they agreed;
   see PROJECT_STATE.md for the one documented discrepancy
   (--font-mono).
   ============================================================ */

:root{
  --navy:      #0B2545;
  --garnet:    #8C2F39;
  --paper:     #F4F6F9;
  --midnight:  #06182F;
  --deep-sea:  #1D4E7C;
  --signal:    #2C75AE;
  --slate:     #657281;
  --mist:      #C2CDD8;
  --garnet-lt: #C8757E;
  --sky:       #7FB6E0;
  --white:     #FFFFFF;

  --navy-85: #2E4460;
  --navy-70: #51647B;
  --navy-30: #AEB7C3;
  --navy-15: #D1D7DE;
  --navy-8:  #E1E5EB;

  --garnet-60: #B67F86;
  --garnet-30: #D5BABF;
  --garnet-12: #E8DEE2;

  --surface-navy-1: #1A3250;
  --surface-navy-2: #233B58;
  --surface-navy-3: #324863;

  /* The approved concept sets --font-mono to Archivo (matching every other
     display use); the client's separate brand token pack specifies IBM
     Plex Mono for tabular figures instead. Kept as the concept actually
     ships it (Archivo) since that's the confirmed source of truth for this
     build — flagged in PROJECT_STATE.md rather than silently overridden. */
  --font-display: "Archivo", "Segoe UI", -apple-system, sans-serif;
  --font-body:    "Manrope", "Segoe UI", -apple-system, sans-serif;
  --font-mono:    "Archivo", "Segoe UI", -apple-system, sans-serif;

  --radius: 5px;
  --radius-card: 5px;
  --hairline: 1px;
  --stripe: 6px;
  --border-light: rgba(11,37,69,0.14);
  --border-dark:  rgba(196,220,244,0.18);

  --max: 1320px;
  --gap-l: 72px;
  --gap-m: 50px;
  --gap-s: 30px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
.logo{width:200px;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  margin:0;
  color:var(--navy);
  letter-spacing:-0.01em;
}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--white);padding:12px 20px;
}
.skip-link:focus{left:8px;top:8px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
.rte p + p{margin-top:1em;}
.rte a{text-decoration:underline;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--garnet);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:var(--stripe);background:var(--garnet);display:inline-block;flex:none;}
.eyebrow.on-dark{color:var(--garnet-lt);}
.eyebrow.on-dark::before{background:var(--garnet-lt);}

.section{padding:96px 0;}
.section.tight{padding:72px 0;}
.section.white{background:var(--white);}
.section.white-bordered{background:var(--white);border-top:var(--hairline) solid var(--border-light);border-bottom:var(--hairline) solid var(--border-light);}
.section.white-bordered-top{background:var(--white);border-top:var(--hairline) solid var(--border-light);}
.section-head{max-width:760px;margin-bottom:56px;}
.section-head h2{font-size:38px;}
.section-head p.lead,
.section-head .lead{margin-top:18px;font-size:17px;line-height:1.6;color:var(--slate);max-width:560px;}
.section-text{color:var(--slate);}

.figure{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  padding:14px 26px;
  border-radius:var(--radius);
  border:var(--hairline) solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--navy);color:var(--white);}
.btn-primary:hover{background:var(--midnight);}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:var(--white);}
.btn-garnet{background:var(--garnet);color:var(--white);}
.btn-garnet:hover{background:#711F28;}
.btn-outline-dark{background:transparent;border-color:var(--border-dark);color:var(--white);}
.btn-outline-dark:hover{background:rgba(255,255,255,0.08);}
.btn-ghost{background:transparent;color:var(--navy);padding:0;font-weight:600;border-bottom:var(--hairline) solid var(--navy);border-radius:0;}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ---------- ANIMATED GRADIENT BORDER ---------- */
@property --border-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

.monark-gradient-border{
  position:relative;
  isolation:isolate;
  border-color:transparent !important;
}

.monark-gradient-border::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1px;

  background:
    conic-gradient(
      from var(--border-angle),
      rgba(11,37,69,0.14) 0deg,
      rgba(11,37,69,0.14) 235deg,
      rgba(11,37,69,0.32) 270deg,
      rgba(44,117,174,0.85) 305deg,
      #0B2545 330deg,
      rgba(11,37,69,0.14) 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
  animation:monark-border-orbit 5s linear infinite;
}

.get-started-section .monark-gradient-border::before,
.gs-form.monark-gradient-border::before,
.gs-door.monark-gradient-border::before{
  background:
    conic-gradient(
      from var(--border-angle),
      rgba(255,255,255,0.12) 0deg,
      rgba(255,255,255,0.12) 235deg,
      rgba(127,182,224,0.24) 270deg,
      rgba(44,117,174,0.88) 305deg,
      #0B2545 330deg,
      rgba(255,255,255,0.12) 360deg
    );
}

.opp-stats.monark-gradient-border::before{
  background:
    conic-gradient(
      from var(--border-angle),
      rgba(11,37,69,0.10) 0deg,
      rgba(11,37,69,0.10) 235deg,
      rgba(44,117,174,0.28) 270deg,
      rgba(44,117,174,0.72) 305deg,
      #0B2545 330deg,
      rgba(11,37,69,0.10) 360deg
    );
}

.monark-gradient-border > *{
  position:relative;
  z-index:1;
}

@keyframes monark-border-orbit{
  to{ --border-angle:360deg; }
}

@media (prefers-reduced-motion: reduce){
  .monark-gradient-border::before{
    animation:none;
  }
}

/* ---------- SCROLL REVEAL (see assets/js/main.js — MonarkReveal) ---------- */
.monark-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .65s cubic-bezier(.2,.65,.3,1),
    transform .65s cubic-bezier(.2,.65,.3,1);
  transition-delay:calc(var(--reveal-index, 0) * 0.12s);
  will-change:opacity, transform;
}
.monark-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.monark-reveal.monark-reveal--row{
  transform:translateX(-32px);
}
.monark-reveal.monark-reveal--row.is-visible{
  transform:translateX(0);
}

/* Per-item stagger for boxes inside a repeater grid (steps, stages,
   hotboxes, etc.) — same fade/rise as .monark-reveal but staggered by
   0.05s per item (via --reveal-item-index, set per-parent in main.js)
   instead of the section-level 0.12s. */
.monark-reveal-item{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .5s cubic-bezier(.2,.65,.3,1),
    transform .5s cubic-bezier(.2,.65,.3,1);
  transition-delay:calc(var(--reveal-item-index, 0) * 0.1s);
  will-change:opacity, transform;
}
.monark-reveal-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .monark-reveal,
  .monark-reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}