/* ============================================================
   LoTeHIm Solutions — lotehim.com — v2
   Win theme: AI-native procurement. Absolutely executive grade.
   Charcoal / stone palette · Playfair Display + Montserrat
   (fallbacks: Georgia + Calibri)
   ============================================================ */

:root {
  --charcoal:       #23211E;   /* primary ink */
  --charcoal-deep:  #181613;   /* hero / footer */
  --stone:          #A89F91;   /* accent */
  --stone-dark:     #8C8273;   /* accent hover / rules */
  --stone-light:    #EAE6DF;   /* alt section bg */
  --offwhite:       #F7F5F1;   /* page bg */
  --white:          #FFFFFF;
  --gold:           #C8A24B;   /* v5: single warm accent, one element per icon */
  --gold-tint:      #F3ECD9;   /* v5: faint gold badge background */
  --ink-soft:       #4A4640;   /* body text */
  --ink-faint:      #7A746B;   /* meta text */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Montserrat", Calibri, "Segoe UI", Arial, sans-serif;
  --maxw: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); color: var(--charcoal); font-weight: 600; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin-bottom: 1rem; }
h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.5rem; }

a { color: var(--charcoal); text-decoration: none; }
p  { max-width: 62ch; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 241, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stone-light);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  height: 72px;
  max-width: 1280px;   /* header gets extra room so brand + nav fit on one row at 1280/1440 */
}
/* v3 fix: wordmark + tagline must never wrap — wordmark on one line,
   tagline on one line beneath it. nowrap + tight line-height. */
.brand {
  font-family: var(--serif); font-size: 1.3rem; color: var(--charcoal);
  font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; line-height: 1.15; flex-shrink: 0;
}
.brand small {
  display: block; font-family: var(--sans); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stone-dark); white-space: nowrap; line-height: 1.4;
}
@media (max-width: 400px) {
  .brand { font-size: 1.1rem; }
  .brand small { letter-spacing: 0.16em; }
}
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.nav a { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--charcoal); border-bottom: 2px solid var(--stone); padding-bottom: 2px; }
.nav .btn { border-bottom: none; padding-bottom: 0; }

/* mobile nav — breakpoint raised to 1180px (v3) so the full nav only
   shows where it comfortably fits beside the unwrapped wordmark */
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--charcoal); cursor: pointer; }
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--offwhite); flex-direction: column; gap: 0;
    border-bottom: 1px solid var(--stone-light); padding: 12px 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 24px; width: 100%; }
  .nav a:hover, .nav a.active { border-bottom: none; }
  .nav .btn { margin: 12px 24px; width: auto; }
}

/* ---------- Buttons ----------
   v2 fix: .btn uses inline-flex with centered alignment so the label
   sits vertically centred (was bottom-aligned via baseline quirks in
   the header nav), and pre-hover contrast is solid charcoal on white
   text everywhere — readable before hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 28px;
  background: var(--charcoal); color: var(--white) !important;
  border: 1px solid var(--charcoal);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.btn:hover { background: var(--stone-dark); border-color: var(--stone-dark); color: var(--white) !important; }
.nav .btn { height: 44px; padding: 0 18px; font-size: 0.78rem; align-self: center; white-space: nowrap; }
.btn-on-dark { background: var(--stone); color: var(--charcoal-deep) !important; border-color: var(--stone); }
.btn-on-dark:hover { background: var(--white); border-color: var(--white); color: var(--charcoal-deep) !important; }
.link-arrow { font-weight: 600; font-size: 0.92rem; color: var(--charcoal); border-bottom: 1px solid var(--stone); padding-bottom: 1px; }
.link-arrow:hover { border-color: var(--charcoal); }

/* ---------- Hero ---------- */
.hero {
  background: var(--charcoal-deep);
  color: var(--stone-light);
  padding: 110px 0 90px;
}
.hero h1 { color: var(--white); max-width: 18.5em; }
.hero .eyebrow { color: var(--stone); }
.hero .sub {
  font-size: 1.12rem; color: var(--stone-light);
  max-width: 56ch; margin: 26px 0 38px; line-height: 1.7;
}
.hero .cta-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero .secondary-link { color: var(--stone); font-size: 0.92rem; font-weight: 600; border-bottom: 1px solid var(--stone-dark); padding-bottom: 2px; }
.hero .secondary-link:hover { color: var(--white); border-color: var(--white); }

