/*============================================================================*\
  River Forest Marketing: light theme override
  Loaded ONLY by river_forest_marketing via a conditional <link> in base.html.erb
  (gated on the `extra_stylesheet` config key). Dark sites never load this sheet,
  so Coastline and the cafes cannot drift.

  Strategy: redeclare the dark-theme custom properties for light on body.rfm-light
  (this auto-flips every token-based surface and text color), then override the
  handful of hardcoded dark assumptions (text-shadows, black box-shadows, dark
  hero overlays, dark nav/footer/form panels, button hover states) scoped to
  body.rfm-light. The shared default/assets/css/style.erb.css is NOT modified.
\*============================================================================*/

body.rfm-light {
  /* light surfaces */
  --primary-color-1: hsl(40, 30%, 98%);   /* paper: body, hero, contact bg   */
  --primary-color-2: #ffffff;             /* cards, inputs                     */
  --primary-color-3: hsl(40, 34%, 96%);   /* alt section bg                    */
  --primary-color-4: hsl(160, 55%, 96%);  /* emerald-tint surface              */
  /* emerald accent: Option A (locked) */
  --primary-accent: hsl(160, 55%, 30%);          /* #257A5A */
  /* dark ink text + hairlines */
  --primary-text-and-borders-color: hsl(215, 25%, 18%);
  --primary-text-and-borders-color-alpha-20: hsla(215, 25%, 18%, 0.2);
  --primary-text-and-borders-color-alpha-10: hsla(215, 25%, 18%, 0.1);
  /* white text on emerald buttons; dark scrim for the mobile-nav overlay */
  --accent-text-and-borders-color: #ffffff;
  --accent-text-and-borders-color-alpha-80: hsla(215, 25%, 18%, 0.5);
  --accent-text-and-borders-color-alpha-15: hsla(215, 25%, 18%, 0.12);
  /* muted text: overrides the hardcoded :root grey (hsla(0,0%,65%)) */
  --quick-silver: hsl(215, 12%, 45%);
  --shadow-1: 0 6px 20px -8px hsla(215, 25%, 18%, 0.25);
  /* accessibility: 16px floor. Lifting the label tokens to 16px so .btn,
     .navbar-link, .label-2 (eyebrows, footer links), and .label-1 (topbar
     spans) all clear a 16px minimum. */
  --fontSize-label-1: 1.6rem;
  --fontSize-label-2: 1.6rem;
}

/* deeper emerald for button fills / link text so white-on-green passes AA */
body.rfm-light {
  --rfm-emerald: hsl(160, 55%, 30%);
  --rfm-emerald-deep: hsl(162, 52%, 24%);
  --rfm-emerald-soft: hsl(160, 55%, 96%);
  --rfm-emerald-line: hsl(160, 42%, 80%);
  --rfm-hair: hsl(215, 22%, 90%);
  --rfm-ink: hsl(215, 25%, 18%);
  --rfm-muted: hsl(215, 12%, 45%);
  --rfm-paper: hsl(40, 30%, 98%);
}


/*==========================================================================*\
  #TYPOGRAPHY: drop dark text-shadows, tighten Sora headings for a SaaS feel
\*==========================================================================*/

body.rfm-light .display-1,
body.rfm-light .headline-1,
body.rfm-light .headline-2,
body.rfm-light .title-1,
body.rfm-light .title-2,
body.rfm-light .title-3,
body.rfm-light .title-4 {
  text-shadow: none;
  font-weight: 700;
}

body.rfm-light .display-1,
body.rfm-light .headline-1 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}

body.rfm-light .section-subtitle {
  text-shadow: none;
  letter-spacing: 0.14em;
}

/* the decorative separator.svg under eyebrows is a dark-theme flourish: hide it
   but keep its box (visibility, not display:none) so it still spaces the title
   below the eyebrow. display:none collapses the gap and the title overlaps. */
body.rfm-light .section-subtitle::after { visibility: hidden; }

body.rfm-light .hero-text,
body.rfm-light .hero-title { text-shadow: none; }


