@layer effects {

/* === PATTERNS, EFFECTS & COSMETICS === */

/* === FAINT WATERMARK LOGO FOR HERO SECTION ===================================== */
/* Base shell */
.fw-hero-wm{ position:relative; isolation:isolate; overflow:clip; }
.fw-hero-wm > *{ position:relative; z-index:1; }

/* Defaults (can be overridden by utilities) */
.fw-hero-wm{
  --fw-logo-size: clamp(200px, 36vmin, 480px);  /* watermark size */
  --fw-logo-pos-x: 70%;    /* horizontal position of the logo centre */
  --fw-logo-pos-y: 35%;    /* vertical position of the logo centre */
  --fw-logo-opacity: .08;
  --fw-logo-blur: .5px;
  --fw-logo-color: var(--fw-accent); /* used in mask mode */
  --fw-logo-rotate: 45deg; /* fixed angle */
}

/* Image mode (original colours) */
.fw-hero-wm::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;

  /* size of the watermark box */
  width: var(--fw-logo-size);
  height: var(--fw-logo-size);

  /* anchor the centre of the box to X/Y on the section */
  left: var(--fw-logo-pos-x);
  top: var(--fw-logo-pos-y);
  transform: translate(-50%, -50%) rotate(var(--fw-logo-rotate));
  transform-origin: 50% 50%;

  /* draw the image inside that box */
  background: var(--fw-logo-bg) no-repeat center / contain;

  opacity: var(--fw-logo-opacity);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.18))
          brightness(1.15)
          blur(var(--fw-logo-blur));
  will-change: transform;
}

