:root{

  --brand: #f8b500;
  --brand-rgb: 248, 181, 0;
  --line: #b5b5b6;
  --gray-bg: #efefef;
  --ink: #111111;
  --paper: #ffffff;

  --x: calc(clamp(769px, 100vw, 1600px) / 24);
  --edge: calc(var(--x) * 1);
  --gap-obj: calc(var(--x) * 0.5);
  --sec-gap: 64px;
  --seam: 2px;

  --fs-quantum: 1px;
  --fs-scale: 1.1;
  --fs-fluid: clamp(14px, calc(10px + 0.6vw), 17.27px);
  --fs-body: calc(var(--fs-fluid) * var(--fs-scale));

  --r-lead: 1.25;
  --r-sub:  1.25;
  --r-h2:   1.6;
  --r-h1:   3.0;
  --r-hero: 4.5;

  --fs-lead: calc(var(--fs-body) * var(--r-lead));
  --fs-sub:  calc(var(--fs-body) * var(--r-sub));
  --fs-h2:   calc(var(--fs-body) * var(--r-h2));
  --fs-h1:   calc(var(--fs-body) * var(--r-h1));
  --fs-hero: calc(var(--fs-body) * var(--r-hero));

  --fw-title: 900;

  --lh-hero:  1.05;
  --lh-title: 1.15;
  --lh-lead:  1.5;
  --lh-body:  1.6;

  --ls-hero:  -0.03em;
  --ls-title: -0.02em;
  --ls-body:   0.01em;

  --measure: 64ch;

  --header-h: 80px;
  --logo-h: calc(var(--header-h) * 0.35);
  --header-fs-logo: 30px;
  --header-fs-menu: 15px;
  --header-fs-menu-m: calc(var(--x) * 0.75);
  --header-pad: calc(var(--x) * 1);
  --header-glass-alpha: 0.6;
  --header-blur: 13px;
  --menu-open-sec: 0.35;
  --menu-white-solid: calc(var(--x) * 2.5);
  --menu-white-fade: calc(var(--x) * 2.5);
  --menu-white-rgb: 253, 230, 170;
  --menu-blog-gap: calc(var(--x) * 0.4);

  --ham-w: calc(var(--header-h) * 0.38);
  --ham-line: 2px;
  --ham-gap: calc(var(--header-h) * 0.1);

  --logo-shift-x: 0px;
  --logo-shift-y: 0px;
  --ham-shift-x: 0px;
  --ham-shift-y: 0px;

  --hero-h: var(--vh-px, 100svh);
  --hero-swap-sec: 5;
  --hero-fade-sec: 1.5;

  --hero-object-pos: center;
  --hero-grad-height: calc(var(--x) * 2.2);
  --hero-grad-opacity: 1;

  --hero-h1-sink: calc(var(--x) * 0.35);
  --hero-cta-trim: 0.24;
  --hero-lower-pad-t: calc(var(--x) * 0.55);
  --hero-lower-pad-b: calc(var(--x) * 0.9);

  --cta-size: calc(var(--x) * 1.35);
  --cta-arrow-size: 100%;

  --ch1-card-w-x: 13;
  --ch1-card-w: calc(var(--x) * var(--ch1-card-w-x));
  --ch1-col-gap: calc(var(--x) * 1);
  --ch1-copy-w: calc(
    var(--x) * 24 - var(--edge) * 2 - var(--ch1-card-w) - var(--ch1-col-gap)
  );
  --ch1-card-h: calc(var(--x) * 10);
  --ch1-gap: 0.3;
  --ch1-card-border: 0.8px;
  --ch1-card-line: var(--line);

  --ch1-card-inset: calc(var(--x) * 0.156);

  --ch1-card-radius: 28px;
  --ch1-media-radius: max(0px, calc(var(--ch1-card-radius) - var(--ch1-card-inset)));

  --ch1-anim-sec: 0.6;
  --ch1-copy-fade: 0.2;
  --ch1-step-vh: 80;
  --ch1-steps: 5;
  --ch1-runway: calc(var(--vh-px, 100svh) * var(--ch1-steps) * var(--ch1-step-vh) / 100);
  --ch1-counter-h: calc(var(--x) * 1.1);

  --ch1-copy-shift: 0px;
  --ch1-deck-shift: 0px;
  --ch1-deck-left: var(--edge);

  --ch1-min-h: calc(var(--x) * 11.5);
  --ch1-max-h: calc(var(--x) * 14);
  --ch1-block-h: clamp(var(--ch1-min-h), var(--vh-px, 100svh) - var(--sec-gap) * 2, var(--ch1-max-h));

  --ch1-top-offset: max(var(--sec-gap), calc((var(--vh-px, 100svh) - var(--ch1-block-h)) / 2));
  --ch1-ch2-gap: var(--sec-gap);

  --ch2-sec-h: calc(var(--vh-px, 100svh) * 0.8);

  --ch2-map-w: calc(var(--x) * 36);
  --ch2-map-shift-x: calc(var(--x) * 1);
  --ch2-map-shift-y: 0px;

  --ch2-fade-h: calc(var(--ch2-head-top) + var(--fs-h1) * 1.3 + var(--fs-sub) * 1.8);
  --ch2-fade-bottom-h: calc(var(--ch2-box-h) + var(--ch2-bottom-gap));
  --ch2-fade-bottom-extra: 0px;
  --ch2-map-fade: calc(var(--x) * 5);
  --ch2-map-cover: calc(var(--vh-px, 100svh) * 0.92);
  --ch2-map-ar: 0.45;
  --ch2-map-w-px: max(var(--ch2-map-w), calc(var(--ch2-map-cover) / var(--ch2-map-ar)));

  --ch2-pulse-sec: 3;
  --ch2-pulse-start-r: 24vw;
  --ch2-pulse-max-r: 160vw;

  --ch2-pulse-core: 55%;
  --ch2-pulse-edge: 72%;

  --ch2-pulse-t: clamp(0, calc((100vw - 769px) / 831px), 1);
  --ch2-pulse-cx: calc(30% + var(--ch2-pulse-t) * 15%);
  --ch2-pulse-cy: calc(70% - var(--ch2-pulse-t) * 15%);

  --ch2-box-h: calc(var(--x) * 1.8);
  --ch2-box-radius: 10px;
  --ch2-logo-h: 0.3;
  --ch2-logo-gap: calc(var(--x) * 2);
  --r-ch2-num:  4.5;
  --r-ch2-stat: 1.35;
  --ch2-head-top: calc(var(--x) * 1.5);
  --ch2-head-gap: var(--sec-gap);
  --ch2-group-gap: var(--sec-gap);
  --ch2-stats-gap: min(calc(var(--x) * 0.8), calc(var(--vh-px, 100svh) * 0.03));
  --ch2-bottom-gap: var(--sec-gap);
  --ch2-gray: #9fa0a0;

  --ch3-runway: calc(var(--vh-px, 100svh) * 2.5);

  --ch2-ch3-overlap: 0px;

  --ch2-hold-gap: calc(var(--x) * 0.5);

  --ch3-fixed-h: 320px;
  --ch3-card-h: var(--ch1-card-h);
  --ch3-block-h: calc(var(--ch3-fixed-h) + var(--ch3-card-h));
  --ch3-top-offset: max(var(--sec-gap), calc((var(--vh-px, 100svh) - var(--ch3-block-h)) / 2));

  --ch3-ch4-gap: var(--sec-gap);
  --ch3-top-gap: calc(var(--header-h) + var(--x) * 0.6);
  --ch3-card-gap: calc(var(--x) * 1.2);
  --ch3-gray: #6b6b6b;

  --ch4-bg: var(--gray-bg);
  --ch4-gray: #8a8a8a;
  --ch4-top-gap: calc(var(--header-h) + var(--x) * 1.5);
  --ch4-bottom-gap: calc(var(--x) * 2.5);
  --ch4-col-gap: calc(var(--x) * 1.5);
  --ch4-left-w: 38%;
  --ch4-right-w: 50%;

  --ch4-item-gap: calc(var(--x) * 0.6);
  --ch4-item-radius: 14px;
  --ch4-item-border: 0.8px;
  --ch4-item-pad-x: calc(var(--x) * 0.8);
  --ch4-item-pad-y: calc(var(--x) * 0.7);
  --ch4-q-fs: var(--fs-h2);
  --ch4-icon-fs: calc(var(--fs-h2) * 0.9);
  --ch4-icon-bar: 2px;
  --ch4-qa-gap: calc(var(--x) * 0.7);
  --ch4-anim-sec: 0.22;
  --ch4-panel-bg: #f7f8f8;
  --ch4-panel-gap: calc(var(--x) * 0.4);
  --ch4-panel-pad-y: calc(var(--x) * 0.75);
  --ch4-sec-h: calc(var(--vh-px, 100svh) * 0.9);

  --footer-fs: var(--fs-body);
  --footer-pad-y: calc(var(--x) * 1);
  --footer-row-gap: calc(var(--x) * 2.5);
  --footer-subgroup-gap: calc(var(--x) * 1);
  --footer-link-gap: calc(var(--gap-obj) * 0.4);
}

