/* Wycombe FM brand override for the Mikael template.
   Loaded LAST so it wins. Swaps the template's red for the logo's
   green + gold, and replaces the red hero photo with a CSS gradient
   so there is no binary asset to manage. */
:root{
  --wfm-green:#14492B; --wfm-green-deep:#0D3020; --wfm-green-mid:#1E6238;
  --wfm-gold:#C9A22F;  --wfm-gold-lite:#E2C15C;  --wfm-gold-deep:#96751A;
  --wfm-cream:#FAF8F0;
  /* gold dark enough to clear 4.5:1 as small text on the cream veil */
  --wfm-gold-ink:#6F5714;
}
/* every accent the template painted red becomes gold */
.has-first-color,.vlt-counter-up,.vlt-counter-up-small .counter,
.vlt-link-with-arrow__icon,.vlt-services__title a:hover,
.vlt-timeline-item__date,.vlt-award-item__content h6,
.vlt-post-meta a:hover,.vlt-work-meta a:hover{color:var(--wfm-gold)!important}
.vlt-progress-bar__bar,.vlt-btn--primary,
.vlt-timeline-slider-controls .swiper-pagination-bullet-active,
.vlt-testimonial-slider-controls .swiper-pagination-bullet-active{background-color:var(--wfm-gold)!important}
.vlt-btn--primary{color:var(--wfm-green-deep)!important;border-color:var(--wfm-gold)!important}
.vlt-btn--primary:hover{background-color:var(--wfm-gold-lite)!important}
a:hover{color:var(--wfm-gold)}
/* dark slides use the brand green rather than near-black */
.vlt-section[data-brightness="dark"]{background-color:var(--wfm-green)!important}
/* the hero: gradient instead of red-background.jpg */
.vlt-section[data-anchor="Home"]{
  background-image:
    radial-gradient(ellipse 80% 60% at 78% 30%,rgba(201,162,47,.30),transparent 62%),
    linear-gradient(150deg,#1E6238 0%,#14492B 46%,#0D3020 100%)!important;
  background-size:cover!important}
/* light slides warm to cream */
.vlt-section[data-brightness="light"]{background-color:var(--wfm-cream)!important}
/* off-canvas + navbar */
.vlt-offcanvas-menu{background-color:var(--wfm-green-deep)!important}
.vlt-offcanvas-menu a:hover{color:var(--wfm-gold)!important}
/* image slots, for photos not yet supplied */
.wfm-slot{position:relative;overflow:hidden;border-radius:6px;min-height:180px;
  background:repeating-linear-gradient(45deg,rgba(201,162,47,.10) 0 10px,transparent 10px 20px),
             linear-gradient(150deg,rgba(20,73,43,.10),rgba(201,162,47,.12));
  border:1.5px dashed rgba(201,162,47,.55);
  display:grid;place-items:center;text-align:center;padding:22px}
.wfm-slot b{display:block;font:700 13px/1.4 Inter,sans-serif;color:var(--wfm-green);max-width:30ch}
.vlt-section[data-brightness="dark"] .wfm-slot b{color:#fff}
.wfm-slot .d{display:inline-block;margin-top:8px;padding:4px 11px;border-radius:99px;
  background:var(--wfm-green);color:var(--wfm-gold-lite);font:600 10px/1 Inter,sans-serif;letter-spacing:.1em}
.wfm-slot .p{display:block;margin-top:7px;font:500 10px/1.5 ui-monospace,monospace;opacity:.7}
.vlt-section[data-brightness="dark"] .wfm-slot .p{color:#fff}
.wfm-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── hero video ────────────────────────────────────────────────
   Sits behind the headline. Muted + autoplay + playsinline so it
   starts everywhere; the scrim keeps the white type readable. */
/* NOTE: do NOT set position here. pagePiling stacks every .pp-section with
   position:absolute; forcing relative puts this one back into normal flow
   and pushes every later slide down by one viewport, which stops the page
   scrolling at all. The section is already a containing block. */
.vlt-section[data-anchor="Home"]{overflow:hidden}
.wfm-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
.wfm-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(13,48,32,.90) 0%,rgba(13,48,32,.72) 42%,rgba(20,73,43,.34) 68%,rgba(20,73,43,.18) 100%),
    radial-gradient(ellipse 70% 60% at 78% 28%,rgba(201,162,47,.20),transparent 64%)}
.vlt-section[data-anchor="Home"] .vlt-section__vertical-align{position:relative;z-index:2}
/* on a phone the video is a bandwidth cost with little payoff — poster only */
@media(max-width:620px){
  .wfm-hero-video{display:none}
  .vlt-section[data-anchor="Home"]{
    background-image:linear-gradient(100deg,rgba(13,48,32,.92),rgba(20,73,43,.62)),
      url(../video/office-poster.jpg)!important;
    background-size:cover!important;background-position:center!important}
}
@media(prefers-reduced-motion:reduce){.wfm-hero-video{display:none}}

/* ── Services slide: 12 items do not fit one screen ────────────────
   The template centres each slide's content. With 12 services the
   block is taller than the viewport, so centring clipped it at BOTH
   ends — the middle looked blank and the page appeared stuck.
   Fix: align to the top and let the section scroll internally, and
   give the grid the full column width so the cards are wider/shorter. */
.vlt-section[data-anchor="Services"] > .vlt-section__vertical-align{
  align-items:flex-start;
  padding-top:clamp(90px,12vh,140px);
  padding-bottom:clamp(40px,6vh,72px);
}
.vlt-section[data-anchor="Services"]{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* (overflow only — never position) */
/* wider grid = shorter rows */
@media(min-width:992px){
  .vlt-section[data-anchor="Services"] .col-lg-8{flex:0 0 91.66%;max-width:91.66%}
  .vlt-section[data-anchor="Services"] .col-lg-2.offset-lg-1{display:none!important}
}
/* tighten each card */
.vlt-section[data-anchor="Services"] .vlt-services__title{font-size:18px;margin-bottom:7px;line-height:1.3}
.vlt-section[data-anchor="Services"] .vlt-services__text{font-size:13.5px;line-height:1.55;margin-bottom:9px}
.vlt-section[data-anchor="Services"] .vlt-services__link{font-size:12px}
.vlt-section[data-anchor="Services"] .vlt-gap-30{height:16px}
.vlt-section[data-anchor="Services"] .vlt-gap-70{height:26px}
/* 4 across on wide screens → 3 rows instead of 4, so all 12 fit one screen */
@media(min-width:1200px){
  .vlt-section[data-anchor="Services"] .col-lg-4{flex:0 0 25%;max-width:25%}
}
/* below lg the grid is 2 across and genuinely cannot fit — make the internal
   scroll obvious rather than looking frozen */
@media(max-width:991px){
  .vlt-section[data-anchor="Services"] > .vlt-section__vertical-align{
    padding-top:96px;padding-bottom:56px}
}
/* final trim so all 12 fit a 900px-tall screen without internal scrolling */
@media(min-width:1200px){
  .vlt-section[data-anchor="Services"] > .vlt-section__vertical-align{
    padding-top:clamp(74px,8.5vh,104px);padding-bottom:clamp(26px,3vh,44px)}
  .vlt-section[data-anchor="Services"] .vlt-gap-30{height:12px}
  .vlt-section[data-anchor="Services"] .vlt-gap-70{height:20px}
  .vlt-section[data-anchor="Services"] .vlt-services__text{
    font-size:13px;line-height:1.5;margin-bottom:7px}
  .vlt-section[data-anchor="Services"] h4{font-size:22px;line-height:1.32}
}

/* ── Process slide (03): colour correction ─────────────────────────
   He approved this photograph, so it is not being darkened. The fault
   was the type, not the picture: the template paints this slide for a
   near-black panel — white heading, #999 body — and on a bright white
   office interior the body copy measured about 1.3:1. Invisible.

   So the slide is switched to the template's own LIGHT treatment
   (data-brightness="light" on the section) and the copy is recoloured
   into the brand greens. A faint cream veil sits over the photo only
   to even out the window and skyline on the left, where the glass is
   busy enough to break up letterforms. The photo stays bright. */
.vlt-section[data-anchor="Process"] .vlt-section__ken-burn-background::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(250,248,240,.80) 0%,
    rgba(250,248,240,.62) 30%,
    rgba(250,248,240,.34) 58%,
    rgba(250,248,240,.16) 100%)}
