/* ==========================================================================
   SECTIONS

   The design-system layers above are split by concern because that is
   what developers edit. Section styling is consolidated here because the
   sections share most of their idioms, and splitting them would trade
   real HTTP requests for imaginary tidiness.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */

.rc-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--rc-z-header);
  border-block-end: var(--rc-border) solid transparent;

  /* Defaults are the over-hero state: light text, no surface. */
  --rc-surface-bg: var(--rc-green-deep);
  --rc-on-surface: var(--rc-paper);
  --rc-on-surface-line: var(--rc-hairline-dark);
  --rc-on-surface-focus: var(--rc-focus-dark);
  color: var(--rc-paper);
}

.rc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-6);
  min-block-size: var(--rc-header-h);
}

/* Scrolled past the hero, or on any page without one. */
.rc-header.is-solid {
  --rc-surface-bg: var(--rc-paper);
  --rc-on-surface: var(--rc-ink);
  --rc-on-surface-line: var(--rc-hairline);
  --rc-on-surface-focus: var(--rc-focus);
  background-color: var(--rc-paper);
  border-block-end-color: var(--rc-hairline);
  color: var(--rc-ink);
}

/* A dark section is currently passing beneath the bar. */
.rc-header.is-solid.is-dark {
  --rc-surface-bg: var(--rc-ink);
  --rc-on-surface: var(--rc-paper);
  --rc-on-surface-line: var(--rc-hairline-dark);
  --rc-on-surface-focus: var(--rc-focus-dark);
  background-color: var(--rc-ink);
  border-block-end-color: transparent;
  color: var(--rc-paper);
}

/* --- Wordmark -------------------------------------------------------------
   The brand mark accompanies a typographic wordmark: letterspaced,
   upright, quiet. The name stays live text so it inverts with the header
   surface; the full-colour mark reads on paper, green and charcoal alike,
   which the lettered lockup does not. */

.rc-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  font-family: var(--rc-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.rc-wordmark__mark { flex: none; }
.rc-wordmark__mark img,
img.rc-wordmark__mark {
  inline-size: auto;
  block-size: 2.25rem;
}

.rc-wordmark--lg {
  gap: var(--rc-space-4);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  letter-spacing: 0.18em;
}
.rc-wordmark--lg .rc-wordmark__mark img,
.rc-wordmark--lg img.rc-wordmark__mark { block-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); }

/* --- WordPress admin bar ----------------------------------------------------
   Logged-in users only. The header is fixed, so it must sit below the
   admin bar rather than under it. Below 601px core lets the bar scroll
   away, which would leave a gap above the header, so it is pinned. */

.admin-bar .rc-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 782px) {
  .admin-bar .rc-header { inset-block-start: var(--wp-admin--admin-bar--height, 46px); }
}

@media (max-width: 600px) {
  #wpadminbar { position: fixed; }
}

/* --- Primary navigation ---------------------------------------------------- */

.rc-nav { display: none; }

.rc-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--rc-space-5), 2.4vw, var(--rc-space-7));
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-nav__link {
  position: relative;
  display: block;
  padding-block: var(--rc-space-2);
  font-size: var(--rc-size-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.rc-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--rc-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rc-dur-standard) var(--rc-ease-out);
}

.rc-nav__link:hover::after,
.rc-nav__link:focus-visible::after,
.rc-nav__link.is-current::after,
.rc-nav .current-menu-item > a::after { transform: scaleX(1); }

.rc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--rc-space-4);
}

.rc-header__cta { display: none; padding: 0.7rem 1.25rem; }

/* --- Burger ----------------------------------------------------------------
   Labelled rather than iconic. Two rules, not three: quieter, and it
   reads as a considered mark instead of a default. */

.rc-burger {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-2) 0;
  font-size: var(--rc-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--rc-track-label);
  text-transform: uppercase;
  color: currentColor;
}

.rc-burger__bars { display: inline-flex; flex-direction: column; gap: 5px; }
.rc-burger__bars > span {
  display: block;
  inline-size: 22px;
  block-size: 1px;
  background: currentColor;
  transition: transform var(--rc-dur-standard) var(--rc-ease-out);
}
.rc-burger[aria-expanded="true"] .rc-burger__bars > span:first-child { transform: translateY(3px) rotate(45deg); }
.rc-burger[aria-expanded="true"] .rc-burger__bars > span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (min-width: 62rem) {
  .rc-nav { display: block; }
  .rc-header__cta { display: inline-flex; }
  .rc-burger { display: none; }
}

/* --- Mobile overlay --------------------------------------------------------- */

