/* ============================================================
   Cornerstone Capital & Consulting — v6 "Navy & Gold"
   Two pigments: navy structural, gold accent, plus neutrals.
   Running text is only ever Ink/Navy on Ivory, or Ivory on Navy.
   Gold never carries a paragraph.
   ============================================================ */

:root{
  --ivory:#F7F7F4;
  --navy:#1B2A4A;
  --navy-deep:#14203A;
  --gold:#986D24;           /* graphic only — rules, bars, the mark */
  --gold-deep:#6B4E1A;      /* 7.17:1 on ivory — small gold TEXT on light */
  --gold-light:#C9A55C;     /* 6.11:1 on navy — large numerals + graphics only */
  --gold-pale:#D6B673;      /* 7.31:1 on navy — small gold TEXT on dark, + CTA fill */
  --ink:#1A1E1F;
  --muted:#554E45;          /* 7.64:1 on ivory — AAA */
  --muted-navy:#B8C0CC;     /* 7.75:1 on navy — AAA */
  --rule:#DDD9D0;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --gutter:clamp(1.25rem,5vw,4rem);
  --maxw:1180px;
  --band:clamp(4.5rem,9vw,7.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}

.kicker{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1.25rem;
}
.on-navy .kicker,.on-navy-deep .kicker{color:var(--gold-pale)}

.lede{font-size:clamp(1.06rem,1rem + .38vw,1.28rem);color:var(--muted);line-height:1.6}
.on-navy .lede,.on-navy-deep .lede{color:var(--muted-navy)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:var(--ivory);padding:.85rem 1.25rem;font-weight:600;text-decoration:none}
.skip:focus{left:0}
/* Focus ring must clear 3:1 against whatever sits behind it (WCAG 1.4.11 / 2.4.11).
   --gold-pale is 1.81:1 on ivory and 1.94:1 on white, so it may only be used on the
   navy bands. Navy is 13.25:1 on ivory and 14.22:1 on white. */
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:2px}
.on-navy :focus-visible,
.on-navy-deep :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.skip:focus-visible{outline-color:var(--gold-pale)}
main:focus{outline:none}

.mark{width:30px;height:30px;flex:none}

/* ---------- MOTION ----------
   Content is visible by default; JS opts in to animation.
   Everything here is disabled under prefers-reduced-motion. */
.js .reveal{opacity:0;transform:translateY(20px)}
/* Keyboard focus must never land on an element that is still transparent. */
.js .reveal:focus-within{opacity:1;transform:none}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(214,182,115,.22)}
.header-in{display:flex;align-items:center;gap:2rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ivory);margin-right:auto}
.brand-name{font-family:var(--serif);font-size:.9rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;line-height:1.25;max-width:15ch}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{position:relative;color:var(--muted-navy);text-decoration:none;font-size:.9rem;font-weight:500;padding-block:.4rem;transition:color .2s}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-pale);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after{transform:scaleX(1)}
/* Open state of the small-screen menu. Declared as a class so the media queries
   below stay authoritative (an inline style would outrank them and strand the
   dropdown layout when the viewport widens). */
.nav.open{
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  position:absolute;left:0;right:0;top:100%;background:var(--navy);
  padding:1rem 1.25rem 1.5rem;border-bottom:1px solid rgba(214,182,115,.22);
}

