/* ==========================================================================
   Foxall & Young — Home page (front-page.php)
   Shares the site design language: pure-black bold uppercase headings,
   amber (#ffb600) accent, generous whitespace, soft shadows, CLS-safe motion.
   Scope: body.fy-home  (enqueued only on is_front_page()).
   ========================================================================== */

body.fy-home{
  --fy-accent:#ffb600;
  --fy-accent-d:#e6a200;
  --fy-ink:#000;
  --fy-ink-soft:#1a1d1f;
  --fy-muted:#6b7177;
  --fy-line:rgba(20,22,24,.10);
  --fy-bg-soft:#f5f6f7;
  --fy-shadow:0 26px 60px -28px rgba(18,22,26,.40);
  --fy-shadow-sm:0 14px 30px -16px rgba(18,22,26,.30);
  --fy-ease:cubic-bezier(.22,.61,.36,1);
  --fy-radius:16px;
}

/* Break the home OUT of the theme's boxed content container so every section is
   full-bleed (edge-to-edge). front-page.php content is nested in
   #primary-content > .container.clearfix > .row > .col-md-12 (Bootstrap), each of
   which caps width / adds gutters — neutralise them all on the home page only. */
body.fy-home #main-content,
body.fy-home .page-content,
body.fy-home #wrapper-content,
body.fy-home #primary-content{padding:0 !important;margin:0 !important;}
body.fy-home #primary-content > .container,
body.fy-home #primary-content .row,
body.fy-home #primary-content [class*="col-md-"]{
  width:100% !important;max-width:none !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:0 !important;padding-right:0 !important;
  flex:0 0 100% !important;
}
body.fy-home #fy-home{overflow-x:hidden;}

.fy-home *{box-sizing:border-box;}
.fy-container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}

/* ---- Shared type -------------------------------------------------------- */
.fy-home .fy-h2{
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--fy-ink);
  margin:0 0 18px;
}
.fy-kicker,.fy-eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fy-accent-d);margin-bottom:14px;
}
.fy-sec-head{max-width:720px;margin:0 auto 46px;text-align:center;}
.fy-sec-sub{font-size:17px;line-height:1.7;color:var(--fy-muted);margin:0;}

/* ---- Buttons ------------------------------------------------------------ */
.fy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:12px;font-weight:700;font-size:15px;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;position:relative;
  overflow:hidden;border:1px solid transparent;
  transition:transform .28s var(--fy-ease),box-shadow .28s var(--fy-ease),
             background-color .28s var(--fy-ease),color .28s var(--fy-ease),
             border-color .28s var(--fy-ease);
}
.fy-btn-primary{background:var(--fy-accent);color:var(--fy-ink-soft);border-color:var(--fy-accent);}
.fy-btn-primary:hover{background:var(--fy-accent-d);border-color:var(--fy-accent-d);color:var(--fy-ink-soft);transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(230,162,0,.7);}
/* Keep the CTA label dark (and un-underlined) on hover.
   The page is wrapped in <div id="gf-wrapper" class="gf-skin skin-light">, and the
   skin sheet sets `.skin-light a:hover{color:#ffb600}` (assets/skin/skin-light.min.css).
   That's (0,2,1) vs (0,2,0) for `.fy-btn-primary:hover` above, and skin-light.min.css
   also loads after this file — so it won twice over and painted the label amber ON an
   amber button, i.e. near-invisible. The same rule supplies the colour for the
   `a:hover{text-decoration:underline}` line from style.css:2601.
   The skin's declaration has no !important, so !important here beats it outright
   regardless of specificity or load order. Scoped to a.fy-btn so it can't leak. */
body.fy-home a.fy-btn-primary,
body.fy-home a.fy-btn-primary:hover,
body.fy-home a.fy-btn-primary:focus{
  color:var(--fy-ink-soft) !important;
  text-decoration:none !important;
}
.fy-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.fy-btn-ghost:hover{background:#fff;color:var(--fy-ink);border-color:#fff;transform:translateY(-3px);}
.fy-btn:before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--fy-ease);}
.fy-btn:hover:before{left:130%;}

