/* =========================================================================
   RecEast design system (Broads palette)
   One stylesheet for the whole site: tokens first, then components, each
   under a NAME banner. Page rules (every class prefixed with the page slug)
   follow the shared components under PAGE: <slug>.
   ========================================================================= */

/* ── TOKENS ── */
:root {
  /* Brand palette (Broads) */
  --rx-deep: #0E3B3A;         /* deep teal: dark surfaces, "East" in the logo, headings on light */
  --rx-teal: #1A746C;         /* teal: primary brand, buttons, links, "Rec" in the logo */
  --rx-sea: #74B3A6;          /* sea green: decorative arcs and lines; text only on deep */
  --rx-foam: #BFE3D9;         /* foam: highlights and tags on dark */
  --rx-light: #EDF6F3;        /* pale tint: alternate sections */
  --rx-ink: #132221;          /* teal-black: body text */
  --rx-white: #FFFFFF;

  /* Derived neutrals and states */
  --rx-deeper: #092524;
  --rx-ink-soft: #2E3D3B;     /* lead paragraphs, 11.4:1 on white */
  --rx-muted: #475956;        /* secondary text, 7.4:1 on white */
  --rx-line: #DCEAE6;         /* hairlines on light */
  --rx-line-strong: #C3D8D2;  /* chip outlines and dividers */
  --rx-field-border: #829894; /* form field borders, 3.1:1 on white */
  --rx-tint-2: #F5FAF8;       /* faintest wash */
  --rx-error: #B3261E;
  --rx-success: #1F6F4A;

  /* Type */
  --font: 'Cabin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: clamp(1.0625rem, 1.02rem + .18vw, 1.125rem);
  --fs-lg: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --fs-h4: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + .5vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.875rem);
  --fs-h1: clamp(2.375rem, 1.7rem + 3vw, 4rem);
  --fs-display: clamp(2.5rem, 1.55rem + 4.2vw, 4.875rem);
  --fs-stat: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Spacing scale */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 6rem;
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);
  --section-y-tight: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --grid-gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: 24px;
  --header-h: 80px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows (teal-tinted, restrained) */
  --sh-1: 0 1px 2px rgba(14, 59, 58, .05), 0 1px 3px rgba(14, 59, 58, .05);
  --sh-2: 0 2px 4px rgba(14, 59, 58, .04), 0 10px 28px -8px rgba(14, 59, 58, .14);
  --sh-3: 0 4px 8px rgba(14, 59, 58, .04), 0 24px 48px -14px rgba(14, 59, 58, .26);
  --sh-btn: 0 10px 22px -10px rgba(26, 116, 108, .75);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .2s;

  /* Icons (used as CSS masks; colour comes from background-color) */
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E");
  --i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A746C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-tick-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E");

  /* Signature motif: concentric line arcs (echoing the arcs in the logo) */
  --arcs-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke-linecap='round'%3E%3Cpath d='M42.3 196.4A304 304 0 0 1 545.9 116.6' stroke='%23BFE3D9' stroke-width='1.5'/%3E%3Cpath d='M56.1 385.8A272 272 0 1 1 583.9 385.8' stroke='%2374B3A6' stroke-opacity='.45' stroke-width='1.5'/%3E%3Cpath d='M85.6 278.7A238 238 0 0 1 459.9 127.5' stroke='%2374B3A6' stroke-opacity='.5' stroke-width='7'/%3E%3Cpath d='M129.3 218.6A216 216 0 0 1 407.9 122.7' stroke='%231A746C' stroke-opacity='.28' stroke-width='7'/%3E%3Cpath d='M162.4 411A182 182 0 1 1 474.3 416.4' stroke='%23BFE3D9' stroke-width='1.5'/%3E%3Cpath d='M172.8 304.5A148 148 0 0 1 462.3 279.2' stroke='%2374B3A6' stroke-opacity='.4' stroke-width='1.5'/%3E%3Cpath d='M217.5 270A114 114 0 0 1 409.8 249.8' stroke='%23BFE3D9' stroke-width='1.5'/%3E%3C/svg%3E");
  --arcs-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke-linecap='round'%3E%3Cpath d='M42.3 196.4A304 304 0 0 1 545.9 116.6' stroke='%2374B3A6' stroke-opacity='.3' stroke-width='1.5'/%3E%3Cpath d='M56.1 385.8A272 272 0 1 1 583.9 385.8' stroke='%231A746C' stroke-width='1.5'/%3E%3Cpath d='M85.6 278.7A238 238 0 0 1 459.9 127.5' stroke='%2374B3A6' stroke-opacity='.4' stroke-width='7'/%3E%3Cpath d='M129.3 218.6A216 216 0 0 1 407.9 122.7' stroke='%23BFE3D9' stroke-opacity='.26' stroke-width='7'/%3E%3Cpath d='M162.4 411A182 182 0 1 1 474.3 416.4' stroke='%231A746C' stroke-width='1.5'/%3E%3Cpath d='M172.8 304.5A148 148 0 0 1 462.3 279.2' stroke='%2374B3A6' stroke-opacity='.3' stroke-width='1.5'/%3E%3Cpath d='M217.5 270A114 114 0 0 1 409.8 249.8' stroke='%231A746C' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (max-width: 979.98px) {
  :root { --header-h: 68px; }
}

@media (max-width: 599.98px) {
  :root { --gutter: 16px; }
}

/* ── CONTEXT: DARK & LIGHT SURFACES ──
   Components read --c-* variables, so they adapt automatically when placed
   on a deep teal surface. Light surfaces reset them. */
.on-dark,
.section--deep,
.hero,
.page-hero--deep,
.cta-band,
.visual,
.card--deep,
.group-band--deep,
.callout--deep,
.site-footer {
  --c-bg: var(--rx-deep);
  --c-heading: #FFFFFF;
  --c-text: rgba(255, 255, 255, .9);
  --c-lead: rgba(255, 255, 255, .84);
  --c-muted: rgba(255, 255, 255, .74);
  --c-accent: var(--rx-foam);
  --c-accent-strong: #FFFFFF;
  --c-line: rgba(255, 255, 255, .16);
  --c-surface: rgba(255, 255, 255, .06);
  --c-surface-alt: rgba(255, 255, 255, .08);
  --c-chip-bg: rgba(255, 255, 255, .1);
  --c-focus: var(--rx-foam);
  --c-card-shadow: none;
  --bp-bg: #FFFFFF;
  --bp-fg: var(--rx-deep);
  --bp-bg-h: var(--rx-foam);
  --bp-fg-h: var(--rx-deep);
  --bp-sh-h: 0 10px 24px -12px rgba(0, 0, 0, .55);
  --bs-fg: #FFFFFF;
  --bs-bd: rgba(255, 255, 255, .5);
  --bs-bg-h: rgba(255, 255, 255, .1);
  --bs-fg-h: #FFFFFF;
  --bs-bd-h: #FFFFFF;
  --arcs-img: var(--arcs-dark);
  color: var(--c-text);
  background-color: var(--c-bg);
}

