/* ============================================================
   First Principles Leadership: design system
   Phase 3 rebuild. Warm neutrals, one confident accent.
   Type carries the "researched" half of the brief, palette the
   "personable" half. See DESIGN-NOTES.md.
   ============================================================ */

/* ---------- Fonts (self hosted, no third party requests) ---------- */
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Warm neutrals */
  --paper:      #FBF8F3;   /* page ground */
  --paper-alt:  #F3EDE4;   /* alternating band */
  --paper-deep: #EAE0D2;   /* cards on alt band, rules */
  --rule:       #DED4C6;
  --ink:        #1E1A15;   /* 16.3:1 on paper */
  --ink-soft:   #4A423A;   /*  9.3:1 on paper */
  --ink-muted:  #6B6156;   /*  5.7:1 on paper */

  /* Single confident accent */
  --ember:      #B8471F;   /* 5.0:1 on paper, white on it 5.3:1 */
  --ember-deep: #8E3516;   /* 7.4:1 on paper, body links + hover */
  --ember-wash: #F7E7DC;
  --ember-lift: #E8A17F;   /* accent on dark, 7.7:1 on night */

  /* Dark band */
  --night:      #241E18;
  --night-soft: #33291F;
  --night-rule: #4A3D31;

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.9375rem);
  --step-3:  clamp(1.8125rem, 1.55rem + 1.3vw, 2.625rem);
  --step-4:  clamp(2.1875rem, 1.72rem + 2.35vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.72rem + 3.9vw, 4.5rem);

  /* Space */
  --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;     --sp-6: 4.5rem;  --sp-7: 6.5rem;

  --measure: 66ch;
  --wide: 1180px;
  --mid: 900px;
  --radius: 3px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;
  letter-spacing:-0.012em;margin:0 0 var(--sp-3);text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
h4{font-size:var(--step-0);font-family:var(--sans);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;font-size:var(--step--1)}
p{margin:0 0 var(--sp-3);max-width:var(--measure)}
a{color:var(--ember-deep);text-decoration-thickness:1px;text-underline-offset:0.18em}
a:hover{color:var(--ember)}
ul,ol{max-width:var(--measure);padding-left:1.2em}
li{margin-bottom:var(--sp-2)}
blockquote{margin:var(--sp-4) 0;padding-left:var(--sp-3);
  border-left:3px solid var(--ember);font-family:var(--serif);
  font-size:var(--step-1);line-height:1.45;color:var(--ink-soft)}
blockquote cite{display:block;margin-top:var(--sp-2);font-family:var(--sans);
  font-size:var(--step--1);font-style:normal;color:var(--ink-muted)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--sp-5) 0}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem, var(--wide));margin-inline:auto}
.wrap-mid{width:min(100% - 2.5rem, var(--mid));margin-inline:auto}
.band{padding-block:var(--sp-6)}
.band--tight{padding-block:var(--sp-5)}
.band--alt{background:var(--paper-alt)}
.band--night{background:var(--night);color:var(--paper)}
.band--night h1,.band--night h2,.band--night h3{color:var(--paper)}
.band--night a{color:var(--ember-lift)}
.band--night p{color:#E4DCD1}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:60ch}
.eyebrow{font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ember-deep);
  margin:0 0 var(--sp-2)}
.band--night .eyebrow{color:var(--ember-lift)}
.grid{display:grid;gap:var(--sp-4)}
@media(min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .grid--split{grid-template-columns:1.05fr 0.95fr;gap:var(--sp-5);align-items:center}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--ember);
  color:#fff;padding:.6rem 1rem;border-radius:var(--radius)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:700;
  font-size:var(--step--1);letter-spacing:0.03em;
  padding:0.8em 1.5em;border-radius:var(--radius);text-decoration:none;
  border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--ember);color:#fff}
