/* RFF design system, Revision 1 — approved by Richard 7 Nov 2026 (RFFI_The_Brand.md v1.34); Hill's sign-off pending (#76).
   Written by tools/apply_r1.py; loaded after every other stylesheet on every page. */
:root{--rff-ink:#141714;--rff-white:#FFFFFF;--rff-edge:#748C63;--rff-fern:#2F6B2C;--rff-fern-tint:#E2EEDA;--rff-ember:#9A2B1B;
--rff-ember-tint:#F7E1DC;--rff-amber:#E3A532;--rff-amber-ink:#7A4E06;--rff-amber-tint:#FBEED3;--rff-creek:#1F6587;--rff-creek-tint:#DAEAF2;
--rff-ease:cubic-bezier(.2,.7,.2,1);--rff-fast:150ms;--rff-mid:250ms;--rff-slow:600ms}

/* Borders are a tool: the default card edge is 2px Edge */
.option-item-wrap,.option-bottom-wrap,.smart-tech-item,.cate-item,.card-item-03.custom-styling,.card-item-03.custom-styling-02,
.card-item-04,.card-item-wrap,.bio-card-wrap,.collection-item,.rb-card,.rb-post,.vip-card{border:2px solid var(--rff-edge)!important}
.rb-post,.rb-card,.vip-card,.collection-item{transition:transform var(--rff-mid) var(--rff-ease),border-color var(--rff-mid) var(--rff-ease)}
.rb-post:hover,.rb-card:hover,.vip-card:hover,.collection-item:hover{transform:translateY(-4px);border-color:var(--rff-forest)!important}

/* The button ladder. 1 Redwood pill (one per screen) · 2 Forest outline pill · 3 text link with arrow · 4 square Ink utility */
.rb-btn{transition:background-color var(--rff-mid) var(--rff-ease),color var(--rff-mid) var(--rff-ease),border-color var(--rff-mid) var(--rff-ease);border:2px solid var(--rff-redwood);position:relative}
.rb-btn-outline{background:transparent!important;color:var(--rff-forest)!important;border:2px solid var(--rff-forest)!important}
.rb-btn-outline:hover{background:var(--rff-forest)!important;color:var(--rff-paper)!important}
.rb-btn-ondark{background:transparent!important;color:var(--rff-paper)!important;border:2px solid var(--rff-lichen)!important}
.rb-btn-ondark:hover{background:var(--rff-lichen)!important;color:var(--rff-forest)!important}
.rb-textlink{font-family:"Special Gothic Expanded One",sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--rff-redwood);
text-decoration:none;display:inline-flex;gap:10px;align-items:center;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;
background-repeat:no-repeat;background-position:0 100%;padding-bottom:4px;transition:background-size var(--rff-mid) var(--rff-ease),color var(--rff-mid)}
.rb-textlink:hover{background-size:100% 2px;color:var(--rff-redwood-deep)}
.rb-textlink.on-dark{color:var(--rff-lichen)}.rb-textlink.on-dark:hover{color:var(--rff-paper)}
.rb-utility{font-family:"Special Gothic Expanded One",sans-serif;font-size:13px;text-transform:uppercase;background:var(--rff-ink);color:var(--rff-white);
border-radius:0;padding:12px 18px;text-decoration:none;display:inline-block}
/* The main action: a thin line traced around the pill, once, when it comes into view */
.rb-main{position:relative}
.rb-main::after{content:"";position:absolute;inset:-6px;border:1.5px solid currentColor;border-radius:999px;color:var(--rff-redwood);
clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--rff-ease) .3s;pointer-events:none}
.rb-main.on-dark::after{color:var(--rff-lichen)}
.rb-main.is-in::after,.rff-nojs .rb-main::after{clip-path:inset(0 0 0 0)}

/* Webflow's outline buttons (the Explore buttons on the feature cards): on rollover the label kept dark green on red and lost
   its contrast. Now Lichen with Forest text. */
.nav-cta-btn.green-stroke-01:hover,.nav-cta-btn.green-stroke-01:focus-visible{background-color:var(--rff-lichen)!important;color:var(--rff-forest)!important;border-color:var(--rff-lichen)!important}