.btn{display:inline-block;font-family:var(--sans);font-size:.9rem;font-weight:600;padding:.8rem 1.4rem;border-radius:2px;text-decoration:none;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s,transform .18s;white-space:nowrap;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold-pale);color:var(--navy);border-color:var(--gold-pale)}
.btn-gold:hover{background:#E3C88C;border-color:#E3C88C}
.btn-ghost{background:transparent;color:var(--ivory);border-color:rgba(247,247,244,.4)}
.btn-ghost:hover{border-color:var(--ivory);background:rgba(247,247,244,.08)}
.btn-navy{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-deep)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:var(--ivory);position:relative;overflow:hidden}
.hero-echo{
  position:absolute;right:-110px;top:-70px;width:440px;height:440px;
  border:1px solid var(--gold-light);opacity:.13;transform:rotate(45deg);
  /* Runs once and settles. Continuous motion with no in-page stop control
     would fail WCAG 2.2.2 for anyone who has not set prefers-reduced-motion. */
  pointer-events:none;animation:drift 34s ease-in-out 1 both;
}
/* the cornerstone block, echoed — small and quiet, not a slab */
.hero-echo::before{
  content:"";position:absolute;left:0;bottom:0;width:26%;height:26%;
  background:var(--gold-light);opacity:.55;
}
@keyframes drift{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%    {transform:rotate(51deg) translate(-22px,26px)}
}
.hero-in{padding-block:clamp(4rem,9vw,6.5rem) 0;position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,1.6rem + 4.1vw,4.6rem);max-width:24ch;color:#fff;margin-bottom:1.5rem}
@media (max-width:560px){.h1br{display:none}}   /* let it wrap naturally on small screens */
.hero .lede{max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.5rem}

.proof{
  margin-top:clamp(3.25rem,6vw,4.75rem);border-top:1px solid rgba(214,182,115,.4);
  padding-block:2.25rem clamp(3rem,6vw,4.25rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1.5rem;
}
.proof-num{font-family:var(--serif);font-size:clamp(1.65rem,1.2rem + 1.5vw,2.35rem);font-weight:700;color:var(--gold-light);line-height:1.05;letter-spacing:-.02em;display:block;margin-bottom:.5rem}
.proof-label{font-size:.83rem;color:var(--muted-navy);line-height:1.45}

/* ---------- section heads ---------- */
.head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.head h2{font-size:clamp(1.85rem,1.4rem + 1.9vw,2.85rem);margin-bottom:1rem;text-wrap:balance}
.rule{width:52px;height:3px;background:var(--gold);margin-bottom:1.75rem}
.on-navy .rule,.on-navy-deep .rule{background:var(--gold-light)}
.on-navy{background:var(--navy);color:var(--ivory)}
.on-navy-deep{background:var(--navy-deep);color:var(--ivory)}
.on-navy h2,.on-navy h3,.on-navy-deep h2,.on-navy-deep h3{color:#fff}
.alt{background:#fff;border-block:1px solid var(--rule)}

/* ---------- two doors ---------- */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2rem)}
.doors-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.door{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--gold);padding:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.door:hover{transform:translateY(-4px);box-shadow:0 14px 40px -18px rgba(27,42,74,.35)}
.door h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);margin-bottom:.35rem}
.door .who{font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.1rem}
.door p{color:var(--muted);margin-bottom:1.6rem}
.go{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;align-self:flex-start;transition:border-color .2s}
.go:hover{border-bottom-color:var(--navy)}

/* ---------- WHY ---------- */
.why blockquote{
  margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 2.1vw,2.6rem);line-height:1.25;
  color:#fff;max-width:20ch;letter-spacing:-.015em;
}
.why .after{margin-top:2rem;max-width:52ch}

/* ---------- METHOD (the HOW) ---------- */
.method{counter-reset:step;display:grid;gap:0}
.step{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);padding-block:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step-n{
  counter-increment:step;font-family:var(--serif);font-size:1rem;font-weight:700;
  color:var(--gold-deep);letter-spacing:.06em;padding-top:.35rem;min-width:3.5rem;
}
.step-n::before{content:"0" counter(step)}
.step h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);margin-bottom:.5rem}
.step p{color:var(--muted)}
.step .tell{
  display:block;margin-top:.7rem;font-size:.92rem;color:var(--ink);
  border-left:2px solid var(--gold);padding-left:.9rem;
}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,1.75rem)}
.cap{background:var(--navy-deep);border:1px solid rgba(214,182,115,.22);padding:clamp(1.4rem,2.5vw,1.9rem);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cap:hover{border-color:rgba(214,182,115,.55);transform:translateY(-3px)}
.cap h3{font-size:1.15rem;margin-bottom:.55rem;color:#fff}
.cap p{color:var(--muted-navy);font-size:.94rem}
.cap .tag{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:.75rem}

/* ---------- systems strip ---------- */
.systems-strip{
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(214,182,115,.35);
  padding-top:clamp(1.75rem,3vw,2.25rem);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
}
.systems-strip h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);margin-bottom:.6rem;color:#fff}
.systems-strip p{color:var(--muted-navy);font-size:.96rem}
.sys-list{display:flex;flex-wrap:wrap;gap:.55rem .9rem;list-style:none;margin:0 0 1.1rem;padding:0}
.sys-list li{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--gold-pale);
  border:1px solid rgba(214,182,115,.4);border-radius:2px;padding:.35rem .8rem;line-height:1.3;
}

