/* ==========================================================================
   Healthy Strategy Group
   Direction B - "Principles"
   Institutional monograph: Constantia display, Corbel body,
   ink navy ground, brass accent, centred book measure.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper:      #F7F6F2;
  --paper-deep: #EFEDE6;
  --ink:        #141A2E;
  --muted:      #5A5F70;
  /* --brass is decorative only (rules, borders, the crest). It sits at
     3.68:1 on paper, which is fine for a 1px line and fails for type.
     --brass-text is the same hue darkened to 5.25:1 on paper and 4.74:1
     on the wash, so every brass label, link and button clears AA.        */
  --brass:      #9A7B3F;
  --brass-text: #806229;
  --brass-dim:  #C4B492;
  --brass-wash: #F0EADC;
  --rule:       #D9D6CC;

  --display: "Constantia", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Corbel", "Candara", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale. One ratio, held to everywhere. */
  --label:  .6875rem;
  --small:  .8125rem;
  --step-0: 1.09375rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.45rem, 2.6vw, 1.85rem);
  --step-3: clamp(1.65rem, 3.2vw, 2.2rem);
  --step-4: clamp(2.05rem, 4.4vw, 3.25rem);

  /* Spacing scale. Vertical rhythm comes from here, not ad-hoc margins. */
  --s-1: .5rem;
  --s-2: .875rem;
  --s-3: 1.4rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5rem;

  --measure: 40rem;
  --wide: 62rem;
  --pad: 1.75rem;
  --nav-break: 780px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0F1322;
    --paper-deep: #141930;
    --ink:        #E9E7DF;
    --muted:      #9BA0B2;
    --brass:      #C8A15F;
    --brass-text: #C8A15F;
    --brass-dim:  #6D5A33;
    --brass-wash: #1A1F35;
    --rule:       #262C42;
  }
}
:root[data-theme="dark"] {
  --paper:      #0F1322;
  --paper-deep: #141930;
  --ink:        #E9E7DF;
  --muted:      #9BA0B2;
  --brass:      #C8A15F;
  --brass-text: #C8A15F;
  --brass-dim:  #6D5A33;
  --brass-wash: #1A1F35;
  --rule:       #262C42;
}
:root[data-theme="light"] {
  --paper:      #F7F6F2;
  --paper-deep: #EFEDE6;
  --ink:        #141A2E;
  --muted:      #5A5F70;
  --brass:      #9A7B3F;
  --brass-text: #806229;
  --brass-dim:  #C4B492;
  --brass-wash: #F0EADC;
  --rule:       #D9D6CC;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass-text); outline-offset: 3px; border-radius: 1px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
  font-size: var(--small); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Containers ----------------------------------------------------------- */
.measure { max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }
.wide    { max-width: var(--wide);    margin-inline: auto; padding-inline: var(--pad); }

.stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* --- Masthead ------------------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-inner {
  max-width: var(--wide); margin-inline: auto; padding: 1.6rem var(--pad) 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.wordmark {
  font-family: var(--display); font-size: 1.0625rem;
  letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  text-align: center; transition: color .18s ease;
}
.wordmark:hover { color: var(--brass-text); }

.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.9rem; }
.nav a {
  font-size: .75rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding-bottom: .3rem; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--brass-text); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass-text); }

/* Menu button. Hidden until the nav collapses; only ever shown when
   JavaScript is available, since it is JavaScript that opens the panel.  */
.nav-toggle { display: none; }

@media (max-width: 780px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--body); font-size: var(--label);
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
    background: transparent; border: 1px solid var(--rule);
    padding: .55rem 1rem; cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
  }
  .js .nav-toggle:hover { color: var(--brass-text); border-color: var(--brass-dim); }

  .nav-toggle-bars { position: relative; width: 14px; height: 9px; }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1px;
    background: currentColor; transition: transform .2s ease, top .2s ease;
  }
  .nav-toggle-bars::before { top: 0; }
  .nav-toggle-bars::after  { top: 8px; }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 4px; transform: rotate(45deg); }
  .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 4px; transform: rotate(-45deg); }

  /* Collapsed only when scripted. Without JS the links simply wrap and
     stay reachable - the menu must never be the reason navigation fails. */
  .js .nav {
    display: none; flex-direction: column; align-items: center;
    gap: 0; width: 100%; padding-top: .5rem;
  }
  .js .nav.is-open { display: flex; }
  .js .nav a {
    width: 100%; text-align: center; padding: .85rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .js .nav a:first-child { border-top: 1px solid var(--rule); }
  .js .nav a[aria-current="page"] { border-bottom-color: var(--brass-text); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

/* --- Page head ------------------------------------------------------------ */
.page-head { text-align: center; padding: var(--s-6) 0 var(--s-5); }
.page-head--tall { padding: 7rem 0 var(--s-5); }

.crest {
  display: block; width: 32px; height: 32px; margin: 0 auto var(--s-4);
  border: 1px solid var(--brass); transform: rotate(45deg); position: relative;
}
.crest::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--brass-dim); }

