/* ===== EUROSTILE WEBFONT ===== */
@font-face{
  font-family: "Eurostyle";
  src: url("../fonts/Eurostyle-Normal.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}:root{
  --bg:#0b0f12;
  --fg:#f2f4f6;
  --muted:rgba(242,244,246,.78);
  --line:rgba(242,244,246,.14);
  --gold:#b8842e;
  --gold2:#d3a34f;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --wrap:1120px;
}

*{box-sizing:border-box}
html, body{ height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1;
}

  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap), calc(100% - 40px)); margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Full page video */
.bgVideo{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-3;
  transform:scale(1.02);
  filter:brightness(.80) contrast(1.08);
}
.bgOverlay{
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.80)),
    radial-gradient(70% 60% at 30% 20%, rgba(184,132,46,.10), transparent 60%);
}
/* Mobile Fixes*/

html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ---- FORCE REMOVE ANY TOP STRIP ABOVE HEADER ---- */
.utility,
.headerTop,
.topbar,
.announcement,
.noticeBar{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Make the main header the ONLY sticky bar */
.header{
  top: 0 !important;
}

/* Prevent any default spacing */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}


/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(12,14,18,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242,244,246,.14);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand__logo{width:170px;height:auto;display:block;filter: drop-shadow(0 10px 24px rgba(0,0,0,.35))}

/* Nav */
.nav{display:flex;align-items:center;gap:18px;font-size:14px}
.nav a{padding:10px 10px;border-radius:10px;color:rgba(242,244,246,.9)}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav__cta{
  padding:10px 14px;border-radius:10px;font-weight:900;
  border:1px solid rgba(184,132,46,.70);
  background:linear-gradient(180deg, rgba(184,132,46,.95), rgba(160,110,35,.95));
}

/* Mobile */
.menuBtn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);border-radius:10px;padding:10px 12px;font-size:18px}
.mobileNav{border-top:1px solid var(--line);background:rgba(12,14,18,.92);padding:10px 0}
.mobileNav a{display:block;padding:12px 20px;border-bottom:1px solid rgba(242,244,246,.08)}
.mobileNav__cta{font-weight:900}
.mobileNav__sub{opacity:.85}

/* Hero */
.hero{
  min-height: 52vh;
  display:grid;
  align-items:start;          /* was center */
  text-align:center;

  padding: 100px 0 24px;

}
.hero__title{
  margin: 0 auto;
  font-size: 110px;   /* ← solid fixed size */
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 18px 60px rgba(0,0,0,.65);
}
.hero__actions{margin-top:18px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;font-weight:900;letter-spacing:.2px;border:1px solid transparent}
.btn--gold{background:linear-gradient(180deg, var(--gold2), var(--gold));color:#141414}
.btn--outline{border-color:rgba(242,244,246,.35);background:rgba(0,0,0,.28);color:rgba(242,244,246,.95)}

/* Tiles */
.tiles{padding: 16px 0 44px}
.tiles__grid{display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;align-items:stretch}
.tile{
  position:relative;
  border:1px solid rgba(242,244,246,.20);
  border-radius:0;
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 240px;
  background: rgba(0,0,0,.25);
}
.tile__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
}
.tile__shade{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.60),   /* was .85 */
    rgba(0,0,0,.15)    /* was .35 */
  );
}

