/* ==========================================================================
   Foxall & Young — GLOBAL layer (loads site-wide on every page)
   Client feedback: consistent black headings, no sub-headings, light page-title
   band, premium CTA buttons, header cleanup. Scoped surgically so the dark
   footer / header widgets are never affected. CLS-safe, honours reduced-motion.
   ========================================================================== */

:root{
  --fyg-accent:#ffb600;
  --fyg-accent-d:#e6a200;
  --fyg-ink:#000000;
  --fyg-ink-soft:#1a1d1f;
  --fyg-muted:#6b7177;
  --fyg-ease:cubic-bezier(.22,.61,.36,1);
  /* Brand mark height — shared by the main header, sticky header and footer so
     all three match. 52px (real rendered size) x 1.3 = 68px. See logo section. */
  --fyg-logo-h:68px;
}

/* --------------------------------------------------------------------------
   1. HEADINGS — every page/section heading: pure black, bold, uppercase.
   No accent colour, no gradient, no multi-colour. Applied only to genuine
   heading constructs (G5Plus heading widget + card titles) so the dark footer
   headings and amber stat counters are left untouched. NOTE: the page-title
   banner H1 is intentionally excluded here — it now sits on a dark full-width
   hero (section 3 below) and is styled white there.
   -------------------------------------------------------------------------- */
.gf-heading .heading_title,
.gf-heading .heading_title a,
.gf-heading .heading_title strong,
.gf-heading .heading_title span,
.gf-heading .heading_title .accent-color{
  color:var(--fyg-ink) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  background:none !important;                 /* kill any gradient fill */
  -webkit-text-fill-color:var(--fyg-ink) !important;
  text-shadow:none !important;
}

/* Exception: section headings sitting on a DARK band (e.g. the "Ready to start
   your project?" CTA, .skin-dark) must stay white to remain readable — still
   bold, uppercase, no accent. The page-title band is converted to light below,
   and its H1 is not a .gf-heading, so it keeps the black treatment above. */
.skin-dark .gf-heading .heading_title,
.skin-dark .gf-heading .heading_title a,
.skin-dark .gf-heading .heading_title strong,
.skin-dark .gf-heading .heading_title span,
.skin-dark .gf-heading .heading_title .accent-color{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Service / feature card titles are headings too — black + bold, uppercased
   for consistency, kept tight so long names stay tidy. */
.g5plus-feature-box .content-title,
.g5plus-feature-box .content-title a{
  color:var(--fyg-ink) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.01em;
}

/* Uppercase headings run wider — guard against overflow on small screens. */
.gf-page-title h1,
.gf-heading .heading_title,
.g5plus-feature-box .content-title{overflow-wrap:break-word;word-wrap:break-word;}
@media(max-width:600px){
  .gf-page-title .page-title-container h1{font-size:26px !important;line-height:1.2 !important;}
  .gf-heading .heading_title{font-size:22px !important;line-height:1.25 !important;}
}

/* --------------------------------------------------------------------------
   2. SUB-HEADINGS — remove decorative taglines / small labels site-wide.
   .heading_subtitle = "Building And Civil Construction" under every section
   heading; the page-title text column = the "Way In Building…" tagline.
   -------------------------------------------------------------------------- */
.gf-heading .heading_subtitle,
.gf-page-title .wpb_text_column,
.fy-cinfo-eyebrow{                            /* "Get in touch" small label above the contact heading */
  display:none !important;
}

/* Contact-info block heading (enhancement layer): drop the amber highlight and
   match the black / uppercase / bold heading treatment used everywhere else. */
.fy-cinfo-title,
.fy-cinfo-title span{
  color:var(--fyg-ink) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}

/* ==========================================================================
   2b. BODY COPY — readability pass (site-wide).
   The theme leaves paragraph text at a light muted grey (~#6b7177), which reads
   faint on white. Darken all page body copy to a near-black (#1a1d1f, the shared
   --fyg-ink-soft) — reads as black but avoids the eye-strain / halation of pure
   #000 over long paragraphs — and give it a more comfortable line-height and
   crisper rendering. Scope is the content area only:
     • #wrapper-content  → excludes the footer (which lives outside it) and its
       light-on-dark widgets.
     • Paragraph colour is INHERITED in this theme (not set on <p>), so dark CTA
       bands (.gf-skin.skin-dark) get their white text from the row container. We
       darken the inherited copy, then claw the dark bands back to `inherit` so
       their light text is preserved exactly as the theme intends.
   Headings are untouched (they have their own black/bold rules in §1).
   -------------------------------------------------------------------------- */
/* Crisper glyph edges for the darkened text (WebKit/Blink + Firefox). */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* Near-black, easy-to-read body copy across every page's content — reaches text
   INSIDE components too (feature-box `p.feature-description`, FAQ / accordion
   `.vc_toggle_content`, tables, quotes), not just standalone .wpb_text_column
   blocks. Banner body text is display:none (tagline) or a heading (title), so a
   broad `p` sweep is safe there; the breadcrumb is an <li> handled below. */
#wrapper-content p,
#wrapper-content td,
#wrapper-content dd,
#wrapper-content blockquote,
#wrapper-content .wpb_wrapper li,
#wrapper-content .vc_toggle_content li{
  color:var(--fyg-ink-soft);
}
/* More generous, comfortable leading for reading. */
#wrapper-content p,
#wrapper-content .wpb_wrapper li,
#wrapper-content .vc_toggle_content li{
  line-height:1.72;
}
/* Preserve the light copy inside dark CTA / overlay bands — restore the colour
   the theme inherits onto them (do NOT darken text on a dark background). The
   `.skin-dark` selector prefix out-specifies the darkening rules above. */
