/* Mijares Group — shared shell for the parent page and the division pages.
   Display face is a high-contrast serif against a system sans body: the pairing
   carries the character, so the palette stays monochrome except for the brand red. */

:root{
  color-scheme: dark;
  --bg:#0B0D11; --bg2:#0F1217; --panel:#13171E; --panel2:#171C24;
  --ink:#FFFFFF; --ink2:#AAB3C0; --mut:#78818E;
  --hair:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.16);
  --red:#C8102E;        /* brand red, straight off the logo spike */
  --red-lift:#FF5C6E;   /* lifted for small text: 6.4:1 on --bg, the brand red is 3.3:1 */
  --teal:#39CCE5;
  --serif:'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad:28px; --maxw:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16.5px/1.7 var(--sans); -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:860px}

/* ── navigation ─────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,17,.82); backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav-in{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{width:30px;height:30px}
.brand span{
  font-size:14.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--ink2);font-size:14px;font-weight:500;
  padding:4px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--hair2)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.pill,.ghost{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border-radius:999px;padding:12px 22px;font-size:14px;font-weight:650;
  letter-spacing:.01em;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;
}
.pill{background:#fff;color:#0B0D11;border:1px solid #fff}
.pill:hover{background:#E4E8EE;border-color:#E4E8EE}
.pill.red{background:var(--red);color:#fff;border-color:var(--red)}  /* white on red = 5.9:1 */
.pill.red:hover{background:#E2203E;border-color:#E2203E}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2)}
.ghost:hover{border-color:rgba(255,255,255,.4)}
.arw{font-size:12px;opacity:.75;transform:translateY(-1px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── typography ─────────────────────────────────────────────────────────── */
.display{
  font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.015em;
  margin:0;font-size:clamp(40px,6.4vw,78px);
}
.display .quiet{color:var(--mut);display:block}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--red-lift);margin:0 0 16px;
}
.eyebrow.cool{color:var(--teal)}
.eyebrow.grey{color:var(--mut)}
.lede{font-size:18.5px;line-height:1.62;color:var(--ink2);margin:22px 0 0;max-width:58ch}
h2.sec{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);
  line-height:1.12;letter-spacing:-.01em;margin:0 0 14px;
}
h3{font-size:17.5px;font-weight:650;margin:0 0 8px;letter-spacing:-.005em}
p{margin:0 0 15px;color:var(--ink2)}
.sec-wrap{padding:84px 0;border-top:1px solid var(--hair)}
.sec-head{max-width:62ch;margin:0 0 42px}
.sec-head.mid{margin:0 auto 46px;text-align:center}
.sec-head p{margin:0;font-size:17px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Scrim: dark enough on the text side to clear 4.5:1, clear enough on the right
   that the base network and its coverage rings stay legible. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,13,17,.96) 0%,rgba(11,13,17,.90) 34%,rgba(11,13,17,.42) 62%,rgba(11,13,17,.22) 100%),
    linear-gradient(0deg,rgba(11,13,17,.92) 0%,rgba(11,13,17,0) 42%);
}
.hero-in{position:relative;z-index:1;padding-top:116px;padding-bottom:104px}
.hero-in.tall{padding-top:150px;padding-bottom:130px}
.hero-plain{border-bottom:1px solid var(--hair);background:
  radial-gradient(900px 420px at 14% 8%, rgba(200,16,46,.12), transparent 65%),
  radial-gradient(760px 400px at 86% 86%, rgba(57,204,229,.08), transparent 68%)}

/* ── parent-page identity lockup ────────────────────────────────────────── */
/* The parent page is the identity page, so the lockup leads it and the headline
   steps down to sit beneath. The supplied wordmark art is drawn lowercase, so the
   name in capitals is typeset rather than taken from that file. */
.lockup-xl{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);margin:0 0 34px}
.lockup-xl img{width:clamp(96px,13vw,172px);height:auto;flex:0 0 auto}
.lockup-xl .wm{
  margin:0;font-size:clamp(30px,5.4vw,64px);font-weight:800;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.lockup-xl .tagline{
  margin:12px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red-lift);
}
/* With the lockup carrying the identity, the proposition no longer needs to be the
   largest thing on the page. */
