/*
 * Brand: option S, Brushed Gold and Black (chosen by Mandy, November 2026).
 * Loaded last on every page, so these values replace the older palette.
 * The token names are kept from the old palette so every page keeps working:
 *   --coral-orange  is the main button colour, now black
 *   --sky-blue      is the accent for links, icons and borders, now a deep gold that passes contrast on light grounds
 *   --warm-yellow   is decorative gold, never used for text on a light ground
 * Headings: Cormorant Garamond Light, capitals. Labels, menu and buttons: Karla, capitals, wide spacing.
 * Body text stays the system font.
 */

:root {
  --coral-orange: #171614;
  --coral-orange-hover: #3a3732;
  --coral-orange-shadow: rgba(23, 22, 20, 0.18);
  --bright-blue: #171614;
  --bright-blue-hover: #3a3732;
  --sky-blue: #7a5f2e;
  --sky-blue-hover: #5f4822;
  --sky-blue-light: rgba(184, 151, 90, 0.14);
  --warm-yellow: #d4b87a;
  --warm-yellow-light: rgba(212, 184, 122, 0.18);
  --charcoal: #171614;
  --medium-gray: #5a5852;
  --light-gray: #eae8e3;
  --off-white: #f5f4f0;
  --pure-white: #ffffff;

  --gold: #d4b87a;
  --gold-deep: #b8975a;
  --pale-grey: #eae8e3;
  --serif: "Cormorant Garamond", Georgia, serif;
  --label: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Headings: thin serif capitals. Sized so the capitals match the height they had before. */
h1,
h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em !important;
  font-size-adjust: cap-height 0.7;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--charcoal);
}

h1 em,
h2 em {
  font-style: italic;
}

/* Capitals run wider than lower case, so the long Focus on Cash headline is set a little smaller */
.fc-hero-text h1 {
  font-size: clamp(27px, 4.4vw, 42px);
}

/* Question lines in the Focus on Cash answers list read as small titles: body font, like h3 */
.fc-faq-q {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
}

/* Logo */
.logo,
.footer-logo {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--charcoal);
}

/* Menu, buttons and small labels: Karla capitals with wide spacing */
.nav-link,
.nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-editorial,
.home-creds,
.hero-badge,
.fc-spots,
.fc-price-badge,
.fc-path-label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.nav-link,
.nav-cta {
  font-size: 13px;
  font-weight: 500;
}

/* Buttons: black pills */
.nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-editorial {
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 500;
}

.nav-menu .nav-cta,
.nav-cta,
.btn-primary,
.btn-secondary,
.btn-editorial {
  background: var(--coral-orange);
  color: var(--off-white);
  border-color: var(--coral-orange);
}

.nav-menu .nav-cta:hover,
.nav-cta:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-editorial:hover {
  background: var(--coral-orange-hover);
  border-color: var(--coral-orange-hover);
  color: var(--off-white);
}

/* On black bands the buttons turn gold with black text, as in option S */
.cta-section .btn-primary,
.section-dark .btn-primary,
.fc-final .btn-primary,
.bg-black-brushed .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}

.cta-section .btn-primary:hover,
.section-dark .btn-primary:hover,
.fc-final .btn-primary:hover,
.bg-black-brushed .btn-primary:hover {
  background: #e6cd94;
  border-color: #e6cd94;
  color: var(--charcoal);
}

/* Outline button for black bands: light outline and text */
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--off-white);
  border: 1px solid var(--off-white);
  text-decoration: none;
}

.btn-outline-light:hover {
  background: var(--off-white);
  color: var(--charcoal);
}

/* Links in text on black bands: gold */
.section-dark p a,
.cta-section p a,
.fc-final p a {
  color: var(--gold);
}

.section-dark p a:hover,
.cta-section p a:hover,
.fc-final p a:hover {
  color: #e6cd94;
}

/* Numbers that were coral on black bands: gold, so they stay visible */
.section-dark .fc-big-num.warn strong {
  color: var(--gold);
}

/* Portrait on the About page: an oval, like the brand shapes */
.hero-image img {
  border-radius: 50% !important;
}

/* Links inside text: deep gold, underlined so they never rely on colour alone */
main p a,
main li a {
  color: var(--sky-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

main p a:hover,
main li a:hover {
  color: var(--sky-blue-hover);
}

main p a.btn-primary,
main p a.btn-editorial {
  color: var(--off-white);
  text-decoration: none;
}

/* Outline buttons: black outline, black text */
.btn-ghost,
main p a.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
  text-decoration: none;
}

.btn-ghost:hover,
main p a.btn-ghost:hover {
  background: var(--charcoal);
  color: var(--off-white);
  border-color: var(--charcoal);
}

/* Round shapes for the small icon discs and step numbers */
.problem-icon,
.credential-icon,
.value-icon,
.outcome-icon,
.plan-number,
.success-icon {
  border-radius: 50% !important;
  background: var(--charcoal) !important;
  color: var(--gold) !important;
}

.problem-icon i,
.credential-icon i,
.value-icon i,
.outcome-icon i,
.success-icon i {
  color: var(--gold) !important;
}

/* Decorative left borders: brushed gold rather than blue */
.highlight-box,
.philosophy-card,
.fc-answer {
  border-left-color: var(--gold-deep) !important;
}

/* Keyboard focus ring: black, easy to see on light and gold grounds */
:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

/* On black bands and the footer the ring is gold, or it would vanish */
.cta-section :focus-visible,
.section-dark :focus-visible,
.fc-final :focus-visible,
.bg-black-brushed :focus-visible,
.banner-sphere :focus-visible,
.home-band-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold);
}