/* No external images: these are “built-in” backgrounds so nothing breaks */
.tile__bg--services{
  background:
    radial-gradient(40% 40% at 25% 25%, rgba(211,155,51,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
}
.tile__bg--quotes{
  background:
    radial-gradient(40% 40% at 70% 25%, rgba(242,244,246,.12), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
}
.tile__bg--about{
  background:
    radial-gradient(40% 40% at 50% 30%, rgba(184,132,46,.28), transparent 55%),
    linear-gradient(135deg, rgba(184,132,46,.22), rgba(0,0,0,.18));
}

.tile .tile__text h2{
  font-size: 26px;   /* was around 20–22 */
  font-weight: 900;
}

.tile .tile__text p{
  font-size: 15px;   /* slightly larger body */
  line-height: 1.5;
} 

/* Push content farther down */
.pushDown{height: 320px}

/* Sections */
.section{
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  padding: 46px 0;
}
.section--alt{background:rgba(0,0,0,.44)}
.section h2{margin:0 0 10px 0; font-size:28px}
.section p{margin:0; color:var(--muted); line-height:1.7; max-width: 90ch}
.row{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}

/* Calendar card */
.calendarCard{
  margin-top:16px;
  border:1px solid rgba(242,244,246,.16);
  background:rgba(0,0,0,.35);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:rgba(12,14,18,.70);
  backdrop-filter: blur(12px);
  padding: 24px 0;
}
.footer__inner{display:flex;flex-direction:column;gap:8px}
.footer__brand{font-weight:900;font-size:18px}
.footer__meta{color:rgba(242,244,246,.78);font-size:13px}
.footer__links a{text-decoration:underline;text-underline-offset:3px}

@media (max-width: 980px){
  .nav{display:none}
  .menuBtn{display:inline-flex}
  .tiles__grid{grid-template-columns: 1fr}
  .tile{min-height: 220px}
  .brand__logo{width:150px}
  .pushDown{height: 220px}
}
/* ===== TILE HOVER EFFECTS ===== */

.tile{
  transition: transform .35s ease, box-shadow .35s ease;
}

.tile__bg{
  transition: transform .6s ease;
}

.tile__shade{
  transition: background .35s ease;
}

.tile__text{
  transition: background .35s ease;
}

/* Hover state */
.tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(0,0,0,.65);
}

.tile:hover .tile__bg{
  transform: scale(1.08);
}

.tile:hover .tile__shade{
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.35));
}

.tile:hover .tile__text{
  background: rgba(0,0,0,.55);
}

/* Subtle gold accent line on hover */
.tile::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, #d3a34f, #b8842e);
  transition: width .35s ease;
}

.tile:hover::after{
  width:100%;
}
/* ===== SUBTLE METAL SWEEP EFFECT ===== */

/* ----- FIX LAYER ORDER so sweep appears OVER images ----- */

.tile{
  position: relative;
  overflow: hidden;
}

/* Image layer */
.tile__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  z-index: 1;
}

/* Metal sweep layer (must be above image) */
.tile::before{
  content:"";
  position:absolute;
  top:0;
  left:-160%;
  width:140%;
  height:100%;
  background: linear-gradient(
    75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: left 1.1s ease;
  pointer-events:none;
  z-index: 2;                 /* KEY */
  mix-blend-mode: screen;     /* makes it “glow” over photos */
  opacity: .95;
}

.tile:hover::before{
  left:160%;
}

/* Dark overlay */
.tile__shade{
  position:absolute;
  inset:0;
  z-index: 3;
}

/* Text panel */
.tile__text{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index: 4;
}
/* Focus (keyboard accessibility) */
.nav a:focus-visible{
  outline: 2px solid rgba(211,155,51,.55);
  outline-offset: 3px;
}

/* Call Now = slightly stronger */
.nav__cta{
  border: 1px solid rgba(184,132,46,.70) !important;
}
.nav__cta:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* Optional: subtle “gold edge” on hover */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  opacity:0;
  background: linear-gradient(90deg, rgba(211,155,51,.0), rgba(211,155,51,.75), rgba(211,155,51,.0));
  transition: opacity .25s ease;
  pointer-events:none;
}
.nav a:hover::after{
  opacity:1;
}
/* Back button fits with nav buttons */
.nav__back{
  border: 1px solid rgba(242,244,246,.14);
  background: rgba(0,0,0,.18);
}

/* ===== LOCK NAV SWEEP (TOP BUTTONS) ===== */
.nav a{
  position: relative;
  overflow: hidden;
  z-index: 10;              /* keeps button layers above header blur */
}

.nav a::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:120%;
  height:100%;
  background: linear-gradient(
    75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 42%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.05) 58%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: left .85s ease;
  pointer-events:none;
  z-index: 1;
  mix-blend-mode: screen;
}

.nav a:hover::before{
  left:140%;
}
/* ===== TILE SWEEP ONLY (DO NOT APPLY TO NAV) ===== */
.tile{ position: relative; overflow: hidden; }

.tile::before{
  content:"";
  position:absolute;
  top:0;
  left:-160%;
  width:140%;
  height:100%;
  background: linear-gradient(
    75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.14) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: left 1.1s ease;
  pointer-events:none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: .95;
}

.tile:hover::before{ left:160%; }

/* ===== GOLD ACCENT BAR UNDER TILES (RESTORED) ===== */
.tile::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, #d3a34f, #b8842e);
  transition: width .35s ease;
  z-index: 5;          /* above image/sweep/shade */
  pointer-events:none;
}

.tile:hover::after{
  width:100%;
}

