/*
Theme Name: Stacey Farrar
Theme URI: https://staceyfarrar.co.uk
Description: Custom theme for Stacey Farrar, Independent Tropic Ambassador. Built as an Astra child theme so header/footer layout and performance stay inherited from Astra, while all brand design lives here as real theme files.
Author: Stacey Farrar
Template: astra
Version: 2.2.0
Text Domain: staceyfarrar
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600..900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   One palette. Every colour on the site comes from here.
   ========================================================================== */

:root{
  /* Greens - jungle depth */
  --jungle:      #072A1E;
  --jungle-2:    #0B3D2C;
  --emerald:     #0E7C5A;
  --emerald-lt:  #12B886;
  --mint:        #D6F5E8;
  --mint-soft:   #EDFBF5;

  /* Warms - sunset + sand */
  --coral:       #FF6B4A;
  --coral-deep:  #E8442A;
  --gold:        #FFB020;
  --gold-soft:   #FFF0D2;
  --sand:        #FFF6EC;
  --shell:       #FFFBF6;

  /* Neutrals */
  --ink:         #14241F;
  --body:        #475A52;
  --line:        #E8E0D5;
  --white:       #FFFFFF;

  /* Elevation */
  --sh-sm:  0 2px 8px rgba(7,42,30,.06);
  --sh-md:  0 8px 24px rgba(7,42,30,.09);
  --sh-lg:  0 18px 48px rgba(7,42,30,.13);
  --sh-cta: 0 10px 30px rgba(232,68,42,.35);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  --wrap: 1080px;
}

/* ==========================================================================
   2. MOTION
   All animation is opt-in and degrades safely: content is visible by
   default, animation only enhances. Fully disabled for reduced-motion.
   ========================================================================== */

/* Entrance movement is TRANSFORM ONLY - deliberately no opacity.
   If an animation is throttled (background tab), delayed, or never runs at
   all, the worst case is content sitting a few pixels off position while
   remaining fully readable. Fading in from opacity:0 can strand content
   permanently invisible, which is never an acceptable trade for a nicer
   entrance. */
@keyframes sf-rise {
  from { transform: translateY(18px); }
  to   { transform: translateY(0); }
}

@keyframes sf-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2.5deg); }
}

@keyframes sf-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}

@keyframes sf-pulse-ring {
  0%   { box-shadow: 0 10px 30px rgba(232,68,42,.35), 0 0 0 0 rgba(255,107,74,.45); }
  70%  { box-shadow: 0 10px 30px rgba(232,68,42,.35), 0 0 0 16px rgba(255,107,74,0); }
  100% { box-shadow: 0 10px 30px rgba(232,68,42,.35), 0 0 0 0 rgba(255,107,74,0); }
}

/* On-load entrance for above-the-fold content. Transform only, so the
   content is readable at every point in the animation's life cycle. */
.sf-wrap > h1,
.sf-hero-text,
.sf-hero-media,
.sf-trustbar{
  animation: sf-rise .7s cubic-bezier(.22,.9,.3,1) both;
}
.sf-hero-text{ animation-delay: .05s; }
.sf-hero-media{ animation-delay: .16s; }
.sf-trustbar{ animation-delay: .26s; }

/* NOTE ON SCROLL ANIMATION
   Scroll-driven reveals (animation-timeline: view()) were deliberately removed.
   They start content at opacity:0 and depend on the browser reporting a scroll
   position, which means any element that never registers as "entering view"
   stays permanently invisible. Losing a call-to-action is far more expensive
   than gaining a fade. Every animation below is either an on-load entrance
   that completes by itself, or a hover/idle effect on decoration only.
   Nothing on this site hides content waiting for an event that may not fire. */

/* Living gradient on the headline accent - motion that cannot hide text,
   because the text is fully opaque the whole time. */
@keyframes sf-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   3. PAGE CANVAS
   Warm sand base with soft tropical light. Deliberately light so text
   always sits on a pale ground - dark text stays legible everywhere.
   ========================================================================== */

body{
  color: var(--ink) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--shell) !important;
  background-image:
    radial-gradient(900px 480px at 8% -6%,  rgba(18,184,134,.16), transparent 60%),
    radial-gradient(820px 460px at 100% 2%, rgba(255,176,32,.15), transparent 58%),
    radial-gradient(700px 520px at 50% 108%, rgba(18,184,134,.10), transparent 62%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site-header .ast-container{
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
}

/* Logo replaces the text title - never show both. */
.ast-site-title-wrap{ display: none !important; }

.ast-site-identity{ flex-shrink: 0 !important; min-width: 0 !important; }
.ast-site-identity .custom-logo-link{ display: flex !important; align-items: center !important; }
.ast-site-identity .custom-logo{
  max-height: 54px !important;
  width: auto !important;
  height: auto !important;
}

.main-header-bar{
  background: rgba(255,251,246,.88) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line) !important;
}

