:root{
    --e-space-0: 0;
    --e-space-3xs: 0.25rem;  /* 4px  */
    --e-space-2xs: 0.5rem;   /* 8px  */
    --e-space-xs: 0.75rem;   /* 12px */
    --e-space-s: 1rem;       /* 16px */
    --e-space-m: 1.5rem;     /* 24px */
    --e-space-l: 2rem;       /* 32px */
    --e-space-xl: 3rem;      /* 48px */
    --e-space-2xl: 4rem;     /* 64px */
    --e-space-3xl: 6rem;     /* 96px */

    --gap-xxs: var(--e-space-2xs);
    --gap-xs: var(--e-space-xs);
    --gap-s:  var(--e-space-s);
    --gap-m:  var(--e-space-m);
    --gap-l:  var(--e-space-l);
    --gap-xl: var(--e-space-xl);
    --gap-2xl: var(--e-space-2xl);
    --gap-3xl: var(--e-space-3xl);

    --pad-xxs: var(--e-space-2xs);
    --pad-xs: var(--e-space-xs);
    --pad-s:  var(--e-space-s);
    --pad-m:  var(--e-space-m);
    --pad-l:  var(--e-space-l);
    --pad-xl: var(--e-space-xl);

    --mar-xs: var(--e-space-xs);
    --mar-s:  var(--e-space-s);
    --mar-m:  var(--e-space-m);
    --mar-l:  var(--e-space-l);
    --mar-xl: var(--e-space-xl);
    
    --rad-xs: var(--e-space-xs);
    --rad-s:  var(--e-space-s);
    --rad-m:  var(--e-space-m);
    --rad-l:  var(--e-space-l);
    --rad-xl: var(--e-space-xl);
    --rad-pill: 100vmax;


    /* =========================================================
    Responsive (fluid) spacing tokens
    clamp(min, preferred, max)
    ========================================================= */

    /* Gaps */
    --gap-xs-res:  clamp(var(--e-space-2xs), 1vw,  var(--e-space-s));
    --gap-s-res:  clamp(var(--e-space-xs), 1.2vw, var(--e-space-s));
    --gap-m-res:  clamp(var(--e-space-xs), 2vw, var(--e-space-m));
    --gap-l-res:  clamp(var(--e-space-m), 3vw,   var(--e-space-xl));
    --gap-xl-res: clamp(var(--e-space-l), 4vw,   var(--e-space-2xl));
    --gap-3xl-res: clamp(var(--e-space-l), 5vw,   var(--e-space-3xl));
    
    
    /* Padding */
    --pad-xs-res:  clamp(var(--e-space-2xs), 1.2vw, var(--e-space-s));
    --pad-s-res:  clamp(var(--e-space-xs), 1.5vw, var(--e-space-m));
    --pad-m-res:  clamp(var(--e-space-s), 2.5vw, var(--e-space-l));
    --pad-l-res:  clamp(var(--e-space-m), 4vw,   var(--e-space-xl));
    --pad-xl-res: clamp(var(--e-space-l), 5vw,   var(--e-space-2xl));
    
    /* Margins */
    --mar-xs-res:  clamp(var(--e-space-2xs), 1.2vw, var(--e-space-s));
    --mar-s-res:  clamp(var(--e-space-xs), 1.5vw, var(--e-space-m));
    --mar-m-res:  clamp(var(--e-space-s), 2.5vw, var(--e-space-l));
    --mar-l-res:  clamp(var(--e-space-m), 4vw,   var(--e-space-xl));
    --mar-xl-res: clamp(var(--e-space-l), 5vw,   var(--e-space-2xl));

    

    /* =========================================================
    Defaults
    ========================================================= */
    
    --default-pad: var(--pad-m-res);
    --default-gap: var(--gap-m-res);
    --default-margin: var(--mar-m-res);

    --block-spacing: clamp(4rem, 8vw,  10rem);

    --lead-top: 180px;
    --lead-top-image: var(--lead-top);
    --lead-bottom: 280px;
    --lead-bottom-no-cuve: 280px;
    --after-lead-curve: -230px;

     /* Overlap amount (positive) */
    --overlap: clamp(var(--e-space-m), 4vw, var(--e-space-2xl));
  
    /* Negative version (derived) */
    --overlap-neg: calc(var(--overlap) * -1);

    --ui-timing: .2s;

    --offset: 2px;

    --outline-off: var(--offset) solid transparent;

    --outlines-on: var(--offset) solid var(--c-green-50);

    --trans-outline-color: outline-color var(--ui-timing) ease;

    --trans-offset:  outline-offset var(--ui-timing) ease;

    --trans-outline: var(--trans-outline-color), var(--trans-offset);



 }

 @media (max-width: 1024px) {
    :root{   
        --lead-top: 160px;
        --lead-bottom: 200px;
        --after-lead-curve: -180px;
        }
  }

@media (max-width: 767px) {
    :root{   
    --lead-top: 120px;
    --lead-bottom: 140px;
    --after-lead-curve: -100px;
    }
  }


 html{
	overflow-x: clip;
}