#wrapper-content .gf-skin.skin-dark p,
#wrapper-content .gf-skin.skin-dark td,
#wrapper-content .gf-skin.skin-dark dd,
#wrapper-content .gf-skin.skin-dark blockquote,
#wrapper-content .gf-skin.skin-dark li{
  color:inherit;
}
/* Optimal measure: keep centred intro paragraphs to a comfortable reading width
   (~68 chars) instead of one long edge-to-edge line. Only the centred intros —
   in-card / column text is already narrow, so it's left alone. */
#wrapper-content .wpb_text_column.text-center{
  max-width:640px;margin-left:auto;margin-right:auto;
}

/* ==========================================================================
   3. PAGE-TITLE BANNER — premium, full-width (edge-to-edge) interior hero.
   Applies to EVERY interior page automatically (home uses front-page.php, which
   has no .gf-page-title). One reusable design; the background image varies by
   section via the existing body.fy-<key> classes, with a solid default for all
   other pages. Big white title, injected breadcrumb, dark gradient + slow zoom,
   soft light + dot decoration, staggered entrance. GPU-only transforms, CLS-safe,
   honours prefers-reduced-motion. Breadcrumb + parallax added by foxall-banner.js.
   -------------------------------------------------------------------------- */
.gf-page-title{
  position:relative;
  width:100%;
  min-height:540px;                 /* desktop 450–600 */
  display:flex;
  align-items:center;
  justify-content:center;           /* centre the (full-width) content flex-child */
  overflow:hidden;
  background-color:#12161a;          /* fallback while the image decodes */
  isolation:isolate;
  --fy-bgy:0px;                       /* parallax offset (set by JS) */
}
/* Background image layer (::before) — bundled webp, cover, slow cinematic zoom.
   background-position carries the JS parallax; transform carries the zoom, so
   the two effects never fight over the same property. */
.gf-page-title::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('../images/Gallery/homepage/homepage-03.webp');
  background-size:cover;
  background-position:center calc(50% + var(--fy-bgy));
  transform:scale(1.12);
  will-change:transform,background-position;
  animation:fyBannerZoom 18s var(--fyg-ease) forwards;
}
/* Gradient overlay + decoration (::after) — full-bleed on .gf-page-title so it
   always covers the whole banner. (The theme's own .gf-bg-overlay sits inside a
   content-height row, so it can't be used for a full-height overlay — it's hidden
   below.) Combines: dark gradient for WCAG text contrast + a soft amber light
   glow (top-right) + a faint dot grid (geometric texture). Gently floats. */