/* ===== METAL EFFECT FOR BUTTONS (.btn) ===== */

.btn{
  position: relative;
  overflow: hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Lift effect */
.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* Metal sweep */
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:120%;
  height:100%;
  background: linear-gradient(
    75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  transition: left .9s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}

.btn:hover::before{
  left:140%;
}

/* Gold accent bar */
.btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, #d3a34f, #b8842e);
  transition: width .3s ease;
}

.btn:hover::after{
  width:100%;
}

.servicesGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* ===== QUOTE FORM STYLES (MATCH THE SITE) ===== */
.formCard{
  border: 1px solid rgba(242,244,246,.16);
  background: rgba(0,0,0,.30);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 18px;
}

.formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.formRow{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.formRow--full{
  grid-column: 1 / -1;
}

label{
  font-weight: 800;
  letter-spacing: .2px;
}

.req{ color: rgba(211,155,51,.95); }

input, select, textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(242,244,246,.18);
  background: rgba(0,0,0,.25);
  color: rgba(242,244,246,.95);
  padding: 12px 12px;
  outline: none;
}

textarea{ resize: vertical; }

input::placeholder{
  color: rgba(242,244,246,.55);
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(211,155,51,.55);
  box-shadow: 0 0 0 3px rgba(211,155,51,.14);
}

.formActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

.formFineprint{
  margin: 2px 0 0;
  color: rgba(242,244,246,.70);
  font-size: 12.5px;
}

@media (max-width: 980px){
  .formGrid{ grid-template-columns: 1fr; }
}

main{
  padding-bottom: 100px; /* adjust to footer height */
}

.fixedFooter .footer{ position: fixed; bottom:0; left:0; right:0; }
.fixedFooter main{ padding-bottom: 110px; }

/* ===== HARD RESTORE: BLACK + GOLD THEME ===== */

/* Core gold variables */
:root{
  --gold:#b8842e !important;
  --gold2:#d3a34f !important;
  --line:rgba(242,244,246,.14) !important;
}

/* Header + footer: force black */
.header{
  background: rgba(12,14,18,.95) !important;
  border-bottom: 1px solid rgba(242,244,246,.14) !important;
}

.footer{
  background: rgba(12,14,18,.85) !important;
  border-top: 1px solid rgba(242,244,246,.14) !important;
}

