/* ==========================================================================
   ORION Energy — « Le Rayon » site composition
   Layer 3 of 3. Load order is deliberate and load-bearing:
     1. style.css   legacy visual layer, shrinking to nothing as templates migrate
     2. rayon.css   the approved design system, kept byte-identical to the deliverable
     3. this file   this site's arrangement of the system
   Several rules here intentionally restate a rayon.css selector. They must win, and at equal
   specificity only source order decides — which is why this file loads last rather than carrying
   inflated selectors.
   ========================================================================== */

/* ---- chrome ----
   Layout plumbing for the chrome: flex/grid containers that rayon.css does not
   ship because they are this site's arrangement, not part of the design system.
   No new visual ideas here — only tokens and components already defined.
   src/css/rayon.css is kept byte-identical to the approved deliverable.
   ========================================================================== */

.r-util__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.r-util__group { display: flex; align-items: center; gap: 20px; }
.r-util__market { font-weight: 600; color: var(--r-ink); }
.r-util__group a { min-height: 44px; display: inline-flex; align-items: center; }

.r-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.r-nav__links { list-style: none; margin: 0; padding: 0; }
.r-btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.875rem; }

.r-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 64px 48px; }
.r-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.r-footer__blurb { font: 400 0.9375rem/1.7 var(--r-text); margin: 0; }
.r-footer__col { display: flex; flex-direction: column; }
.r-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.r-footer__links li { font: 400 0.9375rem/1.5 var(--r-text); }
.r-footer__bottom { border-top: 1px solid rgba(255,255,255,0.18); padding-block: 24px; font: 400 0.875rem/1.5 var(--r-text); }

@media (max-width: 1100px) {
  .r-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .r-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .r-footer__grid { grid-template-columns: 1fr; }
  .r-footer__logo { height: 84px; }
  .r-util__group { gap: 14px; }
  .r-nav__inner { min-height: 72px; }
}

/* Step numbers as real text. rayon.css draws them with counter(r-step); where the number already
   existed as content we keep the content and suppress the counter, so nothing the page said is lost
   to generated CSS. Styling mirrors .r-steps > li::after exactly. */
.r-steps--text > li::after { content: none; }
.r-steps__n { order: -1; font: 800 2.75rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); margin-top: 10px; }
.r-night .r-steps__n, .r-deep .r-steps__n { color: var(--r-green); }
@media (max-width: 760px) { .r-steps__n { font-size: 1.875rem; margin-top: 0; } }