/*==========================================================================*\
  #BUTTONS: solid emerald primary with white text; deeper-emerald hover fill
\*==========================================================================*/

/* base outlined .btn: emerald outline → emerald fill on hover, white text */
body.rfm-light .btn {
  border-radius: 10px;
  border-width: 1.5px;
}
body.rfm-light .btn::before { background-color: var(--rfm-emerald-deep); }
body.rfm-light .btn .text-2 { color: #fff; }

/* filled secondary CTA: emerald bg, white text, deeper hover */
body.rfm-light .btn-secondary {
  background-color: var(--rfm-emerald);
  color: #fff;
  border-color: var(--rfm-emerald);
}
body.rfm-light .btn-secondary::before { background-color: var(--rfm-emerald-deep); }
body.rfm-light .btn-secondary .text-2 { color: #fff; }

/* the contact-form submit uses .btn (no .btn-primary rule): make it solid emerald */
body.rfm-light .contact-form .btn {
  background-color: var(--rfm-emerald);
  color: #fff;
  border-color: var(--rfm-emerald);
}
body.rfm-light .contact-form .btn::before { background-color: var(--rfm-emerald-deep); }
body.rfm-light .contact-form .btn .text-2 { color: #fff; }
body.rfm-light .contact-form .btn .text-1 { color: #fff; }


/*==========================================================================*\
  #HEADER / TOPBAR / NAV: light chrome
\*==========================================================================*/

/* hero is light, so the header is transparent at rest and white when pinned.
   top:0 because the topbar is hidden on this site (hide_topbar); without this
   the ≥575px media query in style.erb.css sits the header at top:51px to clear
   a topbar that no longer exists, leaving a gap. */
body.rfm-light .header {
  top: 0;
  background-color: transparent;
  border-block-end: 1px solid transparent;
}
body.rfm-light .header.active {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-block-end-color: var(--rfm-hair);
  box-shadow: 0 6px 24px -16px hsla(215, 25%, 18%, 0.3);
}

/* hamburger lines are dark ink via --primary-text-and-borders-color (already dark) */

/* desktop nav links: drop the dark text-shadow on the light header */
body.rfm-light .navbar-link { text-shadow: none; }

/* mobile off-canvas panel (<1200px): white, not near-black. Scoped to mobile
   because on desktop `.navbar` is `all: unset` (an inline nav container); a broad
   `body.rfm-light .navbar { background:#fff }` would out-rank that reset and paint
   a white box + shadow around the desktop nav links. */
@media (max-width: 1199.98px) {
  body.rfm-light .navbar {
    background-color: #ffffff;
    box-shadow: var(--shadow-1);
  }
  body.rfm-light .navbar-list,
  body.rfm-light .navbar-item { border-color: var(--rfm-hair); }
  body.rfm-light .navbar .body-4 { color: var(--rfm-muted); }
}

/* desktop nav (≥1200px): clean inline nav, no per-item top borders */
@media (min-width: 1200px) {
  body.rfm-light .navbar-item { border: none; }
}

/* dark scrim behind the open mobile nav (works on light too) */
body.rfm-light .overlay {
  background-color: hsla(215, 25%, 18%, 0.5);
}

/* topbar hairline is dark-at-20% via tokens: fine on paper */
body.rfm-light .topbar { background-color: var(--rfm-paper); }


/*==========================================================================*\
  #PRELOADER: emerald splash with a white spinner
\*==========================================================================*/

body.rfm-light .preload .circle {
  border-color: rgba(255, 255, 255, 0.35);
  border-block-start-color: #fff;
}
body.rfm-light .preload .text {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.85);
}


/*==========================================================================*\
  #HERO: type-forward, light, compact (home + inner pages)
\*==========================================================================*/

/* inner-page heroes (.hero shortened_hero): let content drive height */
body.rfm-light .hero {
  min-height: auto;
  /* clear the fixed header (~141px) = ~141px of chrome (topbar hidden) */
  padding-block-start: clamp(165px, 20vh, 197px);
  padding-block-end: clamp(80px, 11vw, 128px);
  background:
    radial-gradient(1100px 420px at 78% -8%, var(--rfm-emerald-soft), transparent 70%),
    var(--rfm-paper);
}
body.rfm-light .shortened_hero { min-height: auto; }
body.rfm-light .hero .slider-item {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  padding-block-start: 0;
  height: auto;
  width: 100%;
  display: block;
}
body.rfm-light .hero .slider-bg { display: none; }
/* The shared .slider-reveal entrance (slide-up + 750ms delay) leaves the eyebrow
   translated ~60px down during its delay, overlapping the title below it. The
   shared `.hero .slider-item.active .slider-reveal` rule (4 classes) out-ranks a
   plain `.slider-reveal` override, and animated properties beat static `transform:
   none`: so kill the animation at matching-or-higher specificity on the active
   item. Inner-page heroes then render in place, no jump. */
body.rfm-light .hero .slider-item .slider-reveal,
body.rfm-light .hero .slider-item.active .slider-reveal {
  animation: none;
  transform: none;
  opacity: 1;
}
body.rfm-light .hero .section-subtitle::after { visibility: hidden; }
body.rfm-light .hero .btn { margin-inline: auto; }


/* ---------- home: type-forward hero (replaces split hero) ---------- */
body.rfm-light .rfm-hero {
  /* clear the fixed header (~141px) = ~141px of chrome (topbar hidden) */
  padding-block-start: clamp(165px, 20vh, 197px);
  padding-block-end: clamp(72px, 10vw, 120px);
  background:
    radial-gradient(1200px 480px at 80% -10%, var(--rfm-emerald-soft), transparent 70%),
    var(--rfm-paper);
  border-block-end: 1px solid var(--rfm-hair);
}
body.rfm-light .rfm-hero-inner {
  max-width: 860px;
  margin-inline: auto;
  display: block;
  text-align: left;
}
body.rfm-light .rfm-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
body.rfm-light .rfm-hero-media { display: none; }

body.rfm-light .rfm-h-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fontFamily-forum);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.3vw, 1.35rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rfm-emerald-deep);
}
body.rfm-light .rfm-h-eyebrow .ed {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rfm-emerald);
}

