/* ===================================================================
   BIKE SERVICES — "WORKSHOP BAY" DESIGN
   Same HTML/classes, new visual language.
   Theme: two-wheeler workshop — asphalt dark, hazard-orange accent,
   hex "nut-head" icon badges with a rotating spanner-ring that
   revs up on hover.
   =================================================================== */

@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);
}

.services{
  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;
}

.services::before{
  /* faint garage-floor grid */
  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;
}

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

/* ---------------- grid of 4 boxes ---------------- */
.ser-bot{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}

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

/* ---------------- the card ---------------- */
.ser-area{
  --delay:0s;
  background:linear-gradient(180deg, var(--steel-700) 0%, var(--asphalt-800) 100%);
  border:1px solid var(--line);
  border-radius:10px;
  padding:40px 26px 32px;
  text-align:center;
  position:relative;
  isolation:isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 40px -20px rgba(0,0,0,0.65);
  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-area.is-visible{
  opacity:1;
  transform:translateY(0);
}

.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);
}

/* subtle top hazard tab */
.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;
}

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

.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:spin 9s linear infinite;
  animation-play-state:paused;
}

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

.ser-img img{
  width:96px;
  height:96px;
  object-fit:cover;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(145deg, var(--hazard-orange), #c73d0f);
  padding:6px;
  box-sizing:border-box;
  filter:saturate(1.05);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

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

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

/* ---------------- text ---------------- */
.ser-text{
  position:relative;
}

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

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

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

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

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