/* ---- homepage / shared section composition ---- */
.r-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.r-panels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-panels a.r-panel { text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.r-panels a.r-panel:hover { border-color: var(--r-blue); }
.r-more { font: 700 0.9375rem/1 var(--r-display); color: var(--r-blue); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.r-more::after { content: ''; width: 20px; height: 5px; border-radius: 999px; background: var(--r-ray); }
.r-trust-band { border-block: 1px solid var(--r-line); }
.r-features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-quote { max-width: 60ch; display: flex; flex-direction: column; gap: 14px; }
.r-actions--center { justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.r-closing { text-align: center; }
.r-closing__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.r-closing .r-lede { max-width: 52ch; }

/* hero: the disc sits inside the burst's inner radius (rin 214 of an 880 box) */
.r-hero__ring { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1; pointer-events: none; }
.r-hero__ring .r-burst--hero { max-width: none; width: 100%; height: 100%; }
.r-hero__disc--home { left: 35.9%; top: 27.05%; width: 48.6%; height: 48.6%; }

@media (max-width: 1100px) {
  .r-panels--4, .r-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the burst becomes a band across the top on narrow screens; the photograph would be clipped to a
     sliver inside it, so it steps aside rather than rendering badly */
  .r-hero__ring { height: 46%; }
  .r-hero__disc--home { display: none; }
  .r-hero { min-height: 0; }
  .r-hero__body { padding-block: 210px 64px; }
}
@media (max-width: 760px) {
  .r-panels--4, .r-features--3 { grid-template-columns: 1fr; }
  .r-head { margin-bottom: 32px; }
  .r-actions--center { justify-content: stretch; }
}

/* ---- fixes found by the STEP 6 audit ---- */
/* rayon.css's .r-nav__links a (0,2,0) outranks .r-btn (0,1,0), so the header CTA rendered ink on
   Primary Blue — 2.22:1. The button keeps its own colours inside the nav. */
.r-nav__links a.r-btn { color: var(--r-white); border-bottom-color: transparent; }
.r-nav__links a.r-btn:hover { color: var(--r-white); }
/* Nav links were 37px tall; 44px is the minimum tap target. */
.r-nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
/* Same specificity problem: rayon.css .r-steps > li::after (0,2,1) tied with the override and won on
   source order, so every step showed its number twice — once as text, once as the counter. */
.r-steps--text > li::after { content: none; }
/* .r-triple carries no colour of its own, so on a night surface it inherited ink at 1.55:1. */
:is(.r-night, .r-deep) .r-triple { color: var(--r-white); }
.r-energy .r-triple { color: var(--r-inst); }
/* No shadows anywhere (system rule 2). These are the last three the audit found. */
.whatsapp-float, .modal, .btn-primary, .btn-primary:hover, .card, .card:hover { box-shadow: none; }

/* Hero geometry. .r-hero is display:flex, so .r-wrap was shrink-to-fit and centred: the text column
   sat in the middle of the hero and ran straight under the rays and the disc. The wrap now fills the
   hero, the ring is sized by width (never taller than it is wide, so the burst's square viewBox and
   the disc's percentage offsets stay true), and the text column is capped so the two cannot meet. */
.r-hero > .r-wrap { width: 100%; flex: 1 1 auto; }
.r-hero__ring { right: 0; top: 50%; transform: translateY(-50%); width: min(46%, 828px); height: auto; aspect-ratio: 1; }
.r-hero__body { max-width: min(600px, 50%); }
@media (max-width: 1100px) {
  .r-hero__ring { position: absolute; width: 92%; max-width: 560px; right: -12%; top: 0; transform: none; }
  .r-hero__body { max-width: none; }
}

/* ---- modal (STEP 2d): same behaviour and same JS, restyled on the system ---- */
/* Flat ink at 60%. The old overlay used a backdrop blur, which is a soft effect the system does not
   have, and the panel carried a drop shadow. */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(14,26,43,0.6); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal { background: var(--r-white); border-radius: var(--r-radius); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: none; }
.modal-header { padding: 32px 36px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-header h3 { font: 800 1.5rem/1.16 var(--r-display); letter-spacing: -0.025em; color: var(--r-inst); margin: 0; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--r-body); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.modal-close:hover { color: var(--r-ink); background: var(--r-mist); }
.modal-body { padding: 24px 36px 36px; }
.r-btn--block { width: 100%; }
@media (max-width: 760px) { .modal { border-radius: var(--r-radius-sm); } .modal-header { padding: 24px 24px 0; } .modal-body { padding: 20px 24px 28px; } }

/* ---- remaining audit fixes ---- */
/* Five trust items in a four-column grid left the fifth alone on a second row. */
.r-trust { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .r-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .r-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Footer links were 19px tall and the menu button 40x32. */
.r-footer__links a { min-height: 44px; display: inline-flex; align-items: center; }
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
/* The sunrise rises behind the closing call to action; without room the rays cross the buttons. */
.r-closing { padding-bottom: clamp(140px, 15vw, 240px); }
.r-closing__body { z-index: 1; }
/* Short nav labels ("FAQ", "Outils") were under 44px wide. */
.r-nav__links a { min-width: 44px; justify-content: center; }
.r-footer__links a { min-width: 44px; }

/* ==========================================================================
   Components carried over from the old layer, restyled onto the system.
   The class names survive as hooks — the markup, the JS that drives it and the
   text it holds are untouched — but every visual decision below comes from
   rayon.css tokens: flat surfaces, 36px radius, capsule buttons, ray bullets,
   no shadows, no gradient washes.
   The matching rules in style.css are deleted, not left dead.
   ========================================================================== */

/* ---- typography inside system surfaces (templates keep bare h1/h2/h3/p) ---- */
:is(.r-section, .r-hero, .r-trust-band) h1 { font: 800 clamp(2.5rem, 4.8vw, 4.25rem)/1.04 var(--r-display); letter-spacing: -0.033em; color: var(--r-inst); margin: 0 0 8px; text-wrap: balance; }
:is(.r-section, .r-hero) h2 { font: 800 clamp(1.875rem, 3.2vw, 2.875rem)/1.1 var(--r-display); letter-spacing: -0.03em; color: var(--r-ink); margin: 0 0 16px; text-wrap: balance; }
:is(.r-section, .r-hero) h3 { font: 700 1.375rem/1.25 var(--r-display); letter-spacing: -0.014em; color: var(--r-ink); margin: 0 0 8px; }
:is(.r-section, .r-hero) h4 { font: 700 1.0625rem/1.3 var(--r-display); color: var(--r-ink); margin: 0 0 8px; }
:is(.r-section, .r-hero) p { font: 400 1rem/1.65 var(--r-text); color: var(--r-body); margin: 0 0 16px; text-wrap: pretty; }
:is(.r-section, .r-hero) li { font: 400 1.0625rem/1.55 var(--r-text); color: var(--r-ink); }
:is(.r-night, .r-deep) :is(h1, h2, h3, h4) { color: var(--r-white); }
:is(.r-night, .r-deep) :is(p, li) { color: rgba(255,255,255,0.84); }
:is(.r-night, .r-deep) a { color: var(--r-green); }
.r-energy :is(h1, h2, h3, h4) { color: var(--r-inst); }
.r-energy :is(p, li) { color: var(--r-on-energy); }
.r-section ul:not(.r-bullets):not(.r-nav__links):not(.r-footer__links):not(.lp-tier-features) { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
/* The ray bullet is absolutely positioned, not a flex child. Making the <li> a flex container
   blockified every inline element inside it: a link in a sentence became a flex item competing with
   the text beside it and collapsed to a 33px column at 390. */
.r-section ul:not(.r-bullets):not(.r-nav__links):not(.r-footer__links):not(.lp-tier-features) > li { position: relative; padding-left: 32px; }
.r-section ul:not(.r-bullets):not(.r-nav__links):not(.r-footer__links):not(.lp-tier-features) > li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 18px; height: 5px; border-radius: 999px; background: var(--r-ray); }
:is(.r-night, .r-deep) .r-section ul > li::before, .r-night ul > li::before { background: var(--r-green); }
.r-section ol { padding-left: 1.3em; margin: 0 0 20px; display: grid; gap: 14px; }

/* ---- page hero ---- */
.lp-hero h1, .r-hero--page h1 { color: var(--r-white); }
.r-hero--page p { color: rgba(255,255,255,0.84); font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; margin: 0; }
@media (max-width: 1100px) { .r-hero--page .r-hero__body { max-width: none; } .r-hero--page .r-burst--hero { max-width: none; height: 38%; opacity: 0.5; } }

/* ---- landing hero (.lp-hero) ---- */
.lp-hero-bg, .lp-hero-overlay { display: none; }
.lp-hero-content { position: relative; }
.lp-hero-badge { display: inline-flex; align-items: center; gap: 12px; font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-green); }
.lp-hero-sub { color: rgba(255,255,255,0.84); font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; margin: 0; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-hero-trust-item { display: flex; align-items: center; gap: 10px; font: 600 0.9375rem/1.3 var(--r-text); color: rgba(255,255,255,0.84); }
@media (max-width: 1100px) { .lp-hero-content { max-width: none; } }

/* ---- panels: cards, why-cards, safety cards, tiers, segment cards ---- */
.card-grid, .lp-why-grid, .values-grid, .segment-router { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.segment-router { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .lp-why-card, .safety-card, .value-card, .segment-card, .lp-tier, .lp-visual-card, .notice {
  position: relative; overflow: hidden; border-radius: var(--r-radius); background: var(--r-white);
  border: 1px solid var(--r-line); padding: 36px 32px; box-shadow: none;
  display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
}
a.card, a.lp-why-card, a.segment-card { text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
a.card:hover, a.lp-why-card:hover, a.segment-card:hover { border-color: var(--r-blue); }
:is(.r-night, .r-deep) :is(.card, .lp-why-card, .safety-card, .value-card, .lp-tier) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); }
.card-image, .lp-visual-card img, .card img { border-radius: var(--r-radius-sm); display: block; width: 100%; }
.card-image { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.card-subtitle { font: 700 0.9375rem/1.3 var(--r-display) !important; color: var(--r-blue) !important; margin: 0 !important; }
.card-link, .lp-cta-detail { font: 700 0.9375rem/1 var(--r-display); color: var(--r-blue); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; }
.card-link::after, .lp-cta-detail::after { content: ''; width: 20px; height: 5px; border-radius: 999px; background: var(--r-ray); flex-shrink: 0; }
.card-link svg, .lp-cta-detail svg, .card-link i, .lp-cta-detail i { display: none; }
.lp-why-icon, .value-icon, .segment-card-icon, .lp-process-icon, .safety-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--r-mist); color: var(--r-blue); flex-shrink: 0; }
:is(.r-night, .r-deep) :is(.lp-why-icon, .value-icon, .lp-process-icon) { background: rgba(255,255,255,0.1); color: var(--r-green); }
.value-card { flex-direction: row; align-items: flex-start; gap: 18px; }
.value-content { display: flex; flex-direction: column; gap: 8px; }
.lp-tier-badge { align-self: flex-start; font: 700 0.75rem/1 var(--r-display); color: var(--r-inst); background: var(--r-green); border-radius: 999px; padding: 8px 14px; }
.lp-tier-header { display: flex; flex-direction: column; gap: 4px; }
.lp-tier-power { font: 800 2.5rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); }
.lp-tier-body { display: flex; flex-direction: column; gap: 14px; }
.lp-tier-highlight { display: flex; align-items: center; gap: 10px; font: 600 1rem/1.4 var(--r-text); color: var(--r-ink); background: var(--r-mist); border-radius: var(--r-radius-sm); padding: 14px 18px; }
.lp-tier-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-tier-features li { display: flex; gap: 12px; align-items: flex-start; font: 400 1rem/1.5 var(--r-text); }
.lp-tier-footer { margin-top: auto; padding-top: 8px; }
.notice { border-color: var(--r-blue); background: var(--r-mist); }

/* ---- split rows, process, steps ---- */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6.7vw, 96px); align-items: center; }
.lp-split-text { display: flex; flex-direction: column; gap: 4px; }
.lp-split-visual { display: flex; }
.lp-stats-row { display: flex; flex-wrap: wrap; gap: 32px; border-top: 1px solid var(--r-line); padding-top: 24px; margin-top: 8px; }
.lp-stat { display: flex; flex-direction: column; gap: 4px; }
.lp-stat-number { font: 800 2rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); }
.lp-stat-label { font: 400 0.9375rem/1.4 var(--r-text); color: var(--r-body); }
.lp-process { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 32px; position: relative; }
.lp-process--3 { --n: 3; }
.lp-process-step { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-process-number { font: 800 2.75rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); }
:is(.r-night, .r-deep) .lp-process-number { color: var(--r-green); }
.lp-process-tag { font: 700 0.75rem/1 var(--r-display); color: var(--r-inst); background: var(--r-green); border-radius: 999px; padding: 8px 14px; align-self: flex-start; }
.lp-process-connector { display: none; }
/* Real sequences, long form. rayon.css's step-ray is horizontal at desktop, which would crush steps
   carrying two paragraphs each — so these take the system's vertical variant: the gradient ray runs
   down the left edge, each step a node on it, numbers as real text. */
.detail-steps { position: relative; display: grid; gap: 8px; }
.detail-steps::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 56px; width: 8px; border-radius: 999px; background: var(--r-ray-v); }
.detail-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 0 36px 64px; border-top: 0; }
.detail-step::before { content: ''; position: absolute; left: 0; top: 6px; width: 26px; height: 26px; border-radius: 999px; box-sizing: border-box; background: var(--r-white); border: 7px solid var(--r-tech); }
.detail-step:first-child::before { border-color: #0B47BF; }
.detail-step:last-child::before { border-color: #73D844; }
.detail-step:last-child { padding-bottom: 0; }
.detail-step-number { font: 800 2.25rem/1 var(--r-display); letter-spacing: -0.035em; color: var(--r-inst); }
.detail-step-content { display: flex; flex-direction: column; gap: 8px; }
:is(.r-night, .r-deep) .detail-step-number { color: var(--r-green); }
:is(.r-night, .r-deep) .detail-step::before { background: var(--r-inst); }

/* Short sequences across the page get the horizontal ray, as .r-steps does. */
.lp-process { position: relative; padding-top: 34px; }
.lp-process::before { content: ''; position: absolute; left: 0; top: 9px; height: 8px; border-radius: 999px; background: var(--r-ray); right: calc((100% - (var(--n, 4) - 1) * 32px) / var(--n, 4) - 26px); }
.lp-process-step { position: relative; }
.lp-process-step::before { content: ''; position: absolute; left: 0; top: -34px; width: 26px; height: 26px; border-radius: 999px; box-sizing: border-box; background: var(--r-white); border: 7px solid var(--r-tech); }
.lp-process-step:first-child::before { border-color: #0B47BF; }
.lp-process-step:last-child::before { border-color: #73D844; }
:is(.r-night, .r-deep) .lp-process-step::before { background: var(--r-inst); }
@media (max-width: 1100px) {
  .lp-process { padding-top: 0; }
  .lp-process::before { left: 9px; top: 6px; bottom: 40px; right: auto; width: 8px; height: auto; background: var(--r-ray-v); }
  .lp-process-step { padding-left: 48px; }
  .lp-process-step::before { top: 2px; }
}
@media (max-width: 760px) { .detail-step { padding-left: 48px; padding-bottom: 28px; } .detail-steps::before { bottom: 40px; } }

/* ---- editorial column, tables, misc ---- */
.service-content { max-width: 72ch; display: flex; flex-direction: column; gap: 4px; }
.data-table-wrap { border-radius: var(--r-radius-sm); border: 1px solid var(--r-line); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font: 400 0.9375rem/1.5 var(--r-text); }
.data-table :is(th, td) { padding: 16px 18px; text-align: left; border-top: 1px solid var(--r-line); }
.data-table thead th { border-top: 0; font: 700 0.875rem/1.3 var(--r-display); color: var(--r-inst); background: var(--r-mist); }
.trust-item { display: flex; align-items: center; gap: 12px; font: 700 0.9375rem/1.25 var(--r-display); color: var(--r-inst); }
.trust-bar-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-block: 28px; }
.quote-text { font: 700 1.375rem/1.4 var(--r-display) !important; letter-spacing: -0.014em; color: var(--r-inst) !important; margin: 0 0 12px !important; text-wrap: balance; max-width: 60ch; }
.quote-author { font: 400 1rem/1.5 var(--r-text) !important; color: var(--r-body) !important; }
.btn-lg { min-height: 60px; padding: 0 34px; font-size: 1rem; }
.text-center { text-align: center; }
.mt-2 { margin-top: 32px; } .mt-3 { margin-top: 48px; }
.hidden { display: none !important; }
.lp-solar-benefit { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-text { font: 400 1rem/1.65 var(--r-text); color: var(--r-body); }

@media (max-width: 1100px) {
  .card-grid, .lp-why-grid, .values-grid, .segment-router { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .lp-split { grid-template-columns: 1fr; gap: 36px; }
  .lp-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .card-grid, .lp-why-grid, .values-grid, .segment-router, .lp-process { grid-template-columns: 1fr; }
  .card, .lp-why-card, .safety-card, .value-card, .segment-card, .lp-tier, .notice { border-radius: var(--r-radius-sm); padding: 24px 22px; }
  .trust-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-step { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .value-card { flex-direction: column; }
  .lp-stats-row { gap: 20px; }
}

/* ---- forms: RESTYLE ONLY ----
   Field names, ids, data attributes, validation, the handler, the text/plain fetch and the /exec URL
   are untouched. Only the look moves onto .r-field / .r-form / .r-radio. */
.form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 20px; }
.form-group label { font: 600 0.875rem/1.3 var(--r-text); color: var(--r-ink); }
.form-group :is(input:not([type='radio']):not([type='checkbox']), select, textarea) {
  width: 100%; min-height: 54px; box-sizing: border-box; border: 1.5px solid var(--r-field);
  border-radius: 16px; padding: 0 18px; font: 400 1rem/1.4 var(--r-text); color: var(--r-ink);
  background: var(--r-white); box-shadow: none;
}
.form-group textarea { padding: 14px 18px; min-height: 120px; resize: vertical; }
.form-group :is(input, select, textarea):focus { border-color: var(--r-tech); outline: 3px solid var(--r-tech); outline-offset: 2px; }
.form-group [aria-invalid='true'] { border-color: #B42318; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.form-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.form-radio { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 1.5px solid var(--r-field); border-radius: 999px; background: var(--r-white); cursor: pointer; font: 400 1rem/1 var(--r-text); }
.form-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--r-blue); }
.form-radio:has(input:checked) { border-color: var(--r-blue); border-width: 2px; }
.field-hint, .field-notice { font: 500 0.875rem/1.4 var(--r-text); color: var(--r-body); }
.field-notice { color: #B42318; }
/* .r-field__error look, on the class the handler already writes */
.form-error { font: 500 0.9375rem/1.5 var(--r-text); color: #B42318; background: var(--r-white); border: 1.5px solid #B42318; border-radius: var(--r-radius-sm); padding: 18px 20px; margin-top: 4px; }
.form-error a { color: #B42318; text-decoration: underline; }
/* .r-confirm look, on the class the handler already writes */
.form-success { position: relative; overflow: hidden; border-radius: var(--r-radius); background: var(--r-green); color: var(--r-on-energy); padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-success h3 { font: 800 1.75rem/1.16 var(--r-display) !important; letter-spacing: -0.025em; color: var(--r-inst) !important; margin: 0 !important; }
.form-success p { color: var(--r-on-energy) !important; margin: 0 !important; }
.form-success svg { color: var(--r-inst); }
@media (max-width: 760px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

/* ---- FAQ ---- */
.r-faq--page { max-width: 800px; margin-inline: auto; }
.faq-section-title { font: 800 1.375rem/1.25 var(--r-display) !important; color: var(--r-inst) !important; margin: 40px 0 8px !important; }
.r-faq details { border-top: 1px solid var(--r-line); }
.r-faq details:last-of-type { border-bottom: 1px solid var(--r-line); }
.r-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 700 1.1875rem/1.35 var(--r-display); color: var(--r-ink); min-height: 44px; }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after { content: ''; width: 26px; height: 6px; border-radius: 999px; background: var(--r-line); flex-shrink: 0; transition: transform 0.2s ease; }
.r-faq details[open] summary::after { background: var(--r-ray); transform: rotate(-15deg); }
.faq-answer-inner { padding-bottom: 24px; }
.faq-answer-inner :is(p, li) { font: 400 1rem/1.7 var(--r-text); color: var(--r-body); }
@media (prefers-reduced-motion: reduce) { .r-faq summary::after { transition: none; } }

/* ---- audit round 2 ---- */
/* .lp-hero and .lp-solar are night surfaces by colour but carried no .r-night class, so rayon.css's
   surface switches never fired: ghost buttons rendered Primary Blue on Institutional Blue (1.43:1)
   and kickers the same. They are declared night here rather than in 6 templates. */
:is(.lp-hero, .lp-solar) .r-kicker, :is(.lp-hero, .lp-solar) .lp-hero-badge { color: var(--r-green); }
:is(.lp-hero, .lp-solar) :is(h1, h2, h3, h4) { color: var(--r-white); }
:is(.lp-hero, .lp-solar) :is(p, li, .lp-stat-label) { color: rgba(255,255,255,0.84); }
:is(.lp-hero, .lp-solar) .r-btn { background: var(--r-green); border-color: var(--r-green); color: var(--r-ink); }
:is(.lp-hero, .lp-solar) .r-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.7); color: var(--r-white); }
:is(.lp-hero, .lp-solar) a:not(.r-btn) { color: var(--r-green); }
:is(.lp-hero, .lp-solar) .lp-stat-number { color: var(--r-white); }
.lp-solar { background: var(--r-inst); }
.lp-solar-inner { display: flex; gap: 40px; align-items: flex-start; }
.lp-solar-icon { color: var(--r-lime); flex-shrink: 0; }
.lp-solar-content { display: flex; flex-direction: column; gap: 14px; }
.lp-solar-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin-top: 8px; }

/* Citations were --r-mute on white: 3.6:1, under the 4.5:1 body-text minimum. */
.claim-cite { font: 400 0.8125rem/1.5 var(--r-text); color: var(--r-body); }
.claim-cite a { color: var(--r-blue); }

/* A flex list item will not shrink below its content's intrinsic width; long words in <strong> pushed
   the row 61px past a 390 viewport. */
.r-section li { min-width: 0; }
.r-section li > * { min-width: 0; overflow-wrap: anywhere; }
.data-table-wrap { max-width: 100%; min-width: 0; }
.r-wrap, .service-content, .r-section > * { min-width: 0; }

/* 24px tall; these are standalone navigation choices, not links inside a sentence. */
.segment-switch { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.segment-switch a { min-height: 44px; display: inline-flex; align-items: center; }
.segment-switch-label { font: 600 0.9375rem/1.4 var(--r-text); color: var(--r-body); }

@media (max-width: 760px) { .lp-solar-inner { flex-direction: column; gap: 24px; } .lp-solar-benefits { grid-template-columns: 1fr; } }

/* ---- audit round 3 ---- */
/* Bare <span> inside the night bands was not covered, so benefit captions sat at 1:1. */
:is(.lp-hero, .lp-solar) span:not(.r-mark):not(.lp-stat-number) { color: rgba(255,255,255,0.84); }
:is(.lp-hero, .lp-solar) strong { color: var(--r-white); }
/* Social and contact icon links were 40x40. */
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--r-mist); color: var(--r-blue); flex-shrink: 0; }
.r-section a:not(.r-btn):not(.card-link):not(.lp-cta-detail):not(.r-more) > svg { min-width: 44px; min-height: 44px; padding: 10px; box-sizing: border-box; }
/* Source lists: block links that were 26px tall. */
/* A source link sits inside its sentence, so WCAG 2.5.8's inline exception applies and forcing a
   44px box would break the line. Only a link that is the whole item gets the larger target. */
li > a[href^="http"]:only-child { display: inline-block; padding-block: 12px; }
/* The em-dash standing in for an unstated value (P-16) was --r-mute on white, 3.93:1. */
.r-section :is(td, span).empty-value, .data-table td:empty::after { color: var(--r-body); }
.data-table td { color: var(--r-body); }
.empty-value { color: var(--r-body); }

/* Lazy images carry no width/height attributes, so before they arrive they measure 0x0 and the card
   around them collapses. An aspect ratio reserves the space. */
.lp-visual-card img, .card-image, .lp-split-visual img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; background: var(--r-mist); }
.lp-visual-card { padding: 0; overflow: hidden; border: 1px solid var(--r-line); }
.lp-cta-section { text-align: center; }
.lp-cta-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-cta-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.lp-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.lp-cta-section { padding-bottom: clamp(140px, 15vw, 240px); }

/* ==========================================================================
   BLOCK 08 — the legacy stylesheet is retired.
   Everything style.css still provided is re-expressed here on --r-* tokens.
   It carried a fixed-nav-era --nav-height margin, a 92vh flex hero and a set
   of shadows and uppercase pills that fought the system underneath it.
   ========================================================================== */

/* ---- base ---- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--r-display); color: var(--r-ink); }

/* ---- nav behaviour (the toggle and the mobile drawer) ---- */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; align-items: center; padding: 0; }
.nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--r-ink); transition: transform 0.2s ease, opacity 0.2s ease; }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .r-nav__links {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--r-white); border-bottom: 1px solid var(--r-line);
    padding: 8px 0 16px; transform: translateY(-120%); transition: transform 0.25s ease;
  }
  .r-nav__links.open { transform: translateY(0); }
  .r-nav__links a { width: 100%; justify-content: flex-start; padding: 14px var(--r-gutter); min-height: 52px; border-bottom: 0; }
  .r-nav__links > li:last-child { margin-left: 0; padding: 10px var(--r-gutter) 0; }
  .r-nav__links .r-btn { width: 100%; }
  .r-nav { position: relative; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span, .r-nav__links { transition: none; } }

