/* =====================================================================
   Realis Solutions Group — site styles (HYBRID)
   Warm marketing base + Courier "typewriter" labels, em-dash lists,
   slate accent, square corners. Drop-in shared stylesheet for all pages.
   Prototype loads Courier Prime + Open Sans from Google Fonts; for prod,
   self-host the woff2 already in design-system/fonts/.
   ===================================================================== */

:root{
  /* Warm web layer (from design-system colors_and_type.css) */
  --paper:      #faf9f6;   /* warm off-white page background        */
  --panel:      #f1efe9;   /* warm offset panel                     */
  --ink:        #1a1a18;   /* warm near-black text                  */
  --ink-2:      #44423d;   /* body / secondary                      */
  --muted:      #8a857c;   /* labels, eyebrows, fine print          */
  --border:     #d8d5cf;   /* warm hairline                         */
  --border-2:   #b8b4ac;   /* stronger hairline                     */
  --accent:     #3c4a5c;   /* editorial slate accent (emphasis)     */
  --black:      #000000;

  --font-mono:  "Courier Prime","Courier New",ui-monospace,monospace;
  --font-sans:  "Open Sans","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;

  --max: 1240px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans);
  background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted);
}
.section-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-5);
}
h1,h2,h3{ font-family:var(--font-mono); font-weight:400; letter-spacing:-0.01em; color:var(--ink); }
.em{ font-style:italic; color:var(--accent); }        /* headline emphasis */
.lead{ font-size:21px; line-height:1.6; color:var(--ink-2); max-width:62ch; }

/* em-dash bullet list — brand signature */
.dash-list{ list-style:none; }
.dash-list > li{ position:relative; padding-left:1.5em; margin-bottom:var(--sp-3); color:var(--ink-2); }
.dash-list > li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:72px;
}
.nav-logo img{ height:46px; width:auto; display:block; }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.02em;
  color:var(--ink-2); text-decoration:none; transition:color .12s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  border:1.5px solid var(--ink); color:var(--ink);
  padding:7px 14px; text-decoration:none; transition:.12s;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }   /* inversion */
/* mobile hamburger (CSS-only checkbox toggle) — hidden on desktop */
.nav-cb{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-burger{ display:none; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 48px; }
.section{ max-width:var(--max); margin:0 auto; padding:84px 48px; }
.section + .section{ border-top:1px solid var(--border); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-mono); font-size:15px;
  letter-spacing:0.02em; text-decoration:none; padding:14px 26px;
  border:1.5px solid var(--ink); transition:.12s; cursor:pointer;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--paper); color:var(--ink); }   /* invert */
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- offering detail template ---------- */
.offer-hero{ padding:64px 48px 40px; max-width:var(--max); margin:0 auto; }
.offer-hero h1{ font-size:44px; line-height:1.08; margin:14px 0 20px; }
.offer-cols{
  max-width:var(--max); margin:0 auto; padding:8px 48px 8px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
.offer-block{ padding:40px 48px; max-width:var(--max); margin:0 auto; border-top:1px solid var(--border); }

/* what-you-get cards */
.get-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.get-card{ background:var(--paper); padding:22px 22px 24px; }
.get-card h3{ font-size:17px; margin-bottom:8px; }
.get-card p{ font-size:15px; color:var(--ink-2); line-height:1.65; }

/* how-it-works numbered steps */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:30px 1fr; gap:20px; padding:18px 0; border-top:1px solid var(--border); align-items:start; }
.step:last-child{ border-bottom:1px solid var(--border); }
.step-num{ font-family:var(--font-mono); font-size:15px; color:var(--accent); }
.step h3{ font-size:17px; margin-bottom:4px; }
.step p{ font-size:15px; color:var(--ink-2); line-height:1.65; }