/* A focused light outline button keeps its light text (a shared a:focus rule turned it dark brown) */
.btn-outline-light:focus,
.btn-outline-light:focus-visible {
  color: var(--off-white);
}

/* "Skip to main content": hidden until a keyboard user reaches it */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--charcoal);
  color: var(--off-white);
}

.skip-link:focus {
  top: 16px;
}

::selection {
  background: rgba(212, 184, 122, 0.45);
  color: var(--charcoal);
}

/* Home page opening: the page colour, black type, the balanced stones (Mandy's pick, November 2026) */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  color: var(--charcoal);
  padding: 168px 24px 96px;
}

.home-hero-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 40px;
  align-items: center;
}

.home-hero .editorial-h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.08;
  margin-bottom: 24px;
  color: var(--charcoal);
}

.home-hero .home-creds {
  font-size: 13px;
  line-height: 1.9;
  color: var(--medium-gray);
  margin: 0;
}

.home-hero-shape {
  width: 100%;
  height: auto;
  display: block;
}

/* Metal backgrounds, ready for any section or band. Add the class to the section.
 * Light grounds (black text): bg-brushed-gold, bg-hammered-gold, bg-raw-gold, bg-champagne, bg-white-metal.
 * Dark ground (light text, gold buttons): bg-black-brushed. */
.bg-brushed-gold {
  background: var(--gold) url("/images/brushed-gold.webp") center / cover no-repeat;
}

.bg-hammered-gold {
  background: var(--gold) url("/images/hammered-gold.webp") center / cover no-repeat;
}

.bg-raw-gold {
  background: var(--gold) url("/images/raw-gold.webp") center / cover no-repeat;
}

.bg-champagne {
  background: #e6d6b2 url("/images/champagne-brushed.webp") center / cover no-repeat;
}

.bg-white-metal {
  background: #dedcd7 url("/images/white-metal-brushed.webp") center / cover no-repeat;
}

.bg-black-brushed {
  background: var(--charcoal) url("/images/black-brushed.webp") center / cover no-repeat;
  color: var(--off-white);
}

.bg-black-brushed h1,
.bg-black-brushed h2 {
  color: var(--off-white);
}

/* Banner pictures, ready for any band: the drawing sits on the right, so keep words on the left.
 * Light (black text): banner-stones, banner-contours, banner-torn, banner-portrait, banner-column, banner-monogram.
 * Dark (light text, gold buttons): banner-sphere. */
.banner-stones,
.banner-sphere,
.banner-monogram,
.banner-contours,
.banner-torn,
.banner-portrait,
.banner-column {
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-stones,
.banner-contours,
.banner-torn,
.banner-column {
  background-color: var(--off-white);
}

.banner-stones { background-image: url("/images/banners/stones.webp"); }
.banner-contours { background-image: url("/images/banners/contours.webp"); }
.banner-torn { background-image: url("/images/banners/torn.webp"); }
.banner-column { background-image: url("/images/banners/column.webp"); }
.banner-monogram { background-color: var(--gold); background-image: url("/images/banners/monogram.webp"); }
.banner-portrait { background-color: #e6d6b2; background-image: url("/images/banners/portrait.webp"); }

.banner-sphere {
  background-color: var(--charcoal);
  background-image: url("/images/banners/sphere.webp");
  color: var(--off-white);
}

.banner-sphere h1,
.banner-sphere h2 {
  color: var(--off-white);
}

.banner-sphere .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}

/* How I Work opening: survey lines on the right, words on the left.
 * The lines sit on a layer of their own so a phone can fade them behind the words. */
.hero.banner-contours {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: var(--off-white);
}

.hero.banner-contours::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/banners/contours.webp") right center / cover no-repeat;
  pointer-events: none;
}

.hero.banner-contours .hero-container {
  position: relative;
  max-width: 1200px;
  padding: 0 32px;
}

.hero.banner-contours h1,
.hero.banner-contours p {
  max-width: 600px;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1100px) {
  .hero.banner-contours::before {
    opacity: 0.35;
  }
}

@media (max-width: 640px) {
  .hero.banner-contours::before {
    background-position: 70% center;
  }

  .hero.banner-contours .hero-container {
    padding: 0 24px;
  }
}

/* A link to a spot on the page (the contact form, a skipped-to heading, a field with an
   error) lands below the 80px menu bar, not under it */
html {
  scroll-padding-top: 96px;
}

