/* =========================================================================
   Reimer Associates Design System — Brand Book page styles
   Three visual directions: A Corporate · B Utility · C Dynamic
   ========================================================================= */

/* --------- Reset & base --------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rmr-font-body);
  font-weight: var(--rmr-weight-normal);
  font-size: var(--rmr-text-base);
  line-height: var(--rmr-leading-base);
  color: var(--rmr-ink);
  background: var(--rmr-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-family: var(--rmr-font-display);
  font-weight: var(--rmr-weight-normal);
  line-height: var(--rmr-leading-tight);
  color: var(--rmr-primary);
}
p { margin: 0; }
a { color: var(--rmr-primary); text-decoration: none; }
a:hover { color: var(--rmr-navy-700); text-decoration: underline; }
code { font-family: var(--rmr-font-mono); font-size: .875em; color: var(--rmr-navy-700); background: var(--rmr-navy-50); padding: .1em .4em; border-radius: 3px; }

/* --------- Page chrome --------- */
.ds-shell { max-width: var(--rmr-container-xl); margin: 0 auto; padding: 0 var(--rmr-space-8); }
.ds-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .85rem;
  border-radius: 9999px;
  background: var(--rmr-navy-50);
  color: var(--rmr-primary);
  font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold);
  font-size: var(--rmr-text-xs);
  letter-spacing: var(--rmr-tracking-wide); text-transform: uppercase;
}
.ds-section { padding: var(--rmr-space-24) 0; border-top: 1px solid var(--rmr-gray-200); }
.ds-section:first-of-type { border-top: 0; }
.ds-section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--rmr-space-8); margin-bottom: var(--rmr-space-12); flex-wrap: wrap; }
.ds-section__kicker { font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); font-size: var(--rmr-text-xs); letter-spacing: var(--rmr-tracking-widest); text-transform: uppercase; color: var(--rmr-gold-600); margin-bottom: .5rem; }
/* Fluid: scales from ~26px on iPhone 13 (390px) up to 48px on desktop.
   max-width drops to none under 600px so long phrases wrap cleanly. */
.ds-section__title { font-size: clamp(1.5rem, 1rem + 4vw, var(--rmr-text-4xl)); line-height: 1.2; letter-spacing: -0.01em; max-width: 22ch; }
@media (max-width: 600px) { .ds-section__title { max-width: none; } }
.ds-section__lede { max-width: 48ch; font-size: var(--rmr-text-md); color: var(--rmr-ink); }

.ds-grid { display: grid; gap: var(--rmr-space-6); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .ds-grid--2,.ds-grid--3,.ds-grid--4 { grid-template-columns: 1fr; } }

/* --------- Tokens display --------- */
.swatch {
  border-radius: var(--rmr-radius-md);
  overflow: hidden;
  border: 1px solid var(--rmr-gray-200);
  background: var(--rmr-white);
  font-family: var(--rmr-font-body);
}
.swatch__chip { aspect-ratio: 4/3; }
.swatch__body { padding: var(--rmr-space-4); display:flex; flex-direction:column; gap: .15rem; }
.swatch__name { font-weight: var(--rmr-weight-bold); color: var(--rmr-ink); font-size: var(--rmr-text-sm); }
.swatch__hex { font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-700); text-transform: uppercase; }
.swatch__var { font-family: var(--rmr-font-mono); font-size: 11px; color: var(--rmr-gray-500); }

.ramp { display: grid; grid-template-columns: repeat(9, 1fr); border-radius: var(--rmr-radius-md); overflow: hidden; border: 1px solid var(--rmr-gray-200); }
.ramp__step { padding: var(--rmr-space-5) var(--rmr-space-3); display:flex; flex-direction:column; gap:2px; min-height: 120px; justify-content: flex-end; font-family: var(--rmr-font-body); }
.ramp__step small { font-family: var(--rmr-font-mono); font-size: 10px; opacity: .8; }
.ramp__step b { font-family: var(--rmr-font-mono); font-size: 11px; font-weight: var(--rmr-weight-bold); }

/* --------- Type specimens --------- */
.type-row { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--rmr-space-6); align-items: baseline; padding: var(--rmr-space-4) 0; border-bottom: 1px dashed var(--rmr-gray-200); }
.type-row:last-child { border-bottom: 0; }
.type-row__label { font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-600); text-transform: uppercase; letter-spacing: var(--rmr-tracking-wide); }
.type-row__sample { color: var(--rmr-ink); line-height: var(--rmr-leading-tight); }
.type-row__meta { font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-500); white-space: nowrap; }

