/* Jordan Holdings LLC — shared styles
   Identity: an engraved brass nameplate on deep navy, set on warm paper.
   Palette and type are deliberate; legal pages stay quiet and readable. */

:root{
  --ink:#1b2a3a;       /* deep navy — plaque, primary text */
  --ink-2:#243a51;     /* lighter navy for plaque sheen */
  --paper:#fbfaf6;     /* warm near-white page */
  --panel:#ffffff;     /* cards */
  --brass:#a9762a;     /* accent — brass */
  --brass-2:#c8983f;   /* brighter brass for sheen/hover */
  --slate:#566270;     /* secondary text */
  --line:#e8e2d7;      /* hairline on paper */
  --line-ink:#33485f;  /* hairline on navy */
  --maxw:760px;
}

/* ---- dark mode ----
   --ink doubles as primary text and the navy plaque/footer surface, so in
   dark mode we flip --ink to a light text colour and pin those two surfaces
   to fixed dark navies below. */
[data-theme="dark"]{
  --ink:#e9eef4;       /* primary text (now light) */
  --paper:#0f161e;     /* dark page */
  --panel:#19232f;     /* cards */
  --brass:#cda659;     /* slightly brighter brass for contrast */
  --brass-2:#e6bd68;
  --slate:#9fadba;     /* secondary text */
  --line:#27323e;      /* hairline */
  color-scheme:dark;
}
[data-theme="dark"] .plate{
  background:linear-gradient(160deg,#21344a,#15212e);
  border-color:#33485f;
}
[data-theme="dark"] .sitefoot{background:#0a1017}
[data-theme="dark"] .secure-note,
[data-theme="dark"] .callout{background:#161f29}
[data-theme="dark"] .doc p,
[data-theme="dark"] .doc li{color:#c3ccd5}
[data-theme="dark"] .placeholder{background:rgba(230,189,104,.16);color:#e6bd68}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brass);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:20px 24px;
}
.brand{
  font-family:Spectral,Georgia,serif;
  font-weight:600;font-size:18px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
.brand:hover{color:var(--ink);text-decoration:none}
.brand span{
  display:inline-block;margin-left:6px;font-size:11px;letter-spacing:.18em;
  color:var(--brass);vertical-align:2px;
}
.topnav{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.topnav a{
  color:var(--slate);letter-spacing:.02em;
}
.topnav a:hover{color:var(--ink);text-decoration:none}

/* ---- dark-mode toggle ---- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:38px;height:38px;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--slate);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--brass)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}

/* ---- the nameplate (signature) ---- */
.plate-wrap{max-width:var(--maxw);margin:8px auto 0;padding:0 24px}
.plate{
  position:relative;
  background:linear-gradient(160deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-ink);
  border-radius:6px;
  padding:54px 40px 48px;
  text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -28px rgba(27,42,58,.55);
  overflow:hidden;
}
/* faint brass screw-holes at the corners, like a real plaque */
.plate::before,.plate::after{
  content:"";position:absolute;top:16px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--brass-2),#6f4d18);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.plate::before{left:18px}
.plate::after{right:18px}
.plate-eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass-2);margin:0 0 18px;
}
.plate-name{
  font-family:Spectral,Georgia,serif;
  font-weight:600;
  font-size:clamp(30px,7vw,52px);
  letter-spacing:.10em;text-transform:uppercase;
  color:#f3efe6;margin:0;line-height:1.05;
  text-shadow:0 1px 0 rgba(0,0,0,.4),0 -1px 0 rgba(255,255,255,.05);
}
.plate-name em{
  font-style:normal;display:block;margin-top:10px;
  font-size:.34em;letter-spacing:.42em;color:var(--brass-2);
}
.plate-rule{
  width:64px;height:2px;background:var(--brass);
  margin:22px auto 18px;border-radius:2px;
}
.plate-sub{
  margin:0;color:#c4cdd7;font-size:15px;letter-spacing:.02em;
}

/* ---- generic content column ---- */
main{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lead{margin:40px auto 0;font-size:18px;color:var(--slate);max-width:60ch}

.cta-row{margin:34px 0 6px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--brass);color:#fff;
  font-weight:600;font-size:16px;letter-spacing:.01em;
  padding:15px 30px;border-radius:5px;
  box-shadow:0 10px 24px -14px rgba(169,118,42,.9);
  transition:transform .15s ease,background .15s ease;
}
.btn:hover{background:#946726;color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn svg{width:17px;height:17px}
.btn-note{font-size:13px;color:var(--slate)}

.tiles{
  margin:46px 0 8px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:22px 22px 20px;
}
.tile h3{margin:0 0 6px;font-size:15px;letter-spacing:.01em}
.tile p{margin:0;font-size:14px;color:var(--slate);line-height:1.6}

.secure-note{
  margin:40px 0 0;padding:18px 20px;
  background:#f4f1ea;border:1px solid var(--line);border-radius:6px;
  font-size:14px;color:var(--slate);display:flex;gap:12px;align-items:flex-start;
}
.secure-note svg{flex:0 0 auto;width:20px;height:20px;color:var(--brass);margin-top:1px}

/* ---- legal / text pages ---- */
.doc{margin-top:30px}
.doc-kicker{
  font-size:11px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--brass);margin:0 0 8px;
}
.doc h1{
  font-family:Spectral,Georgia,serif;font-weight:600;
  font-size:clamp(26px,5vw,38px);letter-spacing:.01em;margin:0 0 6px;line-height:1.15;
}
.doc .updated{color:var(--slate);font-size:13px;margin:0 0 4px}
.doc h2{
  font-family:Spectral,Georgia,serif;font-weight:600;
  font-size:21px;margin:38px 0 10px;letter-spacing:.005em;
  padding-top:18px;border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p,.doc li{color:#2c3a48;font-size:16px;line-height:1.7}
.doc ul{padding-left:1.2em;margin:10px 0}
.doc li{margin:6px 0}
.doc strong{color:var(--ink)}

.callout{
  background:#f4f1ea;border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:4px;padding:14px 18px;margin:22px 0;font-size:15px;color:var(--slate);
}

.contact-card{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:26px 26px 22px;margin-top:24px;
}
.contact-card dl{margin:0;display:grid;grid-template-columns:130px 1fr;gap:12px 18px}
.contact-card dt{color:var(--slate);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.contact-card dd{margin:0;font-size:16px;color:var(--ink)}

.placeholder{
  background:rgba(169,118,42,.12);color:#7a5418;
  padding:0 5px;border-radius:3px;font-weight:600;font-size:.95em;
  white-space:nowrap;
}

/* ---- footer ---- */
.sitefoot{margin-top:64px;background:var(--ink);color:#aeb9c5}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px 40px}
.foot-secure{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;color:#b6c1cd}
.foot-secure svg{flex:0 0 auto;width:16px;height:16px;color:var(--brass-2);margin-top:2px}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0 16px;font-size:14px}
.foot-nav a{color:#cfd7df}
.foot-nav a:hover{color:#fff;text-decoration:none}
.foot-legal{font-size:12px;color:#7f8b98;letter-spacing:.02em}

@media (max-width:560px){
  body{font-size:16px}
  .plate{padding:42px 24px 38px}
  .topbar{justify-content:center;text-align:center}
  .contact-card dl{grid-template-columns:1fr;gap:4px 0}
  .contact-card dd{margin-bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}