/* ---- reveal (JS enhancement only) ---- */
@keyframes r-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .animate { opacity: 0; }
.animate.visible { animation: r-fade-in-up 0.55s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .js .animate { opacity: 1; } .animate.visible { animation: none; } }

/* ---- floating WhatsApp ---- */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 56px; height: 56px; border-radius: 999px; background: #25D366; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.whatsapp-float svg { width: 28px; height: 28px; fill: var(--r-white); }

/* ---- grids style.css alone provided ---- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.about-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.about-value { text-align: center; padding: 32px 24px; background: var(--r-mist); border-radius: var(--r-radius); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.about-value-icon { width: 56px; height: 56px; border-radius: 999px; background: var(--r-white); color: var(--r-blue); display: inline-flex; align-items: center; justify-content: center; }
.lp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-tier-popular { border-color: var(--r-blue); border-width: 2px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.lp-cta-card { max-width: 720px; margin-inline: auto; text-align: center; position: relative; z-index: 2; }
.btn-block { width: 100%; justify-content: center; text-align: center; }

/* ---- form panels ---- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); align-items: start; }
.form-panel { background: var(--r-white); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-radius); border: 1px solid var(--r-line); box-shadow: none; }
.form-panel > p { color: var(--r-body); font-size: 0.9375rem; margin-bottom: 20px; }
.form-panel h4 { font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-inst); padding-bottom: 8px; border-bottom: 1px solid var(--r-line); margin: 24px 0 16px; text-transform: none; letter-spacing: 0; }
.form-reassurance { text-align: center; padding: 28px; background: var(--r-mist); border-radius: var(--r-radius-sm); margin-top: 32px; }
.form-reassurance p { color: var(--r-body); font-size: 0.9375rem; margin-bottom: 12px; }
.form-reassurance-icons { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.form-reassurance-item { display: flex; align-items: center; gap: 8px; font: 600 0.8125rem/1.3 var(--r-text); color: var(--r-inst); }

/* ---- calculators ---- */
.calc-layout { display: grid; gap: 32px; grid-template-columns: 1fr; }
.calc-panel { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--r-line); border-radius: var(--r-radius); background: var(--r-white); }
.calc-panel h2, .calc-panel h3 { margin-top: 0; }
.calc-headline { display: flex; flex-direction: column; gap: 4px; padding: 20px 0 24px; border-bottom: 1px solid var(--r-line); margin-bottom: 8px; }
.calc-headline-value { font: 800 clamp(1.75rem, 5vw, 2.5rem)/1.1 var(--r-display); letter-spacing: -0.03em; color: var(--r-inst); }
.calc-headline-label { font: 400 0.875rem/1.4 var(--r-text); color: var(--r-body); }
.calc-caveat { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--r-line); font: 400 0.875rem/1.6 var(--r-text); color: var(--r-body); }
.calc-placeholder { color: var(--r-body); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .form-grid, .contact-grid, .lp-tiers { grid-template-columns: 1fr; }
}