.eyebrow {
  display: block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--stone-dark); margin-bottom: 18px;
}

/* ---------- Credibility strip ---------- */
.cred-strip {
  background: var(--charcoal);
  color: var(--stone-light);
  padding: 22px 0;
  border-top: 1px solid #3a362f;
}
.cred-strip .wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
/* v3 typography rule: no italics anywhere — emphasis via family, size, colour */
/* v4: .creds rule removed with the employer-credentials span; the strip carries .cred-line only */
.cred-strip .cred-line { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-light); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section.alt { background: var(--stone-light); }
.section.dark { background: var(--charcoal-deep); }
.section.dark h2 { color: var(--white); }
.section.dark p { color: var(--stone-light); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Pillars / cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 880px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-top: 3px solid var(--stone);
  padding: 34px 30px;
}
.card .stage-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--stone-dark); display: block; margin-bottom: 12px;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.97rem; margin-bottom: 18px; }
.section.alt .card { background: var(--offwhite); }

/* lists */
.feature-list { list-style: none; }
.feature-list li { padding: 14px 0 14px 30px; position: relative; border-bottom: 1px solid var(--stone-light); max-width: 64ch; }
.feature-list li::before { content: "—"; position: absolute; left: 0; color: var(--stone-dark); font-weight: 700; }
.feature-list li strong { color: var(--charcoal); }
.feature-list.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.feature-list.two-col li { max-width: none; }
@media (max-width: 760px) { .feature-list.two-col { grid-template-columns: 1fr; } }
.leaders { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 8px; }
.leader h3 { margin-bottom: 2px; }
.leader .role { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-dark); margin-bottom: 14px; }
@media (max-width: 760px) { .leaders { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Stage pages — compact one-viewport layout (v2) ----------
   Each stage page: compact hero band + a horizontal panel row that
   fits within one desktop viewport. Panels stack on mobile. */
.stage-hero {
  background: var(--charcoal-deep);
  color: var(--stone-light);
  padding: 56px 0 44px;
}
.stage-hero h1 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 24em; }
.stage-hero .eyebrow { color: var(--stone); margin-bottom: 12px; }
.stage-hero .sub { font-size: 1.02rem; color: var(--stone-light); max-width: 60ch; margin: 14px 0 0; line-height: 1.6; }

.stage-panels { padding: 44px 0 36px; }
.panel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.panel-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.panel-row.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.panel-row.cols-5 .panel { padding: 20px 16px; }
.panel-row.cols-5 .panel h3 { font-size: 0.98rem; }
.panel-row.cols-5 .panel .oneline { font-size: 0.88rem; }
.panel-row.cols-5 .panel ul { font-size: 0.84rem; }
.panel-row.cols-5 .panel li { min-height: 5em; }
.panel-row.cols-5 .panel li .step { font-size: 0.63rem; }
@media (max-width: 1024px) { .panel-row.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .panel-row.cols-5 { grid-template-columns: 1fr; } }
.panel {
  background: var(--white);
  border-top: 3px solid var(--stone);
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  position: relative;
}
/* v4 framework discipline: every panel has the same structural depth —
   title row, tagline row, three named framework steps, meta row — with
   fixed minimum row heights so all rows align across the full panel row. */
.panel h3 { font-size: 1.08rem; margin-bottom: 4px; min-height: 3.6em; }
.panel .oneline { font-family: var(--serif); font-size: 0.94rem; color: var(--charcoal); margin-bottom: 14px; min-height: 3.4em; }
.panel ul { list-style: none; font-size: 0.88rem; line-height: 1.5; }
.panel li { padding: 9px 0 10px; border-bottom: 1px solid var(--stone-light); min-height: 4.8em; }
.panel li:last-child { border-bottom: none; }
/* Framework step word: small caps, opens each row of the three-step arc */
.panel li .step {
  display: block; font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone-dark); margin-bottom: 2px;
}
.panel .meta { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--stone-light); }
/* Flagship badge: positioned on the card's top edge, overlapping the border */
.panel .flagship-tag {
  position: absolute; top: 0; left: 22px; transform: translateY(-55%);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--charcoal); color: var(--stone-light);
  padding: 4px 10px; line-height: 1; white-space: nowrap;
}
.stage-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--stone-light);
}
.stage-cta p { font-family: var(--serif); font-size: 1.12rem; color: var(--charcoal); max-width: 46ch; }
@media (max-width: 1024px) { .panel-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .panel-row, .panel-row.cols-3 { grid-template-columns: 1fr; } .stage-hero { padding: 44px 0 36px; } }

