@charset "utf-8";
/* ==========================================================================
   MANHART COACHING
   Hand-written, no framework.

   THE PALETTE AND WHY IT IS SHAPED THIS WAY
   The brand is navy #000330 and gold #C8962E. Measured, gold on white is
   2.67:1 — it fails WCAG AA even at headline size. So gold never sets text
   on a light background. It fills buttons (navy label on gold: 7.44:1), it
   rules, it marks, and it sets text only on navy (7.44:1). Where a gold
   WORD is needed on white, --gold-ink is used instead: the same hue walked
   down until it measures 4.62:1.

   Every ratio in this file was measured, not estimated.

   ASPECT RATIOS
   Boxes that must hold a shape use padding-bottom, not aspect-ratio, which
   has rendered unreliably on this author's browser. Note that percentage
   padding resolves against the CONTAINING BLOCK'S WIDTH — if a parent caps
   its children narrower than itself, the ratio comes out wrong.
   ========================================================================== */

:root {
  /* ground */
  --navy:       #000330;   /* brand primary. White on it: 19.89:1 */
  --navy-lift:  #0A1040;   /* second dark surface. White on it: 18.09:1 */
  --white:      #FFFFFF;
  --bone:       #F7F6F2;   /* warm off-white, so light bands are not clinical */
  --line:       #E4E2DA;

  /* gold */
  --gold:       #C8962E;   /* brand secondary. Fills and rules only on light */
  --gold-ink:   #8E6817;   /* gold as TEXT on light. White 5.07:1, bone 4.69:1.
                              The first value tried, #966E19, passed on white at
                              4.62 but fell to 4.28 on the bone band — under AA for
                              the small-caps eyebrow, which is 12.8px. */
  --gold-soft:  #E9C878;

  /* type */
  --ink:        #2B3246;   /* body on white: 12.75:1 */
  --muted:      #5A6070;   /* secondary on white: 6.28:1 */
  --on-dark:    #FFFFFF;
  --on-dark-mu: #AEB6C7;   /* secondary on navy: 9.77:1 */

  --font-d: "Fraunces", Georgia, "Times New Roman", serif;
  --font-b: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* scale */
  --t-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --t-led: clamp(1.1rem, 1.02rem + .35vw, 1.3rem);

  --s1: .5rem;  --s2: .75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;   --s7: 4.5rem; --s8: 6.5rem;

  --wrap: 1180px;
  --r:    14px;
  --r-sm: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow:    0 18px 48px rgba(0, 3, 48, .14);
  --shadow-lg: 0 28px 70px rgba(0, 3, 48, .22);
}

/* ------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-d);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }

p { margin: 0; max-width: 64ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--gold-ink); text-underline-offset: .18em; }
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--white);
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; color: var(--white); }

/* ------------------------------------------------------------ layout -- */

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.band { padding-block: clamp(3.5rem, 8vw, var(--s8)); }
.band--bone { background: var(--bone); }
.band--navy { background: var(--navy); color: var(--on-dark); }
.band--lift { background: var(--navy-lift); color: var(--on-dark); }
.band--tight { padding-block: clamp(2.5rem, 5vw, var(--s7)); }

/* h1 belongs in this list. Without it, a page whose header is a dark band
   renders its heading navy on navy — invisible — because h1 inherits the
   default heading colour and only .hero h1 was overridden. */
.band--navy h1, .band--navy h2, .band--navy h3,
.band--lift h1, .band--lift h2, .band--lift h3 { color: var(--on-dark); }

.eyebrow {
  margin: 0 0 var(--s3);
  font-family: var(--font-b);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow--gold { color: var(--gold); }

.lede { margin-top: var(--s4); font-size: var(--t-led); color: var(--muted); max-width: 56ch; }
.lede--dark { color: var(--on-dark-mu); }

.rule {
  /* An <hr> carries margin-inline:auto by default, which quietly centred
     every section rule under a left-aligned heading. */
  width: 56px; height: 3px; margin: var(--s4) auto 0 0;
  background: var(--gold); border: 0; border-radius: 3px;
}
.closer__in .rule { margin-inline: auto; }

/* ------------------------------------------------------------ buttons -- */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; gap: .55em;
  padding: .95em 1.6em;
  border: 2px solid transparent; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-b); font-weight: 600; font-size: 1rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn--lg { padding: 1.1em 2em; font-size: 1.05rem; }