/* logistics table */
.logistics{ width:100%; border-collapse:collapse; font-size:15px; }
.logistics td{ padding:10px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.logistics td:first-child{ font-family:var(--font-mono); color:var(--muted); width:38%; letter-spacing:0.04em; }

/* inverted callout (pricing / key point) */
.callout{ background:var(--black); color:var(--paper); padding:22px 26px; font-family:var(--font-mono); }

/* offering rows (services list + homepage services section) */
.offer-row{ display:grid; grid-template-columns:34px 1fr auto; gap:24px; align-items:start;
  padding:28px 0; border-top:1px solid var(--border); text-decoration:none; color:inherit; transition:background .12s; }
.offer-row:last-child{ border-bottom:1px solid var(--border); }
.offer-row:hover{ background:var(--panel); }
.offer-row .rn{ font-family:var(--font-mono); font-size:18px; color:var(--accent); padding-top:2px; }
.offer-row h3{ font-size:23px; margin-bottom:8px; }
.offer-row .oe{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.offer-row p{ font-size:16px; color:var(--ink-2); line-height:1.65; max-width:64ch; }
.offer-row .gets{ font-family:var(--font-mono); font-size:13px; color:var(--ink-2); margin-top:8px; }
.offer-row .go{ font-family:var(--font-mono); font-size:13px; color:var(--accent); white-space:nowrap; padding-top:4px; }
@media (max-width:700px){ .offer-row{ grid-template-columns:1fr; gap:8px; } .offer-row .go{ padding-top:0; } }

/* "where do you start" chooser — editorial two-column, rules not boxes */
.start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.start-card{ display:block; text-decoration:none; color:inherit; }
.start-card .if{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); }
.start-card h3{ font-family:var(--font-mono); font-size:24px; margin:6px 0 0;
  padding-bottom:14px; border-bottom:2px solid var(--ink); transition:color .12s; }
.start-card:hover h3{ color:var(--accent); }
.start-card p{ font-size:16px; color:var(--ink-2); line-height:1.65; margin-top:16px; }
.start-card .gets{ font-family:var(--font-mono); font-size:13px; color:var(--ink-2); margin-top:12px; }
.start-card .go{ font-family:var(--font-mono); font-size:13px; color:var(--accent); margin-top:14px; }
.start-card:hover .go{ text-decoration:underline; }
@media (max-width:820px){ .start-grid{ grid-template-columns:1fr; gap:40px; } }

/* proof band */
.proof{ background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.proof-inner{ max-width:var(--max); margin:0 auto; padding:36px 48px; display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between; }
.stat .n{ font-family:var(--font-mono); font-size:34px; color:var(--ink); }
.stat .l{ font-size:14px; color:var(--ink-2); }
.badges{ display:flex; gap:10px; flex-wrap:wrap; }
.badge{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; border:1.5px solid var(--ink); padding:5px 11px; }

/* cta band */
.cta-band{ text-align:center; padding:80px 48px; border-top:1px solid var(--border); }
.cta-band h2{ font-size:36px; margin-bottom:24px; }
.cta-sub{ font-size:15px; color:var(--ink-2); line-height:1.7; max-width:46ch; margin:16px auto 0; }

/* footer */
footer{ border-top:1px solid var(--border); background:var(--panel); padding:26px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a{ font-family:var(--font-mono); font-size:13px; color:var(--ink-2); text-decoration:none; }
footer a:hover{ color:var(--ink); }
.footer-copy{ font-size:12px; color:var(--muted); }

/* placeholder marker (remove before prod) */
.todo{ outline:1.5px dashed #b06; outline-offset:2px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{ padding:0 24px; }
  .nav-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:11px 9px; margin:0 -9px 0 0; cursor:pointer; }
  .nav-burger span{ display:block; height:2px; background:var(--ink); transition:transform .2s, opacity .2s; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--border); box-shadow:0 10px 24px rgba(17,17,17,.07);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 18px; display:none; }
  .nav-links a{ padding:13px 2px; font-size:15px; border-bottom:1px solid var(--border); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-cta{ margin-top:12px; padding:12px; text-align:center; }
  .nav-cb:checked ~ .nav-links{ display:flex; }
  .nav-cb:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-cb:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-cb:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .offer-cols{ grid-template-columns:1fr; gap:28px; }
  .get-grid{ grid-template-columns:1fr; }
  .section,.offer-hero,.offer-block,.wrap{ padding-left:24px; padding-right:24px; }
  .offer-hero h1{ font-size:34px; }
}
@media (max-width:600px){
  .proof-inner{ gap:20px; }
}

/* mobile floating booking bar */
.mobile-cta{ display:none; }
@media (max-width:700px){
  .mobile-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:15px;
    text-align:center; text-decoration:none; padding:16px 20px;
    border-top:1px solid var(--border-2); }
  body{ padding-bottom:56px; }
}

/* whitepaper / papers components */
.paper-feature{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  border:2px solid var(--ink); padding:26px 28px; text-decoration:none; color:inherit; transition:background .12s; }
.paper-feature:hover{ background:var(--panel); }
.paper-feature .pk{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); }
.paper-feature h3{ font-family:var(--font-mono); font-size:24px; line-height:1.2; margin:6px 0 6px; }
.paper-feature p{ font-size:15px; color:var(--ink-2); line-height:1.6; max-width:60ch; }
.paper-feature .go{ font-family:var(--font-mono); font-size:13px; color:var(--accent); white-space:nowrap; }
.paper-mark{ font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:0.1em;
  border:1.5px solid var(--ink); padding:22px 14px; text-align:center; line-height:1.4; white-space:nowrap; }
@media (max-width:820px){ .paper-feature{ grid-template-columns:1fr; gap:16px; } .paper-mark{ display:none; } }
.pullquote-lg{ font-family:var(--font-mono); font-size:23px; line-height:1.4; color:var(--ink);
  border-left:3px solid var(--accent); padding:10px 0 10px 26px; margin:8px 0 14px; }
.pq-src{ font-size:14px; color:var(--muted); }
.exhibit{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.exhibit > div{ background:var(--paper); padding:20px 18px; }
.exhibit .m{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--accent); }
.exhibit h4{ font-family:var(--font-mono); font-weight:400; font-size:17px; margin:6px 0 6px; }
.exhibit p{ font-size:14px; color:var(--ink-2); line-height:1.55; }
@media (max-width:900px){ .exhibit{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .exhibit{ grid-template-columns:1fr; } }