:root{
    --red:#e3161c;
    --red-dark:#b8111a;
    --red-light:#ff3b3f;
    --ink:#111214;
    --ink-2:#1c1e22;
    --charcoal:#2a2d33;
    --grey:#6b7280;
    --grey-2:#9aa0aa;
    --line:#e7e8ec;
    --paper:#ffffff;
    --paper-2:#f6f7f9;
    --paper-3:#eef0f3;
    --head:'Saira Condensed', 'Arial Narrow', sans-serif;
    --body:'Inter', system-ui, sans-serif;
    --shadow:0 18px 45px -20px rgba(17,18,20,.35);
    --shadow-red:0 18px 40px -14px rgba(227,22,28,.55);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    font-size:18px;
    overflow-x:hidden;
    cursor:url('../assets/images/cursor-32.png') 6 2, auto;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3,h4{font-family:var(--head);font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:.5px}
  ::selection{background:var(--red);color:#fff}
  .wrap{width:min(1760px,96%);margin:0 auto}
  section{position:relative}

  /* ============ MAPLE LEAF CURSOR ============ */
  /* Native CSS cursor — works correctly on all zoom/DPR levels, no JS lag or offset */
  a,button,select,input,textarea,label,
  .cat,.serv,.tcard,.post,.brand,.icon-btn,.prod,.wish,.gal-item{
    cursor:url('../assets/images/cursor-44.png') 8 2, pointer;
  }
  @media (hover:none){body,a,button,select,input,textarea{cursor:auto}}

  /* white leaf on dark / black sections so the cursor stays visible */
  .hero,.dark,.gallery,footer,.cta-strip{cursor:url('../assets/images/cursor-white-32.png') 6 2, auto}
  :is(.hero,.dark,.gallery,footer,.cta-strip) :is(a,button,select,input,textarea,label,.btn,.icon-btn,.brand,.gal-item,.socials a){
    cursor:url('../assets/images/cursor-white-44.png') 8 2, pointer;
  }
  /* exception: white search panel inside the dark hero keeps the normal leaf */
  .hero .searchbar .panel{cursor:url('../assets/images/cursor-32.png') 6 2, auto}
  .hero .searchbar .panel :is(select,button,label,input){cursor:url('../assets/images/cursor-44.png') 8 2, pointer}

  /* offset for anchored sections under the fixed header */
  section[id]{scroll-margin-top:96px}

  /* ============ TOP BAR ============ */
  .topbar{background:var(--ink);color:#cfd2d8;font-size:12.5px;letter-spacing:.3px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
  .topbar nav{display:flex;gap:22px}
  .topbar nav a{position:relative;transition:color .25s}
  .topbar nav a:hover{color:#fff}
  .topbar nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--red);transition:width .25s}
  .topbar nav a:hover::after{width:100%}
  .topbar .lang{display:flex;align-items:center;gap:8px;color:#8b9098}

  /* ============ HEADER ============ */
  /* ==================================================
   FIRST STOP CUSTOM HEADER
   Fully scoped to avoid Elementor conflicts
================================================== */

#siteNav.fst-site-header {
    position: fixed;
    z-index: 9999;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    border-bottom: 1px solid transparent;

    background: transparent;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease;
}


/* ==================================================
   HEADER INNER WRAPPER
================================================== */

#siteNav.fst-site-header .fst-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    width: calc(100% - 80px);
    max-width: 1740px;
    height: 88px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* ==================================================
   SOLID HEADER
   Inner pages and scrolled homepage
================================================== */

#siteNav.fst-site-header.fst-inner-header,
#siteNav.fst-site-header.scrolled {
    background: rgb(0 0 0 / 96%);
    box-shadow:
        0 10px 30px -18px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ==================================================
   LOGO
================================================== */

#siteNav.fst-site-header .fst-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;

    max-width: 285px;

    color: #111827;
    text-decoration: none;
}

#siteNav.fst-site-header .fst-logo-image {
    display: block;

    width: auto;
    max-width: 285px;
    height: 68px;

    object-fit: contain;
}

#siteNav.fst-site-header .fst-logo-text {
    color: #111827;

    font-family: "Saira Condensed", sans-serif;
    font-size: 27px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}


/* ==================================================
   NAVIGATION
================================================== */

#siteNav.fst-site-header .fst-navlinks {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#siteNav.fst-site-header .fst-navlinks a {
    position: relative;
    display: inline-flex;
    padding: 5px 0;
    color: #fff;
    font-family: "Saira Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

#siteNav.fst-site-header .fst-navlinks a::after {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    width: 0;
    height: 2px;

    margin: auto;

    background: #c50f1b;

    content: "";

    transition: width 0.25s ease;
}

#siteNav.fst-site-header .fst-navlinks a:hover {
    color: #c50f1b;
}

#siteNav.fst-site-header .fst-navlinks a:hover::after {
    width: 100%;
}


/* ==================================================
   TRANSPARENT HOMEPAGE HEADER
================================================== */

#siteNav.fst-site-header.fst-home-header:not(.scrolled) {
    background: transparent;
    box-shadow: none;
}

#siteNav.fst-site-header.fst-home-header:not(.scrolled)
.fst-navlinks a {
    color: #ffffff;
}

#siteNav.fst-site-header.fst-home-header:not(.scrolled)
.fst-navlinks a:hover {
    color: #ff3c45;
}


/* ==================================================
   RIGHT-SIDE ICONS
================================================== */

#siteNav.fst-site-header .fst-nav-icons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

#siteNav.fst-site-header .fst-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 50px;

    margin: 0;
    padding: 0;

    border: 1px solid #e3e6eb;
    border-radius: 13px;

    background: #ffffff;
    color: #172033;

    box-shadow:
        0 10px 22px rgba(197, 15, 27, 0.12);

    cursor: pointer;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#siteNav.fst-site-header .fst-icon-btn svg {
    display: block;

    width: 20px;
    height: 20px;
}

#siteNav.fst-site-header .fst-icon-btn:hover {
    border-color: #c50f1b;

    background: #c50f1b;
    color: #ffffff;

    transform: translateY(-2px);
}


