/* Page styles for Home, the three offering pages, About, Blog and Contact.
   Mobile first: base rules are for phones, wider layouts are added at
   768px (tablet) and 1040px (desktop). Layout uses flexbox and grid, with
   no fixed heights, so boxes follow their content.
   The shared header and footer are in shared.css. */

:root {
  --green: #1A3A2E;
  --deep: #142E24;
  --gold: #A49659;
  --gold-text: #746838; /* gold for text on white or pale grey only */
  --gold-pale: #EAE4CF;
  --text: #3A3A3A;
  --muted: #5F5F5F;
  --pale: #F3F3F1;
  --line: #E2E2DE;
  --white: #FFFFFF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: 'Calibri', 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--green);
}
h1,
h2,
h3 {
  margin: 0;
  color: var(--green);
  font-weight: 700;
  line-height: 1.2;
}
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.hero :focus-visible,
.closing-band :focus-visible {
  outline-color: var(--white);
}

/* --- Layout --- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.section {
  padding: 48px 0 56px;
}
.section--pale {
  background: var(--pale);
}
.section[id] {
  scroll-margin-top: 16px;
}
.split {
  display: grid;
  gap: 40px;
}
.stack > * + * {
  margin-top: 16px;
}
.prose {
  max-width: 760px;
}
.prose p + p {
  margin-top: 16px;
}
.eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--gold-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
}
.h2 {
  font-size: 28px;
}
.section-head {
  margin-bottom: 20px;
}
.section-head .prose {
  margin-top: 16px;
}
.h2 + .prose {
  margin-top: 16px;
}
/* A thin rule where two white sections meet */
.section:not(.section--pale) + .section:not(.section--pale) {
  border-top: 1px solid var(--line);
}
.text-link {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  line-height: 24px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 0;
}
.text-link:hover {
  color: var(--gold-text);
}
.small-note {
  font-size: 15px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .wrap {
    padding-left: 40px;
    padding-right: 40px;
  }
  .section {
    padding: 64px 0 80px;
  }
  .h2 {
    font-size: 32px;
  }
  .section-head {
    margin-bottom: 32px;
  }
}
@media (min-width: 1040px) {
  .wrap {
    padding-left: 64px;
    padding-right: 64px;
  }
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .split--center {
    align-items: center;
  }
  .split--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

/* --- Icons: line icons in Forest Green circles (Lucide, ISC licence) --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
}
.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg {
  width: 64px;
  height: 64px;
}
.icon--lg svg {
  width: 30px;
  height: 30px;
}
.icon--on-green {
  background: var(--deep);
}
.icon--gold {
  background: var(--gold);
  color: var(--white);
}
.icon--xl {
  width: 88px;
  height: 88px;
}
.icon--xl svg {
  width: 42px;
  height: 42px;
}
.icon-pair {
  display: flex;
  gap: 20px;
}
@media (min-width: 1040px) {
  .icon-pair {
    justify-content: center;
  }
}
.citation {
  margin-top: 20px;
}

/* --- Hero (offering pages, About, Blog) --- */
.hero {
  background: var(--green);
  color: var(--white);
}
.hero__inner {
  display: grid;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.hero h1 {
  color: var(--white);
  font-size: 36px;
  line-height: 1.15;
}
.hero__subhead {
  margin-top: 14px;
  color: var(--gold);
  font-size: 24px;
  line-height: 1.3;
}
.hero__intro {
  margin-top: 18px;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1.6;
}
.hero__intro em {
  font-style: italic;
}
.hero .eyebrow,
.statement .eyebrow {
  color: var(--gold);
}
.hero .eyebrow {
  margin-bottom: 14px;
}
.hero__graphic {
  display: flex;
  justify-content: center;
}
.hero__graphic img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 30vh;
}
@media (min-width: 768px) {
  .hero__inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .hero__subhead {
    font-size: 26px;
  }
}
@media (min-width: 1040px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .hero__graphic img {
    max-height: 240px;
  }
}

/* --- Link tiles --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 24px 0 8px;
  list-style: none;
}
.tiles li {
  display: flex;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--pale);
  color: var(--green);
  text-decoration: none;
  border-radius: 2px;
}
.tile:hover {
  background: #EBEBE7;
}
.tile__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.tile__line {
  display: none;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 32px 0 16px;
  }
  .tile {
    justify-content: flex-start;
    padding: 18px 20px 20px;
  }
  .tile__title {
    font-size: 18px;
  }
  .tile__line {
    display: block;
  }
}

/* --- Section navigation (offering pages) --- */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 6px;
  margin: -24px -8px 8px 0;
  font-size: 14px;
  line-height: 1.3;
}
.section-nav a {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  line-height: 44px;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}
.section-nav a:hover {
  color: var(--green);
}
.section-nav .section-nav__top {
  color: var(--gold-text);
  font-weight: 700;
}
.sn-short {
  display: none;
}
@media (max-width: 479px) {
  .sn-long {
    display: none;
  }
  .sn-short {
    display: inline;
  }
}
@media (min-width: 768px) {
  .section-nav {
    margin-top: -36px;
  }
}

