/* THATCOOLGRID - static rebuild of the Squarespace site.
   Layout reproduces Squarespace's Fluid Engine grid (24 columns desktop / 8 mobile)
   so every block sits exactly where it did on the original. */

:root{
  --gutter:4vw;            /* site padding (desktop) */
  --gutter-m:6vw;          /* site padding (mobile) */
  --maxw:1400px;           /* max content width */
  --white:#ffffff;
  --lightAccent:#E5E3DC;   /* hsl(46.67,14.75%,88.04%) */
  --accent:#FAF8F5;        /* hsl(45,29%,97%) */
  --darkAccent:#1B110A;    /* hsl(24.71,45.95%,7.25%) */
  --black:#303636;         /* hsl(180,5.88%,20%) */
  --cream:#FDFBF6;         /* section background for the "white" theme */
  /* Heading font: the original uses Adobe's "ivypresto-display". Swap the first
     family here if an Adobe Fonts kit is added later. */
  --heading-font:"ivypresto-display","Newsreader",Georgia,serif;
  --heading-ls:-.04em;      /* -.02em on the original; Newsreader runs a little wider so it is tightened to match line breaks */
  --heading-opsz:36;        /* Newsreader optical size: 36 gives IvyPresto-like widths with a display feel */
  --hdr-h:calc(4vw + 84px); /* header height: 2vw padding top and bottom + 84px logo */
  --body-font:"Raleway",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --meta-font:"Poppins",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --h1:2.5; --h2:2.8; --h3:2.2; --h4:1.6; --plarge:1.4; --pnormal:1; --psmall:.9;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body-font);font-weight:300;font-size:1rem;line-height:1.5em;background:var(--lightAccent);color:var(--darkAccent);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- section themes ---------- */
