/* Welbourn's of Wisbech: shared styles (Tailwind Play CDN handles utilities) */
:root {
  --blue: #035AD6;
  --blue-light: #3A94E1;
  --ink: #222222;
  --navy: #0A1630;
  --grey: #6C6C6C;
  --mist: #EEF3FB;
  --red: #D62A2A;
}
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: "Barlow", system-ui, sans-serif; color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.font-display { font-family: "Barlow Condensed", "Barlow", sans-serif; }
.h-xl { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: clamp(2.75rem, 1.6rem + 5.6vw, 6.25rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.h-lg { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem); line-height: .95; letter-spacing: -.015em; text-transform: uppercase; }
.h-md { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; }
.lead { font-size: clamp(1.075rem, 1rem + .35vw, 1.3rem); line-height: 1.7; }
.eyebrow { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; }

/* Livery stripe motif */
.stripe { background: repeating-linear-gradient(-55deg, var(--blue) 0 14px, transparent 14px 26px); }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%); }
.cut-tl { clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0 100%, 0 2.5rem); }

/* Live dot */
.live-dot { position: relative; display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; background: var(--red); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--red); animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 1.5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; border-radius: .25rem; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg.arrow { transform: translateX(4px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -10px rgba(3, 90, 214, .7); }
.btn-primary:hover { background: #024bb3; }
.btn-ghost { border: 2px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-outline { border: 2px solid var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; }

/* Header */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(10, 22, 48, .45); background-color: rgba(255, 255, 255, .92); }
.nav-link { position: relative; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); padding: .5rem 0; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--blue); }
.dropdown { visibility: hidden; opacity: 0; transform: translateY(8px); transition: all .2s ease; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { visibility: visible; opacity: 1; transform: translateY(0); }

/* Cards and images */
.card-lift { transition: transform .35s ease, box-shadow .35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10, 22, 48, .45); }
.zoom { overflow: hidden; }
.zoom img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.zoom:hover img, .card-lift:hover .zoom img { transform: scale(1.06); }

/* Marquee */
.marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .1s; } .js .reveal.d2 { transition-delay: .2s; } .js .reveal.d3 { transition-delay: .3s; }

/* Hero image slow drift */
.hero-img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-1.5%); } }

/* FAQ accordion */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .25s ease; }
.faq[open] summary .chev { transform: rotate(180deg); }

/* Forms */
.field { width: 100%; border: 1.5px solid #cfd8e6; background: #fff; border-radius: .25rem; padding: .85rem 1rem; font-size: 1rem; min-height: 3.25rem; transition: border-color .2s ease, box-shadow .2s ease; }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3, 90, 214, .15); outline: none; }
.label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.grecaptcha-badge { visibility: hidden; }
button[disabled] { opacity: .65; cursor: progress; transform: none !important; }

/* Lightbox */
.lightbox { background: transparent; border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(6, 13, 30, .94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Home hero: livery slash with cut-out 24/7 */
.hero-h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.hero-slash { transform: rotate(-4deg); transform-origin: center; }
@media (min-width: 1024px) { .hero-slash { transform: rotate(-7deg); transform-origin: right center; } }
.js .hero-slash.reveal { transform: rotate(-4deg) translateX(40px); }
.js .hero-slash.reveal.in { transform: rotate(-4deg); }
@media (min-width: 1024px) {
  .js .hero-slash.reveal { transform: rotate(-7deg) translateX(80px); }
  .js .hero-slash.reveal.in { transform: rotate(-7deg); }
}
.cutout { font-size: clamp(4.6rem, 2.4rem + 9vw, 11rem); color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cutout {
    background: url("welbourns-wisbech-depot.jpg") 35% 6% / 230% auto no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-stroke: 2px #fff;
  }
}
/* Solid hero panel with an intentional chamfer + livery tab */
.hero-panel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.75rem), calc(100% - 2.75rem) 100%, 0 100%); }
.hero-panel-tab { width: 2rem; height: 2rem; background: var(--red); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) {
  .js .hero-slash.reveal, .js .hero-slash.reveal.in { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .js .hero-slash.reveal, .js .hero-slash.reveal.in { transform: rotate(-7deg); }
}

/* Hero: brand duotone texture + fit CTAs above the fold on short laptop screens */
.hero-texture { background: repeating-linear-gradient(-55deg, rgba(3, 90, 214, .16) 0 2px, transparent 2px 7px); mix-blend-mode: multiply; }
@media (min-width: 1024px) {
  .hero-h1 { font-size: clamp(3.4rem, min(1.2rem + 4.2vw, 8.6vh), 5.5rem); }
  .hero-lead { font-size: 1.15rem; margin-top: 1.25rem; }
  .hero-ctas { margin-top: 1.75rem; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-grid { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .hero-h1 { margin-top: 1rem; }
}
@media (min-width: 1024px) {
  .cutout { font-size: clamp(6rem, min(2.4rem + 9vw, 19vh), 11rem); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-slash { top: 7% !important; }
  .hero-panel { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-panel-copy { display: none; }
}