/* ============================================================
   Another Realm Compliance — shared stylesheet (multi-page site)
   Brand tokens: orange #FF6B00 · navy #1E3A5F · steel #8A94A0
   Fonts: Rajdhani (headings/nav) · Inter (body)
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --orange:#FF6B00;
  --orange-dk:#e35f00;
  --navy:#1E3A5F;
  --navy-dk:#162c48;
  --steel:#8A94A0;
  --ink:#20303f;
  --line:#e3e7ec;
  --panel:#f7f9fb;
  --white:#ffffff;
  --wrap:1080px;
}
html { height:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  min-height:100%; background:var(--white); color:var(--ink); overflow-x:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6; display:flex; flex-direction:column;
}
main { flex:1 0 auto; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }
a { color:var(--navy); }
h1,h2,h3,h4 { font-family:'Rajdhani',sans-serif; color:var(--navy); line-height:1.08; text-transform:uppercase; letter-spacing:.01em; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:1rem; padding:.85rem 1.5rem; border-radius:6px;
  text-decoration:none; cursor:pointer; border:2px solid transparent; transition:all .2s;
  -webkit-tap-highlight-color:transparent; text-align:center; white-space:normal; max-width:100%;
}
.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-dk); box-shadow:0 6px 18px rgba(255,107,0,.35); }
.btn-ghost { background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-ghost:hover { background:var(--navy); color:#fff; }
.btn-light { background:#fff; color:var(--navy); }
.btn-light:hover { background:#eef2f6; }

/* ── Grade-line divider motif (dashed navy + sparse gray hatch ticks) ── */
.grade-divider { height:12px; border:0; margin:0; position:relative; }
.grade-divider::before {
  content:""; position:absolute; left:0; right:0; top:3px; height:0;
  border-top:1.5px dashed var(--navy);
}
.grade-divider::after {
  content:""; position:absolute; left:0; right:0; top:5px; height:6px;
  background-image:repeating-linear-gradient(-50deg, var(--steel) 0 1.4px, transparent 1.4px 58px);
  opacity:.7;
}

/* ── Header / nav ── */
.site-head { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.head-inner { max-width:var(--wrap); margin:0 auto; padding:.6rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-mark { display:block; height:40px; }
.brand-mark svg { height:40px; width:auto; display:block; }
.brand-word { display:flex; flex-direction:column; line-height:1; }
.bw-1 { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; color:var(--navy); letter-spacing:.04em; text-transform:uppercase; }
.bw-2 { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.82rem; color:var(--orange); letter-spacing:.12em; text-transform:uppercase; }
.nav-toggle { display:none; }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-burger span { width:24px; height:2px; background:var(--navy); border-radius:2px; transition:.2s; }
.site-nav { display:flex; align-items:center; gap:1.4rem; }
.site-nav a {
  font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.92rem; color:var(--navy); text-decoration:none; padding:.25rem 0;
  border-bottom:2px solid transparent; transition:color .15s,border-color .15s;
}
.site-nav a:hover { color:var(--orange); }
body[data-page="home"] .nav-home,
body[data-page="services"] .nav-services,
body[data-page="rates"] .nav-rates,
body[data-page="certs"] .nav-certs,
body[data-page="portal"] .nav-portal,
body[data-page="about"] .nav-about,
body[data-page="contact"] .nav-contact { color:var(--orange); border-bottom-color:var(--orange); }

@media(max-width:760px){
  .nav-burger { display:flex; }
  .site-nav {
    position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.5rem 1rem;
    max-height:0; overflow:hidden; transition:max-height .25s ease; box-shadow:0 8px 18px rgba(0,0,0,.06);
  }
  .site-nav a { padding:.75rem 0; border-bottom:1px solid var(--line); }
  .nav-toggle:checked ~ .site-nav { max-height:420px; }
}

/* ── Generic sections ── */
section { padding:3rem 0; }
.eyebrow { font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--orange); font-size:.82rem; margin-bottom:.8rem; }
.sec-title { font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:1.2rem; }
.sec-intro { max-width:680px; font-size:1.06rem; margin-bottom:1.8rem; color:var(--ink); }
.center { text-align:center; }
.muted { color:var(--steel); }

/* ── Hero ── */
.hero { padding:3.5rem 0 3rem; }
.hero h1 { font-size:clamp(2.3rem,6.5vw,3.8rem); margin-bottom:1rem; }
.hero .sub { font-size:clamp(1.05rem,2.6vw,1.3rem); max-width:660px; margin-bottom:1rem; color:var(--ink); }
.hero .trust { font-size:1rem; color:var(--navy); font-weight:500; max-width:640px; margin-bottom:1.8rem; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:.9rem; }

/* ── Cards grid ── */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card-grid.two { grid-template-columns:repeat(2,1fr); }
.card {
  border:1px solid var(--line); border-top:3px solid var(--orange); border-radius:6px;
  padding:1.2rem 1.2rem 1.3rem; background:#fff; text-decoration:none; color:inherit; display:block;
  transition:box-shadow .2s,transform .2s;
}
a.card:hover { box-shadow:0 8px 22px rgba(30,58,95,.1); transform:translateY(-2px); }
.card h3 { font-size:1.15rem; margin-bottom:.4rem; letter-spacing:.02em; }
.card p { font-size:.95rem; color:var(--ink); }
.card .go { display:inline-block; margin-top:.6rem; font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--orange); }