/* Transparent header icons */
#siteNav.fst-site-header.fst-home-header:not(.scrolled)
.fst-icon-btn {
    border-color: rgba(255, 255, 255, 0.32);

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    box-shadow: none;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#siteNav.fst-site-header.fst-home-header:not(.scrolled)
.fst-icon-btn:hover {
    border-color: #c50f1b;

    background: #c50f1b;
    color: #ffffff;
}


/* ==================================================
   GET A QUOTE BUTTON
================================================== */

#siteNav.fst-site-header .fst-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 146px;
    min-height: 54px;

    padding: 12px 23px;

    border: 1px solid #c50f1b;
    border-radius: 13px;

    background: #c50f1b;
    color: #ffffff;

    box-shadow:
        0 12px 23px rgba(197, 15, 27, 0.24);

    font-family: "Saira Condensed", sans-serif;
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#siteNav.fst-site-header .fst-header-cta:hover {
    border-color: #9f0a14;

    background: #9f0a14;
    color: #ffffff;

    box-shadow:
        0 15px 26px rgba(197, 15, 27, 0.3);

    transform: translateY(-2px);
}


/* ==================================================
   INNER PAGE FIXED-HEADER SPACING
================================================== */

.fst-header-spacer {
    display: block;

    width: 100%;
    height: 58px;
}


/* ==================================================
   BURGER
================================================== */

#siteNav.fst-site-header .fst-burger {
    display: none;
}


/* ==================================================
   LAPTOP
================================================== */

@media (max-width: 1250px) {

    #siteNav.fst-site-header .fst-header-wrap {
        width: calc(100% - 40px);
        gap: 22px;
    }

    #siteNav.fst-site-header .fst-logo {
        max-width: 235px;
    }

    #siteNav.fst-site-header .fst-logo-image {
        max-width: 235px;
        height: 60px;
    }

    #siteNav.fst-site-header .fst-navlinks {
        gap: 24px;
    }

    #siteNav.fst-site-header .fst-navlinks a {
        font-size: 17px;
    }

    #siteNav.fst-site-header .fst-icon-btn {
        width: 48px;
    }
}


/* ==================================================
   TABLET AND MOBILE MENU
================================================== */