body.rfm-light .rfm-h-title {
  font-family: var(--fontFamily-forum);
  font-weight: 700;
  font-size: clamp(3.2rem, 5.6vw, 5.8rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--rfm-ink);
  margin-block-start: 20px;
  text-shadow: none;
}
body.rfm-light .rfm-h-title em {
  font-style: normal;
  color: var(--rfm-emerald);
}

body.rfm-light .rfm-h-sub {
  font-family: var(--fontFamily-dm_sans);
  font-size: clamp(1.7rem, 1.7vw, 2rem);
  line-height: 1.55;
  color: var(--rfm-muted);
  margin-block-start: 22px;
  max-width: 56ch;
}

body.rfm-light .rfm-h-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-block-start: 34px;
  flex-wrap: wrap;
}

/* primary CTA: solid emerald, white text, arrow nudges on hover */
body.rfm-light .rfm-h-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fontFamily-forum);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 11px;
  color: #fff;
  background: var(--rfm-emerald-deep);
  text-decoration: none;
  box-shadow:
    0 1px 2px hsla(160 55% 18% / 0.2),
    0 12px 26px -14px hsla(160 55% 18% / 0.6);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
body.rfm-light .rfm-h-btn .ar { transition: transform 160ms ease; }
@media (hover: hover) {
  body.rfm-light .rfm-h-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 1px 2px hsla(160 55% 18% / 0.24),
      0 16px 30px -14px hsla(160 55% 18% / 0.7);
  }
  body.rfm-light .rfm-h-btn:hover .ar { transform: translateX(3px); }
}
body.rfm-light .rfm-h-btn:focus-visible {
  outline: 3px solid hsla(160, 55%, 30%, 0.4);
  outline-offset: 2px;
}