/* ---------- Quote ---------- */
.pull-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4;
  color: var(--charcoal); border-left: 3px solid var(--stone);
  padding-left: 28px; margin: 40px 0; max-width: 30em;
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--charcoal-deep); padding: 84px 0; text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--stone-light); margin: 16px auto 34px; max-width: 56ch; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 880px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  display: block; background: var(--white);
  border-top: 3px solid var(--stone);
  padding: 30px 28px;
  transition: background 0.2s;
}
.post-card:hover { background: var(--stone-light); }
.post-card .post-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone-dark); display: block; margin-bottom: 10px; }
.post-card h3 { margin-bottom: 10px; }
.post-card p { font-size: 0.94rem; color: var(--ink-soft); }

.article { padding: 72px 0; }
.article .wrap { max-width: 760px; }
.article .post-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone-dark); display: block; margin-bottom: 16px; }
.article h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 18px; }
.article .standfirst { font-family: var(--serif); font-size: 1.18rem; color: var(--charcoal); margin: 0 0 36px; line-height: 1.55; }
.article h2 { font-size: 1.4rem; margin: 38px 0 12px; }
.article p { margin-bottom: 18px; max-width: 68ch; }
.article ul, .article ol { margin: 0 0 18px 22px; max-width: 66ch; }
.article li { margin-bottom: 8px; }
.article .back-link { display: inline-block; margin-bottom: 28px; }

/* ---------- Footer (v2: minimal) ---------- */
.site-footer { background: var(--charcoal-deep); color: var(--ink-faint); padding: 48px 0 36px; border-top: 1px solid #3a362f; }
.site-footer .brand { color: var(--white); margin-bottom: 22px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.site-footer nav a { color: var(--stone-light); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer nav a:hover { color: var(--white); }
.site-footer .legal { font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.site-footer .legal a { color: var(--ink-faint); }
.site-footer .legal a:hover { color: var(--stone-light); }

/* ---------- Legal pages ---------- */
.legal-page { padding: 72px 0; }
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 10px; }
.legal-page .updated { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 36px; }
.legal-page h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.legal-page p, .legal-page li { font-size: 0.95rem; max-width: 70ch; margin-bottom: 14px; }
.legal-page ul { margin-left: 22px; }

/* ---------- Forms ---------- */
.form-card { background: var(--white); padding: 44px 40px; border-top: 3px solid var(--stone); max-width: 640px; }
.form-row { margin-bottom: 20px; }
label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 13px 14px;
  font-family: var(--sans); font-size: 0.95rem; color: var(--charcoal);
  background: var(--offwhite); border: 1px solid var(--stone-light);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--stone); border-color: var(--stone); }
textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 14px; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 16px; } .mt-2 { margin-top: 32px; } .mt-3 { margin-top: 48px; }
.mb-1 { margin-bottom: 16px; } .mb-2 { margin-bottom: 32px; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }
@media (max-width: 600px) {
  .hero { padding: 72px 0 60px; }
  .section { padding: 60px 0; }
}