:root,
.on-light,
.card--light,
.visual--tint,
.stats--card {
  --c-bg: var(--rx-white);
  --c-heading: var(--rx-deep);
  --c-text: var(--rx-ink);
  --c-lead: var(--rx-ink-soft);
  --c-muted: var(--rx-muted);
  --c-accent: var(--rx-teal);
  --c-accent-strong: var(--rx-deep);
  --c-line: var(--rx-line);
  --c-surface: var(--rx-white);
  --c-surface-alt: var(--rx-light);
  --c-chip-bg: var(--rx-light);
  --c-focus: var(--rx-teal);
  --c-card-shadow: var(--sh-1);
  --bp-bg: var(--rx-teal);
  --bp-fg: #FFFFFF;
  --bp-bg-h: var(--rx-deep);
  --bp-fg-h: #FFFFFF;
  --bp-sh-h: var(--sh-btn);
  --bs-fg: var(--rx-teal);
  --bs-bd: var(--rx-teal);
  --bs-bg-h: var(--rx-light);
  --bs-fg-h: var(--rx-deep);
  --bs-bd-h: var(--rx-deep);
  --arcs-img: var(--arcs-light);
  color: var(--c-text);
  background-color: var(--c-bg);
}

/* ── RESET & BASE ── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--rx-ink);
  background: var(--rx-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }
table { border-collapse: collapse; }
strong, b { font-weight: 700; }
code { padding: .1em .35em; border-radius: 4px; background: var(--c-chip-bg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; }
[hidden] { display: none !important; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--c-accent-strong); }
a[href^="tel:"] { white-space: nowrap; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

::selection { background: var(--rx-foam); color: var(--rx-deep); }

:where(p, ul, ol, blockquote, table, figure) + :where(p, ul, ol, blockquote, table, figure) { margin-top: 1em; }

/* ── CMS WRAPPERS ── (render.php wraps every page in these) */
main.rp-page,
.rp-page { display: block; padding: 0; margin: 0; }
.rp-page > .rp-container,
.rp-container { max-width: none; width: auto; padding: 0; margin: 0; }

/* ── UTILITIES ── */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.text-center { text-align: center; }
.text-muted { color: var(--c-muted); }
.text-accent { color: var(--c-accent); }
.measure { max-width: 64ch; }
.mx-auto { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: var(--s-4) !important; }
.mt-md { margin-top: var(--s-6) !important; }
.mt-lg { margin-top: var(--s-8) !important; }
.mb-0 { margin-bottom: 0 !important; }
.flow > * + * { margin-top: var(--flow-space, 1em); }
.divider { height: 1px; margin: var(--s-8) 0; border: 0; background: var(--c-line); }

/* ── LAYOUT: CONTAINER & SECTIONS ── */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { --container: var(--container-narrow); }
.container--wide { --container: 1360px; }

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--section-y);
}
.section--tint {
  --c-surface-alt: var(--rx-white);
  --c-chip-bg: var(--rx-white);
  background-color: var(--rx-light);
}
.section--tint :is(.card:not(.card--deep), .accordion--cards .accordion__item, .steps--grid .step, .table-wrap, .group-band:not(.group-band--deep), .form-card, .stats--card) {
  --c-chip-bg: var(--rx-light);
  --c-surface-alt: var(--rx-light);
}
.section--deep { background-image: radial-gradient(900px 520px at 88% 0%, rgba(26, 116, 108, .45), transparent 65%); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--line { border-top: 1px solid var(--rx-line); }
.section--overflow { overflow: visible; } /* needed when a child uses .pull-up */

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.section-head > * + * { margin-top: var(--s-4); }
.section-head > :is(h2, .h2, h3) + * { margin-top: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--split { display: grid; gap: var(--s-5) var(--s-9); max-width: none; align-items: end; }
.section-head--split > * + *,
.section-head--split > :is(h2, .h2, h3) + * { margin-top: 0; }
.section-head--split .section-head__main > * + * { margin-top: var(--s-4); }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.section-foot--center { justify-content: center; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .display {
  font-family: var(--font);
  font-weight: 700;
  color: var(--c-heading);
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.024em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -.012em; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: 0; }
.display { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -.03em; }
p, li { text-wrap: pretty; }

.lead {
  max-width: 60ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-lead);
}
.small, small { font-size: var(--fs-sm); }
.hl { color: var(--c-accent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 18px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  opacity: .7;
}
.eyebrow--plain::before { display: none; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose > :is(h2, h3):not(:first-child) { margin-top: 1.8em; }
.prose > :is(h2, h3) + * { margin-top: .6em; }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--c-accent); }

/* ── ICONS ── (inline SVG, stroke-based, currentColor) */
.icon {
  display: inline-block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1.25rem; height: 1.25rem; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--fill { fill: currentColor; stroke: none; }

.icon-box {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--c-chip-bg);
  color: var(--c-accent);
}
.icon-box--round { border-radius: 50%; }
.icon-box--solid { background: var(--rx-teal); color: #FFFFFF; }

/* ── BUTTONS & LINKS ── */
.btn {
  --btn-bg: var(--bp-bg);
  --btn-fg: var(--bp-fg);
  --btn-bd: transparent;
  --btn-bg-h: var(--bp-bg-h);
  --btn-fg-h: var(--bp-fg-h);
  --btn-bd-h: transparent;
  --btn-sh-h: var(--bp-sh-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1.5px var(--btn-bd);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover {
  background: var(--btn-bg-h);
  box-shadow: inset 0 0 0 1.5px var(--btn-bd-h), var(--btn-sh-h);
  color: var(--btn-fg-h);
}
.btn:active { transform: translateY(1px); }
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--bs-fg);
  --btn-bd: var(--bs-bd);
  --btn-bg-h: var(--bs-bg-h);
  --btn-fg-h: var(--bs-fg-h);
  --btn-bd-h: var(--bs-bd-h);
  --btn-sh-h: 0 0 0 0 transparent;
}
.btn--light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--rx-deep);
  --btn-bg-h: var(--rx-foam);
  --btn-fg-h: var(--rx-deep);
  --btn-sh-h: 0 10px 24px -12px rgba(0, 0, 0, .55);
}
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(255, 255, 255, .5);
  --btn-bg-h: rgba(255, 255, 255, .1);
  --btn-fg-h: #FFFFFF;
  --btn-bd-h: #FFFFFF;
  --btn-sh-h: 0 0 0 0 transparent;
}
.btn--lg { min-height: 56px; padding: .9rem 1.75rem; font-size: 1.0625rem; }
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn .icon { width: 1.2em; height: 1.2em; }