/* Mask mode (brand tint) */
.fw-hero-wm.fw-wm-mask::after{
  background: none;
  background-color: var(--fw-logo-color); /* fallback */
  background-color: color-mix(in srgb, var(--fw-logo-color) 40%, white);

  -webkit-mask-image: var(--fw-logo-bg);
          mask-image: var(--fw-logo-bg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


.fw-wm-size-xs{ --fw-logo-size: clamp(200px, 36vmin, 480px); }
.fw-wm-size-sm{ --fw-logo-size: clamp(230px, 40vmin, 540px); }
.fw-wm-size-md{ --fw-logo-size: clamp(260px, 45vmin, 600px); } /* baseline */
.fw-wm-size-lg{ --fw-logo-size: clamp(320px, 56vmin, 750px); }
.fw-wm-size-xl{ --fw-logo-size: clamp(380px, 68vmin, 900px); }

/* X axis (left→right) */
.fw-wm-x-0  { --fw-logo-pos-x: 0%;  }
.fw-wm-x-10 { --fw-logo-pos-x: 10%; }
.fw-wm-x-20 { --fw-logo-pos-x: 20%; }
.fw-wm-x-30 { --fw-logo-pos-x: 30%; }
.fw-wm-x-40 { --fw-logo-pos-x: 40%; }
.fw-wm-x-50 { --fw-logo-pos-x: 50%; }
.fw-wm-x-60 { --fw-logo-pos-x: 60%; }
.fw-wm-x-70 { --fw-logo-pos-x: 70%; }
.fw-wm-x-80 { --fw-logo-pos-x: 80%; }
.fw-wm-x-90 { --fw-logo-pos-x: 90%; }
.fw-wm-x-100{ --fw-logo-pos-x: 100%;}

/* Y axis (top→bottom) */
.fw-wm-y-0  { --fw-logo-pos-y: 0%;  }
.fw-wm-y-10 { --fw-logo-pos-y: 10%; }
.fw-wm-y-20 { --fw-logo-pos-y: 20%; }
.fw-wm-y-30 { --fw-logo-pos-y: 30%; }
.fw-wm-y-40 { --fw-logo-pos-y: 40%; }
.fw-wm-y-50 { --fw-logo-pos-y: 50%; }
.fw-wm-y-60 { --fw-logo-pos-y: 60%; }
.fw-wm-y-70 { --fw-logo-pos-y: 70%; }
.fw-wm-y-80 { --fw-logo-pos-y: 80%; }
.fw-wm-y-90 { --fw-logo-pos-y: 90%; }
.fw-wm-y-100{ --fw-logo-pos-y: 100%;}




/* Effects */
.fw-effect-highlight span{background:var(--fw-accent);color:var(--fw-text-on-accent);}
.fw-effect-color-change span{color:var(--fw-accent);}
.fw-effect-standout-text{color:var(--fw-accent);font-size:var(--fw-text-size-l);text-transform:uppercase;} /* STANDOUT TEXT */

/* === LEAD PARAGRAPH === */
.fw-effect-lead-paragraph{font-size:var(--fw-text-size-l);font-weight:700;}

/* CURVED DOWN ARROW*/
.fw-effect-arrow-down{
  position:relative;display:inline-block;margin-bottom:var(--fw-space-l);
  /* easy knobs */ --arrow-color:var(--fw-headings);--w:5rem;--h:6rem;--right:-3.5rem;--bottom:-4rem;--rot:30deg;
}
.fw-effect-arrow-down::after{
  content:"";position:absolute;right:var(--right);bottom:var(--bottom);width:var(--w);height:var(--h);
  transform:rotate(var(--rot));pointer-events:none;z-index:0;
  /* Use the SVG as a mask so we can color it from CSS */
  background-color:var(--arrow-color);
  -webkit-mask:url("/wp-content/uploads/curved-down-arrow-2.svg") center/100% 100% no-repeat;
          mask:url("/wp-content/uploads/curved-down-arrow-2.svg") center/100% 100% no-repeat;
}
/* Mobile: keep arrows visible without creatign a white strip on the right */
@media (width<=767px){
  .fw-effect-arrow-down,header .fw-effect-arrow-down{
    /* size the arrow for mobile */
    --w:40px;--h:60px;--rot:30deg;
    /* give the text enough room so the arrow lives INSIDE the box */
    padding-inline-end:calc(var(--w) + 6px);
   }
  .fw-effect-arrow-down::after,header .fw-effect-arrow-down::after{
    right:6px;bottom:var(--bottom);transform:rotate(var(--rot)); 
  }
}

/* UNDERLINE EFFECT - put "span" around words*/
.fw-effect-underline{
  --ink-color:var(--fw-accent);/* underline colour */
  --ink-height:.20em;/* stroke thickness */
  --ink-tilt:-2deg;/* hand-drawn angle */
  --ink-offset:-0.2em;/* gap between text baseline & ink */
  --ink-overhang:.12em;/* how far the ink extends past the word */
}
/* TARGET: underline any DIRECT CHILD <span> inside the parent */
.fw-effect-underline>span{position:relative;z-index:0;}/* anchor the pseudo-element */
/* The ink stroke */
.fw-effect-underline>span::after{
  content:"";position:absolute;
  left:calc(var(--ink-overhang)*-1);right:calc(var(--ink-overhang)*-1);bottom:var(--ink-offset);height:var(--ink-height);
  /* colour & slight marker variation (darker edge via color-mix) */
     background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink-color) 90%, white) 0%,
      var(--ink-color) 40%,
      var(--ink-color) 60%,
      color-mix(in srgb, var(--ink-color) 90%, white) 100%
    );
  border-radius:999px;transform:rotate(var(--ink-tilt));z-index:-1;pointer-events:none;
}



/* BLOCK UNDERLINE – left aligned accent stroke */
.fw-effect-underline-block {
  --ink-color: var(--fw-accent);
  --ink-height: .20em;       /* thickness */
  --ink-tilt: -2deg;         /* hand-drawn angle */
  --ink-offset: -0.35em;     /* how far below the text */
  --ink-width: 55%;          /* underline length – tweak 60–85% */

  position: relative;
  display: inline-block;     /* shrink to heading text width */
  z-index: 0;
}