/* ── Value props ── */
.props { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.prop h3 { font-size:1.2rem; margin-bottom:.4rem; }
.prop .tick { color:var(--orange); }
.prop a { color:var(--orange); font-weight:600; text-decoration:none; }
.prop a:hover { text-decoration:underline; }

/* ── Bands ── */
.band { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band-navy { background:var(--navy); color:#fff; }
.band-navy h2 { color:#fff; }
.band-navy .sub { color:#cdd6e0; max-width:640px; margin:.6rem 0 1.4rem; }
.band-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }

/* ── Services (details cards) ── */
.svc-caveat { background:#fff; border:1px dashed var(--navy); border-radius:6px; padding:.9rem 1.1rem; margin-bottom:1.6rem; color:var(--navy); font-weight:500; }
.svc-list { display:flex; flex-direction:column; gap:.8rem; }
details.svc {
  border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:6px; background:#fff; overflow:hidden;
}
details.svc > summary {
  list-style:none; cursor:pointer; padding:1rem 1.2rem; font-family:'Rajdhani',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; color:var(--navy); font-size:1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
details.svc > summary::-webkit-details-marker { display:none; }
details.svc > summary::after { content:"+"; color:var(--orange); font-size:1.5rem; font-weight:700; line-height:1; }
details.svc[open] > summary::after { content:"\2013"; }
.svc-body { padding:0 1.2rem 1.2rem; }
.svc-body dl { display:grid; gap:.6rem; }
.svc-body dt { font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; color:var(--orange); }
.svc-body dd { margin:0 0 .3rem; color:var(--ink); }

/* ── Package / pricing ── */
.package { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.6rem; margin-top:1.8rem; }
.package h3 { font-size:1.4rem; margin-bottom:.6rem; }
.package ul { margin:.4rem 0 1rem 1.1rem; }
.package li { margin-bottom:.3rem; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.price-card { border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:6px; padding:1.2rem; background:#fff; text-align:center; }
.price-card h4 { font-size:1.1rem; margin-bottom:.5rem; }
.price-card .price { font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--orange); font-size:1.3rem; margin:.4rem 0 .8rem; }

/* ── Certifications ── */
.cert-list { display:flex; flex-direction:column; gap:1rem; max-width:720px; }
.cert-item { display:flex; align-items:flex-start; gap:.9rem; border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:6px; padding:1.1rem 1.2rem; background:#fff; }
.cert-item .mk { color:var(--orange); font-size:1.3rem; line-height:1.2; flex-shrink:0; }
.cert-item h3 { font-size:1.15rem; margin-bottom:.15rem; }
.cert-item .kind { font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--steel); }
.cert-note { max-width:720px; margin-top:1.4rem; color:var(--ink); }

/* ── About ── */
.prose { max-width:720px; }
.prose p { margin-bottom:1rem; font-size:1.05rem; }
.prose h2 { margin:1.6rem 0 .6rem; font-size:1.5rem; }
.prose a { color:var(--orange); font-weight:600; }

/* ── Portal ── */
.portal-status { border:1px dashed var(--navy); border-radius:6px; padding:1rem 1.2rem; background:var(--panel); color:var(--navy); font-weight:500; max-width:720px; margin:1.2rem 0 1.6rem; }
.portal-points { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:1.4rem 0; }
.portal-points .p .tick { color:var(--orange); font-weight:700; }

/* ── Contact / form ── */
.contact-cols { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.contact-facts .item { margin-bottom:1.1rem; }
.contact-facts .k { font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--steel); display:block; margin-bottom:.2rem; }
.contact-facts a, .contact-facts .v { color:var(--navy); font-weight:600; font-size:1.15rem; text-decoration:none; }
.contact-facts a:hover { color:var(--orange); }
.call-cta { background:var(--navy); color:#fff; border-radius:8px; padding:1.3rem 1.4rem; margin-bottom:1.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.call-cta .t { font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.15rem; }
.form-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.6rem; }
.form-card .lead { margin-bottom:1.1rem; color:var(--ink); }
.form-label { display:block; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); margin-bottom:.6rem; }
.input-row { display:flex; border-radius:5px; border:1.5px solid var(--line); overflow:hidden; background:#fff; transition:border-color .2s,box-shadow .2s; }
.input-row:focus-within { border-color:var(--navy); box-shadow:0 0 0 3px rgba(30,58,95,.14); }
.input-row input[type="email"] { flex:1; min-width:0; min-height:50px; padding:.9rem 1.1rem; background:transparent; border:none; outline:none; color:var(--ink); font-family:'Inter',sans-serif; font-size:1rem; }
.input-row input::placeholder { color:var(--steel); }
.input-row button { min-height:50px; padding:.9rem 1.6rem; background:var(--orange); border:none; color:#fff; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:.9rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:background .2s,box-shadow .2s; -webkit-tap-highlight-color:transparent; }
.input-row button:hover { background:var(--orange-dk); box-shadow:0 4px 14px rgba(255,107,0,.35); }
.input-row button:disabled { opacity:.7; cursor:default; }
.success-msg { display:none; padding:.9rem 0; font-family:'Rajdhani',sans-serif; font-weight:600; color:var(--navy); font-size:1.15rem; letter-spacing:.04em; }
.success-msg .star { color:var(--orange); }
.error-msg { display:none; padding:.5rem 0; color:#c0392b; font-size:.85rem; }
.privacy-note { margin-top:.8rem; font-size:.8rem; color:var(--steel); letter-spacing:.04em; }

/* ── Footer ── */
.site-foot { background:var(--navy); color:#cdd6e0; flex-shrink:0; }
.foot-inner { max-width:var(--wrap); margin:0 auto; padding:2.4rem 1.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.6rem; }
.foot-word { font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; font-size:1.1rem; display:block; }
.foot-tag { font-family:'Rajdhani',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--orange); font-size:.72rem; display:block; margin-top:.2rem; }
.foot-nav { display:flex; flex-direction:column; gap:.4rem; }
.foot-nav a { color:#cdd6e0; text-decoration:none; font-family:'Rajdhani',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.foot-nav a:hover { color:var(--orange); }
.foot-contact { display:flex; flex-direction:column; gap:.4rem; }
.foot-contact a, .foot-contact span { color:#cdd6e0; text-decoration:none; font-size:.9rem; }
.foot-contact a:hover { color:#fff; }
.foot-legal { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.14); padding-top:1rem; display:flex; flex-direction:column; gap:.3rem; }
.foot-legal span { font-size:.8rem; color:#9fb0c2; }

@media(max-width:760px){
  .card-grid, .card-grid.two, .props, .portal-points, .price-grid { grid-template-columns:1fr; }
  .contact-cols { grid-template-columns:1fr; }
  .foot-inner { grid-template-columns:1fr; gap:1.2rem; }
  .input-row { flex-direction:column; }
  .input-row button { width:100%; }
  .band-inner { flex-direction:column; align-items:flex-start; }
  .band-inner .btn, .call-cta .btn { width:100%; }
  .call-cta { flex-direction:column; align-items:flex-start; }
}
@media(max-width:560px){
  .hero .cta-row { flex-direction:column; align-items:stretch; }
  .hero .cta-row .btn { width:100%; }
}