@supports (width: round(nearest, 1px, 1px)){
  :root{
    --fs-body: round(nearest, calc(var(--fs-fluid) * var(--fs-scale)), var(--fs-quantum));
  }
}

@media not all and (max-width: 768px){
  :root{
    --hero-real-h: var(--hero-h);

    --ch3-block-h: var(--ch1-block-h);
  }
}

@media (max-width: 768px){
  :root{
    --x: calc(100vw / 24);
    --sec-gap: 40px;
    --ch2-ch3-overlap: 0px;
    --ch2-map-w: 100vw;
    --ch2-map-shift-x: 0px;
    --ch2-map-shift-y: calc(var(--x) * -3);

    --ch2-pulse-cx: 35%;
    --ch2-pulse-cy: 25%;

    --ch2-pulse-start-r: 24vw;
    --ch2-pulse-max-r: 160vw;
    --ch2-box-h: calc(var(--x) * 3.2);

    --ch2-fade-bottom-extra: calc(var(--x) * 5);

    --ch2-head-gap: calc(var(--x) * 6);
    --ch2-group-gap: calc(var(--x) * 3);
    --ch2-stats-gap: calc(var(--x) * 1.6);

    --header-h: calc(var(--x) * 3.5);
    --logo-h: calc(var(--header-h) * 0.35);
    --header-fs-logo: calc(var(--header-h) * 0.3);
    --header-fs-menu-m: 14px;
    --ham-line: 1.8px;
    --menu-blog-gap: calc(var(--x) * 0.8);

    --fs-fluid: clamp(14px, calc(10px + 1.2vw), 15.45px);

    --r-hero: 3.2;
    --r-h1:   2.2;
    --r-h2:   1.35;
    --r-lead: 1.15;
    --r-sub:  1.15;

    --r-ch2-num:  3.3;
    --r-ch2-stat: 1.25;

    --measure: 100%;

    --hero-img-h: 60svh;
    --hero-img-cover-m: 0.03;
    --hero-grad-height-m: calc(var(--x) * 7);

    --hero-h1-sink: calc(var(--x) * 0.5);
    --hero-lower-pad-t: calc(var(--x) * 1.1);
    --hero-lower-pad-b: calc(var(--x) * 2);
    --hero-p-cta-gap-m: calc(var(--x) * 1.6);

    --cta-size: calc(var(--x) * 3);

    --ch1-card-w-x: 22;
    --ch1-card-h: calc(var(--x) * 16);
    --ch1-card-inset: calc(var(--x) * 0.25);
    --ch1-gap: 0.7;
    --ch1-counter-h: calc(var(--x) * 2.2);

    --ch1-card-radius: 20px;

    --ch1-top-m: calc(var(--x) * 2);
    --ch1-tail-gap-m: calc(var(--x) * 2);
    --ch1-bottom-m: calc(var(--x) * 2);
    --ch1-copy-gap-m: calc(var(--x) * var(--ch1-gap) * 4);

    --ch1-min-h: var(--ch1-block-h-m, calc(
      var(--ch1-top-m)
      + var(--ch1-card-h)
      + var(--ch1-copy-gap-m)
      + var(--fs-h1) * var(--lh-title) * 2
      + var(--gap-obj) * 0.5
      + var(--fs-sub) * var(--lh-body)
      + var(--ch1-tail-gap-m)
      + var(--cta-size)
      + var(--ch1-bottom-m)
    ));
    --ch1-max-h: var(--ch1-min-h);

    --ch4-top-gap: calc(var(--header-h) + var(--x) * 2);
    --ch4-bottom-gap: calc(var(--x) * 4);
    --ch4-col-gap: calc(var(--x) * 2.5);
    --ch4-item-gap: calc(var(--x) * 0.8);
    --ch4-item-radius: 12px;
    --ch4-item-pad-x: calc(var(--x) * 1.4);
    --ch4-item-pad-y: calc(var(--x) * 1.3);
    --ch4-icon-fs: calc(var(--fs-h2) * 1.1);
    --ch4-icon-bar: 1.8px;
    --ch4-qa-gap: calc(var(--x) * 1.4);
    --ch4-panel-gap: calc(var(--x) * 0.8);
    --ch4-panel-pad-y: calc(var(--x) * 1.4);

    --footer-row-gap: calc(var(--x) * 5);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ overflow-anchor:none; }

body{
  font-family:'Jost', sans-serif;
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{
  text-wrap: balance;
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
p{
  text-wrap: pretty;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

img{
  display:block; max-width:100%;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:0; left:0;
  z-index:200;
  padding:0.75em 1.25em;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--header-fs-menu);
  font-weight:600;
  transform:translateY(-150%);
  transition:transform 0.2s ease;
}
.skip-link:focus{ transform:translateY(0); }

.cta{
  display:flex;
  align-items:flex-start;
  gap:calc(var(--x) * 0.35);
  flex-shrink:0;
}
.cta-label{
  font-size:var(--fs-body);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
  white-space:nowrap;
  line-height:1;
}
.cta-circle{
  position:relative;
  width:var(--cta-size);
  height:var(--cta-size);
  border-radius:50%;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.3s ease;
}
.cta:hover .cta-circle{ transform:scale(1.08); }

.cta-arrow{
  position:absolute;
  width:var(--cta-arrow-size);
  height:auto;
  transition:opacity 0.25s ease;
}
.cta-arrow.arrow-hover{ opacity:0; }
.cta:hover .arrow-hover{ opacity:1; }
.cta:hover .arrow-default{ opacity:0; }

.cta--ghost .cta-circle{
  background:transparent;
  border:1px solid var(--paper);
}

.cta--dark .cta-label{ color:var(--ink); }
.cta--dark .cta-circle{ background:transparent; border:1px solid var(--ink); }
.cta--dark:hover .cta-circle{ background:transparent; border-color:var(--ink); }

@media (max-width:768px){
  .cta{ align-items:flex-end; }
  .cta-circle{ order:1; }
  .cta-label{ order:2; }
}

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;

  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
.header-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(var(--header-pad), env(safe-area-inset-left, 0px));
  padding-right:max(var(--header-pad), env(safe-area-inset-right, 0px));
}

.header-glass{
  position:absolute;
  inset:0;
  -webkit-backdrop-filter:blur(var(--header-blur));
  backdrop-filter:blur(var(--header-blur));
  transform:translateZ(0);
  pointer-events:none;
}
.header-colors{
  position:absolute;
  inset:0;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,var(--header-glass-alpha)) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,var(--header-glass-alpha)) 100%);

}
.header-tint{
  position:absolute;
  inset:0;
  background:var(--brand);
}
.header-white{
  position:absolute;
  inset:0;
  background:rgb(var(--menu-white-rgb));
  -webkit-mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  opacity:0;
  transition:opacity calc(var(--menu-open-sec) * 1s) ease;
  will-change:opacity;
  transform:translateZ(0);
}
.site-header.is-open .header-white{ opacity:1; }