/* ==========================================================================
   Menu bar: the same on every page (2026-11-02). The markup is identical on all
   7 pages and the script is assets/js/menu.js. These rules override the older
   menu styles in premium-style-optimized.css and mobile-optimized.css, which
   only some pages load.
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  background: var(--pure-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  line-height: 1.5;
  transition: box-shadow 0.2s ease;
  /* An older stylesheet set will-change: backdrop-filter, which trapped the phone menu inside the 80px bar */
  will-change: auto;
}

.navbar.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.navbar .navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The name in the menu bar always stays on one line */
.navbar .logo {
  font-size: 24px;
  white-space: nowrap;
  text-decoration: none;
}

.navbar .nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar .nav-menu li {
  margin: 0;
}

/* The link holds its own tap area. Without this, on pages where the link was not positioned,
   the last link's tap area stretched over the whole menu bar and clicks went to the wrong page */
.navbar .nav-link {
  position: relative;
  display: inline-block;
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar .nav-link::after {
  display: none;
}

.navbar .nav-link:focus-visible,
.navbar .nav-link[aria-current="page"] {
  color: var(--sky-blue);
}

/* Hover only where there is a mouse, so the colour does not stay after a tap */
@media (hover: hover) {
  .navbar .nav-link:hover {
    color: var(--sky-blue);
  }
}

/* The current page is underlined as well as gold, so it does not rely on colour alone */
.navbar .nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

/* The menu button: at least 44px high, no jump on hover */
.navbar .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 12px 24px;
  font-size: 13px;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.navbar .nav-cta:hover,
.navbar .nav-cta:focus,
.navbar .nav-cta:active {
  transform: none;
  box-shadow: none;
}

/* The phone menu button: three lines that turn into a cross when the menu is open */
.navbar .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

/* Grey on hover only, so it does not stay grey after a tap (an older stylesheet greyed it on focus) */
.navbar .nav-toggle:focus {
  background: none;
}

@media (hover: hover) {
  .navbar .nav-toggle:hover {
    background: rgba(23, 22, 20, 0.05);
  }
}

.navbar .nav-toggle:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.navbar .nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar .nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar .nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navbar .nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* High contrast mode: the three lines would turn the same colour as the bar and vanish */
@media (forced-colors: active) {
  .navbar .nav-toggle span {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* No movement in the menu bar for people who turn motion off */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar *,
  .navbar *::before {
    transition-duration: 0.01ms !important;
  }
}

/* Phones and tablets: the menu opens full screen under the bar, with large rows.
   Six links and the button no longer fit on one line below 1024px (2026-11-13). */
@media (max-width: 1023px) {
  .navbar .logo {
    font-size: 20px;
  }

  .navbar .nav-toggle {
    display: flex;
  }

  .navbar .nav-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 24px;
    background: var(--pure-white);
    box-shadow: inset 0 1px 0 var(--light-gray);
    overflow-y: auto;
    transform: none;
    transition: none;
    z-index: 999;
  }

  .navbar .nav-menu.active {
    display: flex;
  }

  /* Each row is as wide as the panel, so the whole row can be tapped */
  .navbar .nav-menu li:not(:last-child) {
    width: 100%;
  }

  .navbar .nav-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    padding: 0 8px;
    font-size: 15px;
    border-bottom: 1px solid var(--light-gray);
  }

  .navbar .nav-menu .nav-cta {
    margin-top: 32px;
    min-height: 52px;
    padding: 14px 28px;
    font-size: 15px;
  }

  /* The page behind the open menu does not scroll */
  body.menu-open {
    overflow: hidden;
  }
}

/* Phones held sideways: shorter rows, so the button still fits on screen */
@media (max-width: 767px) and (max-height: 420px) {
  .navbar .nav-menu .nav-link {
    min-height: 48px;
  }

  .navbar .nav-menu .nav-cta {
    margin-top: 16px;
  }
}