.hero-ident .display{font-size:clamp(31px,4.6vw,54px)}

/* ── stat tiles ─────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:28px 26px 26px}
.stat .n{font-family:var(--serif);font-size:clamp(44px,5.2vw,62px);line-height:1;margin:6px 0 12px}
.stat .n.red{color:var(--red-lift)}
.stat p{margin:0;font-size:14.5px;line-height:1.55}
.stat .src{display:block;margin-top:12px;font-size:12.5px;color:var(--mut)}

/* ── two-column capability list ─────────────────────────────────────────── */
.caps{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
      grid-auto-flow:column;gap:0 52px}
.caps div{padding:17px 0;border-top:1px solid var(--hair);display:flex;gap:14px;align-items:baseline}
.caps b{font-weight:600;font-size:16.5px;color:var(--ink)}
.caps i{font-style:normal;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ── cards ──────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{
  background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:30px 28px;display:flex;flex-direction:column;
}
.card.lift{background:linear-gradient(180deg,var(--panel2),var(--panel))}
.card p{font-size:15px;margin:0 0 16px}
.card ul{margin:0 0 18px;padding-left:19px;color:var(--ink2);font-size:14.5px}
.card li{margin-bottom:6px}
.card .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{font-size:12.5px;color:var(--mut);margin:12px 0 0}
.tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--hair2);
  border-radius:999px;padding:4px 11px;margin:0 0 16px;
}

/* ── numbered process ───────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step .num{
  font-family:var(--serif);font-size:46px;line-height:1;color:var(--red-lift);
  margin:0 0 14px;padding-bottom:16px;border-bottom:1px solid var(--hair);
}
.step p{font-size:15px;margin:0}

/* ── centred statement ──────────────────────────────────────────────────── */
.statement{
  font-family:var(--serif);font-size:clamp(26px,3.5vw,40px);line-height:1.22;
  letter-spacing:-.01em;text-align:center;max-width:20ch;margin:0 auto;color:var(--ink);
}
.statement.wide{max-width:26ch}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:46px 0 60px;color:var(--mut);font-size:13.5px}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-start}
.foot-grid nav{display:flex;flex-direction:column;gap:8px}
.foot-grid nav a{text-decoration:none;color:var(--ink2)}
.foot-grid nav a:hover{color:var(--ink)}
.foot-grid .ft{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin:0 0 4px}
.foot-end{margin-top:34px;padding-top:22px;border-top:1px solid var(--hair);max-width:70ch}

/* ── narrow screens: these rules must stay last to win on equal specificity ─ */
@media (max-width:900px){
  .stats,.steps,.cards{grid-template-columns:1fr}
  .steps{gap:30px}
  .caps{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:0}
}
@media (max-width:700px){
  :root{--pad:18px}
  .nav-in{height:60px;gap:12px}
  .nav-links{gap:16px}
  .nav-links a{font-size:13px}
  .brand span{font-size:12.5px;letter-spacing:.11em}
  .hero-in{padding-top:72px;padding-bottom:64px}
  .hero-in.tall{padding-top:84px;padding-bottom:72px}
  .hero-bg img{object-position:76% 50%}
  .lockup-xl{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
  .lockup-xl img{width:112px}
  .lockup-xl .wm{font-size:clamp(26px,8vw,34px);letter-spacing:.10em}
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(11,13,17,.88) 0%,rgba(11,13,17,.60) 48%,rgba(11,13,17,.93) 100%)}
  .sec-wrap{padding:58px 0}
  .lede{font-size:17px}
  .statement{max-width:none}
}
@media (max-width:460px){
  .nav .brand span{display:none}
  .nav-links{gap:15px;margin-left:auto}
  .nav-links a{font-size:13px}
}
@media (max-width:420px){
  .nav-links{gap:13px}
  .nav-links a{font-size:12.5px}
  .cta-row .pill,.cta-row .ghost{width:100%;justify-content:center}
}