.gf-page-title::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(560px 320px at 82% 16%, rgba(255,182,0,.16), transparent 62%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px),
    linear-gradient(180deg,rgba(10,13,16,.52) 0%,rgba(10,13,16,.60) 45%,rgba(10,13,16,.82) 100%);
  background-size:auto, 26px 26px, auto;
  animation:fyBannerFloat 10s ease-in-out infinite;
}
/* Hide the theme's flat inner overlay (content-height box) — replaced above. */
.gf-page-title .gf-bg-overlay{display:none !important;}
/* Keep the theme's parallax row from clipping / transforming our content. */
.gf-page-title .vc_row,
.gf-page-title .gf-bg-overlay-wrap,
.gf-page-title .wpb-content-wrapper,
.gf-page-title .wpb_column,           /* vc_row-has-fill puts a bg on the column */
.gf-page-title .vc_column-inner,
.gf-page-title .wpb_wrapper{background:transparent !important;position:relative;z-index:1;}
.gf-page-title .vc_parallax-inner{display:none !important;}

/* Content container stays centred + full-width while the background is full-bleed.
   (The theme collapses this column to a narrow, left-aligned width at some
   breakpoints — force it back to a centred, contained column everywhere.) */
.gf-page-title .gf-container.container,
.gf-page-title .container{
  position:relative;z-index:2;text-align:center !important;
  width:100% !important;max-width:1170px !important;
  margin-left:auto !important;margin-right:auto !important;float:none !important;
}
/* Inner WPBakery column/wrapper: full width + centred text (theme left-aligns
   these below the desktop breakpoint, which pushed the title off-screen). */
.gf-page-title .wpb-content-wrapper,   /* the flex child — must be full width */
.gf-page-title .vc_row,
.gf-page-title .wpb_column,
.gf-page-title .vc_column-inner,
.gf-page-title .wpb_wrapper,
.gf-page-title .page-title-container{
  width:100% !important;flex:1 1 100% !important;float:none !important;text-align:center !important;
}
/* Neutralise the demo spacer blocks — height is controlled by the banner itself. */
.gf-page-title .g5plus-space{height:34px !important;}

/* Title — large, bold, uppercase, white, readable. Overrides the inline 35px. */
.gf-page-title h1,
.gf-page-title .page-title-container h1{
  color:#fff !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  font-size:clamp(34px,5vw,60px) !important;
  line-height:1.06 !important;
  letter-spacing:.01em !important;
  margin:0 !important;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.gf-page-title .page-title-container{margin-bottom:0 !important;}

/* Injected breadcrumb (foxall-banner.js) — glassy pill row above the title. */
.gf-page-title .fy-crumb{margin:0 auto 18px;display:flex;justify-content:center;}
.gf-page-title .fy-crumb ol{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none;
  margin:0;padding:9px 18px;border-radius:40px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.gf-page-title .fy-crumb li{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.72);}
.gf-page-title .fy-crumb a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s var(--fyg-ease);}
.gf-page-title .fy-crumb a:hover{color:var(--fyg-accent);}
.gf-page-title .fy-crumb li[aria-current="page"]{color:#fff;}
.gf-page-title .fy-crumb .fy-crumb-sep{opacity:.5;font-weight:400;}

/* Entrance — staggered fade-up. Runs on load; opacity/transform only (no CLS). */
.gf-page-title .fy-crumb,
.gf-page-title .page-title-container{opacity:0;animation:fyBannerUp .8s var(--fyg-ease) forwards;}
.gf-page-title .fy-crumb{animation-delay:.12s;}
.gf-page-title .page-title-container{animation-delay:.26s;}

@keyframes fyBannerUp{from{opacity:0;transform:translate3d(0,26px,0);}to{opacity:1;transform:none;}}
@keyframes fyBannerZoom{from{transform:scale(1.12);}to{transform:scale(1.2);}}
/* Baseline overscan (scale) so the gentle float never exposes a banner edge. */
@keyframes fyBannerFloat{0%,100%{transform:scale(1.06) translate3d(0,0,0);}50%{transform:scale(1.06) translate3d(0,-8px,0);}}

/* Per-section background imagery (driven by existing body classes; default above). */
body.fy-about       .gf-page-title::before{background-image:url('../images/Gallery/homepage/homepage-01.webp');}
body.fy-services    .gf-page-title::before,
body.fy-extensions  .gf-page-title::before,
body.fy-patios      .gf-page-title::before,
body.fy-driveways   .gf-page-title::before,
body.fy-structural-alterations .gf-page-title::before,
body.fy-general-building       .gf-page-title::before,
body.fy-conservation-work      .gf-page-title::before,
body.fy-new-builds  .gf-page-title::before{background-image:url('../images/Gallery/g-young-services-banner.webp');}
body.fy-contact     .gf-page-title::before{background-image:url('../images/Gallery/homepage/homepage-02.webp');}
body.fy-faqs        .gf-page-title::before{background-image:url('../images/Gallery/homepage/homepage-04.webp');}
body.fy-gallery     .gf-page-title::before{background-image:url('../images/Gallery/homepage/homepage-05.webp');}

/* Rotating background slides — service pages feed their own project photos in
   (foxall-redesign.js) so the main banner rolls through them instead of a second
   in-content hero. Slides sit behind the ::after overlay (z-index -2 < -1). */
.gf-page-title .fy-bnr-slides{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.gf-page-title .fy-bnr-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.12);
  transition:opacity 1.3s var(--fyg-ease);
  will-change:opacity;
}
.gf-page-title .fy-bnr-slide.is-active{opacity:1;animation:fyBannerZoom 8s var(--fyg-ease) forwards;}
/* When JS has added rolling slides, hide the single static ::before image. */
.gf-page-title.fy-has-slides::before{display:none;}