/* The menu: Donate is the Redwood pill, Forest Tour the Forest outline */
.navbar-2 .nav-cta-btn.rff-nav-donate{background-color:var(--rff-redwood)!important;border-color:var(--rff-redwood)!important;color:var(--rff-paper)!important}
.navbar-2 .nav-cta-btn.rff-nav-donate:hover{background-color:var(--rff-redwood-deep)!important;border-color:var(--rff-redwood-deep)!important}
.navbar-2 .nav-cta-btn.plant{border-color:var(--rff-forest)!important;color:var(--rff-forest)!important}
.navbar-2 .nav-cta-btn.plant:hover{background-color:var(--rff-forest)!important;color:var(--rff-paper)!important}
/* Menu boxes (Richard, 7 Nov 2026): Paper ground, a dark Ink frame, dark on rollover */
.navbar-2 .dropdown-list.w--open{background-color:var(--rff-paper)!important;border:2px solid var(--rff-ink);border-radius:0;padding:0!important;margin-top:14px;min-width:15rem}
.navbar-2 .dropdown-item{background-color:var(--rff-paper)!important;color:var(--rff-ink)!important;border-bottom:1px solid var(--rff-rule);
transition:background-color var(--rff-fast),color var(--rff-fast)}
.navbar-2 .dropdown-item:last-child{border-bottom:0}
.navbar-2 .dropdown-item:hover,.navbar-2 .dropdown-item:focus-visible{background-color:var(--rff-forest)!important;color:var(--rff-paper)!important}
/* Menu type (Richard, 7 Nov 2026, to consider): Special Gothic at normal width, the same family as the brand's Expanded One */
.navbar-2 .text-block.nav,.navbar-2 .dropdown-item,.navbar-2 .nav-cta-btn{font-family:"Special Gothic","Special Gothic Expanded One",sans-serif!important;
font-weight:600!important;letter-spacing:.04em}
.navbar-2 .text-block.nav{font-size:13px!important}
.navbar-2 .dropdown-item{font-size:13px!important;text-transform:none!important;letter-spacing:.01em;font-weight:500!important}
.navbar-2 .nav-cta-btn{font-size:13px!important}

/* Labels never wrap on buttons */
.navbar-2 .nav-cta-btn{white-space:nowrap}
.rb-btn{white-space:nowrap}
@media (max-width:360px){.rb-btn{white-space:normal;text-align:center}}

/* Phone check, 7 Nov 2026 (every page at 390px): nothing may push the page sideways; text keeps a 20px margin; links tall
   enough to tap */
html,body{overflow-x:clip}
.adopt-contact,.text-paragraph a[href^="mailto:"]{overflow-wrap:anywhere}
.rb-link,.rff-story-link,.bio-species-link{display:inline-flex!important;align-items:center;min-height:44px}
@media (max-width:767px){
  .calendly-embed-section .two-cols-content-wrap{padding-left:20px;padding-right:20px;box-sizing:border-box}
  .general-hero-title.large{padding-left:20px;padding-right:20px;box-sizing:border-box}
  .left-wrap-02.standley{padding-left:0!important;padding-right:0!important}
  .adopt-contact,.adopt-tribute{width:auto!important;max-width:100%!important}
  .lead_wrapper{padding-left:20px!important;padding-right:20px!important}
  .subheading-para-wrap{max-width:100%}
}

/* The phone menu (7 Nov 2026 phone check): it opened as dark green rows with dark green text. Now Paper with Ink text, rows
   separated by hairlines, sub-items indented, the two buttons as full pills with room around them */
@media (max-width:991px){
  .navbar-2 [data-nav-menu-open]{background:var(--rff-paper)!important;border-bottom:2px solid var(--rff-ink);padding:4px 20px 22px!important;
    max-height:calc(100vh - 80px);overflow-y:auto}
  .navbar-2 [data-nav-menu-open] .dd-item,.navbar-2 [data-nav-menu-open] > a.text-block.nav{background:transparent!important;border-bottom:1px solid var(--rff-rule);width:100%;margin:0}
  .navbar-2 [data-nav-menu-open] .dd-toogle,.navbar-2 [data-nav-menu-open] > a.text-block.nav{color:var(--rff-ink)!important;padding:15px 0!important;
    display:flex!important;justify-content:space-between;align-items:center;width:100%;background:transparent!important}
  .navbar-2 [data-nav-menu-open] .dd-toogle .text-block{color:var(--rff-ink)!important;background:transparent!important;font-size:15px!important;padding:0!important}
  .navbar-2 [data-nav-menu-open] > a.text-block.nav{font-size:15px!important}
  .navbar-2 [data-nav-menu-open] .nav-cta-wrap,.navbar-2 [data-nav-menu-open] .dd-toogle{background:transparent!important}
  .navbar-2 [data-nav-menu-open] .dd-icon{color:var(--rff-ink)!important;position:static;margin:0}
  .navbar-2 [data-nav-menu-open] .dropdown-list.w--open{position:static;border:0!important;margin:0 0 12px!important;min-width:0;background:transparent!important;padding:0!important}
  .navbar-2 [data-nav-menu-open] .dropdown-item{background:transparent!important;height:auto;padding:11px 14px!important;border-bottom:0;border-left:2px solid var(--rff-lichen);color:var(--rff-ink)!important;
    justify-content:flex-start!important;text-align:left!important;font-size:14px!important}
  .navbar-2 [data-nav-menu-open] .dropdown-item:hover{background:var(--rff-lichen-wash)!important;color:var(--rff-ink)!important}
  .navbar-2 [data-nav-menu-open] .nav-cta-wrap.mobile{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding:0}
  .navbar-2 [data-nav-menu-open] .nav-cta-btn{border-radius:999px!important;width:100%;height:48px}
  .navbar-2 .menu-button.w--open{background-color:var(--rff-forest)!important;color:var(--rff-paper)!important}
  .navbar-2 .menu-button.w--open .w-icon-nav-menu{color:var(--rff-paper)!important}
}