/* ============================================================
   V3 ADDITIONS (understanding-led draft only)
   Two new section styles: the Cost-of-Waiting meter and the
   AI-native two-card contrast. Everything else inherits v2.
   ============================================================ */

/* ---------- Beat 1: Cost of Waiting meter ---------- */
.cow-meter {
  background: var(--charcoal);
  border-top: 3px solid var(--stone);
  padding: 34px 34px 28px;
  margin-top: 12px;
  max-width: 760px;
}
.cow-meter .cow-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 14px 0; border-bottom: 1px solid #3a362f;
}
.cow-meter .cow-row:last-child { border-bottom: none; }
.cow-meter .cow-label { font-size: 0.92rem; color: var(--stone-light); max-width: 42ch; }
.cow-meter .cow-figure {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--white); white-space: nowrap; line-height: 1;
}
.cow-meter .cow-figure.accent { color: var(--stone); }
.cow-illus {
  display: inline-block; font-family: var(--sans); font-size: 0.62rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone-dark); margin-left: 8px;
}
.cow-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 16px; max-width: 70ch; }
.cow-close { font-family: var(--serif); font-size: 1.12rem; color: var(--charcoal); max-width: 50ch; margin: 28px 0 18px; }

/* ---------- Beat 2: AI-native contrast cards ---------- */
.contrast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 8px; }
@media (max-width: 880px) { .contrast-grid { grid-template-columns: 1fr; } }
.contrast-card { background: var(--white); border-top: 3px solid var(--stone-dark); padding: 30px 28px; }
.contrast-card.native { border-top-color: var(--charcoal); }
.contrast-card .contrast-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone-dark); display: block; margin-bottom: 10px;
}
.contrast-card.native .contrast-tag { color: var(--charcoal); }
.contrast-card h3 { margin-bottom: 10px; }
.contrast-card .shape-line { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 18px; }
.contrast-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 0.9rem; }
.contrast-card dt { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; color: var(--ink-faint); align-self: center; }
.contrast-card dd { color: var(--charcoal); }
.section.alt .contrast-card { background: var(--offwhite); }
.contrast-close { font-family: var(--serif); font-size: 1.18rem; color: var(--charcoal); max-width: 40em; margin-top: 32px; }

/* ---------- Beat 3: proof card tag + bullet list ---------- */
.card .card-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-dark); margin-top: auto; padding-top: 14px; display: block; }
.card .proof-list { list-style: none; font-size: 0.92rem; margin-bottom: 18px; }
.card .proof-list li { padding: 7px 0; border-bottom: 1px solid var(--stone-light); }
.card .proof-list li:last-child { border-bottom: none; }
.card .illus-mark { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-dark); }
.grid-3 .card { display: flex; flex-direction: column; }
.diag-meta { margin: 28px auto 0; max-width: 460px; text-align: center; padding: 14px 24px; border: 1px solid var(--stone); border-radius: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); background: var(--offwhite); }

/* ---------- V3 stage-page understanding beat ----------
   A compact band that sits above the framework-arc panels on each
   stage page. Translates the new idea (what the diagnostic makes
   visible / fractional CPO vs a 6-month search / cost of stopping)
   into plain understanding. Charcoal-light band, no italics. */
.understanding {
  background: var(--stone-light);
  border-top: 1px solid var(--stone);
  padding: 52px 0 44px;
}
.understanding .eyebrow { color: var(--stone-dark); margin-bottom: 14px; }
.understanding h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: 22em; margin-bottom: 14px; }
.understanding p { color: var(--ink-soft); font-size: 1.02rem; max-width: 66ch; }
.understanding .u-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; margin-top: 30px;
}
@media (max-width: 880px) { .understanding .u-grid { grid-template-columns: 1fr; } }
/* "before / after" understanding pair: what you see now vs what the
   stage makes visible. Two contrasting cards. */