.rc-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--rc-z-overlay);
  display: flex;
  align-items: center;
  overflow-y: auto;
  padding-block: calc(var(--rc-header-h) + var(--rc-space-7)) var(--rc-space-8);
}

.rc-nav-overlay__inner { inline-size: 100%; }
.rc-nav-overlay__list { list-style: none; margin: 0; padding: 0; }

.rc-nav-overlay__link {
  display: block;
  padding-block: var(--rc-space-4);
  border-block-end: var(--rc-border) solid var(--rc-hairline-dark);
  font-family: var(--rc-font-display);
  font-size: clamp(2rem, 1.2rem + 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--rc-track-tight);
}

.rc-nav-overlay__foot { margin-block-start: var(--rc-space-8); }

body.rc-scroll-locked { overflow: hidden; }

/* While the overlay is open the header floats over a charcoal panel, so
   it drops its own surface and switches to the light treatment. Without
   this a scrolled header would sit on the overlay as a white bar. */
body.rc-scroll-locked .rc-header,
body.rc-scroll-locked .rc-header.is-solid,
body.rc-scroll-locked .rc-header.is-solid.is-dark {
  --rc-surface-bg: var(--rc-ink);
  --rc-on-surface: var(--rc-paper);
  --rc-on-surface-line: var(--rc-hairline-dark);
  --rc-on-surface-focus: var(--rc-focus-dark);
  background-color: transparent;
  border-block-end-color: transparent;
  color: var(--rc-paper);
}

/* ==========================================================================
   01 HERO
   ========================================================================== */

.rc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
  color: var(--rc-paper);
  --rc-surface-bg: var(--rc-green-deep);
  --rc-on-surface: var(--rc-paper);
  --rc-on-surface-muted: var(--rc-paper-muted);
  --rc-on-surface-line: var(--rc-hairline-dark);
  --rc-on-surface-focus: var(--rc-focus-dark);
}

.rc-hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--rc-z-base);
  background-color: var(--rc-green-deep);
}
.rc-hero__media img,
.rc-hero__media video,
.rc-hero__media .rc-placeholder,
.rc-hero__media .rc-figure,
.rc-hero__media picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --- Slides ---------------------------------------------------------------
   Stacked absolutely and cross-dissolved. Only the active slide is in
   the compositor's way; the rest sit at zero opacity. */

.rc-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.rc-hero__slide.is-active { opacity: 1; }

/* Without scripting the first slide is simply the hero image. */
html:not(.rc-js) .rc-hero__slide:not(.is-active) { display: none; }

.rc-hero__inner {
  position: relative;
  z-index: var(--rc-z-content);
  inline-size: 100%;
  padding-block: var(--rc-space-8) var(--rc-space-6);
}

.rc-hero__content { max-width: 56rem; }
/* All taglines share one grid cell, so the headline block is always as
   tall as the longest line set and rotating never shifts the layout. */
.rc-hero__title {
  display: grid;
  margin-block: var(--rc-space-5);
}
.rc-tagline { grid-area: 1 / 1; }

.rc-tagline__line {
  display: block;
  overflow: hidden;
  padding-block: 0.08em 0.16em;
  margin-block: -0.08em -0.16em;
}
.rc-tagline__line > span { display: block; }

/* Without scripting only the first tagline is shown. */
html:not(.rc-js) .rc-tagline:not(.is-active) { display: none; }
.rc-hero__lede { max-width: 42ch; color: var(--rc-paper-muted); }

.rc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-4);
  margin-block-start: var(--rc-space-6);
}

/* --- Rotation controls ---------------------------------------------------
   Thin bars that double as the slide timer and as direct navigation,
   plus the pause control WCAG 2.2.2 requires for auto-rotation. */

.rc-hero__controls {
  display: flex;
  align-items: center;
  gap: var(--rc-space-5);
  margin-block-start: var(--rc-space-6);
}

.rc-hero__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-2) 0;
  font-size: var(--rc-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--rc-track-label);
  text-transform: uppercase;
  color: var(--rc-paper-muted);
  transition: color var(--rc-dur-micro) var(--rc-ease-out);
}
.rc-hero__toggle:hover,
.rc-hero__toggle:focus-visible { color: var(--rc-paper); }

/* Two bars for pause; a single triangle for play. */
.rc-hero__toggle-icon {
  position: relative;
  inline-size: 8px;
  block-size: 10px;
  border-inline: 3px solid currentColor;
}
.rc-hero__toggle[aria-pressed="true"] .rc-hero__toggle-icon {
  inline-size: 0;
  border-inline: 0;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}

