/* CYGNVS Resilience Benchmark Hub. Built from the design handoff (README + prototype), scoped under
   .rbh so nothing here reaches the rest of the site. Light only: the site has no dark mode.
   Breakpoints follow README section 5: viewport media queries where the README names a viewport,
   container queries where a layout depends on the width of its own box. */

/* page.php wraps the_content in a `mx-auto max-w-4xl px-6 py-16 prose` section. Let the hub run full
   bleed; the theme token owns the gap under the fixed nav (published in inc/enqueue.php). */
.prose:has(.rbh){max-width:none;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){html:has(.rbh){scroll-behavior:auto}}

.rbh{
  font-family:"42dot Sans Variable",-apple-system,"Segoe UI",sans-serif;
  color:#0B2346;line-height:normal;text-align:left;
  /* The theme clearance runs past the fixed nav; paint that band navy so it reads as the top of the hero. */
  background:linear-gradient(#0B2346,#0B2346) top/100% var(--cyg-header-clear, 110px) no-repeat,#fff;
  padding-top:var(--cyg-header-clear, 110px);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
@media (max-width:640px){
  .rbh{padding-top:var(--cyg-header-clear-sm, 92px);
    background:linear-gradient(#0B2346,#0B2346) top/100% var(--cyg-header-clear-sm, 92px) no-repeat,#fff}
}
/* In-page jumps (#report, #score). From 768px (and taller than 500px) the sticky announcement bar stays on
   screen above the nav, so its height (--ah) is added; elsewhere the bar scrolls away and the nav pins at top:0. */
@media (max-width:767px),(max-height:500px){.rbh .rbh-report,.rbh .rbh-score{scroll-margin-top:var(--cyg-header-clear-sm, 92px)}}
.rbh *,.rbh *::before,.rbh *::after{box-sizing:border-box}
.rbh :is(h1,h2,h3,p,figure,blockquote){margin:0}
/* Balance headings as the README asks, except where the prototype (the source of truth) does not. */
.rbh :is(h1,h2,h3){text-wrap:balance}
.rbh .rbh-score .rbh-h2-lg,.rbh .rbh-report .rbh-h2-lg{text-wrap:wrap}
.rbh p{text-wrap:pretty}
.rbh a{color:#219A7C;text-decoration:none}
@media (hover:hover){.rbh a:hover{color:#227F66}}
.rbh :is(.rbh-emerald){color:#1CC695}
.rbh :is(.rbh-jade){color:#219A7C}
.rbh .rbh-nowrap{white-space:nowrap}
.rbh .rbh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Pill buttons ---------- */
.rbh .rbh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;
  font-size:15px;font-weight:700;line-height:20px;white-space:nowrap;flex-shrink:0;text-decoration:none;
  transition:background-color 160ms cubic-bezier(0.2,0,0,1)}
.rbh .rbh-btn--jade{background:#1CC695;color:#0B2346}
.rbh .rbh-btn--navy{background:#0B2346;color:#fff}
@media (hover:hover){
  .rbh .rbh-btn--jade:hover{background:#53AB91;color:#0B2346}
  .rbh .rbh-btn--navy:hover{background:#213354;color:#fff}
}
.rbh .rbh-btn:focus-visible{outline:2px solid #1CC695;outline-offset:3px}
.rbh .rbh-btn--navy:focus-visible{outline-color:#219A7C}

/* ---------- Announcement bar ---------- */
.rbh-ann{background:#219A7C;color:#fff;font-size:14px;line-height:20px;letter-spacing:.25px;padding:10px 24px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}
.rbh-ann__label{font-weight:600}
.rbh-ann__dot{opacity:.9}

/* ---------- Hero ---------- */
.rbh-hero{position:relative;overflow:hidden;background:#0B2346;color:#fff}
.rbh .rbh-hero__mark{position:absolute;right:-6%;top:-18%;height:138%;width:auto;max-width:none;opacity:.05;pointer-events:none}
.rbh-hero__grid{position:relative;max-width:1240px;margin:0 auto;padding:56px 24px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:end;container:rbh-hero/inline-size}
.rbh-hero__grid > *{min-width:0}
.rbh-hero__copy{padding-bottom:104px;display:flex;flex-direction:column;gap:28px;width:fit-content;max-width:100%}
/* Non-breaking spaces in the markup keep each dot with the word before it when this wraps on phones. */
.rbh-hero__eyebrow{font-size:19px;font-weight:600;letter-spacing:1.8px;color:#1CC695;white-space:nowrap}
.rbh .rbh-hero__title{width:max-content;max-width:100%;font-size:clamp(48px,6.4vw,88px);line-height:1.12;font-weight:800;letter-spacing:-2.8px;color:#fff}
.rbh-hero__title > span{white-space:nowrap}
/* The paragraph takes the H1's rendered width: zero width, then stretch to the fit-content column. */
.rbh-hero__lede{width:0;min-width:100%;font-size:21px;line-height:32px;color:#D6DAE3}
.rbh-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.rbh-hero__aside{position:relative;align-self:stretch;min-height:460px}
/* The right column is empty (reserved for a future hero visual). Hide it once the grid stacks. */
@container rbh-hero (max-width:935.98px){.rbh-hero__aside{display:none}}

/* ---------- Why this matters now ---------- */
.rbh-why{background:#fff}
.rbh-why__in{max-width:1240px;margin:0 auto;padding:128px 24px;display:flex;flex-direction:column;gap:72px}
.rbh-why__intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px 80px;align-items:center}
.rbh-why__intro > *{min-width:0}
.rbh .rbh-h2-xl{font-size:clamp(40px,5.4vw,72px);line-height:1.04;font-weight:800;letter-spacing:-2px}
.rbh-why .rbh-h2-xl{color:#0B2346}
.rbh-why__lede{font-size:22px;line-height:32px;font-weight:500;color:#0B2346}
.rbh-shifts{display:flex;flex-direction:column;gap:40px}
.rbh .rbh-shifts__title{font-size:clamp(28px,3vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.8px;color:#0B2346}
/* Explicit columns, not auto-fit: auto-fit leaves a 2 + 1 orphan between about 700 and 1040px. */
.rbh-shifts__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px 48px}
@media (min-width:1024px){.rbh-shifts__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rbh-shift{display:flex;flex-direction:column;gap:28px;min-width:0}
.rbh-shift__head{display:flex;flex-direction:column;gap:12px}
.rbh-shift__label{font-size:15px;font-weight:700;letter-spacing:1.6px;color:#219A7C}
.rbh .rbh-shift h3{font-size:24px;line-height:31px;font-weight:700;letter-spacing:-.4px;color:#0B2346}
.rbh-shift__body{display:flex;flex-direction:column;gap:8px}
.rbh-shift__stat{font-size:clamp(44px,4.6vw,60px);line-height:1;font-weight:700;letter-spacing:-2px;color:#219A7C;white-space:nowrap}
.rbh-shift__caption{font-size:16px;line-height:24px;color:#364262}

/* ---------- The report ---------- */
.rbh-report{position:relative;overflow:hidden;background:#EFF7F3;scroll-margin-top:calc(var(--ah, 0px) + var(--cyg-header-clear, 110px))}
.rbh-report__in{max-width:1240px;margin:0 auto;padding:96px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:center;container:rbh-report/inline-size}
.rbh-report__in > *{min-width:0}
.rbh-covers{position:relative;display:flex;justify-content:center;align-items:center;min-height:380px}
.rbh-cover{aspect-ratio:8.5/11;border-radius:6px}
.rbh-cover--back{position:absolute;width:min(250px,50%);background:#0B2346;opacity:.9;transform:translateX(-30%) rotate(-9deg)}
.rbh-cover--mid{position:absolute;width:min(250px,50%);background:#219A7C;transform:translateX(-14%) rotate(-4deg)}
/* Navy until the cover image is supplied (CYGNVS_RBH_COVER_SRC). */
.rbh-cover--front{position:relative;width:min(270px,54%);background:#0B2346;transform:translateX(10%) rotate(2deg);
  box-shadow:0 24px 60px rgba(8,19,41,.28);overflow:hidden}
.rbh .rbh-cover--front img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.rbh-report__copy{display:flex;flex-direction:column;gap:20px;max-width:600px}
.rbh .rbh-h2-lg{font-size:clamp(32px,3.6vw,44px);line-height:1.12;font-weight:700;letter-spacing:-1px}
.rbh-report .rbh-h2-lg{color:#0B2346}
.rbh-report__lede{font-size:20px;line-height:30px;color:#364262}
.rbh-report__cta{padding-top:8px}
@container rbh-report (max-width:895.98px){
  .rbh-covers{min-height:320px}
  .rbh-report__copy{max-width:none}
}

/* ---------- Resilience lifecycle ---------- */
.rbh-life{position:relative;overflow:hidden;color:#fff;background-color:#07324A;
  background-image:radial-gradient(ellipse at 85% 90%,rgba(28,198,149,.16),rgba(7,50,74,0) 55%)}
.rbh-life__in{max-width:1240px;margin:0 auto;padding:120px 24px 96px;display:flex;flex-direction:column;gap:64px}
.rbh-life__intro{display:flex;flex-direction:column;gap:20px;max-width:820px}
.rbh-life .rbh-h2-xl{color:#fff}
.rbh-life__intro p{font-size:20px;line-height:30px;color:#D6DAE3}
.rbh-life__wrap{container:rbh-life/inline-size}
/* Narrow layout (default): one column, Prepare to Report in order, and no wheel at all. */
.rbh-life__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.rbh-wheel{display:none}
.rbh-stage{padding:32px 0;display:flex;justify-content:center;text-align:center;border-bottom:1px solid rgba(255,255,255,.09);min-width:0}
.rbh-stage--br{border-bottom:0}
.rbh-stage__in{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px}
.rbh-stage__name{font-size:18px;font-weight:700;color:#1CC695}
.rbh .rbh-stage h3{font-size:24px;line-height:31px;font-weight:700;color:#fff}
.rbh-stage__in p:not(.rbh-stage__name){font-size:18px;line-height:28px;font-weight:400;color:#EEF1F5}
/* Wide layout: 2x2 with the wheel centred over the intersection. Cell padding keeps text clear of it. */
@container rbh-life (min-width:1000px){
  .rbh-life__grid{grid-template-columns:1fr 1fr}
  .rbh-wheel{display:block;position:absolute;left:50%;top:50%;width:300px;transform:translate(-50%,-50%);z-index:1}
  .rbh-stage{border:0 solid rgba(255,255,255,.09)}
  .rbh-stage--tl{padding:44px 168px 56px 24px;border-width:0 1px 1px 0}
  .rbh-stage--tr{padding:44px 24px 56px 168px;border-width:0 0 1px 0}
  .rbh-stage--bl{padding:56px 168px 44px 24px;border-width:0 1px 0 0}
  .rbh-stage--br{padding:56px 24px 44px 168px;border-width:0}
}
/* The ring turns like the homepage wheel (.cygnvs-hiw-spin: 30s, linear, clockwise, labels turn with
   it). The chevron is a separate image on top, so it stays still and upright. */
.rbh .rbh-wheel__ring{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 50%;
  will-change:transform;animation:rbh-spin 30s linear infinite}
.rbh-wheel__ring text{font-family:inherit}
.rbh .rbh-wheel__chevron{position:absolute;left:50%;top:50%;width:22%;height:auto;max-width:none;transform:translate(-50%,-54%)}
@keyframes rbh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rbh .rbh-wheel__ring{animation:none;will-change:auto}}
.rbh-life__source{font-size:13px;line-height:18px;color:#ABAEBD;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Your score ---------- */
.rbh-score{background:#fff;padding:120px 24px;scroll-margin-top:calc(var(--ah, 0px) + var(--cyg-header-clear, 110px))}
.rbh-score__card{position:relative;max-width:1192px;margin:0 auto;background:#0B2346;color:#fff;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));container:rbh-score/inline-size}
.rbh-score__card > *{min-width:0}
.rbh-score__text{padding:72px 56px;display:flex;flex-direction:column;gap:20px}
.rbh-score .rbh-h2-lg{color:#fff}
.rbh-score__lede{font-size:19px;line-height:29px;color:#D6DAE3}
.rbh-score__cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:8px}
.rbh-score__note{font-size:14px;line-height:20px;color:#ABAEBD}
.rbh-score__visual{position:relative;padding:64px 56px 64px 24px;display:flex;align-items:center;justify-content:center}
@container rbh-score (max-width:839.98px){
  .rbh-score__text{padding:48px 32px 32px}
  .rbh-score__visual{padding:24px 32px 48px}
}

/* Sample results mock: a static illustration (aria-hidden), not data. */
.rbh-mock{position:relative;width:100%;max-width:440px;padding:10px;border-radius:22px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(6,8,17,.5)}
/* No overflow:hidden here, so the callouts can sit inside their rows and still reach past the frame. */
.rbh-mock__card{display:flex;flex-direction:column;width:100%;background:#fff;color:#0B2346;border-radius:14px}
.rbh-mock__head{display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:#0E1A30;color:#fff;border-radius:14px 14px 0 0}
.rbh .rbh-mock__logo{height:12px;width:auto;align-self:flex-start}
.rbh-mock__kicker{font-size:11px;font-weight:600;letter-spacing:1.4px;color:#ABAEBD;padding-top:4px}
.rbh-mock__title{font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.3px}
.rbh-mock__meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;line-height:16px;color:#ABAEBD}
.rbh-mock__meta > span{white-space:nowrap}
.rbh-mock__index{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 18px;border-bottom:1px solid #E5E7EB}
.rbh-mock__k{font-size:11px;font-weight:600;letter-spacing:1.2px;color:#5C6480;white-space:nowrap}
.rbh-mock__num{font-size:40px;line-height:44px;font-weight:800;letter-spacing:-1.5px}
.rbh-mock__badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#206452;background:#EFF7F3;
  border:1px solid #BCDDD1;border-radius:6px;padding:3px 10px}
.rbh-mock__badge i{width:6px;height:6px;border-radius:50%;background:#219A7C}
.rbh-mock__scale{position:relative;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding-top:8px}
.rbh-mock__scale i{display:block;height:8px}
.rbh-mock__scale i:nth-child(1){background:#E5E7EB;border-radius:4px 0 0 4px}
.rbh-mock__scale i:nth-child(2){background:#BCDDD1}
.rbh-mock__scale i:nth-child(3){background:#53AB91}
.rbh-mock__scale i:nth-child(4){background:#206452;border-radius:0 4px 4px 0}
.rbh-mock__scale b{position:absolute;top:3px;width:2px;height:18px;background:#0B2346}
.rbh-mock__bands{width:100%;display:grid;grid-template-columns:repeat(4,1fr);font-size:10px;font-weight:600;letter-spacing:1px;color:#5C6480;text-align:center}
.rbh-mock__dims{display:flex;flex-direction:column;padding:10px 18px 14px}
.rbh-mock__dims-title{font-size:12px;font-weight:700;padding-bottom:6px}
.rbh-dim{display:grid;grid-template-columns:128px minmax(0,1fr) 30px 56px;gap:10px;align-items:center;padding:4px 8px;margin:0 -8px;
  border-top:1px solid #F3F4F6;border-radius:6px}
.rbh-dim--hl{position:relative;background:#FBECEA;box-shadow:inset 0 0 0 1px #F2C6C0}
.rbh-dim--inline{--rbh-dim:#364262}
.rbh-dim--below{--rbh-dim:#B23A2E}
.rbh-dim--above{--rbh-dim:#1F8A6E}
.rbh-dim__name{font-size:11px;line-height:13px;font-weight:600;white-space:nowrap}
.rbh-dim__bar{display:block;height:8px;border-radius:4px;background:#F3F4F6;overflow:hidden}
.rbh-dim__bar i{display:block;height:8px;border-radius:4px;background:#0B2346}
.rbh-dim__val{font-size:11px;font-weight:700;text-align:right;filter:blur(4px);user-select:none;-webkit-user-select:none}
.rbh-dim__status{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;white-space:nowrap;color:var(--rbh-dim)}
.rbh-dim__status::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:currentColor}

/* Callouts float past the frame edge, centred on their highlighted row. They live inside the row, so
   no measuring is needed. The row starts 20px inside the frame (10px frame padding + 18px card padding
   - 8px row bleed), so -72px here is the README's -52px from the frame, and -64px is its -44px. */
.rbh-callout{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 12px;background:#fff;color:#0B2346;border:1px solid #E5E7EB;border-radius:12px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 16px 40px rgba(8,19,41,.35)}
.rbh-callout--left{left:-72px}
.rbh-callout--right{right:-64px}
.rbh-callout__icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#FBECEA;color:#B23A2E;display:flex;align-items:center;justify-content:center}
.rbh .rbh-callout__icon svg{display:block;width:20px;height:20px}
.rbh-callout__text{display:flex;flex-direction:column;gap:2px}
.rbh-callout__name{font-size:13px;line-height:16px;font-weight:600}
.rbh-callout__row{display:flex;align-items:baseline;gap:8px}
.rbh-callout__val{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.5px}
.rbh-callout__below{font-size:12px;font-weight:600;color:#B23A2E}
/* Stacked card: pull the callouts in to 16px past the frame so the card never clips them. */
@media (max-width:887px){.rbh-callout--left{left:-36px}.rbh-callout--right{right:-36px}}
/* Phones: no callouts; the highlighted rows still carry the story. */
@media (max-width:599px){.rbh-callout{display:none}}

/* ---------- Closing ---------- */
.rbh-close{background:#F9FAFB;border-top:1px solid #E5E7EB}
.rbh-close__in{max-width:1000px;margin:0 auto;padding:112px 24px 72px;display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center}
.rbh .rbh-close__logo{height:22px;width:auto}
.rbh-quote{display:flex;flex-direction:column;align-items:center;gap:24px}
.rbh .rbh-quote blockquote{padding:0;border:0;font-style:normal;quotes:none}
.rbh-quote blockquote p{font-size:clamp(26px,3vw,36px);line-height:1.3;font-weight:500;letter-spacing:-.6px;color:#0B2346;text-wrap:balance}
.rbh-quote figcaption{display:flex;flex-direction:column;align-items:center;gap:4px}
.rbh-quote__name{font-size:16px;line-height:24px;font-weight:600;color:#0B2346}
.rbh-quote__role{font-size:14px;line-height:20px;color:#5C6480}
.rbh-close__method{width:100%;display:flex;justify-content:center;padding-top:32px;border-top:1px solid #E5E7EB}
.rbh-close__method p{max-width:760px;font-size:13px;line-height:20px;color:#5C6480}

/* ---------- Tablet and down (README 5.2: about 60% section padding, 20px gutters) ---------- */
@media (max-width:767px){
  .rbh-hero__grid{padding:40px 20px 0}
  .rbh-hero__copy{padding-bottom:64px}
  .rbh-hero__lede{width:auto;min-width:0;font-size:18px;line-height:27px}

  .rbh-why__in{padding:72px 20px;gap:40px}
  .rbh-why__lede{font-size:18px;line-height:27px}
  .rbh-shifts{gap:32px}
  .rbh-shifts__grid{gap:32px}
  .rbh-shift + .rbh-shift{padding-top:32px;border-top:1px solid #E5E7EB}

  .rbh-report__in{padding:56px 20px;gap:40px}
  .rbh-report__lede{font-size:18px;line-height:27px}

  .rbh-life__in{padding:72px 20px 56px;gap:40px}
  .rbh-life__intro p{font-size:18px;line-height:27px}

  .rbh-score{padding:72px 24px}
  .rbh-score__lede{font-size:18px;line-height:27px}

  .rbh-close__in{padding:72px 20px 48px;gap:32px}
  .rbh-quote{gap:16px}
}

/* ---------- Phones ---------- */
@media (max-width:479px){
  .rbh-ann__label,.rbh-ann__dot{display:none}
  .rbh-hero__eyebrow{white-space:normal;font-size:15px;letter-spacing:1.2px}
  .rbh .rbh-hero__title{font-size:clamp(36px,10.5vw,48px);letter-spacing:-1.5px}
  .rbh .rbh-btn{width:100%}
  .rbh-covers{min-height:280px}
  .rbh-score{padding:72px 16px}
  .rbh-score__text{padding:40px 20px 24px}
  .rbh-score__visual{padding:16px 20px 40px}
}

/* ---------- Small phones ---------- */
@media (max-width:399px){
  .rbh .rbh-h2-xl{font-size:34px;letter-spacing:-1px}
  .rbh .rbh-nowrap{white-space:normal} /* "Resilience Benchmark" is 312px at 32px: wider than a 320px phone */
  .rbh-quote blockquote p{font-size:22px}
}
/* The mock needs about 342px at full size. Below that, scale the whole thing (zoom scales layout too,
   so nothing overflows) rather than squeezing the rows. */
@media (max-width:413px){.rbh-mock{zoom:.88}}
@media (max-width:374px){.rbh-mock{zoom:.8}}
@media (max-width:345px){.rbh-mock{zoom:.72}}
/* Below 360px the meta line wraps and carries its separator dot onto the new line: drop the last item. */
@media (max-width:359px){.rbh-mock__meta > span:last-child{display:none}}
/* Hero eyebrow: below 360px it would break after a dot ("Prepare · Practice ·"). There it is always two clean
   lines, "Prepare · Practice" / "Respond · Report": each half is its own line and the middle dot is dropped.
   (Hiding the dot alone was not enough: between about 334px and 359px both halves still fit on one line.) */
.rbh-hero__eyebrow .rbh-nowrap{white-space:nowrap}
@media (max-width:359px){.rbh-hero__eyebrow .rbh-eyebrow-sep{display:none}.rbh-hero__eyebrow .rbh-nowrap{display:block}}
/* The report heading keeps "Resilience Benchmark" together on desktop. Between 400px and 767px that
   leaves "CYGNVS" or "Report" stranded on a line of its own, so let it wrap there too. */
@media (max-width:767px){.rbh .rbh-report .rbh-nowrap{white-space:normal}}