/*
Theme Name: Fylde MotoTec Premium V2.6
Theme URI: https://fyldemototec.co.uk/
Author: Fylde MotoTec
Description: Premium responsive WordPress website for Fylde MotoTec with the preferred compact logo header, photographic hero, professional project gallery, services and contact pages.
Version: 2.6.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: fylde-mototec
License: GPL-2.0-or-later
*/

:root {
  --fm-red: #ed1c24;
  --fm-red-dark: #b70e15;
  --fm-black: #07080a;
  --fm-panel: #101216;
  --fm-panel-2: #171a20;
  --fm-line: rgba(255,255,255,.11);
  --fm-text: #f5f6f8;
  --fm-muted: #b4b8c1;
  --fm-light: #f4f5f7;
  --fm-ink: #15171b;
  --fm-radius: 18px;
  --fm-shadow: 0 18px 55px rgba(0,0,0,.24);
  --fm-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fm-black);
  color: var(--fm-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .site-header { top: 32px; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto !important; width: auto; height: auto; margin: 0; padding: .75rem 1rem;
  background: #fff; color: #000; z-index: 100000; top: 1rem; left: 1rem;
}
.container { width: min(calc(100% - 40px), var(--fm-max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.site-main { overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(7,8,10,.93); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fm-line);
}
.header-inner {
    width: min(calc(100% - 40px), 1360px);
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 2px solid var(--fm-red); border-radius: 10px; color: #fff;
  font-weight: 900; font-style: italic; letter-spacing: -.08em;
}
.brand-name { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-style: italic; line-height: 1; }
.brand-name span { color: var(--fm-red); }
.brand-tag { display: block; margin-top: 6px; color: var(--fm-muted); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-style: normal; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: .92rem; font-weight: 700; color: #e7e8eb; }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--fm-red); }
.nav-cta { padding: 11px 18px; border-radius: 999px; background: var(--fm-red); color: #fff !important; }
.nav-toggle {
  display: none; width: 46px; height: 42px; border: 1px solid var(--fm-line); border-radius: 10px;
  background: transparent; color: #fff; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; display: block; width: 20px; height: 2px; background: currentColor; transition: .2s ease;
}
.nav-toggle span { margin: 5px 0; }
/* Facebook header button */
.facebook-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 14px 6px 8px;
    border-radius: 12px;
    background: #1877f2;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(24,119,242,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}

.facebook-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(24,119,242,.35);
}

.facebook-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #1877f2;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.facebook-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    white-space: nowrap;
}

.facebook-header-text small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
}

.facebook-header-text strong {
    font-size: 13px;
    margin-top: 3px;
}

.facebook-header-arrow {
    font-size: 24px;
    line-height: 1;
    margin-left: 2px;
}
.home-main {
  background:
    linear-gradient(rgba(7,8,10,.96), rgba(7,8,10,.985)),
    var(--fm-home-bg, none) top center / 100% auto no-repeat fixed;
}
.hero {
  position: relative; padding: 0; background-color: #000; border-bottom: 1px solid var(--fm-line);
}
.hero-background {
  background-image: var(--fm-home-bg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.hero-background::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(0,0,0,.78) 100%);
}
.hero-spacer { min-height: clamp(330px, 37.5vw, 760px); }
.hero-strip {
  position: relative; z-index: 2; width: min(calc(100% - 40px), var(--fm-max)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0 26px;
}
.hero-strip p { margin: 0; color: #e7e9ed; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
.section-glass { background: rgba(7,8,10,.88); backdrop-filter: blur(8px); }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent; text-decoration: none; font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--fm-red); color: #fff; box-shadow: 0 10px 24px rgba(237,28,36,.24); }
.button-primary:hover { background: #ff2b33; }
.button-secondary { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.04); }
.button-dark { background: var(--fm-ink); color: #fff; }
.button-light { background: #fff; color: var(--fm-ink); }

.section { padding: 92px 0; }
.section-compact { padding: 66px 0; }
.section-panel { background: var(--fm-panel); }
.section-light { background: var(--fm-light); color: var(--fm-ink); }
.section-red { background: linear-gradient(120deg, var(--fm-red-dark), var(--fm-red)); color: #fff; }
.eyebrow { margin: 0 0 12px; color: var(--fm-red); font-size: .8rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.section-light .eyebrow, .section-red .eyebrow { color: var(--fm-red-dark); }
.section-red .eyebrow { color: rgba(255,255,255,.75); }
h1, h2, h3 { margin: 0 0 18px; line-height: 1.1; letter-spacing: -.025em; }
h1 { font-size: clamp(2.45rem, 5vw, 5rem); max-width: 920px; }
h2 { font-size: clamp(2rem, 3.6vw, 3.45rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 18px; }
.lead { color: var(--fm-muted); font-size: clamp(1.08rem, 1.8vw, 1.3rem); max-width: 760px; }
.section-light .lead { color: #545963; }

.intro-grid, .about-grid, .contact-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: center; }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fact {
  min-height: 135px; padding: 22px; background: var(--fm-panel-2); border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius);
}
.fact strong { display: block; color: #fff; font-size: 1.25rem; }
.fact span { color: var(--fm-muted); font-size: .92rem; }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; }
.card {
  position: relative; min-height: 270px; padding: 28px; border-radius: var(--fm-radius);
  background: linear-gradient(145deg, #181b21, #0f1115); border: 1px solid var(--fm-line);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; right: -32px; bottom: -44px; width: 110px; height: 110px;
  border: 18px solid rgba(237,28,36,.08); border-radius: 50%;
}
.card-number { display: block; margin-bottom: 38px; color: var(--fm-red); font-weight: 900; letter-spacing: .1em; }
.card p { color: var(--fm-muted); font-size: .95rem; }
.card-link { display: inline-block; margin-top: 10px; color: #fff; text-decoration: none; font-weight: 800; }
.card-link::after { content: "  →"; color: var(--fm-red); }

.speciality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.speciality {
  padding: 26px; border-radius: var(--fm-radius); background: #fff; border: 1px solid #dfe2e8;
  box-shadow: 0 10px 28px rgba(25,27,31,.06);
}
.speciality-icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 20px;
  border-radius: 12px; background: #121419; color: #fff; font-weight: 900;
}
.speciality p { color: #5a606b; }
/* Specialist installations section */
.brand-section,
.brand-section > .container {
    background: #000 !important;
    color: #fff;
}

.brand-section h2 {
    color: #fff;
}

.brand-section .brand-copy {
    background: #fff;
    color: #5a606b;
}
/* Brand logos */
.brand-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.brand-logos img {
    width: 100%;
    height: 115px;
    object-fit: contain;
    display: block;
    background: #000;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 16px;
}

@media (max-width: 780px) {
    .brand-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brand-logos img {
        height: 95px;
        padding: 12px;
    }
}


/* Recent work and gallery */
.section-work { background: linear-gradient(180deg, rgba(8,9,11,.97), rgba(15,17,21,.98)); }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.section-heading-row .lead { margin-bottom: 0; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-card, .product-showcase figure, .gallery-page-card {
  margin: 0; overflow: hidden; border: 1px solid var(--fm-line); border-radius: var(--fm-radius);
  background: #101216; box-shadow: 0 14px 35px rgba(0,0,0,.22);
}
.work-card-wide { grid-column: span 2; }
.work-card a, .gallery-page-card a { display: block; overflow: hidden; background: #050608; }
.work-card img { width: 100%; height: 270px; display: block; object-fit: cover; transition: transform .35s ease; }
.work-card-wide img { height: 360px; }
.work-card:hover img, .gallery-page-card:hover img { transform: scale(1.025); }
.work-card figcaption, .product-showcase figcaption, .gallery-page-card figcaption { display: grid; gap: 2px; padding: 17px 19px 19px; }
.work-card figcaption strong, .product-showcase figcaption strong, .gallery-page-card figcaption strong { color: #fff; font-size: 1rem; }
.work-card figcaption span, .gallery-page-card figcaption span { color: var(--fm-muted); font-size: .88rem; }
.product-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0 22px; }
.product-showcase figure { background: #111318; border-color: rgba(21,23,27,.14); }
.product-showcase img { width: 100%; height: 255px; display: block; object-fit: cover; }
.product-showcase figcaption span { color: #aeb3bd; font-size: .88rem; }
.gallery-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-page-card img { width: 100%; height: 300px; display: block; object-fit: cover; transition: transform .35s ease; }
.gallery-note { max-width: 880px; margin: 30px 0 0; color: #8f949d; font-size: .82rem; }

.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 38px; counter-reset: process; }
.process-step { padding: 26px 0 0; border-top: 1px solid var(--fm-line); }
.process-step::before { counter-increment: process; content: "0" counter(process); display: block; color: var(--fm-red); font-weight: 900; margin-bottom: 18px; }
.process-step p { color: var(--fm-muted); }

.check-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--fm-red); font-weight: 900; }
.stat-panel {
  min-height: 360px; display: grid; place-items: center; align-content: center; padding: 40px;
  border-radius: 28px; background: linear-gradient(150deg, #1d2026, #0d0f12); border: 1px solid var(--fm-line);
  text-align: center;
}
.stat-number { color: var(--fm-red); font-size: clamp(4.5rem, 9vw, 8rem); font-weight: 950; line-height: .9; letter-spacing: -.08em; }
.stat-label { max-width: 260px; margin-top: 22px; color: var(--fm-muted); }

.make-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.make-strip span { padding: 10px 15px; border: 1px solid var(--fm-line); border-radius: 999px; color: #d8dbe0; font-weight: 700; font-size: .9rem; }
.disclaimer { margin-top: 20px; color: #8f949d; font-size: .78rem; }

.page-hero { padding: 82px 0 66px; background: radial-gradient(circle at 70% 0, #242832 0, #0e1014 44%, #07080a 78%); border-bottom: 1px solid var(--fm-line); }
.page-hero .lead { max-width: 720px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.side-panel { padding: 28px; border-radius: var(--fm-radius); background: var(--fm-panel-2); border: 1px solid var(--fm-line); position: sticky; top: 112px; }
.side-panel h3 { margin-bottom: 12px; }
.side-panel p, .side-panel li { color: var(--fm-muted); }
.side-panel ul { margin: 0; padding-left: 20px; }
.service-list { display: grid; gap: 18px; }
.service-row { padding: 28px; border-radius: var(--fm-radius); background: var(--fm-panel); border: 1px solid var(--fm-line); }
.service-row h2 { font-size: 1.55rem; }
.service-row p { color: var(--fm-muted); }

.contact-card { padding: 34px; border-radius: var(--fm-radius); background: #fff; border: 1px solid #dfe2e8; box-shadow: 0 16px 40px rgba(18,20,24,.08); }
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-details strong { display: block; margin-bottom: 2px; font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; color: #777d87; }
.contact-details a { color: var(--fm-red-dark); font-weight: 750; }
.contact-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field label { display: block; margin-bottom: 7px; font-weight: 750; color: #292c32; }
.form-field input, .form-field textarea {
  width: 100%; border: 1px solid #cfd3da; border-radius: 11px; background: #fff; color: #17191d;
  padding: 13px 14px; outline: none;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--fm-red); box-shadow: 0 0 0 3px rgba(237,28,36,.11); }
.form-field textarea { min-height: 160px; resize: vertical; }
.form-note { font-size: .82rem; color: #676d77; }
.form-status { padding: 14px 16px; border-radius: 10px; margin-bottom: 20px; }
.form-status.success { background: #e8f7ed; color: #155d2f; }
.form-status.error { background: #fee9ea; color: #8e1117; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.site-footer { background: #050608; border-top: 1px solid var(--fm-line); }
.footer-grid { display: grid; grid-template-columns: 1.25fr .75fr .9fr; gap: 50px; padding: 62px 0 42px; }
.footer-title { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-style: italic; font-size: 1.25rem; }
.footer-title span { color: var(--fm-red); }
.footer-copy { color: var(--fm-muted); max-width: 460px; margin-top: 16px; }
.footer-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; color: #fff; margin-bottom: 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { color: var(--fm-muted); text-decoration: none; }
.footer-links a:hover { color: var(--fm-red); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid var(--fm-line); color: #858a94; font-size: .8rem; }
.footer-bottom a { color: #b7bbc3; }

.entry-content { min-height: 40vh; }
.prose h2 { margin-top: 42px; font-size: 1.8rem; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: var(--fm-muted); }
.prose a { color: #ff4b52; }
.prose ul { padding-left: 22px; }
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; }

@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .speciality-grid, .product-showcase, .gallery-page-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card-wide { grid-column: span 2; }
  .intro-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .content-grid { grid-template-columns: 1fr; }
  .side-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  body.admin-bar .site-header { top: 46px; }
  .header-inner { min-height: 72px; }
  .brand-tag { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 18px 20px 24px;
    background: #0a0b0e; border-bottom: 1px solid var(--fm-line);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { align-items: stretch; flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--fm-line); }
  .site-nav a { display: block; padding: 13px 4px; }
  .nav-cta { margin-top: 12px; text-align: center; }
  .hero-background { background-size: contain; }
  .hero-spacer { min-height: 260px; }
  .hero-strip { align-items: flex-start; flex-direction: column; padding-top: 18px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; }
  .section-heading-row .button { width: auto; }
  .section { padding: 68px 0; }
  .section-compact { padding: 52px 0; }
  .card-grid, .speciality-grid, .process-grid, .fact-grid, .form-grid, .product-showcase, .gallery-page-grid, .work-grid { grid-template-columns: 1fr; }
  .work-card-wide { grid-column: auto; }
  .work-card img, .work-card-wide img, .gallery-page-card img { height: 260px; }
  .card { min-height: auto; }
  .page-hero { padding: 64px 0 50px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid > :first-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--fm-max)); }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: .9rem; }
  .button { width: 100%; }
  h1 { font-size: 2.35rem; }
  .hero-spacer { min-height: 225px; }
}



/* Premium V2 homepage */
.premium-hero{position:relative;min-height:calc(100svh - 82px);display:grid;place-items:center;isolation:isolate;background-image:var(--fm-hero-bg);background-size:cover;background-position:center 58%;background-attachment:fixed;border-bottom:1px solid var(--fm-line)}
.premium-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--fm-hero-bg);background-size:cover;background-position:center 58%}
.premium-hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,4,6,.94) 0%,rgba(3,4,6,.82) 43%,rgba(3,4,6,.58) 75%,rgba(3,4,6,.72) 100%),linear-gradient(0deg,rgba(3,4,6,.93) 0%,transparent 44%,rgba(3,4,6,.40) 100%)}
.premium-hero-content{padding-block:80px 110px;text-align:left}
.premium-hero-logo{display:block;width:min(760px,88vw);height:auto;margin:0 0 28px;filter:drop-shadow(0 18px 36px rgba(0,0,0,.55))}
.premium-kicker{margin:0 0 12px;color:#fff;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:800}
.premium-hero h1{max-width:900px;margin:0;font-size:clamp(2.1rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.premium-lead{max-width:760px;margin:24px 0 0;color:#e4e6ea;font-size:clamp(1.05rem,1.6vw,1.3rem);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.premium-actions{margin-top:34px}.button-ghost{border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.15);color:#fff;backdrop-filter:blur(8px)}.button-ghost:hover{background:#fff;color:#111}
.premium-trust{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:38px;color:#d2d5da;font-size:.83rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.premium-trust span::before{content:"✓";color:var(--fm-red);margin-right:8px}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;text-decoration:none;font-size:1.7rem;line-height:1;color:#fff;animation:fm-bob 1.8s ease-in-out infinite}
@keyframes fm-bob{50%{transform:translate(-50%,7px)}}
.premium-intro{position:relative}.premium-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0,rgba(237,28,36,.11),transparent 38%);pointer-events:none}
.text-link{font-weight:800;text-decoration:none;color:#fff}.text-link:hover{color:var(--fm-red)}
.premium-cards .card{position:relative;overflow:hidden}.premium-cards .card::after{content:"";position:absolute;inset:auto -20% -55% 40%;height:180px;background:radial-gradient(circle,rgba(237,28,36,.16),transparent 65%);pointer-events:none}
.brand-section{background:linear-gradient(180deg,#f4f5f7,#fff);color:var(--fm-ink)}.brand-section .eyebrow{color:var(--fm-red)}.brand-pills{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 34px}.brand-pills span{padding:10px 16px;border:1px solid #d9dce2;border-radius:999px;background:#fff;font-weight:900;letter-spacing:.03em;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.cta-band{padding:64px 0;background:linear-gradient(120deg,#b70e15,#ed1c24 55%,#a90d13);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}.cta-inner h2{margin:.2rem 0}.cta-inner p{margin:0}.cta-band .button-primary{background:#fff;color:#111}.cta-band .button-primary:hover{background:#111;color:#fff}
.page-hero{position:relative;background-image:linear-gradient(rgba(4,5,7,.82),rgba(4,5,7,.94)),url('assets/images/akrapovic-hero.webp');background-size:cover;background-position:center 55%;background-attachment:fixed}
@media(max-width:900px){.premium-hero{min-height:780px;background-attachment:scroll}.premium-hero::before{background-position:62% center}.premium-hero-overlay{background:linear-gradient(0deg,rgba(3,4,6,.97) 0%,rgba(3,4,6,.72) 72%,rgba(3,4,6,.62) 100%)}.premium-hero-content{padding-block:76px 100px}.premium-hero-logo{width:min(680px,94vw)}.cta-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.premium-hero{min-height:690px}.premium-hero-content{padding-block:54px 88px}.premium-hero-logo{margin-bottom:20px}.premium-hero h1{font-size:2.25rem}.premium-lead{font-size:1rem}.premium-trust{display:grid;gap:8px;margin-top:28px}.premium-actions{align-items:stretch}.premium-actions .button{width:100%;text-align:center}.brand-pills span{font-size:.85rem}.page-hero{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.premium-hero,.page-hero{background-attachment:scroll}.scroll-cue{animation:none}}


/* Premium project-poster gallery */
.project-poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.project-poster {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.project-poster a { display: block; background: #fff; }
.project-poster img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform .3s ease, filter .3s ease;
}
.project-poster:hover img { transform: scale(1.012); filter: contrast(1.015); }
.project-poster-featured { grid-column: 1 / -1; }
.project-poster-grid-gallery { align-items: start; }
.project-poster-grid-gallery .project-poster:nth-child(4),
.project-poster-grid-gallery .project-poster:nth-child(5) {
  align-self: stretch;
}
.brand-copy {
  max-width: 840px;
  padding: 24px 28px;
  border: 1px solid #d9dce2;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.brand-copy p { color: #4f545e; }
.text-link-dark { color: var(--fm-ink); }
.text-link-dark:hover { color: var(--fm-red); }

@media (max-width: 860px) {
  .project-poster-grid { grid-template-columns: 1fr; }
  .project-poster-featured { grid-column: auto; }
}


/* V2.3 full-width homepage banner */
.full-banner-hero {
  background: #030406;
  border-bottom: 1px solid var(--fm-line);
}
.full-banner-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.full-banner-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px max(6vw, 24px);
  background: #050608;
}
.full-banner-strip p {
  margin: 0;
  color: #e7e9ed;
  font-weight: 800;
  letter-spacing: -.01em;
}
@media (max-width: 760px) {
  .full-banner-strip {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 20px 26px;
  }
  .full-banner-strip .button {
    width: 100%;
    text-align: center;
  }
}


/* V2.5 accessory fitting showcase */
.accessory-page-hero {
  padding: 86px 0 72px;
  background:
    radial-gradient(circle at 76% 15%, rgba(237,28,36,.17), transparent 30%),
    linear-gradient(145deg, #171a20 0%, #08090b 58%, #030405 100%);
  border-bottom: 1px solid var(--fm-line);
}
.accessory-page-hero .lead { max-width: 830px; }
.accessory-page-intro {
  padding: 34px;
  margin-top: 34px;
  border: 1px solid var(--fm-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 20px 55px rgba(0,0,0,.22);
}
.accessory-page-intro strong { color: #fff; }
.accessory-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.accessory-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #e7e9ed;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
}
.accessory-jump a:hover {
  border-color: var(--fm-red);
  color: #fff;
  background: rgba(237,28,36,.11);
}
.accessory-showcase {
  background:
    radial-gradient(circle at 10% 20%, rgba(24,28,35,.72), transparent 34%),
    linear-gradient(180deg, #090a0d 0%, #050608 100%);
}
.accessory-showcase-container {
  width: min(calc(100% - 34px), 1480px);
  margin-inline: auto;
}
.accessory-poster-list {
  display: grid;
  gap: 34px;
}
.accessory-poster {
  scroll-margin-top: 104px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: linear-gradient(145deg, #171a20, #0b0d10);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.accessory-poster a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
}
.accessory-poster img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .28s ease, filter .28s ease;
}
.accessory-poster a:hover img {
  transform: scale(1.006);
  filter: contrast(1.015);
}
.accessory-poster figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 10px 5px;
  color: var(--fm-muted);
  font-size: .86rem;
}
.accessory-poster figcaption strong {
  color: #fff;
  font-size: .98rem;
}
.accessory-open-note {
  color: #8f949d;
  white-space: nowrap;
}
.accessory-choice-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0 0 38px;
}
.accessory-choice {
  padding: 24px;
  border: 1px solid var(--fm-line);
  border-radius: 18px;
  background: #101216;
}
.accessory-choice strong {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 1.12rem;
}
.accessory-choice span { color: var(--fm-muted); }
@media (max-width: 760px) {
  .accessory-page-hero { padding: 64px 0 52px; }
  .accessory-page-intro { padding: 23px; }
  .accessory-choice-strip { grid-template-columns: 1fr; }
  .accessory-poster-list { gap: 22px; }
  .accessory-poster { padding: 5px; border-radius: 16px; }
  .accessory-poster a { border-radius: 11px; }
  .accessory-poster figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 11px 7px 4px;
  }
  .accessory-open-note { white-space: normal; }
}
/* Gallery project captions */
.project-poster-grid-gallery {
    align-items: start;
    gap: 28px;
}

.project-poster-grid-gallery .project-poster {
    margin: 0;
    overflow: hidden;
    background: #17191e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

.project-poster-grid-gallery .project-poster > a {
    display: block;
}

.project-poster-grid-gallery .project-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.project-poster-grid-gallery .project-caption {
    padding: 20px 22px 24px;
    background: #17191e;
}

.project-poster-grid-gallery .project-caption h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: normal;
}

.project-poster-grid-gallery .project-caption p {
    margin: 0;
    color: #b8bdc7;
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .project-poster-grid-gallery {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .project-poster-grid-gallery .project-caption {
        padding: 18px;
    }
}
/* Accessibility contrast improvements */
.button-primary {
    background: #b5121b;
    color: #ffffff;
}

.button-primary:hover,
.button-primary:focus-visible {
    background: #8f0e15;
    color: #ffffff;
}

.section-panel .eyebrow {
    color: #ff7a80;
}
/* Desktop navigation button contrast */
.nav-cta {
    background: #b5121b;
    color: #ffffff !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    background: #8f0e15;
    color: #ffffff !important;
}
/* Uniform gallery image and title sizing */
.project-poster-grid-gallery .project-poster > a {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ffffff;
}

.project-poster-grid-gallery .project-poster > a img {
    display: block;
    width: 100%;
    height: 100%;
object-fit: contain;
}
/* Enlarge the Royal Enfield gallery image only */
.project-poster-grid-gallery img[src*="royal-enfield-interceptor-650-gallery"] {
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
}
.project-poster-grid-gallery .project-caption {
    padding: 18px 20px;
}

.project-poster-grid-gallery .project-caption h2 {
    margin: 0;
    line-height: 1.2;
    min-height: 2.4em;
}
/* Mobile Facebook header button */
@media (max-width: 780px) {

    .header-inner {
        gap: 10px;
    }

    .brand {
        order: 1;
    }

    .facebook-header-btn {
        order: 2;
        margin-left: auto;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 10px;
        box-shadow: none;
    }

    .facebook-header-icon {
        width: 30px;
        height: 30px;
        font-size: 23px;
    }

    .facebook-header-text,
    .facebook-header-arrow {
        display: none;
    }

    .nav-toggle {
        order: 3;
        margin-left: 0;
    }

    .site-nav {
        order: 4;
    }
}

/* Mobile Facebook pill */
.button-facebook-mobile {
    display: none;
}

@media (max-width: 780px) {

    /* Keep Facebook out of the mobile header */
    .facebook-header-btn {
        display: none !important;
    }

    /* Show Facebook as the third full-width mobile pill */
    .button-facebook-mobile {
        display: inline-flex;
        width: 100%;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 0 22px;
        border-radius: 999px;
        background: #1877f2;
        color: #fff !important;
        text-decoration: none;
        font-weight: 800;
        box-shadow: 0 10px 24px rgba(24,119,242,.28);
    }

    .facebook-pill-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        color: #1877f2;
        display: grid;
        place-items: center;
        font-size: 21px;
        font-weight: 900;
        line-height: 1;
        flex: 0 0 30px;
    }
}
/* Accessory fitting enquiry feature */
.accessory-contact-visual {
    background: linear-gradient(90deg, #080808 0%, #160809 50%, #080808 100%);
    overflow: hidden;
    padding: 0;
}

.accessory-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
    grid-template-areas:
        "copy rider"
        "action rider";
    align-items: center;
    column-gap: 48px;
    min-height: 540px;
}

.accessory-contact-copy {
    grid-area: copy;
    padding-top: 64px;
}

.accessory-contact-copy .eyebrow {
    color: #ed1c24;
}

.accessory-contact-copy h2 {
    color: #fff;
    margin-bottom: 20px;
}

.accessory-contact-copy > p:not(.eyebrow) {
    color: #f5f5f5;
    max-width: 660px;
}

.accessory-contact-rider {
    grid-area: rider;
    align-self: end;
    display: block;
}

.accessory-contact-rider img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 520px;
    margin-left: auto;
}

.accessory-contact-action {
    grid-area: action;
    padding-bottom: 64px;
}

.accessory-contact-action .button {
    min-width: 220px;
    justify-content: center;
}


/* Mobile accessory fitting enquiry */
@media (max-width: 780px) {

    .accessory-contact-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "rider"
            "action";
        min-height: 0;
        row-gap: 0;
    }

    .accessory-contact-copy {
        padding: 48px 0 24px;
    }

    .accessory-contact-copy h2 {
        font-size: clamp(2.2rem, 10vw, 3.4rem);
        line-height: 1.08;
    }

    .accessory-contact-rider img {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .accessory-contact-action {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 38px 24px 46px;
        background: #ed1c24;
        text-align: center;
    }

    .accessory-contact-action .button {
        width: min(100%, 560px);
        min-height: 58px;
        margin: 0 auto;
        border-radius: 999px;
    }
}
/* Polish desktop accessory enquiry image */
@media (min-width: 781px) {

    .accessory-contact-visual {
        background: #050505;
    }

    .accessory-contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(560px, 700px);
        column-gap: 20px;
        min-height: 560px;
    }

    .accessory-contact-rider {
        align-self: stretch;
        display: flex;
        align-items: flex-end;
        margin-right: -60px;
    }

    .accessory-contact-rider img {
        width: 100%;
        max-width: 700px;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        margin-left: auto;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 15%,
            #000 100%
        );
    }
}
/* Improve Facebook button accessibility contrast */
.button-facebook-mobile,
.facebook-header-btn {
    background-color: #0B57D0 !important;
    color: #ffffff !important;
}
/* Services page manufacturer grid */
.make-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.make-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 12px 10px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.02em;
}

.make-grid span:hover {
    border-color: #d61c24;
}

.make-more {
    margin-top: 22px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.make-more::before {
    content: "PLUS ";
    color: #d61c24;
}

.disclaimer {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

@media (max-width: 760px) {
    .make-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .make-grid span {
        min-height: 52px;
        font-size: 14px;
    }

    .make-more {
        font-size: 17px;
    }
}