.rc-hero__bars {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-hero__bar {
  position: relative;
  display: block;
  inline-size: 34px;
  block-size: 14px;
  padding: 0;
  cursor: pointer;
}
.rc-hero__bar::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 2px;
  margin-block-start: -1px;
  background: rgba(247, 247, 242, 0.32);
}

.rc-hero__bar-fill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  margin-block-start: -1px;
  background: var(--rc-amber);
}

/* Bars already shown sit filled, so the row reads as progress. */
.rc-hero__bar.is-seen .rc-hero__bar-fill { inline-size: 100%; }

.rc-hero__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-3);
  margin-block-start: var(--rc-space-6);
  font-size: var(--rc-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-paper-muted);
}

@media (min-width: 62rem) {
  .rc-hero__inner { padding-block: var(--rc-space-9) var(--rc-space-8); }
  .rc-hero__actions { margin-block-start: var(--rc-space-7); }
  .rc-hero__cue {
    position: absolute;
    inset-block-end: var(--rc-space-7);
    inset-inline-end: var(--rc-gutter);
    margin: 0;
  }
}

/* A hero placeholder labels itself at the top, so it does not fight the
   headline and CTAs sitting at the foot of the section. Once real
   photography lands this rule stops applying. */
.rc-hero__media .rc-placeholder { justify-content: center; }

/* ==========================================================================
   02 TRUST / HERITAGE FIGURES
   ========================================================================== */

.rc-stats { display: grid; gap: var(--rc-space-7); }

/* Four figures: two by two on tablets, one row from desktop. A hairline
   separates columns but never opens a row. */
@media (min-width: 48rem) {
  .rc-stats { grid-template-columns: repeat(2, 1fr); gap: var(--rc-space-7) 0; }
  .rc-stat { padding-inline-end: clamp(var(--rc-space-5), 4vw, var(--rc-space-8)); }
  .rc-stat:nth-child(even) {
    padding-inline-start: clamp(var(--rc-space-5), 4vw, var(--rc-space-8));
    border-inline-start: var(--rc-border) solid var(--rc-on-surface-line);
  }
}

@media (min-width: 62rem) {
  .rc-stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .rc-stat { padding-inline-end: clamp(var(--rc-space-5), 2.5vw, var(--rc-space-7)); }
  .rc-stat + .rc-stat {
    padding-inline-start: clamp(var(--rc-space-5), 2.5vw, var(--rc-space-7));
    border-inline-start: var(--rc-border) solid var(--rc-on-surface-line);
  }
}

.rc-stat__value {
  display: block;
  font-family: var(--rc-font-display);
  font-size: clamp(3rem, 1.8rem + 5vw, 5.5rem);
  line-height: 1;
  letter-spacing: var(--rc-track-display);
}

.rc-stat__label {
  display: block;
  margin-block-start: var(--rc-space-4);
  font-size: var(--rc-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-on-surface-muted);
}

/* ==========================================================================
   03 INTRODUCTION
   ========================================================================== */

.rc-intro__statement { max-width: 18ch; }
.rc-intro__body { margin-block-start: var(--rc-space-7); }
.rc-intro__media { margin-block-start: var(--rc-space-8); }

@media (min-width: 62rem) {
  .rc-intro__media { margin-block-start: 0; transform: translateY(var(--rc-space-8)); }
}

/* ==========================================================================
   04 PROCESS
   ========================================================================== */

/* No bottom margin: on mobile the split's own gap separates the heading
   from the stages, and on desktop the heading is a sticky side column
   where a bottom margin does nothing. Keeping it stacked 112px of dead
   green above stage 01. */
.rc-process__head { margin-block-end: 0; }

.rc-process__track {
  position: relative;
  display: grid;
  gap: var(--rc-space-8);
  padding-inline-start: var(--rc-space-7);
}

/* The progress rail: one hairline, filling amber.

   Scoped to the track so it outranks the generic .rc-progress rule in
   07-motion.css, which loads later and would otherwise reset this to
   position: relative. That collapsed the rail to zero height and left it
   occupying a grid row, adding a phantom 64px gap above stage 01. */
.rc-process__track .rc-process__rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 1px;
}
.rc-process__rail .rc-progress__fill { inline-size: 1px; block-size: 0; }

.rc-step { position: relative; }

.rc-step::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: calc(var(--rc-space-7) * -1);
  inline-size: 7px;
  block-size: 7px;
  background: var(--rc-on-surface-line);
  transform: translateX(-3px);
  transition: background-color var(--rc-dur-standard) var(--rc-ease-out);
}
.rc-step.is-active::before { background: var(--rc-amber); }