/* Safari on iPhone and Webflow's flex-flow:wrap-reverse (7 Nov 2026): on phones Webflow stacks image-and-text blocks with
   wrap-reverse, which Safari lays out differently from Chrome (photos over headings and buttons). The same visual order, built
   as a plain reversed column, which every browser draws alike. */
@media (max-width:991px){
  .text-left-with-image,.lead_wrapper,.geography{display:flex!important;flex-direction:column-reverse!important;flex-wrap:nowrap!important}
  .text-left-with-image > *,.lead_wrapper > *,.geography > *{flex:none!important;width:100%!important;max-width:100%}
}

/* Narrow desktop (7 Nov 2026, Richard): between 992px and about 1320px Webflow's page-width wrappers (1240px wide, no side
   padding at desktop) put headings against the window edge. Side padding that grows to 32px as the window narrows and falls to
   nothing once the window is wider than the wrapper; a wrapper inside another gets none, so nothing is padded twice. */
@media (min-width:992px){
  :is(.container,.container-2,.home-cta-btn-wrap,.blog-head-section,.blog-title-wrap,.heading-wrap-02,.general-hero-title.smart-forest,.general-hero-title.align-left,.desc-intro-wrap,.rich-text-heading._02,.tech-grid-section,.content-section,.intro-section-wrap,.two-cols-content-wrap,.two-cols-content-wrap-2,.section-body-content,.cta-heading-wrap,.intro-block-wrap,.job-posting-section,.banner-item-wrap,.round-up-banner,.bio-eco-accordion,.bio-container.fm-benchmark,.bio-impact-copy,.scroll-content-wrap,.donate-banner-content){padding-left:clamp(0px,calc((1240px + 80px - 100vw) / 2),32px)!important;padding-right:clamp(0px,calc((1240px + 80px - 100vw) / 2),32px)!important}
  :is(.container,.container-2,.home-cta-btn-wrap,.blog-head-section,.blog-title-wrap,.heading-wrap-02,.general-hero-title.smart-forest,.general-hero-title.align-left,.desc-intro-wrap,.rich-text-heading._02,.tech-grid-section,.content-section,.intro-section-wrap,.two-cols-content-wrap,.two-cols-content-wrap-2,.section-body-content,.cta-heading-wrap,.intro-block-wrap,.job-posting-section,.banner-item-wrap,.round-up-banner,.bio-eco-accordion,.bio-container.fm-benchmark,.bio-impact-copy,.scroll-content-wrap,.donate-banner-content) :is(.container,.container-2,.home-cta-btn-wrap,.blog-head-section,.blog-title-wrap,.heading-wrap-02,.general-hero-title.smart-forest,.general-hero-title.align-left,.desc-intro-wrap,.rich-text-heading._02,.tech-grid-section,.content-section,.intro-section-wrap,.two-cols-content-wrap,.two-cols-content-wrap-2,.section-body-content,.cta-heading-wrap,.intro-block-wrap,.job-posting-section,.banner-item-wrap,.round-up-banner,.bio-eco-accordion,.bio-container.fm-benchmark,.bio-impact-copy,.scroll-content-wrap,.donate-banner-content){padding-left:0!important;padding-right:0!important}
}

/* Footer: the tagline and the one-line description */
.rff-foot-line{margin:20px 0 24px;max-width:36ch}
.rff-foot-tag{font-family:Anton,sans-serif;text-transform:uppercase;font-size:22px;line-height:1.1;color:var(--rff-forest);margin:0 0 8px}
.rff-foot-mission{margin:0}

/* Motion: arrive. Without the script nothing is hidden. */
.rff-js .rff-arrive{opacity:0;transform:translateY(18px);transition:opacity var(--rff-slow) var(--rff-ease),transform var(--rff-slow) var(--rff-ease)}
.rff-js .rff-arrive.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rff-js .rff-arrive{opacity:1;transform:none;transition:none}
  .rb-main::after{clip-path:inset(0 0 0 0);transition:none}
  .rb-post,.rb-card,.vip-card,.collection-item{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* About: the mission and vision under Who we are (tools/apply_copy_r1.py) */
.rff-about-core{display:block;margin-top:18px}