/* Narrow laptops: the full menu is too wide, so the name, links and button shrink to fit on one line */
@media (min-width: 1024px) and (max-width: 1199px) {
  .navbar .logo {
    font-size: 18px;
    letter-spacing: 0.1em;
  }

  .navbar .nav-menu {
    gap: 16px;
    margin-left: 32px;
  }

  .navbar .nav-link,
  .navbar .nav-cta {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .navbar .nav-cta {
    padding: 10px 14px;
  }
}

/* Where the links sit in the bar: a taller tap area on each */
@media (min-width: 1024px) {
  .navbar .nav-link::before {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }
}

/* ==========================================================================
   Footer: the same on every page (2026-11-02)
   ========================================================================== */
.site-footer {
  background: var(--charcoal);
  color: var(--pure-white);
  padding: 72px 0 24px;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-footer-tagline {
  max-width: 600px;
  margin: 0 auto 40px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.3;
  text-align: center;
  color: var(--pure-white);
}

.site-footer-about {
  max-width: 600px;
  margin: 0 auto 48px;
  text-align: center;
}

.site-footer-about p {
  margin: 0 0 28px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pure-white);
}

.site-footer-about p:last-child {
  margin-bottom: 0;
}

.site-footer-about .site-footer-label {
  margin: 0 0 8px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer-bottom p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* Each legal link at least 44px tall */
.site-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer-legal a:hover {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (max-width: 640px) {
  .site-footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 24px;
  }

  .site-footer-legal {
    justify-content: center;
  }
}

/* Home contact band on torn gold: labels go black and errors deep red, so both read on the gold */
.banner-torn .editorial-form .form-label {
  color: var(--charcoal);
}

.banner-torn .editorial-form .form-error {
  color: #4a0d0d;
  font-weight: 600;
}

/* The tear sits three quarters of the way across and the form stays on the white (Mandy, 2026-11-13).
   The picture is drawn by a layer with the picture's own proportions, so its tear (60% of the way
   across the picture) lands at 75% of the band whatever the band's height. */
.banner-torn {
  position: relative;
  overflow: hidden;
  background-image: none;
}

.banner-torn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 75%;
  height: 100%;
  aspect-ratio: 2880 / 1120;
  transform: translateX(-60%);
  background: url("/images/banners/torn.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* The form sits at the left of the page's normal 1200px column, like every other section, so it
   never drifts to the far edge of a wide screen */
.banner-torn .editorial {
  position: relative;
  z-index: 1;
  margin-left: max(24px, calc((100% - 1200px) / 2 + 24px));
  margin-right: auto;
  max-width: min(640px, 72% - 24px);
}

/* Phones: no room for a tear beside the form, so the band is the page colour with a gold edge at the top */
@media (max-width: 767px) {
  .banner-torn::before {
    display: none;
  }

  .banner-torn {
    border-top: 6px solid var(--gold);
  }

  .banner-torn .editorial {
    margin-left: auto;
    max-width: 640px;
  }
}

/* ==========================================================================
   Design review fixes, 2026-11-13 (the audience pages, the home chooser, the live chart)
   ========================================================================== */

/* Small spaced-capital labels are 13px everywhere (DESIGN_SYSTEM.md), overriding the 12px in page styles */
.door-label,
.door-go,
.agreement h3,
.pull-quote figcaption,
.home-quotes figcaption,
.home-band .glance dt {
  font-size: 13px;
}

/* Card headings do not inherit the body's 1.7 line height */
.door h3,
.philosophy-card h3 {
  line-height: 1.3;
}

/* The three statements under the home opening break on whole phrases */
.home-values-list li {
  text-wrap: balance;
}

/* The home chooser: the whole row is the tap target, with a ring around it on focus */
.home-chooser-list li {
  position: relative;
}

.home-chooser-list a {
  min-height: 44px;
}

.home-chooser-list a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-chooser-list li:focus-within {
  outline: 2px solid var(--charcoal);
  outline-offset: 4px;
}

/* Narrow laptops: a little more room between the menu links */
@media (min-width: 1024px) and (max-width: 1100px) {
  .navbar .nav-menu {
    gap: 12px;
  }
}

/* The live Sales to Profit Flow: a ring on the block a keyboard reaches, a faded edge where it scrolls */
.fc-flow-node:focus {
  outline: none;
}

.fc-flow-node:focus-visible rect {
  stroke: var(--charcoal);
  stroke-width: 2px;
}

.fc-flow.is-scrolling {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.fc-flow.is-scrolling:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

/* People who turn motion off get everything in place at once */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade,
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .door {
    transition: none;
  }

  .door:hover {
    transform: none;
  }

  .fc-flow-link,
  .fc-flow-node {
    transition: none !important;
  }
}

/* ==========================================================================
   Design uplift, 2026-11-13: the gold back in the page. Eyebrow lines, the
   champagne band, the audience cards (shared by the home page and Work With
   Me), a gold quote mark on client quotes, hairlines through the lists.
   ========================================================================== */

/* A small deep-gold line above a headline, with a short gold rule */
.home-eyebrow,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-blue);
}

.home-eyebrow::before,
.hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold-deep);
}

.hero.banner-contours .hero-eyebrow {
  margin-left: 0;
}

/* The three statements under the home opening, on the champagne band, numbered in gold */
.home-values.bg-champagne {
  border-top: 0;
  border-bottom: 0;
}

.home-values .home-values-list {
  counter-reset: value;
  padding: 36px 24px;
  gap: 16px 56px;
}

.home-values .home-values-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  counter-increment: value;
}

.home-values .home-values-list li::before {
  content: counter(value, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--sky-blue);
}

/* The audience cards, on the home page and on Work With Me */
.doors {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.door {
  position: relative;
  display: block;
  padding: 32px 32px 28px;
  background: var(--pure-white);
  border-radius: 16px;
  border: 1px solid rgba(23, 22, 20, 0.08);
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.door::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 2px;
  background: var(--gold-deep);
  opacity: 0.7;
}

.door:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(23, 22, 20, 0.08);
  border-color: rgba(184, 151, 90, 0.5);
}

.door-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-blue);
}

.door h3 {
  margin-bottom: 12px;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 26px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--charcoal);
}

.door p {
  margin: 0 0 16px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--charcoal);
}

.door-go {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--gold-deep);
}

.home-chooser-inner .doors {
  margin-top: 8px;
}

