/* ============================================================
   About Us — page-specific styles.
   Loaded AFTER home-v2.css; reuses the shared .rd-* system + tokens.
   ============================================================ */

/* ---- Nav over a LIGHT hero: dark links + filled purple button ---- */
.rd-nav-light .rd-nav-item > a { color: var(--v2-text); }
.rd-nav-light .rd-chev { opacity: .8; }
.rd-page .rd-nav-light .rd-btn-nav { background: var(--v2-purple); border-color: var(--v2-purple); color: #fff; }
.rd-nav-light.rd-nav-solid { background: rgba(255,255,255,.97); box-shadow: 0 2px 18px rgba(72,57,92,.12); }
.rd-nav-light.rd-nav-solid .rd-nav-item > a { color: var(--v2-text); }

/* ---- Hero ---- */
.rd-about-hero { position: relative; background: #F4F7FF; padding: 183px 0 84px; overflow: hidden; }  /* +31px top: hero text was too close to the nav (feedback, measured vs Figma) */
/* Copy column widened 496->548 & gap tightened 136->84 so the photo column stays at x=776 (layered square/dots intact) while the copy fills more width and wraps shorter (feedback: hero text too narrow/tall vs Figma). */
.rd-about-hero-inner { display: grid; grid-template-columns: minmax(0, 548px) 460px; gap: 84px; justify-content: start; align-items: center; }  /* copy column flexes so the photo is never clipped at 981-1140px widths */
.rd-about-hero h1 {
  font: 700 38px/1.2 var(--v2-font);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--v2-text);
  margin: 0 0 24px;
  max-width: 430px;
}
.rd-about-hero h1 span { color: var(--v2-purple); }
.rd-about-hero-copy p { font: 400 16px/1.6 var(--v2-font); color: var(--v2-grey); margin: 0 0 16px; max-width: 548px; }
.rd-about-hero-copy p:last-child { margin-bottom: 0; }

.rd-about-hero-media { position: relative; }
.rd-about-hero-square {
  position: absolute; z-index: 0;
  top: -82px; left: 67px; width: 507px; height: 312px;
  background: #9F84B7;
}
.rd-about-hero-media img {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 460 / 340; object-fit: cover; object-position: top center; display: block;  /* keep heads: any hero whose photo is taller than its box crops from the BOTTOM, never the top */
}
.rd-about-hero-dots {
  position: absolute; z-index: 1;
  /* moved down+right to the lower-right so the grid clears the same-colour square
     (was top137/left464: sat entirely behind the square, only a ~9px sliver showed).
     Now extends below the square's bottom edge — full lavender grid visible (Figma). */
  top: 210px; left: 520px; width: 130px; height: 150px;
  background-image: radial-gradient(#9F84B7 2px, transparent 2.6px);
  background-size: 16px 16px;
}

/* ============================================================
   R3 HERO UNIFICATION (Justin Round 3): every listed page hero
   replicates the REPORT page hero EXACTLY — same grid, media box,
   square, dots, spacing and type. Only the <img> and the heading/
   body text differ per page. Applied via the shared .rd-hero-std
   class; the `.rd-page` prefix out-specifies each page's own
   `.rd-<page>-hero` rules regardless of CSS load order. Each page
   keeps its own mockup-matched hero background. Values mirror
   .rd-rp-hero (report.css) — the reference Justin pointed to.
   ============================================================ */
.rd-page .rd-hero-std { padding-top: 183px; padding-bottom: 128px; }
.rd-page .rd-hero-std .rd-about-hero-inner { grid-template-columns: minmax(0, 494px) 582px; gap: 42px; align-items: start; justify-content: start; }
.rd-page .rd-hero-std .rd-about-hero-copy { margin-top: 73px; }
.rd-page .rd-hero-std .rd-about-hero-copy h1 { max-width: 430px; margin: 0 0 22px; font: 700 41px/1.2 var(--v2-font); letter-spacing: 3.5px; text-transform: uppercase; color: var(--v2-dark); }
.rd-page .rd-hero-std .rd-about-hero-copy h1 span { display: block; color: var(--v2-purple); }
.rd-page .rd-hero-std .rd-about-hero-copy p { max-width: 500px; margin: 0 0 16px; font: 400 18px/1.55 var(--v2-font); color: var(--v2-text); }
.rd-page .rd-hero-std .rd-about-hero-copy p:last-of-type { margin-bottom: 0; }
.rd-page .rd-hero-std .rd-about-hero-media { align-self: start; margin-top: 93px; min-width: 0; }  /* min-width:0 so the mobile 1fr track never expands to the image's intrinsic width (grid gotcha) */
.rd-page .rd-hero-std .rd-about-hero-media img { width: 100%; height: auto; display: block; }  /* R3: show each hero graphic WHOLE at its natural aspect (uniform width) — no object-fit crop, so nothing is cut off (Justin's complaint). The box, square + dots stay consistent; only the media height varies with the image, as in the mockup. */
.rd-page .rd-hero-std .rd-about-hero-square { top: -98px; left: 116px; width: 660px; height: 296px; background: #9F84B7; }
.rd-page .rd-hero-std .rd-about-hero-dots { top: 100px; left: 600px; width: 144px; height: 144px; background-image: radial-gradient(var(--v2-purple-50) 2px, transparent 2.6px); background-size: 16px 16px; }
/* R4 FIX (client: "side row of dots half cut off"): the dot grid sits BESIDE the image, in the
   right-hand page margin (left:600 overshoots the content container by ~80px). That margin only
   exists on wide screens; below ~1420px the image reaches the viewport edge, leaving no room, so
   the grid overflowed the viewport and the hero's `overflow:hidden` clipped it mid-dot (the half-
   cut side row the client saw on laptops/tablets ~1024–1400px). There is no on-image space to move
   it into (the photo heroes are opaque and full-bleed), so — exactly as the ≤980 mobile rule
   already does — hide the decorative grid below the width where it fits. It shows in full beside
   the image at ≥1421px (Figma position, rule above) and is cleanly absent below. */
@media (max-width: 1420px) {
  .rd-page .rd-hero-std .rd-about-hero-dots { display: none; }
}
/* R3: the sector heroes (Non-Profits, Industrial, Professional, CYAC, Regulatory) vertically
   centre the copy + media. The media (image + square + dots) moves as ONE group so their
   relative overlap is untouched; reset the top offsets + align-self so both columns centre. */
.rd-page .rd-np-hero.rd-hero-std .rd-about-hero-inner,
.rd-page .rd-is-hero.rd-hero-std .rd-about-hero-inner,
.rd-page .rd-pf-hero.rd-hero-std .rd-about-hero-inner,
.rd-page .rd-cyac-hero.rd-hero-std .rd-about-hero-inner,
.rd-page .rd-reg-hero.rd-hero-std .rd-about-hero-inner { align-items: center; }
.rd-page .rd-np-hero.rd-hero-std .rd-about-hero-media,
.rd-page .rd-is-hero.rd-hero-std .rd-about-hero-media,
.rd-page .rd-pf-hero.rd-hero-std .rd-about-hero-media,
.rd-page .rd-cyac-hero.rd-hero-std .rd-about-hero-media,
.rd-page .rd-reg-hero.rd-hero-std .rd-about-hero-media { margin-top: 0; align-self: center; transform-origin: center right !important; }
.rd-page .rd-np-hero.rd-hero-std .rd-about-hero-copy,
.rd-page .rd-is-hero.rd-hero-std .rd-about-hero-copy,
.rd-page .rd-pf-hero.rd-hero-std .rd-about-hero-copy,
.rd-page .rd-cyac-hero.rd-hero-std .rd-about-hero-copy,
.rd-page .rd-reg-hero.rd-hero-std .rd-about-hero-copy { margin-top: 0; }
/* Give these titles more width so they wrap better (e.g. Non-Profits "TURN INFORMATION" on one
   line) — 540px is well clear of the graphic (~623px of room before it). */
.rd-page .rd-np-hero.rd-hero-std .rd-about-hero-copy h1,
.rd-page .rd-is-hero.rd-hero-std .rd-about-hero-copy h1,
.rd-page .rd-pf-hero.rd-hero-std .rd-about-hero-copy h1,
.rd-page .rd-cyac-hero.rd-hero-std .rd-about-hero-copy h1,
.rd-page .rd-reg-hero.rd-hero-std .rd-about-hero-copy h1 { max-width: 540px; }

/* R3 (client): on every standard hero, treat the image + square + dots as ONE stacked group
   and scale it to 85% of its size, anchored to the group's top-right so it also nudges a
   little to the right — the same size/position adjustment made on the Solutions hero. Because
   it is a single transform on the media container, each page keeps its exact internal
   arrangement (the block extends out and touches the same part of the image as before, just
   smaller). Desktop only (mobile stacks full-width). Solutions, Start-Now and News/Case-Studies
   keep their own bespoke hero decoration and are excluded. */
@media (min-width: 981px) {
  .rd-page .rd-hero-std:not(.rd-sol-hero):not(.rd-os-hero):not(.rd-nc-hero):not(.rd-op-hero) .rd-about-hero-media {
    transform: scale(0.85);
    transform-origin: top right;
  }
}
@media (max-width: 980px) {
  .rd-page .rd-hero-std { padding-top: 145px; padding-bottom: 60px; }
  .rd-page .rd-hero-std .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-page .rd-hero-std .rd-about-hero-copy { margin-top: 0; }
  .rd-page .rd-hero-std .rd-about-hero-copy h1 { max-width: none; font-size: 30px !important; letter-spacing: 1px !important; overflow-wrap: break-word; }  /* !important beats the base Squarespace `h1{font-size:40px!important}` @≤640; 30px+1px keeps long words (e.g. ACCOUNTABILITY) inside the mobile column */
  .rd-page .rd-hero-std .rd-about-hero-copy p { max-width: none; }
  .rd-page .rd-hero-std .rd-about-hero-media { margin-top: 0; align-self: auto; }
  .rd-page .rd-hero-std .rd-about-hero-square, .rd-page .rd-hero-std .rd-about-hero-dots { display: none; }
}

/* ---- Section 2: Responsive/Practical/Flexible (reuses .rd-why; dark left heading, no subtitle) ---- */
.rd-rpf .rd-h2 { color: var(--v2-text); font-size: 35px; margin: 0 0 60px; }
.rd-rpf .rd-why-grid { margin-left: 0; gap: 97px; max-width: 1094px; }   /* standard 144 margin (not homepage 120 breakout), tighter gap */

/* ---- Section 3: Built on Trusted Partnerships (Clutch carousel placeholder) ---- */
.rd-partners { background: #fff; }  /* R4 (client): white, not grey — removes the perceived whitespace framing the Clutch widget */
.rd-partners .rd-h2 { color: var(--v2-text); }
.rd-partners .rd-rule { width: 461px; }
/* live Clutch widget wrapper (client-provided embed replaces the old placeholder) */
.rd-clutch-embed { max-width: none; width: 100%; margin: 0 auto; min-height: 160px; }  /* R2: fill the container — client flagged whitespace on either side of the widget (was capped at 900px) */
.rd-clutch-embed .clutch-widget, .rd-clutch-embed iframe { width: 100% !important; max-width: 100% !important; }
/* --- legacy placeholder styles below are unused now the real widget is embedded --- */
.rd-clutch { width: 782px; max-width: 100%; margin: 0 auto; background: #fff; border: 1px solid #dfe3e6; box-shadow: 0 12px 34px rgba(30,25,50,.08); }
.rd-clutch-bar { background: #16313B; color: #fff; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; }
.rd-clutch-title { font: 600 16px/1 var(--v2-font); color: #fff; letter-spacing: .3px; }
.rd-clutch-power { font: 400 12px/1 var(--v2-font); color: #fff; opacity: .85; }
.rd-clutch-power b { font-weight: 700; }
.rd-clutch-inner { position: relative; padding: 22px 46px 34px; }
.rd-clutch-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.rd-clutch-rating b { font: 700 22px/1 var(--v2-font); color: var(--v2-text); }
.rd-clutch-stars { color: #E62415; letter-spacing: 2px; font-size: 18px; }
.rd-clutch-rev { font: 600 12px/1 var(--v2-font); letter-spacing: 1px; color: var(--v2-grey); }
.rd-clutch-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-clutch-card { border: 1px solid #eef0f2; padding: 18px; min-height: 212px; }
.rd-clutch-card i { display: block; height: 11px; border-radius: 2px; background: #e6e9ec; margin-bottom: 13px; }
.rd-clutch-card i.sp { margin-top: 22px; }
.rd-clutch-card i.w40 { width: 40%; } .rd-clutch-card i.w80 { width: 80%; } .rd-clutch-card i.w70 { width: 70%; }
.rd-clutch-card i.w60 { width: 60%; } .rd-clutch-card i.w75 { width: 75%; } .rd-clutch-card i.w65 { width: 65%; }
.rd-clutch-foot { display: flex; justify-content: center; margin-top: 22px; }
.rd-clutch-more { font: 600 12px/1 var(--v2-font); letter-spacing: .5px; color: var(--v2-grey); border: 1px solid #d7dbe0; padding: 9px 16px; border-radius: 3px; }
.rd-clutch-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: none; color: #9aa3ab; font-size: 30px; line-height: 1; cursor: pointer; }
.rd-clutch-nav-l { left: 8px; } .rd-clutch-nav-r { right: 8px; }
.rd-clutch-ph { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font: 700 20px/1 var(--v2-font); color: var(--v2-text); pointer-events: none; }

/* ---- Section 4: Our Core Values ---- */
.rd-values { background: #fff; }
.rd-values-band { max-width: 1200px; margin: 0 auto; background: linear-gradient(120deg, #F6EDFE 0%, #EADCFA 100%); border-radius: 20px; padding: 34px 40px 30px; }
.rd-values-h { color: var(--v2-plum); font-size: 30px; text-transform: none; margin: 0 auto 6px; }  /* deep plum, not bright purple (feedback) */
.rd-values-h .rd-rule { display: none; }   /* remove the underline rule (feedback) */
.rd-values-grid { display: flex; justify-content: center; gap: 44px; margin-top: 36px; }
.rd-value { width: 240px; text-align: center; }
.rd-value-ico { display: block; width: 63px; height: 63px; margin: 0 auto 18px; }
.rd-value h3 { font: 700 15px/1 var(--v2-font); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-plum); margin: 0 0 12px; }
.rd-value p { font: 400 14px/1.55 var(--v2-font); color: var(--v2-grey); margin: 0; }

/* ---- Section 6: CTA (reuses .rd-cta; thin white heading bar, not purple) ---- */
.rd-about-cta h2 { border-left: 2px solid rgba(255,255,255,.55); padding-left: 18px; }

/* ---- Section 5: Our Team ---- */
.rd-team { background: #fff; }
.rd-team-h { color: var(--v2-text); margin: 0 0 22px; }
.rd-team-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin: 0 0 52px; }  /* two equal-width intro boxes (feedback) */
.rd-team-intro p { font: 400 15px/1.6 var(--v2-font); color: var(--v2-grey); margin: 0; }
.rd-team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 27px 27px; margin: 0 -13px; align-items: start; }  /* R2: top-align cells so every photo lines up (Geoff was reading out of line) */
/* .rd-member is a <button> (opens the bio modal) — reset native button chrome */
.rd-member { display: block; width: 100%; min-width: 0; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rd-member:focus-visible { outline: 2px solid var(--v2-purple); outline-offset: 3px; }
.rd-member:hover .rd-member-arr { background: var(--v2-purple); }
.rd-member:hover .rd-member-name { color: var(--v2-purple); }
.rd-member img { width: 100%; aspect-ratio: 213 / 277; object-fit: cover; object-position: top center; display: block; }  /* keep heads — crop from the bottom, not the top (feedback) */
.rd-member-name { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font: 700 14px/1.3 var(--v2-font); color: var(--v2-text); margin: 15px 0 6px; }
.rd-member-arr { flex: 0 0 20px; height: 9px; margin-top: 4px; background: var(--v2-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain; transition: background .15s; }
.rd-member-title { display: block; font: 400 12px/1.35 var(--v2-font); color: var(--v2-grey); }
/* R3: right-align via auto-margin, NOT float. The old `float:right` leaked past the
   team section into the next section (`.rd-cta`, which is `overflow:hidden` => a BFC that
   shrinks to sit beside a float) — on mobile that squeezed the whole CTA to ~55% width and
   clipped its heading/body (Justin: "on mobile the CTA appears broken"). No float => no leak. */
.rd-team-viewall { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 34px 0 0 auto; font: 600 13px/1 var(--v2-font-btn); letter-spacing: .8px; color: var(--v2-purple); }
.rd-page .rd-team-viewall { color: var(--v2-purple); }
.rd-team-arr2 { width: 24px; height: 10px; }

@media (max-width: 980px) {
  .rd-about-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .rd-clutch-cards { grid-template-columns: 1fr; }
  .rd-values-grid { flex-wrap: wrap; }
  .rd-team-grid { grid-template-columns: repeat(2, 1fr); margin: 0; }
  .rd-team-intro { grid-template-columns: 1fr; gap: 20px; }
  .rd-about-hero { padding-top: 145px; }  /* R2: consistent mobile hero clearance below the header across all pages */
  .rd-about-hero h1 { font-size: 40px; }
}

/* ============ MOBILE (additive) ============ */
@media (max-width: 980px) {
  .rd-about-hero-square, .rd-about-hero-dots { display: none; }
  .rd-about-hero-media img { width: 100%; height: auto; }
}
@media (max-width: 640px) {
  .rd-team-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .rd-h2-center { letter-spacing: 2px; }
}
/* very narrow phones: single column so names/titles never squish or char-wrap */
@media (max-width: 430px) {
  .rd-team-grid { grid-template-columns: 1fr; gap: 26px; max-width: 320px; margin: 0 auto; }
  .rd-member img { aspect-ratio: 320 / 300; }
}

/* ============================================================
   MODAL — shared base (.rd-modal-*) reused by the Careers role
   popup; bio-specific styles below. On-brand: white rounded card,
   purple accents, dark backdrop. Keyboard + overlay + Esc close.
   ============================================================ */
.rd-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(38, 22, 62, .58);
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.rd-modal-overlay[hidden] { display: none; }
.rd-modal-overlay.is-open { opacity: 1; visibility: visible; }
.rd-modal-card {
  position: relative; background: #fff; border-radius: 16px;
  width: 100%; max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 30px 80px rgba(30, 15, 55, .35);
  transform: translateY(12px); transition: transform .2s ease;
}
.rd-modal-overlay.is-open .rd-modal-card { transform: translateY(0); }
.rd-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #F2ECFA; color: var(--v2-plum);
  font: 400 22px/1 var(--v2-font); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.rd-modal-close:hover { background: var(--v2-purple); color: #fff; }
.rd-modal-close:focus-visible { outline: 2px solid var(--v2-purple); outline-offset: 2px; }

/* ---- Bio modal (team member) ---- */
/* Bio pop-up matches the client's live site: a plain white box with a header (name + close,
   underlined) over a body of bio paragraphs — no photo, no title line. */
.rd-bio-card { max-width: 500px; text-align: left; padding: 0; }
.rd-bio-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #ccc; }
.rd-page .rd-bio-name { font: 700 18px/1.3 var(--v2-font); color: #333; margin: 0; }
.rd-bio-close { flex: 0 0 auto; background: none; border: 0; padding: 0 2px; font: 400 22px/1 var(--v2-font); color: #ccc; cursor: pointer; transition: color .15s; }
.rd-bio-close:hover { color: #888; }
.rd-bio-close:focus-visible { outline: 2px solid var(--v2-purple); outline-offset: 2px; }
.rd-bio-body { padding: 16px 18px 18px; }
.rd-bio-body p { font: 400 15px/1.62 var(--v2-font); color: var(--v2-text); margin: 0 0 18px; }
.rd-bio-body p:last-child { margin: 0; }
@media (max-width: 430px) {
  .rd-bio-header { padding: 14px 16px; }
  .rd-bio-body { padding: 14px 16px 16px; }
}
/* mobile round 2: per-page hero width overrides all use fixed px — force fluid */
@media (max-width: 980px) {
  .rd-about-hero-media { width: 100% !important; }
  .rd-about-hero-media img { width: 100% !important; height: auto !important; }
}
@media (max-width: 640px) {
  .rd-partners .rd-rule { width: 100%; } /* fixed 461px rule span forces the fit-content h2 wide */
}