/* Responsive heights + spacing. */
@media (max-width:1024px){          /* tablet 350–450 */
  .gf-page-title{min-height:410px;}
}
@media (max-width:600px){           /* mobile 280–350 */
  .gf-page-title{min-height:320px;}
  .gf-page-title .page-title-container h1{font-size:27px !important;line-height:1.15 !important;}
  .gf-page-title .fy-crumb ol{font-size:11px;padding:7px 14px;}
  .gf-page-title .g5plus-space{height:16px !important;}
}

/* Reduced motion — freeze zoom, float, parallax; reveal content instantly. */
@media (prefers-reduced-motion:reduce){
  .gf-page-title::before{animation:none !important;transform:scale(1.06) !important;}
  .gf-page-title::after{animation:none !important;transform:scale(1.06) !important;}
  .gf-page-title .fy-bnr-slide{animation:none !important;transform:scale(1.04) !important;}
  .gf-page-title .fy-crumb,
  .gf-page-title .page-title-container{animation:none !important;opacity:1 !important;transform:none !important;}
}

/* --------------------------------------------------------------------------
   4. HEADER — remove the Twitter + Instagram icons; size the contact icons; the
   phone is made click-to-call and the email a mailto link (foxall-banner.js).
   Facebook is kept and pointed at the real page (foxall-banner.js sets its href).
   Instagram is now removed per client request (was previously shown); the CSS
   here suppresses it pre-JS and foxall-banner.js removes the node.
   -------------------------------------------------------------------------- */
.top-bar li.social-twitter,
.top-bar a[title="Twitter"],
.top-bar li.social-instagram,
.top-bar a[title="Instagram"]{
  display:none !important;
}

/* Services dropdown: "Driveways" is merged into "Patios and Driveways", so its
   standalone nav item is removed. The server-side wp_nav_menu_objects filter
   (inc/foxall-feedback-one.php) drops it from every menu; this :has() rule is the
   visual fallback for any render path that bypasses the filter. It hides the whole
   <li> (not just the link, which would leave an empty slot). */
li.menu-item:has(> a[href*="/services/driveways/"]){display:none !important;}
/* Header phone + email values are swapped server-side (see functions.php) and
   made clickable (tel: / mailto:) client-side (see foxall-banner.js). */

/* Contact icons — enlarged so the click-to-call / email cues read clearly in the
   top bar. Both were previously mismatched: the email icon inherited .fs-12
   (12px, from style.css:8716) while the phone was pushed to 22px.
   The declarations land on the <i>, which beats .fs-12's !important because that
   rule targets the parent .info-shape and only reaches the icon by inheritance —
   any declaration on the element itself wins over an inherited value. */