.btn--sm { padding: .7em 1.2em; font-size: .95rem; }

/* Navy label on gold measures 7.44:1 — the gold button is the loud one. */
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy); }
.btn--gold:hover { --btn-bg: var(--gold-soft); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .1); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover { --btn-bg: var(--navy); --btn-fg: var(--white); }

.ico { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.ico--btn { width: 1.1rem; height: 1.1rem; }
.ico--social { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------- header -- */

.head {
  position: sticky; top: 0; z-index: 90;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  transition: padding .25s var(--ease);
}
.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s4);
  transition: padding .25s var(--ease);
}
.head.is-stuck .head__in { padding-block: var(--s2); }

.mark { display: block; text-decoration: none; line-height: 1; }
/*
 * The supplied artwork, used on navy only. The white-wordmark version is the
 * right one for both places the mark appears — the header and the footer are
 * both navy — so the logo sits directly on the ground colour with no plate
 * behind it. The navy-on-white variant is kept in the project for anything
 * printed on a light background.
 *
 * Height is what is set, never width: the aspect ratio is 3.938:1 and the
 * intrinsic width/height on the <img> reserves the right box before the file
 * loads, so the header does not jump.
 */
.mark__img { display: block; height: 40px; width: auto; }
@media (max-width: 30rem) { .mark__img { height: 34px; } }
.head.is-stuck .mark__img { height: 34px; }
.mark--foot .mark__img { height: 54px; }

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__list { display: flex; align-items: center; gap: var(--s5); }
.nav__a {
  position: relative;
  color: var(--white); text-decoration: none;
  font-weight: 500; font-size: .98rem;
  padding-block: .35em;
}
.nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__a:hover { color: var(--white); }
.nav__a:hover::after, .nav__a.is-here::after { transform: scaleX(1); }

.burger { display: none; }

@media (max-width: 62rem) {
  .burger {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 0; padding: .4rem;
    color: var(--white); font-family: var(--font-b); font-weight: 600;
    font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
  }
  .burger__bars { display: grid; gap: 4px; width: 22px; }
  .burger__bars i { display: block; height: 2px; background: var(--gold); transition: transform .25s var(--ease), opacity .2s; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .head__in { flex-wrap: wrap; }
  .nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: var(--s3); padding-top: var(--s4);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__a { padding-block: .85em; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 1.05rem; }
  .nav__a::after { display: none; }
  .nav__a.is-here { color: var(--gold); }
  .head__cta { align-self: flex-start; margin-top: var(--s2); }

  /* Script hides this on load; without script the menu simply stays open. */
  .nav.is-closed { display: none; }
}

/* --------------------------------------------------------------- hero -- */

.hero {
  position: relative; isolation: isolate;
  background: var(--navy); color: var(--on-dark);
  overflow: hidden;
}
/* A soft gold glow bottom-right, so the darkest page on the site is not a
   flat rectangle. Decorative only. */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  right: -18%; bottom: -45%; width: 70%; height: 120%;
  background: radial-gradient(circle at center, rgba(200, 150, 46, .22) 0%, rgba(200, 150, 46, 0) 62%);
  pointer-events: none;
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  align-items: center;
}
@media (min-width: 60rem) { .hero__in { grid-template-columns: 1fr 1.05fr; } }