/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,1.75rem)}
.tool{background:#fff;border:1px solid var(--rule);padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tool:hover{transform:translateY(-4px);box-shadow:0 14px 36px -20px rgba(27,42,74,.4)}
.tool h3{font-size:1.1rem;margin-bottom:.6rem}
.tool p{color:var(--muted);font-size:.94rem;margin-bottom:1.2rem}
/* Caveat label, NOT a control. Deliberately carries no border or radius so it
   cannot be mistaken for a .btn outline button (8/11: read as clickable). */
.badge{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);cursor:default}
.badge::before{content:"";display:inline-block;width:1.4rem;height:1px;background:var(--gold);vertical-align:.22em;margin-right:.5rem}

/* The card's real action. Each card gets one so the click lands somewhere. */
.tool-link{margin-top:auto;padding-top:1.15rem;align-self:flex-start;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s}
.tool-link:hover{color:var(--gold-deep)}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.5vw,2.75rem)}
.service{border-top:1px solid var(--rule);padding-top:1.5rem}
.service p{color:var(--muted);font-size:.97rem}

.dont{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.dont p{color:var(--muted-navy);font-size:clamp(1.02rem,.98rem + .25vw,1.15rem)}
.dont p + p{margin-top:1.1rem}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.founder p + p{margin-top:1.1rem}
.founder p{color:var(--muted)}
.principles{list-style:none;margin:0;padding:0}
.principles li{border-left:2px solid var(--gold);padding:.15rem 0 .15rem 1.25rem}
.principles li + li{margin-top:1.5rem}
.principles strong{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.principles span{color:var(--muted);font-size:.96rem}

.engagement blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.45;color:#fff;max-width:44ch}
.engagement .meta{margin-top:1.75rem;color:var(--muted-navy);font-size:.95rem;max-width:52ch}

/* ---------- FAQ (AEO) ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3rem)}
.faq h3{font-size:1.1rem;margin-bottom:.6rem}
.faq p{color:var(--muted);font-size:.97rem}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.field{display:block;margin-bottom:1.1rem}
.field span{display:block;font-size:.83rem;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:.4rem}
/* Field boundary is the only cue that a control exists, so it must clear 3:1
   against the white fill (WCAG 1.4.11). --muted is 8.20:1 on white. */
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:.97rem;color:var(--ink);background:#fff;border:1px solid var(--muted);border-radius:2px;padding:.7rem .8rem}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);outline:2px solid var(--navy);outline-offset:1px}
.contact-direct{border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:1.5rem}
.contact-direct a{color:var(--navy);font-weight:500}
.form-note{font-size:.85rem;color:var(--muted);margin-top:.9rem}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--muted-navy);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.5rem}
.foot-brand{display:flex;align-items:center;gap:.7rem;color:var(--ivory);text-decoration:none;margin-bottom:1rem}
.foot-brand .brand-name{max-width:none}
/* Column headings are h2, not h4: several pages have no other sub-heading, and
   jumping h1 -> h4 breaks the document outline (WCAG 1.3.1). */