.u-card {
  background: var(--offwhite); border-top: 3px solid var(--stone-dark);
  padding: 26px 26px 24px;
}
.u-card.bright { border-top-color: var(--charcoal); }
.u-card .u-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone-dark); display: block; margin-bottom: 12px;
}
.u-card.bright .u-tag { color: var(--charcoal); }
.u-card ul { list-style: none; font-size: 0.94rem; line-height: 1.5; }
.u-card li { padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--stone-light); }
.u-card li:last-child { border-bottom: none; }
.u-card li::before { content: "\2014"; position: absolute; left: 0; color: var(--stone-dark); font-weight: 700; }
/* cost-of-stopping figure callout for Stage 03 */
.u-figure {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--charcoal); margin: 6px 0 4px;
}
.u-figure .u-sub { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

/* ============================================================
   V5 · VISUAL / ICON LAYER over v4
   Refined duotone line icons. Charcoal primary stroke + ONE warm
   gold accent element per icon. All inline SVG, zero dependencies,
   renders fully offline. Shared badge styling below so every icon
   on the site uses one consistent container.
   ============================================================ */

/* ---------- Icon badge (shared container) ---------- */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: var(--stone-light);
  color: var(--charcoal);            /* drives currentColor strokes */
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.icon-badge svg { width: 30px; height: 30px; display: block; }
/* gold-tinted variant for the warmer accent badges */
.icon-badge.gold { background: var(--gold-tint); }
/* small badge for stage-page service panels and inline rows */
.icon-badge.sm { width: 44px; height: 44px; border-radius: 11px; }
.icon-badge.sm svg { width: 23px; height: 23px; }
/* tiny inline badge for the contact "what to expect" rows */
.icon-badge.xs { width: 34px; height: 34px; border-radius: 9px; }
.icon-badge.xs svg { width: 18px; height: 18px; }

/* duotone helpers used inside the inline SVGs */
.ic-line { fill: none; stroke: currentColor; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round; }
.ic-stone { fill: none; stroke: var(--stone-dark); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ic-gold  { fill: none; stroke: var(--gold); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.ic-gold-fill { fill: var(--gold); stroke: none; }

/* ---------- Homepage offering / proof cards: icon sits above ---------- */
.card .icon-badge { margin-bottom: 18px; }
/* offering cards become flex so badge + copy + link align; gentle hover lift */
.section.alt .grid-3 .card,
.grid-3 .card { display: flex; flex-direction: column; }
.card.has-icon { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card.has-icon:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(35,33,30,0.08); }
.card.has-icon:hover .icon-badge { background: var(--gold-tint); }

/* contrast cards (Why AI-native): badge above the tag */
.contrast-card .icon-badge { margin-bottom: 16px; }
.contrast-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.contrast-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(35,33,30,0.08); }

/* ---------- Stage-page panels: small badge above the title ---------- */
.panel .icon-badge { margin-bottom: 14px; }
/* the icon adds height, so trim the h3 min-height a touch to keep
   panels near one viewport */
.panel.has-icon h3 { min-height: 3.0em; }
.panel-row.cols-5 .panel.has-icon h3 { min-height: 2.6em; }
.panel.has-icon { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.panel.has-icon:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(35,33,30,0.07); }
.panel.has-icon:hover .icon-badge { background: var(--gold-tint); }
/* flagship badge sits above the icon row when both are present */
.panel.has-icon .flagship-tag { transform: translateY(-55%); }

/* ---------- Understanding-beat u-cards + About model cards ---------- */
.u-card .icon-badge { margin-bottom: 14px; }
.u-card.icon-card .u-tag { margin-bottom: 12px; }

/* ---------- Contact "what to expect" inline icon rows ---------- */
.expect-list { list-style: none; max-width: 64ch; margin-bottom: 2rem; }
.expect-list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--stone-light);
}
.expect-list li:last-child { border-bottom: none; }
.expect-list .et-body { padding-top: 4px; }
.expect-list .et-body strong { color: var(--charcoal); }

/* ---------- Mobile: badges scale down, stay centred where stacked ---------- */
@media (max-width: 600px) {
  .icon-badge { width: 54px; height: 54px; }
  .icon-badge svg { width: 27px; height: 27px; }
}