.t-white{--bg:var(--cream);--hxl:var(--darkAccent);--hl:var(--darkAccent);--hm:var(--darkAccent);--hs:var(--black);--pl:var(--black);--pm:var(--darkAccent);--ps:var(--darkAccent);
  --btn1-bg:var(--lightAccent);--btn1-fg:var(--black);--btn2-bg:var(--darkAccent);--btn2-fg:#fff;--btn3-bg:var(--black);--btn3-fg:#fff;--hr:var(--darkAccent);--nav:var(--darkAccent)}
.t-black{--bg:var(--black);--hxl:#fff;--hl:#fff;--hm:#fff;--hs:#fff;--pl:#fff;--pm:#fff;--ps:#fff;
  --btn1-bg:var(--accent);--btn1-fg:var(--black);--btn2-bg:var(--accent);--btn2-fg:var(--black);--btn3-bg:var(--accent);--btn3-fg:var(--black);--hr:#fff;--nav:#fff}
.t-light-bold{--bg:var(--lightAccent);--hxl:var(--darkAccent);--hl:var(--darkAccent);--hm:var(--black);--hs:var(--black);--pl:var(--black);--pm:var(--darkAccent);--ps:var(--black);
  --btn1-bg:var(--black);--btn1-fg:#fff;--btn2-bg:var(--black);--btn2-fg:#fff;--btn3-bg:var(--black);--btn3-fg:#fff;--hr:var(--darkAccent);--nav:var(--darkAccent)}
.t-bright{--bg:var(--accent);--nav:var(--black)}

/* ---------- typography (Squarespace 7.1 formulas, base 14px) ---------- */
h1,h2,h3,h4{font-family:var(--heading-font);font-weight:400;font-style:normal;letter-spacing:var(--heading-ls);margin:2rem 0;text-transform:none;font-variation-settings:"opsz" var(--heading-opsz);font-optical-sizing:none}
h1{font-size:min(calc((var(--h1) - 1) * 1.2vw + 1rem), max(calc((var(--h1) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--h1) * 1rem)));line-height:calc(1.2em * (1 + (1 - var(--h1))/25));color:var(--hxl)}
h2{font-size:min(calc((var(--h2) - 1) * 1.2vw + 1rem), max(calc((var(--h2) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--h2) * 1rem)));line-height:calc(1.2em * (1 + (1 - var(--h2))/25));color:var(--hl)}
h3{font-size:min(calc((var(--h3) - 1) * 1.2vw + 1rem), max(calc((var(--h3) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--h3) * 1rem)));line-height:calc(1.2em * (1 + (1 - var(--h3))/25));color:var(--hm)}
h4{font-size:min(calc((var(--h4) - 1) * 1.2vw + 1rem), max(calc((var(--h4) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--h4) * 1rem)));line-height:calc(1.2em * (1 + (1 - var(--h4))/25));color:var(--hs)}
p,.large,.small{margin:1rem 0;line-height:1.5em}
p{font-size:1rem;color:var(--pm)}
.large{font-size:min(calc((var(--plarge) - 1) * 1.2vw + 1rem), max(calc((var(--plarge) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--plarge) * 1rem)));color:var(--pl)}
.small{font-size:min(calc((var(--psmall) - 1) * 1.2vw + 1rem), max(calc((var(--psmall) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--psmall) * 1rem)));color:var(--ps)}
pre{font-family:monospace,serif;font-size:1rem;margin:1rem 0;line-height:1.5em;white-space:pre-wrap}
pre code{font-family:var(--meta-font);font-weight:400;font-size:1rem;line-height:1.5em;letter-spacing:0}
strong{font-weight:700}
.txt>:first-child{margin-top:0}.txt>:last-child{margin-bottom:0}
.txt a{text-decoration:underline;text-underline-offset:.1em}
.txt a:hover{opacity:.7}
.tc-white{color:#fff}.tc-black{color:var(--black)}.tc-accent{color:var(--accent)}.tc-lightAccent{color:var(--lightAccent)}.tc-darkAccent{color:var(--darkAccent)}
.txt h1,.txt h2,.txt h3,.txt h4,.txt p{white-space:pre-wrap}
/* scaled text: JS fits the line to the block width (like Squarespace's "scaled text") */
.scaled{position:relative;height:auto;overflow:visible}
.scaled .scaled-text{display:inline-block;transform-origin:0 0;white-space:nowrap}
.scaled .scaled-text>*{margin:0;line-height:1.05;white-space:nowrap}

/* phones in portrait scale type from the viewport height, as Squarespace does */
@media screen and (max-width:767px) and (orientation:portrait){
  h1{font-size:calc((var(--h1) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  h2,.uil .slide h2{font-size:calc((var(--h2) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  h3{font-size:calc((var(--h3) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  h4{font-size:calc((var(--h4) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  .uil .slide h2{font-size:calc((var(--h4) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  .large{font-size:calc((var(--plarge) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
  .small{font-size:calc((var(--psmall) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:20;padding:2vw var(--gutter);color:var(--nav)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto}
.hdr .logo img{max-height:84px;width:auto}
.nav{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.nav li{margin:0 1vw}
.nav li:last-child{margin-right:0}
.nav a{display:inline-block;padding:.1em 0;font-family:var(--body-font);font-weight:300;font-size:1rem;line-height:1.5em;text-decoration:none;color:inherit;background-image:linear-gradient(currentColor,currentColor);background-repeat:repeat-x;background-size:1px 0;background-position:0 calc(100% - .1em);transition:background-size .2s}
.nav a:hover,.nav a.on{background-size:1px 1px}
.burger{display:none;width:35px;height:35px;position:relative;margin:-5px -5px -5px 0}
.burger span{position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .25s cubic-bezier(.2,.6,.3,1),opacity .2s}
.burger span:nth-child(1){transform:translateY(-5.5px)}
.burger span:nth-child(2){transform:translateY(5.5px)}
.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:rotate(-45deg)}
.menu{display:none;position:fixed;inset:0;z-index:15;background:var(--accent);color:var(--black);overflow:auto;opacity:0;transition:opacity .25s}
.menu ul{list-style:none;margin:0;padding:0;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20vh var(--gutter-m) 10vh}
.menu a{display:inline-flex;margin:3vw 5vw;font-weight:300;font-size:8.5vmin;line-height:1;text-decoration:none;color:inherit}
.menu a.on{opacity:1}
.menu-open .menu{display:block;opacity:1}
.menu-open{overflow:hidden}
.menu-open .hdr{color:var(--black);position:fixed}
@media (max-width:767px){
  :root{--hdr-h:calc(12vw + 42px)}
  .hdr{padding:6vw}
  .hdr .logo img{max-height:42px}
  .nav{display:none}
  .burger{display:block}
}
@media (min-width:768px) and (max-width:1100px){
  .nav a{font-size:.9rem}.nav li{margin:0 .8vw}
}

/* ---------- sections ---------- */
.sec{position:relative;display:flex;flex-direction:column;justify-content:center;background:var(--bg);color:var(--pm)}
.sec.va-top{justify-content:flex-start}
.sec.h-small{min-height:33vh}.sec.h-medium{min-height:66vh}.sec.h-large{min-height:100vh}
.sec.h-small>.cw{padding:3.3vmax 0}.sec.h-medium>.cw{padding:6.6vmax 0}.sec.h-large>.cw{padding:10vmax 0}
.sec.h-custom>.cw{padding-top:calc(var(--pt) * 1vmax);padding-bottom:calc(var(--pb) * 1vmax)}
.sec.va-top.h-small>.cw{padding-top:var(--gutter);padding-bottom:6.6vmax}
.sec.va-top.h-medium>.cw{padding-top:var(--gutter);padding-bottom:13.2vmax}
.cw{position:relative;width:100%;z-index:1}
.sec-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg .ov{position:absolute;inset:0}
.sec.has-bg{background:transparent}
/* shape divider: the section is clipped (JS builds the curve), the next section's background is pulled up behind it */
.sec.has-div{padding-bottom:var(--divh);z-index:2}
.sec.after-div{background:transparent}
.sec.after-div::before{content:"";position:absolute;left:0;right:0;bottom:0;top:calc(-1 * var(--prevdiv));background:var(--bg);z-index:0}
.sec.after-div>.sec-bg{top:calc(-1 * var(--prevdiv));z-index:0}
main>.sec:first-child{padding-top:var(--hdr-h)}
.div-svg{position:absolute;width:0;height:0}
.div-line{position:absolute;left:0;right:0;bottom:0;height:var(--lineh);background:var(--linec);z-index:3;pointer-events:none}

/* ---------- Fluid Engine grid ---------- */
.fe{--gap:11px;--cols-m:8;--g:calc(var(--gutter-m) - var(--gap));position:relative;display:grid;
  grid-template-rows:repeat(var(--rows-m),minmax(24px,auto));
  grid-template-columns:minmax(var(--g),1fr) repeat(8,minmax(0,calc((var(--maxw) - var(--gap) * 7) / 8))) minmax(var(--g),1fr);
  row-gap:var(--gap);column-gap:var(--gap);overflow-x:clip}
.b{position:relative;grid-area:var(--m);z-index:var(--zm);display:flex;flex-direction:column;justify-content:var(--jm);min-width:0}
.b>*{width:100%}
@media (min-width:768px){
  .fe{--g:calc(var(--gutter) - var(--gap));--cw:min(var(--maxw),calc(100vw - var(--gutter) * 2));
    grid-template-rows:repeat(var(--rows-d),minmax(calc(var(--cw) * .0215),auto));
    grid-template-columns:minmax(var(--g),1fr) repeat(24,minmax(0,calc((var(--maxw) - var(--gap) * 23) / 24))) minmax(var(--g),1fr)}
  .b{grid-area:var(--d);z-index:var(--zd);justify-content:var(--jd)}
}

/* ---------- blocks ---------- */
.b>.b-img,.b>.b-shape{position:absolute;inset:0;width:auto;height:auto}
/* video blocks keep their aspect ratio and grow the grid rows (as on the original); fill taller areas with letterboxing */
.b>.b-video{position:relative;flex:0 0 auto;aspect-ratio:var(--ar,9/16)}
.b-img a,.b-img .im{display:block;width:100%;height:100%}
.b-img img{width:100%;height:100%;object-fit:var(--fit,cover);object-position:var(--focal,50% 50%);transition:filter .5s ease-in-out}
.b-img:hover img{filter:brightness(50%)}
.b-btn{display:flex;align-items:center}
.b-btn.al-left{justify-content:flex-start}.b-btn.al-center{justify-content:center}.b-btn.al-right{justify-content:flex-end}
@media (max-width:767px){.b-btn.alm-left{justify-content:flex-start}.b-btn.alm-center{justify-content:center}.b-btn.alm-right{justify-content:flex-end}}
.btn{display:inline-block;font-family:var(--meta-font);font-weight:400;font-size:1rem;line-height:1.2em;letter-spacing:0;text-transform:none;text-decoration:none;text-align:center;padding:1.5rem 2.2rem;border-radius:300px;border:1px solid transparent;transition:opacity .15s;white-space:nowrap}
.btn-primary{background:var(--btn1-bg);color:var(--btn1-fg);border-color:var(--btn1-bg)}
.btn-secondary{background:var(--btn2-bg);color:var(--btn2-fg)}
.btn-tertiary{background:var(--btn3-bg);color:var(--btn3-fg)}
.btn:hover{opacity:.8}
.b-hr hr{border:0;height:1px;background:var(--hr);margin:7px 0;width:100%}
.b-video{background:#000}
.b-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.b-shape{display:flex;align-items:center;justify-content:flex-start}
.b-shape svg{width:100%;height:100%}
.b-shape svg path{fill:var(--fill)}

/* accordion */
.acc{list-style:none;margin:0;padding:0}
.acc li{border-top:1px solid var(--darkAccent)}
.acc li:last-child{border-bottom:1px solid var(--darkAccent)}
.acc button{display:flex;width:100%;align-items:center;justify-content:space-between;text-align:left;padding:20px 0;font-size:1rem;font-weight:300;line-height:1.15;color:var(--pm)}
.acc .ic{flex:0 0 14px;width:14px;height:14px;margin-left:14px;position:relative}
.acc .ic::before{content:"";position:absolute;left:2px;top:1px;width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.acc li.open .ic::before{transform:rotate(225deg);top:5px}
.acc .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc li.open .body{grid-template-rows:1fr}
.acc .body>div{overflow:hidden}
.acc .body .in{padding:0 50px 16px 0}
.acc .body p{margin:0 0 1rem}
.acc .body p:last-child{margin-bottom:0}

/* forms (posted to Web3Forms, same as the EVOLVE site) */
.form{--in-bg:var(--lightAccent)}
.form fieldset{border:0;padding:0;margin:0;min-width:0}
.form legend{padding:0}
.form .fi{margin-bottom:20px}
.form .ttl{display:block;font-size:1rem;font-weight:300;padding-bottom:4px;color:var(--pm)}
.form .cap{display:block;font-size:12px;padding-bottom:4px}
.form .req{opacity:.8;margin-left:.5em}
.form .cap .req{font-size:11px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.form input[type=text],.form input[type=email],.form input[type=date],.form textarea{width:100%;font:inherit;font-size:1rem;color:var(--black);background:var(--in-bg);border:1px solid transparent;border-radius:24px;padding:10px 20px;height:43px;outline:none;-webkit-appearance:none;appearance:none}
.form input[type=date]{width:auto;min-width:11em}
.form textarea{height:100px;min-height:100px;border-radius:24px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--black)}
.form ::placeholder{color:rgba(48,54,54,.65)}
.form .chips{display:flex;flex-wrap:wrap;gap:8px 8px;padding-top:4px}
.form .chip{display:inline-flex;align-items:center;cursor:pointer;font-size:.85rem;line-height:1;padding:6px 12px;border:1px solid var(--darkAccent);border-radius:300px;color:var(--darkAccent);user-select:none;transition:background .15s,color .15s}
.form .chip input{position:absolute;opacity:0;width:1px;height:1px}
.form .chip.on{background:var(--darkAccent);color:#fff}
.form .fbtn{display:flex;margin-top:8px}
.form .fbtn.al-center{justify-content:center}.form .fbtn.al-left{justify-content:flex-start}
.form .btn{background:var(--darkAccent);color:#fff;border-color:var(--darkAccent)}
.form .hp{position:absolute;left:-9999px;opacity:0}
.form .status{margin:14px 0 0;font-size:.9rem;min-height:1.4em}
.form .status.err{color:#a33}
.form.sent .fields,.form.sent .fbtn{display:none}
.form .thanks{display:none;padding:10px 0}
.form.sent .thanks{display:block}

/* logo marquee (custom code block on the original) */
.marquee{overflow:hidden;height:100px;width:100%;margin-bottom:3rem}
.marquee .track{display:flex;align-items:center;padding:1.1rem 0;animation:mq 25s linear infinite;will-change:transform}
.marquee .set{display:flex;align-items:center;flex-shrink:0;gap:2rem;padding-right:2rem}
.marquee .set img{height:80px;width:auto;max-width:none}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(var(--set-width,-50%))}}

/* ---------- reel gallery (portfolio pages) ---------- */
.reel{--vh:75;height:calc(var(--vh) * 1vh);min-height:0;position:relative;background:var(--bg)}
.reel .track{display:flex;height:100%;padding:var(--gutter) 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.reel .track::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 auto;margin:0;height:100%;scroll-snap-align:center}
.reel figure img{height:100%;width:auto;max-width:none;display:block}
.reel .ctl{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(253,251,246,.9);color:var(--darkAccent);z-index:2}
.reel .ctl svg{width:26px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}
.reel .prev{left:calc(var(--gutter) + 15px)}.reel .next{right:calc(var(--gutter) + 15px)}
.reel .ctl:hover{background:var(--cream)}
@media (max-width:767px){.reel .track{padding:var(--gutter-m) 0}.reel .prev{left:var(--gutter-m)}.reel .next{right:var(--gutter-m)}}

/* ---------- testimonial slider (user items list) ---------- */
.uil{padding:0;min-height:100px}
.uil .slides{position:relative;padding:38px 14vw;min-height:360px;display:grid}
.uil .slide{grid-area:1/1;opacity:0;transition:opacity .4s;pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.uil .slide.on{opacity:1;pointer-events:auto}
.uil .slide h2{letter-spacing:var(--heading-ls);font-variation-settings:"opsz" var(--heading-opsz);font-optical-sizing:none;font-size:min(calc((var(--h4) - 1) * 1.2vw + 1rem), max(calc((var(--h4) - 1) * 0.012 * var(--maxw) + 1rem), calc(var(--h4) * 1rem)));line-height:1.11;color:var(--hm);margin:0 0 40px}
.uil .slide .who{font-size:1rem;color:var(--pl);margin:0}
.uil .arr{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.uil .arr svg{width:26px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}
.uil .arr.prev{left:3vw}.uil .arr.next{right:3vw}
@media (max-width:767px){.uil .slides{padding:40px var(--gutter-m) 90px;min-height:0}.uil .arr{top:auto;bottom:20px;transform:none;width:48px;height:48px}.uil .arr.prev{left:var(--gutter-m)}.uil .arr.next{right:var(--gutter-m)}}

/* ---------- misc ---------- */
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}