/* FAIME Premium — shared design layer injected on every page */

/* ── Hero sections — all audience + service pages ────────────────── */
.hw-hero,.cc-hero,.pm-hero,.dev-hero,
.svc-hero,.tf-hero,.hvac-hero,.elec-hero,.plumb-hero,
.gc-hero,.dr-hero,.eifs-hero,.kb-hero,.repair-hero,.full-hero,.demo-hero,.dw-hero{
  position:relative;
  background-color:var(--navy2);
  overflow:hidden;
}

/* Blueprint grid behind every hero */
.hw-hero::before,.cc-hero::before,.pm-hero::before,.dev-hero::before,
.svc-hero::before,.tf-hero::before,.hvac-hero::before,.elec-hero::before,
.plumb-hero::before,.gc-hero::before,.dr-hero::before,.eifs-hero::before,
.kb-hero::before,.repair-hero::before,.full-hero::before,.dw-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px);
}

/* Radial glow in hero */
.hw-hero::after,.cc-hero::after,.pm-hero::after,.dev-hero::after{
  content:'';position:absolute;top:-10%;left:15%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.055) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

/* Ensure hero inner content is above grid */
.hw-hero-inner,.cc-hero-inner,.pm-hero-inner,.dev-hero-inner,
.svc-hero>.container,.tf-hero>.container{
  position:relative;z-index:1;
}

/* ── Service pages — hero banner upgrade ────────────────────────── */
.svc-hero-banner,.tf-hero,.hvac-hero,.elec-hero,.plumb-hero,
.gc-hero,.dr-hero,.eifs-hero,.kb-hero,.repair-hero,.full-hero,.dw-hero{
  min-height:420px;
  display:flex;align-items:center;
}

/* ── Audience hero h1 sizing upgrade ────────────────────────────── */
.hw-hero h1,.cc-hero h1,.pm-hero h1,.dev-hero h1{
  font-size:clamp(44px,5.5vw,72px)!important;
  line-height:1.0!important;
  letter-spacing:-.01em!important;
}
.hw-hero h1 span,.cc-hero h1 span,.pm-hero h1 span,.dev-hero h1 span{
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Nav upgrade — glass morphism on scroll ─────────────────────── */
.nav-scrolled{
  background:rgba(10,26,53,.96)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

/* ── Service cards global hover glow ───────────────────────────── */
.svc-card,.hw-svc-card,.cc-svc-card,.dev-svc-card,.pm-svc-card{
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s!important;
}
.svc-card:hover,.hw-svc-card:hover,.cc-svc-card:hover,.dev-svc-card:hover,.pm-svc-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.28),0 0 0 1px rgba(201,168,76,.25)!important;
}

/* ── Why/feature cards ──────────────────────────────────────────── */
.why-card,.hw-why-card,.cc-why-card,.dev-why-card,.pm-why-card{
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s!important;
}
.why-card:hover,.hw-why-card:hover,.cc-why-card:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(201,168,76,.3)!important;
}

/* ── Process steps — connecting line accent ─────────────────────── */
.proc-step,.hw-proc-step,.cc-proc-step{
  position:relative;
}

/* ── FAQ items ──────────────────────────────────────────────────── */
.faq-item,.hw-faq-item,.cc-faq-item{
  transition:border-color .2s,background .2s!important;
}
.faq-item:hover,.hw-faq-item:hover,.cc-faq-item:hover{
  border-color:rgba(201,168,76,.3)!important;
}

/* ── CTA sections global upgrade ───────────────────────────────── */
#hw-cta,#cc-cta,#pm-cta,#dev-cta{
  position:relative;overflow:hidden;
}
#hw-cta::before,#cc-cta::before,#pm-cta::before,#dev-cta::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 70%);
  pointer-events:none;
}
#hw-cta::after,#cc-cta::after,#pm-cta::after,#dev-cta::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:350px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,31,63,1) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Contractor portal & document pages ─────────────────────────── */
.portal-hero,.cp-hero,.doc-hero{
  background:linear-gradient(135deg,var(--navy2) 0%,var(--navy) 100%);
  position:relative;overflow:hidden;
}
.portal-hero::before,.cp-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.035) 0,rgba(201,168,76,.035) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.035) 0,rgba(201,168,76,.035) 1px,transparent 1px,transparent 56px);
  pointer-events:none;
}

/* ── Sticky call button hover ───────────────────────────────────── */
.sticky-btn{
  transition:background .2s,box-shadow .2s,transform .2s!important;
}
.sticky-btn:hover{
  background:var(--gold2)!important;
  transform:scale(1.04)!important;
  box-shadow:0 6px 20px rgba(201,168,76,.4)!important;
}