/* --- Cards --- */
.card-grid {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--white);
}
.section:not(.section--pale) .card {
  background: var(--pale);
}
.card h3 {
  font-size: 20px;
}
.card__label {
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: -8px;
}
.card__link {
  margin-top: auto;
}
.card--green {
  background: var(--green) !important;
  color: rgba(255, 255, 255, 0.92);
}
.card--green h3 {
  color: var(--white);
}
.card--green .icon {
  background: var(--deep);
}
@media (min-width: 768px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Five Disciplines: one column on phones, five across on desktop */
@media (min-width: 768px) {
  .card-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .card-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .card-grid--5 .card {
    padding: 22px 18px;
  }
}

/* --- Steps with arrows --- */
.steps {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--white);
}
.section:not(.section--pale) .step {
  background: var(--pale);
}
.step__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.step__num {
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.step h3,
.step h4 {
  margin: 0;
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
/* Arrow between steps: pointing down on phones, right on desktop */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: -24px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--gold);
}
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
  .step:not(:last-child)::after {
    display: none;
  }
}
@media (min-width: 1040px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
  }
  .step:not(:last-child)::after {
    display: block;
    left: auto;
    right: -30px;
    top: 48px;
    bottom: auto;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 18px solid var(--gold);
    border-right: 0;
  }
}

/* Steps grouped in phases (Strategy Coaching): each phase label sits above
   its pair of steps; the two steps share a row from tablet width, with the
   arrow between them. On phones they stack as other steps do. */
.phase__label {
  margin: 0 0 16px;
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.phase-note {
  margin: 32px 0;
  color: var(--green);
  font-weight: 700;
}
@media (min-width: 768px) {
  .steps--pair .step:not(:last-child)::after {
    display: block;
    left: auto;
    right: -30px;
    top: 48px;
    bottom: auto;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 18px solid var(--gold);
    border-right: 0;
  }
}
@media (min-width: 1040px) {
  .steps--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 64px;
  }
  .steps--pair .step:not(:last-child)::after {
    right: -41px;
  }
}

/* Former anchor kept at the top of a renamed section (#the-gap on Strategy
   Coaching), so old links still land on it */
.anchor-alias {
  display: block;
  height: 0;
  scroll-margin-top: 16px;
}

/* --- Pills (When it helps) --- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.pills li {
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}
.pills li:nth-child(odd) {
  background: var(--green);
  color: var(--white);
}
.pills li:nth-child(even) {
  background: var(--pale);
  color: var(--green);
}
.pills li:last-child {
  background: transparent;
  border-color: var(--gold);
  color: var(--green);
  font-weight: 400;
  font-style: italic;
}

/* --- Panels (Confidentiality) and strips --- */
.panels {
  display: grid;
  gap: 20px;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--pale);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.panel h3 {
  font-size: 20px;
}
.panel--green {
  background: var(--green);
  color: rgba(255, 255, 255, 0.92);
}
.panel--green h3 {
  color: var(--white);
}
.panel--green .icon {
  background: var(--deep);
}
.strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--white);
}
@media (min-width: 768px) {
  .panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .panel {
    padding: 32px;
  }
}