.btn--primary:hover{background:var(--ember-deep);color:#fff}
.btn--ghost{border-color:var(--ember);color:var(--ember-deep);background:transparent}
.btn--ghost:hover{background:var(--ember);color:#fff}
.band--night .btn--ghost{border-color:var(--ember-lift);color:var(--ember-lift)}
.band--night .btn--ghost:hover{background:var(--ember-lift);color:var(--night)}
.arrow-link{font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.arrow-link:hover{border-bottom-color:var(--ember)}
.arrow-link::after{content:" \2192"}

/* ---------- Header and nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule)}
.site-header__inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:74px;width:min(100% - 2.5rem, var(--wide));margin-inline:auto}
.brand{font-family:var(--serif);font-weight:700;font-size:1.0625rem;
  line-height:1.15;color:var(--ink);text-decoration:none;letter-spacing:-0.01em;
  flex:0 0 auto;max-width:13ch}
.brand em{display:block;font-style:normal;color:var(--ember-deep)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1)}
.nav a{color:var(--ink);text-decoration:none;font-size:var(--step--1);
  font-weight:600;padding:.55rem .7rem;border-radius:var(--radius);display:block}
.nav a:hover{color:var(--ember-deep);background:var(--ember-wash)}
.nav [aria-current="page"]{color:var(--ember-deep);box-shadow:inset 0 -2px 0 var(--ember)}
.nav__item{position:relative}
.nav__toggle{font:inherit;font-size:var(--step--1);font-weight:600;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:.55rem .7rem;border-radius:var(--radius)}
.nav__toggle:hover{color:var(--ember-deep);background:var(--ember-wash)}
.nav__toggle::after{content:"";display:inline-block;margin-left:.4em;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px)}
.nav__menu{position:absolute;top:100%;left:0;min-width:16rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(36,30,24,.13);padding:.4rem;margin:0;list-style:none;
  display:none}
.nav__item[data-open="true"] .nav__menu{display:block}
.nav__menu li{margin:0}
.nav__menu a{padding:.5rem .7rem}
.nav__cta{margin-left:var(--sp-2)}
.nav-toggle{display:none;font:inherit;font-weight:700;font-size:var(--step--1);
  background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:.5rem .8rem;cursor:pointer;color:var(--ink)}
@media(max-width:1000px){
  .nav-toggle{display:block;margin-left:auto}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--sp-2) 1.25rem var(--sp-3);display:none;
    box-shadow:0 14px 26px rgba(36,30,24,.10)}
  .site-header[data-open="true"] .nav{display:flex}
  .nav__menu{position:static;display:block;border:0;box-shadow:none;
    padding:0 0 0 var(--sp-3);min-width:0}
  .nav__toggle{text-align:left;width:100%}
  .nav__toggle::after{display:none}
  .nav__cta{margin:var(--sp-2) 0 0}
  .btn{display:block;text-align:center}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3.5rem,3rem + 6vw,7rem) var(--sp-6);
  background:linear-gradient(180deg,var(--ember-wash) 0%,var(--paper) 62%)}
.hero h1{max-width:19ch;margin-bottom:var(--sp-4)}
.hero__sub{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);
  max-width:56ch;margin-bottom:var(--sp-4)}
.hero__note{font-size:var(--step--1);color:var(--ink-muted);margin-top:var(--sp-3)}

/* ---------- Proof strip ---------- */
.proof{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4);max-width:none}
@media(min-width:760px){.proof{grid-template-columns:repeat(3,1fr);gap:0}}
.proof li{margin:0;padding:var(--sp-3) var(--sp-4);border-top:3px solid var(--ember)}
@media(min-width:760px){
  .proof li{border-top:0;border-left:3px solid var(--ember);padding-block:var(--sp-1)}
}
.proof__figure{font-family:var(--serif);font-size:var(--step-2);font-weight:700;
  line-height:1.1;display:block;margin-bottom:var(--sp-1)}
.proof__what{display:block;color:var(--ink-soft);margin-bottom:var(--sp-2);max-width:34ch}
.proof__who{display:block;font-size:var(--step--1);font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-muted)}
.band--night .proof__who{color:#B9AC9C}
.band--night .proof__what{color:#E4DCD1}

/* ---------- Cards ---------- */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--sp-4);display:flex;flex-direction:column}
.band--alt .card{background:#fff}
.card h3{margin-bottom:var(--sp-2)}
.card p{margin-bottom:var(--sp-2)}
.card p:last-of-type{margin-bottom:var(--sp-3)}
.card .arrow-link{margin-top:auto;align-self:flex-start}
.card--plain{border:0;padding:0;background:none}
.band--alt .card--plain{background:none}
.card--plain h3{padding-top:var(--sp-2);border-top:3px solid var(--ember)}

/* ---------- Industry list ---------- */
.industries{list-style:none;padding:0;margin:0;max-width:none;
  display:grid;gap:0;border-top:1px solid var(--rule)}
.industries li{margin:0;border-bottom:1px solid var(--rule)}
.industries a{display:grid;gap:var(--sp-1);padding:var(--sp-3) 0;
  text-decoration:none;color:var(--ink)}
@media(min-width:760px){
  .industries a{grid-template-columns:15rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.industries a:hover{color:var(--ember-deep)}
.industries__name{font-family:var(--serif);font-size:var(--step-1);font-weight:600}
.industries__line{color:var(--ink-soft)}
.industries a:hover .industries__line{color:var(--ink-soft)}

/* ---------- Figures and photography ---------- */
figure{margin:var(--sp-4) 0}
figure img{border-radius:var(--radius)}
figcaption{font-size:var(--step--1);color:var(--ink-muted);margin-top:var(--sp-2);
  max-width:60ch}
.figure--diagram img{background:#fff;border:1px solid var(--rule);padding:var(--sp-3)}
.photo-band img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius)}
.photo-flag{display:inline-block;font-size:var(--step--1);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ember-deep);
  background:var(--ember-wash);border:1px dashed var(--ember);
  padding:.35em .7em;border-radius:var(--radius);margin-bottom:var(--sp-2)}

/* ---------- Downloads ---------- */
.downloads{list-style:none;padding:0;margin:0;max-width:none;
  border-top:1px solid var(--rule)}
.downloads li{margin:0;border-bottom:1px solid var(--rule);padding:var(--sp-3) 0}
.downloads__title{font-family:var(--serif);font-size:var(--step-1);font-weight:600;
  display:block;margin-bottom:var(--sp-1)}
.downloads__meta{font-size:var(--step--1);color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.downloads p{margin-bottom:var(--sp-2)}

/* ---------- Bio ---------- */
.bio{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-6)}
@media(min-width:820px){.bio{grid-template-columns:16rem 1fr;gap:var(--sp-5)}}
.bio__portrait img{border-radius:var(--radius)}
.bio__name{margin-bottom:var(--sp-1)}
.bio__role{font-size:var(--step--1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ember-deep);margin:0 0 var(--sp-1)}
.bio__where{font-size:var(--step--1);color:var(--ink-muted);margin:0 0 var(--sp-3)}

/* ---------- Callouts ---------- */
.note{background:var(--ember-wash);border-left:3px solid var(--ember);
  padding:var(--sp-3) var(--sp-4);border-radius:0 var(--radius) var(--radius) 0;
  margin:var(--sp-4) 0}
.note p:last-child{margin-bottom:0}
.pull{font-family:var(--serif);font-size:var(--step-2);line-height:1.3;
  color:var(--ink);max-width:24ch;margin:0}

/* ---------- CTA band ---------- */
.cta-band{text-align:left}
.cta-band h2{max-width:20ch}
.cta-band p{max-width:52ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:#D9D0C4;padding-block:var(--sp-5) var(--sp-4);
  font-size:var(--step--1)}
.site-footer h4{color:var(--paper);margin-bottom:var(--sp-2)}
.site-footer a{color:#E4DCD1;text-decoration:none}
.site-footer a:hover{color:var(--ember-lift);text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--sp-1)}
.footer__grid{display:grid;gap:var(--sp-4)}
@media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer__legal{border-top:1px solid var(--night-rule);margin-top:var(--sp-4);
  padding-top:var(--sp-3);color:#A2968A;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.footer__legal p{margin:0;max-width:none;color:#A2968A}

/* ---------- Forms ---------- */
.form{max-width:34rem}
.form label{display:block;font-weight:600;font-size:var(--step--1);
  letter-spacing:.03em;margin-bottom:var(--sp-1)}
.form input,.form textarea{width:100%;font:inherit;font-size:var(--step-0);
  color:var(--ink);background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);padding:.65rem .8rem;margin-bottom:var(--sp-3)}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ember);outline:2px solid var(--ember);outline-offset:1px}