.top-bar .widget-info_box .info-shape .icon{line-height:1;}
.top-bar .widget-info_box .info-shape .fa-mobile-phone,
.top-bar .widget-info_box .info-shape .fa-mobile,
.top-bar .widget-info_box .info-shape .fa-phone,
.top-bar .widget-info_box .info-shape .fa-envelope-o,
.top-bar .widget-info_box .info-shape .fa-envelope{
  font-size:22px !important;
  vertical-align:middle;
  position:relative;
  top:1px;
}
/* Email icon sized down 20% off the shared 22px. It is deliberately NOT equal to
   the phone: fa-envelope-o is a wide/short glyph and fa-mobile-phone a
   narrow/tall one, so an identical font-size makes the envelope read bulkier.
   17.6px is the optical match, not the arithmetic one. Must come after the block
   above — same specificity, so source order decides. */
.top-bar .widget-info_box .info-shape .fa-envelope-o,
.top-bar .widget-info_box .info-shape .fa-envelope{
  font-size:17.6px !important;
}
/* The phone number is now wrapped in a tel: link — keep it visually identical to
   the surrounding top-bar text, with a subtle amber hover to hint it's clickable. */
.top-bar .widget-info_box .info-content a[href^="tel:"],
.top-bar .widget-info_box .info-content a[href^="mailto:"]{
  color:inherit;text-decoration:none;transition:color .25s var(--fyg-ease);
}
.top-bar .widget-info_box .info-content a[href^="tel:"]:hover,
.top-bar .widget-info_box .info-content a[href^="mailto:"]:hover{color:var(--fyg-accent);}

/* Two-number header phone (Michael Foxall + George Young), injected by
   foxall-banner.js. Sits beside the single phone icon: each number shows the
   owner's name above it, the pair separated by a hairline divider. Compact so it
   stays on one top-bar line on desktop; stacks under 992px. */
.top-bar .widget-info_box .info-content p .fy-hdr-phones-list{
  display:inline-flex;align-items:center;gap:18px;line-height:1.15;vertical-align:middle;
}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list a{
  display:inline-flex;flex-direction:column;color:inherit;text-decoration:none;
  transition:color .25s var(--fyg-ease);position:relative;
}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list a + a{padding-left:18px;}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:currentColor;opacity:.22;
}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list .fy-hdr-name{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.62;font-weight:600;
}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list .fy-hdr-num{
  font-size:14px;font-weight:600;letter-spacing:.01em;
}
.top-bar .widget-info_box .info-content .fy-hdr-phones-list a:hover{color:var(--fyg-accent);}
@media(max-width:991px){
  .top-bar .widget-info_box .info-content p .fy-hdr-phones-list{gap:12px;}
  .top-bar .widget-info_box .info-content .fy-hdr-phones-list a + a{padding-left:12px;}
}

/* Brand logo sizing — main header, sticky header and footer all render the mark
   at ONE height (--fyg-logo-h) so they match exactly. Both assets
   (FoxallAndYoungLogo.png / ...Reversed.png) are 508x245 (aspect 2.073), so a
   shared height gives a shared width (68px -> ~141px) with no distortion.

   WHY 68px AND NOT 72 x 1.3: box-sizing is border-box globally (style.css:891),
   so the old `max-height:72px` INCLUDED the img's 10px vertical padding
   (style.css:5211) — the mark actually rendered at 52px, not 72px. +30% of the
   real 52px is 68px. We zero that padding and set height explicitly, so the
   declared value is now the rendered value and the maths stays honest.

   68px also clears both containers untouched — .logo-header is 94px tall / 200px
   wide on desktop (style.css:5201) and 80px when sticky (style.css:5978) — so the
   brand grows with no change to header height. */