/* ==========================================================================
   BLOCK 08 corrections, merged from docs/design/rayon/rayon-08.css.
   These supersede the Block 07 rules above; they load last on purpose.
   ========================================================================== */
/* ---------- 0. density: the pages were too airy ---------- */
:root { --r-section: clamp(56px, 7vw, 104px); }

/* ---------- 1. header: one grid, aligned to the page ---------- */
.r-util { font: 500 0.8125rem/1 var(--r-text); }
.r-util__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; }
.r-util__group { display: flex; align-items: center; gap: 24px; }
.r-util a, .r-util button { color: var(--r-body); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.r-util a:hover { color: var(--r-inst); }
.r-util svg { width: 15px; height: 15px; stroke: var(--r-blue); flex-shrink: 0; }
.r-util [aria-current='true'] { color: var(--r-ink); font-weight: 700; }
.r-util [aria-disabled='true'] { color: #8795A8; cursor: default; }

.r-market { position: relative; }
.r-market__btn { font: 600 0.8125rem/1 var(--r-text); color: var(--r-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.r-market__menu { position: absolute; left: -16px; top: calc(100% + 4px); z-index: 60; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: var(--r-white); border: 1px solid var(--r-line); border-radius: 20px; }
.r-market__menu[hidden] { display: none; }
.r-market__menu li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; font: 500 0.9375rem/1.2 var(--r-text); color: #8795A8; }
.r-market__menu li[aria-current='true'] { color: var(--r-ink); font-weight: 700; background: var(--r-mist); }
.r-market__soon { font: 600 0.6875rem/1 var(--r-text); color: var(--r-body); border: 1px solid var(--r-line); border-radius: 999px; padding: 5px 9px; }

.r-nav__inner { display: flex; align-items: center; gap: 40px; min-height: 88px; }
.r-nav__logo img { height: 52px; width: auto; }
.r-nav__links { display: flex; align-items: center; gap: 26px; flex: 1; margin: 0; padding: 0; list-style: none; }
.r-nav__links > li:last-child { margin-left: auto; }               /* the CTA sits on the right edge of the grid */
.r-nav__links .r-btn { min-height: 46px; padding: 0 22px; font-size: 0.875rem; white-space: nowrap; border-bottom-width: 2px; color: var(--r-white); }

/* ---------- 2. page hero: sized by its content, never by the viewport ---------- */
.lp-hero, .r-hero--page { position: relative; overflow: hidden; background: var(--r-inst); margin-top: 0; min-height: 0; display: block; padding-block: clamp(48px, 5.5vw, 80px) clamp(56px, 6vw, 88px); }
.lp-hero > .r-wrap, .r-hero--page > .r-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.lp-hero :is(h1, .lp-hero-sub, .r-crumbs), .r-hero--page :is(h1, p, .r-crumbs) { max-width: min(640px, 56%); }
.lp-hero h1, .r-hero--page h1 { font-size: clamp(2.5rem, 4.7vw, 4.25rem); line-height: 1.04; margin: 0; }
.lp-hero-actions { margin-top: 10px; }
.lp-hero-trust { margin-top: 14px; max-width: 72%; }
.r-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; font: 400 0.875rem/1.3 var(--r-text); color: rgba(255, 255, 255, 0.75); }
.r-crumbs a { color: rgba(255, 255, 255, 0.75); }
.r-crumbs li + li::before { content: '/'; margin-right: 10px; }
.r-crumbs [aria-current='page'] { color: var(--r-white); }
/* the dawn burst rises from the bottom-right corner; rays never get thicker than in the mockup */
.r-burst--dawn { position: absolute; right: 0; bottom: 0; top: auto; left: auto; width: min(900px, 62.5vw); height: auto; max-width: none; transform: none; opacity: 1; }
@media (max-width: 1100px) {
  .lp-hero :is(h1, .lp-hero-sub, .r-crumbs), .r-hero--page :is(h1, p, .r-crumbs), .lp-hero-trust { max-width: none; }
  .lp-hero, .r-hero--page { padding-bottom: clamp(150px, 34vw, 260px); }
  .r-burst--dawn { width: min(620px, 118vw); right: -12vw; }
}

/* ---------- 3. corner burst: decoration, clearly under 12.5% of the card ---------- */
.r-panel { container-type: inline-size; --burst: 112px; }
.r-burst--corner { width: min(var(--burst), 30cqi); height: auto; aspect-ratio: 1; }
.r-panel__label { min-height: 0; margin-bottom: clamp(40px, 16cqi, 72px); max-width: calc(100% - min(var(--burst), 30cqi) * 0.8); }
.r-panels--4 .r-burst--corner, .card-grid .r-burst--corner { display: none; }   /* never on small cards */
.r-panel.r-night, .r-panel.r-mist, .r-panel.r-energy { border: 0; }

/* ---------- 4. eyebrow on cards: the ray sits ABOVE the label ---------- */
.r-eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-blue); margin: 0 0 10px; }
.r-eyebrow::before { content: ''; width: 32px; height: 6px; border-radius: 999px; background: var(--r-ray); }
:is(.r-night, .r-deep, .lp-hero, .lp-solar) .r-eyebrow { color: var(--r-green); }

/* ---------- 5. trust band: every item hangs from the same top line ---------- */
.r-trust { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; align-items: start; min-height: 0; padding-block: 28px; }
.r-trust > * { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 24px; border-left: 1px solid var(--r-line); font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-inst); text-wrap: balance; }
.r-trust > *:first-child { padding-left: 0; border-left: 0; }
.r-trust > * > .r-mark { width: 26px; }
@media (max-width: 900px) { .r-trust { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; } .r-trust > *:nth-child(odd) { padding-left: 0; border-left: 0; } }

