/* ==========================================================================
     The before and after compare slider (_partials/esco-slider.html): a live
     replica of a client's old and new sites, with the client's own colours and
     type. Linked only from pages whose body contains the slider, so no other page
     carries the client's name, even in its styles. build_pages.py decides.
     ========================================================================== */

  /* The client's own faces for the replica, self-hosted from /assets/fonts/ (SIL Open
     Font License), so they load only on the pages that show the slider. */
  /* Barlow 400, latin-ext */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/barlow-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow 400, latin */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/barlow-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Barlow 500, latin-ext */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/barlow-500-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow 500, latin */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/barlow-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Barlow 600, latin-ext */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/barlow-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow 600, latin */
  @font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/barlow-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Barlow Condensed 400, latin-ext */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow Condensed 400, latin */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Barlow Condensed 500, latin-ext */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-500-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow Condensed 500, latin */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Barlow Condensed 600, latin-ext */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* Barlow Condensed 600, latin */
  @font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/barlow-condensed-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --esco-red: #db0000;
    --new-dark: #1a1a1a;
    --new-darker: #0f0f0f;
    --design-w: 1440;
    --design-h: 900;
  }


  .es-viewport {
    position: relative;
    aspect-ratio: 1440 / 900;
    overflow: hidden;
    border: 0;
    /* The system's notch, top right (design system v1). */
    clip-path: polygon(0 0, calc(100% - var(--notch, 28px)) 0, 100% var(--notch, 28px), 100% 100%, 0 100%);
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: #EDEFF4;
  }

  .es-pane { position: absolute; inset: 0; overflow: hidden; }

  .es-page {
    width: calc(var(--design-w) * 1px);
    height: calc(var(--design-h) * 1px);
    transform: scale(var(--es-scale, 1));
    transform-origin: top left;
    pointer-events: none;
    font-family: 'Barlow', sans-serif;
    line-height: 1.6;
  }

  .es-pane--before {
    clip-path: inset(0 calc(100% - var(--es-pos, 50%)) 0 0);
    z-index: 2;
  }

  .old-topbar { height: 34px; background: #3B3B3B; display: flex; align-items: center; justify-content: flex-end; gap: 28px; padding: 0 36px; color: #EDEDED; font-size: 13px; }
  .old-nav { height: 110px; background: #D8D8D8; display: flex; align-items: center; padding: 0 36px; gap: 38px; }
  .old-nav__logo { height: 82px; width: auto; margin-right: 10px; }
  .old-nav__links { display: flex; gap: 30px; flex: 1; font-size: 15px; color: #2E2E2E; letter-spacing: 0.03em; }
  .old-btn { background: var(--esco-red); color: #fff; font-size: 14px; letter-spacing: 0.06em; padding: 16px 26px; }
  .old-announce { height: 190px; background: #7A7A7A url('/assets/img/esco/old-announce-bg.webp') center / cover no-repeat; display: flex; align-items: center; padding: 0 36px; position: relative; overflow: hidden; }
  .old-announce__text { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 27px; line-height: 1.4; color: #fff; text-transform: uppercase; max-width: 640px; }
  /* The product shot this band held is not in the repo, and the URL was relative so it
     resolved against the page and 404'd on every page carrying the replica. The box
     is kept; restore the image as /assets/img/esco-old-product.png when it exists. */
  .old-announce__product { position: absolute; right: 110px; top: 4px; width: 340px; height: 210px; }
  .old-announce__btn { position: absolute; right: 200px; top: 76px; background: var(--esco-red); color: #fff; font-size: 14px; letter-spacing: 0.08em; padding: 14px 36px; text-transform: uppercase; }
  .old-hero { height: 366px; background: #5E5A52; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; overflow: hidden; }
  .old-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: oldHeroFade 18s infinite; }
  .old-hero__slide:nth-child(1) { animation-delay: 0s; }
  .old-hero__slide:nth-child(2) { animation-delay: 6s; }
  .old-hero__slide:nth-child(3) { animation-delay: 12s; }
  @keyframes oldHeroFade { 0% { opacity: 0; } 7% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
  .old-hero::after { content: ''; position: absolute; inset: 0; background: rgba(60, 55, 48, 0.3); }
  .old-hero__headline { position: relative; z-index: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 36px; line-height: 1.4; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
  .old-hero__btn { position: relative; z-index: 1; background: var(--esco-red); color: #fff; font-size: 14px; letter-spacing: 0.08em; padding: 15px 32px; border-radius: 4px; text-transform: uppercase; }
  .old-products { height: 200px; background: #fff; display: flex; align-items: flex-start; padding: 26px 80px 0; gap: 60px; }
  .old-product { flex: 1; text-align: center; }
  .old-product img { height: 88px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px; }
  .old-product h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: 0.04em; color: #2E2E2E; text-transform: uppercase; margin-bottom: 6px; }
  .old-product p { font-size: 13px; line-height: 1.5; color: #666; }

  .new-page { background: var(--new-darker); }
  .new-topbar { height: 58px; background: var(--new-dark); display: flex; align-items: center; gap: 22px; padding: 0 40px; color: #D9D9D9; font-size: 13px; }
  .new-topbar__social { display: flex; gap: 14px; color: #A8A8A8; font-size: 12px; }
  .new-topbar__search { margin-left: auto; display: flex; align-items: center; }
  .new-topbar__input { width: 230px; height: 34px; background: #F2F2F2; color: #8A8A8A; font-size: 12px; display: flex; align-items: center; padding: 0 12px; }
  .new-topbar__searchbtn { height: 34px; background: var(--esco-red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 0.1em; display: flex; align-items: center; padding: 0 18px; text-transform: uppercase; }
  .new-nav { height: 96px; background: var(--new-darker); display: flex; align-items: center; gap: 34px; padding: 0 40px; }
  .new-nav__logo { height: 48px; width: auto; margin-right: 16px; }
  .new-nav__links { display: flex; gap: 28px; flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 0.08em; color: #EDEDED; text-transform: uppercase; }
  .new-btn { background: var(--esco-red); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.1em; padding: 15px 26px; text-transform: uppercase; }
  .new-hero { position: relative; height: 496px; overflow: hidden; background: #23282D; }
  .new-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .new-hero__video { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1440px; height: 810px; border: 0; object-fit: cover; }
  .new-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,14,0.75) 0%, rgba(10,12,14,0.4) 55%, rgba(10,12,14,0.12) 100%); }
  .new-hero__content { position: relative; z-index: 1; padding: 52px 40px 0 64px; max-width: 780px; }
  .new-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(219, 0, 0, 0.22); color: #ff5348; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.18em; padding: 9px 18px; text-transform: uppercase; margin-bottom: 20px; }
  .new-hero__badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--esco-red); }
  .new-hero__headline { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 64px; line-height: 1.05; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
  .new-hero__body { font-size: 17px; line-height: 1.6; color: #E4E6E8; max-width: 560px; margin-bottom: 28px; }
  .new-hero__ctas { display: flex; gap: 16px; }
  .new-hero__cta { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 28px; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
  .new-hero__cta--primary { background: var(--esco-red); }
  .new-hero__cta--ghost { border: 1px solid rgba(255,255,255,0.55); }
  .new-ticker { height: 50px; background: var(--esco-red); overflow: hidden; display: flex; align-items: center; }
  .new-ticker__track { display: flex; gap: 56px; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: 0.14em; color: #fff; text-transform: uppercase; animation: ticker 28s linear infinite; padding-left: 100%; }
  .new-ticker__item { display: inline-flex; align-items: center; gap: 56px; }
  .new-ticker__item::after { content: '◆'; font-size: 9px; }
  @keyframes ticker { to { transform: translateX(-100%); } }
  .new-proof { height: 80px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 90px; font-weight: 500; font-size: 15px; color: #222; }
  .new-proof__item { display: inline-flex; align-items: center; gap: 10px; }
  .new-proof__item::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--esco-red); }
  .new-intro { height: 120px; background: #f7f8f9; padding: 24px 64px 0; }
  .new-intro__eyebrow { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.16em; color: var(--esco-red); text-transform: uppercase; margin-bottom: 6px; }
  .new-intro__line { width: 48px; height: 3px; background: var(--esco-red); margin-bottom: 12px; }
  .new-intro__heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 34px; line-height: 1.1; color: #222; text-transform: uppercase; }

  .es-divider { position: absolute; top: 0; bottom: 0; left: var(--es-pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); pointer-events: none; z-index: 4; }
  .es-handle { position: absolute; top: 50%; left: var(--es-pos, 50%); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; gap: 3px; pointer-events: none; z-index: 5; }
  /* EchoSurge's own labels over the replica: 14px mono, the floor for any text. */
  .es-tag { position: absolute; top: 14px; padding: 4px 10px; font-family: var(--f-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; transition: opacity 0.2s ease; z-index: 4; }
  .es-tag--before { left: 14px; background: var(--ink); color: #fff; }
  .es-tag--after { right: 36px; background: var(--blue); color: #fff; }
  .es-viewport[data-hide-before] .es-tag--before { opacity: 0; }
  .es-viewport[data-hide-after] .es-tag--after { opacity: 0; }
  .es-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 6; }
  .es-range:focus-visible ~ .es-handle { outline: 3px solid var(--blue); outline-offset: 2px; }