.hero h1 { color: var(--white); max-width: 14ch; }
.hero .lede { color: var(--on-dark-mu); max-width: 46ch; }
.hero__act { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ------------------------------------------------- the hero film -- */

/*
 * A facade. The poster and the button are ordinary markup; the YouTube
 * player is only built when the button is pressed, so no third-party
 * script or cookie loads for someone who never watches.
 */
.film {
  position: relative; width: 100%; height: 0; padding-bottom: 56.25%;
  border-radius: var(--r); overflow: hidden;
  background: var(--navy-lift);
  box-shadow: var(--shadow-lg);
}
.film > img, .film > iframe, .film > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover; display: block;
}
.film__cover {
  position: absolute; inset: 0; z-index: 2;
  display: block;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 3, 48, .3) 0%, rgba(0, 3, 48, .62) 100%);
  transition: background .3s var(--ease);
}
.film__cover:hover { background: linear-gradient(180deg, rgba(0, 3, 48, .22) 0%, rgba(0, 3, 48, .55) 100%); }
.film.is-on .film__cover { display: none; }

/*
 * Placed at 50% / 68%, not dead centre.
 *
 * Every page poster puts its headline across the middle-left, so a centred
 * button sat on the words every time. Measuring edge density at six
 * candidate spots across all six posters: centre scored 13.05 average and
 * 19.25 on its worst poster, while 50%/68% scored 4.23 and 7.01. It clears
 * the headline, the sub-line and the runtime caption.
 */
.film__play {
  position: absolute; left: 50%; top: 68%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  box-shadow: 0 10px 34px rgba(0, 3, 48, .5);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.film__play .ico { width: 30px; height: 30px; margin-left: 4px; }
/* The translate has to be repeated or hovering would snap it back to the
   top-left corner. */
.film__cover:hover .film__play { transform: translate(-50%, -50%) scale(1.07); background: var(--gold-soft); }

/* The ring that breathes outward from the play button. Now that .film__play
   is positioned, inset:0 pins the ring to the button itself rather than to
   whatever happened to be the nearest positioned ancestor. */
.film__play::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: filmring 2.8s var(--ease) infinite;
}
@keyframes filmring {
  0%        { transform: scale(1);    opacity: .75; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}

.film__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: var(--s4) var(--s5);
  color: var(--white); font-weight: 500; font-size: .95rem;
  text-shadow: 0 1px 10px rgba(0, 3, 48, .8);
  pointer-events: none;
}
.film.is-on .film__label { display: none; }

@media (max-width: 40rem) {
  /* The ring is inset:0 on the button now, so it follows the size
     without being told. */
  .film__play { width: 64px; height: 64px; }
  .film__play .ico { width: 24px; height: 24px; }
}

/* --------------------------------------------------------- stat strip -- */

.strip { background: var(--navy-lift); color: var(--on-dark); }
.strip__in {
  display: grid; gap: var(--s4);
  padding-block: var(--s5);
}
@media (min-width: 48rem) { .strip__in { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

.strip__i { display: flex; gap: var(--s3); align-items: flex-start; }
.strip__i .ico { color: var(--gold); margin-top: .15rem; }
.strip__h { font-family: var(--font-d); font-size: 1.15rem; color: var(--white); }
.strip__d { font-size: .97rem; color: var(--on-dark-mu); margin-top: .2rem; }

/* ---------------------------------------------------------- the split -- */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .split--lead { grid-template-columns: .9fr 1.1fr; } }
/* The reverse weighting, for a page whose left column is the reading
   column and whose right is a sidebar. */
@media (min-width: 60rem) { .split--text { grid-template-columns: 1.3fr .7fr; } }

/* ------------------------------------------------------------- cards -- */

.cards { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 46rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  /* A column, so .card__more can be pushed to the bottom and a row of
     cards with different amounts of text still lines its links up. */
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.card__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--navy); color: var(--gold);
  margin-bottom: var(--s4);
}
.card__h { margin-bottom: var(--s2); }
.card__d { color: var(--muted); font-size: 1rem; }

/* A card that is a link to a page. The whole card is clickable via the
   stretched pseudo-element on its heading link, so the markup stays a
   heading and a paragraph rather than an anchor wrapping a block. */
.card--link .card__h a { color: var(--navy); text-decoration: none; }
.card--link .card__h a::after { content: ""; position: absolute; inset: 0; }
.card--link:hover .card__h a { color: var(--gold-ink); }
.card__more {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: auto; padding-top: var(--s4); color: var(--gold-ink);
  font-weight: 600; font-size: .95rem;
}
.card--link:hover .card__more .ico { transform: translateX(4px); }
.card__more .ico { transition: transform .25s var(--ease); }