/* Mandy's own one-line statements inside her prose (About, the audience pages): her words, not a quotation,
   so no quote marks and no rule; set in the serif like "Finding yours is the work." */
main .statement-line,
main .prose .prose-close {
  margin: 32px 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--charcoal);
}

/* Client quotes: the words carry their own quotation marks; the gold rule on the left is the only ornament */
.pull-quote blockquote,
.home-quotes blockquote {
  margin: 0;
}

/* Hairlines in gold through the offer and plan lists */
.home-offer dt,
.home-plan li + li,
.plan-list li + li {
  border-top: 1px solid rgba(184, 151, 90, 0.35);
}

.home-offer dt {
  padding-top: 20px;
}

@media (max-width: 767px) {
  .doors {
    grid-template-columns: minmax(0, 1fr);
  }

  .door {
    padding: 24px 24px 20px;
  }

  .door::before {
    left: 24px;
    right: 24px;
  }

  .door h3 {
    font-size: 22px;
  }

  .home-values .home-values-list {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Words for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Client videos on the About page: two across, one across on a phone */
.client-videos-intro {
  max-width: 640px;
  margin: -16px auto 40px;
  text-align: center;
  color: var(--medium-gray);
}

.client-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  max-width: 960px;
  margin: 0 auto;
}

.client-video {
  margin: 0;
}

.client-video-wide {
  grid-column: 1 / -1;
}

.client-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--charcoal);
}

.client-video figcaption {
  margin-top: 14px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--medium-gray);
  text-wrap: balance;
}

/* What happened next for each client, under the name: plain text, not capitals */
.client-video-note {
  display: block;
  margin-top: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .client-videos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Podcast episodes under the client videos: a quiet list of links */
.podcast-mentions {
  max-width: 960px;
  margin: 72px auto 0;
}

.podcast-mentions-label {
  margin: 0 0 8px;
  font-family: var(--label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--medium-gray) !important;
}

.podcast-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.podcast-list li {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--pale-grey);
}

.podcast-list li:last-child {
  border-bottom: 1px solid var(--pale-grey);
}