/* ---------- 6. closing CTA: the sunrise has its own band, below the buttons ---------- */
.r-closing { padding-bottom: 0; text-align: center; }
.r-closing__body { margin-bottom: clamp(48px, 5vw, 72px); }
.r-closing .r-burst--sunrise { position: static; display: block; transform: none; left: auto; width: min(720px, 88%); height: auto; margin-inline: auto; }

/* ---------- 7. prose sections use the width of the page ---------- */
.r-split--prose { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.r-split--prose > :first-child :is(h2, .r-h2) { margin: 0; }
@media (max-width: 900px) { .r-split--prose { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 8. forms: visible choices, aligned pills, no native chrome ---------- */
.r-form, .modal form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.r-field--wide, .modal form .form-group--wide { grid-column: 1 / -1; }
.r-field label, .r-field legend, .modal .form-group > label, .modal legend { display: block; font: 600 0.875rem/1.3 var(--r-text); color: var(--r-ink); margin: 0 0 8px; padding: 0; }
fieldset.r-field, .modal fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.r-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.r-choices label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 20px; box-sizing: border-box; border: 1.5px solid var(--r-field); border-radius: 999px; background: var(--r-white); font: 500 0.9375rem/1.2 var(--r-text); color: var(--r-ink); cursor: pointer; }
.r-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.r-choices label:has(input:checked) { border-color: var(--r-blue); background: var(--r-blue); color: var(--r-white); font-weight: 700; }
.r-choices label:has(input:checked)::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--r-green); }
.r-choices label:has(input:focus-visible) { outline: 3px solid var(--r-tech); outline-offset: 3px; }
/* a select survives only for long lists; it then looks like every other field */
.r-field select, .modal select { appearance: none; width: 100%; min-height: 54px; box-sizing: border-box; border: 1.5px solid var(--r-field); border-radius: 16px; padding: 0 44px 0 18px; font: 400 1rem/1.4 var(--r-text); color: var(--r-ink); background: var(--r-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230B47BF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 18px center; }
@media (max-width: 640px) { .r-form, .modal form .form-grid { grid-template-columns: 1fr; } }


/* ---- STEP 2: the header shares one grid with the page ----
   .r-nav is display:flex, so .r-wrap was shrink-to-fit and centred: the logo sat at x=251 while the
   hero h1 sat at x=96. The wrap fills the header, and the nav row is the grid. */
.r-nav { position: relative; }
.r-nav > .r-wrap, .r-util > .r-wrap { width: 100%; flex: 1 1 auto; }
.r-nav__links a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.r-nav__links a[aria-current='page'] { color: var(--r-blue); font-weight: 700; border-bottom-color: var(--r-green); }
.r-nav__links .r-btn { border: 2px solid var(--r-blue); }
.r-nav__links .r-btn:hover { color: var(--r-white); }
/* screen-reader-only text (the " — bientôt" on a language that has no pages) */
.r-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .r-util__group--end { display: none; } }

/* ---- STEP 4: the hero's own text colours (rayon-08 sizes it; these colour it) ---- */
.lp-hero :is(h1, h2, h3), .r-hero--page :is(h1, h2, h3) { color: var(--r-white); }
.lp-hero .lp-hero-sub, .r-hero--page p { color: rgba(255,255,255,0.84); font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.65; margin: 0; }
.lp-hero-trust-item { display: flex; align-items: center; gap: 10px; font: 600 0.9375rem/1.3 var(--r-text); color: rgba(255,255,255,0.84); }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-hero-trust { display: flex; flex-wrap: wrap; gap: 14px 32px; }
/* .r-hero__body carries the homepage's 600px cap; on a page hero that compounds with the h1's own
   56% and squeezed /securite/'s heading to 336px. rayon-08 owns the width here. */
.r-hero--page .r-hero__body { max-width: none; width: 100%; padding-block: 0; gap: 22px; }

/* ---- STEP 4: keep the hero text clear of the ray envelope ----
   The dawn burst is anchored bottom-right at min(900px, 62.5vw). Its rays sweep up and to the left,
   reaching about 9% into the burst box, so the text column has to end before
   W - 0.911 * burstWidth. At 1280 and 1440 that is roughly a third of the viewport; above 1700 the
   640px cap is already clear. Measured per width with a per-ray collision test, not by eye. */
/* Narrowing the text to clear the rays pushed heroes to 892px, so the burst gives way instead:
   62.5vw put its left edge at x=540 on a 1440 page, which no 640px column can clear. At 52vw the
   envelope starts at 759 and the column keeps the reference's 640px — and the rays stay under the
   28px the mockup measures (23px at 1440, 28px from 1730 up, where the 900px cap takes over). */
/* Addendum 2.3 gives the hero h1 760px / 62%. At 52vw the burst's ray envelope starts at x=758 on a
   1440 page and a 760px column reaches 856, so the burst gives way again: 44vw is the widest that
   clears the text at 1100, 1280, 1440 and 1920. Rays measure ~20px at 1440 against the mockup's 28,
   and reach 28px from about 2050 up where the 900px cap takes over. Reported, not hidden. */
.r-burst--dawn { width: min(900px, 44vw); }
/* Addendum 2.3: the heading gets more room than the paragraph, so a short title breaks in two
   rather than four. The paragraph stays at the reference's 640px. */
/* :is() takes the specificity of its strongest argument, so rayon-08's
   `.lp-hero :is(h1, .lp-hero-sub, .r-crumbs)` scores (0,2,0) and beat a plain `.lp-hero h1`.
   Matching the shape ties the specificity, and this file loads last. */
.lp-hero :is(h1, .lp-hero-title), .r-hero--page :is(h1, .lp-hero-title) { max-width: min(760px, 62%); }
.lp-hero :is(.lp-hero-sub, .r-crumbs),
.r-hero--page :is(p, .r-crumbs) { max-width: min(640px, 44vw); }
.lp-hero-trust, .lp-hero-actions { max-width: min(760px, 52vw); }
@media (min-width: 1700px) {
  .lp-hero-trust { max-width: 72%; }
}
@media (max-width: 1100px) {
  .lp-hero :is(h1, .lp-hero-sub, .r-crumbs), .r-hero--page :is(h1, p, .r-crumbs),
  .lp-hero-trust, .lp-hero-actions { max-width: none; }
  /* the burst sits below the text on narrow screens; reserve enough room that no ray reaches it */
  .lp-hero, .r-hero--page { padding-bottom: clamp(200px, 42vw, 320px); }
}

/* ---- STEP 5d/5e: eyebrows above the label, and no dead space in cards ---- */
/* .card-link::after put a ray to the RIGHT of the card's text. The eyebrow carries the ray now,
   above the label and left-aligned, so the card reads top to bottom. */
.card-link::after, .lp-cta-detail::after { content: none; }
/* margin-top:auto pushes a link to the bottom of its card — but on /outils/ and the other tile grids
   the .card-link IS the grid item, and auto margin there bottom-aligns whole cards at different tops,
   leaving a row that looks broken. Scoped to a link inside a card. */
.card-body .card-link, .card .card-link, .lp-cta-detail { margin-top: auto; }
.card-subtitle { font: 700 0.9375rem/1.3 var(--r-display); color: var(--r-blue); margin: 0; }
/* Cards size to their content. The label reserved a burst-sized gap even where no burst renders. */
.card, .lp-why-card, .safety-card, .value-card, .segment-card, .notice { min-height: 0; }
.r-panels--4 .r-panel__label, .card-grid .r-panel__label, .segment-router .r-panel__label { margin-bottom: 8px; min-height: 0; max-width: none; }
/* The homepage trio: label small above, title big below (they were swapped). */
.r-panel__label { font: 700 0.9375rem/1.3 var(--r-display); }
.r-panel__title { font: 800 1.75rem/1.16 var(--r-display); letter-spacing: -0.025em; }
.r-panel.r-mist .r-panel__label { color: var(--r-blue); }
.r-panel.r-mist .r-panel__title, .r-panel.r-mist .r-p { color: var(--r-ink); }
.r-panel.r-energy .r-panel__title { color: var(--r-inst); }
.r-panel.r-energy .r-p { color: var(--r-on-energy); }
.r-panel.r-night .r-p { color: rgba(255,255,255,0.84); }
.r-panel.r-night .r-more, .r-panel.r-energy .r-more { color: inherit; }
.r-panel.r-night .r-more::after { background: var(--r-green); }