/* --- Quotes --- */
.quotes {
  display: grid;
  gap: 20px;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  background: var(--pale);
}
.quote blockquote p {
  font-style: italic;
  line-height: 1.6;
}
.quote figcaption {
  margin-top: auto;
  color: var(--gold-text);
  font-size: 15px;
  font-weight: 700;
}
.quote--lead {
  background: var(--green);
  color: var(--white);
}
.quote--lead blockquote p {
  font-size: 18px;
}
.quote--lead figcaption {
  color: var(--gold);
}
.quote__mark {
  color: var(--gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 0.6;
  height: 28px;
}
.quotes__note {
  margin-top: 20px;
}
@media (min-width: 1040px) {
  .quotes {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
  }
  .quote--lead {
    grid-row: span 2;
    padding: 36px;
  }
}

/* Pull-quote */
.pullquote {
  padding: 22px 24px;
  border-left: 4px solid var(--gold);
  background: var(--pale);
}
.pullquote blockquote p {
  color: var(--green);
  font-size: 22px;
  font-style: italic;
  line-height: 1.4;
}
.pullquote figcaption {
  margin-top: 10px;
  color: var(--gold-text);
  font-size: 15px;
  font-weight: 700;
}

/* --- Feature tiles (Why Winnocks) --- */
.feature-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: var(--pale);
}
.feature h3 {
  font-size: 19px;
}
.feature p {
  font-size: 16px;
  line-height: 1.45;
  margin-top: 2px;
}
.feature--green {
  background: var(--green);
  color: rgba(255, 255, 255, 0.92);
}
.feature--green h3 {
  color: var(--white);
}
.feature--green .icon {
  background: var(--deep);
}
.feature-list--2x2 .feature {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (min-width: 768px) {
  .feature-list--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Outlined panel (Pro bono) */
.outline-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border: 1.5px solid var(--gold);
  background: var(--pale);
}
.outline-panel__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.outline-panel__label {
  color: var(--gold-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- Figures and diagrams --- */
.figure img {
  display: block;
  width: 100%;
  height: auto;
}
.figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.figure--framework {
  max-width: 560px;
}
.figure--cone {
  display: flex;
  justify-content: center;
}
.figure--cone img {
  max-width: 420px;
}

/* Green statement box (Strategy: The Winnock Framework) */
.statement {
  padding: 32px 28px;
  background: var(--green);
  color: var(--white);
}
.statement p {
  font-size: 19px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .statement {
    padding: 44px 40px;
  }
  .statement p {
    font-size: 23px;
  }
}

/* Team panels (The gap) */
.team-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.team-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px;
  background: var(--pale);
  text-align: center;
}
.team-panel h3 {
  font-size: 17px;
}
.team-panel img {
  width: 100%;
  max-width: 220px;
}
.team-panel figcaption {
  margin-top: auto;
  font-size: 15px;
  line-height: 1.35;
}
.team-panel--green {
  background: var(--green);
  color: var(--white);
}
.team-panel--green h3 {
  color: var(--white);
}
@media (max-width: 359px) {
  .team-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  .team-panels {
    gap: 20px;
  }
  .team-panel {
    padding: 28px 20px;
  }
  .team-panel h3 {
    font-size: 19px;
  }
}

/* Illustrative charter on a page */
.charter {
  max-width: 400px;
  margin: 0 auto;
}
.charter__page {
  padding: 24px 24px 28px;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}
.charter__title {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.charter__sub {
  margin-top: 4px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}
.charter__group {
  margin-top: 18px;
}
.charter__head {
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.charter__bar {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: #DDDDD9;
}
.charter__bar--short {
  width: 70%;
}
.charter__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 14px;
}
.charter__row span:first-child {
  flex: 0 0 96px;
}
.charter__row .charter__bar {
  flex: 1;
  margin-top: 0;
}
.charter figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* Prioritisation heatmap */
.heatmap {
  max-width: 420px;
}
.heatmap__title {
  margin-bottom: 12px;
}
.heatmap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.heatmap__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.95;
  padding: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.hm-clear {
  background: var(--green);
  color: var(--white);
}
.hm-partly {
  background: var(--gold);
  color: var(--deep);
}
.hm-work {
  background: var(--gold-pale);
  color: var(--deep);
}
.heatmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.heatmap__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.heatmap__legend span {
  display: inline-block;
  width: 14px;
  height: 14px;
}

/* Timeline (Charter Refresh) */
.timeline {
  display: grid;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.timeline li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.4;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline li:first-child::before {
  background: var(--green);
}
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -22px;
  width: 2px;
  background: var(--gold);
}
.timeline strong {
  display: block;
  color: var(--green);
}
@media (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .timeline li {
    padding: 28px 0 0;
  }
  .timeline li:nth-child(2) {
    text-align: center;
  }
  .timeline li:last-child {
    text-align: right;
  }
  .timeline li::before {
    top: 0;
  }
  .timeline li:nth-child(2)::before {
    left: calc(50% - 8px);
  }
  .timeline li:last-child::before {
    left: auto;
    right: 0;
  }
  .timeline li:not(:last-child)::after {
    left: 16px;
    right: -16px;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline li:nth-child(2):not(:last-child)::after {
    left: calc(50% + 8px);
  }
}

/* --- Closing band --- */
.closing-band {
  background: var(--green);
  color: var(--white);
}
.closing-band__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.closing-band h2 {
  color: var(--white);
  font-size: 26px;
  line-height: 1.25;
}
.closing-band p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--gold);
  color: var(--deep);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: #B3A66A;
  color: var(--deep);
}
.closing-band .button {
  align-self: flex-start;
}
@media (min-width: 768px) {
  .closing-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .closing-band h2 {
    font-size: 30px;
  }
  .closing-band .button {
    align-self: center;
    flex-shrink: 0;
  }
}

/* ===== Home ===== */
.home-hero__inner {
  display: grid;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 44px;
}
.home-hero h1 {
  color: var(--white);
  font-size: 38px;
  line-height: 1.15;
}
.home-hero__subhead {
  margin-top: 22px;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
}
.home-hero__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--deep);
}
/* Logo lock-up: the header's mark and wordmark (22px mark, 10px gap, wordmark
   at the cap height of 19px Gill Sans MT), scaled from one size. --mark is the
   logo height; every other measure keeps the header's ratio to it. The whole
   lock-up is about 8.14 x --mark wide, so where the panel is narrow (phones,
   and desktops just above the breakpoint) --mark follows the panel width and
   the lock-up stays on one line. */
