/* ETC (Executive Transition Coaching) site styles. October 2026.
   Plain CSS, no external fonts or frameworks. Colour tokens taken from the previous Squarespace site,
   with two text colours darkened to meet WCAG 2.2 AA contrast. */

:root {
  --ink: #1a1a22;
  --slate: #3d3d4d;
  --mid: #5c5c6e;          /* darkened from #7a7a8c for contrast */
  --pale: #f5f4f1;
  --white: #fefefe;
  --gold: #b8955a;         /* brand gold: logo, rules, accents, text on dark only */
  --gold-text: #7a5c2b;    /* darker gold for small text on light backgrounds */
  --gold-light: #e8d5b0;
  --accent: #2c4a6e;
  --accent-light: #e8edf4;
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-soft: rgba(255, 255, 255, 0.7);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 40rem;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 0.75rem; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 650; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--gold-light); }
strong { color: var(--ink); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: 0.6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }

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

/* Header: stays fixed at the top while the page scrolls beneath it */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--pale); border-bottom: 1px solid rgba(184, 149, 90, 0.3);
  box-shadow: 0 2px 10px rgba(26, 26, 34, 0.08);
}
/* Stop menu links landing their section underneath the fixed header */
html { scroll-padding-top: 5.5rem; }

.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.brand img { width: 60px; height: auto; }
.brand span { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--slate); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.4rem 0; display: inline-block; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.site-nav .nav-cta { background: var(--ink); color: var(--white); padding: 0.45rem 0.9rem; border-radius: 2px; }
.site-nav .nav-cta:hover { background: var(--accent); color: var(--white); text-decoration: none; }

/* Sections */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.pale { background: var(--pale); }
.dark { background: var(--ink); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark strong { color: var(--white); }
.dark a { color: var(--gold-light); }
.dark a:hover { color: var(--white); }
.blue { background: var(--accent); color: var(--on-dark); }
.blue h2, .blue h3, .blue strong { color: var(--white); }
.blue a { color: var(--gold-light); }

.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.dark .eyebrow, .blue .eyebrow { color: var(--gold-light); }
.lead { font-size: 1.2rem; color: var(--slate); max-width: 44rem; }
.dark .lead { color: var(--on-dark); }

/* Source citations */
.label { display: block; margin-top: 0.4rem; font-size: 0.85rem; font-style: italic; color: var(--mid); }
.label a { color: inherit; }
.dark .label, .blue .label { color: var(--on-dark-soft); }
.label-inline { font-size: 0.9rem; font-style: italic; color: var(--mid); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.5rem; align-items: center; }
.btn {
  display: inline-block; padding: 0.85rem 1.4rem; border-radius: 2px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none;
  background: var(--gold); color: var(--ink); border: 2px solid var(--gold);
}
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dark .btn-secondary, .blue .btn-secondary { color: var(--white); border-color: var(--on-dark-soft); }
.dark .btn-secondary:hover, .blue .btn-secondary:hover { background: var(--white); color: var(--ink); }

/* Hero */
.hero { background: var(--ink); color: var(--on-dark); padding: clamp(3.5rem, 9vw, 7rem) 0; }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero .lead { color: var(--on-dark); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.stat { background: rgba(255, 255, 255, 0.06); border-top: 2px solid var(--gold); padding: 1.25rem 1.25rem 1rem; }
.stat .num { display: block; font-size: 2.1rem; font-weight: 650; color: var(--gold-light); line-height: 1.1; margin-bottom: 0.4rem; }
.stat p { margin: 0; color: var(--on-dark); font-size: 1rem; }
.hero-note { margin-top: 1.5rem; font-size: 0.95rem; color: var(--on-dark-soft); }

/* Grids and cards */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.card { background: var(--white); border-left: 3px solid var(--gold); padding: 1.4rem 1.4rem 1.1rem; }
.pale .card { background: var(--white); }
section:not(.pale):not(.dark):not(.blue) .card { background: var(--pale); }
.dark .card { background: rgba(255, 255, 255, 0.06); }
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }

/* Shifts table */
.shift-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.shift-list li { display: grid; grid-template-columns: 1fr; gap: 0.5rem; background: var(--white); padding: 1.2rem 1.4rem; border-left: 3px solid var(--accent); }
.shift-list h3 { margin: 0; }
.shift-list .ba { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1.5rem; }
.shift-list .ba p { margin: 0; }
.shift-list .tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); margin-right: 0.4rem; }
@media (min-width: 48rem) { .shift-list .ba { grid-template-columns: 1fr 1fr; } }

