/* ==========================================================================
   RYZE Partners — site.css
   Design system. White background, brand colors as accents.
   Brand (locked): Navy #0D1030, Crimson #710930, Scarlet #B71023, Gold #D87538
   Fonts (brand): Montserrat Bold headers, Open Sans body.

   NO WEBFONTS ARE LOADED. There are deliberately no @font-face rules here.
   They used to point at /fonts/*.woff2, which were never committed, so every
   page view fired three 404s for files that could not arrive. Removed
   2026-07-22: zero font bytes, zero blocking requests, no layout shift.

   The brand names are still first in the stacks below, so anyone who happens
   to have Montserrat or Open Sans installed locally sees the real brand face
   at no network cost. Everyone else gets the system stack, which is what the
   site was designed and reviewed against.

   To go back to real webfonts, add the woff2 files to /fonts and restore the
   @font-face blocks (see /fonts/README.txt). Do both or neither: a rule
   without a file is worse than no rule at all.
   ========================================================================== */

:root {
  /* Brand palette (locked) */
  --navy: #0D1030;
  --crimson: #710930;
  --scarlet: #B71023;
  --gold: #D87538;

  /* Working neutrals */
  --ink: #14162e;           /* body text, slightly softer than pure navy */
  --muted: #565a72;         /* secondary text */
  --line: #e4e6ef;          /* hairlines */
  --paper: #ffffff;         /* page background */
  --wash: #f6f7fb;          /* section tint */
  --wash2: #eef0f7;         /* deeper tint */

  /* Type */
  --head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1120px;
  --gap: 24px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(13,16,48,.06), 0 8px 24px rgba(13,16,48,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; color: var(--navy); line-height: 1.14; margin: 0 0 .5em; letter-spacing: -0.01em; }
/* Even out heading line lengths instead of letting the last word orphan onto a
   line of its own. The About page's "...join our briefings." left "briefings."
   alone at 1280px, which reads as a mistake. Progressive enhancement: browsers
   without support just wrap normally, and the property is capped at a few lines
   so it never applies to body copy. */
h1, h2, h3, h4 { text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 4.4vw, 2.85rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1.1em; }
a { color: var(--scarlet); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; color: var(--navy); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--head); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; font-size: .72rem; color: var(--scarlet);
  margin: 0 0 14px;
}
/* The homepage hero eyebrow does a different job from every other eyebrow on
   the site. The rest are section labels; this one is an audience filter, the
   line that tells a cold visitor in one glance whether the page is for them.
   At the shared .72rem it was too small to do that before the H1 pulled the
   eye away. Scoped to its own class rather than widened on .eyebrow, which
   would resize every section label on every page. Tracking eased because
   .14em reads loose once the type is this size. */
.eyebrow-audience { font-size: 1.02rem; letter-spacing: .1em; margin-bottom: 18px; }

.lede { font-size: 1.22rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.fine { font-size: .78rem; color: var(--muted); }

/* ---- Buttons ---- */
.btn {
  display: inline-block; font-family: var(--head); font-weight: 700; font-size: 1rem;
  padding: 14px 26px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  text-decoration: none; line-height: 1.1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: #5b0726; box-shadow: 0 6px 18px rgba(113,9,48,.28); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-lg { padding: 17px 34px; font-size: 1.06rem; }
/* A full-width button does not need the 34px inline padding .btn-lg reserves
   for inline buttons, and that padding is what pushed "Enroll in FY27 Cohort 1"
   onto a second line inside the offer card at 375px. Vertical padding is left
   to .btn-lg. Declared after .btn-lg so it wins at equal specificity. */
.btn-block { display: block; width: 100%; text-align: center; padding-left: 18px; padding-right: 18px; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; font-family: var(--head); font-weight: 800; font-size: 1.15rem; color: var(--navy); letter-spacing: .02em; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--scarlet); }
/* Logo: 211x144 source rendered at 50px tall for 3x retina crispness.
   width/height attrs on the img reserve space so there is no layout shift. */
.brand img { height: 50px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--head); font-weight: 600; font-size: .95rem; color: var(--navy); }
.nav-links a:hover { color: var(--scarlet); text-decoration: none; }