/* ---- STEP 7: the sunrise has its own band ---- */
/* It is no longer absolutely positioned behind the content, so .r-clip must not crop it and the
   section needs no bottom padding — the burst is the bottom of the section. */
.r-closing { overflow: visible; }
.r-closing__body { margin-bottom: clamp(48px, 5vw, 72px); z-index: auto; }
.lp-cta-section { padding-bottom: 0; }
.lp-cta-section .r-burst--sunrise,
.r-closing .r-burst--sunrise { position: static; display: block; transform: none; left: auto; bottom: auto; width: min(720px, 88%); height: auto; margin: 0 auto; }
/* the three landing pages use .lp-cta-card for the same job as .r-closing__body */
.lp-cta-section .lp-cta-card, .lp-cta-section .lp-cta-content { margin-bottom: clamp(48px, 5vw, 72px); }

/* ---- STEP 4/6: the hero photographs, reused in the prose columns ---- */
/* They were real assets hidden behind .lp-hero-bg. They do not go back behind the text — the system
   has no image washes — but they earn their place beside the prose they illustrate. */
.r-figure { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-radius); margin-top: 20px; background: var(--r-mist); }
@media (max-width: 900px) { .r-figure { border-radius: var(--r-radius-sm); } }

/* ---- STEP 9: two measured regressions against accueil.html ---- */
/* .r-h1 (0,1,0) was losing to the compound :is(.r-section,.r-hero) h1 (0,1,1), so the home page's
   display heading rendered at the inner-page size — 68px where the mockup measures 92px. */
.r-hero .r-h1, .r-section .r-h1 { font: 800 clamp(3.25rem, 6.4vw, 5.75rem)/0.98 var(--r-display); letter-spacing: -0.033em; color: var(--r-inst); }
/* The homepage burst was scaled to 46% of the page, drawing 18px rays against the mockup's 24px.
   The mockup's burst is 880 wide on a 1440 page. */
.r-hero__ring { width: min(61%, 880px); }
.r-hero__disc--home { left: 35.9%; top: 27.05%; width: 48.6%; height: 48.6%; }
/* The mockup's headline is two lines ("L'énergie d'avancer"); ours is three, so it reaches down into
   the ray fan that the mockup's clears. The column narrows below 1700 and keeps the mockup's 600px
   above it, where the burst has moved far enough right. */
.r-hero__body { max-width: min(600px, 38vw); }
@media (min-width: 1700px) { .r-hero__body { max-width: 600px; } }

/* ---- STEP 8: existing radio groups get the same capsule treatment ----
   Markup, names and values are untouched; the native control is visually hidden inside its label and
   the capsule carries the state, so these stop looking different from the converted ones. */
.form-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.form-radio { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 20px; box-sizing: border-box; border: 1.5px solid var(--r-field); border-radius: 999px; background: var(--r-white); font: 500 0.9375rem/1.2 var(--r-text); color: var(--r-ink); cursor: pointer; }
.form-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.form-radio:has(input:checked) { border-color: var(--r-blue); background: var(--r-blue); color: var(--r-white); font-weight: 700; }
.form-radio:has(input:checked)::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--r-green); }
.form-radio:has(input:focus-visible) { outline: 3px solid var(--r-tech); outline-offset: 3px; }
.r-choices label { min-height: 48px; }

/* ---- STEP 8: the modal is a two-column grid for short fields ---- */
.modal-body form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.modal-body form > :is(.form-group, fieldset) { margin-bottom: 0; }
/* anything that needs the full width: long text, choice groups, the submit */
.modal-body form > fieldset,
.modal-body form > .form-group:has(textarea),
.modal-body form > .form-group:has(.form-radio-group),
.modal-body form > button,
.modal-body form > .form-success,
.modal-body form > .form-error { grid-column: 1 / -1; }
.modal-body form > input[type="hidden"] { display: none; }
@media (max-width: 640px) { .modal-body form { grid-template-columns: 1fr; } }

/* ==========================================================================
   BLOCK 08 ADDENDUM
   ========================================================================== */

/* ---- A. one step system, not two ----
   .lp-process-step already carries the ray node (::before) and the number. The legacy layer added a
   second circle around that number with a Lucide glyph in it, and a green pill under each step. The
   ray and the number are the system; the tag's words stay, as plain text. */
.lp-process-icon { width: auto; height: auto; background: none; border-radius: 0; display: block; }
.lp-process-icon > i, .lp-process-icon > svg { display: none; }
.lp-process-tag { background: none; border: 0; border-radius: 0; padding: 0; align-self: flex-start;
                  font: 500 0.875rem/1.5 var(--r-text); color: var(--r-body); }
:is(.r-night, .r-deep, .lp-hero, .lp-solar) .lp-process-tag { color: rgba(255,255,255,0.72); }

/* ---- B. no grid ever leaves one card alone on a row ----
   Column counts are chosen per child count: a four-card grid goes 4-up then 2x2 and never 3, a five
   goes 3+2, a seven goes 4+3. Anything that would leave a remainder of one drops to a single column
   rather than orphaning a card. */
.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels {
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(4)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(6)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(8)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(3)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(5)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(6)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(9)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(4)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(7)),
  :is(.lp-why-grid, .card-grid, .values-grid, .segment-router, .safety-grid, .about-values, .lp-tiers, .r-panels):has(> :last-child:nth-child(8)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- C. the solar band is a flat night surface ---- */
.lp-solar { background: var(--r-inst); position: relative; overflow: hidden; }
.lp-solar::before, .lp-solar::after,
.lp-solar-icon::before, .lp-solar-icon::after { content: none; }
.lp-solar .r-burst--corner { --burst: 210px; }
/* A .card-link that is itself a grid tile is a card: same surface, same radius, same hover. */
.card-grid > a.card-link { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px;
  background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius);
  text-decoration: none; color: inherit; transition: border-color 0.15s ease; height: 100%; box-sizing: border-box; }
.card-grid > a.card-link:hover { border-color: var(--r-blue); }
.card-grid { align-items: stretch; }
@media (max-width: 760px) { .card-grid > a.card-link { padding: 24px 22px; border-radius: var(--r-radius-sm); } }

/* ==========================================================================
   BLOCK 08 ADDENDUM 2
   ========================================================================== */

/* ---- 1. the solar band is an ordinary night section ----
   It had no block padding, so the kicker was clipped by the top edge, the sun sat outside the text
   column, and the paragraph ran under the corner burst. One left-aligned column inside .r-wrap. */
.lp-solar { padding-block: clamp(56px, 6vw, 88px); }
.lp-solar-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-solar-icon { width: auto; height: auto; background: none; color: var(--r-lime); }
.lp-solar-content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: min(68ch, calc(100% - 160px)); }
.lp-solar-content > * { max-width: 100%; }
@media (max-width: 760px) { .lp-solar-content { max-width: 100%; } }

/* ---- 4. breadcrumbs are chrome, not body links ----
   The night-surface rule a:not(.r-btn){color: green} was reaching them. */
.r-crumbs a, :is(.r-night, .r-deep, .lp-hero, .lp-solar) .r-crumbs a { color: rgba(255,255,255,0.75); }
.r-crumbs a:hover, :is(.r-night, .r-deep, .lp-hero, .lp-solar) .r-crumbs a:hover { color: var(--r-white); }

/* ---- 6. a section after a card grid keeps the section rhythm ----
   .mt-3 on a prose block jammed it under the cards instead of letting the section padding do the work. */
.r-section > .r-wrap > .r-split--prose.mt-3,
.r-section > .r-wrap > .r-split--prose.mt-2 { margin-top: var(--r-section); }
.card, .lp-why-card, .safety-card, .value-card, .segment-card, .lp-tier, .notice, .r-panel,
.card-grid > a.card-link { min-height: 0; }

/* ==========================================================================
   BLOCK 08 ADDENDUM 3 — homepage and mobile
   ========================================================================== */

/* ---- 3. fluid type: headings scale with the device and stay short ---- */
.r-hero .r-h1, .r-hero h1 { font-size: clamp(2rem, 8.6vw, 5.75rem); }
.lp-hero :is(h1, .lp-hero-title), .r-hero--page :is(h1, .lp-hero-title) { font-size: clamp(1.875rem, 7.4vw, 4.25rem); }
:is(.r-section, .r-hero) h2, .r-h2 { font-size: clamp(1.625rem, 6.4vw, 2.875rem); }