.podcast-show {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.podcast-list a {
  justify-self: start;
  color: var(--sky-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.podcast-list a:hover {
  color: var(--sky-blue-hover);
}

@media (max-width: 640px) {
  .podcast-list li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Client logo reel: one warm grey, moving slowly; still for people who turn motion off */
.client-reel {
  background: var(--pure-white);
  padding: 56px 0 64px;
  border-top: 1px solid var(--pale-grey);
  border-bottom: 1px solid var(--pale-grey);
}

.client-reel-head {
  max-width: 1080px;
  margin: 0 auto 36px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.client-reel .client-reel-label {
  font-family: var(--label) !important;
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-size-adjust: none;
  color: var(--medium-gray);
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.client-reel-toggle {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid #c9c6bf;
  border-radius: 999px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  cursor: pointer;
}

.client-reel-toggle:hover {
  border-color: var(--charcoal);
}

.client-reel-window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.client-reel-belt {
  display: flex;
  width: max-content;
  animation: client-reel 48s linear infinite;
}

.client-reel-window:hover .client-reel-belt,
.client-reel.is-paused .client-reel-belt {
  animation-play-state: paused;
}

.client-reel-list {
  display: flex;
  align-items: center;
  gap: 96px;
  padding: 0 96px 0 0;
  margin: 0;
  list-style: none;
}

.client-reel-list img {
  display: block;
  max-width: none;
  height: auto;
}

@keyframes client-reel {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-reel-toggle,
  .client-reel-list[aria-hidden="true"] {
    display: none;
  }

  .client-reel-window {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .client-reel-belt {
    animation: none;
    width: auto;
    justify-content: center;
  }

  .client-reel-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 56px;
    padding: 0 24px;
    max-width: 1080px;
  }
}

@media (max-width: 640px) {
  .client-reel {
    padding: 44px 0 48px;
  }

  .client-reel-list {
    gap: 48px;
    padding-right: 48px;
  }
}

/* Home page bands: light, black, pale grey, in turn, like the other pages */
.home-band .editorial {
  padding: 104px 24px;
}

.home-band-light {
  background: var(--off-white);
}

.home-band-pale {
  background: var(--pale-grey);
}

.home-band-dark {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}

.home-band-dark .editorial {
  position: relative;
  z-index: 1;
}

.home-band-dark .editorial-p {
  color: #e8e5de;
}

/* Thin gold ring behind the statement, echoing the opening panel */
.home-band-dark::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(212, 184, 122, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

/* The sentence the statement answers sits right above it, so "yours" has something to point at */
.home-band-dark .home-statement-lead {
  margin: 48px 0 0;
}

.home-statement {
  position: relative;
  margin-top: 24px;
  padding-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.1;
  color: var(--gold);
}

.home-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--gold);
}

.home-band .editorial-section-h,
.home-band .editorial-h2 {
  font-size: clamp(30px, 4.6vw, 44px);
  margin-top: 0;
  margin-bottom: 32px;
}

.home-band-pale .section-visual:first-child {
  margin-top: 0;
}

.home-band-pale .section-visual:last-child {
  margin-bottom: 0;
}

.home-band .dots-row {
  margin-bottom: 0;
}

/* Bio: a larger oval portrait beside the words */
.home-band .bio-row {
  gap: 40px;
  align-items: center;
}

.home-band .bio-avatar {
  width: 180px;
  height: 220px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 0 10px var(--off-white), 0 0 0 11px rgba(184, 151, 90, 0.45);
}

.home-band .bio-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* At a glance: the facts on a white card, labels in spaced capitals */
.home-band .glance {
  margin-top: 88px;
  border-top: 0;
  padding: 40px;
  background: var(--pure-white);
  border-radius: 24px;
}

.home-band .glance-h {
  font-size: 30px;
  color: var(--charcoal);
  margin-bottom: 28px;
}

.home-band .glance dt {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--medium-gray);
  line-height: 2.1;
}

.home-band .editorial-form .form-input,
.home-band .editorial-form .form-textarea {
  border: 1px solid #d9d6cf;
}

/* A clear black ring on the field in use, so it shows on gold too */
.home-band .editorial-form .form-input:focus-visible,
.home-band .editorial-form .form-textarea:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .home-band .editorial {
    padding: 72px 24px;
  }

  .home-band .bio-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .home-band .bio-avatar {
    width: 150px;
    height: 184px;
  }

  .home-band .glance {
    padding: 28px 22px;
  }

  .home-band-dark::after {
    width: 260px;
    height: 260px;
    right: -150px;
    bottom: -170px;
  }
}

@media (max-width: 960px) {
  .home-hero {
    padding: 128px 24px 64px;
  }

  /* Black, not grey, so the small line still reads over the faded stones */
  .home-hero .home-creds {
    color: var(--charcoal);
  }

  .home-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* On a smaller screen the stones sit faded behind the words, not on their own */
  .home-hero-inner > div {
    position: relative;
    z-index: 1;
  }

  .home-hero-shape {
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: min(440px, 100%);
    opacity: 0.3;
    pointer-events: none;
  }
}

/* ==========================================================================
   Page width (Mandy, 2026-11-13). The page column was 1200px and the menu bar
   with it, which left a wide screen mostly empty. Same widths as the Focus on
   Cash website: content 1400px, menu bar and full-width banners 1760px.
   Reading columns widen one step and stay under about 75 characters a line.
   Loaded last, so these override the widths written in each page.
   ========================================================================== */
:root {
  --page-width: 1400px;
  --page-width-wide: 1760px;
}

.container,
.site-footer-inner,
.home-hero-inner,
.home-values-list,
.client-reel-head,
.hero.banner-contours .hero-container {
  max-width: var(--page-width);
}

.navbar .navbar-container {
  max-width: var(--page-width-wide);
}

.doors,
.home-chooser-inner,
.client-videos,
.podcast-mentions {
  max-width: 1200px;
}

.editorial,
.editorial-hero-inner {
  max-width: 720px;
}

.banner-torn .editorial {
  margin-left: max(24px, calc((100% - var(--page-width)) / 2 + 24px));
  max-width: min(720px, 72% - 24px);
}

main .prose,
main .tried,
main .plan-list,
main .agreement,
main .founders,
main .cost,
main .facts,
main .steps,
main .pull-quote {
  max-width: 760px;
}

main .fit-container,
main .failure-content,
main .hero-container {
  max-width: 880px;
}

.hero.banner-contours h1,
.hero.banner-contours p,
.section-header p {
  max-width: 680px;
}

@media (max-width: 767px) {
  .banner-torn .editorial {
    margin-left: auto;
    max-width: 720px;
  }
}

/* ==========================================================================
   Home banner as a panel (Mandy, 2026-11-13, StoryBrand's own page as the
   example): a rounded black panel inside the wide frame, the words centred,
   one gold button, the client logos in the panel's foot. The stones sit faint
   at the right. Loaded last, so these override the banner styles in the page.
   ========================================================================== */
.home-hero.home-hero-panel {
  overflow: visible;
  padding: 96px 24px 0;
}

.home-hero-frame {
  max-width: var(--page-width-wide);
  margin: 0 auto;
}

.home-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 640px;
  padding: clamp(48px, 5vw, 80px) clamp(24px, 4vw, 48px) 0;
  border-radius: 24px;
  color: var(--off-white);
}

.home-panel .home-hero-shape {
  position: absolute;
  right: 3%;
  top: 46%;
  width: min(560px, 36%);
  transform: translateY(-55%);
  opacity: 0.6;
  pointer-events: none;
}

.home-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.home-hero-copy .home-eyebrow {
  margin-bottom: 24px;
  color: var(--gold);
}

.home-hero-copy .home-eyebrow::before {
  background: var(--gold);
}

.home-panel .editorial-h1 {
  max-width: 16ch;
  margin: 0 0 28px;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.04;
  color: var(--off-white);
}

.home-panel .home-lead {
  max-width: 640px;
  margin: 0 0 28px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(245, 244, 240, 0.82);
}

.home-panel .home-lead strong {
  font-weight: 600;
  color: var(--off-white);
}

.home-panel .home-creds {
  max-width: 640px;
  margin: 0 0 40px;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.home-panel .home-hero-actions {
  justify-content: center;
  gap: 16px 20px;
  margin-bottom: 48px;
}

.home-panel .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}

.home-panel .btn-primary:hover {
  background: #e6cd94;
  border-color: #e6cd94;
  color: var(--charcoal);
}

.home-panel .btn-ghost {
  color: var(--off-white);
  border-color: rgba(245, 244, 240, 0.55);
}

.home-panel .btn-ghost:hover {
  background: rgba(245, 244, 240, 0.08);
  border-color: var(--off-white);
  color: var(--off-white);
}

/* The logos, in the panel's foot */
.home-panel .client-reel {
  position: relative;
  z-index: 1;
  width: calc(100% + 2 * clamp(24px, 4vw, 48px));
  margin: auto calc(-1 * clamp(24px, 4vw, 48px)) 0;
  padding: 32px 0 40px;
  background: transparent;
  border-top: 1px solid rgba(245, 244, 240, 0.14);
  border-bottom: 0;
}

.home-panel .client-reel-label {
  margin: 0;
  color: rgba(245, 244, 240, 0.6);
}

.home-panel .client-reel-toggle {
  color: rgba(245, 244, 240, 0.6);
  border-color: rgba(245, 244, 240, 0.3);
}

.home-panel .client-reel-list img {
  filter: grayscale(1) invert(1) brightness(1.7);
  opacity: 0.85;
}

@media (max-width: 960px) {
  .home-hero.home-hero-panel {
    padding: 88px 16px 0;
  }

  .home-panel .home-hero-shape {
    position: absolute;
    right: -8%;
    top: 44%;
    width: min(440px, 70%);
    transform: translateY(-50%);
    opacity: 0.15;
  }
}

@media (max-width: 640px) {
  .home-hero.home-hero-panel {
    padding: 72px 0 0;
  }

  .home-panel {
    min-height: 0;
    padding-top: 56px;
    border-radius: 0;
  }

  .home-panel .home-hero-actions {
    margin-bottom: 48px;
  }
}

/* Client quotes as cards: a label, the words, then who said it */
.home-band .editorial-wide {
  max-width: 1200px;
}

.quote-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.quote-cards .quote-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--pale-grey);
  border-left: 1px solid var(--pale-grey);
  border-radius: 16px;
  background: var(--pure-white);
  box-shadow: 0 2px 12px rgba(23, 22, 20, 0.04);
}