/* ---------- Utility ---------- */
.stack-sm > * + *{margin-top:var(--sp-2)}
.mt-4{margin-top:var(--sp-4)}
.mb-0{margin-bottom:0}
.center-narrow{max-width:var(--measure)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Homepage blocks (revision 2) ---------- */
/* Blocks introduced in revision 2. These fold into site.css once approved. */
.manifesto{background:var(--ember-wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.manifesto p{font-family:var(--serif);font-size:var(--step-2);line-height:1.35;
  color:var(--ink);max-width:26ch;margin:0}
.manifesto .who{font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ember-deep);
  margin:0 0 var(--sp-3);max-width:none}
.services{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0;
  border-top:1px solid var(--rule)}
@media(min-width:820px){.services{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-5)}}
.services li{margin:0;padding:var(--sp-4) 0;border-bottom:1px solid var(--rule)}
.services h3{margin-bottom:var(--sp-2)}
.services p{margin-bottom:0;color:var(--ink-soft)}
.leads{display:grid;gap:var(--sp-5);margin-top:var(--sp-4)}
@media(min-width:820px){.leads{grid-template-columns:repeat(2,1fr)}}
.lead{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp-3);align-items:start}
.lead img{border-radius:50%;width:5.5rem;height:5.5rem;object-fit:cover}
.lead h3{margin-bottom:var(--sp-1)}
.lead .role{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ember-deep);margin:0 0 var(--sp-2)}
.lead p{margin-bottom:var(--sp-2);font-size:var(--step--1);line-height:1.6}
.lc{display:grid;gap:var(--sp-4);align-items:center}
@media(min-width:760px){.lc{grid-template-columns:auto 1fr auto}}
.lc img{width:104px;border:1px solid var(--rule)}
.lc p{margin-bottom:0}

