/* Services page skin inspired by `bikefixup-static/styles.css`.
   Scoped to `.bfu-services-skin` so we don't accidentally restyle the whole theme. */

.bfu-services-skin{
  --bg: var(--bg, #ffffff);
  --bg-2: var(--bg-alt, #f7f7f8);
  --surface: var(--card-bg, #ffffff);
  --surface-2: var(--bg-alt, #f2f2f3);
  --border: var(--border, #e6e6e8);
  --text: var(--text, #0a0a0a);
  --muted: var(--muted-color, #55565a);
  --svc-primary: #d60b1f;
  --primary-2: #a32626;
  --white: #ffffff;
  --grad: linear-gradient(135deg, var(--svc-primary) 0%, #a32626 100%);
  --shadow: 0 10px 30px -10px rgba(214, 11, 31, .4);
  --radius: 24px;
  --container: 1200px;

  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  line-height: 1.6;
}

.dark .bfu-services-skin{
  --bg: #0f172a;
  --bg-2: #1e293b;
  --surface: #1e293b;
  --surface-2: #334155;
  --border: #334155;
  --text: #f8fafc;
  --muted: #94a3b8;
  --shadow: 0 10px 30px -10px rgba(214, 11, 31, .4);
}

.bfu-services-skin *{box-sizing:border-box}
.bfu-services-skin a{color:inherit;text-decoration:none}
.bfu-services-skin ul{list-style:none;margin:0;padding:0}

.bfu-services-skin .container{max-width:var(--container);margin:0 auto;padding:0 20px}
.bfu-services-skin .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:0.15em;margin-right:-0.15em}

.bfu-services-skin h1,
.bfu-services-skin h2,
.bfu-services-skin h3,
.bfu-services-skin h4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.2;
  font-weight:700;
}

/* Sections */
.bfu-services-skin .section{padding:48px 0;position:relative}
.bfu-services-skin .section.alt{background:var(--bg-2)}
.bfu-services-skin .section-title{
  font-size:clamp(1.8rem,3.5vw,2.5rem);
  text-align:center;
  margin:0 0 12px;
  padding-right:0.15em;
}
.bfu-services-skin .section-sub{
  text-align:center;
  color:var(--muted);
  max-width:720px;
  margin:0 auto 40px;
}

/* Tabs */
.bfu-services-skin .cat-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0 34px}
.bfu-services-skin .cat-tab{
  border:1px solid var(--border);
  background:rgba(255,255,255,.65);
  color:var(--muted);
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:all .2s ease;
}
.dark .bfu-services-skin .cat-tab{background:rgba(255,255,255,.04)}
.bfu-services-skin .cat-tab:hover{border-color:var(--svc-primary);color:var(--svc-primary)}
.bfu-services-skin .cat-tab.active{
  background:var(--grad);
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow);
}

/* Grid + cards */
.bfu-services-skin .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.bfu-services-skin #services-main-grid[data-showing-all="false"] .service-card:nth-child(n+9) {
  display: none !important;
}
.bfu-services-skin .see-more-wrap {
  display: flex !important;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}
.bfu-services-skin .service-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.bfu-services-skin .service-card:hover{border-color:var(--svc-primary);transform:translateY(-4px)}
.bfu-services-skin .service-card:focus-within{border-color:var(--svc-primary);box-shadow:0 0 0 4px rgba(227,6,19,.12)}
.bfu-services-skin .service-card .icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,rgba(227,6,19,.12),rgba(255,43,58,.05));
  border:1px solid rgba(227,6,19,.25);
  display:grid;place-items:center;
  color:var(--svc-primary);
  font-size:22px;
}
.bfu-services-skin .service-card h3{margin:0;font-size:1.1rem}
.bfu-services-skin .service-card .desc{margin:0;color:var(--muted);font-size:.95rem}
.bfu-services-skin .svc-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-weight:600;font-size:.85rem}
.bfu-services-skin .svc-foot{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.bfu-services-skin .svc-foot button{width:100%}
.bfu-services-skin .price{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.3rem;
  font-weight:800;
}
.bfu-services-skin .price small{display:block;font-size:.75rem;color:var(--muted);font-weight:700}

/* Buttons */
.bfu-services-skin .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;
  border:1px solid transparent;cursor:pointer;transition:all .2s ease;
  font-family:inherit;
}
.bfu-services-skin .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.bfu-services-skin .btn-primary:hover{transform:translateY(-2px); filter: brightness(1.1);}

.bfu-services-skin .btn-see-more {
  padding: 14px 50px;
  border-radius: 99px;
  background: transparent;
  color: var(--svc-primary) !important;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 1px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 2px solid var(--svc-primary);
  display: inline-block;
}

.bfu-services-skin .btn-see-more:hover {
  background: var(--svc-primary);
  color: white !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Checklist modal: only show "What's Included" (requested). */
#service-checklist-modal .excluded-section{display:none!important}
#service-checklist-modal .real-content>.grid{grid-template-columns:1fr!important}
.bfu-services-skin .btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.bfu-services-skin .btn-outline:hover{border-color:var(--svc-primary);color:var(--svc-primary)}

/* FAQ tweaks (keep existing markup, just make it feel closer to the prototype) */
.bfu-services-skin .faq-proto .faq-item{border-radius:var(--radius);overflow:hidden}
.bfu-services-skin .faq-proto .faq-trigger{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.bfu-services-skin .faq-proto .faq-answer{
  background:var(--surface);
  border:1px solid rgba(227,6,19,.25);
  border-top:0;
}

/* CTA style used by download/app section wrapper */
.bfu-services-skin .cta-card{
  background:linear-gradient(135deg,rgba(227,6,19,.10),rgba(255,43,58,.04));
  border:1px solid var(--border);
  border-radius:20px;
  padding:54px 28px;
  text-align:center;
}

/* Locations (Our Cities) */
.bfu-services-skin .loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.bfu-services-skin .loc-grid a{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  text-align:center;
  color:var(--muted);
  font-weight:600;
  transition:.25s;
}
.bfu-services-skin .loc-grid a:hover{color:var(--text);border-color:var(--svc-primary);transform:translateY(-2px)}

/* Brands marquee (Our Brands) */
.bfu-services-skin .brands{overflow:hidden}
.bfu-services-skin .brand-track-wrap{
  padding:26px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-2);
}
.bfu-services-skin .brand-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.bfu-services-skin .brand-track{display:flex;gap:22px;width:max-content;animation:bfu-brand-slide 35s linear infinite;padding:0 16px}
.bfu-services-skin .brand-track:hover{animation-play-state:paused}
.bfu-services-skin .brand{
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-weight:800;
  font-size:.9rem;
  white-space:nowrap;
  transition:.25s;
}
.bfu-services-skin .brand:hover{color:var(--text);border-color:var(--svc-primary)}
@keyframes bfu-brand-slide{to{transform:translateX(-50%)}}

@media (max-width: 768px){
  .bfu-services-skin .section{padding:64px 0}
  .bfu-services-skin .service-card{padding:22px}
}