.btn--arrow::after,
.link-arrow::after {
  content: '';
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat;
  mask: var(--i-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.btn--arrow:hover::after,
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--external::after {
  -webkit-mask-image: var(--i-external);
  mask-image: var(--i-external);
}
.link-arrow--external:hover::after { transform: translate(2px, -2px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.btn-row--center { justify-content: center; }
@media (max-width: 479.98px) {
  .btn-row--stack-mobile { flex-direction: column; align-items: stretch; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px; /* tap target */
  padding-block: .55rem;
  color: var(--c-accent);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .25em;
}
.link-arrow:hover { color: var(--c-accent-strong); text-decoration-color: currentColor; }

/* ── LOGOS ── inline SVG symbols defined once in header.php (#rx-logo, #cs-logo)
   and drawn with <svg class="rx-logo|cs-logo"><use href="#…"/></svg>. They need no
   image file. Colours are inherited into the symbol: fill = "East",
   color = "Rec" and the thick arc, stroke = the thin arc. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.rx-logo { display: block; width: auto; aspect-ratio: 329.4 / 127.9; fill: var(--rx-deep); color: var(--rx-teal); stroke: #479489; }
.rx-logo--white { fill: #FFFFFF; color: var(--rx-foam); stroke: var(--rx-sea); }
.cs-logo { display: block; width: auto; aspect-ratio: 1200 / 508; color: #134464; }
.cs-logo--white { color: #FFFFFF; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -120px;
  left: var(--gutter);
  z-index: 1000;
  padding: .8rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--rx-deep);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; color: #FFFFFF; outline: 3px solid var(--rx-foam); outline-offset: 2px; }
.skip-target { display: block; height: 0; outline: none; }

/* ── HEADER & NAV ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: #FFFFFF; }
}
.site-header.is-scrolled {
  border-bottom-color: var(--rx-line);
  box-shadow: 0 8px 24px -18px rgba(14, 59, 58, .35);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: var(--header-h);
}
.site-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: var(--r-xs);
}
.site-logo :is(img, svg) { width: auto; height: 40px; }

.site-nav__list { display: flex; align-items: center; gap: .125rem; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .8rem;
  border-radius: var(--r-xs);
  color: var(--rx-ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  right: .8rem;
  bottom: 7px;
  left: .8rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rx-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease);
}
.site-nav__link:hover { color: var(--rx-teal); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--rx-teal); }
.site-nav__item--cta { margin-left: .875rem; }
.site-nav__cta { min-height: 44px; padding: .55rem 1.3rem; font-size: .9375rem; }
.site-nav__cta[aria-current="page"] { --btn-bg: var(--rx-deep); }
.site-nav__extra { display: none; }

.nav-toggle {
  position: relative;
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--rx-deep);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 13px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle__bars { top: 23px; transition: background-color 0s .12s; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  left: 0;
  transition: top .2s var(--ease) .12s, transform .2s var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; width: 15px; }
.site-header.is-open .nav-toggle__bars { background-color: transparent; transition-delay: 0s; }
.site-header.is-open .nav-toggle__bars::before,
.site-header.is-open .nav-toggle__bars::after {
  top: 0;
  width: 22px;
  transition: top .2s var(--ease), transform .2s var(--ease) .12s;
}
.site-header.is-open .nav-toggle__bars::before { transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after { transform: rotate(-45deg); }

@media (max-width: 1099.98px) {
  .site-nav__link { padding-inline: .6rem; }
  .site-nav__link::after { right: .6rem; left: .6rem; }
  .site-nav__item--cta { margin-left: .5rem; }
}

@media (max-width: 979.98px) {
  .site-logo :is(img, svg) { height: 36px; }
  .nav-toggle { display: inline-block; }
  .site-header.is-open { background: #FFFFFF; border-bottom-color: var(--rx-line); }
  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding: var(--s-3) var(--gutter) var(--s-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #FFFFFF;
    border-top: 1px solid var(--rx-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .site-header.is-open .site-nav,
  html:not(.js) .nav-toggle:focus + .site-nav,
  html:not(.js) .site-nav:focus-within {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--rx-line); }
  .site-nav__link {
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    padding: .75rem 0;
    color: var(--rx-deep);
    font-size: 1.25rem;
    font-weight: 600;
  }
  .site-nav__link::after {
    position: static;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0;
    background-color: var(--rx-sea);
    -webkit-mask: var(--i-arrow) center / contain no-repeat;
    mask: var(--i-arrow) center / contain no-repeat;
    transform: none;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after { transform: translateX(3px); background-color: var(--rx-teal); }
  .site-nav__item--cta { margin: var(--s-6) 0 0; border-bottom: 0; }
  .site-nav__cta { width: 100%; min-height: 56px; font-size: 1.0625rem; }
  .site-nav__extra {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rx-line);
    font-size: var(--fs-sm);
  }
  .site-nav__extra a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rx-muted); text-decoration: none; }
  .site-nav__extra a:hover { color: var(--rx-teal); }
  html.nav-open { overflow: hidden; }
}

/* Nav menus: the Sectors and Roles we place drop-downs (header.php lists their pages).
   With JS a click or Enter toggles them; without JS they open on hover and focus. */
.site-nav__item--has-menu { position: relative; }
.site-nav__toggle { gap: .35rem; border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.site-nav__toggle::before {
  content: '';
  order: 2;
  width: .8rem;
  height: .8rem;
  background-color: currentColor;
  -webkit-mask: var(--i-chevron) center / contain no-repeat;
  mask: var(--i-chevron) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.site-nav__item--has-menu.is-open > .site-nav__toggle::before { transform: rotate(180deg); }
.site-nav__item.is-current > .site-nav__toggle { color: var(--rx-teal); }
.site-nav__menu {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  z-index: 110;
  display: none;
  width: max-content;
  min-width: 17rem;
  max-width: 24rem;
  padding: .5rem;
  border: 1px solid var(--rx-line);
  border-radius: var(--r-md);
  background: #FFFFFF;
  box-shadow: var(--sh-3);
}
.site-nav__item--has-menu.is-open > .site-nav__menu,
html:not(.js) .site-nav__item--has-menu:focus-within > .site-nav__menu { display: block; }
.site-nav__menu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .75rem;
  border-radius: var(--r-xs);
  color: var(--rx-ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.site-nav__menu-link:hover { background: var(--rx-light); color: var(--rx-deep); }
.site-nav__menu-link[aria-current="page"] { color: var(--rx-teal); font-weight: 600; }
.site-nav__menu-link--all { margin-bottom: .25rem; border-bottom: 1px solid var(--rx-line); border-radius: var(--r-xs) var(--r-xs) 0 0; color: var(--rx-teal); font-weight: 600; }
@media (min-width: 980px) and (hover: hover) {
  .site-nav__item--has-menu:hover > .site-nav__menu { display: block; }
}
@media (min-width: 980px) {
  .site-nav__item.is-current > .site-nav__toggle::after { transform: scaleX(1); }
  /* Bridges the gap above the panel so a pointer moving down does not close it. */
  .site-nav__menu::before { content: ''; position: absolute; right: 0; bottom: 100%; left: 0; height: .5rem; }
}
@media (max-width: 979.98px) {
  .site-nav__toggle { width: 100%; text-align: left; }
  .site-nav__toggle::before { width: 1.1rem; height: 1.1rem; }
  .site-nav__toggle::after { display: none; }
  .site-nav__menu { position: static; display: none; width: auto; min-width: 0; max-width: none; padding: 0 0 .75rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .site-nav__item--has-menu.is-open > .site-nav__menu,
  html:not(.js) .site-nav__menu { display: block; }
  .site-nav__menu-link { min-height: 48px; padding: .5rem 0 .5rem 1rem; border-left: 2px solid var(--rx-line); border-radius: 0; font-size: 1.0625rem; }
  .site-nav__menu-link--all { margin-bottom: 0; border-bottom: 0; }
}
/* ── FOOTER ── */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  background-color: var(--rx-deep);
  font-size: var(--fs-sm);
}
.site-footer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 900px;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  opacity: .32;
  transform: translate(-50%, 50%) scaleX(-1);
  pointer-events: none;
}
.site-footer a { color: var(--c-text); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--rx-sea); }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8) var(--s-7);
}
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
}
.site-footer__logo { display: inline-flex; border-radius: var(--r-xs); }
.site-footer__logo :is(img, svg) { width: auto; height: 54px; }
.site-footer__tagline {
  max-width: 28ch;
  margin-top: var(--s-5);
  color: var(--c-lead);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: var(--s-5);
  min-height: 44px;
  font-weight: 600;
}
.site-footer__social .icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: .55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background-color var(--dur) var(--ease);
}
.site-footer__social:hover .icon { background: var(--rx-teal); }
.site-footer__title {
  margin-bottom: var(--s-4);
  color: var(--rx-foam);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.3;
  text-transform: uppercase;
}
.site-footer__links li + li { margin-top: .125rem; }
.site-footer__links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding-block: .3rem; }
.site-footer__links .is-external::after {
  content: '';
  width: .9em;
  height: .9em;
  background-color: var(--rx-sea);
  -webkit-mask: var(--i-external) center / contain no-repeat;
  mask: var(--i-external) center / contain no-repeat;
}
.site-footer__email { display: inline-flex; min-height: 36px; align-items: center; font-weight: 600; font-size: 1rem; }
.site-footer__office { margin-top: var(--s-4); color: var(--c-muted); line-height: 1.55; }
.site-footer__office strong { display: block; color: #FFFFFF; font-weight: 600; }
.site-footer__office a { display: inline-flex; min-height: 32px; align-items: center; color: var(--c-text); }
.site-footer__group-logo { display: inline-flex; border-radius: var(--r-xs); }
.site-footer__group-logo :is(img, svg) { width: auto; height: 54px; }
.site-footer__group-text { max-width: 26ch; margin-top: var(--s-4); color: var(--c-muted); line-height: 1.5; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-block: var(--s-6);
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.site-footer__bottom p { margin: 0; }
.site-footer__company { flex: 1 1 100%; order: 3; line-height: 1.55; } /* company details on their own line, under the copyright and legal links */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer__legal a { display: inline-flex; min-height: 32px; align-items: center; color: var(--c-muted); }

/* ── ARCS ── decorative concentric line arcs (always aria-hidden) */
.arcs {
  position: absolute;
  z-index: -1;
  width: var(--arcs-size, 640px);
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  pointer-events: none;
}
/* Corner variants put the arcs' centre on the corner and rotate so the strokes
   sweep into the section rather than away from it. */
.arcs--tr { top: 0; right: 0; transform: translate(50%, -50%) rotate(-90deg); }
.arcs--tl { top: 0; left: 0; transform: translate(-50%, -50%) scaleX(-1) rotate(-90deg); }
.arcs--br { right: 0; bottom: 0; transform: translate(50%, 50%); }
.arcs--bl { bottom: 0; left: 0; transform: translate(-50%, 50%) scaleX(-1); }
.arcs--r { top: 50%; right: 0; transform: translate(45%, -38%); }
.arcs--l { top: 50%; left: 0; transform: translate(-45%, -38%) scaleX(-1); }
.arcs--sm { --arcs-size: 380px; }
.arcs--lg { --arcs-size: 900px; }
.arcs--faint { opacity: .55; }
@media (max-width: 767.98px) {
  .arcs { --arcs-size: 440px; }
  .arcs--sm { --arcs-size: 280px; }
  .arcs--lg { --arcs-size: 600px; }
}

/* ── HERO (HOME) ── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  background-image:
    radial-gradient(760px 560px at 82% 38%, rgba(26, 116, 108, .62), transparent 68%),
    linear-gradient(180deg, rgba(9, 37, 36, 0) 60%, rgba(9, 37, 36, .55));
}
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 1040px;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  transform: translate(34%, -40%);
  pointer-events: none;
}
.hero--overlap { padding-bottom: calc(clamp(4rem, 2.5rem + 6vw, 8.5rem) + 72px); }
.hero__grid { display: grid; align-items: center; gap: var(--s-8); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(3rem, 1rem + 4vw, 6rem); }
}
.hero__content > .eyebrow { margin-bottom: var(--s-5); }
.hero__title { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -.03em; }
.hero__lead { max-width: 36em; margin-top: var(--s-5); color: var(--c-lead); font-size: var(--fs-lg); line-height: 1.55; }
.hero__actions { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.hero__note { margin-top: var(--s-6); color: var(--c-muted); font-size: var(--fs-sm); }
@media (max-width: 767.98px) {
  .hero::before { top: 0; width: 620px; transform: translate(46%, -34%); opacity: .8; }
}

/* ── PAGE HERO ── (inner pages; holds the page's single <h1>) */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  background-color: var(--rx-light);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 820px;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  transform: translate(30%, -34%);
  pointer-events: none;
}
.page-hero--deep {
  background-color: var(--rx-deep);
  background-image: radial-gradient(700px 480px at 85% 30%, rgba(26, 116, 108, .6), transparent 68%);
}
.page-hero--plain::before { display: none; }
.page-hero__content { max-width: 52rem; }
.page-hero__content > .eyebrow { margin-bottom: var(--s-4); }
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.024em; }
.page-hero__lead { max-width: 34em; margin-top: var(--s-5); color: var(--c-lead); font-size: var(--fs-lg); line-height: 1.55; }
.page-hero__actions { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.page-hero__actions .btn { min-height: 56px; padding: .9rem 1.75rem; font-size: 1.0625rem; } /* hero buttons are always the large size, as on the home hero */
@media (max-width: 479.98px) {
  .page-hero__actions.btn-row { flex-direction: column; align-items: stretch; } /* full-width stacked on phones, on every page */
}
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__content { margin-inline: auto; }
.page-hero--center .page-hero__lead { margin-inline: auto; }
.page-hero--center .btn-row { justify-content: center; }
@media (max-width: 767.98px) {
  .page-hero::before { top: 0; width: 460px; transform: translate(48%, -38%); opacity: .75; }
}

/* ── STATS ── (count-up: put data-count on a span holding only the number) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: var(--s-5) var(--s-5); border-left: 1px solid var(--c-line); }
.stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.stat:nth-child(n+3) { border-top: 1px solid var(--c-line); }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: var(--s-2) var(--s-6); }
  .stat:nth-child(odd) { padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
  .stat:nth-child(n+3) { border-top: 0; }
  .stat:first-child { padding-left: 0; border-left: 0; }
}
.stat__value {
  color: var(--c-heading);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.stat__value [data-count] { display: inline-block; }
@media (max-width: 479.98px) {
  .stat__value { font-size: clamp(1.75rem, 1rem + 3.4vw, 2.25rem); } /* keeps "100,000+" inside a half-width column */
}
.stat__unit { color: var(--c-accent); }
.stat__label { margin-top: var(--s-3); color: var(--c-muted); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.stats--center .stat,
.stats--center .stat:nth-child(odd),
.stats--center .stat:first-child { padding-inline: var(--s-4); text-align: center; }
.stats--card {
  padding: clamp(1.25rem, .8rem + 1.8vw, 2.5rem) clamp(1.25rem, .6rem + 2.4vw, 3rem);
  border-radius: var(--r-xl);
  background: #FFFFFF;
  box-shadow: var(--sh-3);
}
.stats-note { margin-top: var(--s-5); color: var(--c-muted); font-size: var(--fs-xs); letter-spacing: .02em; }
.pull-up { position: relative; z-index: 2; margin-top: -72px; }

/* ── CARDS & GRID ── */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 640px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-card-shadow);
  color: var(--c-text);
}
.card > .icon-box { margin-bottom: var(--s-3); }
.card__eyebrow { color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card__title { color: var(--c-heading); font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); line-height: 1.3; letter-spacing: -.01em; }
.card__title a { color: inherit; text-decoration: none; }
.card__text { color: var(--c-muted); }
.card__footer { margin-top: auto; padding-top: var(--s-3); }
.card__num { color: var(--c-accent); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.card--tint { --c-chip-bg: var(--rx-white); border-color: transparent; background: var(--c-surface-alt); box-shadow: none; } /* white icon boxes and chips, so they show on the tint */
.card--flat { box-shadow: none; }
.card--deep {
  border-color: transparent;
  background-color: var(--rx-deep);
  background-image: radial-gradient(420px 300px at 100% 0%, rgba(26, 116, 108, .55), transparent 70%);
}
.card--light { background: #FFFFFF; }
/* Cards on deep surfaces read as frosted glass over the arcs. */
:is(.on-dark, .section--deep, .hero, .page-hero--deep, .cta-band) .card:not(.card--light):not(.card--deep) {
  background-color: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
a.card,
.card--link { text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
a.card:hover,
.card--link:hover { border-color: rgba(26, 116, 108, .35); box-shadow: var(--sh-3); transform: translateY(-4px); }
/* A linked deep card on a light section: its own foam focus ring would vanish on white. */
.section:not(.section--deep) a.card--deep:focus-visible { outline-color: var(--rx-teal); }
.card--link .stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card--arc { overflow: hidden; isolation: isolate; }
.card--arc::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 300px;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  transform: translate(50%, 50%);
  pointer-events: none;
}
.card--center { align-items: center; text-align: center; }

/* ── FEATURES & CHECKLIST ── */
.features { display: grid; gap: var(--s-7) var(--s-8); }
@media (min-width: 720px) {
  .features--2, .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature { display: flex; align-items: flex-start; gap: var(--s-4) var(--s-5); }
.feature__body { min-width: 0; }
.feature__title { color: var(--c-heading); font-size: var(--fs-h4); line-height: 1.3; }
.feature__text { margin-top: var(--s-2); color: var(--c-muted); }
.features--stacked .feature { flex-direction: column; }

.checklist { display: grid; gap: var(--s-3); }
.checklist > li { position: relative; padding-left: 2.25rem; }
.checklist > li::before,
.checklist > li::after {
  content: '';
  position: absolute;
  top: .1em;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.checklist > li::before { border-radius: 50%; background: var(--c-chip-bg); }
.checklist > li::after {
  background-color: var(--c-accent);
  -webkit-mask: var(--i-check) center / .95rem no-repeat;
  mask: var(--i-check) center / .95rem no-repeat;
}
.checklist--lg > li { font-size: var(--fs-lg); }
@media (min-width: 720px) {
  .checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-7); }
}

/* ── STEPS / TIMELINE ── (auto-numbered with CSS counters) */
.steps { counter-reset: step; }
.step {
  counter-increment: step;
  position: relative;
  min-height: 3rem;
  padding: .6rem 0 var(--s-7) 4.5rem;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1.5px var(--rx-sea);
  color: var(--c-accent);
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: '';
  position: absolute;
  top: 3.6rem;
  bottom: .6rem;
  left: calc(1.5rem - 1px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--rx-sea), var(--c-line));
  opacity: .6;
}
.step:last-child::after { display: none; }
.step__meta { margin-bottom: var(--s-2); color: var(--c-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.step__title { color: var(--c-heading); font-size: var(--fs-h4); line-height: 1.35; }
.step__text { margin-top: var(--s-2); color: var(--c-muted); }
.step > .chip-list { margin-top: var(--s-4); }
.step--filled::before { background: var(--rx-teal); box-shadow: none; color: #FFFFFF; }

.steps--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 640px) {
  .steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .steps--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.steps--grid .step {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-card-shadow);
}
.steps--grid .step::before {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: var(--s-5);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -.03em;
  place-items: start;
}
.steps--grid .step--filled::before { color: var(--c-accent); } /* grid steps have no filled disc */
.steps--grid .step::after {
  top: calc(clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) + 1.05rem);
  right: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  bottom: auto;
  left: auto;
  display: block;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, var(--c-line), var(--rx-sea));
}

/* ── LADDER ── (seniority levels as cards that climb from left to right)
   The bars show the level, so the levels are never numbered: internal tier
   numbers stay off the site. ladder--2 is for pages that stop at two levels,
   ladder--4 for four (the commercial pages). */
.ladder {
  --ladder-rise: clamp(1.75rem, .25rem + 2.5vw, 3rem);
  display: grid;
  gap: var(--grid-gap);
}
@media (min-width: 880px) {
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ladder > :nth-child(1) { margin-top: calc(var(--ladder-rise) * 2); }
  .ladder > :nth-child(2) { margin-block: var(--ladder-rise); }
  .ladder > :nth-child(3) { margin-bottom: calc(var(--ladder-rise) * 2); }
  /* Two levels keep the width of two of the three columns. */
  .ladder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc((100% - 2 * var(--grid-gap)) / 3 * 2 + var(--grid-gap)); }
  .ladder--2 > :nth-child(1) { margin-block: var(--ladder-rise) 0; }
  .ladder--2 > :nth-child(2) { margin-block: 0 var(--ladder-rise); }
  /* Four levels sit in two flat columns until there is room for four. */
  .ladder--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder--4 > :nth-child(n) { margin-block: 0; }
}
@media (min-width: 1100px) {
  .ladder--4 { --ladder-rise: clamp(1.25rem, .2rem + 1.9vw, 2.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ladder--4 > :nth-child(1) { margin-block: calc(var(--ladder-rise) * 3) 0; }
  .ladder--4 > :nth-child(2) { margin-block: calc(var(--ladder-rise) * 2) var(--ladder-rise); }
  .ladder--4 > :nth-child(3) { margin-block: var(--ladder-rise) calc(var(--ladder-rise) * 2); }
  .ladder--4 > :nth-child(4) { margin-block: 0 calc(var(--ladder-rise) * 3); }
  .ladder--4 .ladder__step { padding: clamp(1.25rem, .9rem + .9vw, 1.75rem); }
}
.ladder__step {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-card-shadow);
}
:is(.on-dark, .section--deep, .hero, .page-hero--deep, .cta-band) .ladder__step {
  background-color: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
/* The top level is solid teal, so the climb ends somewhere. */
.ladder > .ladder__step:last-child {
  --c-heading: #FFFFFF;
  --c-text: rgba(255, 255, 255, .92);
  --c-accent: var(--rx-foam);
  border-color: transparent;
  background-color: var(--rx-teal);
  background-image: radial-gradient(420px 300px at 100% 0%, rgba(191, 227, 217, .22), transparent 70%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ladder__bars { display: flex; align-items: flex-end; gap: 5px; height: 2rem; margin-bottom: var(--s-5); }
.ladder__bars > span { width: 9px; height: 40%; border-radius: 2px; background: var(--c-accent); }
.ladder__bars > span:nth-child(2) { height: 70%; }
.ladder__bars > span:nth-child(3) { height: 100%; }
.ladder--2 .ladder__bars > span:nth-child(1) { height: 55%; }
.ladder--2 .ladder__bars > span:nth-child(2) { height: 100%; }
.ladder--4 .ladder__bars > span:nth-child(1) { height: 25%; }
.ladder--4 .ladder__bars > span:nth-child(2) { height: 50%; }
.ladder--4 .ladder__bars > span:nth-child(3) { height: 75%; }
.ladder--4 .ladder__bars > span:nth-child(4) { height: 100%; }
/* Bars above a step's own level stay faint. */
.ladder > :nth-child(1) .ladder__bars > :nth-child(n+2),
.ladder > :nth-child(2) .ladder__bars > :nth-child(n+3),
.ladder > :nth-child(3) .ladder__bars > :nth-child(n+4) { opacity: .3; }
.ladder__title { color: var(--c-heading); font-size: var(--fs-h4); line-height: 1.35; }
.ladder__roles { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.ladder__roles > li { position: relative; padding-left: 1.25rem; color: var(--c-text); }
.ladder__roles > li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ── CHIPS / TAGS ── */
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .3rem .9rem;
  border-radius: var(--r-pill);
  background: var(--c-chip-bg);
  color: var(--c-accent-strong);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.chip .icon { width: 1rem; height: 1rem; color: var(--c-accent); }
.chip--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--rx-line-strong); }
.on-dark .chip--outline,
.section--deep .chip--outline,
.hero .chip--outline,
.cta-band .chip--outline { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.chip--accent { background: var(--rx-teal); color: #FFFFFF; }
.chip--foam { background: var(--rx-foam); color: var(--rx-deep); }
.chip--lg { min-height: 2.5rem; padding: .45rem 1.1rem; font-size: 1rem; }
a.chip { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.chip:hover { background: var(--rx-teal); color: #FFFFFF; }

/* ── SPLIT ── (text + visual) */
.split { display: grid; align-items: center; gap: var(--s-8); }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 1rem + 4vw, 6rem); }
  .split--reverse > :first-child { order: 2; }
  .split--60-40 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--40-60 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}
.split--top { align-items: start; }
.split__body > * + * { margin-top: var(--s-5); }
.split__body > .eyebrow + * { margin-top: var(--s-4); }
.split__body > .btn-row { margin-top: var(--s-7); }
.split__media { position: relative; min-width: 0; }

/* ── VISUAL ── (brand panel used in place of photography) */
.visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-3);
  min-height: clamp(300px, 22rem + 4vw, 440px);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--r-xl);
  background-image: radial-gradient(520px 420px at 80% 10%, rgba(26, 116, 108, .75), transparent 70%);
}
.visual::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 140%;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  transform: translate(50%, -50%) rotate(-90deg);
  pointer-events: none;
}
.visual--tint { background-color: var(--rx-light); background-image: none; }
.section--tint .visual--tint { background-color: #FFFFFF; }
.visual__figure { color: var(--c-heading); font-size: clamp(4rem, 2.8rem + 5vw, 7.5rem); font-weight: 700; line-height: .92; letter-spacing: -.045em; }
.visual__title { color: var(--c-heading); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.visual__caption { max-width: 30ch; color: var(--c-lead); font-size: var(--fs-lg); line-height: 1.45; }
.visual > .chip-list { margin-top: var(--s-3); }

/* ── CTA BAND ── */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: var(--s-6) var(--s-9);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, .8rem + 4.4vw, 5rem);
  border-radius: var(--r-xl);
  background-image: radial-gradient(700px 420px at 100% 100%, rgba(26, 116, 108, .7), transparent 70%);
}
.cta-band::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 720px;
  aspect-ratio: 1;
  background: var(--arcs-img) center / contain no-repeat;
  transform: translate(30%, 52%);
  pointer-events: none;
}
@media (min-width: 960px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band__title { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
.cta-band__text { max-width: 48ch; margin-top: var(--s-4); color: var(--c-lead); font-size: var(--fs-lg); line-height: 1.5; }
.cta-band__content > .eyebrow { margin-bottom: var(--s-4); }
.cta-band--center { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
.cta-band--center .cta-band__text { margin-inline: auto; }
.cta-band--center .btn-row { justify-content: center; }
@media (max-width: 599.98px) {
  .cta-band { border-radius: var(--r-lg); }
  .cta-band::before { width: 460px; }
}

/* ── GROUP BAND ── (CloudScope Group logo + statement) */
.group-band {
  display: grid;
  align-items: center;
  gap: var(--s-6) clamp(2rem, 1rem + 4vw, 4.5rem);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}
@media (min-width: 900px) {
  .group-band { grid-template-columns: auto minmax(0, 1fr); }
  .group-band__logo { padding-right: clamp(2rem, 1rem + 4vw, 4.5rem); border-right: 1px solid var(--c-line); }
}
.group-band__logo { display: inline-flex; align-self: stretch; align-items: center; border-radius: var(--r-xs); }
.group-band__logo :is(img, svg) { width: auto; height: 76px; }
.group-band__body > * + * { margin-top: var(--s-4); }
.group-band__statement { color: var(--c-heading); font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.group-band--deep {
  border-color: transparent;
  background-color: var(--rx-deep);
  background-image: radial-gradient(600px 360px at 0% 0%, rgba(26, 116, 108, .5), transparent 70%);
  box-shadow: none;
}
.group-band--plain { padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 599.98px) {
  .group-band__logo :is(img, svg) { height: 60px; }
}

/* ── PERSON ── (no photography: initials avatar) */
.person { display: flex; align-items: center; gap: var(--s-5); }
.person__avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--rx-deep);
  color: #FFFFFF;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.person__avatar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--rx-sea);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-20deg);
}
.person__name { color: var(--c-heading); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.person__role { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.4; }
.person__body .link-arrow { margin-top: .1rem; font-size: var(--fs-sm); }

/* ── ACCORDION ── (<details>/<summary>; content stays in the HTML) */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5); /* column-gap only, so pages that turn the summary into a grid get no row gap */
  min-height: 64px;
  padding: var(--s-4) 0;
  color: var(--c-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ''; }
.accordion__summary::after {
  content: '';
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c-line);
  color: var(--c-accent);
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 2px, 2px 12px;
  transition: background-size .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.accordion__summary:hover { color: var(--c-accent); }
.accordion__summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--rx-sea); }
.accordion__summary:focus-visible { outline-offset: 4px; border-radius: var(--r-xs); }
.accordion__item[open] > .accordion__summary::after {
  background-color: var(--c-chip-bg);
  background-size: 12px 2px, 2px 0;
  box-shadow: inset 0 0 0 1.5px transparent;
  transform: rotate(180deg);
}
.accordion__label { display: block; min-width: 0; }
.accordion__sub { display: block; margin-top: .15rem; color: var(--c-muted); font-size: var(--fs-sm); font-weight: 400; }
.accordion__panel { max-width: 72ch; padding: 0 0 var(--s-6); color: var(--c-muted); }
.accordion__panel > * + * { margin-top: var(--s-4); }