/* on dark bands */
.band--navy .card, .band--lift .card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
}
.band--navy .card__d, .band--lift .card__d { color: var(--on-dark-mu); }
.band--navy .card__ico, .band--lift .card__ico { background: var(--gold); color: var(--navy); }

/* ---------------------------------------------------------- numbered -- */

.vals { display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 60rem) { .vals { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

.val { position: relative; padding-top: var(--s5); border-top: 2px solid rgba(255, 255, 255, .16); }
.val__n {
  font-family: var(--font-d); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--gold);
  display: block; margin-bottom: var(--s3);
}
.val__h { margin-bottom: var(--s3); }
.val__d { color: var(--on-dark-mu); font-size: 1rem; }

/* --------------------------------------------------------- the quote -- */

.pull { position: relative; padding: var(--s6) 0 0; }
.pull__mark { color: var(--gold); width: 42px; height: 42px; margin-bottom: var(--s4); }
.pull__q {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1.25; color: var(--navy); max-width: 22ch;
}
.band--navy .pull__q, .band--lift .pull__q { color: var(--white); }
.pull__by { margin-top: var(--s4); color: var(--muted); font-size: .97rem; }
.band--navy .pull__by, .band--lift .pull__by { color: var(--on-dark-mu); }

/* ------------------------------------------------------- prose blocks -- */

.prose { display: grid; gap: var(--s5); margin-top: var(--s6); }
.prose__h { margin-bottom: var(--s2); }
.prose p { color: var(--muted); }
.band--navy .prose p { color: var(--on-dark-mu); }

/*
 * The editorial variant: heading in a narrow left column, text in a wider
 * right one, each block separated by a rule. A single stacked column left
 * the right half of these pages empty, because headings run full width
 * while paragraphs stop at the 64ch measure.
 */
.prose--split { gap: 0; }
.prose--split > div {
  display: grid; gap: var(--s3); align-items: start;
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
}
.prose--split > div:first-child { border-top: 0; padding-top: var(--s2); }
@media (min-width: 58rem) {
  .prose--split > div { grid-template-columns: .72fr 1.28fr; gap: var(--s7); }
}
.prose--split .prose__h { margin-bottom: 0; }
.prose--split p { font-size: var(--t-led); color: var(--ink); max-width: 60ch; }
.band--navy .prose--split > div { border-top-color: rgba(255,255,255,.14); }

/* list of plain points with a gold tick */
.ticks { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ticks li { position: relative; padding-left: 2.1rem; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 1.05rem; height: .55rem;
  border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
  transform: rotate(-45deg);
}
.band--navy .ticks li { color: var(--on-dark-mu); }

/* ----------------------------------------------------------- the dads -- */

.dads { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 60rem) { .dads { grid-template-columns: 1.15fr .85fr; gap: var(--s7); } }
.dads__card {
  padding: var(--s6);
  border: 2px solid var(--gold); border-radius: var(--r);
  background: rgba(200, 150, 46, .07);
}

/* -------------------------------------------------------------- forms -- */

.form { display: grid; gap: var(--s4); margin-top: var(--s6); max-width: 36rem; }
.field { display: grid; gap: var(--s2); max-width: none; }
.field label { font-weight: 600; color: var(--navy); font-size: .97rem; }
.req { color: var(--muted); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%; padding: .85em 1em;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }

/* Off-screen rather than display:none — a bot that renders CSS skips a
   hidden field, but fills one it can see in the DOM. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.callout {
  padding: var(--s4) var(--s5);
  border-left: 4px solid var(--gold);
  background: var(--bone); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: var(--s5);
}
.callout--err { border-left-color: #B3261E; background: #FDF1F0; }
.callout--ok  { border-left-color: #2E7D52; background: #F0F8F3; }
.callout p + p { margin-top: var(--s2); }

/* ------------------------------------------------------------ closer -- */

.closer__in { text-align: center; display: grid; justify-items: center; }
.closer__h { max-width: 18ch; }
.closer__in .lede { margin-inline: auto; }
.closer__act { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-top: var(--s6); }

/* ------------------------------------------------------------ footer -- */

.foot { background: var(--navy); color: var(--on-dark-mu); padding-block: var(--s7) var(--s5); }
.foot__in { display: grid; gap: var(--s6); }
@media (min-width: 52rem) { .foot__in { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); } }

.mark--foot { margin-bottom: var(--s4); }
.foot__line { color: var(--white); font-family: var(--font-d); font-size: 1.15rem; }
.foot__said { margin-top: var(--s3); color: var(--gold-soft); font-style: italic; }

.foot__h {
  color: var(--white); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s4);
}
.foot__col ul { display: grid; gap: var(--s2); }
/* The list links in a footer column. Scoped away from .btn: as a plain
   `.foot__col a` this out-specified `.btn { color: var(--btn-fg) }` and
   painted the gold "Book Brian" button's label in --on-dark-mu, which
   measures 1.31:1 against the gold fill. It should be navy, at 7.44:1. */