.quote-chip {
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pale-grey);
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-blue);
}

.quote-cards blockquote {
  margin: 0 0 24px;
}

.quote-cards .quote-card p {
  margin: 0;
  font-size: 22px;
}

.quote-cards figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--pale-grey);
}

.quote-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pale-grey);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--charcoal);
}

@media (max-width: 767px) {
  .quote-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-cards .quote-card {
    padding: 24px;
  }
}

/* The same black panel opens the other pages (Mandy, 2026-11-13: "the other
   pages need similar banners"). Eyebrow, headline and lead centred, one gold
   button, the stones faint at the right. No logos here. */
.hero.hero-panel-section {
  padding: 96px 24px 0;
  background: var(--off-white);
  text-align: center;
}

.hero-frame {
  max-width: var(--page-width-wide);
  margin: 0 auto;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: clamp(64px, 7vw, 104px) clamp(24px, 4vw, 48px);
  border-radius: 24px;
  color: var(--off-white);
}

.hero-panel-shape {
  position: absolute;
  right: 3%;
  top: 50%;
  width: min(480px, 32%);
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.hero-panel-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

.hero-panel-copy .hero-eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  color: var(--gold);
}

.hero-panel-copy .hero-eyebrow::before {
  background: var(--gold);
}

.hero.hero-panel-section h1 {
  max-width: 18ch;
  margin: 0 0 24px;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.06;
  color: var(--off-white);
}

.hero.hero-panel-section .hero-panel-copy > p:not(.hero-eyebrow) {
  max-width: 680px;
  margin: 0 0 36px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(245, 244, 240, 0.82);
}

.hero-panel-actions {
  display: flex;
  justify-content: center;
}

.hero-panel .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 28px;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
  text-decoration: none;
}

.hero-panel .btn-primary:hover {
  background: #e6cd94;
  border-color: #e6cd94;
  color: var(--charcoal);
}

@media (max-width: 960px) {
  .hero.hero-panel-section {
    padding: 88px 16px 0;
  }

  .hero-panel-shape {
    right: -8%;
    width: min(400px, 65%);
    opacity: 0.15;
  }
}

@media (max-width: 640px) {
  .hero.hero-panel-section {
    padding: 72px 0 0;
  }

  .hero-panel {
    min-height: 0;
    padding: 56px 24px 56px;
    border-radius: 0;
  }
}

/* The About page banner: the panel split in two, words left and Mandy's photo right */
.hero-panel.hero-panel-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  text-align: left;
}