.vlt-section[data-anchor="Process"] h1,
.vlt-section[data-anchor="Process"] h1.has-white-color{
  color:var(--wfm-green-deep)!important}
.vlt-section[data-anchor="Process"] .vlt-timeline-item__title,
.vlt-section[data-anchor="Process"] .vlt-timeline-item h2,
.vlt-section[data-anchor="Process"] .vlt-timeline-item h3,
.vlt-section[data-anchor="Process"] .vlt-timeline-item h4,
.vlt-section[data-anchor="Process"] .vlt-timeline-item h5,
.vlt-section[data-anchor="Process"] .vlt-timeline-item h6{
  color:var(--wfm-green-deep)!important}
.vlt-section[data-anchor="Process"] .vlt-timeline-item__text{
  color:#2E3A31!important}
.vlt-section[data-anchor="Process"] .vlt-timeline-item__year{
  color:var(--wfm-gold-ink)!important}
.vlt-section[data-anchor="Process"] .vlt-timeline-item{
  border-color:rgba(20,73,43,.20)!important}
/* footer strip and the vertical social rail sit on the pale left edge */
.vlt-section[data-anchor="Process"] .vlt-footer,
.vlt-section[data-anchor="Process"] .vlt-footer *,
.vlt-section[data-anchor="Process"] .vlt-socials a{
  color:var(--wfm-green-deep)!important}

/* ── Sectors showcase: placeholders must fade like the photos ───────
   The template cross-fades .vlt-project-showcase__image img. A slot that
   has no photo yet is a div, not an img, so it sat outside that rule and
   every empty slot stayed on screen at once. Give the placeholder the
   same active-state fade until its photograph arrives. */
.vlt-project-showcase__image .wfm-slot{
  position:absolute;inset:0;opacity:0;border-radius:0;
  transition:opacity .5s cubic-bezier(.46,.03,.52,.96)}
.vlt-project-showcase__image.is-active .wfm-slot{opacity:1}

/* ── one logo at a time ────────────────────────────────────────────
   vlt-controllers stamps is-light / is-dark on <html> from the active
   slide's data-brightness. The template's switch targets img.black and
   img.white; the wordmark is now inline svg, so point the same switch
   at svg. Default to the white lockup because slide 1 is the dark hero. */
.vlt-navbar-logo svg{display:none}
.vlt-navbar-logo svg.white{display:block}
html.is-dark  .vlt-navbar-logo svg.black{display:block}
html.is-dark  .vlt-navbar-logo svg.white{display:none}
html.is-light .vlt-navbar-logo svg.white{display:block}
html.is-light .vlt-navbar-logo svg.black{display:none}

/* ── progress bars ────────────────────────────────────────────────
   The earlier brand rule painted .vlt-progress-bar__bar, which is the
   TRACK. The moving fill is the inner span, so it stayed Mikael red.
   Fill goes gold; the track becomes a faint green so the bar still
   reads before it animates. */
.vlt-progress-bar__bar{background-color:rgba(20,73,43,.14)!important}
.vlt-progress-bar__bar>span{background-color:var(--wfm-gold)!important}

/* ── the last of Mikael's red ─────────────────────────────────────
   A sweep of computed styles found red still on every arrow link
   (rgb(195,50,58)) and on the testimonial card (rgb(235,0,13)).
   The earlier brand pass caught the named accent classes but not
   these, because the template sets them on the link components. */
.vlt-link-with-arrow,
.vlt-link-with-arrow__text,
.vlt-services__link,
.vlt-work__link,
.vlt-post__link,
.vlt-project-showcase__item.is-active .vlt-project-showcase__item__title a{
  color:var(--wfm-gold-deep)!important}
.vlt-section[data-brightness="dark"] .vlt-link-with-arrow,
.vlt-section[data-brightness="dark"] .vlt-link-with-arrow__text,
.vlt-section[data-brightness="dark"] .vlt-services__link,
.vlt-section[data-brightness="dark"] .vlt-work__link,
.vlt-section[data-brightness="dark"] .vlt-post__link{
  color:var(--wfm-gold-lite)!important}

/* The quote card was solid red on the green slide. Cream keeps the
   slide light — the client rejected dark blocks — and gives the
   quote the strongest contrast on the page. */
.vlt-testimonial-item{
  background-color:var(--wfm-cream)!important;
  border-left:4px solid var(--wfm-gold)!important}
.vlt-testimonial-item,
.vlt-testimonial-item p,
.vlt-testimonial-item h6{color:var(--wfm-green-deep)!important}
.vlt-testimonial-item svg,
.vlt-testimonial-item .vlt-testimonial-item__icon{fill:var(--wfm-gold)!important;color:var(--wfm-gold)!important;opacity:.5}

/* ── slide transition ──────────────────────────────────────────────
   Two faults made this feel slow and sticky:

   1. The CSS and the plugin disagreed on how long a slide takes.
      .pp-easing ran for 1s, while pagePiling's scrollingSpeed (the
      wrapper's data-speed) was 800ms. pagePiling unlocks scrolling on
      its own timer, so for 200ms the slide was still visibly moving
      while already accepting input — the next scroll landed mid-flight
      and fought the one in progress. That is the "lock" feeling.
      Both numbers are now 620ms and MUST be changed together.

   2. `transition: all` made the browser watch every animatable
      property on a full-viewport section. Only the transform moves,
      so animating just that keeps the whole thing on the compositor.

   Curve: leaves quickly, then glides into place — the old
   cubic-bezier(.55,.085,0,.99) crawled for the first third. */
.pp-easing{
  -webkit-transition:-webkit-transform .62s cubic-bezier(.25,.8,.28,1)!important;
  transition:transform .62s cubic-bezier(.25,.8,.28,1)!important}
.pp-section{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .pp-easing{transition-duration:.01s!important}
}

/* ── collapse containers whose image was never supplied ────────────
   The build now emits nothing for an unsupplied photo rather than a
   dashed placeholder box. The template's wrappers still reserve their
   space though, which leaves holes in the layout — so any wrapper left
   empty is removed from flow entirely. When the photo arrives the
   wrapper has content again and reappears on its own. */
.vlt-award-item__logo:empty,
.vlt-slide-photo__inside:empty,
.vlt-slide-photo:empty,
.vlt-project-showcase__image:empty,
.wfm-slot:empty{display:none!important}
/* the accreditation rows read as a clean list once the logo column goes */
.vlt-award-item{display:flex;gap:0;align-items:flex-start}
.vlt-award-item__content{padding-left:0}