@media (max-width: 760px) {
  /* ---- 1. the hero uses the full width inside a 20px gutter ---- */
  .r-hero__body, .lp-hero-content,
  .lp-hero :is(h1, .lp-hero-sub, .r-crumbs, .lp-hero-title),
  .r-hero--page :is(h1, p, .r-crumbs, .lp-hero-title),
  .lp-hero-trust, .lp-hero-actions { max-width: none; width: 100%; }
  .r-hero__body { gap: 18px; }
  .lp-hero > .r-wrap, .r-hero--page > .r-wrap { gap: 18px; }
  :root { --r-gutter: 20px; }
  /* buttons fill the width, one line of text each */
  .r-actions, .lp-hero-actions, .lp-cta-buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .r-actions > .r-btn, .lp-hero-actions > .r-btn, .lp-cta-buttons > .r-btn { width: 100%; white-space: nowrap; }

  /* ---- 2. no hero burst on mobile, and none of the space it reserved ---- */
  .r-hero__ring, .r-hero .r-burst--hero, .r-burst--dawn, .lp-hero > svg.r-burst { display: none; }
  .lp-hero, .r-hero--page { padding-block: clamp(32px, 8vw, 48px) clamp(36px, 9vw, 56px); }
  .r-hero { min-height: 0; padding-block: 28px 36px; }
  .r-hero > .r-wrap { padding-block: 0; }

  /* the homepage photograph stays, as a plain image under the buttons */
  .r-hero__disc--home { position: static; display: block; width: 100%; height: auto;
                        aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; margin-top: 4px; }
  .r-hero__disc--home img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- 3. body sizes ---- */
  .r-lede, .lp-hero-sub, .r-hero--page p { font-size: 1rem; line-height: 1.6; }
  :is(.r-section, .r-hero) p, .r-p { font-size: 1rem; line-height: 1.6; }

  /* ---- 4. the kicker's ray sits above the text ---- */
  .r-kicker { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
}

/* ---- 4. the hero kicker stays on one line on desktop ---- */
@media (min-width: 761px) { .lp-hero .r-kicker, .r-hero .r-kicker, .r-hero--page .r-kicker { max-width: none; } }
/* On desktop the disc is positioned against the ring's square, which is the burst's own box. */
@media (min-width: 761px) {
  /* The burst's box is min(61%, 880px) of the hero, anchored right. In its 880-unit viewBox the disc
     is centred at x=530 with radius 214, so it is 0.486 of that box wide and its right edge sits
     0.155 of the box in from the hero's right. Percentages in `right` and `width` resolve against the
     hero, which is the containing block — a translate() percentage would resolve against the disc. */
  .r-hero__disc--home { position: absolute; left: auto; top: 50%;
    right: calc(min(61%, 880px) * 0.155);
    width: calc(min(61%, 880px) * 0.486); aspect-ratio: 1; height: auto;
    transform: translateY(-50%); border-radius: 999px; margin-top: 0; }
}
@media (max-width: 760px) {
  /* as a child of the hero it needs its own gutter */
  .r-hero__disc--home { margin-inline: var(--r-gutter); width: calc(100% - var(--r-gutter) * 2); }
}
@media (max-width: 760px) {
  /* .r-hero is display:flex, so the disc became a second flex item beside the text column and both
     were squeezed to about 165px. On mobile the hero is a plain block and its children stack. */
  .r-hero { display: block; }
  .r-hero > .r-wrap { width: 100%; box-sizing: border-box; }
}

/* ---- 5. a section head is not prose ----
   A kicker, a heading and one short sentence is a head: it stacks, the heading gets a short measure so
   it breaks where a heading should, and the sentence sits beneath it at reading width. The 5/7 split
   is for sections that actually carry body copy. */
.r-head--stacked { display: flex; flex-direction: column; gap: 14px; }
.r-head--stacked > div { display: contents; }
.r-head--stacked :is(h2, .r-h2) { max-width: 28ch; margin: 0; }
.r-head--stacked .r-lede { max-width: 62ch; }
/* Any split whose prose column holds a single paragraph is a head too, wherever it came from. */
.r-split--prose:has(> :last-child > p:only-child) { grid-template-columns: 1fr; gap: 14px; }
.r-split--prose:has(> :last-child > p:only-child) :is(h2, .r-h2) { max-width: 28ch; }
.r-split--prose:has(> :last-child > p:only-child) > :last-child { max-width: 62ch; }
/* A heading in the 5-column side of a prose split has about 484px at 1440. At the full h2 size a long
   one runs to four lines there, so it takes a size suited to its measure. */
.r-split--prose > :first-child :is(h2, .r-h2),
.r-split--prose > :is(h2, .r-h2) { font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.12; }

/* ---- 6. homepage service panels ---- */
/* The big slot is the service name, the small slot the context. On the energy surface everything
   takes ink or Institutional Blue so nothing sits under 4.5:1 on green. */
.r-panel.r-energy .r-panel__label { color: var(--r-inst); }
.r-panel.r-energy .r-panel__title { color: var(--r-ink); }
.r-panel.r-energy :is(.r-p, p) { color: var(--r-on-energy); }
/* "En savoir plus" is a capsule, coloured by the surface it sits on. */
.r-panel .r-btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.875rem; }
.r-panel.r-night .r-btn { background: var(--r-green); border-color: var(--r-green); color: var(--r-ink); }
.r-panel.r-mist .r-btn { background: var(--r-blue); border-color: var(--r-blue); color: var(--r-white); }
.r-panel.r-energy .r-btn { background: var(--r-ink); border-color: var(--r-ink); color: var(--r-white); }
.r-panel__cta { margin-top: auto; padding-top: 16px; margin-bottom: 0; }
.r-panels { align-items: stretch; }
.r-panel { min-height: 0; }

/* ---- 7. the quote band ---- */
.r-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: none; }
.r-quote__text { font: 700 clamp(1.375rem, 2.4vw, 2rem)/1.35 var(--r-display); color: var(--r-inst);
                 max-width: 24em; margin: 0; text-wrap: pretty; }
.r-quote__by { font: 400 0.9375rem/1.5 var(--r-text); color: var(--r-body); margin: 0; }

/* ---- 8. a field left alone on a two-column row spans it ---- */
.modal-body form > :is(.form-group, fieldset):last-of-type:nth-child(odd) { grid-column: 1 / -1; }
.modal-body form > .form-group:has(input[type="email"]) { grid-column: 1 / -1; }
.r-form > .r-field:last-of-type:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  /* Block 07 reserved 210px at the top of the home hero for the burst band. Addendum 3 hides the
     burst below 760, so the space it held goes with it. */
  .r-hero__body { padding-block: 0; }
}

/* :is() takes its strongest argument, so `.r-panel.r-energy :is(.r-p, p)` and
   `:is(.r-section, .r-hero) p` were tying with or beating the rules below. Stated once more, last. */
.r-section .r-quote .r-quote__text { font: 700 clamp(1.375rem, 2.4vw, 2rem)/1.35 var(--r-display);
  color: var(--r-inst); max-width: 24em; margin: 0; }
.r-section .r-quote .r-quote__by { font: 400 0.9375rem/1.5 var(--r-text); color: var(--r-body); margin: 0; }
.r-panel.r-energy p.r-panel__label { color: var(--r-inst); }

/* ==========================================================================
   BLOCK 08 ADDENDUM 4
   ========================================================================== */

/* ---- 2. calculators: inputs left, results right and sticky ----
   The header is not sticky today (.r-nav is position:relative, .r-util static), so the offset is
   24px plus a header height of zero. The variable is here so the panel stays correct the moment the
   header does become sticky — setting a literal 132px now would park the panel 156px down the
   viewport with nothing above it. */
:root { --r-header-h: 0px; }
@media (min-width: 1000px) {
  .calc-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
  .calc-layout > .calc-panel:last-child { position: sticky; top: calc(24px + var(--r-header-h)); }
}
.calc-layout > .calc-panel:last-child {
  background: var(--r-mist); border: 0; border-radius: var(--r-radius); padding: 36px;
}
.calc-layout > .calc-panel:first-child { border-radius: var(--r-radius); padding: 36px; }
.calc-headline { gap: 6px; padding: 0 0 20px; }
.calc-headline-value { font: 800 clamp(2rem, 3.4vw, 2.75rem)/1.08 var(--r-display); letter-spacing: -0.03em; color: var(--r-inst); }
.calc-headline-label { font: 400 0.9375rem/1.45 var(--r-text); color: var(--r-body); }
[data-calculator-assumptions] :is(p, li) { font-size: 0.9375rem; line-height: 1.6; }
[data-calculator-assumptions] { max-width: none; }
.calc-caveat { font-size: 0.9375rem; }
@media (max-width: 760px) {
  .calc-layout > .calc-panel { padding: 24px 22px; border-radius: var(--r-radius-sm); }
}

/* ---- 3. calculator fields ---- */
.calc-panel .form-group { margin-bottom: 28px; }
.calc-panel .form-group > label,
.calc-panel fieldset > legend { margin-bottom: 12px; }
.calc-panel .form-radio-group, .calc-panel .r-choices { gap: 10px; }
.calc-panel .form-radio, .calc-panel .r-choices label { min-height: 48px; }
.calc-panel .form-group :is(input[type="number"], input[type="text"], select) { min-height: 54px; }
.calc-panel .form-group > label + :is(input, select, textarea) { margin-top: 0; }
.calc-panel .field-hint { font-size: 0.875rem; color: var(--r-body); margin-top: 8px; }