/* secondary ghost link */
body.rfm-light .rfm-h-ghost {
  font-family: var(--fontFamily-forum);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--rfm-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rfm-hair);
  padding-bottom: 3px;
  transition: color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) {
  body.rfm-light .rfm-h-ghost:hover {
    color: var(--rfm-emerald-deep);
    border-color: var(--rfm-emerald-line);
  }
}
body.rfm-light .rfm-h-ghost:focus-visible {
  outline: 3px solid hsla(160, 55%, 30%, 0.4);
  outline-offset: 2px;
}

/* trust strip: the three ownable wedges, where a hero photo would have been.
   Grid (not flex) keeps all three on one row; text wraps within a cell instead
   of the whole item wrapping to a ragged 2-and-1 layout. */
body.rfm-light .rfm-h-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  width: 100%;
  margin-block-start: 46px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rfm-hair);
  font-family: var(--fontFamily-dm_sans);
  font-size: 1.6rem;
  color: var(--rfm-muted);
}
body.rfm-light .rfm-h-trust span {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
}
body.rfm-light .rfm-h-trust svg { flex: none; margin-top: 4px; }

@media (max-width: 720px) {
  body.rfm-light .rfm-h-trust { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  body.rfm-light .rfm-hero { padding-block-start: 150px; padding-block-end: 72px; }
}


/*==========================================================================*\
  #POSITIONING SECTION: "Your website, found in search, built to convert."
\*==========================================================================*/

body.rfm-light .rfm-positioning {
  padding-block: clamp(64px, 9vw, 104px);
  background: #ffffff;
  border-block-end: 1px solid var(--rfm-hair);
}
body.rfm-light .rfm-positioning .container { max-width: 860px; }
body.rfm-light .rfm-pos-line {
  font-family: var(--fontFamily-forum);
  font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rfm-ink);
}
body.rfm-light .rfm-pos-line em {
  font-style: normal;
  color: var(--rfm-emerald);
}
body.rfm-light .rfm-pos-lead {
  font-family: var(--fontFamily-dm_sans);
  color: var(--rfm-muted);
  margin-block: 16px 32px;
  max-width: 60ch;
  font-size: 1.6rem;
}
body.rfm-light .rfm-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.rfm-light .rfm-pos-cell {
  border: 1px solid var(--rfm-hair);
  border-radius: 14px;
  padding: 22px 20px;
  background: var(--rfm-paper);
}
body.rfm-light .rfm-pos-cell .ph {
  font-family: var(--fontFamily-forum);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--rfm-emerald-deep);
}
body.rfm-light .rfm-pos-cell .sv {
  font-family: var(--fontFamily-dm_sans);
  font-size: 1.6rem;
  color: var(--rfm-muted);
  margin-block-start: 8px;
  line-height: 1.5;
}
@media (max-width: 860px) {
  body.rfm-light .rfm-pos-grid { grid-template-columns: 1fr; }
}


/*==========================================================================*\
  #PRICING ANCHOR: "Pricing built for small, local businesses. Transparent. Fair."
\*==========================================================================*/

body.rfm-light .rfm-pricing-anchor {
  padding-block: clamp(56px, 8vw, 88px);
  background: var(--rfm-emerald-soft);
  border-block: 1px solid var(--rfm-emerald-line);
}
body.rfm-light .rfm-pricing-anchor .container { max-width: 860px; }
body.rfm-light .rfm-price-line {
  font-family: var(--fontFamily-forum);
  font-weight: 700;
  font-size: clamp(2.8rem, 4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rfm-ink);
  max-width: 20ch;
}
body.rfm-light .rfm-price-line em {
  font-style: normal;
  color: var(--rfm-emerald);
}


/*==========================================================================*\
  #MODULES: retune the opt-in rfm-* / pp-* blocks for light
\*==========================================================================*/

/* SLA band */
body.rfm-light .rfm-sla-text {
  text-shadow: none;
  color: var(--rfm-ink);
}
body.rfm-light .rfm-sla-sub { color: var(--rfm-emerald); }

