
  :root{
    --kaw-green:#E4002B;
    --kaw-green-dark:#A9001F;
    --kaw-black:#0A0B08;
    --kaw-charcoal:#151611;
    --kaw-panel:#1C1D18;
    --kaw-line:#2C2D26;
    --kaw-silver:#C9CBC3;
    --kaw-white:#F5F6F2;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  body{
    background:var(--kaw-black);
    color:var(--kaw-white);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Archivo Black',sans-serif;
    font-weight:400;
    letter-spacing:.2px;
    text-transform:uppercase;
  }
  a{text-decoration:none;}

  /* ---------- signature sugomi angle-cut banner ---------- */
  .sugomi-bar{
    height:4px;width:100%;
    background:var(--kaw-green);
    clip-path:polygon(0 0,100% 0,100% 100%,3% 100%);
  }
  .angle-clip{
    clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }

  /* ---------- Navbar ---------- */
  .navbar-kaw{
    background:rgba(10,11,8,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--kaw-line);
  }
  .brand-mark{
    display:flex;align-items:center;gap:.5rem;
    font-family:'Archivo Black',sans-serif;
    font-size:1.35rem;
    letter-spacing:.5px;
    color:#fff;
  }
  .brand-mark .slash{
    width:9px;height:24px;
    background:var(--kaw-green);
    transform:skewX(-16deg);
    display:inline-block;
  }
  .nav-link-kaw{
    color:var(--kaw-silver)!important;
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:.5rem 1rem!important;
    transition:color .2s;
  }
  .nav-link-kaw:hover{color:#fff!important;}
  .icon-btn{
    position:relative;
    color:#fff;
    background:transparent;
    border:1px solid var(--kaw-line);
    border-radius:50%;
    width:42px;height:42px;
    display:inline-flex;align-items:center;justify-content:center;
    transition:.2s;
  }
  .icon-btn:hover{border-color:var(--kaw-green);color:var(--kaw-green);}
  .icon-badge{
    position:absolute;top:-6px;right:-6px;
    background:var(--kaw-green);
    color:#fff;
    font-size:.65rem;
    font-weight:800;
    min-width:18px;height:18px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    padding:0 3px;
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:7.5rem 0 5rem;
    background:
      radial-gradient(ellipse at 84% 0%, rgba(228,0,43,.20), transparent 55%),
      #0A0B08;
    overflow:hidden;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    color:var(--kaw-green);
    font-weight:700;
    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:1.25rem;
  }
  .eyebrow::before{
    content:"";
    width:26px;height:3px;
    background:var(--kaw-green);
    display:inline-block;
  }
  .hero h1{
    font-size:clamp(2.3rem, 5.2vw, 4rem);
    line-height:1.05;
    color:#fff;
    margin-bottom:1.25rem;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--kaw-green);
  }
  .hero p.lead{
    color:var(--kaw-silver);
    font-size:1.1rem;
    max-width:560px;
  }
  .btn-kaw{
    background:var(--kaw-green);
    border:1px solid var(--kaw-green);
    color:#fff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.6px;
    font-size:.85rem;
    padding:.85rem 1.8rem;
    border-radius:1px;
    transition:.2s;
    clip-path:polygon(0 0,100% 0,100% 78%,94% 100%,0 100%);
  }
  .btn-kaw:hover{background:var(--kaw-green-dark);border-color:var(--kaw-green-dark);color:#fff;}
  .btn-kaw-outline{
    background:transparent;
    border:1px solid #444;
    color:#fff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.6px;
    font-size:.85rem;
    padding:.85rem 1.8rem;
    border-radius:1px;
    transition:.2s;
  }
  .btn-kaw-outline:hover{border-color:var(--kaw-green);color:var(--kaw-green);}

  /* ---------- Stats strip ---------- */
  .stats-strip{
    border-top:1px solid var(--kaw-line);
    border-bottom:1px solid var(--kaw-line);
    background:var(--kaw-charcoal);
  }
  .stat-item{
    padding:1.6rem 1rem;
    text-align:center;
    border-right:1px solid var(--kaw-line);
  }
  .stat-item:last-child{border-right:none;}
  .stat-num{
    font-family:'Archivo Black',sans-serif;
    font-size:1.85rem;
    color:#fff;
  }
  .stat-num span.accent{color:var(--kaw-green);}
  .stat-label{
    font-size:.72rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--kaw-silver);
  }

  /* ---------- Section shared ---------- */
  section{padding:5rem 0;}
  .section-head{margin-bottom:2.75rem;}
  .section-eyebrow{
    color:var(--kaw-green);
    font-weight:700;
    font-size:.78rem;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  .section-title{
    color:#fff;
    font-size:clamp(1.7rem,3vw,2.4rem);
    margin-top:.4rem;
  }
  .section-sub{color:var(--kaw-silver);max-width:620px;}

  /* ---------- Category pills ---------- */
  .cat-pill{
    background:var(--kaw-panel);
    border:1px solid var(--kaw-line);
    color:var(--kaw-silver);
    font-weight:700;
    font-size:.83rem;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:.55rem 1.25rem;
    cursor:pointer;
    transition:.2s;
    clip-path:polygon(0 0,100% 0,100% 78%,94% 100%,0 100%);
  }
  .cat-pill:hover{border-color:var(--kaw-green);color:#fff;}
  .cat-pill.active{
    background:var(--kaw-green);
    border-color:var(--kaw-green);
    color:#fff;
  }

  /* ---------- Bike cards ---------- */
  .bike-card{
    background:var(--kaw-panel);
    border:1px solid var(--kaw-line);
    overflow:hidden;
    height:100%;
    transition:transform .25s, border-color .25s;
  }
  .bike-card:hover{
    transform:translateY(-6px);
    border-color:var(--kaw-green);
  }
  .bike-media{
    position:relative;
    aspect-ratio:16/10;
    background:#101108;
    border-bottom:3px solid var(--kaw-green);
    overflow:hidden;
  }
  .bike-media img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .4s;
  }
  .bike-card:hover .bike-media img{transform:scale(1.06);}
  .bike-tag{
    position:absolute;top:.85rem;left:.85rem;
    background:rgba(0,0,0,.6);
    border:1px solid var(--kaw-line);
    color:var(--kaw-green);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:.3rem .65rem;
    z-index:2;
  }
  .bike-wish{
    position:absolute;top:.85rem;right:.85rem;
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    border:1px solid var(--kaw-line);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    transition:.2s;
    z-index:2;
  }
  .bike-wish:hover, .bike-wish.active{color:var(--kaw-green);border-color:var(--kaw-green);}
  .bike-body{padding:1.25rem 1.25rem 1.4rem;}
  .bike-name{color:#fff;font-size:1.05rem;margin-bottom:.15rem;}
  .bike-spec{
    color:var(--kaw-silver);
    font-size:.8rem;
    display:flex;gap:1rem;
    margin-bottom:.9rem;
    text-transform:none;
  }
  .bike-spec span{display:flex;align-items:center;gap:.35rem;}
  .bike-foot{
    display:flex;align-items:center;justify-content:space-between;
    border-top:1px solid var(--kaw-line);
    padding-top:.9rem;
  }
  .bike-price{color:#fff;font-family:'Archivo Black',sans-serif;font-size:1.15rem;}
  .bike-price small{color:var(--kaw-silver);font-size:.68rem;font-weight:500;font-family:'Inter',sans-serif;display:block;text-transform:uppercase;letter-spacing:.5px;}
  .btn-add{
    background:transparent;
    border:1px solid var(--kaw-green);
    color:var(--kaw-green);
    font-weight:700;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:.5rem 1rem;
    transition:.2s;
  }
  .btn-add:hover{background:var(--kaw-green);color:#fff;}
  .btn-add.added{background:#3a7a1c;border-color:#3a7a1c;color:#fff;}

  /* ---------- Booking ---------- */
  .booking-section{
    background:var(--kaw-charcoal);
    border-top:1px solid var(--kaw-line);
    border-bottom:1px solid var(--kaw-line);
    position:relative;
  }
  .booking-card{
    background:var(--kaw-panel);
    border:1px solid var(--kaw-line);
    padding:2.25rem;
  }
  .form-control-kaw, .form-select-kaw{
    background:#101108;
    border:1px solid var(--kaw-line);
    color:#fff;
    padding:.7rem .9rem;
    border-radius:2px;
  }
  .form-control-kaw:focus, .form-select-kaw:focus{
    background:#101108;color:#fff;
    border-color:var(--kaw-green);
    box-shadow:0 0 0 .2rem rgba(228,0,43,.18);
  }
  .form-control-kaw::placeholder{color:#7c7d76;}
  .form-label-kaw{
    font-size:.78rem;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--kaw-silver);
    font-weight:600;
    margin-bottom:.4rem;
  }

  /* ---------- FAQ ---------- */
  .accordion-kaw .accordion-item{
    background:var(--kaw-panel);
    border:1px solid var(--kaw-line);
    margin-bottom:.75rem;
    overflow:hidden;
  }
  .accordion-kaw .accordion-button{
    background:var(--kaw-panel);
    color:#fff;
    font-weight:400;
    font-family:'Archivo Black',sans-serif;
    font-size:.95rem;
    text-transform:uppercase;
    letter-spacing:.4px;
    box-shadow:none;
  }
  .accordion-kaw .accordion-button:not(.collapsed){
    background:var(--kaw-panel);
    color:var(--kaw-green);
  }
  .accordion-kaw .accordion-button::after{filter:invert(1);}
  .accordion-kaw .accordion-body{
    color:var(--kaw-silver);
    border-top:1px solid var(--kaw-line);
  }

  /* ---------- Footer ---------- */
  footer{
    background:#0A0B08;
    border-top:1px solid var(--kaw-line);
    padding:3.5rem 0 1.5rem;
  }
  footer h6{
    color:#fff;
    font-family:'Archivo Black',sans-serif;
    letter-spacing:.5px;
    font-size:.8rem;
    text-transform:uppercase;
    margin-bottom:1rem;
  }
  footer a{color:var(--kaw-silver);}
  footer a:hover{color:var(--kaw-green);}
  footer ul{list-style:none;padding:0;margin:0;}
  footer li{margin-bottom:.55rem;font-size:.9rem;}
  .footer-bottom{
    border-top:1px solid var(--kaw-line);
    margin-top:2.5rem;
    padding-top:1.5rem;
    font-size:.8rem;
    color:#7c7d76;
  }

  /* ---------- Cart offcanvas ---------- */
  .offcanvas-kaw{
    background:var(--kaw-charcoal);
    color:#fff;
    width:400px;
  }
  .offcanvas-kaw .offcanvas-header{border-bottom:1px solid var(--kaw-line);}
  .cart-line{
    display:flex;justify-content:space-between;align-items:center;
    padding:.85rem 0;
    border-bottom:1px solid var(--kaw-line);
  }
  .cart-line .name{font-weight:600;color:#fff;font-size:.92rem;}
  .cart-line .price{color:var(--kaw-silver);font-size:.82rem;}
  .cart-remove{color:#7c7d76;background:none;border:none;font-size:1.1rem;}
  .cart-remove:hover{color:var(--kaw-green);}
  .cart-empty{color:var(--kaw-silver);text-align:center;padding:2.5rem 0;}

  .toast-kaw{
    position:fixed;bottom:1.5rem;right:1.5rem;
    background:var(--kaw-panel);
    border:1px solid var(--kaw-green);
    color:#fff;
    padding:.8rem 1.25rem;
    border-radius:2px;
    font-size:.88rem;
    font-weight:600;
    z-index:2000;
    opacity:0;
    transform:translateY(10px);
    transition:.25s;
    pointer-events:none;
  }
  .toast-kaw.show{opacity:1;transform:translateY(0);}

  @media (max-width:575px){
    .offcanvas-kaw{width:100%;}
    .stat-item{border-right:none;border-bottom:1px solid var(--kaw-line);}
    .stat-item:last-child{border-bottom:none;}
  }