.foot__col a:not(.btn) { color: var(--on-dark-mu); text-decoration: none; }
.foot__col a:not(.btn):hover { color: var(--gold); }
.foot__mail { color: var(--gold) !important; font-weight: 600; word-break: break-word; }
.foot__note { margin: var(--s3) 0 var(--s4); font-size: .95rem; }

.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s7);
  padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .13);
}
.social { display: flex; flex-wrap: wrap; gap: var(--s2); }
.social__a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  color: var(--on-dark-mu);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social__a:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.foot__copy { font-size: .9rem; }

/* ========================================================================
   MOTION
   Two kinds: a staggered entrance in the hero, and sections that arrive as
   they are scrolled to. Both are additive — if the script never runs, or
   IntersectionObserver is missing, everything is simply visible.
   ======================================================================== */

[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Children can arrive in sequence after their section does. */
[data-reveal].is-in [data-stagger] { animation: rise .6s var(--ease) both; }
[data-stagger]:nth-child(1) { animation-delay: .05s; }
[data-stagger]:nth-child(2) { animation-delay: .14s; }
[data-stagger]:nth-child(3) { animation-delay: .23s; }
[data-stagger]:nth-child(4) { animation-delay: .32s; }

.hero__in > * { animation: rise .8s var(--ease) both; }
.hero__copy > * { animation: rise .8s var(--ease) both; }
.hero__copy > *:nth-child(1) { animation-delay: .06s; }
.hero__copy > *:nth-child(2) { animation-delay: .16s; }
.hero__copy > *:nth-child(3) { animation-delay: .26s; }
.hero__copy > *:nth-child(4) { animation-delay: .36s; }
.hero__film { animation-delay: .3s; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/*
 * Reduced motion. Duration AND delay are zeroed: with fill-mode both, a
 * delay alone leaves content invisible for the length of the delay, which
 * is exactly the failure this is meant to prevent.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- print -- */

@media print {
  .head, .foot, .closer, .film__cover, .btn, .skip { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   TESTIMONIALS
   A single quote is set large and centred — it is the only proof on the
   site, so it is given the room of a statement rather than tucked into a
   card. Two or more fall into the card grid instead.
   ========================================================================== */
.quote { margin: 0; }
.quote__mark { width: 40px; height: 40px; color: var(--gold); }

.quote--solo {
  display: grid; justify-items: center; text-align: center;
  margin-top: var(--s5);
}
.quote--solo .quote__mark { width: 52px; height: 52px; }

.quote__t {
  margin: var(--s5) 0 0;
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem);
  line-height: 1.22; letter-spacing: -.015em;
  color: var(--white); max-width: 22ch;
}
.quote--solo .quote__t { max-width: 20ch; }
.quote__t--sm {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  line-height: 1.35; max-width: none; margin-top: var(--s4);
}

/* A blockquote is quoted speech; the marks are drawn rather than typed so
   they cannot be read aloud as characters. */
.quote__t::before { content: "\201C"; }
.quote__t::after  { content: "\201D"; }

.quote__by { margin-top: var(--s5); display: grid; gap: .15rem; }
.quote--solo .quote__by { justify-items: center; }
.quote .quote__by { margin-top: auto; padding-top: var(--s4); }
.quote--solo .quote__by { margin-top: var(--s5); padding-top: 0; }

.quote__who {
  font-weight: 600; color: var(--gold);
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
}
.quote__role { color: var(--on-dark-mu); font-size: .95rem; }

/* With one quote the whole band is a centred statement, eyebrow included —
   a left-aligned label above centred type reads as two separate things. */
.quotes--solo .eyebrow { text-align: center; }

/* ==========================================================================
   PAGE FILMS
   One per page, directly under the page header. The .film player itself is
   already styled for the hero; this is only the band that carries it on the
   inner pages.
   ========================================================================== */
.filmband__in { display: grid; gap: var(--s5); }
@media (min-width: 62rem) {
  .filmband__in { grid-template-columns: .82fr 1.18fr; gap: var(--s7); align-items: center; }
}
.filmband__h { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem); }
.filmband__in .lede { margin-top: var(--s3); }
/* The band supplies the spacing; the player must not add its own. */
.filmband .film { margin-top: 0; }

/* .film__label is already defined with the hero player above. */

/* ==========================================================================
   THE ABOUT CARD (home teaser)
   The right column held a three-line quote beside a four-line heading, so
   most of it was empty. It is now a card carrying the quote and the four
   roles — which is what an "about" teaser is actually for.
   ========================================================================== */
.aboutcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6);
  box-shadow: var(--shadow);
}
.aboutcard__mark { width: 40px; height: 40px; color: var(--gold); }