/* pain → promise */
body.rfm-light .pp-lead { color: var(--rfm-muted); }
body.rfm-light .pp-cell { border-color: var(--rfm-hair); }
body.rfm-light .pp-pain { background: #ffffff; }
body.rfm-light .pp-pain p { color: var(--rfm-muted); }
body.rfm-light .pp-promise {
  background: var(--rfm-emerald-soft);
  border: 1px solid var(--rfm-emerald-line);
  box-shadow: 0 14px 30px -22px hsla(160 55% 18% / 0.35);
}
body.rfm-light .pp-promise p { color: var(--rfm-ink); }
body.rfm-light .pp-tag { color: var(--rfm-muted); }
body.rfm-light .pp-tag-accent { color: var(--rfm-emerald-deep); }
body.rfm-light .pp-pain-head { color: var(--rfm-muted); }
body.rfm-light .pp-promise-head { color: var(--rfm-emerald-deep); }

/* services grid */
body.rfm-light .rfm-service-card {
  background: #ffffff;
  border: 1px solid var(--rfm-hair);
  box-shadow: 0 1px 2px hsla(215 25% 18% / 0.04);
}
body.rfm-light .rfm-service-name { color: var(--rfm-ink); }
body.rfm-light .rfm-service-tagline { color: var(--rfm-muted); }
body.rfm-light .rfm-service-price { color: var(--rfm-emerald-deep); }
body.rfm-light .rfm-service-link { color: var(--rfm-emerald-deep); }
@media (hover: hover) {
  body.rfm-light .rfm-service-card:hover {
    transform: translateY(-4px);
    border-color: var(--rfm-emerald-line);
    box-shadow: 0 18px 40px -24px hsla(160 55% 18% / 0.35);
  }
}

/*==========================================================================*\
  #ACCESSIBILITY + SERVICES GRID CENTERING
  - 16px floor for the remaining sub-16px text that the --fontSize-label
    token override above doesn't reach (direct font-sizes).
  - Form inputs are 16px: iOS Safari auto-zooms the page on focus for any
    input below 16px, which is a visible jank.
  - The services grid switches to flex + center so three cards fill the row
    evenly (instead of occupying the first 3 of 4 grid tracks) and an odd
    card centers on the narrower breakpoints too.
  All scoped to body.rfm-light; the dark-theme cafes are untouched.
\*==========================================================================*/
body.rfm-light .rfm-service-link { font-size: 1.6rem; }
body.rfm-light .pp-pain-head,
body.rfm-light .pp-promise-head { font-size: 1.6rem; }
body.rfm-light .contact-form input,
body.rfm-light .contact-form select,
body.rfm-light .contact-form textarea { font-size: 1.6rem; }

body.rfm-light .rfm-services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.rfm-light .rfm-service-card {
  flex: 1 1 300px;
  max-width: 380px;
}

/* how-we-do-it grid */
body.rfm-light .rfm-how-card {
  background: #ffffff;
  border: 1px solid var(--rfm-hair);
}
body.rfm-light .rfm-how-title { color: var(--rfm-ink); }
body.rfm-light .rfm-how-text { color: var(--rfm-muted); }

/* service sub-page detail */
body.rfm-light .rfm-included li { color: var(--rfm-ink); }
body.rfm-light .rfm-included ion-icon { color: var(--rfm-emerald); }
body.rfm-light .rfm-benefit {
  background: var(--rfm-emerald-soft);
  border: 1px solid var(--rfm-emerald-line);
}
body.rfm-light .rfm-vs {
  background: var(--rfm-paper);
  border-left: 3px solid var(--rfm-emerald);
}
body.rfm-light .rfm-vs p { color: var(--rfm-muted); }
body.rfm-light .rfm-vs .section-subtitle { color: var(--rfm-emerald-deep); }
body.rfm-light .rfm-price-big { color: var(--rfm-emerald-deep); }
body.rfm-light .rfm-price-note {
  color: var(--rfm-muted);
  font-size: 1.6rem;
  line-height: 1.5;
  margin-block: 0.75rem 1.5rem;
  margin-inline: auto;
}
body.rfm-light .rfm-cta-sub { color: var(--rfm-muted); }

/* the .section-text body copy on detail pages */
body.rfm-light .section-text { color: var(--rfm-muted); }

/* about-us: framed founders portrait at the top of the story prose */
body.rfm-light .rfm-about-portrait {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--rfm-hair);
  box-shadow: 0 18px 40px -28px hsla(215, 25%, 18%, 0.4);
  margin-block: 0 32px;
}