.logo{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  font-size:var(--header-fs-logo);
  font-weight:700;
  letter-spacing:0.04em;
  transform:translate(var(--logo-shift-x), var(--logo-shift-y));
}
.header-right{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
}

.menu-nav{
  display:flex;
  align-items:center;
  gap:var(--menu-blog-gap);
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width calc(var(--menu-open-sec) * 1s) ease,
             opacity calc(var(--menu-open-sec) * 1s) ease,
             margin calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .menu-nav{
  max-width:16em;
  opacity:1;
  margin-right:var(--menu-blog-gap);
}
.menu-nav a{
  font-size:var(--header-fs-menu);
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--ink);
  white-space:nowrap;
}
@media (max-width:768px){
  .menu-nav a{ font-size:var(--header-fs-menu-m); }
}

.hamburger{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--ham-gap);
  width:var(--ham-w);
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(0deg) scaleX(1);
  transform-origin:center;
  transition:transform calc(var(--menu-open-sec) * 1s) ease;
}
.hamburger span{
  display:block;
  width:100%;
  height:var(--ham-line);
  background:var(--paper);
  transition:background calc(var(--menu-open-sec) * 1s) ease;
}

.site-header.is-open .hamburger{
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(90deg) scaleX(var(--ham-open-sx, 0.72));
}
.site-header.is-open .hamburger span{ background:var(--ink); }