/* ========================================================== 1.1 HERO ===== */
.fy-hero{position:relative;min-height:88vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;padding:120px 0 96px;}
.fy-hero-bg{position:absolute;inset:0;z-index:0;}
.fy-hero-frame{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--fy-ease),transform 7s linear;}
.fy-hero-frame.is-active{opacity:1;transform:scale(1);}
/* Overlay matches the interior page banner: dark gradient (contrast) + a soft
   amber light glow (top-right) + a faint dot grid, gently floating. */
.fy-hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(600px 340px at 82% 18%, 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:fyHeroFloat 10s ease-in-out infinite;}
@keyframes fyHeroFloat{0%,100%{transform:scale(1.06) translate3d(0,0,0);}50%{transform:scale(1.06) translate3d(0,-8px,0);}}
.fy-hero-inner{position:relative;z-index:2;max-width:820px;}
.fy-eyebrow{color:var(--fy-accent);}
/* !important + body scope: the theme's own h1 colour rule is more specific than a
   single class and was painting the plain "Welcome to" line dark (only the amber
   <span> survived). Force the base line white. */
body.fy-home .fy-hero-title{font-size:clamp(40px,6.6vw,78px);line-height:1.02;font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;margin:0 0 22px;color:#fff !important;}
body.fy-home .fy-hero-title span{color:var(--fy-accent) !important;}
.fy-hero-lead{font-size:clamp(17px,1.9vw,21px);line-height:1.65;max-width:640px;
  color:rgba(255,255,255,.9) !important;margin:0 0 34px;} /* !important: beats the global #wrapper-content p body-copy darkening (light text on the dark hero) */
.fy-hero-cta{display:flex;gap:16px;flex-wrap:wrap;}
.fy-hero-dots{position:absolute;bottom:30px;left:0;right:0;z-index:2;
  display:flex;gap:10px;justify-content:center;}
.fy-hero-dot{width:34px;height:4px;border-radius:4px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .3s var(--fy-ease);}
.fy-hero-dot.is-active{background:var(--fy-accent);}

/* ============================================== 1.2 INTRO + STATS ========= */
.fy-intro{padding:96px 0;background:#fff;}
.fy-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.fy-intro-copy p{font-size:17px;line-height:1.75;color:var(--fy-muted);margin:0 0 30px;max-width:560px;}
/* Stat counters — boxed cards. Each stat sits in its own elevated white card
   with an amber edge, a soft corner glow and a hover lift; the number counts
   up slowly on first view (foxall-home.js). */
.fy-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin:6px 0 36px;max-width:560px;}
.fy-stat{position:relative;padding:28px 26px 24px;background:#fff;
  border:1px solid var(--fy-line);border-radius:16px;box-shadow:var(--fy-shadow-sm);
  overflow:hidden;
  transition:transform .35s var(--fy-ease),box-shadow .35s var(--fy-ease),border-color .35s var(--fy-ease);}
.fy-stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--fy-accent),var(--fy-accent-d));}
.fy-stat:after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,182,0,.16),transparent 70%);
  pointer-events:none;}
.fy-stat:hover{transform:translateY(-5px);box-shadow:var(--fy-shadow);
  border-color:rgba(255,182,0,.35);}
.fy-stat-num{position:relative;display:block;font-size:clamp(42px,5vw,60px);font-weight:800;
  line-height:1;color:var(--fy-ink);letter-spacing:-.01em;}
.fy-stat-num:after{content:attr(data-suffix);color:var(--fy-accent);}
.fy-stat-label{position:relative;display:block;margin-top:10px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--fy-muted);}
.fy-intro-media{position:relative;}
.fy-intro-photo{width:100%;aspect-ratio:4/3.4;border-radius:var(--fy-radius);
  background-size:cover;background-position:center;box-shadow:var(--fy-shadow);}

/* ============================================= WHAT WE DO (services) ====== */
.fy-services{padding:96px 0;background:var(--fy-bg-soft);}
.fy-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* Service cards — icon chip + a dark ink fill that sweeps up on hover with a
   full colour inversion (replaces the old amber top-line). Rich, tactile state
   change; the icon flips to a solid-amber chip and the arrow slides. */