/* --------- Buttons (mirrors live reimer.ca btn-primary style) --------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--rmr-font-body);
  font-weight: var(--rmr-weight-semi);
  font-size: var(--rmr-text-base);
  line-height: 1.3;
  padding: .75rem 1.5rem;
  border-radius: var(--rmr-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease-in-out;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .01em;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 0; box-shadow: var(--rmr-focus-ring); }

/* "Notched" CTA shape — echoes the live site's rounded-top-end-0 rounded-bottom-start-0 */
.btn--notched {
  border-radius: var(--rmr-radius);
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-xs { padding: .25rem .625rem; font-size: var(--rmr-text-xs); border-radius: var(--rmr-radius-sm); }
.btn-sm { padding: .5rem 1.1rem;    font-size: var(--rmr-text-sm); }
.btn-lg { padding: 1rem 1.75rem;    font-size: var(--rmr-text-base); border-radius: var(--rmr-radius-md); }

/* Solid */
.btn-primary   { background: var(--rmr-primary); color:#fff; }
.btn-primary:hover { background: var(--rmr-navy-600); }
.btn-secondary { background: var(--rmr-secondary); color: var(--rmr-navy-800); }
.btn-secondary:hover { background: var(--rmr-gold-400); }
.btn-dark      { background: var(--rmr-dark); color:#fff; }
.btn-dark:hover { background: var(--rmr-navy-800); }
.btn-neutral   { background:#fff; color: var(--rmr-ink); border-color: var(--rmr-gray-200); box-shadow: var(--rmr-shadow-sm); }
.btn-neutral:hover { border-color: var(--rmr-gray-300); }

/* Soft */
.btn-soft-primary { background: var(--rmr-navy-50); color: var(--rmr-primary); }
.btn-soft-primary:hover { background: var(--rmr-navy-100); }
.btn-soft-gold    { background: var(--rmr-gold-50); color: var(--rmr-gold-700); }
.btn-soft-gold:hover { background: var(--rmr-gold-100); }
.btn-soft-danger  { background: #FDE7E9; color: #8A1F2B; }
.btn-soft-danger:hover { background: #FAC9CE; }

/* Ghost */
.btn-ghost-primary { background: transparent; color: var(--rmr-primary); }
.btn-ghost-primary:hover { background: var(--rmr-navy-50); }
.btn-ghost-gold { background: transparent; color: var(--rmr-gold-700); }
.btn-ghost-gold:hover { background: var(--rmr-gold-50); }

.btn[disabled], .btn.is-disabled { opacity:.5; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; color:#fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Icon badge square (from live LinkedIn nav chip) */
.btn-icon-square {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rmr-primary); color:#fff;
  border-top-right-radius: 0; border-bottom-left-radius: 0;
  border-radius: var(--rmr-radius);
}
.btn-icon-square:hover { background: var(--rmr-navy-600); }

/* --------- Form --------- */
.form-group { display:flex; flex-direction:column; gap: .375rem; font-family: var(--rmr-font-body); }
.form-label { font-size: var(--rmr-text-sm); font-weight: var(--rmr-weight-semi); color: var(--rmr-gray-900); }
.form-control {
  width: 100%;
  padding: .75rem 1.1rem;
  font-family: var(--rmr-font-body);
  font-size: var(--rmr-text-base);
  font-weight: var(--rmr-weight-normal);
  line-height: 1.3;
  color: var(--rmr-gray-900);
  background: #fff;
  border: 1px solid var(--rmr-gray-300);
  border-radius: var(--rmr-radius);
  box-shadow: var(--rmr-shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--rmr-gray-500); }
.form-control:hover { border-color: var(--rmr-gray-400); }
.form-control:focus { outline: 0; border-color: var(--rmr-primary); box-shadow: var(--rmr-focus-ring); }
.form-control:disabled { background: var(--rmr-gray-100); color: var(--rmr-gray-500); cursor: not-allowed; }
.form-control.is-invalid { border-color: var(--rmr-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(188,56,70,.2); }
.form-control.is-valid { border-color: var(--rmr-success); }
.form-help { font-size: var(--rmr-text-xs); color: var(--rmr-gray-600); }
.form-error { font-size: var(--rmr-text-xs); color: var(--rmr-danger); }
.form-select {
  appearance: none; padding-right: 3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%232D3748' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 14px 10px;
}
.form-check { display:flex; align-items:center; gap:.625rem; font-family: var(--rmr-font-body); font-size: var(--rmr-text-sm); color: var(--rmr-gray-900); }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
  appearance:none; width:1.125rem; height:1.125rem; border:1px solid var(--rmr-gray-400); background:#fff; cursor:pointer;
}
.form-check input[type="checkbox"] { border-radius: 3px; }
.form-check input[type="radio"]    { border-radius: 50%; }
.form-check input:checked { background: var(--rmr-primary); border-color: var(--rmr-primary); }
.form-check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>"); background-size: contain; background-position: center; background-repeat:no-repeat; }
.form-check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 35%, var(--rmr-primary) 40%); }
.form-check input:focus-visible { outline: 0; box-shadow: var(--rmr-focus-ring); }

/* --------- Card --------- */
.card {
  background: #fff;
  border-radius: var(--rmr-radius);
  border: 1px solid var(--rmr-gray-200);
  box-shadow: var(--rmr-shadow-soft-1);
  overflow: hidden;
}
.card__body { padding: var(--rmr-space-6); display:flex; flex-direction:column; gap:.75rem; }
.card__title { font-family: var(--rmr-font-display); font-size: var(--rmr-text-xl); color: var(--rmr-primary); line-height: 1.2; }
.card__text { color: var(--rmr-ink); font-size: var(--rmr-text-base); line-height: var(--rmr-leading-base); }

/* Signature CTA card — the giant navy "Looking for a New Role?" pattern */
.cta-card {
  position: relative;
  background: var(--rmr-primary);
  color: #fff;
  padding: var(--rmr-space-12) var(--rmr-space-6);
  border-radius: var(--rmr-radius);
  box-shadow: var(--rmr-shadow-soft-4);
  text-align: center;
  transition: background-color .2s, box-shadow .2s;
}
.cta-card:hover { background: var(--rmr-navy-600); box-shadow: var(--rmr-shadow-soft-1); }
.cta-card h3 { color:#fff; font-size: var(--rmr-text-3xl); margin-bottom: var(--rmr-space-5); }
.cta-card p  { color: var(--rmr-slate-200); margin-bottom: var(--rmr-space-8); max-width: 38ch; margin-left:auto; margin-right:auto; }

/* Testimonial */
.testimonial { display: grid; grid-template-columns: 72px 1fr; gap: var(--rmr-space-5); align-items: start; }
.testimonial__avatar { width:72px; height:72px; border-radius: 50%; object-fit: cover; background: var(--rmr-gray-200); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--rmr-gray-200); }
.testimonial__meta { font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-600); text-transform: uppercase; letter-spacing: var(--rmr-tracking-wide); }
.testimonial__name { font-family: var(--rmr-font-display); font-size: var(--rmr-text-lg); color: var(--rmr-primary); margin: .25rem 0 .25rem; }
.testimonial__role { font-size: var(--rmr-text-sm); color: var(--rmr-ink); }
.stars { color: var(--rmr-gold-500); letter-spacing: 2px; font-family: Times, serif; font-size: 18px; line-height: 1; }

/* Badge */
.badge { display:inline-flex; align-items:center; gap:.375rem; padding: .25rem .625rem; border-radius: 9999px; font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); font-size: var(--rmr-text-xs); letter-spacing: .04em; text-transform: uppercase; }
.badge--primary { background: var(--rmr-navy-50); color: var(--rmr-primary); }
.badge--gold    { background: var(--rmr-gold-50); color: var(--rmr-gold-700); }
.badge--teal    { background: #E6F4F3; color: #02514D; }
.badge--warn    { background: #FEF5CE; color: var(--rmr-gold-800); }
.badge--danger  { background: #FDE7E9; color: #8A1F2B; }
.badge--neutral { background: var(--rmr-gray-100); color: var(--rmr-gray-800); }
.badge--solid   { background: var(--rmr-primary); color:#fff; }

/* Alert */
.alert { display:flex; gap: var(--rmr-space-4); padding: var(--rmr-space-4) var(--rmr-space-5); border-radius: var(--rmr-radius); font-family: var(--rmr-font-body); border-left: 3px solid; }
.alert__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert__body { display:flex; flex-direction:column; gap:.25rem; }
.alert__title { font-weight: var(--rmr-weight-bold); color: var(--rmr-ink); }
.alert__text { color: var(--rmr-ink); font-size: var(--rmr-text-sm); }
.alert--info    { background: var(--rmr-navy-50); border-color: var(--rmr-primary); }
.alert--success { background: #E6F4F3;          border-color: var(--rmr-success); }
.alert--warn    { background: var(--rmr-gold-50); border-color: var(--rmr-gold-600); }
.alert--danger  { background: #FDE7E9;           border-color: var(--rmr-danger); }

/* Accordion */
.accordion { border: 1px solid var(--rmr-gray-200); border-radius: var(--rmr-radius-md); background:#fff; overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--rmr-gray-200); }
.accordion__trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--rmr-space-4); padding: var(--rmr-space-5) var(--rmr-space-6); background:transparent; border:0; text-align:left; cursor:pointer; font-family: var(--rmr-font-display); font-size: var(--rmr-text-lg); color: var(--rmr-primary); }
.accordion__trigger:hover { background: var(--rmr-navy-50); }
.accordion__trigger svg { transition: transform .2s; flex-shrink: 0; color: var(--rmr-gold-600); }
.accordion__item.is-open .accordion__trigger svg { transform: rotate(180deg); }
.accordion__body { padding: 0 var(--rmr-space-6) var(--rmr-space-6); color: var(--rmr-ink); font-size: var(--rmr-text-base); max-height: 0; overflow:hidden; transition: max-height .25s ease, padding .25s ease; }
.accordion__item.is-open .accordion__body { max-height: 320px; padding-top: 0; padding-bottom: var(--rmr-space-6); }

/* Top strap (from live site: "Specialists in Supply Chain Recruiting") */
.topstrap {
  background: var(--rmr-primary);
  color: var(--rmr-slate-200);
  padding: .5rem var(--rmr-space-8);
  font-size: var(--rmr-text-sm);
  text-align: center;
  letter-spacing: .05em;
  border-radius: var(--rmr-radius) var(--rmr-radius) 0 0;
}

/* Navbar */
.navbar {
  display:flex; align-items:center; justify-content:space-between; gap: var(--rmr-space-6);
  padding: var(--rmr-space-4) var(--rmr-space-8);
  background:#fff;
  border-bottom: 1px solid var(--rmr-gray-200);
  font-family: var(--rmr-font-body);
}
.navbar__brand img { height: 44px; width:auto; }
.navbar__links { display:flex; gap: var(--rmr-space-5); }
.navbar__links a { color: var(--rmr-gray-800); font-weight: var(--rmr-weight-semi); font-size: var(--rmr-text-sm); }
.navbar__links a:hover { color: var(--rmr-primary); text-decoration: none; }
.navbar__cta { display:flex; gap: var(--rmr-space-3); align-items: center; }

/* Footer */
.footer { background: var(--rmr-navy-700); color: #fff; border-radius: 0 0 var(--rmr-radius) var(--rmr-radius); padding: var(--rmr-space-16) var(--rmr-space-10) var(--rmr-space-10); display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--rmr-space-8); font-family: var(--rmr-font-body); }
.footer h4 { color: #fff; font-family: var(--rmr-font-body); font-size: var(--rmr-text-sm); font-weight: var(--rmr-weight-bold); text-transform: uppercase; letter-spacing: var(--rmr-tracking-wide); margin-bottom: var(--rmr-space-4); }
.footer a { color: rgba(255,255,255,.78); display:block; padding: .25rem 0; font-size: var(--rmr-text-sm); }
.footer a:hover { color: var(--rmr-gold-400); }
.footer__logo { height: 44px; margin-bottom: var(--rmr-space-4); filter: brightness(0) invert(1); }
.footer__copy { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: var(--rmr-space-5); margin-top: var(--rmr-space-5); display:flex; justify-content: space-between; font-size: var(--rmr-text-xs); color: rgba(255,255,255,.55); }

/* Hero sample — mirrors reimer.ca shipyard hero with notched highlight */
.hero-sample {
  position: relative;
  padding: var(--rmr-space-24) var(--rmr-space-12);
  border-radius: var(--rmr-radius-md);
  overflow: hidden;
  color: #fff;
  background-color: var(--rmr-navy-800);
}
.hero-sample__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.55);
}
.hero-sample__inner { position: relative; z-index: 1; max-width: 40ch; }
.hero-sample__eyebrow { font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); font-size: var(--rmr-text-xs); letter-spacing: var(--rmr-tracking-widest); text-transform: uppercase; color: var(--rmr-gold-400); margin-bottom: var(--rmr-space-4); }
.hero-sample__title { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.05; color: #fff; font-weight: var(--rmr-weight-normal); margin-bottom: var(--rmr-space-6); }
.hero-sample__title span.highlight {
  display: inline-block; margin-top: .35em;
  background: var(--rmr-primary); color: var(--rmr-secondary);
  padding: .05em .4em .15em;
  font-style: italic;
}
.hero-sample__lede { font-size: var(--rmr-text-md); color: rgba(255,255,255,.85); margin-bottom: var(--rmr-space-8); }
.hero-sample__cta { display:flex; gap: var(--rmr-space-3); flex-wrap: wrap; }

/* Two-up CTA row (recreates the live overlap-10 bg-primary pair) */
.cta-pair { display:grid; grid-template-columns: 1fr 1fr; gap: var(--rmr-space-6); margin-top: calc(-1 * var(--rmr-space-16)); position: relative; z-index: 2; }
@media (max-width: 720px){ .cta-pair { grid-template-columns: 1fr; margin-top: var(--rmr-space-6); } }

/* Shape motif */
.figure-ring { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 1.25rem; background: linear-gradient(65deg, var(--rmr-gray-100), var(--rmr-white)); }
.figure-ring--gold { background: var(--rmr-grad-gold); }
.figure-ring--navy { background: var(--rmr-grad-navy); }
.figure-ring__inner { width:100%; height:100%; border-radius:50%; background:#fff; overflow:hidden; }
.figure-ring__inner img { width:100%; height:100%; object-fit: cover; }

/* Logo/brand block */
.brand-card { display:flex; flex-direction:column; gap: var(--rmr-space-5); padding: var(--rmr-space-8); border-radius: var(--rmr-radius-md); border: 1px solid var(--rmr-gray-200); background: #fff; align-items:center; justify-content:center; min-height: 180px; }
.brand-card--dark { background: var(--rmr-primary); border-color: var(--rmr-primary); }
.brand-card--gold { background: var(--rmr-gold-500); border-color: var(--rmr-gold-500); }
.brand-card img { height: 52px; width:auto; }
.brand-card__label { font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-600); text-transform: uppercase; letter-spacing: var(--rmr-tracking-wide); }
.brand-card--dark .brand-card__label { color: rgba(255,255,255,.75); }
.brand-card--gold .brand-card__label { color: var(--rmr-navy-800); }

/* Spacing visualization */
.scale-bar { display:flex; align-items: flex-end; gap: var(--rmr-space-3); height: 200px; padding: var(--rmr-space-6); border: 1px solid var(--rmr-gray-200); border-radius: var(--rmr-radius-md); background: var(--rmr-gray-50); }
.scale-bar__col { display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family: var(--rmr-font-mono); font-size: 10px; color: var(--rmr-gray-600); }
.scale-bar__col > div { background: var(--rmr-primary); width: 18px; border-radius: 2px; }

/* Shadow demo */
.shadow-demo { padding: var(--rmr-space-6); background:#fff; border-radius: var(--rmr-radius-md); font-family: var(--rmr-font-mono); font-size: var(--rmr-text-xs); color: var(--rmr-gray-600); }
.shadow-demo strong { color: var(--rmr-ink); font-family: var(--rmr-font-body); font-size: var(--rmr-text-sm); display:block; margin-bottom: .25rem; }

/* Voice / tone do-don't card */
.voice-pair { display:grid; grid-template-columns: 1fr 1fr; gap: var(--rmr-space-6); }
@media (max-width: 720px){ .voice-pair { grid-template-columns: 1fr; } }
.voice-card { padding: var(--rmr-space-6); border-radius: var(--rmr-radius-md); border: 1px solid var(--rmr-gray-200); }
.voice-card--do   { background: #F4FAF9; border-color: #C9E6E4; }
.voice-card--dont { background: #FDF2F3; border-color: #F3CED3; }
.voice-card__label { font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); font-size: var(--rmr-text-xs); text-transform: uppercase; letter-spacing: var(--rmr-tracking-widest); margin-bottom: var(--rmr-space-3); }
.voice-card--do   .voice-card__label { color: var(--rmr-success); }
.voice-card--dont .voice-card__label { color: var(--rmr-danger); }
.voice-card p { color: var(--rmr-gray-800); font-size: var(--rmr-text-md); line-height: 1.5; }

/* --------- Tweaks panel --------- */
.tweaks-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--rmr-primary); color: #fff; border: 0; border-radius: 9999px;
  padding: .75rem 1rem; font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); font-size: var(--rmr-text-sm);
  box-shadow: var(--rmr-shadow-lg); cursor: pointer; display:flex; gap:.5rem; align-items:center;
}
.tweaks-panel {
  position: fixed; bottom: 84px; right: 24px; z-index: 100;
  background:#fff; border: 1px solid var(--rmr-gray-200); border-radius: var(--rmr-radius-md);
  box-shadow: var(--rmr-shadow-xl); padding: var(--rmr-space-5); width: 320px;
  font-family: var(--rmr-font-body); display:none;
}
.tweaks-panel.is-open { display:block; }
.tweaks-panel h4 { font-family: var(--rmr-font-body); font-size: var(--rmr-text-xs); text-transform: uppercase; letter-spacing: var(--rmr-tracking-wide); color: var(--rmr-gray-600); margin-bottom: .75rem; }
.tweaks-panel__row { display:flex; flex-direction:column; gap:.5rem; margin-bottom: var(--rmr-space-4); }
.tweaks-panel__opts { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: .375rem; }
.tweaks-panel__opt { padding: .5rem; border: 1px solid var(--rmr-gray-200); border-radius: var(--rmr-radius); background: #fff; font-size: var(--rmr-text-xs); cursor:pointer; text-align:left; font-family: var(--rmr-font-body); color: var(--rmr-ink); }
.tweaks-panel__opt.is-active { border-color: var(--rmr-primary); background: var(--rmr-navy-50); color: var(--rmr-primary); font-weight: var(--rmr-weight-bold); }

/* =========================================================================
   DIRECTION B — Utility Grid (all-grotesque, flat)
   ========================================================================= */
body[data-direction="B"] .ds-section__title,
body[data-direction="B"] h3,
body[data-direction="B"] .card__title,
body[data-direction="B"] .hero-sample__title,
body[data-direction="B"] .testimonial__name,
body[data-direction="B"] .accordion__trigger {
  font-family: var(--rmr-font-body); font-weight: var(--rmr-weight-bold); letter-spacing: -.02em;
}
body[data-direction="B"] .card,
body[data-direction="B"] .accordion,
body[data-direction="B"] .form-control,
body[data-direction="B"] .btn,
body[data-direction="B"] .cta-card,
body[data-direction="B"] .hero-sample { border-radius: 2px; }
body[data-direction="B"] .card { box-shadow: none; }
body[data-direction="B"] .hero-sample { background-color: var(--rmr-dark); }
body[data-direction="B"] .hero-sample__title span.highlight { background: var(--rmr-gold-500); color: var(--rmr-navy-900); font-style: normal; }

/* =========================================================================
   DIRECTION C — Dynamic (gradient-forward, rounded)
   ========================================================================= */
body[data-direction="C"] { background: radial-gradient(1200px 600px at 80% -20%, var(--rmr-gold-50), transparent), var(--rmr-white); }
body[data-direction="C"] .ds-section__title { background: var(--rmr-grad-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-direction="C"] .btn-primary { background: var(--rmr-grad-navy); }
body[data-direction="C"] .btn-secondary { background: var(--rmr-grad-gold); color: var(--rmr-navy-900); }
body[data-direction="C"] .card,
body[data-direction="C"] .cta-card { border-radius: 20px; }
body[data-direction="C"] .hero-sample { border-radius: 28px; }
body[data-direction="C"] .ds-pill { background: var(--rmr-grad-gold); color: var(--rmr-navy-900); }
body[data-direction="C"] .badge--primary { background: var(--rmr-grad-steel); color:#fff; }
body[data-direction="C"] .badge--gold { background: var(--rmr-grad-gold); color: var(--rmr-navy-900); }