/* The nav CTA is a button, but the two rules above outrank .btn-primary:
   `.nav-links a` is (0,1,1) and `.btn-primary` is only (0,1,0). So the button
   was drawing navy text on a crimson fill, which measures 1.57:1 against WCAG's
   4.5:1 minimum. Hover was worse again, turning the label scarlet on crimson.
   White restores 11.8:1.

   Deliberately scoped to colour only. Excluding .btn from the rules above would
   also fix it, but the button would then take .btn's own 700/1rem instead of
   the 600/.95rem it inherits today, resizing the nav nobody asked to resize. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: #fff; }
.nav-cta { margin-left: 4px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .2s; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 78px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px; box-shadow: var(--shadow); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 14px 0 0; }
  .nav-cta a { display: inline-block; }
}

/* ---- Sections ---- */
section { padding: 72px 0; }
.section-tint { background: var(--wash); }
.section-navy { background: var(--navy); color: #cfd2e6; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lede, .section-navy .muted { color: #b9bdd6; }
.section-navy .eyebrow { color: var(--gold); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Hero ---- */
.hero { padding: 92px 0 78px; }
.hero h1 { max-width: 18ch; }
.hero .lede { margin: 20px 0 30px; }
/* Deliberately a vertical stack at every width, not a row that wraps. The two
   groups are different heights (the assessment door carries meta text the
   call door doesn't), so a row+wrap layout only lines up by accident at some
   widths and produces an oddly-centered "or" at others. A column sidesteps
   that: "or" always sits as its own line between two left-aligned doors. */
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hero-cta-q { font-size: .82rem; color: var(--muted); }
.hero-cta-or { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero-cta-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: .84rem; color: var(--muted); }
.hero-cta-meta b { color: var(--navy); font-weight: 700; }
.hero-meta { margin-top: 26px; display: flex; gap: 26px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.hero-meta b { color: var(--navy); font-weight: 700; }

/* Two-column hero: copy left, proof panel right.
   The right column carries evidence rather than decoration, so the
   whitespace does persuasive work instead of sitting empty. */
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero-grid .hero-cta { margin-bottom: 0; }
.hero-proof {
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; border-top: 3px solid var(--crimson);
}
.hero-proof .proof-kicker {
  font-family: var(--head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .7rem; color: var(--crimson); margin: 0 0 18px;
}
/* The hero panel now carries a quote instead of stats. .hero-proof is already
   a bordered, tinted card, so the .testimonial inside it drops its own chrome
   rather than nesting a card in a card. Everything else about the component
   (caption layout, avatar size, name and role type) is inherited unchanged. */
.hero-proof .testimonial {
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; padding: 0; max-width: none;
}
.hero-proof .testimonial blockquote { font-size: 1.14rem; line-height: 1.5; }

.proof-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.proof-item:last-of-type { border-bottom: 0; }
.proof-item .proof-num {
  font-family: var(--head); font-weight: 800; font-size: 2rem; color: var(--navy); line-height: 1.05;
}
.proof-item p { margin: 4px 0 0; font-size: .93rem; color: var(--muted); line-height: 1.5; }
.hero-proof .proof-note { margin: 16px 0 0; font-size: .74rem; color: var(--muted); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- Icon chips (hero meta on program + assessment pages) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font-family: var(--head); font-weight: 700;
  font-size: .82rem; color: var(--navy);
}
.chip svg { width: 16px; height: 16px; stroke: var(--crimson); fill: none; stroke-width: 2; flex: 0 0 auto; }

/* ---- Calendly inline embed ----
   Calendly needs real width to lay the calendar and the time slots out side by
   side. Squeezed into a narrow column it falls back to a tall, cramped layout
   with its own inner scrollbar, so this always runs full width of the wrap.
   Heights are set here because the widget does not size its own container. */
.calendly-wrap {
  /* A definite height, not just min-height: the injected iframe sizes to its
     parent, and a min-height-only parent leaves it 0 tall. */
  height: 700px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #fff;
}
.calendly-wrap iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }
.calendly-wrap .cal-fallback {
  height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; flex-direction: column; gap: 6px;
}
@media (max-width: 820px) {
  /* Stacked layout is taller, so give it room instead of an inner scrollbar */
  .calendly-wrap { height: 1040px; }
}
/* Idle state, before the visitor asks for the calendar. The box holds only a
   button, so the fixed heights above would leave 700px (1040px on mobile) of
   empty panel. Two classes beats one, so this wins at either viewport without
   needing !important or a duplicate media query. */
.calendly-wrap.is-idle { height: auto; }
.calendly-wrap.is-idle .cal-fallback { padding: 40px 24px; gap: 12px; }

/* ---- Report archive issue list ---- */
.year-head { margin: 0 0 14px; }
.year-head + .issues { margin-bottom: 40px; }
.issues {
  list-style: none; margin: 0; padding: 0;
  /* auto-fill rather than auto-fit: a short year (2025 has 11) keeps the same
     column width as a long one instead of stretching to fill the row. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.issues a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--ink);
}
.issues a:hover, .issues a:focus-visible { border-color: var(--scarlet); }
.issue-date { font-family: var(--head); font-weight: 600; font-size: .95rem; }
.issue-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 auto;
}

/* ---- Avatar (photo, or initials when no image is supplied) ---- */
.avatar {
  width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.person-head h3 { margin: 0 0 2px; }
.person-head .role {
  font-family: var(--head); font-weight: 700; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crimson);
}

/* ---- Date badge (events) ---- */
.date-badge {
  flex: 0 0 auto; width: 78px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; text-align: center; background: #fff;
}
.date-badge .m {
  background: var(--crimson); color: #fff; font-family: var(--head); font-weight: 700;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 0;
}
.date-badge .d { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--navy); padding: 6px 0 8px; }

/* Upcoming event card: date badge left, everything else right. Stacks below
   640px, where 78px of badge beside a headline leaves too little for either. */
.event-next { display: flex; gap: 22px; align-items: flex-start; border-top: 3px solid var(--crimson); }
.event-next h2 { margin: 0 0 8px; font-size: 1.6rem; }
.event-next .event-meta {
  font-family: var(--head); font-weight: 700; font-size: .9rem;
  color: var(--crimson); margin: 0 0 14px;
}
@media (max-width: 640px) { .event-next { flex-direction: column; gap: 16px; } }

/* ---- Grids & cards ---- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 8px; }
.card .tag { font-family: var(--head); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--scarlet); font-weight: 700; }
.card p:last-child { margin-bottom: 0; }

/* Path cards (home router) */
.path { display: flex; flex-direction: column; }
.path .kicker { font-family: var(--head); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--scarlet); font-weight: 700; margin-bottom: 10px; }
.path h3 { font-size: 1.35rem; }
.path .price { font-family: var(--head); font-weight: 700; color: var(--navy); margin: 6px 0 12px; }
.path .btn { margin-top: auto; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 20px; }
.step { position: relative; padding: 24px 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step .n { font-family: var(--head); font-weight: 800; color: var(--scarlet); font-size: .85rem; letter-spacing: .08em; }
.step h3 { margin: 8px 0 6px; }
.step p { margin: 0; color: var(--muted); }

/* For / not for */
.list { list-style: none; padding: 0; margin: 16px 0 0; }
.list li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); }
.list li:before { content: ""; position: absolute; left: 4px; top: 18px; width: 10px; height: 10px; border-radius: 50%; }
.list.yes li:before { background: var(--crimson); }
.list.no li:before { background: #c2c5d4; }

/* Proof strip */
/* ---- Guest roster (About) ----
   Names and affiliations only, on a hairline grid, so it reads as a roster
   rather than a wall of testimonials. Nobody on it has endorsed RYZE; they
   appeared on a briefing, and the styling should not overstate that. */
.guests {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.guests li { background: #fff; padding: 18px 20px; }
.guests strong {
  display: block; font-family: var(--head); font-weight: 700;
  color: var(--navy); font-size: .98rem;
}
.guests span { display: block; color: var(--muted); font-size: .85rem; margin-top: 3px; }
@media (max-width: 780px) { .guests { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .guests { grid-template-columns: 1fr; } }

.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proof .stat { text-align: center; }
.proof .num { font-family: var(--head); font-weight: 800; font-size: 2.4rem; color: var(--navy); line-height: 1; }
.proof .lbl { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* ---- Comparison table ----
   This is the stakes section, the pivot between "here is your problem" and
   "here are your options", so it earns more than hairline rows. Three devices
   do the work: the "with" column is lifted onto a white panel so the eye lands
   on the destination state, each cell carries a mark so the contrast reads
   before the words do, and the rows arrive on a stagger as the table scrolls
   into view. Separate borders rather than collapsed, so the panel can have
   rounded corners. */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 28px; }
.compare th, .compare td { text-align: left; padding: 16px 18px; vertical-align: top; }
.compare thead th {
  font-family: var(--head); color: var(--navy); font-size: .95rem;
  padding-bottom: 14px; letter-spacing: -0.01em;
}
.compare tbody td { border-top: 1px solid var(--line); }
.compare tbody tr:first-child td { border-top: 0; }
.compare tbody td:first-child { font-family: var(--head); color: var(--navy); }

/* The destination column, lifted off the tint as a panel. */
.compare th:last-child, .compare td:last-child { background: #fff; }
.compare th:last-child {
  border-top: 3px solid var(--crimson);
  border-radius: var(--radius) var(--radius) 0 0;
  padding-top: 14px;
}
.compare tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.compare tbody td:last-child { border-top-color: var(--wash2); }

.compare .with { color: var(--navy); font-weight: 600; }
.compare .without { color: var(--muted); }

/* Marks carry the contrast before the sentence is read. Pseudo-elements so no
   markup repeats them five times, and aria-hidden by nature: generated content
   is not announced by screen readers, which already get the column headers. */
.compare .without:before, .compare .with:before {
  display: inline-block; width: 1.15em; font-weight: 700;
  font-family: var(--head); margin-left: -0.15em;
}
.compare .without:before { content: "\00d7"; color: #b9bcc9; }
.compare .with:before { content: "\2713"; color: var(--crimson); }

.compare tbody tr:hover td { background-color: rgba(13,16,48,.022); }
.compare tbody tr:hover td:last-child { background-color: #fff; }

/* Each row rises as it scrolls into view, driven by the scroll position
   itself rather than by JavaScript. Every row has its own view() timeline, so
   they arrive one after another as you move down the table, which is the
   stagger without a single line of script or a setTimeout to tune.

   The whole thing sits inside @supports on purpose. The rule that hides a row
   only exists in browsers that can also run the animation that reveals it, so
   there is no combination of support, script failure or scroll behaviour that
   can leave this table blank. Browsers without scroll-driven animations, which
   today is Safari and Firefox, simply get the static design.

   A row already on screen at load is past its animation range, so it renders
   in the final state rather than waiting for a scroll that never comes. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .compare tbody tr > * {
      animation: cmp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes cmp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Three columns on a phone is tight, and the roomier desktop padding pushed
   the table past its scroll container, so it scrolled sideways inside the
   section. Trimming the horizontal padding brings it back inside 327px at
   375px wide, which is every common phone. */
@media (max-width: 680px) {
  .compare th, .compare td { padding: 13px 9px; }
  .compare thead th { font-size: .86rem; }
  .compare .without:before, .compare .with:before { width: 1em; margin-left: -0.1em; }
}
/* Scroll container for the wider tables on the privacy policy. Four columns of
   prose will not fit a phone, and the page body must never scroll sideways, so
   the table scrolls inside its own box instead. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap .compare { min-width: 520px; }
.tablewrap .compare td, .tablewrap .compare th { font-size: .93rem; }

/* ---- Forms ---- */
.formwrap { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
label { display: block; font-family: var(--head); font-size: .82rem; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
input, select, textarea {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1rem; font-family: var(--body);
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--scarlet); box-shadow: 0 0 0 3px rgba(183,16,35,.12); }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.consent input { width: auto; margin-top: 5px; }
.consent label { font-family: var(--body); font-weight: 400; font-size: .82rem; color: var(--muted); }

/* Checkbox and radio groups inside a form (Council role and firm type).
   fieldset carries browser default border, padding and margin that do not match
   the .field rhythm, so all three are reset rather than overridden piecemeal. */
.optgroup { border: 0; padding: 0; margin: 0 0 18px; }
.optgroup legend {
  padding: 0; margin-bottom: 8px;
  font-family: var(--head); font-weight: 600; font-size: .92rem; color: var(--navy);
}
.optgroup label {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px;
  font-family: var(--body); font-weight: 400; font-size: .95rem; color: var(--ink);
  cursor: pointer;
}
/* width:auto undoes the global full-width rule on inputs, which would otherwise
   stretch each tick box across the whole row. */
.optgroup input { width: auto; margin: 4px 0 0; flex: 0 0 auto; }
.form-success { display: none; text-align: center; padding: 10px; }
.form-success.show { display: block; }

/* ---- FAQ accordion (native details/summary, no JS) ----
   Used on the homepage and the Accelerator page. Native <details> means it is
   keyboard accessible and works before any script runs. */
.faq { margin-top: 30px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  font-family: var(--head); font-weight: 700; color: var(--navy);
  font-size: 1.02rem; padding: 18px 22px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after {
  content: "+"; flex: 0 0 auto; font-family: var(--head); font-weight: 700;
  font-size: 1.3rem; color: var(--crimson); line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary:after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq summary:focus-visible { outline: 3px solid rgba(183,16,35,.35); outline-offset: -3px; }
.faq .faq-a { padding: 16px 22px 20px; color: var(--ink); }
.faq .faq-a p { margin: 0 0 10px; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ---- Testimonial / named proof ----
   Named client quotes. Two sizes: the default band carries a page's main
   quote, .t-sm sits inside an existing section (the proof strips) without
   outweighing the numbers next to it. Works on white, on .section-tint and
   on .section-navy, so one component covers every placement on the site.
   Attribution is required markup, not optional: an unattributed quote is the
   anonymized proof this component exists to replace. */
.testimonial {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--crimson);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 34px 38px;
  box-shadow: var(--shadow); max-width: 74ch; margin: 0;
}
.testimonial blockquote {
  margin: 0; font-family: var(--head); font-weight: 600; color: var(--navy);
  font-size: 1.28rem; line-height: 1.45; letter-spacing: -0.01em;
}
.testimonial blockquote p { margin: 0 0 .62em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial figcaption {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
}
.testimonial .t-name { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: .98rem; line-height: 1.3; }
.testimonial .t-role { display: block; font-family: var(--body); font-weight: 400; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.testimonial.t-sm { padding: 26px 28px; }
.testimonial.t-sm blockquote { font-size: 1.06rem; }
.testimonial.t-sm figcaption { margin-top: 18px; padding-top: 14px; }
/* Initials avatar at the caption scale. The 88px default is a bio-card size
   and swamps a quote. */
.testimonial .avatar { width: 52px; height: 52px; font-size: 1.02rem; }

.section-navy .testimonial {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
  border-left-color: var(--gold); box-shadow: none;
}
.section-navy .testimonial blockquote { color: #fff; }
.section-navy .testimonial figcaption { border-top-color: rgba(255,255,255,.14); }
.section-navy .testimonial .t-name { color: #fff; }
.section-navy .testimonial .t-role { color: #b9bdd6; }
.section-navy .testimonial .avatar { background: var(--gold); color: var(--navy); box-shadow: none; }

@media (max-width: 680px) {
  .testimonial { padding: 26px 24px; }
  .testimonial blockquote { font-size: 1.12rem; }
}

/* ---- Callout / disclaimer boxes ---- */
.callout { border-left: 4px solid var(--gold); background: var(--wash); padding: 18px 22px; border-radius: 0 10px 10px 0; margin: 24px 0; }
.callout p:last-child { margin-bottom: 0; }
.disclaimer { font-size: .82rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 16px 18px; margin-top: 20px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--crimson); border: 1px solid rgba(113,9,48,.3); border-radius: 999px; padding: 6px 14px; }

/* ---- Pricing (PAM) ---- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.plan.featured { border-color: var(--crimson); border-width: 2px; }
.plan .amount { font-family: var(--head); font-weight: 800; font-size: 2.2rem; color: var(--navy); }
.plan .per { color: var(--muted); font-size: .9rem; }
.plan .band { font-family: var(--head); font-weight: 700; color: var(--scarlet); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; margin-bottom: 10px; }

/* ---- Archive / events lists ---- */
.stack { display: grid; gap: 14px; margin-top: 24px; }
.rowitem { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rowitem .meta { color: var(--muted); font-size: .88rem; }
.month-head { font-family: var(--head); font-weight: 700; color: var(--navy); margin: 26px 0 10px; }
.pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pdf-grid a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); font-weight: 600; font-size: .92rem; }
.pdf-grid a:hover { border-color: var(--scarlet); text-decoration: none; }

/* ---- Footer ---- */
/* The footer and .section-navy are both var(--navy), and on 8 of 11 pages the
   last thing before the footer IS a .section-navy CTA. Without this rule the
   two run together as one continuous navy slab with no boundary at all, so the
   footer reads as more CTA rather than as the end of the page. The hairline is
   the same value used by .footer-bottom below, for one consistent divider
   weight throughout the footer. */
.site-footer { background: var(--navy); color: #aeb2d0; padding: 56px 0 34px; border-top: 1px solid rgba(255,255,255,.12); }
.site-footer a { color: #d7d9ea; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; font-size: .92rem; }
/* The real reversed wordmark, not a text imitation of it. This used to be the
   string "RYZE Partners" with "Partners" set in gold, which was an off-brand
   stand-in for a logo that already exists as a white-on-transparent asset.
   Source: ../Brand Assets/RYZE-Logo-White.png, resized to 211x144 and served
   at 44px tall, so the render is ~3x for retina. */
.footer-brand { line-height: 0; }
.footer-brand img { height: 44px; width: auto; }
.footer-newsletter input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.footer-newsletter input::placeholder { color: #9195b8; }
/* The consent copy is required on the dark footer, so it needs its own colour:
   var(--muted) is tuned for the white pages and goes near-invisible here. */
.footer-newsletter .consent { margin: 10px 0 12px; }
.footer-newsletter .consent label { color: #9195b8; font-size: .76rem; line-height: 1.45; }
.footer-newsletter .consent label a { color: #c8cbe4; text-decoration: underline; }
.footer-newsletter .consent input { accent-color: var(--scarlet); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #8d92b6; }
.social { display: flex; gap: 16px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  section { padding: 52px 0; }
  .hero { padding: 60px 0 50px; }
  .grid-2, .grid-3, .grid-4, .pricing, .proof { grid-template-columns: 1fr; }
  .field-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .rowitem { flex-direction: column; align-items: flex-start; }
}

/* ---- Utilities ---- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.maxw-60 { max-width: 60ch; }
.hidden { display: none; }

/* ---- PAM page portrait ----
   Used only by /pam. The hero reuses the shared .hero-grid (which already
   collapses to one column at 900px), so this adds nothing but the sizing of
   the cutout itself. Scoped class on purpose: no other page has a portrait
   in the hero, and widening an existing selector would reach pages that do
   not want it. */
.pam-portrait { display: flex; justify-content: center; align-items: flex-end; }
.pam-portrait img { width: 100%; max-width: 380px; height: auto; }
@media (max-width: 900px) { .pam-portrait img { max-width: 280px; } }

/* PAM page: three pillars as plain columns.
   The section is a recap of points made above it, so it carries a hairline
   rule instead of card chrome. Without this the page runs four card grids
   back to back and the reader stops telling the sections apart. */
.pillars > div { border-top: 2px solid var(--scarlet); padding-top: 14px; }
.pillars h3 { font-size: 1.06rem; margin-bottom: 6px; }
.pillars p { margin: 0; color: var(--muted); font-size: .95rem; }