.rc-step__index { display: block; margin-block-end: var(--rc-space-3); }
.rc-step__title { margin-block-end: var(--rc-space-3); }
.rc-step__body { max-width: 44ch; color: var(--rc-on-surface-muted); }

@media (min-width: 62rem) {
  .rc-process__track { padding-inline-start: var(--rc-space-8); gap: var(--rc-space-9); }
  .rc-step::before { inset-inline-start: calc(var(--rc-space-8) * -1); }
}

/* ==========================================================================
   05 PRODUCT
   ========================================================================== */

.rc-products { margin-block-start: var(--rc-space-8); }
.rc-product__media { margin-block-end: 0; }
.rc-product__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-space-4);
}

/* ==========================================================================
   06 COLOUR
   ========================================================================== */

.rc-colour__head { margin-block-end: var(--rc-space-8); }

.rc-colour__panels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-inline: var(--rc-gutter);
  scrollbar-width: none;
}
.rc-colour__panels::-webkit-scrollbar { display: none; }

.rc-panel {
  position: relative;
  overflow: hidden;
  scroll-snap-align: center;
}

/* The panel owns the aspect ratio and the caption; the inner media fills
   it absolutely so the image cannot dictate the panel height. */
.rc-panel > .rc-figure,
.rc-panel > .rc-placeholder {
  position: absolute;
  inset: 0;
  block-size: 100%;
}
.rc-panel > .rc-figure picture,
.rc-panel > .rc-figure img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.rc-panel__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--rc-z-content);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-space-4);
  padding: var(--rc-space-5);
  color: var(--rc-paper);
}

.rc-panel__name {
  font-size: var(--rc-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
}

.rc-panel__index {
  font-size: var(--rc-size-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--rc-amber);
}

@media (min-width: 48rem) {
  .rc-colour__panels {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    padding-inline: 0;
  }
}

/* ==========================================================================
   07 WHY CULLET MATTERS
   ========================================================================== */

.rc-why__cols { margin-block-start: var(--rc-space-8); }
.rc-why__title { margin-block: var(--rc-space-4) var(--rc-space-3); }

.rc-why__statement {
  margin-block-start: clamp(var(--rc-space-8), 8vw, var(--rc-space-11));
  padding-block-start: var(--rc-space-7);
  border-block-start: var(--rc-border) solid var(--rc-on-surface-line);
  text-transform: uppercase;
}

/* ==========================================================================
   08 FOUNDER
   ========================================================================== */

/* A narrow measure inside a wide page. The empty margins either side
   are the composition, not leftover space: they make this read as a
   pause between the dense columns above and the dark block below. */

.rc-founder__inner {
  padding-block: clamp(var(--rc-space-8), 7vw, var(--rc-space-10));
}

/* No character cap here. The 760px text container is already the
   measure, and capping it again squeezed this statement into a single
   overflowing line instead of letting it set cleanly. */
.rc-founder__statement {
  margin-block-start: var(--rc-space-5);
}

.rc-founder__body { margin-block-start: var(--rc-space-8); }

/* Signature block. The short amber rule echoes the eyebrow mark and
   closes the statement the way a signature closes a letter. */
.rc-founder__signature {
  margin-block-start: var(--rc-space-8);
  padding-block-start: var(--rc-space-5);
  border-block-start: var(--rc-border) solid var(--rc-on-surface-line);
}
.rc-founder__signature::before {
  content: "";
  display: block;
  inline-size: var(--rc-space-6);
  block-size: 1px;
  margin-block: calc(var(--rc-space-5) * -1 - 1px) var(--rc-space-5);
  background: var(--rc-amber);
}

.rc-founder__name {
  font-family: var(--rc-font-sans);
  font-size: var(--rc-size-h3);
  font-weight: 600;
  line-height: var(--rc-lh-heading);
  letter-spacing: var(--rc-track-tight);
}

.rc-founder__role {
  margin-block-start: var(--rc-space-2);
  font-size: var(--rc-size-small);
  letter-spacing: var(--rc-track-label);
  text-transform: uppercase;
  color: var(--rc-on-surface-muted);
}

.rc-founder__more { margin-block-start: var(--rc-space-7); }


/* ==========================================================================
   09 HERITAGE
   ========================================================================== */

.rc-heritage__year { display: block; }
.rc-heritage__lede { margin-block-start: var(--rc-space-5); }

.rc-timeline {
  display: grid;
  gap: var(--rc-space-7);
  padding: 0;
  list-style: none;
}

/* Element-qualified: the reset's ol[class] { margin: 0 } outranks a lone
   class, which pressed the timeline up against the paragraph above. */
ol.rc-timeline { margin-block-start: var(--rc-space-9); }

.rc-timeline__item {
  padding-block-start: var(--rc-space-5);
  border-block-start: var(--rc-border) solid var(--rc-on-surface-line);
}
.rc-timeline__marker { display: block; margin-block-end: var(--rc-space-3); }
.rc-timeline__label { color: var(--rc-on-surface-muted); }

@media (min-width: 48rem) {
  .rc-timeline { grid-template-columns: repeat(4, 1fr); gap: var(--rc-space-5); }
}

/* ==========================================================================
   10 SUSTAINABILITY FLOW
   ========================================================================== */

/* Element-qualified because the reset's ol[class] { margin: 0 } outranks
   a lone class, which silently removed the gap under the heading. */
ol.rc-flow {
  display: grid;
  gap: 0;
  margin-block-start: var(--rc-space-8);
  padding: 0;
  list-style: none;
  counter-reset: rc-flow;
}

.rc-flow__node {
  position: relative;
  padding-block: var(--rc-space-5);
  padding-inline-start: var(--rc-space-7);
  border-block-start: var(--rc-border) solid var(--rc-on-surface-line);
}
.rc-flow__node:last-child {
  border-block-end: var(--rc-border) solid var(--rc-on-surface-line);
}

.rc-flow__node::before {
  counter-increment: rc-flow;
  content: counter(rc-flow, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--rc-space-5);
  font-size: var(--rc-size-small);
  font-variant-numeric: tabular-nums;
  color: var(--rc-amber-ink);
}
.rc-surface-green .rc-flow__node::before,
.rc-surface-ink .rc-flow__node::before { color: var(--rc-amber); }

/* Flow nodes also carry .rc-step so process.js can dim and activate
   them in sequence. That class's 7px square marker shares this
   ::before, so undo it here: the marker in a flow is the number. */
.rc-flow__node::before {
  inline-size: auto;
  block-size: auto;
  background: none;
  transform: none;
}
.rc-flow__node.is-active::before { background: none; }

.rc-flow__label { display: block; font-weight: 600; }
.rc-flow__note {
  display: block;
  margin-block-start: var(--rc-space-2);
  font-size: var(--rc-size-small);
  color: var(--rc-on-surface-muted);
}

@media (min-width: 62rem) {
  .rc-flow { grid-template-columns: repeat(6, 1fr); }
  .rc-flow__node,
  .rc-flow__node:last-child {
    padding-block: var(--rc-space-6) var(--rc-space-8);
    padding-inline: var(--rc-space-4);
    border-block-end: 0;
  }
  .rc-flow__node::before { inset-inline-start: var(--rc-space-4); inset-block-start: var(--rc-space-6); }
  .rc-flow__label { margin-block-start: var(--rc-space-7); }
}

/* ==========================================================================
   11 CTA
   ========================================================================== */

.rc-cta__inner { max-width: 44rem; }
.rc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-4);
  margin-block-start: var(--rc-space-7);
}