.accordion--cards { display: grid; gap: var(--s-3); border-top: 0; }
.accordion--cards .accordion__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-card-shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.accordion--cards .accordion__item[open] { border-color: rgba(26, 116, 108, .3); box-shadow: var(--sh-2); }
.accordion--cards .accordion__summary { padding: var(--s-4) clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.accordion--cards .accordion__panel { max-width: none; padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--s-6); }

/* ── COMPARISON TABLE ── (last column = the RecEast option, highlighted) */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--c-card-shadow);
  -webkit-overflow-scrolling: touch;
}
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); line-height: 1.45; }
.compare-table caption { padding: var(--s-4) var(--s-5) 0; color: var(--c-muted); font-size: var(--fs-xs); text-align: left; caption-side: bottom; padding-bottom: var(--s-4); }
.compare-table th,
.compare-table td {
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  padding-block: 1.15rem;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.compare-table tbody th { width: 30%; color: var(--c-heading); font-weight: 600; }
.compare-table td { color: var(--c-muted); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table :is(th, td):last-child { background: var(--rx-light); color: var(--rx-deep); font-weight: 600; }
.compare-table thead th:last-child { background: var(--rx-deep); color: #FFFFFF; }
.compare-table--plain :is(th, td):last-child { background: none; font-weight: inherit; }
.compare-table--plain td:last-child { color: var(--c-muted); }
.compare-table--plain thead th:last-child { background: none; color: var(--c-muted); }
/* Tick/cross sit in a hanging indent, so wrapped cell text lines up after the icon. */
.compare-table :is(.is-yes, .is-no) { position: relative; padding-left: calc(1.35rem + 1.55em); }
.compare-table .is-yes::before,
.compare-table .is-no::before {
  content: '';
  position: absolute;
  top: calc(1.05rem + .18em);
  left: 1.35rem;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--rx-teal);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.compare-table .is-no::before {
  background-color: #7E9490;
  -webkit-mask-image: var(--i-cross);
  mask-image: var(--i-cross);
}
@media (max-width: 599.98px) {
  .compare-table { font-size: .875rem; }
  .compare-table th,
  .compare-table td { padding: .85rem .75rem; }
  .compare-table thead th { letter-spacing: .08em; }
  .compare-table :is(.is-yes, .is-no) { padding-left: calc(.75rem + 1.45em); }
  .compare-table :is(.is-yes, .is-no)::before { top: calc(.85rem + .18em); left: .75rem; }
}

/* ── FORMS ── */
.form { display: grid; gap: var(--s-5); }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: #FFFFFF;
  box-shadow: var(--sh-2);
}
.field { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.field__label { color: var(--rx-deep); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.field__req { margin-left: .15em; color: var(--rx-teal); }
.field__optional { color: var(--rx-muted); font-weight: 400; }
.input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1.5px solid var(--rx-field-border);
  border-radius: var(--r-sm);
  outline: 2px solid transparent;
  background-color: #FFFFFF;
  color: var(--rx-ink);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field select {
  padding-right: 2.75rem;
  background-image: var(--i-chevron);
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
}
.field :is(input, select, textarea)::placeholder { color: #627572; opacity: 1; }
.field :is(input, select, textarea):hover { border-color: var(--rx-sea); }
.field :is(input, select, textarea):focus {
  border-color: var(--rx-teal);
  box-shadow: 0 0 0 4px rgba(26, 116, 108, .18);
}
.field__help { color: var(--rx-muted); font-size: .875rem; line-height: 1.45; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  color: var(--rx-error);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
.field__error::before {
  content: '';
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .05rem;
  background-color: currentColor;
  -webkit-mask: var(--i-alert) center / contain no-repeat;
  mask: var(--i-alert) center / contain no-repeat;
}
.field--error :is(input, select, textarea),
.field [aria-invalid="true"] { border-color: var(--rx-error); }
.field--error :is(input, select, textarea):focus,
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .15); }

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--rx-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: .05rem 0 0;
  border: 1.5px solid var(--rx-field-border);
  border-radius: 6px;
  background: #FFFFFF center / 1rem no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:hover { border-color: var(--rx-teal); }
.check input:checked { border-color: var(--rx-teal); background-color: var(--rx-teal); background-image: var(--i-tick-white); }
.check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px #FFFFFF; }
.check input:focus-visible { outline: 3px solid var(--rx-teal); outline-offset: 2px; }
.check a { font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-2); }
.form-note { color: var(--rx-muted); font-size: var(--fs-xs); line-height: 1.5; }
.form-status { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-weight: 600; }
.form-status--success { background: #E8F3ED; color: var(--rx-success); }
.form-status--error { background: #FBEAE9; color: var(--rx-error); }

/* ── CALLOUT & QUOTE ── */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
  box-shadow: inset 4px 0 0 var(--rx-teal);
  color: var(--c-text);
}
.callout > .icon { margin-top: .15rem; color: var(--c-accent); }
.callout__title { color: var(--c-heading); font-size: var(--fs-h4); line-height: 1.3; }
.callout__body > * + * { margin-top: var(--s-2); }
.callout__body p { color: var(--c-muted); }
.callout--deep { box-shadow: inset 4px 0 0 var(--rx-sea); background-color: var(--rx-deep); }

.quote { position: relative; max-width: 48rem; padding-top: 3.5rem; }
.quote::before {
  content: '\201C';
  position: absolute;
  top: -.35rem;
  left: -.2rem;
  color: var(--rx-sea);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
}
.quote__text { color: var(--c-heading); font-size: clamp(1.375rem, 1.1rem + 1.15vw, 2.125rem); font-weight: 500; line-height: 1.32; letter-spacing: -.012em; text-wrap: balance; }
.quote__text p + p { margin-top: .5em; }
.quote__cite {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: var(--s-5);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
}
.quote__cite::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--rx-sea); }
.quote--center { margin-inline: auto; text-align: center; }
.quote--center::before { left: 50%; transform: translateX(-50%); }
.quote--center .quote__cite { justify-content: center; }

/* ── REVEAL & MOTION ── content is visible without JS; main.js only adds
   .is-revealing to elements as they enter the viewport (motion allowed). */
@keyframes rx-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
}
@keyframes rx-fade {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .reveal-on .is-revealing { animation: rx-rise .8s var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }
  .accordion__item[open] > .accordion__panel { animation: rx-fade .35s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── PAGE: blog (listing and posts) ── */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); color: var(--rx-muted); font-size: var(--fs-sm); font-weight: 500; }
.post-meta > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: var(--s-5); border-radius: 50%; background: var(--rx-sea); vertical-align: middle; }
.post-hero__crumb { color: inherit; text-decoration: none; }
.post-hero__crumb:hover, .post-hero__crumb:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.post-hero .page-hero__title { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem); max-width: 22em; }