.hero-pin{
  position:relative;
  height:calc(var(--hero-real-h, var(--hero-h)) + var(--ch1-runway, 0px));
  margin-bottom:calc(-1 * var(--ch1-runway, 0px));
}

.hero{
  position:sticky;
  top:calc(var(--ch1-top-offset) - var(--hero-real-h, var(--hero-h)));
  bottom:auto;
  z-index:1;
  height:var(--hero-h);
  background:var(--brand);
  overflow:hidden;
  box-shadow:0 100px 0 var(--brand);
}

.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity calc(var(--hero-fade-sec) * 1s) ease;
}
.hero-bg.is-active{ opacity:1; }
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-object-pos);
}

.hero-content{
  position:absolute;
  inset:0;
}
.hero-spacer{ display:none; }

.hero-lower{
  position:absolute;
  left:0; right:0; bottom:0;
  background:rgba(var(--brand-rgb), var(--hero-grad-opacity));
}
.hero-lower::before{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:100%;
  height:var(--hero-grad-height);
  background:linear-gradient(to top,
    rgba(var(--brand-rgb), var(--hero-grad-opacity))   0%,
    rgba(var(--brand-rgb), 0.987)   8.1%,
    rgba(var(--brand-rgb), 0.951)  15.5%,
    rgba(var(--brand-rgb), 0.896)  22.5%,
    rgba(var(--brand-rgb), 0.825)  29.0%,
    rgba(var(--brand-rgb), 0.741)  35.3%,
    rgba(var(--brand-rgb), 0.648)  41.2%,
    rgba(var(--brand-rgb), 0.550)  47.1%,
    rgba(var(--brand-rgb), 0.450)  52.9%,
    rgba(var(--brand-rgb), 0.352)  58.8%,
    rgba(var(--brand-rgb), 0.259)  64.7%,
    rgba(var(--brand-rgb), 0.175)  71.0%,
    rgba(var(--brand-rgb), 0.104)  77.5%,
    rgba(var(--brand-rgb), 0.049)  84.5%,
    rgba(var(--brand-rgb), 0.013)  91.9%,
    rgba(var(--brand-rgb), 0)     100%);
  pointer-events:none;
}
.hero-lower-inner{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  padding:var(--hero-lower-pad-t) var(--edge) var(--hero-lower-pad-b);
}

.hero-head{
  position:absolute;
  left:var(--edge);
  right:var(--edge);
  bottom:100%;
  transform:translateY(var(--hero-h1-sink));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--gap-obj);
}
.hero-head h1{
  font-size:var(--fs-hero);
  font-weight:var(--fw-title);
  color:var(--paper);
  line-height:var(--lh-hero);
  letter-spacing:var(--ls-hero);
  white-space:nowrap;
  text-wrap:nowrap;
}
.hero-head .cta{
  margin-top:calc(var(--fs-hero) * var(--hero-cta-trim));
}

.hero-lower-inner p{
  max-width:var(--measure);
  font-size:var(--fs-lead);
  font-weight:400;
  color:var(--paper);
  line-height:var(--lh-lead);
}