.fw-effect-underline-block::after {
  content: "";
  position: absolute;
  bottom: var(--ink-offset);

  /* left aligned instead of centred */
  left: 0;
  width: var(--ink-width);
  height: var(--ink-height);
  transform: rotate(var(--ink-tilt));
  border-radius: 999px;
  /* more obvious “felt tip” variation */
    background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink-color) 90%, white) 0%,
      var(--ink-color) 40%,
      var(--ink-color) 60%,
      color-mix(in srgb, var(--ink-color) 90%, white) 100%
    );

  pointer-events: none;
  z-index: -1;
}












/* WORD OUTLINE HIGHLIGHT - put "span" around words*/
.fw-effect-outline{position:relative;z-index:1;}
.fw-effect-outline span{
  position:relative;display:inline-block;margin-block:1.2rem;margin-inline:1.5rem;
  background:linear-gradient(1deg,var(--fw-text-on-accent-2) 30%,color-mix(in oklch,var(--fw-text-on-accent-2) 70%,white) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.fw-effect-outline span::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-8px -10px;
  border:none;border-radius:var(--fw-radius-m);transform:rotate(-1.5deg);/* optional “sticker” vibe */
  box-shadow:var(--fw-shadow-s);background:var(--fw-accent-2)!important;
}

/*PATTERN - GRADIENT BACKGROUND FADE LEFT TO RIGHT*/
.fw-effect-bg-gradient-right{
  /*Fallback gradient first*/
  background-image:linear-gradient(to right,var(--fw-bg),color-mix(in hsl,var(--fw-bg) 70%,white));
  background-image:linear-gradient(to right,var(--fw-bg),color-mix(in oklch,var(--fw-bg) 70%,white));
}





/* =========================================================
   UNIVERSAL, ELEMENT-CENTRED GLOW
   Attach class="fw-glow" to ANY element you want the glow to follow.
   Tweak per-instance via inline CSS variables (see notes below).
   ========================================================= */

.fw-glow {
  --glow-y:85%;
  --glow-w:clamp(36rem, 90vw, 90rem);
  --glow-h:clamp(32rem, 85vw, 76rem);
  --glow-fade-top:8.8rem;
  --glow-feather:14rem;
  --glow-fade-bot:7.2rem;
  position: relative;          /* anchor for the pseudo */
  isolation: isolate;          /* keep glow beneath this block only */
}

/* The glow disk */
.fw-glow::before{
  content:"";
  position:absolute;
  left: var(--glow-x, 50%);           /* center X (0–100%) */
  top:  var(--glow-y, 50%);           /* center Y (0–100%) */
  transform: translate(-50%, -50%);
  width:  var(--glow-w);   /* size width */
  height: var(--glow-h);   /* size height */
  pointer-events:none;
  z-index:-1;
  filter: blur(var(--glow-blur, 2px));

  /* Neutral white glow (safe on any bg) */
  background: radial-gradient(circle,
    rgba(255,255,255, var(--glow-a1, .16)) 0%,
    rgba(255,255,255, var(--glow-a2, .09)) var(--glow-stop2, 38%),
    rgba(255,255,255, 0)                   var(--glow-stop3, 66%)
  );

  /* Feathered mask to avoid hard lines near nav/stats */
  --fade-top: var(--glow-fade-top, 72px);      /* raise to clear header */
  --feather:  var(--glow-feather, 120px);      /* softness of fade */
  --fade-bot: var(--glow-fade-bot, 64px);      /* fade before content below */

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--fade-top),
    #000        calc(var(--fade-top) + var(--feather)),
    #000        calc(100% - var(--fade-bot) - var(--feather)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--fade-top),
    #000        calc(var(--fade-top) + var(--feather)),
    #000        calc(100% - var(--fade-bot) - var(--feather)),
    transparent 100%
  );
}