.hero-panel-split .hero-panel-copy {
  align-items: flex-start;
  margin: 0;
}

.hero.hero-panel-section .hero-panel-split h1 {
  margin-left: 0;
}

.hero.hero-panel-section .hero-panel-split .hero-panel-copy > p:not(.hero-eyebrow) {
  margin-bottom: 20px;
}

.hero-panel-split .hero-panel-actions {
  justify-content: flex-start;
  margin-top: 16px;
}

.hero-panel-split .hero-image {
  display: flex;
  justify-content: center;
}

.hero-panel-split .hero-image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 16px;
  box-shadow: none;
}

@media (max-width: 960px) {
  .hero-panel.hero-panel-split {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .hero-panel-split .hero-panel-copy {
    align-items: center;
  }

  .hero-panel-split .hero-panel-actions {
    justify-content: center;
  }

  .hero-panel-split .hero-image {
    order: -1;
  }

  .hero-panel-split .hero-image img {
    max-width: 220px;
  }
}

/* A two-question headline sits one question to a line (Boards page) */
.hero.hero-panel-section h1.hero-h1-wide {
  max-width: 28ch;
  font-size: clamp(32px, 4.2vw, 60px);
}

/* The Focus on Cash page opens the way the Focus on Cash website does (Mandy,
   2026-11-13): the live Sales to Profit Flow drawn across the black panel under
   a shade, the words centred on it, the advisor and owner switch above them. */
.hero.fc-hero-panel .hero-panel {
  min-height: 640px;
  padding: clamp(56px, 6vw, 88px) clamp(24px, 4vw, 48px);
  background: var(--charcoal);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-backdrop .fc-flow {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0.9;
}

.hero-backdrop svg {
  width: 100%;
  height: 100%;
}

.hero-backdrop .fc-flow.is-drawn .fc-flow-link {
  fill-opacity: 0.55;
}

.hero-backdrop .fc-flow-label {
  fill: var(--off-white);
}

.hero-backdrop .fc-flow-meta {
  fill: rgba(245, 244, 240, 0.6);
}

/* The middle stays dark so the words read; the chart shows at the sides */
.hero-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 48% 72% at 50% 50%,
    rgba(23, 22, 20, 0.94) 0%,
    rgba(23, 22, 20, 0.9) 50%,
    rgba(23, 22, 20, 0.6) 78%,
    rgba(23, 22, 20, 0.25) 100%
  );
}

@media (max-width: 1100px) {
  .hero-shade {
    background: rgba(23, 22, 20, 0.86);
  }
}

.fc-hero-copy {
  display: block;
  max-width: 880px;
}

.fc-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 28px;
  background: var(--off-white);
  border-radius: 999px;
}

.fc-switch .fc-picker-btn {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.fc-switch .fc-picker-btn.active {
  background: var(--charcoal);
  color: var(--off-white);
}

.fc-hero-copy .hero-eyebrow {
  margin: 0 0 24px;
  color: var(--gold);
}

.fc-hero-copy .hero-eyebrow::before {
  background: var(--gold);
}

.hero.fc-hero-panel h1 {
  max-width: 22ch;
  margin: 0 auto 24px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  color: var(--off-white);
}

.hero.fc-hero-panel .fc-hero-sub {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(245, 244, 240, 0.82);
}

.hero.fc-hero-panel .fc-hero-ctas {
  margin-bottom: 36px;
}

.hero.fc-hero-panel .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}

.hero.fc-hero-panel .btn-primary:hover {
  background: #e6cd94;
  border-color: #e6cd94;
  color: var(--charcoal);
}

.hero.fc-hero-panel .btn-ghost {
  color: var(--off-white);
  border-color: rgba(245, 244, 240, 0.55);
}

.hero.fc-hero-panel .btn-ghost:hover {
  background: rgba(245, 244, 240, 0.08);
  border-color: var(--off-white);
  color: var(--off-white);
}

.hero.fc-hero-panel .fc-hero-proof {
  border-top-color: rgba(245, 244, 240, 0.18);
}

.hero.fc-hero-panel .fc-hero-proof dt {
  color: var(--off-white);
}

.hero.fc-hero-panel .fc-hero-proof dd {
  color: rgba(245, 244, 240, 0.6);
}

.fc-flow.is-narrow .fc-flow-label {
  font-size: 11px;
}

.fc-flow.is-narrow .fc-flow-meta {
  font-size: 10px;
}

.fc-flow-section {
  padding-top: 48px;
}

@media (max-width: 640px) {
  .fc-switch .fc-picker-btn {
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* Review fixes (2026-11-13): the Focus on Cash page lays its opening out as a
   flex row, so the frame must be told to fill it; and every panel is black, so
   the keyboard ring is gold there (charcoal only on the off-white switch). */
.hero.hero-panel-section .hero-frame {
  width: 100%;
}

.hero-panel :focus-visible,
.home-panel :focus-visible {
  outline-color: var(--gold);
}

.fc-switch .fc-picker-btn:focus-visible {
  outline-color: var(--charcoal);
  outline-offset: -3px;
}