.main-header-bar-navigation{ flex: 1 1 auto !important; min-width: 0 !important; }
.main-header-bar-navigation ul#primary-menu,
.main-header-bar-navigation .main-navigation ul{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px 26px !important;
  justify-content: flex-end !important;
}

.main-header-bar-navigation a{
  position: relative;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: var(--ink) !important;
  padding-bottom: 3px !important;
}

/* Animated underline on nav hover */
.main-header-bar-navigation a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--emerald-lt), var(--coral));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.9,.3,1);
}
.main-header-bar-navigation a:hover::after,
.main-header-bar-navigation .current-menu-item > a::after{ transform: scaleX(1); }
.main-header-bar-navigation a:hover{ color: var(--emerald) !important; }

@media (max-width: 1300px){
  .main-header-bar-navigation ul#primary-menu,
  .main-header-bar-navigation .main-navigation ul{ gap: 2px 16px !important; }
  .main-header-bar-navigation a{ font-size: 14px !important; }
}

/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

.sf-wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 4px 56px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.72;
  font-size: 1.02rem;
}

.sf-wrap h1{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.15rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  color: var(--jungle);
}

/* Tropical gradient accent on the leading headline */
.sf-wrap h1 em,
.sf-wrap h1 strong{
  font-style: normal;
  background: linear-gradient(115deg, var(--emerald) 0%, var(--emerald-lt) 30%, var(--gold) 55%, var(--emerald-lt) 80%, var(--emerald) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference){
  .sf-wrap h1 em,
  .sf-wrap h1 strong{ animation: sf-shimmer 9s ease-in-out infinite; }
}

.sf-wrap h2{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 52px 0 18px;
  padding-top: 34px;
  color: var(--jungle);
  border-top: 1px solid var(--line);
  position: relative;
}

/* Small leaf-green rule above each section heading */
.sf-wrap h2::before{
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 72px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald-lt), var(--gold));
}

.sf-wrap h3{
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
  color: var(--jungle);
}

.sf-wrap p{ margin: 0 0 16px; color: var(--body); }

.sf-wrap a{ color: var(--emerald); }
.sf-wrap a:hover{ color: var(--coral-deep); }

.sf-intro{
  font-size: clamp(1.08rem, 1.9vw, 1.22rem);
  line-height: 1.68;
  color: var(--body);
  font-weight: 500;
  max-width: 62ch;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.sf-hero-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  margin: 8px 0 34px;
}

@media (min-width: 860px){
  .sf-hero-split{ grid-template-columns: 1.05fr .95fr; gap: 46px; }
}

.sf-hero-media{ position: relative; }

.sf-hero-img,
.sf-hero-img-wrap img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.sf-hero-img-wrap{ margin: 22px 0 30px; position: relative; }

/* Soft tropical glow behind hero imagery */
.sf-hero-media::before,
.sf-hero-img-wrap::before{
  content: '';
  position: absolute;
  inset: -18px -18px auto -18px;
  height: 62%;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(18,184,134,.20), rgba(255,176,32,.18));
  filter: blur(26px);
  z-index: -1;
}

/* ==========================================================================
   7. TRUST BAR + BADGES + TAGS
   ========================================================================== */

.sf-trustbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
}

.sf-badges{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px; }

.sf-badge{
  background: var(--mint-soft);
  color: var(--emerald);
  border: 1px solid var(--mint);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: .83rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sf-badge:hover{ transform: translateY(-2px); box-shadow: var(--sh-md); }

.sf-tag{
  display: inline-block;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep));
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 7px;
  margin-bottom: 12px;
}

.sf-price{
  display: inline-block;
  background: var(--jungle);
  color: var(--white);
  font-weight: 800;
  font-size: .85rem;
  padding: 5px 15px;
  border-radius: var(--r-pill);
  margin-left: 8px;
  letter-spacing: .02em;
}

/* ==========================================================================
   8. CARDS + GRID
   ========================================================================== */

.sf-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 22px 0;
}

.sf-card{
  grid-column: span 12;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 28px;
  box-shadow: var(--sh-sm);
  transition: transform .28s cubic-bezier(.22,.9,.3,1),
              box-shadow .28s ease,
              border-color .28s ease;
  overflow: hidden;
}