/* Split grids default to centred, which is wrong when the two columns are
   very different heights, as on Contact. */
.grid--top{align-items:start}

/* ---------- Session agenda (workshop pages) ---------- */
.agenda{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:0;
  border-top:1px solid var(--rule)}
.agenda li{margin:0;border-bottom:1px solid var(--rule);
  display:grid;gap:var(--sp-1);padding:var(--sp-3) 0}
@media(min-width:760px){
  .agenda li{grid-template-columns:11rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.agenda__when{font-family:var(--serif);font-size:var(--step-1);font-weight:600;display:block}
.agenda__who{display:block;font-size:var(--step--1);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.agenda__what{margin:0;color:var(--ink-soft);max-width:60ch}
.agenda__what strong{color:var(--ink)}
.agenda--break .agenda__when{font-family:var(--sans);font-size:var(--step--1);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.agenda--theirs{background:var(--ember-wash);padding-inline:var(--sp-3)}
.agenda--theirs .agenda__when{color:var(--ember-deep)}

/* ---------- Offer specification ---------- */
.spec-list{list-style:none;padding:0;margin:0;max-width:none;
  border-top:1px solid var(--rule)}
.spec-list li{margin:0;padding:var(--sp-3) 0;border-bottom:1px solid var(--rule);
  display:grid;gap:var(--sp-1)}
@media(min-width:640px){
  .spec-list li{grid-template-columns:11rem 1fr;gap:var(--sp-4);align-items:baseline}
}
.spec-list__k{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted)}
.spec-list span{color:var(--ink-soft)}
.price{font-family:var(--serif);font-size:var(--step-2);font-weight:700;
  line-height:1.15;color:var(--ink);display:block;margin:0 0 var(--sp-1)}