.marker {
  display: flex; align-items: center; gap: 1.25rem;
  max-width: var(--measure); margin: 0 auto var(--s-4); padding-inline: var(--pad);
  font-size: var(--label); letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass-text);
}
.marker::before, .marker::after { content: ""; flex: 1; height: 1px; background: var(--brass-dim); }

/* Flush variant: one rule trailing, for left-aligned contexts. */
.marker--flush { margin-inline: 0; padding-inline: 0; max-width: none; }
.marker--flush::before { display: none; }

h1 {
  font-size: var(--step-4); line-height: 1.14; letter-spacing: -.01em;
  max-width: 22ch; margin-inline: auto;
}
.h1--subdued {
  font-size: var(--step-1); line-height: 1.3;
  max-width: 30ch; margin-inline: auto;
  color: var(--muted);
}
.rule { width: 88px; height: 1px; background: var(--brass); margin: var(--s-4) auto; }
.standfirst { max-width: 46ch; margin-inline: auto; color: var(--muted); font-size: 1.0625rem; }

/* --- Sections ------------------------------------------------------------- */
.section { padding: var(--s-6) 0; border-top: 1px solid var(--rule); }
.section--plain { border-top: 0; }
.section--wash { background: var(--brass-wash); }

h2 { font-size: var(--step-3); line-height: 1.2; letter-spacing: -.006em; }
.section h2 { text-align: center; margin-bottom: var(--s-4); }
.section h2.h2--left { text-align: left; }

h3 { font-size: var(--step-1); line-height: 1.35; }

.quiet { color: var(--muted); }

.dropcap::first-letter {
  font-family: var(--display); font-size: 3.1em; line-height: .82; float: left;
  padding: .08em .12em 0 0; color: var(--brass-text);
}

/* --- Roster (service lists) ----------------------------------------------- */
.roster { list-style: none; margin: var(--s-4) auto 0; padding: 0; max-width: 34rem; }
.roster li {
  display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.0625rem;
}
.roster li:first-child { border-top: 1px solid var(--rule); }
.roster li::before { content: "\00B7"; color: var(--brass); font-size: 1.5rem; line-height: 1; }

/* --- Maxim (pull statement) ----------------------------------------------- */
.maxim {
  font-family: var(--display); font-style: italic;
  font-size: var(--step-2); line-height: 1.34;
  text-align: center; margin: var(--s-4) auto 0; max-width: 30ch; text-wrap: balance;
}
.maxim::before, .maxim::after {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--brass); margin: var(--s-3) auto;
}

/* --- Gateway cards (home) -------------------------------------------------- */
.gateways {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-block: 1px solid var(--rule);
}
@media (max-width: 760px) { .gateways { grid-template-columns: 1fr; } }
.gateway {
  background: var(--paper); padding: var(--s-5) clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 1.1rem; text-decoration: none;
  transition: background .2s ease;
}
.gateway:hover { background: var(--paper-deep); }
.gateway .marker { margin: 0 0 .4rem; padding: 0; max-width: none; }
.gateway .marker::before { display: none; }
.gateway h2 { text-align: left; margin: 0; font-size: var(--step-2); }
.gateway p { color: var(--muted); }

.more {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-text); text-decoration: none;
  transition: color .18s ease;
}
.more::after { content: "\2192"; transition: transform .2s ease; }
.gateway .more { margin-top: auto; padding-top: .75rem; }
.gateway:hover .more::after,
.more:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .more::after { transition: none; } }