.site-footer h2{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li + li{margin-top:.6rem}
/* Footer link text is the same colour as footer body text, so the underline is
   the only thing distinguishing a link from a plain list item (WCAG 1.4.1). */
.site-footer a{color:var(--muted-navy);text-decoration:underline;text-underline-offset:.2em}
.foot-brand,.social a{text-decoration:none}
.site-footer a:hover{color:var(--ivory);text-decoration:underline}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(247,247,244,.14);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.83rem}
.social a{display:inline-flex;padding:.35rem;transition:color .2s}
.social a:hover{color:var(--ivory)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .caps,.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .proof{grid-template-columns:repeat(2,1fr)}
  .doors,.doors-3,.services,.dont,.founder,.contact,.faq{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* MEASURED, do not guess. With EIGHT nav links the header needs:
   brand 160 + nav 644 + CTA 187 + two 32px gaps + 128 wrap padding = ~1183px.
   Collapsing at 1240 keeps ~57px of margin above that. Every common laptop viewport
   (1265, 1351, 1425) stays above it and keeps the full nav.
   If a nav item is ever ADDED, re-measure and raise this number, otherwise the
   row overflows and body{overflow-x:hidden} silently clips the CTA off screen. */
@media (max-width:1240px){
  /* No-JS baseline: the nav STAYS VISIBLE and wraps onto its own row. The toggle
     is only revealed when JS is present to operate it, so we never ship an inert
     button. Hiding the nav unconditionally would make the whole site
     unnavigable on a phone the moment main.js fails to load. */
  .header-in{flex-wrap:wrap;row-gap:.65rem}
  .nav{flex-wrap:wrap;gap:.9rem 1.4rem}

  .js .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:.25rem;
    background:var(--navy);padding:1rem var(--gutter) 1.5rem;
    border-bottom:1px solid rgba(214,182,115,.22);
  }
  .js .nav.open{display:flex}
  .js .nav a{width:100%;padding-block:.6rem}
  .js .nav-toggle{display:inline-block;background:none;border:1px solid rgba(247,247,244,.4);color:var(--ivory);border-radius:2px;padding:.5rem .8rem;font:inherit;font-size:.85rem;font-weight:600}
}
@media (max-width:760px){
  .header-in .btn{display:none}
  .caps,.tools{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:.4rem}
  .hero-echo{display:none}
}
@media (max-width:560px){
  .proof{grid-template-columns:1fr;gap:1.5rem}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .door:hover,.cap:hover,.tool:hover{transform:none}
}
@media print{.site-header,.hero-cta,.nav-toggle{display:none}}

/* ============================================================
   ADDED for the multi-page build — services/index.html
   On the Services page the six service cards sit directly beneath the
   page <h1>, so their titles are <h2> instead of the <h3> they were on
   the old single-page build (no level may be skipped). Same visual
   treatment as .service h3 above; no new colours, no new tokens.
   ============================================================ */
.service h2{font-size:1.2rem;margin-bottom:.6rem}

/* ============================================================
   MULTI-PAGE ADDITIONS (added for the systems/ page build)
   No new colours, no new tokens. Two rules only:

   1. .head h1 — on interior pages the page title sits inside .head
      where the single-page build had an h2. Same size as .head h2 so
      interior page heads match the homepage section heads exactly.

   2. .tool h2 — inside a .tool card the heading is now an h2 rather
      than an h3, because on the systems page the card titles sit one
      level under the page h1 and heading order must not skip a level.
      Declarations are identical to the existing .tool h3 rule.
   ============================================================ */
.head h1{font-size:clamp(1.85rem,1.4rem + 1.9vw,2.85rem);margin-bottom:1rem;text-wrap:balance}
.tool h2{font-size:1.1rem;margin-bottom:.6rem}

/* Honeypot: off-screen for sighted users, still reachable to bots that fill
   every field. Never display:none, some bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status:empty{display:none}
.form-status{margin-top:.9rem;font-size:.92rem}
.faq-more{margin-top:.6rem;font-size:.9rem;font-weight:600}
.faq-more a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.faq-more a:hover{border-bottom-color:var(--navy)}