/*==========================================================================*\
  #CONTACT FORM + REACH OUT: light inputs, no dark pattern panels
\*==========================================================================*/

body.rfm-light .contact-form input,
body.rfm-light .contact-form select,
body.rfm-light .contact-form textarea,
body.rfm-light .input-field {
  background: #ffffff;
  color: var(--rfm-ink);
  border: 1px solid var(--rfm-hair);
  border-radius: 8px;
}
body.rfm-light .contact-form input::placeholder,
body.rfm-light .contact-form textarea::placeholder { color: hsl(215, 10%, 60%); }
body.rfm-light .contact-form input:focus,
body.rfm-light .contact-form select:focus,
body.rfm-light .contact-form textarea:focus,
body.rfm-light .input-field:focus {
  border-color: var(--rfm-emerald);
  outline: 3px solid hsla(160, 55%, 30%, 0.18);
}
body.rfm-light .contact-form select option {
  background: #ffffff;
  color: var(--rfm-ink);
}

/* reach_out panel: drop the dark form-pattern.webp, use an emerald tint */
body.rfm-light .form-right {
  background-image: none !important;
  background-color: var(--rfm-emerald-soft);
  border: 1px solid var(--rfm-emerald-line);
  border-radius: 16px;
}
body.rfm-light .form-right .body-4 { color: var(--rfm-muted); }
body.rfm-light .form-right .headline-1 { color: var(--rfm-ink); }


/*==========================================================================*\
  #FOOTER: light, no dark brand panel or pattern assets
\*==========================================================================*/

body.rfm-light .footer {
  background-color: var(--rfm-paper);
  border-block-start: 1px solid var(--rfm-hair);
}
body.rfm-light .footer-brand {
  background: var(--rfm-emerald-soft);
  border: 1px solid var(--rfm-emerald-line);
  border-radius: 16px;
}
body.rfm-light .footer-brand::before,
body.rfm-light .footer-brand::after { background-image: none; }
body.rfm-light .footer-brand :is(.body-4, .label-1) { color: var(--rfm-muted); }
body.rfm-light .footer-brand .label-1 .span { color: var(--rfm-ink); }
body.rfm-light .footer-link { color: var(--rfm-muted); }
body.rfm-light .footer-link:is(:hover, :focus-visible) { color: var(--rfm-emerald-deep); }
body.rfm-light .copyright { color: var(--rfm-muted); }
body.rfm-light .copyright .link { color: var(--rfm-emerald-deep); }

/* socials removed for now (profiles not live): drop the now-empty third
   footer column and rebalance the grid so the nav isn't pushed off-center. */
body.rfm-light .footer-top > .footer-list:last-of-type { display: none; }
@media (min-width: 992px) {
  body.rfm-light .footer .grid-list { grid-template-columns: 0.5fr 1fr; }
}

/*==========================================================================*\
  #BACK TO TOP: white icon on emerald
\*==========================================================================*/

body.rfm-light .back-top-btn {
  background-color: var(--rfm-emerald-deep);
  color: #fff;
}


/*==========================================================================*\
  #MOTION: respect reduced motion
\*==========================================================================*/

@media (prefers-reduced-motion: reduce) {
  body.rfm-light .rfm-h-btn,
  body.rfm-light .rfm-h-btn .ar,
  body.rfm-light .rfm-h-ghost,
  body.rfm-light .rfm-service-card { transition: none; }
  body.rfm-light .rfm-h-btn:hover { transform: none; }
}