/* Nav buttons: force neutral/black base + gold CTA */
.nav a:not(.nav__cta){
  border: 1px solid rgba(242,244,246,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(242,244,246,.92) !important;
}

.nav__cta{
  border: 1px solid rgba(184,132,46,.70) !important;
  background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
  color: #141414 !important;
}

/* Gold accent bars */
.tile::after,
.btn::after,
.serviceCard::after{
  background: linear-gradient(90deg, var(--gold2), var(--gold)) !important;
}

/* Focus ring: gold (prevents purple focus styles) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(211,163,79,.70) !important;
  outline-offset: 3px !important;
}

/* ===== THEME RESTORE (fix purple tile text + black hero/footer text) ===== */

/* 1) Global text color back to light */
html, body{
  color: rgba(242,244,246,.92) !important;
}

/* 2) Force ALL headings and common text to light */
h1, h2, h3, h4, h5, h6, p, span, li, small, strong, label{
  color: rgba(242,244,246,.92) !important;
}

/* 3) Fix hero title specifically (some styles override headings) */
.hero__title{
  color: rgba(242,244,246,.96) !important;
  -webkit-text-fill-color: rgba(242,244,246,.96) !important; /* fixes some rare overrides */
}

/* 4) Fix footer text */
.footer, .footer *{
  color: rgba(242,244,246,.82) !important;
}

/* 5) Kill default link colors (purple/blue) everywhere, including visited */
a, a:link, a:visited, a:hover, a:active{
  color: rgba(242,244,246,.92) !important;
  text-decoration: none;
}

/* 6) Specifically force tile text (tiles are <a> tags) */
.tile .tile__text,
.tile .tile__text h2,
.tile .tile__text p{
  color: rgba(242,244,246,.92) !important;
}

/* 7) Keep the Call Now CTA readable (dark text on gold) */
.nav__cta, .nav__cta:visited,
.btn--gold, .btn--gold:visited{
  color: #141414 !important;
}

/* ===== GOLD HEADINGS RESTORE ===== */

:root{
  --gold:#b8842e;
  --gold2:#d3a34f;
}

/* Homepage tile headings */
.tile .tile__text h2{
  color: var(--gold2) !important;
}

/* Services page card headings */
.serviceCard h3{
  color: var(--gold2) !important;
}

/* Section page titles (Services, Quotes, About page headers) */
.section h2{
  color: var(--gold2) !important;
}

/* Footer brand name */
.footer__brand{
  color: var(--gold2) !important;
}

/* ===== FIXED FOOTER BAR ===== */

.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(12,14,18,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(242,244,246,.14);
}

/* Prevent content from hiding behind footer */
main{
  padding-bottom: 110px; /* adjust if footer height changes */
}

/* ===== CENTER TILE TEXT ===== */

.tile .tile__text{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tile .tile__text h2{
  text-align: center;
}

.tile .tile__text p{
  text-align: center;
  max-width: 90%;
}

/* ===== MAKE TILE TEXT POP ===== */

.tile .tile__text h2{
  text-shadow:
    0 2px 6px rgba(0,0,0,.85),
    0 8px 20px rgba(0,0,0,.65);
}

.tile .tile__text p{
  text-shadow:
    0 1px 4px rgba(0,0,0,.85);
}

.tile:hover .tile__text h2{
  transform: scale(1.04);
  transition: transform .25s ease;
}
/* ===== FULL SCREEN HOME PAGE ===== */

body.home{
  min-height: 100vh;
  overflow: hidden;
}

body.home main{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html, body{
  margin: 0;
  padding: 0;
}

:root{
  --footerH: 84px; /* adjust if needed */
}

/* Fixed footer */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  height: var(--footerH);
  display: flex;
  align-items: center;
  background: rgba(12,14,18,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(242,244,246,.14);
}

/* EXACTLY match main padding to footer height (prevents overlap without adding extra scroll) */
main{
  padding-bottom: var(--footerH);
}

/* ===== TEAM CARDS ===== */

.teamCard{
  text-align:center;
}

.teamImg{
  width: 100%;
  height: 160px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(242,244,246,.14);
  margin-bottom: 14px;
}

/* When you add real images later */
.teamImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ===== CENTER ABOUT PAGE CONTENT ===== */

.aboutPage .formCard{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.aboutPage .formCard p{
  max-width: 900px;
  margin: 0 auto 18px auto;
  line-height: 1.7;
}
/* ===== ABOUT PAGE ENHANCEMENTS ===== */

.aboutPage .section h2{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 28px;
}

/* Gold divider under About Us */
.aboutPage .section h2::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  opacity: .75;
}

/* Larger, stronger paragraph text */
.aboutPage .formCard p{
  font-size: 23px;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 22px auto;
}

/* ===== ABOUT PAGE – TEAM FONT SCALE ===== */

/* The centered team intro line */
.aboutPage h3{
  font-size: 22px;   /* was smaller */
  font-weight: 800;
  letter-spacing: .3px;
}

/* Team member names */
.aboutPage .teamCard h3{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* Team roles */
.aboutPage .teamCard p{
  font-size: 17px;
  line-height: 1.6;
}

/* ===== TEAM NAME HOVER GLOW ===== */

.aboutPage .teamCard h3{
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.aboutPage .teamCard:hover h3{
  color: var(--gold2);
  text-shadow:
    0 0 6px rgba(211,163,79,.35),
    0 0 14px rgba(211,163,79,.25);
  transform: translateY(-2px);
}

/* ===== TEAM IMAGE STYLE ===== */

.teamImg{
  width: 100%;
  height: 180px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(242,244,246,.14);
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}

.teamImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

/* Subtle image hover zoom */
.teamCard:hover .teamImg img{
  transform: scale(1.05);
}

.teamCard:hover{
  box-shadow: 0 28px 70px rgba(0,0,0,.65);
}

/* ===== SILVER BLUE THEME ===== */

:root{
  --accent:#7faedc;       /* main silvery blue */
  --accent2:#b8d6f2;      /* lighter highlight */
  --steel:#cfd6de;        /* cool metallic tone */
}

/* ===== Replace Gold Highlights ===== */

/* Headings */
.section h2,
.tile .tile__text h2,
.serviceCard h3,
.footer__brand{
  color: var(--accent2) !important;
}

/* Accent bars */
.tile::after,
.btn::after,
.serviceCard::after{
  background: linear-gradient(90deg, var(--accent2), var(--accent)) !important;
}

/* CTA Buttons */
.nav__cta,
.btn--gold{
  background: linear-gradient(180deg, var(--accent2), var(--accent)) !important;
  color: #111 !important;
  border: 1px solid rgba(184,214,242,.6) !important;
}

/* Hover glow */
.tile:hover h2,
.aboutPage .teamCard:hover h3{
  text-shadow:
    0 0 8px rgba(127,174,220,.45),
    0 0 18px rgba(127,174,220,.25);
}

/* ===== KKMRG BRAND BLUE ===== */

:root{
  --kkBlue:#1F78B4;
  --kkBlueLight:#2E8ED0;
}

/* Headings match logo blue */
.section h2,
.tile .tile__text h2,
.serviceCard h3,
.footer__brand{
  color: var(--kkBlue) !important;
}

/* Subtle steel-blue glow */
.section h2,
.tile .tile__text h2,
.serviceCard h3{
  text-shadow:
    0 0 6px rgba(46,142,208,.25),
    0 0 12px rgba(46,142,208,.15);
}

.tile::after,
.btn::after,
.serviceCard::after{
  background: linear-gradient(90deg, var(--kkBlueLight), var(--kkBlue));
}

.tile::after,
.btn::after,
.serviceCard::after{
  background: linear-gradient(90deg, var(--kkBlueLight), var(--kkBlue));
}

.tile::after,
.btn::after,
.serviceCard::after{
  background: linear-gradient(90deg, var(--kkBlueLight), var(--kkBlue));
}

/* ===== Silver hover glow ONLY: Holiday Calendar + Gallery ===== */
.nav a[href="calendar.html"],
.nav a[href="gallery.html"]{
  transition: text-shadow .25s ease, color .25s ease;
}

.nav a[href="calendar.html"]:hover,
.nav a[href="gallery.html"]:hover{
  color: rgba(230,237,245,.95);
  text-shadow:
    0 0 6px rgba(230,237,245,.55),
    0 0 14px rgba(160,190,220,.40);
}

/* ===== SILVER HOVER GLOW (Holiday Calendar + Gallery) ===== */
.nav .nav__silver{
  transition: color .25s ease, text-shadow .25s ease;
}

.nav .nav__silver:hover{
  color: rgba(230,237,245,.98) !important;
  text-shadow:
    0 0 7px rgba(230,237,245,.65),
    0 0 18px rgba(160,190,220,.45) !important;
}

/* ===== FIX NAV HOVER NOT FIRING ===== */

/* Make sure the header sits above video overlays */
.header{
  position: sticky;
  top: 0;
  z-index: 5000 !important;
}

/* Ensure video/overlay can't block clicks/hover */
.bgVideo,
.bgOverlay{
  pointer-events: none !important;
}

/* Ensure nav and links can receive hover */
.nav,
.nav a{
  pointer-events: auto !important;
}

/* In case a header pseudo-element is covering links */
.header::before,
.header::after{
  pointer-events: none !important;
}

/* Keep nav above any internal layers */
.nav{
  position: relative;
  z-index: 6000 !important;
}
.nav a{
  position: relative;
  z-index: 7000 !important;
}

/* Silver glow on hover ONLY */
.nav .nav__silver:hover{
  color: rgba(230,237,245,.98) !important;
  text-shadow:
    0 0 7px rgba(230,237,245,.65),
    0 0 18px rgba(160,190,220,.45) !important;
}

/* ===== SILVER UNDERLINE GLOW (Holiday Calendar + Gallery) ===== */

/* create space for underline */
.nav a.nav__silver{
  position: relative !important;
  padding-bottom: 10px; /* makes room for the line */
}

/* the silver bar */
.nav a.nav__silver::after{
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 6px !important;
  height: 2px !important;
  opacity: 0 !important;
  transform: scaleX(.65) !important;
  transform-origin: center !important;
  background: linear-gradient(
    90deg,
    rgba(230,237,245,0) 0%,
    rgba(230,237,245,.95) 35%,
    rgba(160,190,220,.85) 50%,
    rgba(230,237,245,.95) 65%,
    rgba(230,237,245,0) 100%
  ) !important;
  filter: drop-shadow(0 0 10px rgba(160,190,220,.0)) !important;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* hover = show + glow */
.nav a.nav__silver:hover::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
  filter: drop-shadow(0 0 12px rgba(160,190,220,.55)) !important;
}

/* ===== SILVER UNDERLINE GLOW (Holiday Calendar + Gallery) ===== */

/* create space for underline */
.nav a.nav__silver{
  position: relative !important;
  padding-bottom: 10px; /* makes room for the line */
}

/* the silver bar */
.nav a.nav__silver::after{
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 6px !important;
  height: 2px !important;
  opacity: 0 !important;
  transform: scaleX(.65) !important;
  transform-origin: center !important;
  background: linear-gradient(
    90deg,
    rgba(230,237,245,0) 0%,
    rgba(230,237,245,.95) 35%,
    rgba(160,190,220,.85) 50%,
    rgba(230,237,245,.95) 65%,
    rgba(230,237,245,0) 100%
  ) !important;
  filter: drop-shadow(0 0 10px rgba(160,190,220,.0)) !important;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* hover = show + glow */
.nav a.nav__silver:hover::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
  filter: drop-shadow(0 0 12px rgba(160,190,220,.55)) !important;
}

/* ===== Call Now buttons match KK blue ===== */
.nav__cta,
.btn--gold{
  background: linear-gradient(180deg, var(--kkBlueLight), var(--kkBlue)) !important;
  border: 1px solid rgba(46,142,208,.70) !important;
  color: rgba(242,244,246,.96) !important;
}

/* ===== Darken tiles for readability ===== */
.tile__shade{
  background: linear-gradient(
    to top,
    rgba(0,0,0,.86),
    rgba(0,0,0,.55)
  ) !important;
}

.tile .tile__text{
  background: rgba(0,0,0,.62) !important;
  border-top: 1px solid rgba(242,244,246,.16) !important;
}

/* ===== WHITE HEADER BAR ===== */

.header{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: none !important;
}

/* Make nav text dark for contrast */
.header .nav a{
  color: #1a1a1a !important;
}

/* Silver hover still works but adjust brightness */
.header .nav__silver:hover{
  color: var(--kkBlue) !important;
  text-shadow: 0 0 8px rgba(46,142,208,.35);
}

/* Make Call Now button still stand out */
.header .nav__cta{
  color: #ffffff !important;
}

.header{
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ===== GLOBAL FONT MATCHING Argrecycles ===== */

html, body, h1, h2, h3, h4, h5, p, a, label, input, button{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ===== BIGGER TOP HEADER ===== */

.header{
  padding: 14px 0 !important;   /* more vertical space */
}

.header .brand__logo{
  height: 64px !important;      /* larger logo */
  width: auto;
}

.nav a{
  font-size: 16.5px !important; /* larger nav text */
  font-weight: 600 !important;
}

.nav__cta{
  padding: 10px 20px !important; /* bigger CTA button */
  font-weight:700 !important;
}

.header{
  border-bottom: 2px solid rgba(0,0,0,.08) !important;
}

.nav a:not(.nav__cta){
  text-transform: uppercase;
  letter-spacing: .5px;
}

.nav a{
  padding: 0 12px !important;
}
/* ===== RESTORE HEADER TO ORIGINAL STRUCTURE ===== */
.header{
  background: #fff !important;
  position: sticky;
  top: 0;
  z-index: 5000;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 16px 0 !important; /* bigger banner */
}

.brand{ display:flex; align-items:center; }
.brand__logo{
  height: 68px !important;  /* bigger logo */
  width: auto;
}

/* dark text in white banner */
.header .nav a{
  color: #111 !important;
  font-weight: 650;
  font-size: 15.5px;
}

/* keep Call Now button blue (or whatever you set) */
.header .nav__cta{
  color: #fff !important;
}

"eurostile", sans-serif

/* ===== Silver underline (fixed position) for Holiday Calendar + Gallery ===== */
.nav a.nav__silver{
  position: relative !important;
  padding-bottom: 0 !important; /* remove extra padding that pushed line into the button */
}

.nav a.nav__silver::after{
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -6px !important;     /* puts line UNDER the button, not through it */
  height: 2px !important;
  opacity: 0 !important;
  transform: scaleX(.75) !important;
  transform-origin: center !important;
  background: linear-gradient(
    90deg,
    rgba(230,237,245,0) 0%,
    rgba(230,237,245,.95) 35%,
    rgba(160,190,220,.85) 50%,
    rgba(230,237,245,.95) 65%,
    rgba(230,237,245,0) 100%
  ) !important;
  filter: drop-shadow(0 0 12px rgba(160,190,220,0)) !important;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.nav a.nav__silver:hover::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
  filter: drop-shadow(0 0 12px rgba(160,190,220,.55)) !important;
}

/* ===== GLOBAL FONT: EUROSTILE ===== */
html, body, button, input, select, textarea{
  font-family: "Eurostile", sans-serif !important;
}

/* ===== FORCE EUROSTILE EVERYWHERE ===== */
:root{
  --siteFont: "Eurostile", sans-serif;
}

/* apply to everything (including headings, tiles, forms, buttons) */
body, body *{
  font-family: var(--siteFont) !important;
}

/* ===== Make Holiday/Gallery hover shadow match Call Now ===== */
.nav a.nav__silver{
  border-radius: 10px; /* match your button style */
  transition: transform .25s ease, box-shadow .25s ease;
}

/* same shadow behavior as CTA */
.nav a.nav__silver:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.45) !important;
}

/* ===== Full-width header layout (logo left, nav right) ===== */
.header .wrap{
  max-width: none !important;     /* breaks out of centered container */
  width: 100%;
  padding-left: 18px;             /* keep clean edge spacing */
  padding-right: 18px;
}

.header__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* pushes ends out */
}

/* guarantee separation */
.brand{ margin-right: auto; }
.nav{ margin-left: auto; }

/* ===== EUROSTILE WEBFONT ===== */
@font-face {
  font-family: "Eurostile";
  src: url("../fonts/Eurostile.woff2") format("woff2"),
       url("../fonts/Eurostile.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body{
  font-family: "Eurostile", sans-serif;
}

/* ===== APPLY EUROSTILE SITEWIDE ===== */
body, body *{
  font-family: "Eurostile", sans-serif !important;
}


/* ===== APPLY EUROSTYLE SITEWIDE ===== */

html, body{
  font-family: "Eurostyle", sans-serif !important;
}

body *{
  font-family: inherit !important;
}

/* ===== Improve Eurostyle Spacing ===== */

body{
  letter-spacing: .8px;
}

/* Headings slightly more open */
h1, h2, h3, .nav a{
  letter-spacing: .12px;
}

/* Buttons */
.nav__cta,
.nav__back,
.btn{
  letter-spacing: .9px;
}

body{
  line-height: 1.6;
}

h1, h2, h3{
  line-height: 1.2;
}

body{
  font-weight: 400;
}

.nav a{
  font-weight: 500;
}

/* ===== ARG-like spacing / tracking for Eurostyle ===== */

/* Body copy: almost normal */
body{
  letter-spacing: 0.015em;
  word-spacing: 0.02em;
  line-height: 1.6;
}

/* Headings: slightly more tracking, clean + premium */
h1, h2, h3{
  letter-spacing: 0.035em;
  line-height: 1.15;
}

/* Nav + buttons: crisp tracking like ARG */
.header .nav a,
.btn,
.nav__cta,
.nav__back{
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Optional: make nav feel more “ARG” without going shouty */
.header .nav a{
  text-transform: uppercase;   /* remove this line if you don’t want caps */
  font-size: 14px;
}

/* Tile headings: readable, not over-tracked */
.tile .tile__text h2{
  letter-spacing: 0.04em;
}
\

.heroTitle{
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}


/* ===== LARGE MID-PAGE STATEMENT ===== */

.heroTitle,
.hero h1{
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.05;
}

/* ===== Back Home behaves like Holiday/Gallery ===== */

/* base style */
.nav__back{
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
  border-radius: 10px;
}

/* hover style = same blue shift + shadow */
.nav__back:hover{
  color: var(--kkBlue) !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}

/* ===== Back Home: match Holiday/Gallery hover exactly ===== */

/* 1) kill any gold accent bar/sweep on Back Home */
.nav a.nav__silverLike::after,
.nav a.nav__silverLike::before{
  content: none !important;
}

/* 2) base transitions like the others */
.nav a.nav__silverLike{
  position: relative !important;
  border-radius: 10px;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease, text-shadow .25s ease !important;
}

/* 3) hover = blue + same classy shadow */
.nav a.nav__silverLike:hover{
  color: var(--kkBlue) !important;
  text-shadow: 0 0 8px rgba(46,142,208,.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.45) !important;
}



/* ===== EXECUTIVE HEADSHOT STYLE ===== */

.teamImg{
  width: 100%;
  height: 260px;              /* taller for headshots */
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
}

/* headshot fill */
.teamImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* best for consistent crop */
  object-position: center top; /* keeps face centered */
  transition: transform .4s ease;
}

/* subtle hover zoom */
.teamCard:hover .teamImg img{
  transform: scale(1.04);
}
.teamImg::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:60%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    transparent
  );
  pointer-events:none;
}

.teamImg::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:60%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    transparent
  );
  pointer-events:none;
}

.teamImg{
  height: 400px;
}

.teamCard h3{
  margin-top: 18px;
  font-size: 20px;
}

.teamCard p{
  margin-top: 6px;
  font-size: 16px;
  opacity: .85;
}

/* ===== Larger Team Name + Title for 400px Tiles ===== */

.teamCard h3{
  font-size: 26px;
}

.teamCard p{
  font-size: 19px;
}

.teamImg{
  margin-bottom: 24px;
}

.hero {
  position: relative;
  min-height: 70vh;   /* NOT height */
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* container that holds your 3 windows */
.hero-content {
  position: relative;
  z-index: 2;
}

/* the dark strip behind the 3 windows */
.hero-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(1200px, 96vw);   /* wider strip */
  height: min(750px, 72vh);   /* taller strip */
  border-radius: 18px;

  background: rgba(0,0,0,0.72);  /* dark overlay */
  backdrop-filter: blur(6px);     /* optional: hides video oddness */
  -webkit-backdrop-filter: blur(6px);

  z-index: -1; /* puts it behind the 3 windows but above video */
}

/* optional: add breathing room so the strip extends beyond window edges */
.hero-content {
  padding: 28px 22px;
}

.tiles {
  position: relative;
  padding: 80px 20px;   /* gives breathing room */
  display: flex;
  justify-content: center;
}

.tiles__overlay {
  background: rgba(0, 0, 0, 0.82);

  width: min(1650px, 97vw);
  padding: 140px 60px;   /* very tall strip */

  border-radius: 24px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tiles {
  margin-top: -60px;   /* moves section upward */
  padding: 60px 20px 80px 20px;
}

/* Base */
.tiles {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px 12px 60px;
}

.tiles__overlay {
  width: min(1650px, 97vw);
  padding: 110px 60px;          /* keep your height */
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tablet */
@media (max-width: 900px) {
  .tiles__overlay {
    width: 96vw;
    padding: 70px 22px;         /* smaller padding so it fits */
    border-radius: 18px;
  }
}

/* Phone */
@media (max-width: 600px) {
  .tiles {
    padding: 10px 10px 50px;
  }

  .tiles__overlay {
    width: 94vw;
    padding: 40px 14px;         /* prevents horizontal overflow */
    border-radius: 16px;
  }
}

/* Desktop default (if not already defined somewhere) */
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phone: 1 column */
@media (max-width: 600px) {
  .tiles__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.header-phone {
  color: #2da8ff;   /* your hover blue */
  font-weight: 600;
}

.nav-phone {
  color: #2da8ff;          /* your hover blue */
  font-weight: 600;
  text-decoration: none;
}

.nav-phone:hover {
  color: #2da8ff;          /* stays same shade */
  opacity: 0.85;           /* subtle hover effect */
}

.nav-phone {
  background: none !important;
  border: none !important;
  color: #2da8ff !important;
  padding: 0 !important;
}

.tiles__overlay {
  width: min(1650px, 97vw);
  padding: 110px 60px;
  border-radius: 20px;
  background: rgba(0,0,0,0.78);
}

/* Tablet */
@media (max-width: 900px) {
  .tiles__overlay {
    width: 96vw;
    padding: 70px 22px;
  }
}

/* Phone */
@media (max-width: 600px) {
  .tiles__overlay {
    width: 94vw;
    padding: 40px 14px;
    min-height: 0 !important;  /* IMPORTANT if you ever set min-height earlier */
    height: auto !important;
  }
}

body { padding-top: 72px; } /* adjust to your header height */
@media (max-width: 600px) { body { padding-top: 84px; } }

@media (max-width: 600px) {
  .tiles {
    margin-top: 0 !important;   /* prevents overlap */
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 78vh;           /* makes room for headline */
    padding-bottom: 28px;       /* creates separation from tiles */
  }
}

@media (max-width: 600px) {
  .tiles {
    padding-top: 28px !important;
  }
}

@media (max-width: 600px) {
  header, .header, .topbar {
    width: 100%;
    max-width: 100%;
  }

  .header-inner, .topbar-inner, .nav, .nav-inner {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 600px) {
  .nav-phone, .header-phone {
    display: inline-block;
    white-space: nowrap;      /* keeps 612-521-9212 together */
    margin-top: 6px;
  }
}

body { padding-top: 76px; }
@media (max-width: 600px) { body { padding-top: 92px; } }