.home-hero__panel {
  container-type: inline-size;
}
.home-hero__lockup {
  --mark: clamp(26px, 8vw, 44px);
  display: flex;
  align-items: center;
  gap: calc(var(--mark) * 10 / 22);
  /* the height of the earlier live-text line (type size x 1.6 line height),
     so the heading below keeps its position */
  min-height: calc(var(--mark) * 19 / 22 * 1.6);
  white-space: nowrap;
}
@supports (width: 1cqw) {
  .home-hero__lockup {
    --mark: clamp(24px, 12cqw, 44px);
  }
}
.home-hero__lockup img {
  display: block;
  flex-shrink: 0;
  width: var(--mark);
  height: var(--mark);
}
.home-hero__lockup .home-hero__wordmark {
  width: auto;
  height: calc(var(--mark) * 19 / 22 * 1397 / 2048);
}
.home-hero__panel h2 {
  color: var(--white);
  font-size: 22px;
}
.home-hero__panel p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
}
.home-hero__panel .text-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--gold);
}
.home-hero__panel .text-link:hover {
  color: var(--white);
}
@media (min-width: 768px) {
  .home-hero__inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .home-hero h1 {
    font-size: 48px;
  }
}
@media (min-width: 1040px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 64px;
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .home-hero__text {
    align-self: center;
  }
  .home-hero h1 {
    font-size: 54px;
  }
  .home-hero__panel {
    padding: 36px 32px;
  }
}