@media (max-width:768px){
  .hero{
    height:auto;
    --hero-grad-height: var(--hero-grad-height-m);
  }
  .hero-content{
    position:relative;
    inset:auto;
  }
  .hero-bg img{
    height:auto;
    object-fit:initial;
  }
  .hero-spacer{
    display:block;
    height:calc(var(--hero-img-h) * (1 - var(--hero-img-cover-m)));
  }
  .hero-lower{
    position:relative;
    left:auto; right:auto; bottom:auto;
  }
  .hero-lower-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-head{ display:contents; }
  .hero-head h1{
    position:absolute;
    left:var(--edge);
    bottom:100%;
    transform:translateY(var(--hero-h1-sink));
    margin-top:0;
  }
  .hero-lower-inner p{ order:1; width:100%; }
  .hero-head .cta{
    order:2;
    margin-top:var(--hero-p-cta-gap-m);
  }
}

.ch1{
  position:relative;
  z-index:2;
  background:transparent;
  margin:0;
  height:calc(var(--ch1-runway) + var(--ch1-block-h));
}

.ch1-sticky{
  position:sticky;
  top:calc(var(--ch1-top-offset) - var(--seam));
  height:calc(var(--ch1-block-h) + var(--seam));
  background:var(--brand);
  overflow:hidden;
}

.ch1-inner{
  position:relative;
  max-width:1600px;
  height:100%;
  margin:0 auto;
}

.ch1-deck{
  position:absolute;
  left:var(--ch1-deck-left);
  top:calc(50% + var(--ch1-deck-shift));
  translate:0 -50%;
  width:var(--ch1-card-w);
  height:var(--ch1-card-h);
}

.ch1-card{
  position:absolute;
  inset:0;
  background:var(--paper);
  border:var(--ch1-card-border) solid var(--ch1-card-line);
  border-radius:var(--ch1-card-radius);
  transform-origin:100% 50%;
  transition:transform calc(var(--ch1-anim-sec) * 1s) ease,
             opacity calc(var(--ch1-anim-sec) * 1s) ease;

}

.ch1-copy,
.ch1-catalogue,
.ch1-counter{
  will-change:transform;
}

.ch1-card-media{
  position:absolute;
  inset:var(--ch1-card-inset);
  border-radius:var(--ch1-media-radius);
  overflow:hidden;
  opacity:0;
  transition:opacity 0.35s ease;
}
.ch1-card.is-front .ch1-card-media.is-on{ opacity:1; }
.ch1-card-media img,
.ch1-card-media video{
  width:100%; height:100%; object-fit:cover;
}
.ch1-card-media video{
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}

.ch1-stack,
.ch1-tail{ display:contents; }

.ch1-copy{
  position:absolute;
  right:var(--edge);
  width:var(--ch1-copy-w);
  top:calc(50% + var(--ch1-copy-shift));
  translate:0 -50%;
  text-align:right;
  color:var(--paper);
}
.ch1-copy h2,
.ch1-copy p{
  transition:opacity calc(var(--ch1-copy-fade) * 1s) ease;
}

.ch1-copy.ch1-copy-probe{
  position:absolute;
  left:-99999px;
  top:0;
  right:auto;
  bottom:auto;
  translate:none;
  visibility:hidden;
  pointer-events:none;
  contain:layout style;
  --ch1-h2-min-h:auto;
  --ch1-sub-min-h:auto;
}
.ch1-copy.ch1-copy-probe h2,
.ch1-copy.ch1-copy-probe p{ transition:none; opacity:1; }

.ch1-copy h2{
  --ch1-h2-fill: 8.6;
  font-size:clamp(22px, calc(var(--ch1-copy-w) * var(--ch1-h2-fill) / 100), var(--fs-h1));
  font-weight:var(--fw-title);
  margin-bottom:calc(var(--gap-obj) * 0.5);
  min-height:var(--ch1-h2-min-h, auto);
}
.ch1-copy p{
  max-width:var(--measure);
  margin-left:auto;
  font-size:var(--fs-sub);
  font-weight:500;
  min-height:var(--ch1-sub-min-h, auto);
}

.ch1-catalogue{
  position:absolute;
  right:var(--edge);
  top:calc(50% - var(--ch1-card-h) / 2);
}

.ch1-counter{
  position:absolute;
  right:var(--edge);
  bottom:calc(50% - var(--ch1-card-h) / 2);
  transition:none;
}
.ch1-counter img{
  height:var(--ch1-counter-h);
  width:auto;
}

@media (max-width:768px){
  .ch1-deck{
    left:50%;
    top:var(--ch1-top-m);
    translate:-50% 0;
  }
  .ch1-card{ transform-origin:50% 100%; }

  .ch1-stack{
    display:flex;
    flex-direction:column;
    gap:var(--ch1-tail-gap-m);
    position:absolute;
    left:var(--edge);
    right:var(--edge);
    top:calc(
      var(--ch1-top-m)
      + var(--ch1-card-h)
      + var(--ch1-copy-gap-m)
    );
    padding-bottom:var(--ch1-bottom-m);
  }
  .ch1-tail{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
  }
  .ch1-copy,
  .ch1-catalogue,
  .ch1-counter{
    position:static;
    inset:auto;
    translate:0 0;
  }
  .ch1-copy{
    width:auto;
  }
  .ch1-copy h2{
    font-size:var(--fs-h1);
  }
}