/* ============================================================
   V6 · ACCESSIBILITY QUALITY-FLOOR over v5
   Purely an a11y layer — no change to palette, type, layout, or
   copy. Two additions only:
   (1) visible keyboard-focus rings for every interactive element
       (v5 relied on the browser default, which the custom link/
       button styling effectively suppressed);
   (2) a prefers-reduced-motion guard that neutralises v5's hover
       lifts, transitions, and smooth scrolling for users who ask
       the OS to reduce motion.
   ============================================================ */

/* ---------- (1) Visible keyboard focus ----------
   Gold ring reads clearly on both the charcoal-deep dark bands and
   the off-white light sections. Mouse clicks stay clean (:focus-
   visible only fires for keyboard / programmatic focus). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
.link-arrow:focus-visible,
.secondary-link:focus-visible,
.post-card:focus-visible,
.card.has-icon:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* form fields: keep the ring snug to the field edge, no offset gap */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--gold);
}
/* on dark bands the gold ring already contrasts; nudge offset so it
   clears the underline on hero / footer links */
.hero a:focus-visible,
.cta-band a:focus-visible,
.site-footer a:focus-visible { outline-offset: 4px; }

/* ---------- (2) Respect reduced-motion ----------
   Strip the v5 card/panel lift + transitions and the smooth-scroll
   for anyone who has asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card.has-icon:hover,
  .panel.has-icon:hover,
  .contrast-card:hover { transform: none; }
}

/* ============================================================
   V7 · FOUNDER-LED AI-NATIVE COMMERCIAL SYSTEM
   ============================================================ */
.hero-v7 { padding: 104px 0 92px; }
.hero-v7 .wrap { max-width: 1040px; }
.hero-v7 h1 { max-width: 18ch; font-size: clamp(2.5rem, 5.7vw, 4.45rem); }
.hero-v7 .sub { max-width: 62ch; }
.eyebrow.on-dark { color: var(--stone); }
.cta-row.centered { justify-content: center; }

.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--stone); border: 1px solid var(--stone); }
.fit-item { background: var(--offwhite); padding: 28px; display: grid; gap: 7px; }
.fit-item strong { color: var(--charcoal); font-family: var(--serif); font-size: 1.15rem; }
.fit-item span { font-size: 0.94rem; }

.numbered-cards .card { min-height: 310px; }
.numbered-cards .link-arrow { margin-top: auto; display: inline-flex; width: fit-content; white-space: nowrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.demo-card { background: var(--white); border-top: 4px solid var(--charcoal); padding: 34px; min-height: 260px; display: flex; flex-direction: column; }
.demo-card:nth-child(2) { border-top-color: var(--gold); }
.demo-label, .status-pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone-dark); display: inline-block; margin-bottom: 18px; }
.demo-card h3 { font-size: 1.55rem; }
.demo-card p { margin-bottom: 24px; }
.demo-card .link-arrow { margin-top: auto; }

.founder-proof { background: var(--white); }
.proof-split { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 72px; align-items: start; }
.proof-facts { display: grid; border-top: 3px solid var(--stone); }
.proof-facts div { padding: 22px 0; border-bottom: 1px solid var(--stone-light); display: grid; gap: 3px; }
.proof-facts strong { color: var(--charcoal); font-family: var(--serif); font-size: 1.35rem; }
.proof-facts span { font-size: 0.9rem; }

.answer-section details { max-width: 850px; border-top: 1px solid var(--stone); padding: 20px 0; }
.answer-section details:last-child { border-bottom: 1px solid var(--stone); }
.answer-section summary { color: var(--charcoal); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; cursor: pointer; }
.answer-section details p { margin-top: 14px; }

.solution-hero { background: var(--charcoal-deep); padding: 76px 0 66px; }
.solution-hero h1 { color: var(--white); max-width: 19ch; }
.solution-hero .sub { color: var(--stone-light); margin-top: 18px; max-width: 64ch; }
.solution-hero .status-pill { color: var(--gold); }
.solution-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 54px; align-items: start; }
.solution-aside { background: var(--white); border-top: 3px solid var(--gold); padding: 28px; position: sticky; top: 96px; }
.solution-aside h3 { margin-bottom: 16px; }
.solution-aside ul { list-style: none; font-size: 0.9rem; }
.solution-aside li { padding: 9px 0; border-bottom: 1px solid var(--stone-light); }
.solution-aside li:last-child { border-bottom: 0; }

