/* JLJ Consulting Group subsite.
   Palette matches /presentations/2026.08.25-E3-Overview.html (parchment + raspberry).
   Theme: :root = light default; html[data-theme="dark"] overrides, driven by
   /assets/theme-toggle.js (house standard 26, localStorage key rm-theme). */

:root {
  --bg: #edf0f4;
  --bg-elevated: #e3e8ef;
  --surface: #f9fafc;
  --surface-soft: #eef1f5;
  --border: #d7dde6;
  --border-strong: #9daabc;
  --ink: #0c1a30;
  --muted: #3d4c64;
  --soft: #67768e;
  --accent: #002147;
  --accent-hover: #0a3162;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0,33,71,0.09);
}
html[data-theme="dark"] {
  --bg: #0a1322;
  --bg-elevated: #070e1a;
  --surface: #101c30;
  --surface-soft: #15233a;
  --border: #22334d;
  --border-strong: #3a5070;
  --ink: #dfe6f0;
  --muted: #a0aec4;
  --soft: #7788a2;
  --accent: #5b8fd6;
  --accent-hover: #77a5e2;
  --accent-ink: #081120;
  --accent-soft: rgba(91,143,214,0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.55; min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* Nav */
header.top { border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
header.top .wrap { display: flex; align-items: baseline; gap: 26px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.wordmark span { color: var(--accent); }
.wordmark:hover { text-decoration: none; color: var(--ink); }
nav.site { display: flex; gap: 20px; margin-left: auto; }
nav.site a { color: var(--muted); font-size: 14.5px; font-weight: 650; }
nav.site a:hover { color: var(--ink); text-decoration: none; }
nav.site a.here { color: var(--accent); }

/* Hero */
.hero { padding: 60px 0 44px; }
.kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 750;
  letter-spacing: -.045em; line-height: 1.05; max-width: 21em;
}
.hero p.lede { font-size: 19px; color: var(--muted); margin-top: 18px; max-width: 36em; }
.hero p.lede strong { color: var(--ink); }

/* Sections and cards */
h2 { font-size: 24px; font-weight: 750; letter-spacing: -.025em; margin: 44px 0 14px; }
h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.015em; }
p { margin-bottom: 12px; }
section p, section li { color: var(--muted); }
section p strong, section li strong { color: var(--ink); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px;
  box-shadow: 0 0 2px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.10);
}
.card .tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.card ul { list-style: none; margin-top: 10px; }
.card li { font-size: 14px; padding: 3px 0 3px 16px; position: relative; }
.card li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }

/* Stat band */
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--border-strong);
  border: 1px solid var(--border-strong); border-radius: 14px;
  overflow: hidden; margin: 20px 0;
}
.band .cell { background: var(--surface); padding: 16px 18px; }
.band .label { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
.band .big { font-size: 25px; font-weight: 800; margin-top: 3px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.band .note { font-size: 11.5px; color: var(--soft); margin-top: 2px; }

/* Callout / pullquote (matches the deck's pullquote) */
.callout {
  border-left: 5px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 22px 0;
}
.callout p { margin: 0; color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

/* Buttons */
.cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 10px;
  font-weight: 700; font-size: 15px;
  background: var(--accent); color: var(--accent-ink);
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }

/* Timeline (about) */
.chapters { border-left: 2px solid var(--border-strong); margin: 10px 0 10px 6px; padding-left: 26px; }
.chapter { position: relative; padding-bottom: 26px; }
.chapter::before {
  content: ""; position: absolute; left: -33px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
}
.chapter .when { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* Contact form */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 5px;
}
.field label .opt { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--soft); opacity: .8; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface-soft); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.form-status { min-height: 1.3em; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.form-done h3 { color: var(--ink); }
button.btn { border: none; cursor: pointer; font-family: inherit; }
button.btn[disabled] { opacity: .6; cursor: default; }

main { flex: 1; padding-bottom: 56px; }

footer.site {
  border-top: 1px solid var(--border); background: var(--bg-elevated);
  padding: 18px 0; font-size: 12.5px; color: var(--soft);
}
footer.site .wrap { display: flex; gap: 16px; flex-wrap: wrap; }
footer.site .ver { margin-left: auto; }

@media (max-width: 640px) {
  .hero { padding: 42px 0 34px; }
  nav.site { gap: 14px; }
}



/* ==================== PALETTE PREVIEW (temporary) ====================
   Oxford is the default (:root above). The palettes below are candidates,
   applied via data-palette on <html> by /assets/palette-preview.js and
   chosen on the hidden /palette.html page. Each defines light values and
   a dark override so the rm-theme toggle keeps working. Remove the losers
   and the preview machinery once the brand decision is made. */

/* --- Raspberry: The original: parchment and raspberry, from the E3 deck. --- */
html[data-palette="raspberry"] {
  --bg: #efe9df;
  --bg-elevated: #f4efe6;
  --surface: #faf7f1;
  --surface-soft: #f1ece3;
  --border: #e0d9cd;
  --border-strong: #b1a795;
  --ink: #242424;
  --muted: #5c5c5c;
  --soft: #6f6f6f;
  --accent: #b11f4b;
  --accent-hover: #9a1a41;
  --accent-ink: #ffffff;
  --accent-soft: rgba(177,31,75,0.08);
}
html[data-palette="raspberry"][data-theme="dark"] {
  --bg: #3d3b3a;
  --bg-elevated: #343231;
  --surface: #292929;
  --surface-soft: #2e2e2e;
  --border: #474747;
  --border-strong: #5f5f5f;
  --ink: #dedede;
  --muted: #a5a5a5;
  --soft: #b0b0b0;
  --accent: #fd8ea1;
  --accent-hover: #fb7b91;
  --accent-ink: #1a1a1a;
  --accent-soft: rgba(253,142,161,0.14);
}

/* --- Heritage Green: Racing green on cream: trust and permanence. --- */
html[data-palette="green"] {
  --bg: #f2f1ea;
  --bg-elevated: #ecebe1;
  --surface: #faf9f3;
  --surface-soft: #efeee5;
  --border: #dddccd;
  --border-strong: #adab97;
  --ink: #1d2721;
  --muted: #4f5b52;
  --soft: #75816f;
  --accent: #1e5c40;
  --accent-hover: #174c34;
  --accent-ink: #ffffff;
  --accent-soft: rgba(30,92,64,0.09);
}
html[data-palette="green"][data-theme="dark"] {
  --bg: #1c231f;
  --bg-elevated: #171d1a;
  --surface: #232c27;
  --surface-soft: #29332d;
  --border: #38443d;
  --border-strong: #53645a;
  --ink: #e4eae5;
  --muted: #aab6ac;
  --soft: #83917f;
  --accent: #5fbf95;
  --accent-hover: #77cca6;
  --accent-ink: #121915;
  --accent-soft: rgba(95,191,149,0.14);
}

/* --- Mechanical: Visme 6: near-black on light gray, bright blue accents, mellow. --- */
html[data-palette="mechanical"] {
  --bg: #eff0f2;
  --bg-elevated: #e8eaed;
  --surface: #fafbfc;
  --surface-soft: #f0f1f4;
  --border: #dcdfe4;
  --border-strong: #a9aeb8;
  --ink: #17181c;
  --muted: #4d5158;
  --soft: #787d87;
  --accent: #2f6bff;
  --accent-hover: #1f56e0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(47,107,255,0.08);
}
html[data-palette="mechanical"][data-theme="dark"] {
  --bg: #191a1e;
  --bg-elevated: #141518;
  --surface: #212227;
  --surface-soft: #27282e;
  --border: #37383f;
  --border-strong: #54565f;
  --ink: #e8e9ec;
  --muted: #a9acb4;
  --soft: #82858f;
  --accent: #6f9aff;
  --accent-hover: #8badff;
  --accent-ink: #101116;
  --accent-soft: rgba(111,154,255,0.14);
}

/* --- Cosmic: Visme 9: gray-washed white, space blue, slate gray, soft gradients. --- */
html[data-palette="cosmic"] {
  --bg: #f3f4f8;
  --bg-elevated: #eaecf3;
  --surface: #fbfbfd;
  --surface-soft: #eff0f6;
  --border: #dcdfe9;
  --border-strong: #a6abc0;
  --ink: #20263d;
  --muted: #4e5670;
  --soft: #7a8098;
  --accent: #3b4d8f;
  --accent-hover: #2e3d75;
  --accent-ink: #ffffff;
  --accent-soft: rgba(59,77,143,0.08);
}
html[data-palette="cosmic"][data-theme="dark"] {
  --bg: #171b2c;
  --bg-elevated: #121525;
  --surface: #1f2438;
  --surface-soft: #252b42;
  --border: #343a55;
  --border-strong: #4e567a;
  --ink: #e4e6f0;
  --muted: #a7adc4;
  --soft: #7f86a3;
  --accent: #8b9be0;
  --accent-hover: #a2b0ea;
  --accent-ink: #12162a;
  --accent-soft: rgba(139,155,224,0.15);
}

/* --- Electric Noir: Visme 12: smoky black and electric blue, with Space Grotesk. --- */
html[data-palette="noir"] {
  --bg: #f2f3f5;
  --bg-elevated: #eaebee;
  --surface: #fbfbfc;
  --surface-soft: #eff0f2;
  --border: #dbdde2;
  --border-strong: #a4a8b0;
  --ink: #101114;
  --muted: #45484f;
  --soft: #71747d;
  --accent: #1f51ff;
  --accent-hover: #0f3fe6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(31,81,255,0.09);
}
html[data-palette="noir"][data-theme="dark"] {
  --bg: #101114;
  --bg-elevated: #0b0c0f;
  --surface: #191a1f;
  --surface-soft: #1f2026;
  --border: #303239;
  --border-strong: #4c4f58;
  --ink: #ebecef;
  --muted: #a8abb3;
  --soft: #7f828b;
  --accent: #4d74ff;
  --accent-hover: #6c8cff;
  --accent-ink: #0a0b10;
  --accent-soft: rgba(77,116,255,0.16);
}

/* --- Warm Minimal: Visme 19: eggshell, dark vanilla, taupe, jelly bean red. --- */
html[data-palette="warm"] {
  --bg: #f0ead6;
  --bg-elevated: #eae2c8;
  --surface: #f9f5e9;
  --surface-soft: #efe9d8;
  --border: #ded4bb;
  --border-strong: #ad9f83;
  --ink: #2b2620;
  --muted: #5d554a;
  --soft: #837a6c;
  --accent: #c5443c;
  --accent-hover: #a83630;
  --accent-ink: #ffffff;
  --accent-soft: rgba(197,68,60,0.09);
}
html[data-palette="warm"][data-theme="dark"] {
  --bg: #282219;
  --bg-elevated: #211c14;
  --surface: #332c21;
  --surface-soft: #3a3327;
  --border: #4d4436;
  --border-strong: #6f6350;
  --ink: #ece5d6;
  --muted: #b3a996;
  --soft: #8d8371;
  --accent: #e2685f;
  --accent-hover: #ea837b;
  --accent-ink: #1d1811;
  --accent-soft: rgba(226,104,95,0.15);
}

/* --- Traditional: Visme 22: phthalo green, dark slate gray, pewter blue. --- */
html[data-palette="traditional"] {
  --bg: #f0efe9;
  --bg-elevated: #e8e7de;
  --surface: #f9f8f4;
  --surface-soft: #eeede5;
  --border: #d9dad2;
  --border-strong: #9fa8a5;
  --ink: #22302e;
  --muted: #4c5a58;
  --soft: #748381;
  --accent: #123524;
  --accent-hover: #0c2619;
  --accent-ink: #ffffff;
  --accent-soft: rgba(18,53,36,0.09);
}
html[data-palette="traditional"][data-theme="dark"] {
  --bg: #18201e;
  --bg-elevated: #131a18;
  --surface: #202b28;
  --surface-soft: #26322f;
  --border: #37443f;
  --border-strong: #526460;
  --ink: #e2e8e5;
  --muted: #a8b4b0;
  --soft: #7f8d89;
  --accent: #5da886;
  --accent-hover: #74b998;
  --accent-ink: #101815;
  --accent-soft: rgba(93,168,134,0.15);
}

/* --- Refreshing: Visme 23: lapis lazuli to aqua, airy and blue. --- */
html[data-palette="refreshing"] {
  --bg: #eef4f8;
  --bg-elevated: #e3edf4;
  --surface: #fafcfd;
  --surface-soft: #edf3f7;
  --border: #d6e2ea;
  --border-strong: #9db7c6;
  --ink: #15293a;
  --muted: #41586b;
  --soft: #6c8294;
  --accent: #26619c;
  --accent-hover: #1c4e80;
  --accent-ink: #ffffff;
  --accent-soft: rgba(38,97,156,0.09);
}
html[data-palette="refreshing"][data-theme="dark"] {
  --bg: #0f1d29;
  --bg-elevated: #0b1722;
  --surface: #162635;
  --surface-soft: #1b2e3f;
  --border: #2a4053;
  --border-strong: #41607a;
  --ink: #e1eaf1;
  --muted: #a3b6c5;
  --soft: #7b91a3;
  --accent: #5aa7d8;
  --accent-hover: #74bce7;
  --accent-ink: #0b1824;
  --accent-soft: rgba(90,167,216,0.16);
}

/* --- Myrtle: Visme 24: myrtle green and keppel on azureish white, with Poppins. --- */
html[data-palette="myrtle"] {
  --bg: #eef4f6;
  --bg-elevated: #dbe9f4;
  --surface: #fbfdfd;
  --surface-soft: #edf4f5;
  --border: #d6e4e6;
  --border-strong: #9dbcc0;
  --ink: #173c39;
  --muted: #43605e;
  --soft: #6f8886;
  --accent: #317873;
  --accent-hover: #26605c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(49,120,115,0.09);
}
html[data-palette="myrtle"][data-theme="dark"] {
  --bg: #122321;
  --bg-elevated: #0e1c1a;
  --surface: #1a302d;
  --surface-soft: #203734;
  --border: #304a46;
  --border-strong: #496b66;
  --ink: #e2edec;
  --muted: #a7bfbc;
  --soft: #7e9995;
  --accent: #3ab09e;
  --accent-hover: #55c4b3;
  --accent-ink: #0e1f1c;
  --accent-soft: rgba(58,176,158,0.16);
}

/* --- Rose and Blueberry: Visme 35: rose reds with a blueberry-blue counterpoint. --- */
html[data-palette="rose"] {
  --bg: #f7f0f2;
  --bg-elevated: #f2e7ea;
  --surface: #fdfafb;
  --surface-soft: #f4ecee;
  --border: #e6d8dc;
  --border-strong: #bb9ca5;
  --ink: #2a1a20;
  --muted: #5d4750;
  --soft: #87707a;
  --accent: #c21e56;
  --accent-hover: #a11846;
  --accent-ink: #ffffff;
  --accent-soft: rgba(194,30,86,0.08);
}
html[data-palette="rose"][data-theme="dark"] {
  --bg: #261219;
  --bg-elevated: #1f0e14;
  --surface: #301a22;
  --surface-soft: #372028;
  --border: #4c3039;
  --border-strong: #6f4a58;
  --ink: #eee0e5;
  --muted: #c0a3ac;
  --soft: #977a85;
  --accent: #4f86f7;
  --accent-hover: #6d9bf9;
  --accent-ink: #101a2e;
  --accent-soft: rgba(79,134,247,0.16);
}

/* --- Navy: The former default: deep navy authority. --- */
html[data-palette="navy"] {
  --bg: #eaeef5;
  --bg-elevated: #dfe6f0;
  --surface: #f8fafd;
  --surface-soft: #edf1f7;
  --border: #cfd9e7;
  --border-strong: #93a5c1;
  --ink: #0e1d33;
  --muted: #3f5170;
  --soft: #68789a;
  --accent: #1b3a6b;
  --accent-hover: #142d54;
  --accent-ink: #ffffff;
  --accent-soft: rgba(27,58,107,0.09);
}
html[data-palette="navy"][data-theme="dark"] {
  --bg: #0b1526;
  --bg-elevated: #081020;
  --surface: #122038;
  --surface-soft: #172845;
  --border: #24365a;
  --border-strong: #3d5480;
  --ink: #dfe6f2;
  --muted: #9fb0cc;
  --soft: #7488ab;
  --accent: #6f9be8;
  --accent-hover: #8badef;
  --accent-ink: #0a1424;
  --accent-soft: rgba(111,155,232,0.15);
}

/* --- Electric Violet: Awwwards pick, MiniMax H3: cream, near-black, electric magenta-violet. --- */
html[data-palette="violet"] {
  --bg: #f7f2e9;
  --bg-elevated: #f1e9db;
  --surface: #fffdf8;
  --surface-soft: #f4efe4;
  --border: #e5dcc9;
  --border-strong: #b3a88e;
  --ink: #191219;
  --muted: #544a54;
  --soft: #7f737f;
  --accent: #b02ad9;
  --accent-hover: #9420b8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(176,42,217,0.08);
}
html[data-palette="violet"][data-theme="dark"] {
  --bg: #171118;
  --bg-elevated: #110c12;
  --surface: #201823;
  --surface-soft: #271e2a;
  --border: #3b2e3f;
  --border-strong: #5c485f;
  --ink: #ece4ed;
  --muted: #b5a7b7;
  --soft: #8d7e8f;
  --accent: #e879f9;
  --accent-hover: #ef98fb;
  --accent-ink: #160f18;
  --accent-soft: rgba(232,121,249,0.15);
}

/* --- Petrol and Lime: Awwwards pick, Allia Health Group: deep petrol teal with a lime edge. --- */
html[data-palette="petrol"] {
  --bg: #eef3f2;
  --bg-elevated: #e2ecea;
  --surface: #fafcfb;
  --surface-soft: #ecf2f0;
  --border: #d5e1de;
  --border-strong: #98b3ae;
  --ink: #0e3236;
  --muted: #3d5a57;
  --soft: #688380;
  --accent: #0f5e66;
  --accent-hover: #0a4a51;
  --accent-ink: #ffffff;
  --accent-soft: rgba(15,94,102,0.09);
}
html[data-palette="petrol"][data-theme="dark"] {
  --bg: #0a272b;
  --bg-elevated: #071f23;
  --surface: #103439;
  --surface-soft: #153d42;
  --border: #245257;
  --border-strong: #3b6e73;
  --ink: #dfeae8;
  --muted: #a2bcb8;
  --soft: #78968f;
  --accent: #b9e94d;
  --accent-hover: #c9f06e;
  --accent-ink: #132a12;
  --accent-soft: rgba(185,233,77,0.16);
}

/* Font treatments for the two visme patterns that include them. The
   fonts are injected by palette-preview.js only when these are active. */
html[data-palette="noir"] h1, html[data-palette="noir"] h2, html[data-palette="noir"] h3,
html[data-palette="noir"] .wordmark, html[data-palette="noir"] .kicker {
  font-family: "Space Grotesk", "Segoe UI", Calibri, sans-serif;
}
html[data-palette="myrtle"] body { font-family: "Poppins", "Segoe UI", Calibri, sans-serif; }