.fy-svc-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--fy-line);border-radius:var(--fy-radius);
  padding:32px 28px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .45s var(--fy-ease),box-shadow .45s var(--fy-ease),border-color .45s var(--fy-ease);
}
/* ink fill sweeping up from the bottom */
.fy-svc-card:before{
  content:"";position:absolute;inset:0;z-index:-1;background-color:#15181b;
  background-image:linear-gradient(160deg,rgba(255,182,0,.14) 0%,#15181b 52%,#0d0f11 100%);
  transform:translateY(101%);transition:transform .55s var(--fy-ease);
}
.fy-svc-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px rgba(12,15,18,.62);border-color:transparent;}
.fy-svc-card:hover:before{transform:translateY(0);}
/* Kill the amber underline that appeared across the card on hover.
   The card is an <a>, and the theme sets `a:hover,a:focus{text-decoration:underline}`
   (style.css:2601). That selector scores (0,1,1) — higher than the (0,1,0) of
   `.fy-svc-card{text-decoration:none}` on the base rule above — so it won.
   text-decoration then propagates from the <a> down to every inline descendant
   and is painted in the <a>'s OWN colour, which is why one link-hover rule drew a
   yellow line under the title, the description and the link text all at once.
   Re-stating it on :hover/:focus scores (0,2,0) and takes it back. Keep :focus in
   the list or the underline returns for keyboard users only — a nasty one to spot. */
.fy-svc-card:hover,
.fy-svc-card:focus,
.fy-svc-card:focus-visible{text-decoration:none;}
/* That underline was, by accident, the ONLY focus affordance these cards had —
   the theme kills the native ring with `a{outline:none}` (style.css:2598), so
   removing it above would leave keyboard users with nothing (WCAG 2.4.7 fail).
   Replace it with a real focus ring, matching the .btn:focus-visible convention
   in foxall-global.css. :focus-visible means pointer users never see it. */
.fy-svc-card:focus-visible{
  outline:2px solid var(--fy-accent);
  outline-offset:3px;
}

/* icon chip */
.fy-svc-ico{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:15px;margin:0 0 22px;background:rgba(255,182,0,.14);color:var(--fy-accent-d);
  transition:background .45s var(--fy-ease),color .45s var(--fy-ease),transform .45s var(--fy-ease),box-shadow .45s var(--fy-ease);}
.fy-svc-ico svg{width:28px;height:28px;}
.fy-svc-card:hover .fy-svc-ico{background:var(--fy-accent);color:#15181b;
  transform:translateY(-3px) rotate(-4deg);box-shadow:0 14px 26px -10px rgba(255,182,0,.7);}

/* text — inverts to light on the dark hover fill */
.fy-svc-title{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  color:var(--fy-ink);margin:0 0 12px;transition:color .45s var(--fy-ease);}
.fy-svc-desc{font-size:15px;line-height:1.65;color:var(--fy-muted);margin:0 0 22px;flex:1;
  transition:color .45s var(--fy-ease);}
.fy-svc-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--fy-ink);transition:color .45s var(--fy-ease);}
.fy-svc-link svg{width:18px;height:18px;color:var(--fy-accent-d);
  transition:transform .35s var(--fy-ease),color .45s var(--fy-ease);}