/* --- Portrait / about ------------------------------------------------------ */
.portrait {
  display: grid; grid-template-columns: 12rem 1fr; gap: var(--s-5); align-items: start;
  max-width: 52rem; margin-inline: auto; padding-inline: var(--pad);
}
@media (max-width: 800px) { .portrait { grid-template-columns: 1fr; gap: var(--s-4); max-width: var(--measure); } }
.plate {
  aspect-ratio: 3 / 4; border: 1px solid var(--brass-dim); position: relative;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  font-size: 0.85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.plate::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rule); }
.plate-img { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; }
.signature { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--brass-text); }

/* --- Principles grid ------------------------------------------------------- */
.principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4); margin-top: var(--s-4);
}
.principle { display: flex; flex-direction: column; gap: .7rem; }
.principle .marker { margin: 0 0 .3rem; padding: 0; max-width: none; }
.principle .marker::before { display: none; }
.principle p { color: var(--muted); font-size: 1rem; }

/* --- Call to action band --------------------------------------------------- */
.cta { text-align: center; padding: var(--s-6) 0; border-top: 1px solid var(--rule); }
.btn {
  display: inline-block; font-family: var(--body); font-size: var(--small);
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--brass-text); border: 1px solid var(--brass-text); padding: 1.05rem 2.5rem;
  background: transparent; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--brass-text); color: var(--paper); }
.btn[disabled] { opacity: .55; cursor: progress; }
.cta .btn { margin-top: var(--s-4); }

/* --- Form ------------------------------------------------------------------ */
.form { max-width: 34rem; margin: var(--s-4) auto 0; text-align: left; display: flex; flex-direction: column; gap: var(--s-3); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: .6rem 0; border-radius: 0;
  transition: border-color .18s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--brass-text); }
.field :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: #B3261E; }
:root[data-theme="dark"] .field :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: #F2B8B5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: #F2B8B5; }
}
.field-error { font-size: var(--small); color: #B3261E; min-height: 1.25rem; }
:root[data-theme="dark"] .field-error { color: #F2B8B5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-error { color: #F2B8B5; }
}
.form .btn { align-self: flex-start; margin-top: var(--s-1); }
.form-note {
  font-size: .875rem; color: var(--muted); border-left: 1px solid var(--brass);
  padding-left: 1rem; margin-top: var(--s-3);
}
.form-status { font-size: .9375rem; color: var(--brass-text); min-height: 1.5rem; }
.form-status[data-state="error"] { color: #B3261E; }
:root[data-theme="dark"] .form-status[data-state="error"] { color: #F2B8B5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-status[data-state="error"] { color: #F2B8B5; }
}

/* --- Colophon (footer) ------------------------------------------------------ */
.colophon { border-top: 1px solid var(--rule); padding: var(--s-5) 0 var(--s-5); }
.colophon-grid {
  max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-4);
}
@media (max-width: 760px) { .colophon-grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.colophon h3 {
  font-family: var(--body); font-size: var(--label); letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-text); margin-bottom: 1rem;
}
.colophon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.colophon-list a { font-size: .9375rem; color: var(--muted); text-decoration: none; transition: color .18s ease; }
.colophon-list a:hover { color: var(--brass-text); }
.colophon .wordmark { text-align: left; display: inline-block; font-size: .9375rem; }
.colophon-blurb { color: var(--muted); font-size: .9375rem; margin-top: 1rem; max-width: 30ch; }
.colophon-base {
  max-width: var(--wide); margin: var(--s-4) auto 0; padding: var(--s-3) var(--pad) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* --- Motion ----------------------------------------------------------------
   The hidden state is scoped to .js, which is set by an inline script in the
   head. Without JavaScript the content is simply visible - copy must never
   depend on a script in order to be readable. site.js also force-reveals
   everything after a short timeout, so a context where IntersectionObserver
   never fires (embedded viewers, non-compositing preview panes) still shows
   the page rather than a blank column.                                        */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Print ------------------------------------------------------------------
   Consultants get printed. Drop the chrome, keep the substance.               */
@media print {
  .masthead, .colophon, .skip, .nav-toggle, .cta .btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js .reveal { opacity: 1; transform: none; }
  .section { border-top: 1px solid #ccc; padding: 1.25rem 0; break-inside: avoid; }
  .page-head, .page-head--tall { padding: 0 0 1rem; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; }
  a { text-decoration: none; }
  .measure, .wide { max-width: none; }
}