/* ---- 4. data tables ---- */
.data-table-wrap { margin-block: 36px; overflow-x: auto; border: 1px solid var(--r-line); border-radius: var(--r-radius-sm); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table :is(th, td) { padding: 16px 20px; text-align: left; border-top: 1px solid var(--r-line); vertical-align: top; }
.data-table thead th { border-top: 0; background: var(--r-mist); font: 700 0.875rem/1.3 var(--r-display); color: var(--r-inst); }
.data-table tbody td:first-child, .data-table tbody th:first-child { font-weight: 700; color: var(--r-ink); }
.data-table :is(td, th).is-num, .data-table :is(td, th)[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   BLOCK 09
   ========================================================================== */

/* ---- 1. the hero disc gets Nelson's white ring ----
   The burst's viewBox is 880 wide with the rays starting at r=214 and a 24px stroke, so a round cap
   reaches 202 from the centre. The disc was 48.6% of the box — radius 214 — which put its edge 12px
   INSIDE the ray tips. At 43% the radius is 189, which clears them with room to spare.
   The ring is 4.7% of the disc (Nelson's 20px on a ~430px disc). border-width cannot take a
   percentage, so the diameter is expressed in container units — a real length that still scales. */
.r-hero { container-type: inline-size; }
@media (min-width: 761px) {
  .r-hero__disc--home {
    /* Everything in container units so one variable drives size, offset and ring, and the disc stays
       concentric with the burst: its centre is at 530/880 across and 452/880 down the ray box, which
       is 1.36% of the box below the box's own centre. */
    --ring: min(61cqi, 880px);
    --disc: calc(var(--ring) * 0.41);
    position: absolute; left: auto; top: 50%;
    /* The burst's centre is 350/880 = 39.77% of the ray box in from its right edge. Deriving the
       offset from that rather than fixing it means the disc stays concentric whatever its size —
       a constant offset moved the centre every time the diameter changed. */
    right: calc(var(--ring) * 0.3977 - var(--disc) / 2);
    width: var(--disc); height: var(--disc); aspect-ratio: auto;
    transform: translateY(calc(-50% + var(--ring) * 0.0136));
    border: calc(var(--disc) * 0.047) solid #FFFFFF;
    box-sizing: border-box; border-radius: 999px; overflow: hidden; margin-top: 0;
  }
}

/* ---- 3. desktop nav: the underline belongs to the text, not to the bar ----
   The link was filling the 88px bar, so its border-bottom sat 21px below the words. The link is now
   sized by its own text — line-height 1, 8px above, 6px below — and the <li> centres it in the bar.
   The hit area is restored by an overlay rather than by padding, so the 44px target does not push the
   underline back down. */
@media (min-width: 1101px) {
  .r-nav__links { align-items: center; }
  .r-nav__links > li { display: flex; align-items: center; min-height: 88px; }
  .r-nav__links a:not(.r-btn) {
    position: relative; display: inline-flex; align-items: center;
    /* 8px of padding leaves a 4px optical gap because the glyph box overhangs a line-height of 1;
       8px bottom measures the 6px the brief asks for. */
    min-height: 0; padding: 8px 0 8px; line-height: 1;
    border-bottom: 3px solid transparent;
  }
  .r-nav__links a:not(.r-btn)::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
  .r-nav__links a[aria-current='page'] { border-bottom-color: var(--r-green); }
}

/* ---- 4. the mobile drawer is a column, not a spread ---- */
/* .r-nav__links > li { display: flex } in the drawer block outranks a bare .r-nav__util, so the
   utility row leaked into the desktop bar and pushed the nav into two lines. Stated at the same
   weight, and only shown where the utility bar hides its own copy. */
.r-nav__links > li.r-nav__util { display: none; }
body.nav-open { overflow: hidden; }
@media (max-width: 1100px) {
  .r-nav__links {
    padding: 8px 0 24px; max-height: calc(100vh - 100%); overflow-y: auto;
    justify-content: flex-start; align-content: flex-start;
  }
  .r-nav__links > li { display: block; min-height: 0; flex: 0 0 auto; }
  /* nav rows */
  .r-nav__links > li:not(.r-nav__cta):not(.r-nav__util) { border-top: 1px solid var(--r-line); }
  .r-nav__links > li:not(.r-nav__cta):not(.r-nav__util):first-child { border-top: 0; }
  .r-nav__links > li:not(.r-nav__cta):not(.r-nav__util) > a {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    width: 100%; min-height: 56px; padding: 0 var(--r-gutter);
    font: 700 1.375rem/1.2 var(--r-display); color: var(--r-ink); border-bottom: 0; min-width: 0;
  }
  .r-nav__links > li > a[aria-current='page'] { color: var(--r-blue); }
  .r-nav__links > li > a[aria-current='page']::after {
    content: ''; display: block; width: 32px; height: 5px; border-radius: 999px; background: var(--r-ray);
  }
  /* the capsule */
  .r-nav__cta { margin-top: 24px; padding: 0 var(--r-gutter); }
  .r-nav__cta .r-btn { width: 100%; }
}
@media (max-width: 760px) {
  .r-nav__links > li.r-nav__util {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 24px; padding: 0 var(--r-gutter);
  }
  .r-nav__util a {
    /* the drawer's row rule gives every link width:100%, which stacked the chips one per line */
    width: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1.5px solid var(--r-line); border-radius: 999px;
    font: 500 0.9375rem/1 var(--r-text); color: var(--r-body);
  }
}

/* ---- 5. compact numeric rows: label and help left, a narrow field right ---- */
.r-numrow {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; margin: 0; border-top: 1px solid var(--r-line); cursor: pointer;
}
.r-numrow + .r-numrow { border-top: 1px solid var(--r-line); }
.r-numrow__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.r-numrow__label { font: 600 0.875rem/1.3 var(--r-text); color: var(--r-ink); }
.r-numrow .field-hint { font-size: 0.8125rem; line-height: 1.45; color: var(--r-body); max-width: 34ch; margin: 0; }
.r-numrow__field { position: relative; flex: 0 0 auto; width: 128px; }
.r-numrow__field input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 12px 0 14px;
  border: 1.5px solid var(--r-field); border-radius: 14px; font: 400 1rem/1.4 var(--r-text);
  color: var(--r-ink); background: var(--r-white); text-align: left; }
.r-numrow__field input:focus { border-color: var(--r-tech); outline: 3px solid var(--r-tech); outline-offset: 2px; }
/* the value must clear the suffix: 12px gutter + the widest unit + 6px breathing room */
.r-numrow__field:has(.r-numrow__unit) input { padding-right: 80px; }
.r-numrow__unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 500 0.75rem/1 var(--r-text); color: var(--r-body); pointer-events: none; max-width: 62px;
  overflow: visible; white-space: nowrap; }
.r-numrow__source { font-size: 0.75rem; line-height: 1.5; color: var(--r-body); margin: 0 0 12px; }
.r-numrow__source a { color: var(--r-blue); }

/* sub-heads inside the inputs panel are kickers, not headings */
.calc-panel h4 { font: 700 0.8125rem/1.3 var(--r-display); color: var(--r-blue);
  margin: 20px 0 8px !important; border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: 0; }
.calc-panel form > .form-group:first-of-type { margin-top: 0; }

@media (max-width: 420px) {
  /* below this the label has no room beside a 128px field */
  .r-numrow { flex-direction: column; align-items: stretch; gap: 10px; }
  .r-numrow__field { width: 100%; }
}
/* Tightening the inputs panel. The 5/7 flip narrows this column to about 460px, so help text wraps
   more than it did at 7/12 — the two asks pull against each other. These are the reductions that do
   not hide anything. */
.calc-panel .r-numrow { padding: 12px 0; }
.calc-panel .r-numrow .field-hint { line-height: 1.4; }
.calc-panel h4 { margin: 16px 0 6px !important; }
.calc-panel .form-group { margin-bottom: 20px; }
.calc-panel .form-group > label, .calc-panel fieldset > legend { margin-bottom: 10px; }
.calc-panel .form-group .field-hint { margin-top: 6px; }
/* the result heading takes focus programmatically; no focus ring for a click that did not ask for one */
[data-calculator-result] :focus:not(:focus-visible) { outline: none; }
@media (max-width: 1100px) {
  /* the list keeps rayon-08's 26px gap, which was adding to the 24px margins below — and its
     align-items:center, which on a column flex centres every row horizontally instead of leaving
     them against the gutter */
  .r-nav__links { gap: 0; align-items: stretch; }
  /* and the row rule outranked a bare aria-current selector, so the active item stayed ink */
  .r-nav__links > li:not(.r-nav__cta):not(.r-nav__util) > a[aria-current='page'] { color: var(--r-blue); }
}

/* ---- Block 09 addendum ---- */
/* 1. a 148px field so a placeholder is never clipped by the unit suffix */
.r-numrow__field { width: 148px; }
.calc-lead { font: 400 1.0625rem/1.6 var(--r-text); color: var(--r-body); margin: 0 0 20px; }
/* 2. the native spin buttons crowd the suffix and are not needed: the fields accept typing */
.calc-panel input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-panel input[type="number"]::-webkit-outer-spin-button,
.calc-panel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 3. the home hero kicker stays on one line on desktop */
@media (min-width: 1100px) { .r-hero .r-kicker { max-width: none; white-space: nowrap; } }