.fy-svc-card:hover .fy-svc-title{color:#fff;}
/* !important: the global readability rule `#wrapper-content p{color:#1a1d1f}`
   (ID specificity) pins this <p> dark and would out-specify a plain hover rule,
   leaving the description invisible on the dark hover fill. */
.fy-svc-card:hover .fy-svc-desc{color:rgba(255,255,255,.78) !important;}
.fy-svc-card:hover .fy-svc-link{color:var(--fy-accent);}
.fy-svc-card:hover .fy-svc-link svg{transform:translateX(6px);color:var(--fy-accent);}

/* Respect reduced-motion: keep the colour/fill state change, drop the movement. */
@media (prefers-reduced-motion:reduce){
  .fy-svc-card,.fy-svc-card:before,.fy-svc-ico,.fy-svc-link svg{transition-duration:.001ms;}
  .fy-svc-card:hover{transform:none;}
  .fy-svc-card:hover .fy-svc-ico{transform:none;}
}

/* ============================================= 1.3 WHY CHOOSE US ========== */
.fy-why{padding:96px 0;background:#fff;}
.fy-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.fy-why-card{padding:38px 32px;border-radius:var(--fy-radius);background:var(--fy-bg-soft);
  border:1px solid var(--fy-line);transition:transform .3s var(--fy-ease),box-shadow .3s var(--fy-ease);}
.fy-why-card:hover{transform:translateY(-6px);box-shadow:var(--fy-shadow);}
.fy-why-ico{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:14px;background:var(--fy-ink);color:var(--fy-accent);margin-bottom:22px;
  transition:background .45s var(--fy-ease),box-shadow .45s var(--fy-ease);}
.fy-ico{width:30px;height:30px;}
/* Icon spins a full turn when its card is hovered. The inner SVG carries the
   rotation (the tile stays put), and 360deg lands it back at origin for a clean
   loop. Slight tile lift + amber glow adds a premium touch. Disabled below for
   users who prefer reduced motion. */
.fy-why-ico .fy-ico{transition:transform .7s cubic-bezier(.34,1.3,.4,1);}
.fy-why-card:hover .fy-why-ico{box-shadow:0 12px 26px -12px rgba(255,182,0,.7);}
.fy-why-card:hover .fy-why-ico .fy-ico{transform:rotate(360deg);}
.fy-why-title{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  color:var(--fy-ink);margin:0 0 14px;line-height:1.2;}
.fy-why-desc{font-size:15px;line-height:1.7;color:var(--fy-muted);margin:0;}

/* ============================================= 1.4 CERTIFICATES =========== */
.fy-certs{padding:96px 0;background:var(--fy-bg-soft);}
.fy-cert-logos{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:stretch;}
/* Accreditation logos shown in full colour (trust marks) on clean white cards. */
.fy-cert-logo{background:#fff;border:1px solid var(--fy-line);border-radius:16px;padding:30px 44px;
  display:flex;align-items:center;justify-content:center;min-width:220px;min-height:150px;
  box-shadow:var(--fy-shadow-sm);
  transition:transform .3s var(--fy-ease),box-shadow .3s var(--fy-ease),border-color .3s var(--fy-ease);}
.fy-cert-logo:hover{transform:translateY(-6px);box-shadow:var(--fy-shadow);border-color:transparent;}
.fy-cert-logo img{max-width:190px;max-height:104px;height:auto;width:auto;display:block;object-fit:contain;}
.fy-cert-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.fy-cert-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:#fff;border:1px solid var(--fy-line);border-radius:var(--fy-radius);padding:30px 22px;
  transition:transform .3s var(--fy-ease),box-shadow .3s var(--fy-ease);}
.fy-cert-badge:hover{transform:translateY(-5px);box-shadow:var(--fy-shadow-sm);}
.fy-cert-badge svg{width:38px;height:38px;color:var(--fy-accent-d);}
.fy-cert-badge span{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.4;color:var(--fy-ink);}

/* ============================================= CTA BAND =================== */
.fy-cta{position:relative;overflow:hidden;padding:96px 0;background:var(--fy-ink);color:#fff;text-align:center;}
/* Decoration to match the banners: amber glow (top-centre) + faint dot grid. */
.fy-cta-deco{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 360px at 50% -6%, rgba(255,182,0,.18), transparent 60%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px);
  background-size:auto, 26px 26px;}
.fy-cta-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;}
.fy-cta-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fy-accent);margin-bottom:16px;}
/* !important: beat the theme's own h2 colour rule (as with the hero title). */
body.fy-home .fy-cta-title{color:#fff !important;font-size:clamp(28px,3.6vw,44px);font-weight:800;
  line-height:1.1;text-transform:uppercase;letter-spacing:.005em;margin:0 0 16px;}