@media (max-width: 991px) {

    #siteNav.fst-site-header .fst-header-wrap {
        position: relative;

        width: calc(100% - 30px);
        height: 78px;
    }

    .fst-header-spacer {
        height: 78px;
    }

    #siteNav.fst-site-header .fst-logo {
        max-width: 215px;
    }

    #siteNav.fst-site-header .fst-logo-image {
        max-width: 215px;
        height: 55px;
    }

    #siteNav.fst-site-header .fst-navlinks {
        position: absolute;

        top: calc(100% + 1px);
        right: 0;
        left: 0;

        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 12px;

        border: 1px solid #e3e6eb;
        border-radius: 0 0 12px 12px;

        background: #ffffff;

        box-shadow:
            0 18px 30px rgba(0, 0, 0, 0.14);
    }

    #siteNav.fst-site-header.is-menu-open
    .fst-navlinks {
        display: flex;
    }

    #siteNav.fst-site-header .fst-navlinks a,
    #siteNav.fst-site-header.fst-home-header:not(.scrolled)
    .fst-navlinks a {
        width: 100%;

        padding: 13px 12px;

        border-bottom: 1px solid #edf0f4;

        color: #172033;

        font-size: 17px;
    }

    #siteNav.fst-site-header .fst-navlinks a:last-child {
        border-bottom: 0;
    }

    #siteNav.fst-site-header .fst-navlinks a::after {
        display: none;
    }

    #siteNav.fst-site-header .fst-burger {
        display: inline-flex;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    #siteNav.fst-site-header .fst-header-wrap {
        width: calc(100% - 22px);
        height: 72px;
    }

    .fst-header-spacer {
        height: 72px;
    }

    #siteNav.fst-site-header .fst-logo {
        max-width: 180px;
    }

    #siteNav.fst-site-header .fst-logo-image {
        max-width: 180px;
        height: 49px;
    }

    #siteNav.fst-site-header .fst-nav-icons {
        gap: 7px;
    }

    #siteNav.fst-site-header .fst-icon-btn {
        width: 43px;
        height: 43px;

        border-radius: 10px;
    }

    #siteNav.fst-site-header .fst-nav-icons
    > .fst-icon-btn:first-child,
    #siteNav.fst-site-header .fst-nav-icons
    > .fst-icon-btn:nth-child(2) {
        display: none;
    }

    #siteNav.fst-site-header .fst-header-cta {
        display: none;
    }
}

  /* ============ LOGO ============ */
  .logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
  .logo-img{height:72px;width:auto;display:block}
  header.nav:not(.scrolled) .logo-onlight{display:none}
  header.nav.scrolled .logo-onvideo{display:none}
  .foot-logo{display:inline-block}
  .foot-logo-img{height:82px;width:auto;display:block;margin-bottom:4px;}
  .logo .leaf{width:46px;height:46px;flex-shrink:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
  .logo:hover .leaf{transform:rotate(-8deg) scale(1.06)}
  .logo .mark{display:flex;flex-direction:column;line-height:.82}
  .logo .l1{font-family:var(--head);font-style:italic;font-weight:800;font-size:23px;letter-spacing:.5px;color:var(--charcoal)}
  .logo .l2{font-family:var(--head);font-style:italic;font-weight:800;font-size:23px;letter-spacing:.5px;color:var(--red);display:flex;align-items:center;gap:2px}
  .logo .l2 .tire-o{display:inline-block;width:16px;height:16px;border-radius:50%;border:3px solid var(--red);position:relative;margin:0 1px}
  .logo .l2 .tire-o::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid var(--red)}
  .logo .sub{font-family:var(--head);font-style:italic;font-weight:700;font-size:10.5px;letter-spacing:3px;color:var(--grey);margin-top:2px}
  /* white variant */
  .logo.on-dark .l1{color:#fff}
  .logo.on-dark .sub{color:#c4c8cf}

  /* ============ HERO ============ */
  .hero{background:radial-gradient(120% 130% at 80% 0%, #23262c 0%, #131417 55%, #0b0c0e 100%);color:#fff;overflow:hidden;min-height:100vh;min-height: 90vh;display:flex;align-items:center;padding: 100px 0 96px;}
  .hero-inner{max-width:1180px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero .wrap{position:relative;z-index:3;width:min(1760px,96%)}
  /* full-bleed background video */
  .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* dark overlay for text readability over the video */
  .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,10,12,.9) 0%,rgba(9,10,12,.62) 42%,rgba(9,10,12,.28) 100%),linear-gradient(0deg,rgba(9,10,12,.78) 0%,rgba(9,10,12,0) 40%)}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:1;filter:grayscale(.2)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:540px}
  .hero .eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--head);font-style:italic;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:16.5px;color:var(--red-light);margin-bottom:22px}
  .hero .eyebrow::before{content:"";width:34px;height:3px;background:var(--red);display:inline-block}
  .hero h1{font-size:clamp(54px,6.8vw,120px);font-weight:800;margin:0 0 34px}
  .hero h1 .out{color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.55)}
  .hero p.lead{margin:26px auto 34px;color:#c2c6ce;font-size:22px;line-height:1.6;max-width:660px;text-align:center}
  .hero-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
  .stripes{display:inline-flex;gap:5px;transform:skewX(-18deg)}
  .stripes i{width:9px;height:26px;display:block}
  .stripes i:nth-child(1){background:var(--red)}
  .stripes i:nth-child(2){background:#fff}
  .stripes i:nth-child(3){background:var(--red)}

  .btn{font-family:var(--head);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:16.5px;padding:13px 28px;border-radius:12px;display:inline-flex;align-items:center;gap:10px;transition:all .3s cubic-bezier(.6,.2,.1,1);border:2px solid transparent;position:relative;overflow:hidden}
  .btn svg{width:18px;height:18px;transition:transform .3s;position:relative;z-index:1}
  /* premium shine sweep on hover */
  .btn::before{content:"";position:absolute;top:0;left:-135%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
  .btn:hover::before{left:155%}
  .btn-red{background:var(--red-dark);color:#fff;box-shadow:0 10px 26px -12px rgba(184,17,26,.7)}
  .btn-red:hover{background:var(--red-light);color:#fff;transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px -12px rgba(255,59,63,.8)}
  .btn-red:hover svg{transform:translateX(4px)}
  .btn-ghost{background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.42);color:#fff}
  .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-3px) scale(1.02);box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
  .btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
  .btn-dark:hover{background:#fff;color:var(--ink);transform:translateY(-3px) scale(1.02);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}

  /* hero tire visual */
  .hero-visual{position:relative;display:grid;place-items:center;height:100%}
  .tire-stage{position:relative;width:min(520px,94%);aspect-ratio:1;display:grid;place-items:center}
  .glow{position:absolute;inset:-8% ;background:radial-gradient(circle at 50% 45%, rgba(227,22,28,.45),transparent 62%);filter:blur(10px)}
  .spin{animation:spin 14s linear infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hero-badges{position:absolute;inset:0;pointer-events:none}
  .float-badge{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;animation:floaty 5s ease-in-out infinite}
  .float-badge b{font-family:var(--head);font-style:italic;font-size:26px}
  .float-badge span{font-size:12px;color:#c9ccd3;line-height:1.2}
  .float-badge.b1{top:6%;left:-6%;animation-delay:0s}
  .float-badge.b2{bottom:8%;right:-8%;animation-delay:1.5s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .hero-blur-car{position:absolute;right:-10%;bottom:-14%;width:60%;opacity:.14;filter:blur(1px)}

  /* ============ SEARCH BAR ============ */
  .searchbar{margin:40px auto 0;width:100%;max-width:1080px;position:relative;z-index:20}
  .searchbar .panel{box-shadow:0 30px 70px -28px rgba(0,0,0,.7)}
  .searchbar .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    align-items: end;
  }
  .field label{display:block;font-size:13.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey);margin:0 0 6px 4px}
  .field select{width:100%;padding:16px 44px 16px 14px;border:1px solid var(--line);border-radius:12px;font-family:var(--body);font-size:17.5px;font-weight:500;color:var(--ink);appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;transition:border-color .25s,box-shadow .25s}
  .field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(227,22,28,.12)}
  .searchbar .btn{justify-content:center}

  /* ============ SECTION HEADERS ============ */
  .sec{padding:96px 0}
  .kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--head);font-style:italic;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:17px;color:var(--red);margin-bottom:18px}
  .kicker::before{content:"";width:30px;height:3px;background:var(--red)}
  .sec-title{font-size:clamp(48px,5.8vw,92px);font-weight:800;color:var(--ink)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
  .sec-head p{color:var(--grey);max-width:580px;font-size:21px;line-height:1.6}
  .link-arrow{font-family:var(--head);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink);display:inline-flex;gap:8px;align-items:center;transition:gap .25s,color .25s}
  .link-arrow:hover{color:var(--red);gap:14px}

  /* ============ TRUST MARQUEE ============ */
  .trust{padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
  .trust .lbl{text-align:center;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--grey-2);margin-bottom:22px}
  .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee-track{display:flex;gap:70px;width:max-content;animation:scrollx 26s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(-50%)}}
  .brand{font-family:var(--head);font-style:italic;font-weight:800;font-size:28px;letter-spacing:1px;color:#b3b8c0;transition:color .3s,transform .3s;white-space:nowrap}
  .brand:hover{color:var(--ink);transform:scale(1.06)}

  /* ============ CATEGORIES ============ */
  /* ==================================================
   CATEGORY GRID
================================================== */

.cat-grid {
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
    gap: 18px;

    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ==================================================
   CATEGORY CARD
================================================== */

.cat-grid > .cat {
    position: relative;
    isolation: isolate;

    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 376px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--paper);
    color: var(--ink);

    box-shadow: var(--shadow);

    box-sizing: border-box;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.cat-grid > .cat:hover {
    border-color: transparent;

    box-shadow:
        0 28px 62px -22px rgba(17, 18, 20, 0.3);

    transform: translateY(-8px);
}


/* ==================================================
   CATEGORY IMAGE
================================================== */

.cat-grid .cat-photo {
    position: absolute;
    z-index: 0;

    inset: 0;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;
    object-position: center 62%;

    transition:
        transform 0.7s cubic-bezier(
            0.34,
            1.2,
            0.64,
            1
        );
}

.cat-grid .cat:hover .cat-photo {
    transform: scale(1.06);
}


/* ==================================================
   IMAGE SHADE
================================================== */

.cat-grid .cat-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.92) 20%,
            rgba(255, 255, 255, 0) 48%
        );

    pointer-events: none;
}


/* ==================================================
   CATEGORY CONTENT
================================================== */

.cat-grid .cat-cap {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 22px 52px 16px 22px;

    box-sizing: border-box;
}

.cat-grid .cat h4 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--ink);

    font-family: var(--head);
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;

    transition: color 0.3s ease;
}