.post-section { padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.post-body { max-width: none; font-size: var(--fs-base); line-height: 1.7; color: var(--rx-ink); }
.post-body h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: var(--lh-snug); color: var(--rx-deep); }
.post-body h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--rx-deep); }
.post-body h4 { font-size: var(--fs-h4); color: var(--rx-deep); }
.post-body a { color: var(--rx-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body ul, .post-body ol { padding-left: 1.25em; }
.post-body li + li { margin-top: .45em; }
.post-body li::marker { color: var(--rx-teal); }
.post-takeaways { margin-bottom: var(--s-6); }
.post-takeaways .callout__title { margin: 0 0 var(--s-3); color: var(--rx-deep); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.post-takeaways ul { margin: 0; padding-left: 1.15em; }
.post-takeaways li + li { margin-top: .5em; }
.post-takeaways li::marker { color: var(--rx-teal); }

.post-author { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rx-line); }
.post-author .person { align-items: flex-start; }
.post-author__bio { margin: var(--s-2) 0 var(--s-3); color: var(--rx-muted); font-size: var(--fs-sm); line-height: 1.6; }
.post-source { margin-top: var(--s-5); }
.post-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.blog-card { text-decoration: none; }
.blog-card .card__title { margin-top: var(--s-3); color: var(--rx-deep); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.blog-card .card__text { margin-top: var(--s-3); color: var(--rx-muted); }
.blog-card__meta { color: var(--rx-muted); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; }

.blog-card { overflow: hidden; }
.blog-card__band { display: block; height: 96px; margin: calc(-1 * clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)) calc(-1 * clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)) var(--s-3); background: var(--arcs-dark) right -150px bottom -330px / 460px no-repeat, radial-gradient(130% 120% at 15% 0%, #1C5652 0%, var(--rx-deep) 65%); }
.blog-grid .blog-card:nth-child(3n+2) .blog-card__band { background-position: left -170px bottom -300px, 0 0; }
.blog-grid .blog-card:nth-child(3n) .blog-card__band { background-position: right -60px top -260px, 0 0; }
.blog-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.blog-card:focus-visible { outline: 3px solid var(--rx-teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .blog-card { transition: none; } .blog-card:hover { transform: none; } }
/* ── PAGE: jobs ── */
.jobs-list { display: grid; gap: var(--grid-gap); }
.jobs-role { gap: var(--s-4); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.jobs-role:target { box-shadow: 0 0 0 3px var(--rx-foam), var(--sh-2); }
.jobs-role__chips { margin: 0; }
.jobs-role__title { margin: var(--s-2) 0 0; color: var(--rx-deep); font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: var(--lh-snug); }
.jobs-role__pay { margin: 0; color: var(--rx-teal); font-size: var(--fs-lg); font-weight: 700; }
.jobs-role__summary { margin: 0; color: var(--rx-ink-soft); }
.jobs-role__details { border-top: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line); }
.jobs-role__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; padding: var(--s-3) 0; color: var(--rx-deep); font-weight: 700; cursor: pointer; list-style: none; }
.jobs-role__toggle::-webkit-details-marker { display: none; }
.jobs-role__toggle::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--i-chevron) center / contain no-repeat; transition: transform var(--dur) var(--ease); }
.jobs-role__details[open] > .jobs-role__toggle::after { transform: rotate(180deg); }
.jobs-role__toggle:focus-visible { outline: 3px solid var(--rx-teal); outline-offset: 2px; border-radius: var(--r-xs); }
.jobs-role__advert { max-width: none; padding: var(--s-2) 0 var(--s-6); color: var(--rx-ink); }
.jobs-role__advert h3 { margin-top: 1.6em; color: var(--rx-deep); font-size: var(--fs-h4); }
.jobs-role__advert li::marker { color: var(--rx-teal); }
.jobs-role__actions { margin-top: var(--s-2); }
.jobs-role__ref { margin: 0; }
@media (max-width: 480px) { .jobs-role__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .jobs-role__toggle::after { transition: none; } }

/* ── PRINT ── */
@media print {
  .site-header, .nav-toggle, .skip-link, .arcs, .site-footer::before { display: none !important; }
  .hero, .page-hero, .section--deep, .cta-band, .site-footer { background: none !important; color: #000 !important; }
  .hero *, .section--deep *, .cta-band *, .site-footer * { color: #000 !important; }
  .ladder > .ladder__step:last-child { border-color: #000; background: none; }
  .ladder > .ladder__step:last-child * { color: #000 !important; }
}