.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--stone); border: 1px solid var(--stone); margin-top: 28px; }
.workflow-step { background: var(--white); padding: 22px; }
.workflow-step span { color: var(--gold); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; }
.workflow-step strong { display: block; color: var(--charcoal); margin: 8px 0 5px; }
.workflow-step p { font-size: 0.85rem; }

.sample-board { background: #1d1b18; color: var(--stone-light); border-top: 4px solid var(--gold); padding: 34px; margin: 28px 0; }
.sample-board h3 { color: var(--white); font-size: 1.55rem; }
.sample-board .sample-note { color: var(--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sample-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #4b463e; margin-top: 22px; }
.sample-cell { background: #282520; padding: 22px; }
.sample-cell strong { display: block; color: var(--white); font-family: var(--serif); font-size: 1.05rem; margin-bottom: 5px; }
.sample-cell span { font-size: 0.88rem; }

.founder-layout { display: grid; grid-template-columns: 310px 1fr; gap: 58px; align-items: start; }
.founder-photo { aspect-ratio: 4 / 5; background: var(--stone-light); border-top: 4px solid var(--gold); display: grid; place-items: center; text-align: center; color: var(--stone-dark); padding: 28px; }
.founder-photo.has-photo { padding: 0; overflow: hidden; background: var(--charcoal); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.founder-photo strong { display: block; font-family: var(--serif); color: var(--charcoal); font-size: 2.6rem; }
.founder-photo span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em; }
.experience-list { list-style: none; margin-top: 24px; }
.experience-list li { padding: 15px 0; border-bottom: 1px solid var(--stone-light); }

.resource-callout { background: var(--charcoal); color: var(--stone-light); padding: 32px; margin-top: 32px; }
.resource-callout h3 { color: var(--white); }

@media (max-width: 900px) {
  .proof-split, .solution-layout, .founder-layout { grid-template-columns: 1fr; gap: 36px; }
  .solution-aside { position: static; }
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .founder-photo { max-width: 340px; }
}
@media (max-width: 680px) {
  .fit-grid, .grid-2, .sample-grid, .workflow { grid-template-columns: 1fr; }
  .hero-v7 { padding: 72px 0 62px; }
  .hero-v7 h1 { font-size: 2.45rem; }
  .demo-card { min-height: auto; }
}

/* ============================================================
   v7 additions — enquiry form states, honeypot, legal markers
   Appended to styles.css. Uses the existing brand tokens:
   charcoal #1C1A17, cream #F5F1EB, gold #A87E33 / #FBAE40.
   ============================================================ */

/* Honeypot — hidden from people, present for bots. Deliberately
   not display:none, which some bots detect and skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consent checkbox row */
.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  margin-top: .25rem;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: #A87E33;
}
.form-consent span { font-size: .95rem; }

/* Submission feedback */
.form-status {
  margin: .9rem 0 0;
  padding: .75rem .9rem;
  border-radius: 4px;
  font-size: .95rem;
  border-left: 3px solid #A87E33;
  background: rgba(168, 126, 51, .08);
}
.form-status.ok {
  border-left-color: #2E7D5B;
  background: rgba(46, 125, 91, .09);
}
.form-status.err {
  border-left-color: #B3462F;
  background: rgba(179, 70, 47, .09);
}

button[type="submit"][disabled] {
  opacity: .6;
  cursor: progress;
}

/* Unresolved placeholders in legal pages. Visible on purpose, so a
   blank cannot ship unnoticed. Delete this rule once the bracketed
   text is gone. */
.todo {
  background: #FBAE40;
  color: #1C1A17;
  padding: 0 .35em;
  border-radius: 2px;
  font-weight: 600;
  font-size: .92em;
}

/* Legal page readability */
.legal-page h3 {
  margin-top: 1.4rem;
  font-size: 1.05rem;
}
.legal-page ul { margin: .6rem 0 1.1rem 1.2rem; }
.legal-page li { margin-bottom: .45rem; }

/* contact detail list */
.contact-list{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
.contact-list li{padding-left:0;line-height:1.55}
.contact-list strong:first-child{display:inline-block;min-width:9.5rem}
@media(max-width:640px){.contact-list strong:first-child{display:block;min-width:0}}

/* ------------------------------------------------------------------
   WCAG 2.1 AA contrast remediation.
   - .cta-band .secondary-link had no colour rule of its own, so it
     inherited body ink (#23211E) on the charcoal band (#181613):
     1.12:1, effectively invisible. The light treatment was scoped to
     .hero only.
   - Eyebrows, stage tags and demo labels used --stone-dark (#8C8273)
     on cream: 3.04-3.78:1 at ~11px. --stone-ink below clears 4.5:1.
   - Footer body text used --ink-faint (#7A746B) on charcoal: 3.9:1.
   ------------------------------------------------------------------ */
:root {
  --stone-ink:  #6B6355;   /* >=4.5:1 on cream, for small uppercase text */
  --ink-onDark: #8F8879;   /* >=4.5:1 on --charcoal-deep */
}

/* the invisible CTA */
.cta-band .secondary-link,
.cta-row.centered .secondary-link {
  color: var(--stone);
  border-bottom: 1px solid var(--stone-dark);
}
.cta-band .secondary-link:hover,
.cta-row.centered .secondary-link:hover {
  color: var(--white);
  border-color: var(--white);
}

/* small uppercase labels on light backgrounds */
.eyebrow,
.card .stage-tag,
.contrast-tag,
.demo-label,
.status-pill,
.understanding .eyebrow {
  color: var(--stone-ink);
}
/* keep the light treatment where the background is dark */
.hero .eyebrow,
.stage-hero .eyebrow,
.eyebrow.on-dark,
.cta-band .eyebrow {
  color: var(--stone);
}

/* legible minimum sizes */
.eyebrow, .card .stage-tag, .contrast-tag, .demo-label, .status-pill { font-size: 0.75rem; }
.site-footer { color: var(--ink-onDark); }
.site-footer nav a { font-size: 0.8125rem; }
.site-footer small, .site-footer p { color: var(--ink-onDark); font-size: 0.8125rem; }

/* ------------------------------------------------------------------
   Contrast pass 2. The first pass failed on specificity: the existing
   rules below are more specific than the plain-class overrides above,
   so they kept winning. These match specificity exactly and sit last.
   ------------------------------------------------------------------ */

/* "TRADITIONAL CONSULTING" tag — .contrast-card .contrast-tag (0,2,0) */
.contrast-card .contrast-tag { color: var(--stone-ink); font-size: 0.75rem; }
/* the dark/native variant keeps its own high-contrast colour */

/* "LONG TERM / HIGH IMPACT" under the wordmark — .brand small (0,1,1) */
.brand small { color: var(--stone-ink); font-size: 0.75rem; }
.site-footer .brand small { color: var(--ink-onDark); }

/* footer legal row — .site-footer .legal a (0,2,1) */
.site-footer .legal { font-size: 0.8125rem; }
.site-footer .legal a { color: var(--ink-onDark); }
.site-footer .legal span { color: var(--ink-onDark); }
.site-footer .legal a:hover { color: var(--white); }

/* ------------------------------------------------------------------
   Mobile nav toggle. The button markup carries three <span> bars but
   the original CSS only sized a text glyph, so the normalised button
   rendered empty and invisible. Bars styled here, with a 44x44 touch
   target and an X state driven by aria-expanded.
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px;
    width: 44px; height: 44px;      /* accessible minimum touch target */
    padding: 0; margin-right: -8px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--charcoal);
    transition: transform 0.25s var(--ease, ease), opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}