.aboutcard__q {
  margin-top: var(--s4);
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.25; letter-spacing: -.015em;
  color: var(--navy); max-width: 20ch;
}
.aboutcard__by { margin-top: var(--s3); color: var(--muted); font-size: .97rem; }

.aboutcard__rule {
  height: 1px; border: 0; background: var(--line);
  margin: var(--s5) 0;
}

.aboutcard__roles { display: grid; gap: var(--s4); }
.aboutcard__roles li { display: grid; gap: .15rem; }
.aboutcard__role {
  font-family: var(--font-b); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink);
}
.aboutcard__line { color: var(--ink); font-size: 1rem; }

@media (min-width: 46rem) {
  /* Two across once there is room, so the card does not become a tall
     ladder beside a short heading. */
  .aboutcard__roles { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
}

/* ==========================================================================
   OUTCOMES (home: "What this is actually for")
   Heading and lede across the top, four outcomes in a row beneath. The old
   layout put a four-line heading beside an eight-line grid, so half the
   section was empty.

   No borders here on purpose. The offerings section above is already a row
   of bordered cards, and these are results rather than things you can buy,
   so they take a gold rule instead of a box.
   ========================================================================== */
.outhead { display: grid; gap: var(--s4); }
@media (min-width: 60rem) {
  .outhead { grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: end; }
}
.outhead__lede { margin-top: 0; max-width: 46ch; }

.outcomes { display: grid; gap: var(--s5); margin-top: var(--s7); }
@media (min-width: 46rem) { .outcomes { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); } }
@media (min-width: 68rem) { .outcomes { grid-template-columns: repeat(4, 1fr); } }

.outcome { padding-top: var(--s4); border-top: 3px solid var(--gold); }
.outcome__ico { display: block; color: var(--navy); margin-bottom: var(--s3); }
.outcome__ico .ico { width: 1.75rem; height: 1.75rem; }
/* Reserve two lines for the heading while these sit side by side.
   "Increased sales and client numbers" wraps and the other three do not,
   which left its paragraph starting lower than the rest of the row. */
.outcome__h { font-size: 1.15rem; margin-bottom: var(--s2); }
@media (min-width: 46rem) { .outcome__h { min-height: 2.6em; } }
.outcome__d { color: var(--muted); font-size: 1rem; }