.columns {
  display: grid;
  gap: 40px;
}
.column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.column__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.column__head h2 {
  font-size: 22px;
}
.column .text-link {
  margin-top: auto;
}
@media (min-width: 768px) {
  .columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* ===== About ===== */
.about-hero .hero__graphic img {
  max-height: 28vh;
}
@media (min-width: 1040px) {
  .about-hero .hero__inner {
    padding-top: 88px;
    padding-bottom: 88px;
  }
  .about-hero .hero__graphic img {
    max-height: 220px;
  }
}

/* Founder's message, the people and the two notes. Phones stack them in
   source order (founder, people, notes). On desktop the founder's message and
   the notes share the left column and the people fill the right; the notes
   row takes up any extra height, so the notes stay directly under the
   founder's message and new people only lengthen the right column. */
.about-cols {
  display: grid;
  gap: 56px;
}
@media (min-width: 1040px) {
  .about-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "founder people"
      "notes people";
    gap: 48px 72px;
    align-items: start;
  }
  .about-cols__founder {
    grid-area: founder;
  }
  .about-cols__people {
    grid-area: people;
  }
  .about-cols__notes {
    grid-area: notes;
  }
}
.founder__sign {
  margin-top: 24px;
  color: var(--green);
  font-weight: 700;
}
.people-intro {
  margin-top: 16px;
}

/* People cards: one column, photo on the left and text beside it */
.people-list {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.person {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 20px;
  background: var(--pale);
}
.person__photo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.person__body > * + * {
  margin-top: 10px;
}
.person h3 {
  font-size: 21px;
}
.person h3 + .person__role {
  margin-top: 2px;
}
.person__role {
  color: var(--gold-text);
  font-size: 15px;
  font-weight: 700;
}
.person__text {
  font-size: 16px;
}
.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.person--placeholder {
  align-items: center;
}
.person--placeholder .person__body > * + * {
  margin-top: 2px;
}
@media (min-width: 480px) {
  .person {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
  }
  .person__photo {
    width: 80px;
    height: 80px;
  }
}

.notes {
  display: grid;
  gap: 28px;
}
.note {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 768px) {
  .notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}
/* In the About left column on desktop the notes stack in one column */
@media (min-width: 1040px) {
  .about-cols__notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ===== Blog ===== */
.blog-hero h1 {
  max-width: 820px;
  font-size: 32px;
}
@media (min-width: 768px) {
  .blog-hero h1 {
    font-size: 40px;
  }
}
@media (min-width: 1040px) {
  .blog-hero .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.article-list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--pale);
}
.article-card__meta {
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.article-card h2 {
  font-size: 24px;
}
@media (min-width: 1040px) {
  .article-list {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .article-card {
    padding: 32px;
  }
}

/* ===== Contact ===== */
.contact {
  display: grid;
}
.contact__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 20px;
  background: var(--green);
  color: rgba(255, 255, 255, 0.92);
}
.contact__panel h1 {
  color: var(--white);
  font-size: 38px;
}
.contact__panel p {
  font-size: 18px;
}
.contact__book {
  margin-top: 12px;
}
.contact__book strong {
  display: block;
  color: var(--white);
}
.contact__panel .text-link {
  color: var(--gold);
}
.contact__panel .text-link:hover {
  color: var(--white);
}
.contact__form-wrap {
  padding: 40px 20px 56px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 640px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #C9C9C4;
  border-radius: 2px;
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
}
.field textarea {
  min-height: 140px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green);
}
.form .button {
  width: 100%;
  margin-top: 4px;
}
.honeypot {
  display: none;
}
/* Shown only if the background send fails (see site.js) */
.form__status {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--gold);
  background: var(--pale);
  color: var(--text);
  font-weight: 700;
}
.form__status[hidden] {
  display: none;
}
.form .button:disabled {
  opacity: 0.6;
  cursor: progress;
}
@media (min-width: 768px) {
  .contact__panel {
    padding: 56px 40px;
  }
  .contact__form-wrap {
    padding: 56px 40px 72px;
  }
}
@media (min-width: 1040px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
  .contact__panel {
    padding: 72px 64px;
  }
  .contact__form-wrap {
    padding: 64px 64px 80px;
  }
  .form .button {
    width: auto;
    align-self: flex-start;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Contrast: gold on Forest Green is 4.2:1, which passes WCAG AA only as
   large text (at least 19px bold). Gold text on green is sized up to that;
   the colour itself is unchanged. */
.hero .eyebrow,
.statement .eyebrow,
.home-hero__panel .text-link,
.contact__panel .text-link,
.quote--lead figcaption {
  font-size: 19px;
  font-weight: 700;
}