.cat-grid .cat:hover h4 {
    color: var(--red);
}

.cat-grid .cat span {
    display: block;

    margin-top: 5px;

    color: var(--grey);

    font-size: 15px;
    line-height: 1.4;
}


/* ==================================================
   ARROW BUTTON
================================================== */

.cat-grid .cat .go {
    position: absolute;
    z-index: 3;

    right: 14px;
    bottom: 14px;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--ink);
    color: #ffffff;

    box-shadow:
        0 6px 16px -6px rgba(0, 0, 0, 0.4);

    opacity: 0;
    transform: translateY(6px);

    transition:
        opacity 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.cat-grid .cat .go svg {
    display: block;

    width: 14px;
    height: 14px;
}

.cat-grid .cat:hover .go {
    background: var(--red);

    opacity: 1;
    transform: translateY(0);
}


/* ==================================================
   SMALL DESKTOP
================================================== */

@media (max-width: 1250px) {

    .cat-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

    .cat-grid > .cat {
        min-height: 390px;
    }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 767px) {

    .cat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 15px;
    }

    .cat-grid > .cat {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 340px;

        border-radius: 16px;
    }

    .cat-grid .cat-cap {
        padding:
            19px
            48px
            14px
            18px;
    }

    .cat-grid .cat h4 {
        font-size: 23px;
    }

    .cat-grid .cat span {
        font-size: 13px;
    }

    .cat-grid .cat .go {
        right: 12px;
        bottom: 12px;

        opacity: 1;
        transform: none;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 520px) {

    .cat-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px;

        width: 100% !important;
    }

    .cat-grid > .cat {
        display: flex !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 390px;

        margin: 0 !important;
    }

    .cat-grid .cat-cap {
        padding:
            22px
            55px
            16px
            20px;
    }

    .cat-grid .cat h4 {
        font-size: 27px;
    }

    .cat-grid .cat span {
        font-size: 14px;
    }

    .cat-grid .cat-photo {
        width: 100% !important;
        height: 100% !important;

        object-position: center 65%;
    }
}

  /* ============ SERVICES ============ */
  .services{background:var(--paper-2)}
  .serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .serv{position:relative;border-radius:18px;overflow:hidden;min-height:250px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate;transition:transform .4s}
  .serv:hover{transform:translateY(-6px)}
  .serv .bg{position:absolute;inset:0;z-index:-2;transition:transform .6s}
  .serv:hover .bg{transform:scale(1.08)}
  /* real photo layer (falls back to gradient if it fails to load) */
  .serv .photo,.post .cover .photo,.cat .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
  .serv:hover .photo{transform:scale(1.08)}
  .post:hover .cover .photo{transform:scale(1.09)}
  .serv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,13,.15) 0%,rgba(10,11,13,.85) 100%)}
  .serv.tall{grid-row:span 2;min-height:100%}
  .serv h4{font-size:35px;margin-bottom:8px}
  .serv p{font-size:18.5px;color:#d3d6dc;line-height:1.55;max-width:92%}
  .serv .tag{position:absolute;top:18px;left:18px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);padding:6px 12px;border-radius:20px}
  .serv .learn{margin-top:12px;font-family:var(--head);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;display:inline-flex;gap:8px;align-items:center;color:#fff;transition:gap .25s,color .25s}
  .serv:hover .learn{gap:14px;color:var(--red-light)}
  /* gradient "photo" backgrounds */
  .ph1{background:linear-gradient(135deg,#3a3f47,#15171b)}
  .ph2{background:linear-gradient(135deg,#4a2e30,#1a1113)}
  .ph3{background:linear-gradient(135deg,#2d3b45,#12181d)}
  .ph4{background:linear-gradient(135deg,#45372a,#191410)}
  .ph5{background:linear-gradient(135deg,#33373d,#111316)}
  .ph-tex{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 40%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px)}

  /* ============ DARK COMFORT ============ */
  .dark{background:radial-gradient(120% 100% at 50% -10%,#212429,#0d0e10 70%);color:#fff;padding:100px 0}
  .dark .sec-head{justify-content:center;text-align:center;flex-direction:column;align-items:center;margin-bottom:56px}
  .dark .sec-title{color:#fff}
  .dark .sec-head p{color:#a9adb5}
  .comfort{display:grid;grid-template-columns:4fr 3fr 4fr;gap:44px;align-items:center;position:relative}
  .feat{display:flex;flex-direction:column;gap:30px}
  .feat .item{display:flex;gap:16px;padding:16px 18px;border-radius:16px;position:relative;z-index:3;background:rgba(255,255,255,0);box-shadow:inset 0 0 0 1px rgba(255,255,255,0);transition:background .45s ease,box-shadow .45s ease,transform .45s ease}
  .feat.right .item{flex-direction:row-reverse;text-align:right}
  .feat .ic{width:48px;height:48px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#26292f,#161719);border:1px solid rgba(255,255,255,.08);color:var(--red-light);transition:.3s}
  .feat .item:hover .ic{background:var(--red);color:#fff;transform:rotate(8deg) scale(1.05)}
  .feat h4{font-size:26px;margin-bottom:7px}
  .feat p{font-size:17px;color:#a2a6ae;line-height:1.55}
  .comfort-tire{width:min(430px,94%);margin:0 auto;position:relative;z-index:2}
  .comfort-tire .ring-glow{position:absolute;inset:-16%;background:radial-gradient(circle,rgba(227,22,28,.4),transparent 60%);filter:blur(6px)}
  .comfort-tire svg,.comfort-tire img{position:relative;animation:spin 20s linear infinite;width:70%;margin:0 auto}
  /* ---- interactive connectors ---- */
  .connectors{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
  .connectors .conn{fill:none;stroke:rgba(255,255,255,.13);stroke-width:2;transition:stroke .4s ease,stroke-width .4s ease}
  .connectors .conn.on{stroke:var(--red);stroke-width:3;stroke-dasharray:7 9;filter:drop-shadow(0 0 5px rgba(227,22,28,.85));animation:flow .9s linear infinite}
  .connectors .cdot{fill:rgba(255,255,255,.22);transition:fill .4s ease}
  .connectors .cdot.on{fill:var(--red);filter:drop-shadow(0 0 5px rgba(227,22,28,.95))}
  @keyframes flow{to{stroke-dashoffset:-32}}
  .feat .item.on{background:linear-gradient(135deg,rgba(227,22,28,.18),rgba(227,22,28,.04));box-shadow:0 16px 44px -18px rgba(227,22,28,.55),inset 0 0 0 1px rgba(227,22,28,.4);transform:translateY(-2px)}
  .feat .item.on .ic{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.08)}
  .feat .item.on h4{color:#fff}
  @media(max-width:980px){.connectors{display:none}}

  /* ============ LIFESTYLE ============ */
  .life-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .life-visual{border-radius:20px;overflow:hidden;position:relative;min-height:630px;box-shadow:var(--shadow)}
  .life-visual .bg{position:absolute;inset:0;background:linear-gradient(135deg,#2b3038,#101215)}
  .life-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .8s}
  .life-visual:hover .life-photo{transform:scale(1.05)}
  .life-visual .car-svg{z-index:1}
  .life-visual .stripe-badge{z-index:3}
  .life-visual .car-svg{position:absolute;inset:0;display:grid;place-items:center}
  .life-visual .stripe-badge{position:absolute;left:22px;bottom:22px;background:var(--red);color:#fff;font-family:var(--head);font-style:italic;font-weight:800;text-transform:uppercase;padding:14px 20px;border-radius:14px;font-size:18px;box-shadow:var(--shadow-red)}
  .life-copy h2{font-size:clamp(44px,5.2vw,80px);margin-bottom:22px}
  .life-copy p{color:var(--grey);line-height:1.7;margin-bottom:20px;font-size:20px}
  .stat-row{display:flex;gap:34px;margin:26px 0 30px}
  .stat b{font-family:var(--head);font-style:italic;font-weight:800;font-size:40px;color:var(--red);display:block;line-height:1}
  .stat span{font-size:12.5px;color:var(--grey);text-transform:uppercase;letter-spacing:1px}
  .check-list{display:grid;gap:12px;margin-bottom:26px}
  .check-list li{list-style:none;display:flex;gap:12px;align-items:center;font-size:15px;font-weight:500}
  .check-list .ck{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex-shrink:0}
  .check-list .ck svg{width:13px;height:13px}

  /* ============ TESTIMONIALS ============ */
  .testi{background:var(--paper-2)}
  .testi .sec-head{justify-content:center;text-align:center;flex-direction:column;align-items:center}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .tcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;transition:transform .35s,box-shadow .35s}
  .tcard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
  .tcard .quote{font-family:var(--head);font-style:italic;font-weight:800;font-size:52px;color:var(--red);line-height:.6;height:26px}
  .tcard p{color:var(--charcoal);line-height:1.65;font-size:19.5px;margin:18px 0 26px}
  .stars{display:flex;gap:3px;color:var(--red);margin-bottom:6px}
  .stars svg{width:16px;height:16px}
  .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
  .who .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--red),var(--red-dark));color:#fff;display:grid;place-items:center;font-family:var(--head);font-style:italic;font-weight:800;font-size:18px}
  .who b{display:block;font-size:15px}
  .who span{font-size:12.5px;color:var(--grey)}

  /* ============ BLOG ============ */
  .blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .post{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .35s,box-shadow .35s}
  .post:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
  .post .cover{height:172px;position:relative;overflow:hidden}
  .post .cover .bg{position:absolute;inset:0;z-index:0;transition:transform .6s}
  .post .cover .photo{z-index:1}
  .post:hover .cover .bg{transform:scale(1.09)}
  .post .read{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 11px;border-radius:20px}
  .post .body{padding:20px 20px 24px}
  .post h4{font-size:27px;margin-bottom:10px;transition:color .25s;line-height:1.05}
  .post:hover h4{color:var(--red)}
  .post p{font-size:17.5px;color:var(--grey);line-height:1.55}
  .post .more{margin-top:14px;font-family:var(--head);font-style:italic;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:1px;color:var(--red);display:inline-flex;gap:7px;align-items:center;transition:gap .25s}
  .post:hover .more{gap:13px}

  /* ============ ACCESSORIES — PRODUCT CARDS ============ */
  .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .prod{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s,border-color .35s}
  .prod:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
  /* studio-style product tile */
  .prod-media{position:relative;aspect-ratio:1/.86;display:grid;place-items:center;background:#fff;border-bottom:1px solid var(--line)}
  .p-art{width:68%;height:auto;transition:transform .55s cubic-bezier(.34,1.4,.64,1)}
  .prod:hover .p-art{transform:scale(1.07) rotate(-3deg)}
  .p-badge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--head);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:12px;background:var(--red);color:#fff;padding:6px 13px;border-radius:20px;box-shadow:var(--shadow-red)}
  .wish{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--grey);display:grid;place-items:center;opacity:0;transform:translateY(-6px);transition:.3s}
  .wish svg{width:18px;height:18px}
 .prod-media img {
    width: 80%;
}
  .prod:hover .wish{opacity:1;transform:translateY(0)}
  .wish:hover{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.08)}
  /* body */
  .prod-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
  .p-cat{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-2);margin-bottom:7px}
  .prod h4{font-size:27px;line-height:1.02;margin-bottom:9px;transition:color .25s}
  .prod:hover h4{color:var(--red)}
  .p-rating{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .p-rating .stars{color:var(--red);font-size:14.5px;letter-spacing:2px;margin:0}
  .p-rating .rcount{font-size:12.5px;color:var(--grey)}
  .p-price{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .p-price{font-family:var(--head);font-style:italic;font-weight:800;font-size:28px;color:var(--ink);line-height:1}
  .p-price s{font-size:15px;color:var(--grey-2);text-decoration:line-through}
  .p-price .save{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--red);background:rgba(227,22,28,.09);padding:4px 9px;border-radius:14px}
  .p-cart{margin-top:auto;justify-content:center;width:100%;padding:12px 18px;font-size:15px;border-radius:12px}
  .p-cart svg{width:17px;height:17px}

  /* ============ GALLERY (premium dark) ============ */
  .gallery{background:radial-gradient(120% 100% at 50% -10%,#212429,#0d0e10 70%);color:#fff}
  .gallery .sec-title{color:#fff}
  .gallery .sec-head p{color:#a9adb5}
  .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px}
  .gal-item{position:relative;margin:0;border-radius:20px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 60px -30px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
  .gal-item:hover{transform:translateY(-8px);border-color:rgba(227,22,28,.55);box-shadow:0 34px 70px -26px rgba(227,22,28,.35)}
  .gal-item.big{grid-column:span 2;grid-row:span 2}
  .gal-item.wide{grid-column:span 2}
  .gal-item .bg{position:absolute;inset:0;z-index:-2;transition:transform .8s cubic-bezier(.34,1.2,.64,1)}
  .gal-item .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.92) brightness(.96);transition:transform .8s cubic-bezier(.34,1.2,.64,1),filter .5s ease}
  .gal-item:hover .photo{transform:scale(1.07);filter:saturate(1.12) brightness(1.02)}
  .gal-item:hover .bg{transform:scale(1.07)}
  /* permanent cinematic bottom fade + subtle red edge glow on hover */
  .gal-item::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.05) 30%,rgba(8,9,11,.86) 100%);transition:opacity .4s}
  .gal-item::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(200deg,rgba(227,22,28,.22),transparent 46%);opacity:0;transition:opacity .45s;pointer-events:none}
  .gal-item:hover::before{opacity:1}
  /* caption block: number + title always on, subline slides in */
  .gal-item figcaption{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:3px}
  .g-num{font-family:var(--head);font-style:italic;font-weight:800;font-size:13px;letter-spacing:2.5px;color:var(--red-light);display:inline-flex;align-items:center;gap:9px}
  .g-num::after{content:"";height:2px;width:26px;background:var(--red);display:inline-block;transition:width .4s cubic-bezier(.6,.2,.1,1)}
  .gal-item:hover .g-num::after{width:52px}
  .g-cap{font-family:var(--head);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:24px;line-height:1;color:#fff}
  .gal-item.big .g-cap{font-size:34px}
  .g-sub{font-size:13.5px;color:#c3c7ce;letter-spacing:.3px;max-height:0;opacity:0;transform:translateY(6px);transition:max-height .4s ease,opacity .4s ease,transform .4s ease}
  .gal-item:hover .g-sub{max-height:24px;opacity:1;transform:translateY(0)}
  /* corner arrow chip */
  .gal-go{position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);opacity:0;transform:translateY(-6px) rotate(-45deg);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s}
  .gal-item:hover .gal-go{opacity:1;transform:translateY(0) rotate(0deg);background:var(--red);border-color:var(--red)}

  /* ============ CTA STRIP ============ */
  .cta-strip{background:var(--red);color:#fff;border-radius:22px;padding:48px 50px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow-red)}
  .cta-strip::before{content:"";position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.08)}
  .cta-strip h3{font-size:clamp(40px,4.8vw,72px);position:relative;z-index:2}
  .cta-strip p{color:rgba(255,255,255,.85);margin-top:10px;font-size:17px;position:relative;z-index:2}
  .cta-strip .btn-dark{position:relative;z-index:2}

  /* ============ FOOTER ============ */
  footer{background:var(--ink);color:#c4c8cf;padding:70px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
  footer .fdesc{font-size:17.5px;line-height:1.7;color:#9096a0;margin:20px 0 22px;max-width:360px}
  footer h5{font-family:var(--head);font-style:italic;font-weight:800;text-transform:uppercase;color:#fff;font-size:21px;letter-spacing:1px;margin-bottom:20px}
  footer ul{list-style:none;display:grid;gap:11px}
  footer ul a{font-size:17.5px;color:#9096a0;transition:color .25s,padding-left .25s}
  footer ul a:hover{color:#fff;padding-left:5px}
  .news{display:flex;gap:8px;margin-top:6px}
  .news input{flex:1;padding:13px 15px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body);font-size:14px}
  .news input::placeholder{color:#7d838d}
  .news input:focus{outline:none;border-color:var(--red)}
  .news button{background:var(--red);border:none;border-radius:11px;color:#fff;padding:0 18px;transition:background .25s,transform .25s}
  .news button:hover{background:var(--red-dark);transform:translateY(-2px)}
  .socials{display:flex;gap:10px;margin-top:18px}
  .socials a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;transition:.25s}
  .socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
  .socials svg{width:18px;height:18px}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:#7d838d;flex-wrap:wrap;gap:10px}

  /* ============ REVEAL ============ */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

  /* scroll progress */
  .progress{position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:1000;width:0}

  /* ============ RESPONSIVE ============ */
  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;text-align:center}
    .hero-visual{order:-1;margin-bottom:10px}
    .hero .eyebrow{justify-content:center}
    .hero-cta{justify-content:center}
    .searchbar .panel{grid-template-columns:repeat(2,1fr)}
    .cat-grid{grid-template-columns:repeat(3,1fr)}
    .serv-grid{grid-template-columns:1fr 1fr}
    .serv.tall{grid-row:auto}
    .comfort{grid-template-columns:1fr}
    .comfort-tire{order:-1}
    .feat.right .item{flex-direction:row;text-align:left}
    .life-grid{grid-template-columns:1fr}
    .t-grid{grid-template-columns:1fr}
    .blog-grid{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .prod-grid{grid-template-columns:1fr 1fr}
    .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
  }
  @media(max-width:640px){
    .logo-img{height:54px}
    .navlinks,.topbar nav,.nav-icons .icon-btn:not(.burger){display:none}
    .burger{display:grid}
    .searchbar .panel{grid-template-columns:1fr}
    .cat-grid{grid-template-columns:1fr 1fr}
    .serv-grid{grid-template-columns:1fr}
    .blog-grid{grid-template-columns:1fr}
    .prod-grid{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:1fr;grid-auto-rows:220px}
    .gal-item.big,.gal-item.wide{grid-column:auto;grid-row:auto}
    .foot-grid{grid-template-columns:1fr}
    .cta-strip{padding:34px 26px}
  }
  /* ============ DISPLAY-SCALING (DPR) NORMALISATION ============ */
  body{zoom:100%}
  /* DPR 1.25 to 1.49 -> zoom 80% */
  @media (-webkit-min-device-pixel-ratio:1.25) and (-webkit-max-device-pixel-ratio:1.49),
         (min-resolution:120dpi) and (max-resolution:143dpi){
    body{zoom:80% !important}
  }
  /* DPR 1.5 to 1.99 -> zoom 65% */
  @media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.99),
         (min-resolution:144dpi) and (max-resolution:199dpi){
    body{zoom:65% !important}
  }

  /* ============ INSTAGRAM ACCORDION GALLERY ============ */
  .ig-share{background:var(--paper);overflow:hidden}
  .ig-strip{
    display:flex;
    gap:14px;
    height:min(66vh,600px);
    margin-top:40px;
  }
  .ig-card{
    position:relative;
    flex:1 1 0;
    min-width:34px;
    border-radius:150px;
    overflow:hidden;
    background-color:#0c0d0f;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:var(--shadow);
    filter:saturate(.9) brightness(.9);
    transition:flex-grow .8s cubic-bezier(.66,0,.2,1),
               border-radius .6s ease,
               box-shadow .55s ease,
               filter .6s ease;
    will-change:flex-grow;
  }
  .ig-card::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(12,13,15,.05) 45%,rgba(12,13,15,.5));
    opacity:.9;transition:opacity .55s ease;
  }
  .ig-card.active{
    flex-grow:12;
    border-radius:34px;
    filter:none;
    box-shadow:0 32px 64px -24px rgba(17,18,20,.6);
  }
  .ig-card.active::after{opacity:.3}
  .ig-badge{
    position:absolute;left:18px;bottom:18px;z-index:2;
    width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--red);color:#fff;
    opacity:0;transform:translateY(10px) scale(.8);
    box-shadow:var(--shadow-red);
    transition:opacity .45s ease .12s,transform .45s ease .12s;
  }
  .ig-card.active .ig-badge{opacity:1;transform:none}
  .ig-badge svg{width:24px}
  @media (max-width:820px){
    .ig-strip{height:min(54vh,440px);gap:9px}
    .ig-card{border-radius:100px}
    .ig-card.active{border-radius:24px}
    .ig-badge{width:38px;height:38px;left:12px;bottom:12px}
    .ig-badge svg{width:20px}
  }
  @media (max-width:520px){
    .ig-strip{height:360px;gap:6px}
    .ig-card{min-width:20px}
  }

  /* ============ OUR PROCESS (icon + arrow flow) — dark theme ============ */
  .process{background:radial-gradient(120% 100% at 50% -10%,#212429,#0d0e10 70%);color:#fff;padding-top:144px}
  .process .kicker{color:var(--red-light)}
  .process .sec-title{color:#fff}
  .process .sec-head p{color:#cfd2d8}

  /* ---- Wheel & Tire guide cards ---- */
  .guide-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:22px;margin-top:56px;
  }
  .guide-card{
    position:relative;display:flex;flex-direction:column;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;padding:30px 26px 28px;overflow:hidden;
    transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s,background .4s;
  }
  .guide-card::after{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--red);transition:width .5s ease}
  .guide-card:hover{transform:translateY(-8px);border-color:rgba(227,22,28,.5);background:rgba(255,255,255,.06)}
  .guide-card:hover::after{width:100%}
  .guide-ic{
    width:58px;height:58px;border-radius:15px;
    display:grid;place-items:center;
    background:rgba(227,22,28,.15);color:var(--red-light);
    margin-bottom:22px;transition:background .4s,color .4s,transform .4s;
  }
  .guide-card:hover .guide-ic{background:var(--red);color:#fff;transform:rotate(-6deg)}
  .guide-ic svg{width:28px;height:28px}
  .guide-tag{
    display:block;font-family:var(--head);font-style:italic;font-weight:700;
    text-transform:uppercase;letter-spacing:1.6px;font-size:12px;
    color:var(--red-light);margin-bottom:10px;
  }
  .guide-card h4{font-size:22px;color:#fff;line-height:1.08;margin-bottom:12px}
  .guide-card p{color:#a9adb5;font-size:14.5px;line-height:1.6;margin-bottom:22px;flex:1}
  .guide-link{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--head);font-style:italic;font-weight:700;
    text-transform:uppercase;letter-spacing:1px;font-size:14px;color:#fff;
    transition:gap .25s,color .25s;
  }
  .guide-link svg{width:17px}
  .guide-card:hover .guide-link{color:var(--red-light);gap:13px}
  @media (max-width:980px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.guide-grid{grid-template-columns:1fr}}
  .proc-flow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-top: 100px;
  }
  .pf-step{
    flex:1 1 0;max-width:280px;text-align:center;
  }
  .pf-icon{
    position:relative;
    width:112px;height:112px;border-radius:50%;
    margin:0 auto 26px;
    display:grid;place-items:center;
    background:var(--paper);
    border:2px solid var(--line);
    color:var(--ink);
    box-shadow:var(--shadow);
    transition:background .45s ease,border-color .45s ease,color .45s ease,transform .45s cubic-bezier(.4,0,.2,1);
  }
  .pf-icon::before{
    content:"";position:absolute;inset:-9px;border-radius:50%;
    border:2px dashed var(--paper-3);
    transition:border-color .45s ease,transform .6s ease;
  }
  .pf-icon svg{width:46px;height:46px}
  .pf-badge{
    position:absolute;top:-2px;right:-2px;
    width:40px;height:40px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--red);color:#fff;
    font-family:var(--head);font-style:italic;font-weight:800;font-size:17px;
    box-shadow:var(--shadow-red);
    transition:transform .45s ease;
  }
  .pf-step:hover .pf-icon{
    background:var(--red);border-color:var(--red);color:#fff;
    transform:translateY(-6px);
  }
  .pf-step:hover .pf-icon::before{border-color:rgba(255,255,255,.4);transform:rotate(38deg)}
  .pf-step:hover .pf-badge{transform:scale(1.12)}
  .pf-step h4{font-size:23px;margin-bottom:12px;color:#fff}
  .pf-step p{color:#a9adb5;font-size:15px;line-height:1.6;padding:0 6px}
  .pf-arrow{
    flex:0 0 auto;align-self:flex-start;
    margin-top:44px;width:64px;color:#fff;
    opacity:.85;
  }
  .pf-arrow svg{width:100%;height:auto;animation:pfnudge 1.8s ease-in-out infinite}
  @keyframes pfnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  @media (max-width:980px){
    .proc-flow{flex-direction:column;align-items:center;gap:6px;margin-top:44px}
    .pf-step{max-width:420px}
    .pf-arrow{margin:2px 0;width:34px;transform:rotate(90deg)}
    .pf-arrow svg{animation:pfnudgeV 1.8s ease-in-out infinite}
  }
  @keyframes pfnudgeV{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

  /* ============ HERO — split layout (content left, spinning tire right) ============ */
  .hero-copy {
    text-align: left;
    margin-left: 100px;
  }
  .hero-copy .eyebrow{justify-content:flex-start}
  .hero-copy p.lead{margin:24px 0 36px;text-align:left;max-width:560px;color:#c2c6ce}
  .hero-copy .hero-cta{justify-content:flex-start}
  .hero-visual{position:relative}
  .tire-wrap{position:relative;width:min(92%,520px);aspect-ratio:1/1;margin:0 auto;display:grid;place-items:center}
  .tire-ring{
    position:absolute;inset:-3%;border-radius:50%;
    border:2px dashed rgba(255,255,255,.32);
    animation:tireSpin 26s linear infinite reverse;
  }
  .tire-spin{
    width:100%;height:auto;
    animation:tireSpin 16s linear infinite;
    filter:drop-shadow(0 34px 54px rgba(0,0,0,.6));
  }
  @keyframes tireSpin{to{transform:rotate(360deg)}}
  .hero-badge{
    position:absolute;z-index:4;
    display:flex;align-items:center;gap:11px;
    background:rgba(18,20,24,.7);backdrop-filter:blur(9px);
    border:1px solid rgba(255,255,255,.14);border-radius:16px;
    padding:12px 17px;box-shadow:0 22px 44px -18px rgba(0,0,0,.65);
  }
  .hero-badge b{font-family:var(--head);font-style:italic;font-weight:800;font-size:27px;color:var(--red-light);line-height:1}
  .hero-badge span{font-size:12.5px;line-height:1.25;color:#cfd2d8}
  .badge-grip{top:9%;left:17%}
  .badge-rev{bottom:12%;right:12%}
  .hero-search {
    position: relative;
    z-index: 30;
    width: min(1760px, 96%);
    margin: -70px auto 40px;
  }
  .hero-search .searchbar {
    max-width: 90%;
    margin: 0 auto;
  }
  @media (max-width:900px){
    .hero-copy{text-align:center}
    .hero-copy .eyebrow{justify-content:center}
    .hero-copy p.lead{margin:22px auto 32px;text-align:center}
    .hero-copy .hero-cta{justify-content:center}
    .tire-wrap{width:min(74%,360px)}
    .badge-grip{left:2%}
    .badge-rev{right:2%}
    .hero-badge b{font-size:22px}
  }

  /* ============ BOOKING MODAL (reusable popup) ============ */
  body.modal-lock{overflow:hidden}
  .modal{position:fixed;inset:0;z-index:2000;display:none}
  .modal.open{display:block}
  .modal-overlay{
    position:absolute;inset:0;
    background:rgba(12,13,15,.64);backdrop-filter:blur(5px);
    animation:mfade .3s ease;
  }
  .modal-card{
    position:relative;z-index:1;
    width:min(650px,92%);max-height:92vh;overflow-y:auto;
    margin:5vh auto 0;
    background:var(--paper);
    border-radius:22px;
    padding:46px 46px 40px;
    box-shadow:0 44px 100px -30px rgba(0,0,0,.65);
    animation:mpop .38s cubic-bezier(.2,.85,.25,1);
  }
  .modal-card::before{  /* red top accent */
    content:"";position:absolute;left:0;top:0;height:5px;width:100%;
    background:linear-gradient(90deg,var(--red),var(--red-light));
    border-radius:22px 22px 0 0;
  }
  @keyframes mfade{from{opacity:0}to{opacity:1}}
  @keyframes mpop{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
  .modal-x{
    position:absolute;top:18px;right:18px;
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:var(--paper-2);
    display:grid;place-items:center;color:var(--ink);
    transition:background .25s,border-color .25s,color .25s,transform .35s;
  }
  .modal-x:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(90deg)}
  .modal-x svg{width:19px}
  .modal-title{font-size:clamp(30px,4.2vw,46px);color:var(--ink);margin:12px 0 8px}
  .modal-sub{color:var(--grey);font-size:15.5px;line-height:1.6;margin-bottom:26px;max-width:100%}
  .modal-form{display:flex;flex-direction:column;gap:16px}
  .mf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .mf-field{display:flex;flex-direction:column;gap:7px}
   .mf-field label {
    font-family: var(--head);
    /* font-style: italic; */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 17px;
    color: var(--ink);
}
  .mf-opt{color:var(--grey-2);font-weight:400}
  .mf-field input,.mf-field select,.mf-field textarea{
    font-family:var(--body);font-size:15px;color:var(--ink);width:100%;
    background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;
    padding:13px 15px;outline:none;
    transition:border-color .25s,box-shadow .25s,background .25s;
  }
  .mf-field select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding-right:42px;
    background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  }
  .mf-field input::placeholder,.mf-field textarea::placeholder{color:var(--grey-2)}
  .mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{
    border-color:var(--red);background:var(--paper);
    box-shadow:0 0 0 3px rgba(227,22,28,.14);
  }
  .mf-field textarea{resize:vertical;min-height:82px}
  .mf-submit{width:100%;justify-content:center;margin-top:10px}
  @media (max-width:560px){
    .modal-card{padding:36px 22px 30px;margin:3vh auto 0}
    .mf-row{grid-template-columns:1fr}
  }
  
  /* ==================================================
   CONTACT FORM 7 MODAL FIX
================================================== */

.booking-form-wrap .wpcf7 {
    width: 100%;
}

.booking-form-wrap .wpcf7-form {
    width: 100%;
    margin: 0;
}

.booking-form-wrap .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.booking-form-wrap .mf-field input,
.booking-form-wrap .mf-field select,
.booking-form-wrap .mf-field textarea {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0;
    box-sizing: border-box;
}

.booking-form-wrap .mf-field textarea {
    resize: vertical;
}

.booking-form-wrap .wpcf7-not-valid-tip {
    display: block;

    margin-top: 5px;

    color: #d81820;

    font-size: 12px;
    font-weight: 600;
}

.booking-form-wrap .wpcf7-response-output {
    margin: 15px 0 0 !important;
    padding: 11px 13px !important;

    border-radius: 7px;

    font-size: 13px;
}

.booking-form-wrap .wpcf7-spinner {
    position: absolute;
    margin: 12px 0 0 10px;
}

.booking-form-wrap .mf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.booking-form-wrap .mf-submit svg {
    width: 18px;
    height: 18px;
}

.booking-form-wrap .wpcf7-form.submitting .mf-submit {
    opacity: 0.65;
    pointer-events: none;
}