.ch2-pin{
  position:relative;
  z-index:3;
  margin-top:calc(-1 * var(--ch1-runway, 0px) + var(--ch1-ch2-gap));
  height:calc(var(--ch2-sec-h) + var(--ch1-runway, 0px) + var(--ch2-ch3-overlap, 0px));
  pointer-events:none;
}
.ch2{
  position:sticky;
  top:calc(var(--ch1-top-offset) + var(--ch1-block-h) + var(--ch1-ch2-gap) - var(--seam));
  background:var(--paper);
  pointer-events:auto;
}
.ch2-sticky{
  position:relative;
  overflow:hidden;
  background:var(--paper);
}
.ch2-sticky::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:var(--ch2-fade-h, 0px);
  background:linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%);
  z-index:1;
  pointer-events:none;
}
.ch2-sticky::before{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:calc(var(--ch2-fade-bottom-h, 0px) + var(--ch2-fade-bottom-extra, 0px));
  background:linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 100%);
  z-index:1;
  pointer-events:none;
}

.ch2-map{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;

  --ch2-map-c: 50%;
  -webkit-mask-image:linear-gradient(to right,
    transparent calc(var(--ch2-map-c) - var(--ch2-map-w) / 2),
    #000        calc(var(--ch2-map-c) - var(--ch2-map-w) / 2 + var(--ch2-map-fade)),
    #000        calc(var(--ch2-map-c) + var(--ch2-map-w) / 2 - var(--ch2-map-fade)),
    transparent calc(var(--ch2-map-c) + var(--ch2-map-w) / 2));
  mask-image:linear-gradient(to right,
    transparent calc(var(--ch2-map-c) - var(--ch2-map-w) / 2),
    #000        calc(var(--ch2-map-c) - var(--ch2-map-w) / 2 + var(--ch2-map-fade)),
    #000        calc(var(--ch2-map-c) + var(--ch2-map-w) / 2 - var(--ch2-map-fade)),
    transparent calc(var(--ch2-map-c) + var(--ch2-map-w) / 2));
}

