:root{
    --header-h: 64px;
    --cycle: 500ms;
    --hero-fade: 1000ms;
    --mm-o: #ff931e;  
    --mm-b: #3fa9f5;
  }
  
  /* 2) Design Tokens -------------------------------------------------------- */
:root{
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #d9d9d9;
  --color-gray-600: #666666;
  --color-gray-900: #111111;

  --color-magenta: #e6007a;   /* container wide */
  --color-blue: #0047ff;      /* container narrow */
  --color-accent: #ffcc00;    /* tags/buttons highlight */
  --color-link: #0066cc;

  /* Typography scale */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --fs-md: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-xxl: clamp(2rem, 1.5rem + 2vw, 3rem);

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */

  /* Breakpoints (tokens for reference) */
  --bp-sm: 640px;   /* mobile */
  --bp-md: 768px;   /* tablet */
  --bp-lg: 1024px;  /* laptop */
  --bp-xl: 1280px;  /* desktop */
  --bp-xxl: 1536px; /* wide */

  /* Radii & shadows */
  --radius-lg: 0.75rem;
  --radius-2xl: 1rem; /* “2xl radius” */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-hover: 0 10px 24px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);

  /* Transitions */
  --trans-fast: 150ms ease;
  --trans: 250ms ease;
}

a {
    color: #3fa9f5;
}
  
  .mm-o, orange { color: #ff931e; font-weight: 600; }
  .mm-b, blue { color: #3fa9f5; font-weight: 600; }
  .mm-g, gray { color: #878787; font-weight: 600; }
  .mm-w, white { color: #ffffff; font-weight: 600; }
  
  .tophat {
      margin-top: 3.5rem;
  }
  
                  /* Container layout */
                #left, #right {
                  width: 100%;
                  box-sizing: border-box;
                  padding: 1rem;
                }
                
                @media (min-width: 700px) {
                  #left, #right {
                    display: inline-block;
                    vertical-align: top;
                    max-width: 48%;
                  }
                  #left {
                  }
                }
                
                /* Optional: make images consistent */
                #left img, #right img {
                  width: 266px;
                  max-width: 100%;
                  height: auto;
                  display: block;
                  margin-bottom: 0.75rem;
                }


  /* Basic reset */
  *,*::before,*::after{ box-sizing:border-box; }
  html, body {
      scroll-behavior: smooth;
    }
    [id] {
      scroll-margin-top: 80px;
    }
    
/* header overflow fix */

/* Replace BOTH existing .site-header blocks with this */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 40px);
  z-index: 1000;              /* above hero */
  overflow: visible;           /* <-- allow dropdown to escape */
  pointer-events: auto;
  background: transparent;     /* moved to ::before */
}

.site-header::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.2));
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  z-index: -1;                 /* sits behind links & submenu */
}


/* ---------------------------
   Header Refactor (zero overflow)
   --------------------------- * /
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 40px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .65), rgba(255, 255, 255, .2));
  z-index: 50;
  pointer-events: auto;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* */

html, body {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}