/* ── Footer link hover ──────────────────────────────────────────── */
footer a,.footer a{
  transition:color .2s!important;
}
footer a:hover,.footer a:hover{
  color:var(--gold)!important;
}

/* ── Gold input focus states ────────────────────────────────────── */
input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--gold)!important;
  box-shadow:0 0 0 3px rgba(201,168,76,.15)!important;
}

/* ── Area/city pages hero ────────────────────────────────────────── */
.city-hero{
  position:relative;overflow:hidden;background-color:var(--navy2);
}
.city-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px);
}
.city-hero::after{
  content:'';position:absolute;top:-10%;left:10%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.city-hero .container{position:relative;z-index:1;}
.city-hero h1{
  font-size:clamp(40px,5.5vw,68px)!important;
  line-height:1.0!important;letter-spacing:-.01em!important;
}
.city-hero h1 span{
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Blog / article pages ─────────────────────────────────────── */
.blog-hero,.post-hero,.article-hero,.bl-hero{
  position:relative;overflow:hidden;background:var(--navy2);
}
.blog-hero::before,.post-hero::before,.article-hero::before,.bl-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.035) 0,rgba(201,168,76,.035) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.035) 0,rgba(201,168,76,.035) 1px,transparent 1px,transparent 56px);
}
.bl-hero-inner{position:relative;z-index:1;}

/* ── Project pages ────────────────────────────────────────────── */
.proj-hero,.project-hero{
  position:relative;overflow:hidden;background:var(--navy2);
}
.proj-hero::before,.project-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px);
}
.proj-hero-inner{position:relative;z-index:1;}

/* ── Careers ──────────────────────────────────────────────────── */
.careers-hero,.ca-hero{
  position:relative;overflow:hidden;background:var(--navy2);
}
.careers-hero::before,.ca-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px),
    repeating-linear-gradient(90deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 1px,transparent 56px);
}

/* ── Service pages — cred-bar enhancement ───────────────────────── */
.cred-bar{background:var(--navy2)!important;}
.cred-bar-inner{
  position:relative;
  border:1px solid rgba(201,168,76,.15)!important;
  overflow:hidden;
}
.cred-bar-inner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent);
  pointer-events:none;
}
.cred-item{
  transition:background .25s!important;
  cursor:default;
}
.cred-item:hover{background:rgba(201,168,76,.06)!important;}
.cred-num{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Service pages — wwd-card (what we do) hover ────────────────── */
.wwd-card,.wwd-item{
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s!important;
}
.wwd-card:hover,.wwd-item:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(201,168,76,.3)!important;
}

/* ── Process step number circles ─────────────────────────────────── */
.step-num,.proc-num,.process-num{
  background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.08))!important;
  border:1px solid rgba(201,168,76,.35)!important;
  color:var(--gold)!important;
}

/* ── Area pages — trust bar items ───────────────────────────────── */
.ctb-item{
  background:rgba(201,168,76,.08)!important;
  border:1px solid rgba(201,168,76,.2)!important;
  transition:background .2s,border-color .2s!important;
}
.ctb-item:hover{
  background:rgba(201,168,76,.14)!important;
  border-color:rgba(201,168,76,.4)!important;
}

/* ── Area pages — service list items ────────────────────────────── */
.city-svc-item,.area-svc-item{
  transition:background .2s,transform .2s!important;
}
.city-svc-item:hover,.area-svc-item:hover{
  background:rgba(201,168,76,.06)!important;
  transform:translateX(4px)!important;
}

/* ── Project cards hover ─────────────────────────────────────────── */
.proj-card,.project-card{
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s!important;
}
.proj-card:hover,.project-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.3)!important;
}

/* ── Careers page highlight ──────────────────────────────────────── */
.ca-benefit,.career-benefit{
  transition:background .2s,border-color .2s!important;
}
.ca-benefit:hover,.career-benefit:hover{
  border-color:rgba(201,168,76,.35)!important;
  background:rgba(201,168,76,.05)!important;
}

/* ── Section number labels ──────────────────────────────────────── */

:root{
  --navy:#0C1F3F;
  --navy2:#0a1a35;
  --gold:#C9A84C;
  --gold2:#E5C060;
  --offwhite:#F4F6F9;
  --text:#3D4B5C;
  --radius:10px;
  --transition:.3s cubic-bezier(.4,0,.2,1);
}

/* ── Page entrance fade ────────────────────────────────────────── */
/* opacity ONLY — a transform here (even ending at none) makes <body> the
   containing block for position:fixed and pins WhatsApp/scroll-top/cookie
   floats to the page bottom instead of the screen. */