/* ==========================================================================
   12 CONTACT
   ========================================================================== */

.rc-contact__details { font-style: normal; }
.rc-contact__details span { display: block; }
.rc-contact__group + .rc-contact__group { margin-block-start: var(--rc-space-6); }
.rc-contact__form { margin-block-start: var(--rc-space-6); }
.rc-contact__submit { grid-column: 1 / -1; }
.rc-contact__consent { grid-column: 1 / -1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.rc-footer { padding-block: var(--rc-space-9) var(--rc-space-7); }

.rc-footer__top { display: grid; gap: var(--rc-space-8); }
.rc-footer__line {
  max-width: 30ch;
  margin-block-start: var(--rc-space-4);
  color: var(--rc-paper-muted);
}

.rc-footer__list {
  display: grid;
  gap: var(--rc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-footer__list a:hover,
.rc-footer__list a:focus-visible { color: var(--rc-amber); }

.rc-footer__address {
  font-style: normal;
  line-height: 1.8;
  color: var(--rc-paper-muted);
}
.rc-footer__address span { display: block; }
.rc-footer__contact {
  display: block;
  margin-block-start: var(--rc-space-4);
  color: var(--rc-paper);
}
.rc-footer__contact:hover,
.rc-footer__contact:focus-visible { color: var(--rc-amber); }

.rc-footer__rule { margin-block: var(--rc-space-8) var(--rc-space-5); }

.rc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
  color: var(--rc-paper-muted);
}
.rc-footer__minor:hover,
.rc-footer__minor:focus-visible { color: var(--rc-amber); }

@media (min-width: 48rem) {
  .rc-footer__top { grid-template-columns: 2fr 1fr 1.2fr; gap: var(--rc-space-7); }
}