:root{
  --ink:#e5eaf1; --muted:#93a4ba; --line:rgba(255,255,255,.12); --bg:#0b0e13;
  --accent:#0ea5e9; --yellow:#facc15;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}

/* Transparent header */
.top{position:fixed;inset:0 0 auto 0;z-index:60;background:transparent;border:0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 4vw}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:clamp(100px, 16vw, 200px);height:auto;object-fit:contain;border-radius:14px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;cursor:pointer;backdrop-filter:saturate(140%) blur(2px)}
.menu-btn:hover{border-color:#fff}
.menu-open .menu-btn{display:none}

/* Right-side panel */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:4000}
.scrim.show{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:-100vw;height:100vh;width:min(380px,88vw);background:rgba(14,18,24,.98);color:#e5eaf1;transition:right .28s ease;z-index:5000;display:flex;flex-direction:column}
.panel.open{right:0}
.panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.menu-lang{display:flex;gap:8px;align-items:center}
.lang-btn{border:1px solid var(--line);background:rgba(15,19,26,.8);color:#e5eaf1;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.lang-btn.active{background:#1f2937;border-color:#e5e7eb}
.lang-btn:hover{color:var(--yellow)}
.panel nav{padding:8px 8px 10px 8px}
.menu{list-style:none;margin:0;padding:8px 8px;display:flex;flex-direction:column;gap:4px}
.menu a{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:10px;color:#fff;font-weight:700}
.menu a:hover{color:var(--yellow);background:transparent}
.social{padding:6px 18px 0 18px}
.social-links{display:flex;gap:14px;align-items:center}
.social-links a{color:#e5eaf1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px}
.social-links a:hover{color:var(--yellow);background:rgba(255,255,255,.06)}
.panel .cta{margin-top:auto;padding:16px 18px;border-top:1px solid var(--line)}
.panel .cta a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700}

/* Hero */
.hero{position:relative;min-height:100vh;overflow:hidden;background:#0b0e13}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center} /* COVER: fills screen (no black sides) */
.hero.contain img.bg{object-fit:contain} /* Optional per-page override if needed */
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%)}
.hero .content{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr;min-height:100vh;padding:18vh 4vw 6vh;color:#fff}
.hero h2{font-size:clamp(32px,5vw,58px);line-height:1.1;margin:0 0 1rem;text-shadow:0 2px 12px rgba(0,0,0,.4);text-align:center}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.85);color:#fff;font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--accent)}

/* Transparent glass content */
.overlay-stack{align-self:stretch;display:grid;place-items:center}
.glass{width:min(1160px, 96vw);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}
.section-title h3{margin:0;font-size:22px;color:#fff}
.section-title p{margin:0;color:rgba(255,255,255,.75)}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
.grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 900px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} }
.card{border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px;background:rgba(255,255,255,.04)}
.card h4{margin:.2rem 0 .4rem;font-size:18px;color:#fff}
.card p{margin:0;color:rgba(255,255,255,.85);font-size:14px}
.list{margin:0;padding-left:18px;color:rgba(255,255,255,.85)}
.list li{margin:.3rem 0}

/* Below-hero section (for Home values) */
.page-section{padding:42px 0}
.container{width:min(1160px,92vw);margin:auto}

/* Footer */
footer{border-top:1px solid var(--line);background:rgba(10,12,16,.8);backdrop-filter:blur(4px);color:#ccd6e2}
.foot-wrap{width:min(1160px,92vw);margin:0 auto;padding:20px 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot-left{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.badges img{height:20px}
.foot-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot-right a{color:#ccd6e2}
.small{font-size:12px;color:#93a4ba}


/* === PROA TWEAK 2025-09-01: panel close button size/position & transparency === */
.panel header { padding-right: 56px !important; }
.panel-close{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px;
  border:none; background:transparent; color:#e6edf3;
  font-size:20px; line-height:30px; text-align:center;
  cursor:pointer;
}
.panel-close:focus { outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }
.panel-close:hover { filter:brightness(1.08); }
@media (max-width: 480px){
  .panel header > div { margin-top: 6px !important; }
}
img { visibility: visible !important; }


/* === PROA FINAL FIX 2025-09-01: ensure About/Contact clickable near header icons === */
/* Put menu above anything else in the header */
header .menu { position: relative; z-index: 2100; }
/* Right cluster (lang + social): let clicks pass through empty gaps so it can't block menu items */
.top .right { position: relative; z-index: 2000; pointer-events: none; }
.top .right a, .top .right button { pointer-events: auto; } /* keep icons/lang clickable */
/* Keep brand below menu so it never covers links; but clickable */
.top .brand { position: relative; z-index: 1900; pointer-events: auto; }

.top .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ULTRA: force small header logo */
.top .nav img[src*="logo"]{max-height:36px;height:auto;width:auto;object-fit:contain;display:block}

.panel nav a{pointer-events:auto}
.hero img.bg{pointer-events:none}
/* === FORCE CORRECT HEADER & PANEL (ULTRA) === */
/* Header logo: always small */
.top .nav img[src*="logo"]{max-height:36px!important;height:auto!important;width:auto!important;object-fit:contain;display:block}

/* Slide-out menu must be on top of everything */
.scrim{z-index:9000!important}
.panel{z-index:9999!important}
.panel header{position:sticky;top:0;background:rgba(12,18,27,.98)}
.panel nav a{pointer-events:auto}

/* Prevent hero image from blocking clicks & ensure it shows on mobile */
.hero img.bg{pointer-events:none;display:block!important}
@media (max-width:640px){
  .top .nav img[src*="logo"]{max-height: 60px!important}
  .hero img.bg{display:block!important}
}
/* === Fix desktop logo and menu === */

/* Desktop logo size */
header .logo img {
  max-height: 60px;   /* adjust number if needed */
  width: auto;
}

/* Desktop menu alignment */
header .menu {
  display: flex;
  align-items: center;
}

/* Apply only on desktop (screens wider than 992px) */
@media (min-width: 992px) {
  header .logo img {
    max-height: 60px;
  }
}
/* === DESKTOP HEADER FIX (hard override) === */
@media (min-width: 992px) {
  /* Keep header as a single row */
  header, .site-header, .navbar, .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* Constrain the logo (covers common markups) */
  header img, .logo img, .site-logo img, img.logo, .navbar-brand img {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
  }

  /* If your logo is a background on a div */
  .logo, .site-logo, .navbar-brand {
    height: 60px !important;
    max-height: 60px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
  }

  /* Keep menu on one line and centered vertically */
  nav ul, .menu, .navbar-nav, .main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }

  /* Remove accidental big spacing around logo */
  .logo, .site-logo, .navbar-brand { margin: 0 !important; padding: 0 !important; }
}
/* === DESKTOP HEADER LAYOUT FIX === */
@media (min-width: 992px) {
  /* Keep header elements on one line */
  header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    flex-wrap: nowrap !important;
  }

  /* Common logo protection (in case your logo <img> is inside header) */
  header img, header .logo img, header .brand img, img.logo {
    max-height: 60px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Language buttons and social stay inline */
  header .menu-lang,
  header .social,
  header .social .social-links {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 !important;
  }

  /* Tidy up spacing */
  header > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide the mobile close (X) on desktop */
  #panelClose,
  .panel-close {
    display: none !important;
  }

  /* If you have a menu/nav block elsewhere, keep it inline */
  nav, .menu, .navbar, .main-nav, .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }
}

/* Optional: make the header icons/buttons neat on all sizes */
header .lang-btn { line-height: 1; padding: 6px 10px; }
header .social svg { width: 22px; height: 22px; display: block; }
@media (min-width: 992px){
  header .rbq { font-size: 14px; opacity: .85; white-space: nowrap; }
}
.contact-page .get-quote,
.contact-page [data-role="get-quote"] { display: none !important; }
/* RBQ number in footer */
footer .foot-left .rbq,
footer .foot-left #org-rbq {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #fff;        /* change to black (#111) if footer background is light */
  opacity: 1 !important;
  margin-left: 8px;
}
/* Footer layout */
footer .foot-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer .foot-left, footer .foot-right{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

/* Make phone, email, RBQ match style */
footer .foot-left .small{
  font-size:15px; color:inherit; opacity:1;
  white-space:nowrap;
}

/* Logos inline and small */
footer .brand-badge{
  max-height:24px; height:auto; width:auto; display:block;
  object-fit:contain;
}

/* Social icons */
footer .social-link{
  display:inline-flex; align-items:center; line-height:0;
  text-decoration:none; opacity:.9;
}
footer .social-link:hover{ opacity:1; }

/* Optional: smaller wrap on narrow screens */
@media (max-width: 640px){
  footer .brand-badge{ max-height:20px; }
}
/* Hide only the quote button under the title on the Contact page */
.contact-page .page-title .get-quote { display: none !important; }
/* Make RBQ look the same and not clickable */
#rbq-footer { color: inherit; font-size: 15px; text-decoration: none; }
#rbq-footer, #rbq-footer a { pointer-events: none; cursor: default; text-decoration: none !important; }
/* Contact page: hide top/hero quote button, keep the one in the contact section */
.contact-page .get-quote { display: none !important; }

.contact-page #contact .get-quote,
.contact-page #get-in-touch .get-quote,
.contact-page .contact-section .get-quote,
.contact-page .contact-form .get-quote {
  display: inline-flex !important;  /* or inline-block */
}
/* Hide only the Get a Quote that sits right under the Contact page title */
.contact-page h1 + .get-quote { display: none !important; }
#quote-under-title {
  display: none !important;
}
#quote-under-title {
  display: none !important;
}
#quote-under-title {
  display: none !important;
}
/* === Mobile logo size adjustment === */
@media (max-width: 640px){
  header .logo img,
  .site-logo img,
  .navbar-brand img {
    max-height: 120px !important;  /* make logo taller on mobile */
    height: auto;
    width: auto;
  }
}

/* === Desktop hero spacing adjustment === */
@media (min-width: 992px){
  .hero img,
  .hero .hero-image {
    margin-bottom: 30px;  /* adds space under hero image */
  }
}
/* Mobile: enlarge the COMPANY logo (header) */
@media (max-width: 640px){
  /* grow the wrapper so the image can grow */
  header .logo,
  .navbar-brand,
  .site-logo {
    height: 120px !important;   /* adjust 90–140px as you like */
  }

  /* let the image fill the wrapper height */
  header .logo img,
  .navbar-brand img,
  .site-logo img,
  img.logo,
  img[src*="logo"],              /* fallback selector */
  img[alt*="Pro A"] {
    max-height: 100% !important;
    height: 100% !important;
    width: auto !important;
  }
}
/* Desktop: increase hero visible area and make bottom divider transparent */
@media (min-width: 992px){
  /* make the hero taller and reveal more of the image */
  .hero {
    min-height: 70vh !important;          /* try 65–80vh */
    background-position: center top !important;
  }

  /* if there is a solid bottom border/line, make it transparent */
  .hero,
  .hero-section,
  #contact.hero,
  .hero + .section,
  .hero + section,
  .client-value,
  .value-section,
  .prefooter,
  footer {
    border-top-color: transparent !important;
  }

  /* if a pseudo-element draws the line */
  .hero::after,
  .hero-section::after,
  .value-section::before,
  .value-section::after {
    background: transparent !important;
    border-color: transparent !important;
  }
}
@media (min-width: 992px){
  .hero { padding-bottom: 30px !important; }   /* reveals a bit below */
  .hero img, .hero .hero-image { display:block; }
}
@media (max-width:640px){
  header .logo img{ height:120px !important; width:auto; }
}
/* Mobile: enlarge header logo */
@media (max-width: 640px){
  .top .nav img[alt*="Pro A Construction"] {
    height: 140px !important;
    width: auto !important;
  }
}
/* Mobile only: grow header container + logo */
@media (max-width: 640px){
  .top .nav {
    height: 180px !important;      /* let the container be taller */
  }
  .top .nav img[alt*="Pro A Construction"] {
    height: 100% !important;       /* fill the container height */
    width: auto !important;
  }
}
/* Mobile: allow bigger company logo (overrides earlier rules) */
@media (max-width:640px){
  .top .nav img[src*="logo"]{
    max-height: 140px !important;  /* adjust 100–140px */
    height: auto !important;
    width: auto !important;
  }
}
@media (max-width:640px){
  .top .nav a[href="index.html"] > img[src*="logo"]{ max-height:120px!important }
}
/* Desktop: shift hero text slightly lower */
@media (min-width: 992px){
  .hero .content{
    padding-top: 120px;   /* increase to move text down */
  }
}

/* Mobile: shift hero text further down */
@media (max-width: 640px){
  .hero .content{
    padding-top: 200px;   /* adjust bigger for vertical screens */
  }
}
.hero{ position:relative; }
.hero .overlay{ position:absolute; inset:0; z-index:1; }
.hero .content{ position:relative; z-index:2; }
@media (min-width:992px){
  .hero .content{ padding-top:12vh !important; }   /* adjust 8–16vh */
}
@media (max-width:640px){
  .hero .content{ padding-top:22vh !important; }   /* adjust 18–28vh */
}
.hero{position:relative}
.hero .overlay{position:absolute;inset:0;z-index:1}
.hero .content{position:relative;z-index:2}

@media (min-width:992px){ .hero .content{ padding-top:12vh } }
@media (max-width:640px){ .hero .content{ padding-top:22vh } }
/* Move hero text lower */
@media (min-width: 992px){
  .hero .content{ padding-top: 15vh !important; } /* desktop */
}
@media (max-width: 640px){
  .hero .content{ padding-top: 30vh !important; } /* mobile */
}
/* Lower hero text */
@media (min-width: 992px){
  .hero .content{ padding-top: 35vh !important; } /* desktop */
}
@media (max-width: 640px){
  .hero .content{ padding-top: 45vh !important; } /* mobile */
}
.brand-badge{ display:inline-block !important; max-height:28px; width:auto; border:1px dashed red; }
.brand-badge {
  max-height: 20px;   /* adjust: 24px, 28px, 32px depending on how small you want */
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.brand-badge {
  max-height: 20px !important;   /* adjust smaller if needed */
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle;
}