@keyframes pageFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
body{animation:pageFadeIn .4s cubic-bezier(.16,1,.3,1);}

/* ── Scroll reveal base states ─────────────────────────────────── */
.sr{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.sr-l{opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.sr-r{opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.sr-scale{opacity:0;transform:scale(.93);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.sr-visible.sr,.sr-visible.sr-l,.sr-visible.sr-r,.sr-visible.sr-scale{opacity:1;transform:none;}


/* ── Gold scroll-progress bar ──────────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  z-index:9999;transition:width .05s linear;pointer-events:none;
}

/* ── Nav scroll state ──────────────────────────────────────────── */
nav.nav-scrolled,#nav.nav-scrolled,.site-nav.nav-scrolled{
  box-shadow:0 4px 30px rgba(0,0,0,.25);
}

/* ── Button hover enhancements (additive) ──────────────────────── */
.btn-gold:hover{box-shadow:0 8px 28px rgba(201,168,76,.4)!important;filter:brightness(1.08)!important;}
.btn-gold:active{transform:translateY(0)!important;}

/* ── Section headline global style (additive only — no color override) ── */
.section-eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:16px;display:block;
}

/* ── Stat card / number block ──────────────────────────────────── */
.stat-card{
  padding:32px 24px;text-align:center;
  border:1px solid rgba(201,168,76,.15);border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  transition:border-color var(--transition),background var(--transition),transform var(--transition);
}
.stat-card:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.04);transform:translateY(-4px);}
.stat-num{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(42px,6vw,72px);
  font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-card .stat-label{font-family:'Barlow',sans-serif;font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}

/* ── Feature card / service card ──────────────────────────────── */
.feature-card{
  padding:36px 28px;border-radius:var(--radius);
  border:1px solid rgba(201,168,76,.12);
  background:rgba(255,255,255,.03);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(201,168,76,.06),transparent);
  opacity:0;transition:opacity var(--transition);
}
.feature-card:hover{border-color:rgba(201,168,76,.35);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.3);}
.feature-card:hover::before{opacity:1;}

/* ── Gold separator line ───────────────────────────────────────── */
.gold-rule{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:none;margin:0;}
.gold-dot-rule{display:flex;align-items:center;gap:16px;margin:0 0 28px;}
.gold-dot-rule::before,.gold-dot-rule::after{content:'';flex:1;height:1px;background:rgba(201,168,76,.25);}

/* ── Video cards ───────────────────────────────────────────────── */
.vid-card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--navy2);
  border:1px solid rgba(201,168,76,.15);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  cursor:pointer;
}
.vid-card:hover{border-color:rgba(201,168,76,.5);transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.4);}
.vid-label{
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(12,31,63,.95),rgba(12,31,63,.6));
}
.vid-label strong{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  color:#fff;letter-spacing:.04em;display:block;
}
.vid-label span{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.08em;text-transform:uppercase;}

/* ── Trust badges row ──────────────────────────────────────────── */
.trust-badges{display:flex;flex-wrap:wrap;align-items:center;gap:20px;}
.trust-badge{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:40px;
  background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  color:var(--gold);letter-spacing:.08em;text-transform:uppercase;
}
.trust-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* ── Hero section enhancements ─────────────────────────────────── */
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);
  border-radius:40px;padding:6px 16px 6px 10px;
  font-family:'Barlow Condensed',sans-serif;font-size:13px;
  font-weight:700;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:20px;
}
.hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:hkDot 2s ease-in-out infinite;}
@keyframes hkDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.6);}}

/* ── Responsive utilities ──────────────────────────────────────── */
@media(max-width:768px){
  .hide-mobile{display:none!important;}
  .section-title{font-size:32px;}
  .cta-band{padding:40px 24px;}
}
@media(min-width:769px){
  .hide-desktop{display:none!important;}
}

/* ── Print safety: reveal animated cards, hide chrome ─────────── */
@media print{
  #scroll-progress{display:none!important}
  .svc-card,.why-card,.reveal,.reveal-l,.reveal-r,.fm-reveal{opacity:1!important;transform:none!important;transition:none!important}
  #faime-cookie-card,#fm-cookie-chip,#fm-curtain,#fm-progress{display:none!important}
}

/* ── Hero headline legibility over photographic backgrounds ───── */
.hw-hero h1,.pm-hero h1,.cc-hero h1,.dev-hero h1,.careers-hero h1,
.hw-hero .hero-kicker,.pm-hero .hero-kicker,.cc-hero .hero-kicker,.dev-hero .hero-kicker{
  text-shadow:0 2px 28px rgba(7,20,40,.9),0 1px 4px rgba(7,20,40,.7);
}