/* end heaader overflow fix */
    
  html,body{ height:100%; margin:0; }
  body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#fff; background:#0b0b0b; }

  /* Persistent header * /
  .site-header{
    position:fixed; inset:0 0 auto 0; height:var(--header-h);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(16px, 3vw, 40px);
    background:linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.2));
    z-index: 50;
    pointer-events: auto;
    backdrop-filter: saturate(140%) blur(8px);
  }
  /* */
  .logo {height: 40px;}
  .brand{ font-weight:800; letter-spacing:.02em; }
  .header-cta a{ color:black; text-decoration:none; font-weight:400; }
  
  /* footer */
  .site-footer{
      text-align: center;
      /*
      border-top: 1px solid var(--color-gray-300);
      background: var(--color-gray-100);
      */
    }
    .site-footer__inner{
      padding-block: var(--space-5);
      color: var(--color-gray-600);
      font-size: var(--fs-sm);
    }

  /* HERO */
  
      /* Interior hero: disable full-screen height + center content vertically */
        
        .basic{
            text-transform: none;
            color: black;
        }
            .white-box{
                padding: 2rem;
                background-color: rgba(255, 255, 255, 0.6);
            }
        h1.basic{
            left: clamp(16px, 5vw, 80px);
            position: relative;
            font-size: 3.5rem;
            font-weight: 400 ;
        }
        h1.basic gray{
            font-weight: 400 ;
            
        }
        p.basic{
            max-width: 600px;
            font-size: clamp(.95rem, .75rem + .7vw, 1.1rem);
            line-height: 1.5;
        }
        
        .hero--interior{
          height:auto !important;                      /* turn off 100dvh */
          min-height:clamp(320px, 50vh, 560px); /* keep some presence without full-bleed */
          padding: 4rem 0;
        }
        
        .hero--interior .hero__content{
          position:relative;  /* leave normal flow */
          inset:auto;         /* undo absolute insets */
          top:auto;           /* undo vertical centering via top */
          transform:none;     /* remove translateY */
          display:grid;       /* vertical centering within its own block */
          align-content:center;
          padding-block:clamp(48px, 8vh, 96px); /* comfortable top/bottom breathing room */
        }
        
        /* (Optional) If you want the background to still cover nicely at reduced height */
        .hero--interior .hero__slide{
          background-position:center center;
          background-size:cover;
        }

  .hero{
    position:relative;
    height:100dvh;               /* one viewport tall */
    overflow:hidden;
    isolation:isolate;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
    background-color: white;
  }

  /* Slide track (cross-fade) */
  .hero__slides, .hero__slide{
    position:absolute; inset:0;
  }
  .hero__slides{ z-index:0; }
  .hero__slide{
    background-position:center center;
    background-size:cover;
    opacity:0; transition:opacity var(--hero-fade) ease;
  }
  .hero__slide.is-active{ opacity:1; }
  
  /* Text block — stable width prevents shrink-to-fit shifts */
    .hero__content{
      position: absolute;
      top: 45%;
      left: clamp(16px, 5vw, 80px);
      transform: translateY(-50%);
      width: min(92vw, 720px);     /* fixed, responsive box width */
      box-sizing: border-box;
      padding: 0;                  /* avoid doubling left offset with padding */
      margin: 0;
      text-align: left;
      opacity: 0;
      transition: opacity var(--hero-fade) ease;
      z-index: 2;
      text-transform: uppercase;
    }
    .hero__content.visible{ opacity:1; }
        /* When content is flagged visible, its children should be visible too */
        .hero__content.visible .benefit,
        .hero__content.visible .cta { 
          opacity: 1; 
          transition: opacity var(--hero-fade, 1000ms) ease;
        }
    .hero__content.no-t{ transition:none !important; }


  h1{
    margin:0 0 1rem 0;
    font-weight:600; line-height:1.02;
    
    font-size: clamp(1.8rem, 4vw + 0.5rem, 3rem);
    
    letter-spacing: .01em;
    text-wrap: balance;
    color: #111;
    
  }

  .benefit{
    margin:0 0 1.25rem 0;
    font-weight:900; line-height:1.2;
    font-size: clamp(1rem, 0.6rem + 1vw, 1.5rem); /* scales like CTA */
  }
  .benefit .tag{
    display:inline-block; 
    background:rgba(255,255,255,0.8); /*#ffd400; */
    color:#111;
    padding:.35rem .55rem; border-radius:2px;
  }

  .cta{
    color:#fff; text-decoration:none; font-weight:400; background-color:#3fa9f5;
    letter-spacing:.02em;
    font-size: clamp(.8rem, 0.4rem + 1vw, 1rem);
    padding:.35rem .55rem; border-radius:2px;
  }

  /* Arrows & dots */
  .hero__nav{
    position:absolute; inset:0; z-index:3; pointer-events:none;
  }
  .arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:999px;
    display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.35);
    border:none; pointer-events:auto; cursor:pointer;
  }
  .arrow:hover{ background:rgba(0,0,0,.55); }
  .arrow.prev{ left:8px; }
  .arrow.next{ right:8px; }
  .dots{
    position:absolute; left:0; right:0; bottom:16px;
    display:flex; gap:10px; justify-content:center;
    pointer-events:auto;
  }
  .dot{
    width:10px; height:10px; border-radius:50%;
    background:#cfcfcf; opacity:.5; border:none; cursor:pointer;
  }
  .dot.is-active{ opacity:1; background:#fff; }

  /* Section: intro band */
  .intro{
    background: #232323;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 5vw, 80px);
    /*
    text-align:center;
    */
    background-image: radial-gradient(1200px 300px at 50% 0%, rgba(255,255,255,.06), transparent);
  }
  .intro h2{
    margin:0 0 1.2rem 0; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    font-weight:200;
  }
  .intro p, .intro li{
    /*
    margin:0 auto; 
    */
    max-width: 880px; color:#d6d6d6;
    font-size: clamp(.95rem, .75rem + .7vw, 1.1rem); line-height:1.6;
  }
  
  
  /* Section: INTRO CASE studies */
  .intro-case{
    background: #fcfcfc;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 5vw, 80px);
    /*
    text-align:center;
    background-image: radial-gradient(1200px 300px at 50% 0%, rgba(255,255,255,.06), transparent);
    */
  }
  .intro-case label, .intro-case h1, .intro-case h2, .intro-case h3, .intro-case h4, .intro-case p, .intro-case li, .intro-case label {color: #222;}
  .intro-case h2{
    margin:4rem 0 1.2rem 0; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    font-weight:200;
  }
  .intro-case p, .intro-case li{
    /*
    margin:0 auto; 
    */
    max-width: 880px; 
    font-size: clamp(.95rem, .75rem + .7vw, 1.1rem); line-height:1.6;
  }
  
  .intro-case img {
      max-width: 100%;
      padding-top: 2rem;
  }
  
  

  /* Section: capabilities */
  .capabilities{
    background:#071018 url('') center/cover no-repeat;
    padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 80px);
  }
  .cards{
    display:grid; gap: clamp(12px, 2vw, 24px);
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-top: 4rem;
    text-align: left;
  }
  
  .cards2C {
    display: grid; 
    gap: clamp(12px, 2vw, 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4rem;
    text-align: center;
  }
  
  .cards2L {
    display: grid; 
    gap: clamp(12px, 2vw, 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4rem;
    text-align: left;
  }
  
  .cards3C {
    display: grid; 
    gap: clamp(12px, 2vw, 24px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4rem;
    text-align: center;
  }
  
  .cards3L {
    display: grid; 
    gap: clamp(12px, 2vw, 24px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4rem;
    text-align: left;
  }
  .card{
    /*
    border:1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    border-radius:14px; overflow:hidden;
    */
    padding:16px;
    display:grid; gap:10px; align-content:start;
    transition: background .5s ease, color .5s ease, border-color .5s ease;
  }
  
  .cards3L .card div{
      background-position: center center;
      background-size: cover;
      aspect-ratio: 1.6 / 1;
      overflow: hidden;
  }
  
  .cards2L .card div{
      background-position: center center;
      background-size: cover;
      aspect-ratio: 16 / 9;
      overflow: hidden;
  }
  
  .card .bgimg-logo{
      max-height: 35%;
      margin: 20% 5%;
      width: inherit;
  }
  
  @media (max-width: 900px){
    .cards, .cards3L, .cards2L { grid-template-columns: 1fr; }
    .card .bgimg-logo{
        max-height: 15%;
        margin: 15% 10%;
        width: 40%;
    }
    
      body:not(.is-loaded) .hero .hero__slide,
    /*  body:not(.is-loaded) .hero h1,
    */  body:not(.is-loaded) .logo__case-study,
      body:not(.is-loaded) .stats { opacity: 1; }
    }

  
  .card h3{ margin:.2rem 0; font-size: clamp(1.05rem, .6rem + 1vw, 1.4rem); }
  .card p{ margin:0; color:#cfd3d8; font-size:.95rem; line-height:1.5; }
  .card:hover, .card.is-hover{
    background: white; color:#000; border-color:#fff;
  }
  .card:hover p, .card.is-hover p{ color:#111; }
  
  .card img {width:100%;}
  
  .card-link {
      display: block;
      color: inherit;          /* inherit text color */
      text-decoration: none;   /* remove underline */
    }
    
    .card-link:hover {
      cursor: pointer;
    }


  /* Respect user preference */
  @media (prefers-reduced-motion: reduce){
    .hero__slide, .hero__content{ transition:none !important; }
  }
  /* kill the background image on mobile */ 
  @media (max-width:640px), (hover:none) and (pointer:coarse){
    .hero__nav button.arrow {display:none;}
    .mobile-hide{ display: none; }
  }
}

    .topnav ul {
    list-style: none;       /* remove bullets */
    margin: 0;
    padding: 0;
    display: flex;          /* horizontal layout */
    gap: 1rem;              /* spacing between items */
    }
    
    .topnav li {
    display: inline;        /* ensures inline flow */
        margin-right: 1rem;
    }
    
    .topnav a {
    text-decoration: none;
    color: #666;         /* matches surrounding text color */
    }
    
    .topnav a:hover {
    /*text-decoration: underline;*/
    color: black;
    }
    
    input, textarea {
        width: clamp(300px, 50%, 600px);
        margin: 1rem 0;
        padding: 0.5rem;
        font-size: 1rem;
    }
    input::placeholder, textarea::placeholder {
        color: #ccc; 
        font-family: sans-serif;
    }
    input[type="checkbox"] {
        width: 1%;
        margin: 1rem 0.5rem 1rem 0;
        padding: 0.5rem;
    }
    button[type="submit"] {
        border-radius: 24px;
        padding: .5rem 1.5rem;
        font-size: 1rem;
        margin: .5rem 0;
        background-color: #3fa9f5;
        color: white;
        border: none;
    }




/* ---------- Desktop nav & active state ---------- */
.topnav { position: relative; }
.menu {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0; padding: 0;
  align-items: center;
}
.menu__item { position: relative; }
.menu__link {
  text-decoration: none;
  color: #666;
  cursor: pointer;
}
.menu__link:hover { color: black; }
.menu__item.is-active > .menu__link,
.menu__item.is-active > span.menu__link {
  font-weight: 700;
  color: black;
  cursor: default;
}

    /* Increase clickable/hoverable area of top-level links */
    .menu__item > .menu__link,
    .menu__item > span.menu__link {
      display: inline-block;
      padding: .4rem .6rem;   /* bigger target */
      border-radius: 6px;
    }
    
    /* Open submenu when the LI is hovered or focused, not just the link */
    .menu__item.has-sub:hover .submenu,
    .menu__item.has-sub:focus-within .submenu {
      display: block;
    }

    /* Add an 8px buffer between parent and submenu so pointer doesn't fall through */
    .menu__item.has-sub { position: relative; }
    .menu__item.has-sub::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      top: 100%;
      height: 8px;            /* bridge height */
    }
    
    /* Position submenu below that bridge */
    .submenu {
      top: calc(100% + 8px);  /* was 100% + 8px already; keep in sync with ::after height */
    }
    
    /* Slightly larger submenu padding so there's room to enter and move */
    .submenu {
      padding: .6rem 0;
    }
    .submenu__link {
      padding: .6rem 1rem;    /* taller rows = easier to hover */
    }



/* Dropdowns (desktop) */
.has-sub > .menu__link { position: relative; }
.has-sub > .menu__link::after {
  content: '▾'; font-size: .8em; margin-left: .25rem;
}
.submenu {
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 200px;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(140%) blur(6px);
  border-radius: 8px;
  padding: .5rem 0;
  box-shadow: 0 6px 30px rgba(0,0,0,.12);
  list-style: none;
  display: none;
  z-index: 60;
}
.has-sub:hover .submenu { display: block; }
.submenu li { padding: 0; margin: 0; }
.submenu__link {
  display: block;
  padding: .5rem .85rem;
  text-decoration: none;
  color: #333;
  font-size: .95rem;
}
.submenu__link:hover { background: #f5f5f5; color: #000; }

/* Lock icon aligns */
.menu__lock .menu__link { display: inline-flex; align-items: center; }

/* ---------- Mobile: hamburger + overlay ---------- */
.hamburger {
  display: none;
  background: transparent;
  border: 0; padding: .25rem; margin: 0 0 0 .5rem;
  cursor: pointer;
}
.hamburger__bar {
  display: block; width: 26px; height: 2px; margin: 5px 0;
  background: #111;
}

/* Fullscreen overlay */
.mobile-nav[hidden] { display: none !important; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}
.mobile-nav__panel {
  position: absolute; inset: 0 0 0 0;
  background: #fff;
  color: #111;
  padding: clamp(16px, 6vw, 40px);
  overflow-y: auto;
}
.mobile-nav__close {
  position: absolute; top: 12px; right: 16px;
  font-size: 2rem; line-height: 1; border: 0; background: transparent; cursor: pointer;
}

/* Mobile menu blocks */
.mobile-menu { list-style: none; margin: 48px 0 0; padding: 0; }
.mobile-menu__group { border-bottom: 1px solid #eee; }
.mobile-menu__parent {
  display: block; width: 100%;
  text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.2rem; padding: 16px 0; color: #111;
}
.mobile-submenu { list-style: none; margin: 0 0 12px; padding: 0 0 12px 0; display: none; }
.mobile-menu__group.is-open .mobile-submenu { display: block; }
.mobile-submenu a {
  display: block; padding: 10px 0; text-decoration: none; color: #333;
}
.mobile-submenu a:hover { color: #000; }
.mobile-menu__single { display: block; padding: 16px 0; text-decoration: none; color: #333; }
.mobile-menu__single.is-active { font-weight: 700; color: #000; }



/* Highlight active top-level or sub-link */
.menu__item.is-active > .menu__link {
  font-weight: 700;
  color: black;
}
.submenu__link.is-active {
  font-weight: 600;
  color: black;
}


/* ---------- Responsive rules ---------- */
@media (max-width: 900px) {
  .menu { display: none; }            /* hide desktop menu */
  .hamburger { display: inline-block; } /* show hamburger */
}


/* ---------- hover image swap ---------- */
.logos img {
  display: block;
  width: 100%;
  height: auto;
  content: url("/img3/logos.png");
}
.logos:hover img,
.logos.is-hover img {
  content: url("/img3/logos-color.png");
}
.sssddd img {
  content: url("/img3/sssddd.png");
}
.sssddd:hover img,
.sssddd.is-hover img {
  content: url("/img3/sssddd-color.png");
}

body::after {
  content: url("/img3/logos-color.png");
  content: url("/img3/sssddd-color.png");
  display: none;
}


/******** MOBILE MENU STYLE *********/

/* Make parent links look identical to parent buttons */
.mobile-menu__parent {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 1.125rem;      /* large label size you’re using */
  font-weight: 600;
  padding: 0.875rem 0;      /* match your current spacing */
  border: 0;
  background: none;
}

.mobile-menu__parent--link {
  text-decoration: none;
  color: inherit;
}

/* Caret for accordion parents only */
.mobile-menu__parent[data-accordion] {
  position: relative;
  padding-right: 1.5rem;
}
.mobile-menu__parent[data-accordion]::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg); /* pointing right */
  transition: transform 150ms ease;
}
.mobile-menu__parent[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg);  /* pointing down */
}

/* Optional: subtle dividers already in your design */
.mobile-menu__group + .mobile-menu__group { border-top: 1px solid rgba(0,0,0,.08); }
.mobile-submenu { padding: 0.25rem 0 0.75rem; }
.mobile-submenu a { display:block; padding: .5rem 0; }

/******************* CASE STUDIES ****************/

/* Case-study logo — block-level, no inline text flow */
.logo__case-study {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 100px;
  margin: 0 0 2rem 0;
}

.content__case-study{
    background-color: #dedede;
    color: #979797;
}

.stats {
  display: flex;
  gap: .8rem;                /* space between boxes */
  margin-top: 2.5rem;
  text-transform: none;
}

.stat {
  flex: 0 0 auto;           /* prevent shrinking */
  width: 120px;             /* fixed width for alignment */
  max-width: 30%;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  line-height: 1.3;
  font-size: clamp(.7rem, 2.5vw + 0.25rem, 1rem);
}

.stat span {
/*  display: block; */
  font-size: clamp(1.8rem, 4vw + 0.5rem, 2.2rem);
}

.preach {
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.5;
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
    font-family: serif;
    font-style: italic;
}

.preacher {
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
    text-align: center;
    font-family: serif;
    margin: 1rem auto 0;
}
/*
.preach{
    font-size: 3vw;
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
    font-family: serif;
    font-style: italic;
}
.preacher{
    text-align: center;
    font-family: serif;
    font-size: 2vw;
    margin: 2rem auto 0;
}
*/

/************** PRINT STYLE *************/

@media print {

  /* Force a page break before or after an element */
  .page-break-before {
    page-break-before: always;
    break-before: page; /* modern syntax */
    padding-top: 4rem;
  }

  .page-break-after {
    page-break-after: always;
    break-after: page; /* modern syntax */
  }

  /* Hide elements during printing */
  .casper {
    display: none !important;
    visibility: hidden;
  }
  
  .intro-case h2{
      margin:inherit;
  }
  .tophat{
      margin:0;
  }
  
  .logo {height: 20px;}
  .site-header {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  
  .preach{
      page-break-before: always;
    break-before: page; /* modern syntax */
    margin: 2rem auto 0;
    color: black;
  }
  .preacher{
      color: black;
      margin: 1rem auto 0;
  }
  
  .intro-case img {
      max-width: 90%;
      padding-top: 2rem;
  }
  
  .stats {
      border-top: 1px solid #ccc;
  }
}

/***** FADE IN Hero *****/

/* Initial state for all elements * /
.hero .hero__slide, 
.hero h1,
.logo__case-study,
.stats, .stat1, .stat2, .stat3,
.benefit,
.cta { opacity: 0; }

/* Initial state only before we add .is-loaded * /
body:not(.is-loaded) .hero .hero__slide,
body:not(.is-loaded) .hero h1,
body:not(.is-loaded) .logo__case-study,
body:not(.is-loaded) .stats,
body:not(.is-loaded) .benefit,
body:not(.is-loaded) .cta { opacity: 0; }

/* Hide hero elements only while body has .preload */
body.preload .hero .hero__slide,
body.preload .h1__case-study,
body.preload .logo__case-study,
body.preload .stats,
body.preload .benefit,
body.preload .cta {
  /*
  opacity: 0;
  */
}

body.preload .h1__case-study,
body.preload .logo__case-study {
    opacity: 0;
}



/* 0) Hero background: 0.5s delay, 1.0s duration */
    body.is-loaded .hero .hero__slide.is-active {
      animation: mm-fade-in 1500ms ease forwards;
      animation-delay: 50ms;
    }

/* 1) Case-study logo: .2s delay, .35s duration */
    body.is-loaded .logo__case-study{
      animation: mm-fade-drop 500ms ease forwards;
      animation-delay: 200ms;
    }
/* 2. H1 just fade .5s delay, .5s animation */    
    body.is-loaded .h1__case-study{
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 500ms;
    }

/* 2) H1: 1.5s delay, 0.5s duration * /
    body.is-loaded .hero h1 {
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 1500ms;
    }

/* 3) Case-study logo + stats: 2s delay, 0.5s duration */

    body.is-loaded .stats, 
    body.is-loaded .stat1, 
    body.is-loaded .benefit{
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 1000ms; /* 2000ms; */
    }
    body.is-loaded .stat2{
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 1300ms; /* 2200ms; */
    }
    body.is-loaded .stat3{
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 1600ms; /* 2400ms; */
    }

    body.is-loaded .cta{
      animation: mm-fade-in-up 1000ms ease forwards;
      animation-delay: 2500ms;
    }

/* Shared fade-in animation */
@keyframes mm-fade-in { to { opacity: 1; } }

@keyframes mm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mm-fade-drop {
  from {
    opacity: 0;
    transform: translateY(-1rem);  /* start 1rem higher */
  }
  to {
    opacity: 1;
    transform: translateY(0);     /* end at natural position */
  }
}

@keyframes mm-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1rem);  /* start 1rem lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);     /* end at natural position */
  }
}



/* Accessibility: no motion for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hero .hero__slide,
  .hero h1,
  .logo__case-study,
  .stats,
  .benefit,
  .cta{
    opacity: 1 !important;
    animation: none !important;
  }
}



/********* Mobile fix *******/



/* Ensure only active slide is opaque in general (desktop+mobile) */
.hero__slide { opacity: 0; transition: opacity var(--hero-fade, 1000ms) ease; }
.hero__slide.is-active { opacity: 1; }



/******** disable hero build animation for a bit *********/

/* === Launch mode: NO ANIMATION === */

/* Keep only the active slide visible, but no fades */
.hero__slide { opacity: 0; transition: none !important; }
.hero__slide.is-active { opacity: 1; }

/* Make text/content instantly visible and static */
.hero__content,
/*.logo__case-study,
.stats,
.stat1, .stat2, .stat3, */
.benefit,
.cta {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Optional: keep reduced-motion rule; it won’t hurt */

/* --- Hotfix: disable hero H1 animation/blink everywhere --- */
.hero h1:not(.h1__case-study) {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Nuke any timeline-triggered animation on H1 */
body.is-loaded .hero h1 { 
    /*
  animation: none !important; 
  */
}


/* Hotfix - Pin hero copy near the top on all screens */

.hero__content{
  top: calc(var(--header-h, 64px) + 64px) !important;  /* below header */
  transform: none !important;                           /* undo translateY(-50%) */
  bottom: auto !important;
}

/* Use stable viewport height to avoid iOS/URL-bar jumps */
.hero{ height: 100svh; }


/*** magic ***/
.stat1, .stat2, .stat3, .logo__case-study, .h1__case-study {
    /*
  animation: statsFadein 500ms ease forwards;
  animation-delay: 500ms;
  */
  opacity: 0;
}

/* */

@keyframes statsFadeIn {
  from {
    opacity: 0;
 /*    transform: translateY(1rem);
* /  }
  to {
    opacity: 1;
/*    transform: translateY(0);
* /  }
}
/* */