/* Tropical top edge that wipes in on hover */
.sf-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--emerald-lt), var(--gold), var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,.9,.3,1);
}

.sf-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--mint);
}
.sf-card:hover::before{ transform: scaleX(1); }

@media (min-width: 720px){
  .sf-col6{ grid-column: span 6; }
  .sf-col4{ grid-column: span 4; }
}

.sf-card.sf-pro{ border-left: 4px solid var(--emerald-lt); }
.sf-card.sf-con{ border-left: 4px solid var(--coral); }

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.sf-btn,
.sf-btn-outline{
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none !important;
  margin: 8px 12px 8px 0;
  border-radius: var(--r-pill);
  transition: transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s ease, background .22s ease, color .22s ease;
}

/* Primary - the money button */
.sf-btn{
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-deep) 100%) !important;
  color: var(--white) !important;
  padding: 16px 32px;
  box-shadow: var(--sh-cta);
}
.sf-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(232,68,42,.45);
  color: var(--white) !important;
}

/* Light sweep across the primary button on hover */
.sf-btn::after{
  content: '';
  position: absolute;
  top: -40%; left: 0;
  width: 45%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.sf-btn:hover::after{ animation: sf-sheen .85s ease forwards; }

/* Secondary - emerald outline */
.sf-btn-outline{
  background: transparent;
  border: 2px solid var(--emerald);
  color: var(--emerald) !important;
  padding: 14px 30px;
}
.sf-btn-outline:hover{
  background: var(--emerald);
  color: var(--white) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(14,124,90,.32);
}

/* ==========================================================================
   10. CTA BAND
   Dark jungle surface. Background AND text colour are always declared
   together here so the pair can never drift apart again.
   ========================================================================== */

.sf-cta{
  position: relative;
  overflow: hidden;
  background-color: var(--jungle) !important;
  background-image:
    radial-gradient(560px 300px at 12% 0%, rgba(18,184,134,.32), transparent 62%),
    radial-gradient(520px 280px at 92% 100%, rgba(255,176,32,.22), transparent 60%),
    linear-gradient(135deg, #072A1E 0%, #0B3D2C 100%) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  padding: 48px 36px !important;
  text-align: center;
  margin: 46px 0;
  box-shadow: var(--sh-lg);
}

/* Everything inside the dark band is light. No exceptions. */
.sf-cta h2,
.sf-cta h3,
.sf-cta p,
.sf-cta li,
.sf-cta strong,
.sf-cta em{
  color: var(--white) !important;
}

.sf-cta h2{
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}
.sf-cta h2::before{ display: none !important; }

.sf-cta p{
  color: rgba(255,255,255,.88) !important;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.06rem;
}

.sf-cta a:not(.sf-btn):not(.sf-btn-outline){ color: var(--gold) !important; }

/* Buttons sitting on the dark band */
.sf-cta .sf-btn{ animation: sf-pulse-ring 3.4s ease-out infinite; }
.sf-cta .sf-btn-outline{
  border-color: rgba(255,255,255,.75);
  color: var(--white) !important;
}
.sf-cta .sf-btn-outline:hover{
  background: var(--white);
  color: var(--jungle) !important;
  border-color: var(--white);
}

/* Floating leaf motif in the corner of the CTA */
.sf-cta::before{
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 190px; height: 190px;
  background: radial-gradient(circle at 30% 30%, rgba(18,184,134,.30), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .sf-cta::before{ animation: sf-float 7s ease-in-out infinite; }
}

/* ==========================================================================
   11. FEATURE PANEL / NOTES / STEPS
   ========================================================================== */

.sf-facial{
  background: var(--white);
  border: 2px solid var(--emerald-lt);
  border-radius: var(--r-md);
  padding: 30px 32px;
  margin: 30px 0;
  box-shadow: var(--sh-md);
}
.sf-facial h3{ color: var(--emerald); margin-bottom: 12px; }

.sf-note{
  background: var(--gold-soft);
  border: 1px solid #F5E3C2;
  border-left: 4px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  margin: 24px 0;
}
.sf-note p{ margin: 0; color: #6B5426; }

.sf-steps{ counter-reset: step; list-style: none; margin: 0; padding: 0; }
.sf-steps li{
  counter-increment: step;
  position: relative;
  padding-left: 50px;
  margin-bottom: 20px;
  color: var(--body);
}
.sf-steps li::before{
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--emerald-lt), var(--emerald));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .92rem;
  box-shadow: 0 4px 12px rgba(14,124,90,.3);
}

/* ==========================================================================
   12. TABLES / FAQ / TOC / TOWNS
   ========================================================================== */

.sf-table-wrap{
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  background: var(--white);
}
.sf-table{ width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.sf-table th,
.sf-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--body);
}
.sf-table th{
  background: var(--mint-soft);
  color: var(--emerald);
  font-weight: 800;
  white-space: nowrap;
}
.sf-table tr:last-child td{ border-bottom: none; }

.sf-faq details{
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.sf-faq details[open]{ box-shadow: var(--sh-md); border-color: var(--mint); }
.sf-faq summary{
  font-weight: 700;
  cursor: pointer;
  color: var(--jungle);
  font-size: 1.04rem;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.sf-faq summary::-webkit-details-marker{ display: none; }
.sf-faq summary::after{
  content: '+';
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--emerald-lt);
  transition: transform .25s ease;
}
.sf-faq details[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.sf-faq summary:hover{ color: var(--emerald); }
.sf-faq p{ margin: 14px 0 0; }

.sf-toc{
  background: var(--mint-soft);
  border: 1px solid var(--mint);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 24px 0;
}
.sf-toc p{ margin: 0 0 12px; font-weight: 800; color: var(--jungle); }
.sf-toc ul{ margin: 0; padding-left: 22px; }
.sf-toc li{ margin-bottom: 6px; }
.sf-toc a{ color: var(--emerald); text-decoration: none; font-weight: 600; }
.sf-toc a:hover{ color: var(--coral-deep); text-decoration: underline; }

.sf-towns{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.sf-town{
  background: var(--white);
  border: 1px solid var(--mint);
  color: var(--emerald);
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 700;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sf-town:hover{ transform: translateY(-2px); box-shadow: var(--sh-md); }

.sf-disclosure{
  font-size: .86rem;
  color: #74847D;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-primary-footer-wrap,
.site-below-footer-wrap{
  background-color: var(--jungle) !important;
  background-image: linear-gradient(135deg, #072A1E 0%, #0B3D2C 100%) !important;
}

.site-primary-footer-wrap *,
.site-below-footer-wrap *{ color: #F2EDE4 !important; }

.site-primary-footer-wrap a,
.site-below-footer-wrap a{
  color: #FFD9C7 !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.site-primary-footer-wrap a:hover,
.site-below-footer-wrap a:hover{ color: var(--white) !important; text-decoration: underline !important; }

.ast-builder-footer-grid-columns{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px 28px !important;
}

.ast-footer-copyright p{ margin: 0 !important; font-size: 14px !important; }

.site-below-footer-wrap .footer-widget-area,
.site-below-footer-wrap aside,
.site-below-footer-wrap .widget{
  display: block !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
}

.footer-legal{ font-size: 12px !important; opacity: .85 !important; text-align: center !important; }
.footer-legal p{ margin: 3px 0 !important; }

/* ==========================================================================
   14. MOBILE
   ========================================================================== */

@media (max-width: 720px){
  .sf-wrap{ padding: 8px 2px 44px; }
  .sf-cta{ padding: 36px 22px !important; }
  .sf-card{ padding: 22px 20px; }
  .sf-btn,
  .sf-btn-outline{
    display: block;
    text-align: center;
    margin: 10px 0;
  }
}

/* Palm frond watermark - pure decoration, sits behind content at low opacity */
.sf-cta::after{
  content: '';
  position: absolute;
  right: -46px;
  bottom: -58px;
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M96%20198C96%20140%20104%2082%20134%2026%27%2F%3E%3Cpath%20d%3D%27M99%20170c23-6%2041-23%2051-45%27%2F%3E%3Cpath%20d%3D%27M101%20143c26-5%2046-21%2058-45%27%2F%3E%3Cpath%20d%3D%27M105%20116c24-6%2042-23%2052-47%27%2F%3E%3Cpath%20d%3D%27M110%2090c20-8%2034-25%2042-47%27%2F%3E%3Cpath%20d%3D%27M93%20170c-21-8-35-25-43-47%27%2F%3E%3Cpath%20d%3D%27M91%20143c-25-6-43-23-53-47%27%2F%3E%3Cpath%20d%3D%27M95%20116c-22-8-39-25-47-47%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .13;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 0;
}

/* Keep CTA content above the decoration */
.sf-cta > *{ position: relative; z-index: 1; }

.sf-cta::before{ z-index: 0; }