/* Phases */
.phases { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: phase; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.phases li { counter-increment: phase; background: rgba(255, 255, 255, 0.06); padding: 1.4rem; border-top: 2px solid var(--gold); }
.phases li::before { content: "Phase " counter(phase); display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.4rem; }
.phases h3 { color: var(--white); margin-bottom: 0.2rem; }
.phases .when { font-size: 0.95rem; color: var(--on-dark-soft); margin-bottom: 0.6rem; }
.phases p { color: var(--on-dark); font-size: 1rem; }
.callout { margin-top: 2rem; padding: 1.4rem; border: 1px solid rgba(232, 213, 176, 0.45); }
.callout p:last-child { margin-bottom: 0; }

/* Two-column text */
.split { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Tables */
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.98rem; }
th, td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid #d9d6cf; }
th { color: var(--ink); font-weight: 650; background: var(--pale); }
caption { text-align: left; font-weight: 650; color: var(--ink); padding-bottom: 0.5rem; }

/* Team */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 2rem; }
.person { background: var(--white); padding: 1.6rem; }
.person-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.person-head img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.person-head h3 { margin: 0; }
.person-head p { margin: 0; font-size: 0.95rem; color: var(--mid); }

/* Ten questions */
.questions { counter-reset: q; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.questions li { counter-increment: q; position: relative; padding: 1.3rem 1.4rem 1.1rem 4rem; background: var(--pale); }
.questions li::before {
  content: counter(q); position: absolute; left: 1.2rem; top: 1.15rem;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--gold-light);
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.questions h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.questions p { margin-bottom: 0.2rem; }

/* Contact */
.contact-options { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.contact-options .card h3 { margin-bottom: 0.4rem; }

/* Footer */
.site-footer { background: #111118; color: var(--on-dark-soft); padding: 2.5rem 0; font-size: 0.92rem; }
.site-footer a { color: var(--gold-light); }
.site-footer .wrap { display: grid; gap: 1rem; }
.site-footer img { width: 56px; }
.site-footer p { max-width: 52rem; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0; }

/* Placeholder highlight: anything still to be filled in before going live */
.todo { background: #fff3a6; color: #1a1a22; padding: 0 0.2em; font-style: normal; }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul li { margin-bottom: 0.35rem; }
/* One reading width for all running text on text-heavy pages: paragraphs, intro and lists */
.prose p, .prose .lead, .prose ul, .prose ol, ul.measure, ol.measure { max-width: var(--measure); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .site-header nav, .skip-link, .actions { display: none; }
  .site-header { position: static; box-shadow: none; }
  .hero, .dark, .blue { background: none; color: #000; }
  .hero h1, .dark h2, .blue h2 { color: #000; }
}

.dark .label-inline, .blue .label-inline { color: var(--on-dark-soft); }
.spaced { margin-top: 1.25rem; }
.subhead { margin-top: 3rem; font-size: 1.35rem; }
.dark .btn:not(.btn-secondary), .blue .btn:not(.btn-secondary) { color: var(--ink); }
.dark .btn:not(.btn-secondary):hover, .blue .btn:not(.btn-secondary):hover { color: var(--ink); }

/* On phones, show the logo only (it still links home) so the menu takes less of the screen */
@media (max-width: 40rem) {
  html { scroll-padding-top: 6rem; }
  .site-header .wrap { flex-wrap: nowrap; align-items: center; padding-top: 0.55rem; padding-bottom: 0.55rem; gap: 0.75rem; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand img { width: 48px; }
  .site-nav { flex: 1; min-width: 0; }
  .site-nav ul { justify-content: flex-end; gap: 0.1rem 0.85rem; }
  .site-nav a { font-size: 0.88rem; padding: 0.25rem 0; }
  .site-nav .nav-cta { padding: 0.3rem 0.65rem; }
}

/* Experience: anonymised examples of past transition work (home page strip and /experience/) */
.cases { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.5rem; }
.case { display: flex; flex-direction: column; background: var(--white); border-top: 2px solid var(--gold); padding: 1.4rem 1.4rem 1.2rem; }
section:not(.pale):not(.dark):not(.blue) .case { background: var(--pale); }
.case-sector { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 0.3rem; }
.case h3, .case h4 { font-size: 1.2rem; margin: 0 0 0.9rem; }
.case dl { margin: 0; }
.case dl > div { margin-bottom: 0.85rem; }
.case dt { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.case dd { margin: 0.15rem 0 0; font-size: 1rem; }
.case-tag { max-width: none; margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid #d9d6cf; font-size: 0.92rem; color: var(--mid); }
.cases-wide { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 60rem) {
  .cases-wide .case dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
  .cases-wide .case dl > div { margin-bottom: 1rem; }
}