.logo-header .main-logo img,
.logo-header .sticky-logo img{
  height:var(--fyg-logo-h) !important;
  max-height:var(--fyg-logo-h) !important;
  width:auto !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.mobile-logo-header img{max-height:56px !important;width:auto !important;}

/* --------------------------------------------------------------------------
   Sticky header — fast-scroll stability (fixes the "breaking"/partial logo).
   Once affixed, the theme runs a scroll-linked hide/reveal on the header (a
   translateY toggle via `.header-hidden`) AND a transparent→solid background
   fade, both smoothed by `transition: all .5s` (style.css). On a FAST scroll the
   header gets caught mid-transition: shifted partly up — so the logo is clipped at
   the top viewport edge — and only partly opaque — so page content bleeds through
   behind it. Together that reads as a half-shown / broken logo.

   Fix: in the affixed state only, (1) drop the transition so there is no lagging
   half-rendered frame, (2) PIN the header (transform:none) so it never sits mid-
   slide with the logo clipped — the sticky bar stays put once affixed, we do not
   use the theme's auto hide-on-scroll (client preference), and (3) force a solid
   opaque background so nothing ever shows through. `!important` intentionally beats
   the theme's rules and any JS-set inline value. The un-affixed header over the
   hero (.affix-top) is NOT matched here, so it stays transparent as designed. --- */
.header-sticky.affix,
.header-sticky.affix .header-inner,
.header-sticky.affix .logo-header,
.header-sticky.affix .logo-header img,
.header-sticky.affix .mobile-logo-header img{
  transition:none !important;
}
.header-sticky.affix{
  transform:none !important;                 /* pinned: never caught mid-slide → logo never clipped */
  background-color:#fff !important;          /* solid: no content bleed-through */
  box-shadow:0 4px 18px -6px rgba(18,22,26,.18) !important;
}

/* Footer logo — matched to the header mark via the same variable. It was sized
   by max-width:210px, which rendered it 101px tall (BIGGER than the header mark);
   it is now height-driven like the header, so "match" is exact. max-width must be
   released or it would re-cap the height.
   !important is load-bearing: the theme options hold an inline
   `.main-footer-wrapper .fy-footer-logo{max-width:210px;height:auto}` in the DB
   that prints after every stylesheet, so a plain declaration would silently lose.
   The footer wraps the logo in a <p>, hence the block + margin reset. */
.main-footer-wrapper .fy-footer-logo{
  display:block;
  height:var(--fyg-logo-h) !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 22px !important;
}
/* The logo is the first thing in the footer's first column, so it starts flush
   against the row's top edge while the sibling columns start at their headings.
   The leading drops it onto the headings' optical line. Padding, not margin: a
   margin-top here would collapse up through .wpb_wrapper and move the whole
   column instead of the logo. */
.main-footer-wrapper .wpb_text_column .wpb_wrapper > p:first-child:has(> .fy-footer-logo){
  margin:0 0 4px;
  padding-top:16px;
  line-height:0;
}

/* Remove the opening/closing hours from the header info box. Two selectors:
   :last-child works everywhere (hours is the last info line); :has() is the
   precise fallback if the order ever changes (modern browsers). */
.top-bar .widget-info_box .item-display-inline li:last-child{display:none !important;}
.top-bar .widget-info_box li:has(.fa-clock-o){display:none !important;}

/* CTA band ("Ready to start your project?") — the description sits on a dark
   photo and was near-invisible grey. Force it pure white for clear contrast. */
.vc_custom_91001 .wpb_text_column,
.vc_custom_91001 .wpb_text_column p,
.vc_custom_91001 .wpb_wrapper > p{
  color:#ffffff !important;
}

/* --------------------------------------------------------------------------
   5. BUTTONS — premium CTA styling across the whole site.
   Rounded, soft shadow, hover lift + glow, animated arrow, WCAG-safe amber.
   -------------------------------------------------------------------------- */
.btn{
  border-radius:14px !important;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .28s var(--fyg-ease),
             box-shadow .28s var(--fyg-ease),
             background-color .28s var(--fyg-ease),
             border-color .28s var(--fyg-ease),
             color .28s var(--fyg-ease);
}
/* NOTE: no `will-change:transform` here, deliberately. It was promoting EVERY
   button on the site to a permanent compositor layer, which drops subpixel (LCD)
   antialiasing on the button label and makes it read fuzzy — and it's a standing
   memory cost on every button, not just the one being hovered. The hover lift is
   a cheap transform the browser promotes on demand for the 0.28s it runs; the
   hint buys nothing here. Only reintroduce it (scoped to :hover) if a specific
   button measurably janks. */
.btn.btn-rounded{border-radius:40px !important;}

/* Primary amber CTA — dark ink on amber for AA contrast (was white = fail).
   .btn-accent is the class used by the in-content CTAs ("Get in touch",
   "Get a Quote"); the base theme never styled it, so it's defined here too. */
.btn.btn-primary,
.btn.btn-accent,
.wpcf7-submit{
  background-color:var(--fyg-accent) !important;
  border:1px solid var(--fyg-accent) !important;
  color:var(--fyg-ink-soft) !important;
  box-shadow:0 8px 22px -12px rgba(255,182,0,.9);
}
.wpcf7-submit{border-radius:14px !important;font-weight:700;cursor:pointer;
  transition:transform .28s var(--fyg-ease),box-shadow .28s var(--fyg-ease),background-color .28s var(--fyg-ease);}
/* The `body` prefix is load-bearing — it keeps the CTA text dark on hover.
   The theme sets `.btn.btn-primary:hover{color:#ffffff !important}` (style.css:2182).
   That scores (0,3,0), identical to an unprefixed rule here, and !important on
   both sides means SOURCE ORDER decides — style.min.css prints after this file
   (it's enqueued at priority 99; this layer at 40), so the theme won and the
   label flipped black -> white on hover. Background/border escaped that fate only
   because the theme's versions of those aren't !important.
   `body ` takes us to (0,3,1), which beats (0,3,0) outright, order-independent. */
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-accent:hover,
body .btn.btn-accent:focus,
body .wpcf7-submit:hover,
body .wpcf7-submit:focus{
  background-color:var(--fyg-accent-d) !important;
  border-color:var(--fyg-accent-d) !important;
  color:var(--fyg-ink-soft) !important;
  transform:translateY(-3px);
  box-shadow:0 16px 32px -12px rgba(255,182,0,.85), 0 0 0 4px rgba(255,182,0,.18);
}

/* Secondary dark CTA — modernised, subtle amber glow on hover */
.btn.btn-black{
  background-color:var(--fyg-ink-soft) !important;
  border-color:var(--fyg-ink-soft) !important;
  color:#fff !important;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.6);
}
.btn.btn-black:hover,
.btn.btn-black:focus{
  background-color:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 16px 30px -12px rgba(0,0,0,.5), 0 0 0 4px rgba(255,182,0,.22);
}

/* Sliding arrow micro-interaction on the main CTAs */
.btn.btn-primary:after,
.btn.btn-accent:after,
.btn.btn-black:after{
  content:"\f178";                 /* FontAwesome long-arrow-right (loaded site-wide) */
  font-family:FontAwesome;
  font-weight:normal;
  margin-left:10px;
  display:inline-block;
  transform:translateX(0);
  transition:transform .3s var(--fyg-ease);
}
.btn.btn-primary:hover:after,
.btn.btn-accent:hover:after,
.btn.btn-black:hover:after{transform:translateX(6px);}
.btn.btn-primary:active,
.btn.btn-accent:active,
.btn.btn-black:active{transform:translateY(-1px);}

/* Header CTA ("Get A Quote") — gentle idle pulse to draw the eye */
@media (prefers-reduced-motion: no-preference){
  .header-customize .btn.btn-primary,
  .header-customize-nav .btn.btn-primary{
    animation:fygPulse 2.8s ease-in-out infinite;
  }
}
@keyframes fygPulse{
  0%,100%{box-shadow:0 8px 22px -12px rgba(255,182,0,.9);}
  50%    {box-shadow:0 10px 28px -8px rgba(255,182,0,1);}
}

/* Text "Read more →" links — slide the arrow, amber on hover */
.btn-read-more{transition:color .3s var(--fyg-ease);}
.btn-read-more i{display:inline-block;transition:transform .3s var(--fyg-ease);}
.btn-read-more:hover{color:var(--fyg-accent-d) !important;}
.btn-read-more:hover i{transform:translateX(5px);}

/* Keyboard focus visibility (WCAG) */
.btn:focus-visible,
.btn-read-more:focus-visible{
  outline:2px solid var(--fyg-accent);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   6. Reduced motion — kill button/heading motion, keep everything readable.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn,
  .btn:after,
  .btn-read-more i{transition:none !important;animation:none !important;}
  .btn.btn-primary:hover,
  .btn.btn-black:hover{transform:none !important;}
}