/* Optional: brand-tinted glow (uses your ACF --fw-accent) */
@supports (color: color-mix(in oklch, white 50%, black)){
  .fw-glow.fw-glow--accent::before{
    background: radial-gradient(circle,
      color-mix(in oklch, white 12%, var(--fw-accent, #FFCA00)) 0%,
      color-mix(in oklch, white  7%, var(--fw-accent, #FFCA00)) var(--glow-stop2, 38%),
      transparent                                               var(--glow-stop3, 66%)
    );
  }
}

/* Recommended mobile nudge: keep glow behind the heading on phones */
@media (max-width: 768px){
  .fw-glow{ --glow-y: var(--glow-y-mobile, 52%); }
}











/*PATTERN - CURVES BACKGROUND*/
.fw-effect-bg-curves{
  /* Fallback: HSL mix (≈ lighten ~30%) */
  background-image:
    radial-gradient(circle at 75% 23%,rgba(226,226,226,.05) 0%,rgba(226,226,226,.05) 50%,rgba(11,11,11,.05) 50%,rgba(11,11,11,.05) 100%),
    radial-gradient(circle at 75% 51%,rgba(168,168,168,.05) 0%,rgba(168,168,168,.05) 50%,rgba(75,75,75,.05) 50%,rgba(252,246,246,.05) 100%),
    radial-gradient(circle at 38% 11%,rgba(31,31,31,.05) 0%,rgba(31,31,31,.05) 50%,rgba(254,254,254,.05) 50%,rgba(254,254,254,.05) 100%),
    linear-gradient(114deg,var(--fw-bg),color-mix(in hsl,var(--fw-bg) 70%,white));
  /* Modern override: OKLCH mix (perceptual) */
  background-image:
    radial-gradient(circle at 75% 23%,rgba(226,226,226,.05) 0%,rgba(226,226,226,.05) 50%,rgba(11,11,11,.05) 50%,rgba(11,11,11,.05) 100%),
    radial-gradient(circle at 75% 51%,rgba(168,168,168,.05) 0%,rgba(168,168,168,.05) 50%,rgba(75,75,75,.05) 50%,rgba(252,246,246,.05) 100%),
    radial-gradient(circle at 38% 11%,rgba(31,31,31,.05) 0%,rgba(31,31,31,.05) 50%,rgba(254,254,254,.05) 50%,rgba(254,254,254,.05) 100%),
    linear-gradient(114deg,var(--fw-bg),color-mix(in oklch,var(--fw-bg) 70%,white));
}

/*PATTERN - GRID BACKGROUND - FULL */
/* Section keeps its own background; only the grid overlay fades */
.fw-effect-bg-grid-full{position:relative;overflow:hidden;border-radius:inherit;z-index:0;}/* create stacking context */
/* Fading grid overlay */
.fw-effect-bg-grid-full::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;/* behind content */
  /* tweakables */
  --grid-gap:80px;--grid-stroke:1px;--fade-x-in-start:10%;--fade-x-in-full:30%;--fade-x-out-start:90%;--fade-top:5%;--fade-bottom:5%;
  /* grid lines only (no base fill) */
  background-image:
    repeating-linear-gradient(0deg,var(--fw-pattern-color) 0,var(--fw-pattern-color) var(--grid-stroke),transparent var(--grid-stroke),transparent var(--grid-gap)),
    repeating-linear-gradient(90deg,var(--fw-pattern-color) 0,var(--fw-pattern-color) var(--grid-stroke),transparent var(--grid-stroke),transparent var(--grid-gap));
  /* HORIZONTAL mask: left fade-in + right fade-out */
  --mask-x:linear-gradient(90deg,
    transparent 0 var(--fade-x-in-start),
    rgba(0,0,0,.5) calc((var(--fade-x-in-start) + var(--fade-x-in-full)) * .5),
    #000 var(--fade-x-in-full) var(--fade-x-out-start),
    rgba(0,0,0,.5) calc((var(--fade-x-out-start) + 100%) * .5),
    transparent 100%);
  /* VERTICAL mask: soften top & bottom (bottom starts earlier) */
  --mask-y:linear-gradient(180deg,
    transparent 0 calc(var(--fade-top) - 2%),
    rgba(0,0,0,.6) var(--fade-top),
    #000 calc(var(--fade-top) + 4%),
    #000 calc(100% - var(--fade-bottom) - 4%),
    rgba(0,0,0,.6) calc(100% - var(--fade-bottom)),
    transparent calc(100% - var(--fade-bottom) + 2%));
  /* Combine masks (intersection) */
  -webkit-mask-image:var(--mask-x),var(--mask-y);mask-image:var(--mask-x),var(--mask-y);
  -webkit-mask-composite:source-in;/* Safari */ mask-composite:intersect;/* Firefox/others */
}

/*PATTERN - GRID BACKGORUND - FADED */
/* Section keeps its own background; only the grid overlay fades */
.fw-effect-bg-grid-faded{position:relative;overflow:hidden;border-radius:inherit;z-index:0;}/* create stacking context */
/* Fading grid overlay */
.fw-effect-bg-grid-faded::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;/* behind content */
  /* tweakables */
  --grid-gap:80px;--grid-stroke:1px;--fade-x-in-start:25%;--fade-x-in-full:75%;--fade-x-out-start:80%;--fade-top:15%;--fade-bottom:35%;
  /* grid lines only (no base fill) */
  background-image:
    repeating-linear-gradient(0deg,var(--fw-pattern-color) 0,var(--fw-pattern-color) var(--grid-stroke),transparent var(--grid-stroke),transparent var(--grid-gap)),
    repeating-linear-gradient(90deg,var(--fw-pattern-color) 0,var(--fw-pattern-color) var(--grid-stroke),transparent var(--grid-stroke),transparent var(--grid-gap));
  /* HORIZONTAL mask: left fade-in + right fade-out */
  --mask-x:linear-gradient(90deg,
    transparent 0 var(--fade-x-in-start),
    rgba(0,0,0,.5) calc((var(--fade-x-in-start) + var(--fade-x-in-full)) * .5),
    #000 var(--fade-x-in-full) var(--fade-x-out-start),
    rgba(0,0,0,.5) calc((var(--fade-x-out-start) + 100%) * .5),
    transparent 100%);
  /* VERTICAL mask: soften top & bottom (bottom starts earlier) */
  --mask-y:linear-gradient(180deg,
    transparent 0 calc(var(--fade-top) - 2%),
    rgba(0,0,0,.6) var(--fade-top),
    #000 calc(var(--fade-top) + 4%),
    #000 calc(100% - var(--fade-bottom) - 4%),
    rgba(0,0,0,.6) calc(100% - var(--fade-bottom)),
    transparent calc(100% - var(--fade-bottom) + 2%));
  /* Combine masks (intersection) */
  -webkit-mask-image:var(--mask-x),var(--mask-y);mask-image:var(--mask-x),var(--mask-y);
  -webkit-mask-composite:source-in;/* Safari */ mask-composite:intersect;/* Firefox/others */
}

/* PATTERN - DOTS BACKGROUND - FADED ON LEFT */
.fw-effect-bg-dots-faded{position:relative;}
.fw-effect-bg-dots-faded::after{
  /*Dots in background */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  /* dots */
  background-image:radial-gradient(var(--fw-pattern-color) 2px,transparent 2px);
  background-size:48px 48px;background-position:25% 0;/* align grid to the 25% seam */
  /* fade: 0–25% = none, 25–40% = ramp, 40–100% = full */
  -webkit-mask-image:linear-gradient(90deg,transparent 0 25%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.7) 35%,#000 40% 100%);
          mask-image:linear-gradient(90deg,transparent 0 25%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.7) 35%,#000 40% 100%);
}
.fw-effect-bg-dots-faded>*{position:relative;z-index:1;}

/* PATTERN - DOTS BACKGROUND - FULL */
.fw-effect-bg-dots-full{
  background-image:radial-gradient(#d0d4da 1px,transparent 1px);
  background-size:24px 24px;/* grid spacing */ background-position:0 0;/* start top-left */
}


/*SLIDE UP REVEAL EFFECT*/
/*bricks-is-frontend is so that it doesn't get hidden in the builder*/

/* Base state: hidden + slightly down (frontend only) */
.bricks-is-frontend .fw-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

/* When in view (frontend only) */
.bricks-is-frontend .fw-reveal.fw-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}








}