.fy-cta-lead{font-size:17px;line-height:1.7;color:rgba(255,255,255,.8) !important;margin:0 0 34px;max-width:620px;} /* !important: beats the global #wrapper-content p body-copy darkening (light text on the dark CTA band) */
.fy-cta-btn{padding:16px 36px;font-size:16px;}
.fy-cta-btn svg{width:18px;height:18px;transition:transform .3s var(--fy-ease);}
.fy-cta-btn:hover svg{transform:translateX(4px);}
/* "or call us direct" divider */
.fy-cta-divider{display:flex;align-items:center;gap:16px;width:100%;max-width:420px;margin:40px auto 26px;
  color:rgba(255,255,255,.5);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;}
.fy-cta-divider:before,.fy-cta-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.14);}
/* Contact cards */
.fy-cta-phones{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;width:100%;}
.fy-phone-card{display:flex;align-items:center;gap:15px;text-align:left;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:16px 24px;min-width:250px;
  transition:transform .3s var(--fy-ease),background .3s var(--fy-ease),
             border-color .3s var(--fy-ease),box-shadow .3s var(--fy-ease);}
.fy-phone-card:hover{transform:translateY(-5px);background:rgba(255,182,0,.10);
  border-color:var(--fy-accent);box-shadow:0 18px 34px -18px rgba(0,0,0,.7);}
.fy-phone-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:13px;background:var(--fy-accent);color:var(--fy-ink);
  transition:transform .3s var(--fy-ease);}
.fy-phone-card:hover .fy-phone-ico{transform:scale(1.06) rotate(-6deg);}
.fy-phone-ico svg{width:23px;height:23px;}
.fy-phone-info{display:flex;flex-direction:column;}
.fy-phone-info strong{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--fy-accent);margin-bottom:3px;}
.fy-phone-info span{font-size:20px;font-weight:700;letter-spacing:.02em;line-height:1.1;}

/* ============================================= Scroll reveal (CLS-safe) === */
.fy-anim body.fy-home .fy-reveal{opacity:0;transform:translate3d(0,32px,0);
  transition:opacity .8s var(--fy-ease),transform .8s var(--fy-ease);will-change:opacity,transform;}
/* will-change:auto is NOT cosmetic — it fixes blurry text.
   will-change:transform promotes the section to its own compositor layer, and a
   promoted layer is rasterised into a GPU texture WITHOUT subpixel (LCD)
   antialiasing — the compositor can't know what's behind it, so it falls back to
   greyscale AA and the text reads soft/fuzzy. It was declared on the base rule
   and never released, so every revealed section kept that layer permanently,
   long after the 0.8s animation finished. Releasing it here lets the text
   re-rasterise normally once the reveal is done. Per MDN: will-change is a
   last-resort hint and must be removed when the element stops animating. */
.fy-anim body.fy-home .fy-reveal.is-visible,
.fy-anim-fallback body.fy-home .fy-reveal{opacity:1 !important;transform:none !important;
  will-change:auto;}

@media (prefers-reduced-motion:reduce){
  .fy-home *{transition:none !important;animation:none !important;}
  .fy-hero-frame{transform:none !important;}
  .fy-why-card:hover .fy-why-ico .fy-ico{transform:none !important;} /* no snap-spin */
}

/* ============================================= Responsive ================= */
@media (max-width:1024px){
  .fy-svc-grid{grid-template-columns:repeat(2,1fr);}
  .fy-cert-badges{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .fy-intro-grid{grid-template-columns:1fr;gap:56px;}
  .fy-intro-media{order:-1;}
  .fy-why-grid{grid-template-columns:1fr;}
  .fy-hero{min-height:80vh;padding:110px 0 90px;}
}
@media (max-width:560px){
  .fy-container{padding:0 18px;}
  .fy-intro,.fy-services,.fy-why,.fy-certs{padding:64px 0;}
  .fy-svc-grid,.fy-cert-badges{grid-template-columns:1fr;}
  .fy-hero-cta{width:100%;}
  .fy-hero-cta .fy-btn{flex:1;}
  .fy-stats{gap:14px;}
  .fy-stat{padding:22px 20px;}
  .fy-cta{padding:64px 0;}
  .fy-cta-phones{flex-direction:column;align-items:stretch;}
  .fy-phone-card{min-width:0;width:100%;}
}