/* ===================================================================
   BIKE SERVICES — "WORKSHOP BAY" DESIGN
   Same HTML/classes, new visual language.
   Scoped under #ser so it overrides the site's existing/older
   .ser-text / .ser-img rules (ID selectors beat class selectors).
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --asphalt-900:#15171c;
  --asphalt-800:#1d2027;
  --steel-700:#262b34;
  --steel-600:#323844;
  --hazard-orange:#ff5a1f;
  --hazard-yellow:#ffc93c;
  --paper:#f2f1ec;
  --ink-dim:#a7acb8;
  --line:rgba(255,255,255,0.08);
}

#ser{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,90,31,0.035) 0px,
      rgba(255,90,31,0.035) 14px,
      transparent 14px,
      transparent 28px
    ),
    var(--asphalt-900);
  padding:96px 0;
  position:relative;
  overflow:hidden;
}

#ser::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events:none;
}

#ser .container{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ---------------- grid of 4 boxes ---------------- */
#ser .ser-bot{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  grid-auto-flow:row !important;
  gap:28px !important;
  width:100% !important;
  max-width:100% !important;
  justify-content:stretch !important;
  justify-items:stretch !important;
  align-items:start !important;
  flex-wrap:unset !important;
}

@media (max-width:1024px){
  #ser .ser-bot{ grid-template-columns:repeat(2, 1fr) !important; }
}
@media (max-width:560px){
  #ser .ser-bot{ grid-template-columns:1fr !important; }
}

/* ---------------- the card ---------------- */
#ser .ser-area{
  --delay:0s;
  background:linear-gradient(180deg, var(--steel-700) 0%, var(--asphalt-800) 100%) !important;
  border:1px solid var(--line);
  border-radius:10px;
  padding:40px 26px 32px !important;
  text-align:center;
  position:relative !important;
  isolation:isolate;
  overflow:visible;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  flex:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 40px -20px rgba(0,0,0,0.65) !important;
  opacity:0;
  transform:translateY(28px);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  transition-delay:var(--delay);
}

#ser .ser-area.is-visible{
  opacity:1;
  transform:translateY(0);
}

#ser .ser-area:hover{
  border-color:rgba(255,90,31,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 55px -18px rgba(255,90,31,0.35),
    0 12px 24px -10px rgba(0,0,0,0.6) !important;
}

/* subtle top hazard tab — resets any old ::before on this card */
#ser .ser-area::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:46px; height:4px;
  transform:translate(-50%,-2px);
  background:linear-gradient(90deg, var(--hazard-yellow), var(--hazard-orange));
  border-radius:0 0 4px 4px;
  opacity:.85;
  border:none;
}

/* ---------------- icon zone (hex "nut-head" badge) ---------------- */
#ser .ser-img{
  position:relative !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  background:none !important;
  width:auto !important;
  height:auto !important;
}

#ser .ser-img::before{
  /* rotating dashed ring = spanner tightening around the nut */
  content:"";
  position:absolute;
  top:-10px;
  width:116px;
  height:116px;
  border-radius:50%;
  border:2px dashed rgba(255,90,31,0.45);
  animation:ser-spin 9s linear infinite;
  animation-play-state:paused;
}

#ser .ser-area:hover .ser-img::before{
  animation-play-state:running;
  animation-duration:2.2s;
  border-color:rgba(255,201,60,0.8);
}

#ser .ser-img img{
  width:96px !important;
  height:96px !important;
  object-fit:contain;
  -webkit-clip-path:circle(50% at 50% 50%);
  clip-path:circle(50% at 50% 50%);
  background:linear-gradient(145deg, var(--hazard-orange), #c73d0f);
  padding:12px;
  box-sizing:border-box;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  outline:none !important;
  border:none !important;
  border-radius:50% !important;
  position:static !important;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

/* kill any shadow/glow the site's global CSS might add to <img>
   or to a wrapping element around the icon */
#ser .ser-img,
#ser .ser-img *{
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  text-shadow:none !important;
}
#ser .ser-img::before{
  filter:none !important;
  box-shadow:none !important;
}

#ser .ser-area:hover .ser-img img{
  transform:scale(1.07) rotate(3deg);
}

#ser .ser-img p{
  margin:0 !important;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.14em;
  color:var(--paper) !important;
  text-transform:uppercase;
  position:static !important;
  background:none !important;
}

/* ---------------- text ---------------- */
#ser .ser-text{
  position:static !important;
  background:none !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  display:block !important;
  flex:none !important;
}

#ser .ser-text p{
  margin:0 !important;
  font-family:'Work Sans', sans-serif;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-dim) !important;
  background:none !important;
}

/* animated underline accent, grows on hover */
#ser .bl-d{
  width:28px;
  height:3px;
  margin:18px auto 0 !important;
  background:var(--hazard-orange) !important;
  border-radius:2px;
  transition:width .4s cubic-bezier(.2,.7,.2,1), background .4s ease;
  position:static !important;
}

#ser .ser-area:hover .bl-d{
  width:64px;
  background:linear-gradient(90deg, var(--hazard-orange), var(--hazard-yellow)) !important;
}

@keyframes ser-spin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  #ser .ser-area,
  #ser .ser-img::before,
  #ser .ser-img img,
  #ser .bl-d{
    transition:none !important;
    animation:none !important;
  }
  #ser .ser-area{ opacity:1; transform:none; }
}