.ch2-map-gray,
.ch2-map-color{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:var(--ch2-map-w-px) auto;
  background-position:calc(50% + var(--ch2-map-shift-x)) top;
}
.ch2-map.is-loaded .ch2-map-gray{
  background-image:url('https://img.shoplineapp.com/media/image_clips/6a69b8ec8f5c01e9cf504baa/original.png?1785313516=&owner_id=6572a1b95ad192005192397e');
}
.ch2-map.is-loaded .ch2-map-color{
  background-image:url('https://img.shoplineapp.com/media/image_clips/6a69d60d10890727b42575aa/original.png?1785320972=&owner_id=6572a1b95ad192005192397e');
}
.ch2-map-color{

  -webkit-mask-image:radial-gradient(circle var(--ch2-pulse-r, 0px) at var(--ch2-pulse-cx) var(--ch2-pulse-cy), #000 var(--ch2-pulse-core), transparent var(--ch2-pulse-edge));
  mask-image:radial-gradient(circle var(--ch2-pulse-r, 0px) at var(--ch2-pulse-cx) var(--ch2-pulse-cy), #000 var(--ch2-pulse-core), transparent var(--ch2-pulse-edge));
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:0 0;
  mask-position:0 0;
  will-change:opacity;
  animation:ch2pulse calc(var(--ch2-pulse-sec) * 1s) linear infinite;

  animation-play-state:paused;
}

.ch2-map.is-live .ch2-map-color{ animation-play-state:running; }

@media (prefers-reduced-motion: reduce){
  .ch2-map-color{
    -webkit-mask-image:none;
    mask-image:none;
    animation:none;
    opacity:1;
    will-change:auto;
  }
}

.ch2-inner{
  position:relative;
  z-index:2;
  max-width:1600px;
  margin:0 auto;
  padding:var(--ch2-head-top) var(--edge) var(--ch2-bottom-gap);
  display:flex;
  flex-direction:column;
}
.ch2-head{
  align-self:flex-start;
  margin-bottom:var(--ch2-head-gap);
}
.ch2-head h2{
  font-size:var(--fs-h1);
  font-weight:var(--fw-title);
  line-height:1.15;
}
.ch2-head p{
  margin-top:calc(var(--gap-obj) * 0.4);
  font-size:var(--fs-sub);
  font-weight:500;
  color:var(--ch2-gray);
}

.ch2-stats{
  align-self:flex-end;
  margin-bottom:var(--ch2-group-gap);
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--ch2-stats-gap);
  text-align:right;
}
.ch2-stat-line{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:calc(var(--x) * 0.35);
}
.ch2-stats .num{
  font-size:calc(var(--fs-body) * var(--r-ch2-num));
  font-weight:var(--fw-title);
  color:var(--brand);
  line-height:1;
}
.ch2-stats .label{
  font-size:calc(var(--fs-body) * var(--r-ch2-stat));
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
}
.ch2-stats p{
  margin-top:0.35em;
  font-size:var(--fs-sub);
  font-weight:500;
  color:var(--ch2-gray);
}

.ch2-marquee{
  align-self:stretch;
  width:100%;
  height:var(--ch2-box-h);
  flex-shrink:0;
  background:var(--gray-bg);
  border:0.8px solid var(--line);
  border-radius:var(--ch2-box-radius);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.ch2-track{
  display:flex;
  align-items:center;
  width:max-content;
  flex-shrink:0;
  will-change:transform;

}
.ch2-set{
  display:flex;
  align-items:center;
  gap:var(--ch2-logo-gap);
  padding-right:var(--ch2-logo-gap);
  flex:0 0 auto;
}
.ch2-logo{

  height:calc(var(--ch2-box-h) * var(--ch2-logo-h) * var(--logo-scale, 1));
  width:auto;
  flex:0 0 auto;
  -webkit-user-drag:none;
  user-select:none;
}

@media (max-width:768px){
  .ch2-map{
    -webkit-mask-image:none;
    mask-image:none;
  }
  .ch2-map-gray,
  .ch2-map-color{
    background-size:var(--ch2-map-w) auto;
    background-position:center var(--ch2-map-shift-y);
  }

  .ch2-map.is-loaded .ch2-map-gray{
    background-image:url('https://img.shoplineapp.com/media/image_clips/6a69ba970b16f489b386d901/original.png?1785313942=&owner_id=6572a1b95ad192005192397e');
  }
  .ch2-map.is-loaded .ch2-map-color{
    background-image:url('https://img.shoplineapp.com/media/image_clips/6a69ba97a427afced678ad77/original.png?1785313942=&owner_id=6572a1b95ad192005192397e');
  }
}

@property --ch2-pulse-r{
  syntax:'<length>';
  inherits:false;
  initial-value:0px;
}

@keyframes ch2pulse{
  0%{   --ch2-pulse-r:0px;                        opacity:0; }
  20%{  --ch2-pulse-r:var(--ch2-pulse-start-r);    opacity:1; }
  65%{  opacity:1; }
  100%{ --ch2-pulse-r:var(--ch2-pulse-max-r);      opacity:0; }
}

.no-cssprop .ch2-map-color{
  -webkit-mask-image:none;
  mask-image:none;
  animation:none;
  opacity:1;
  will-change:auto;
}

.ch3{
  position:relative;
  z-index:2;
  margin-top:calc(-1 * var(--ch2-ch3-overlap, 0px));
  height:calc(var(--ch3-block-h) + var(--ch3-runway));
  background:var(--paper);
}
.ch3-stage{
  position:sticky;
  top:calc(var(--ch3-top-offset) - var(--seam));
  height:calc(var(--ch3-block-h) + var(--seam));
  overflow:hidden;
  background:var(--paper);
  display:flex;
  flex-direction:column;
}
.ch3-inner{
  position:relative;
  flex:1 1 auto;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:var(--ch3-top-gap) var(--edge) calc(var(--x) * 1);
  display:flex;
  flex-direction:column;
}

.ch3-copy{ display:contents; }

.ch3-head{ order:1; }
.ch3-body{ order:2; }
.ch3-card{ order:3; }
.ch3-contact{ order:4; }

.ch3-head{
  display:flex;
  align-items:flex-start;
  gap:var(--gap-obj);
}
.ch3-head h2{
  font-size:var(--fs-h1);
  font-weight:var(--fw-title);
  line-height:1.1;
}
.ch3-body{
  margin-top:calc(var(--gap-obj) * 0.5);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  color:var(--ch3-gray);
}

.ch3-card{
  margin-top:var(--ch3-card-gap);
  height:var(--ch3-card-h);
  flex:none;
  width:100%;
  position:relative;
  background:var(--paper);
  border:var(--ch1-card-border) solid var(--ch1-card-line);
  border-radius:var(--ch1-card-radius);
  overflow:hidden;
}
.ch3-card-media{
  position:absolute;
  inset:var(--ch1-card-inset);
  border-radius:var(--ch1-media-radius);
  overflow:hidden;
  background:var(--paper);
}
.ch3-poster{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ch3-zoom{
  position:absolute;
  inset:0;
  display:none;
}
.ch3-bg,
.ch3-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ch3-contact{
  margin-top:var(--ch3-card-gap);
  align-self:flex-start;
}

@media not all and (max-width: 768px){
  .ch3-inner{
    display:block;
    height:100%;
    padding:0;
  }
  .ch3-copy{
    display:block;
    position:absolute;
    left:var(--edge);
    width:var(--ch1-copy-w);
    top:50%;
    translate:0 -50%;
    text-align:left;
  }
  .ch3-head{ display:block; }

  .ch3-head h2{
    --ch3-h2-fill: 8.6;
    font-size:clamp(22px, calc(var(--ch1-copy-w) * var(--ch3-h2-fill) / 100), var(--fs-h1));
  }
  .ch3-body{
    max-width:var(--measure);
  }
  .ch3-contact{
    margin-top:var(--ch3-card-gap);
    align-self:auto;
  }
  .ch3-card{
    position:absolute;
    right:var(--edge);
    top:50%;
    translate:0 -50%;
    width:var(--ch1-card-w);
    height:var(--ch1-card-h);
    margin-top:0;
  }

  .ch3-zoom{
    transform:scale(1.4);
    transform-origin:center;
  }
}

@media (max-width:768px){
  .ch3-head{ align-items:center; }
  .ch3-contact{ align-self:flex-start; }

  .ch3-zoom{
    transform:scale(1.4);
    transform-origin:center;
  }
}

.ch4-pin{
  position:relative;
  z-index:6;
  margin-top:calc(-1 * var(--ch3-runway) + var(--ch3-ch4-gap));
  min-height:calc(var(--ch4-sec-h) + var(--ch3-runway));
  pointer-events:none;
}
.ch4{
  position:sticky;
  top:calc(var(--ch3-top-offset) + var(--ch3-block-h) + var(--ch3-ch4-gap) - var(--seam));
  background:var(--ch4-bg);
  pointer-events:auto;
}
.ch4-inner{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  padding:var(--ch4-top-gap) var(--edge) var(--ch4-bottom-gap);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--ch4-col-gap);
}

.ch4-intro{
  flex:0 0 var(--ch4-left-w);
  max-width:var(--ch4-left-w);
}
.ch4-intro h2{
  font-size:var(--fs-h1);
  font-weight:var(--fw-title);
  line-height:1.1;
  color:var(--ink);
}
.ch4-intro p{
  margin-top:var(--gap-obj);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  color:var(--ch4-gray);
}

.ch4-list{
  flex:0 0 var(--ch4-right-w);
  max-width:var(--ch4-right-w);
  display:flex;
  flex-direction:column;
  gap:var(--ch4-item-gap);
}

.ch4-item{
  display:block;
}

.ch4-q{
  display:flex;
  width:100%;
  cursor:pointer;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-obj);
  padding:var(--ch4-item-pad-y) var(--ch4-item-pad-x);
  background:var(--paper);
  border:var(--ch4-item-border) solid var(--line);
  border-radius:var(--ch4-item-radius);
  font-family:inherit;
  font-size:var(--ch4-q-fs);
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:border-color calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-q:hover{ border-color:var(--brand); }
.ch4-item.is-open .ch4-q{ border-color:var(--brand); }

.ch4-icon{
  position:relative;
  flex-shrink:0;
  width:var(--ch4-icon-fs);
  height:var(--ch4-icon-fs);
  transition:transform calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-item.is-open .ch4-icon{ transform:rotate(90deg); }
.ch4-icon::before,
.ch4-icon::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  background:var(--brand);
  border-radius:2px;
}
.ch4-icon::before{
  width:80%; height:var(--ch4-icon-bar);
  transform:translate(-50%,-50%);
  transition:transform calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-icon::after{
  width:var(--ch4-icon-bar); height:80%;
  transform:translate(-50%,-50%);
}
.ch4-item.is-open .ch4-icon::before{ transform:translate(-50%,-50%) scaleX(0); }

.ch4-a-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows calc(var(--ch4-anim-sec) * 1s) ease;
}
.ch4-item.is-open .ch4-a-wrap{ grid-template-rows:1fr; }
.ch4-a{
  overflow:hidden;
  min-height:0;
}
.ch4-a-panel{
  margin:var(--ch4-panel-gap) 0 0;
  padding:var(--ch4-panel-pad-y) var(--ch4-item-pad-x);
  background:var(--ch4-panel-bg);
  border-radius:var(--ch4-item-radius);
}
.ch4-qa + .ch4-qa{ margin-top:var(--ch4-qa-gap); }
.ch4-qa .q{
  margin:0;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
}
.ch4-qa .a{
  margin:calc(var(--gap-obj) * 0.3) 0 0;
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--ch4-gray);
  line-height:1.6;
}

@media (max-width:768px){
  .ch4-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .ch4-intro,
  .ch4-list{
    flex:0 0 auto;
    max-width:100%;
    width:100%;
  }
}

.site-footer{

  border-top:0.8px solid var(--ch4-gray);
  background:var(--ch4-bg);
  color:var(--ch4-gray);
}
.footer-inner{
  max-width:1600px;
  margin:0 auto;
  padding:var(--footer-pad-y) var(--edge);
  font-size:var(--footer-fs);
}
/* row 1 (back to top + Media) is top-aligned; row 2 (copyright + Contact)
   is bottom-aligned so the Contact group sits level with the copyright line */
.footer-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--gap-obj);
}
.footer-row + .footer-row{ margin-top:var(--footer-row-gap); align-items:flex-end; }

.footer-top-link{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:0.2em;
}

.footer-copy{ font-weight:400; }
.footer-copy strong{ font-weight:700; }

.footer-group{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.footer-group-label{
  font-weight:600;
  color:var(--ink);
  margin-bottom:calc(var(--footer-link-gap) * 0.5);
}
.footer-link{
  display:block;
  text-decoration:underline;
  text-underline-offset:0.2em;
}
.footer-link + .footer-link{ margin-top:calc(var(--footer-link-gap) * 0.4); }
.footer-email{ text-decoration:none; }

/* PATRONI WP integration: Flatsome still prints its hidden mobile drawer via
   wp_footer(). Because the landing page intentionally dequeues Flatsome CSS,
   hide that drawer explicitly on this template only. */
body.patroni-home-page #main-menu.mobile-sidebar {
  display: none !important;
}