/* =========================================
   shoreline recruitment — CLEANED styles.css
   (ONLY what your index.html actually uses)
   ========================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Unica+One&family=Karla:wght@400;600;700&display=swap');

:root{
  --hero-overlay: rgba(0,0,0,0.75);
  --nav-text: rgba(0,0,0,0.85);
  --nav-text-strong: #00A99D;

  --gray: #efefef;
  --gray-deep: #F26A21;
  --purple: #00A99D;
  --white: #ffffff;
  --orange: #F26A21;


  /* matches your current “top:56px” behavior */
  --contact-bar-h: 56px;
}

/* ===============================
   GLOBAL
================================ */
*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body{
  font-family: "Karla", system-ui;
  background: #f6f7f4;
  color: #0f2433;
}

h1, h2, h3, h4{
  font-family: "Unica One", system-ui;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

a{
  color: inherit;
  text-decoration: none;
}

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===============================
   TOP CONTACT BAR (fixed)
================================ */
.top-contact-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: var(--orange);
}

.top-contact-inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.top-contact-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  color: #fff !important;
}

.top-contact-item:first-child{
  border-right: 1px solid rgba(255,255,255,0.25);
  justify-content: flex-end;
  text-align: right;
  padding-right: 22px;
}

.top-contact-item:last-child{
  justify-content: flex-start;
  text-align: left;
  padding-left: 22px;
}

.top-contact-item:hover{
  background: rgba(255,255,255,0.06);
}

.top-contact-icon{
  font-size: 22px;
  line-height: 1;
  opacity: 0.95;
  color: #fff !important;
}

.top-contact-label{
  display: block;
  font-weight: 800;
  letter-spacing: 0.8px;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92) !important;
}

.top-contact-value{
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #fff !important;
}

/* Mobile contact bar */
@media (max-width: 700px){
  .top-contact-inner{ grid-template-columns: 1fr; }
  .top-contact-item:first-child{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    justify-content: flex-start;
    text-align: left;
    padding-right: 18px;
  }
  .top-contact-item:last-child{
    padding-left: 18px;
  }
}

/* ===============================
   NAV (fixed under contact bar)
================================ */
.top-nav{
  position: fixed;
  top: var(--contact-bar-h);
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0px 24px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.top-nav-inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  overflow: visible;
}

.nav-left,
.nav-right{
  display: flex;
  align-items: center;

  gap: 22px;          /* slightly tighter */
  flex-wrap: nowrap;  /* THIS stops wrapping */
  min-width: 0;
  white-space: nowrap;
}

.nav-left{ justify-content: flex-end; }

.nav-right{
  justify-content: flex-start;
  min-width: 0;
}

.nav-right .nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;
  border-radius: 10px;

  background: #00A99D;
  color: #ffffff !important;

  font-family: "Unica One", system-ui;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;

  white-space: nowrap;
  flex-shrink: 0;
}
.nav-left a,
.nav-right a,
.nav-dropbtn{
  font-family: "Unica One", system-ui;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--nav-text);
}

/* Allow ONLY the Book Consultation button to wrap */
.nav-right a.nav-cta{

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 16px;

  background: #00A99D;
  color: #ffffff;

  border-radius: 10px;

  white-space: normal;   /* allows wrapping */

  max-width: 170px;      /* forces wrap when needed */

  line-height: 1.15;

  text-align: center;

}

.nav-left a:hover,
.nav-right a:hover,
.nav-dropbtn:hover{
  color: var(--white);
}



.nav-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-logo img{
  height: 100px;
  width: auto;
  display: block;
}

/* Dropdown */
.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropbtn{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.nav-caret{
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.9;
}

.nav-dropmenu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  z-index: 10000;

  background: #00A99D;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: 180ms ease;
}

.nav-dropmenu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
}

.nav-dropmenu a:hover,
.nav-dropmenu a:focus{
  background: rgba(255,255,255,0.08);
  outline: none;
}

/* Desktop hover open */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropmenu,
  .nav-dropdown:focus-within .nav-dropmenu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* bridge the hover gap so it doesn’t “flicker” */
  .nav-dropdown::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:12px;
  }
}

/* JS click-open (mobile/touch) */
.nav-dropdown.is-open .nav-dropmenu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile nav stack */
@media (max-width: 900px){
  .top-nav{ padding: 14px 12px; }
  .top-nav-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    max-width: 520px;
  }
  .nav-left, .nav-right{
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ===============================
   HERO (background + zoom + split)
================================ */
.top-hero{
  min-height: 92vh;
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--contact-bar-h) + 120px);
}


/* Zoom ONLY the background (not the nav/text) */
.top-hero::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    url("./assets/Sarasota_Hero.webp") center / cover no-repeat;

  transform: scale(1.18);
  transition: transform 1100ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  pointer-events: none;
}


html.is-loaded .top-hero::before{
  transform: scale(1);
}

/* Put content above bg */
.top-hero > *{
  position: relative;
  z-index: 1;
}

.top-hero{
  padding-top: calc(var(--contact-bar-h) + 120px);
}


.hero-overlay{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 18px 60px;
}


.hero-overlay{
  padding-top: 90px;
}



.hero-content{
  width: min(1200px, 92%);
}

/* Two-column hero split (text + form) */
.hero-split{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.hero-left{ text-align: left; }

.hero-title{
  font-family: "Unica One", system-ui;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(58px, 7vw, 110px);
  line-height: 1.02;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 18px 45px rgba(0,0,0,0.65);
  max-width: 680px;
}

.hero-subs{ display: grid; gap: 10px; }

.hero-sub{
  font-family: "Karla", system-ui;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* Right: form card */
.hero-right{
  display: flex;
  justify-content: flex-end;
}

.hero-form-card{
  width: min(420px, 100%);
  padding: 22px 20px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  overflow: hidden;
}

.form-title{
  margin: 0 0 6px;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.3px;
}

.form-subtitle{
  margin: 0 0 14px;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
}

/* Quote form */
.quote-form{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.quote-form input,
.quote-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.28);
  color: #fff;
  outline: none;
  font-size: 14px;
}

.quote-form textarea{
  resize: none;
  min-height: 110px;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder{
  color: rgba(255,255,255,0.72);
}

.quote-form button{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #00A99D;
  color: #fff;
  font-weight: 700;
}

.quote-form button:hover{ filter: brightness(1.05); }

.form-disclaimer{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.75);
}

/* Text entrance animation */
.hero-title,
.hero-sub{
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
}

.hero-title{
  transition: transform 550ms ease, opacity 550ms ease;
  transition-delay: 120ms;
}

.hero-sub{
  transition: transform 550ms ease, opacity 550ms ease;
}

.hero-subs .hero-sub:nth-child(1){ transition-delay: 320ms; }
.hero-subs .hero-sub:nth-child(2){ transition-delay: 450ms; }

html.is-loaded .hero-title,
html.is-loaded .hero-sub{
  opacity: 1;
  transform: translateY(0);
}

/* Mobile hero */
@media (max-width: 900px){
  .top-hero{
    padding-top: calc(var(--contact-bar-h) + 95px);
  }

  .hero-split{
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .hero-right{ justify-content: flex-start; }

  .hero-title{
    font-size: 42px;
    letter-spacing: 1px;
    max-width: 95vw;
  }

  .hero-sub{
    font-size: 13px;
    letter-spacing: 1px;
    max-width: 92vw;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .top-hero::before,
  .hero-title,
  .hero-sub{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===============================
   SERVICES SECTION (REWORK — FULL-WIDTH RECTANGLES)
================================ */
.biz-pan{padding:64px 0}
.biz-wrap{position:relative}
.biz-arrow{display:none!important}
.biz-strip{width:100%;overflow:visible!important;mask-image:none!important;padding:0!important;cursor:default!important;scroll-snap-type:none!important}
/* ===============================
   SERVICES — PERFECT HORIZONTAL FIT
================================ */

/* ===============================
   SERVICES — TRUE HORIZONTAL PANELS
================================ */

/* remove container padding so panels hit screen edges */
.biz-pan .container{
  max-width:none;
  padding:0;
}


/* horizontal row */
.biz-track{

  display:flex;

  flex-direction:row;

  width:100%;

}


/* each panel stretches evenly */
.biz-card{

  flex:1;

  height:420px;

  border-radius:0;

  background-size:cover;
  background-position:center;

  position:relative;

}

@media(max-width:900px){

.biz-track{

flex-direction:column;

}

.biz-card{

height:320px;

}

}

.biz-card::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 320px at 20% 110%,rgba(255,106,0,.22),transparent 60%);pointer-events:none}

.biz-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;

  justify-content:flex-end;   /* THIS fixes "FULL" going above */

  align-items:flex-start;

  text-align:left;

  padding:44px;

  gap:12px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 50%,
    rgba(0,0,0,0) 100%
  );
}

/* RESTORE SITE TYPOGRAPHY */

.biz-overlay h3{

  font-family:"Unica One", system-ui;

  font-size: clamp(28px, 3vw, 40px);

  letter-spacing:1px;

  text-transform:uppercase;

  font-weight:normal;

}

.biz-overlay p{

  font-family:"Karla", system-ui;

  font-size:16px;

  line-height:1.6;

  font-weight:400;

}

.biz-card:hover{transform:translateY(-2px)}
@media(max-width:900px){.biz-card{height:300px!important}.biz-overlay{padding:28px!important}.biz-overlay h3{max-width:unset}}
@media(max-width:600px){.biz-card{height:320px!important}.biz-overlay{padding:22px!important;background:linear-gradient(180deg,rgba(0,0,0,.70),rgba(0,0,0,.35),rgba(0,0,0,.10))}}

/* ===============================
   ABOUT SPLIT
================================ */
.about-split{
  padding: 80px 0;
  background: var(--white);
}

.about-split-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-kicker{ margin: 0 0 14px; }

.about-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--purple);
}

.about-link:hover{
  text-decoration: underline;
}

.about-title{
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin: 0 0 18px;
}

.about-body{
  color: rgba(255,255,255,0.85);
  line-height: 1.75;
  font-size: 15.5px;
  max-width: 520px;
  margin: 0;
}

.about-split-image{
  width: 100%;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.about-split-image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px){
  .about-split{ padding: 60px 0; }
  .about-split-grid{ grid-template-columns: 1fr; }
  .about-body{ max-width: 100%; }
}

/* ===============================
   MANUFACTURER LOGOS
================================ */
.mfr{
  padding: 70px 0;
  background: #fff;
}

.mfr-inner{ text-align: center; }

.mfr-title{
  margin: 0 0 26px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--gray);
}

.mfr-logos{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  justify-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.mfr-logos img{
  max-width: 190px;
  width: 100%;
  height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.mfr-logos img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 800px){
  .mfr-logos{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mfr-logos img{
    max-width: 220px;
    height: 64px;
  }
}

/* ===============================
   REVIEWS (photo background)
================================ */
.reviews{
  position: relative;
  padding: 110px 0;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("./assets/Sarasota_Hero.webp") center/cover no-repeat;
}

.reviews h2{
  font-size: 30px;
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: 2px;
  color: #fff;
}

.review-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 22px;
}

.review{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 24px;
  border-radius: 22px;
}

.review h4{
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Karla", system-ui;
  font-size: 15px;
  line-height: 1.6;
  color: #0f2433;
}

.review p{
  margin: 0;
  font-weight: 700;
  color: rgba(15,36,51,0.85);
}

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

/* ===============================
   LAST CTA (image + white panel)
================================ */
.last-cta{ width: 100%; }

.last-cta-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.last-cta-photo{
  background: url("./assets/shoreline-team.webp") center/cover no-repeat;
  filter: grayscale(15%);
}

.last-cta-panel{
  background: #fff;
  padding: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.last-cta-panel h2{
  margin: 0 0 18px;
  color: rgba(11, 31, 51, 0.85)
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  font-size: clamp(22px, 2.2vw, 34px);
}

.last-cta-panel h2 .cta-purple{ color: var(--purple); }

.last-cta-sub{
  margin: 0 0 18px;
  color: #111111;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.last-cta-line{
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: var(--purple);
  margin: 0 0 22px;
}

.last-cta-body{
  margin: 0 0 26px;
  color: rgba(11,31,51,0.85);
  line-height: 1.7;
  max-width: 520px;
  font-size: 15px;
}

.last-cta-phone{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gray);
  font-weight: 900;
  font-size: 20px;
  margin-top: 6px;
}

.last-cta-phone:hover{
  color: var(--purple);
  text-decoration: underline;
}

@media (max-width: 900px){

  .last-cta-grid{
    grid-template-columns: 1fr;
  }

  .last-cta-photo{

    height: 260px;              /* THIS fixes the slim image */

    min-height: 260px;

    background-position: center;

  }

  .last-cta-panel{

    padding: 50px 22px;

  }

}





/* =========================================================
   COMMERCIAL PLUMBING PAGE ONLY
   (scoped via <body class="page-commercial-plumbing">)
   ========================================================= */

/* Hero background image (same method as services hub) */
.page-commercial-plumbing .about-split:first-of-type{
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("./assets/Sarasota_Hero.webp") center top / cover no-repeat;
}

/* ---- Service page add-ons (scoped) ---- */
.page-commercial-plumbing .svc-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.page-commercial-plumbing .svc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
}

.page-commercial-plumbing .svc-btn.ghost{ background:transparent; }

/* ---- WHITE SPLIT SECTION ---- */
.page-commercial-plumbing .svc-split{
  background:#fff;
  color:#0b1f33;
  padding:70px 0;
}

.page-commercial-plumbing .svc-split-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
}

.page-commercial-plumbing .svc-title{
  font-size:34px;
  line-height:1.1;
  margin:10px 0 0;
}

.page-commercial-plumbing .svc-body{
  margin:14px 0;
  max-width:62ch;
}

.page-commercial-plumbing .svc-mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.page-commercial-plumbing .svc-mini-card{
  border:1px solid rgba(11,31,51,.12);
  border-radius:16px;
  padding:14px;
}

.page-commercial-plumbing .svc-mini-card h4{ margin:0 0 6px; }

.page-commercial-plumbing .svc-split-image img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
}

/* ---- DARK ICON GRID ---- */
.page-commercial-plumbing .svc-dark{
  padding:80px 0;
  color:#fff;
  position:relative;
}

.page-commercial-plumbing .svc-dark::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.10), transparent 60%),
    rgba(7,15,28,.92);
  z-index:0;
}

.page-commercial-plumbing .svc-dark-inner{
  position:relative;
  z-index:1;
}

.page-commercial-plumbing .svc-dark-title{
  font-size:34px;
  margin:0 0 10px;
}

.page-commercial-plumbing .svc-dark-sub{
  max-width:80ch;
  opacity:.92;
}

.page-commercial-plumbing .svc-dark-line{
  height:2px;
  width:44px;
  background:rgba(255,255,255,.35);
  margin:18px 0 26px;
  border-radius:999px;
}

.page-commercial-plumbing .svc-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.page-commercial-plumbing .svc-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:22px;
  background:rgba(255,255,255,.04);
}

.page-commercial-plumbing .svc-icon{
  font-size:26px;
  margin-bottom:10px;
}

.page-commercial-plumbing .svc-item h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.02em;
}

.page-commercial-plumbing .svc-item p{
  margin:0;
  opacity:.92;
}

/* ---- PROCESS SECTION ---- */
.page-commercial-plumbing .svc-process{
  background:#fff;
  color:#0b1f33;
  padding:70px 0;
}

.page-commercial-plumbing .svc-process-title{
  font-size:32px;
  margin:0 0 6px;
}

.page-commercial-plumbing .svc-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.page-commercial-plumbing .svc-step{
  border:1px solid rgba(11,31,51,.12);
  border-radius:18px;
  padding:18px;
}

.page-commercial-plumbing .svc-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(11,31,51,.18);
  font-weight:800;
}

.page-commercial-plumbing .svc-step h3{
  margin:10px 0 6px;
  font-size:16px;
}

.page-commercial-plumbing .svc-step p{
  margin:0;
  opacity:.9;
}

/* ---- FAQ ---- */
.page-commercial-plumbing .svc-faq{
  background:#fff;
  color:#0b1f33;
  padding:70px 0;
}

.page-commercial-plumbing .svc-faq-title{
  font-size:32px;
  margin:0 0 6px;
}

.page-commercial-plumbing .faq{
  margin-top:18px;
  max-width:900px;
}

.page-commercial-plumbing .faq-q{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid rgba(11,31,51,.14);
  border-radius:16px;
  padding:16px 18px;
  margin:10px 0;
  font-weight:800;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  cursor:pointer;
}

.page-commercial-plumbing .faq-plus{
  font-size:22px;
  opacity:.8;
}

.page-commercial-plumbing .faq-a{
  border:1px solid rgba(11,31,51,.10);
  border-radius:16px;
  padding:14px 18px;
  margin:-4px 0 12px;
  opacity:.92;
}

.page-commercial-plumbing .svc-faq-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .page-commercial-plumbing .svc-split-grid{ grid-template-columns:1fr; gap:22px; }
  .page-commercial-plumbing .svc-grid{ grid-template-columns:1fr 1fr; }
  .page-commercial-plumbing .svc-steps{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
  .page-commercial-plumbing .svc-mini{ grid-template-columns:1fr; }
  .page-commercial-plumbing .svc-grid{ grid-template-columns:1fr; }
  .page-commercial-plumbing .svc-steps{ grid-template-columns:1fr; }
}



/* =========================
   MOBILE: single slim purple contact bar
   (desktop untouched)
   ========================= */
@media (max-width: 768px){

  .top-contact-bar{
    padding: 0 !important;
  }

  .top-contact-inner{
    width: min(1200px, 92%);
    margin: 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
  }

  .top-contact-item{
    padding: 0 !important;
    gap: 10px !important;
  }

  .top-contact-label{
    display: none !important;
  }

  /* hide email text, keep icon */
  .top-contact-item:first-child .top-contact-value{
    display: none !important;
  }

  /* keep phone number */
  .top-contact-item:last-child .top-contact-value{
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
  }

  /* email icon only button-like */
  .top-contact-item:first-child{
    width: 44px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: none !important;
  }

  .top-contact-item:first-child .top-contact-icon{
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .top-contact-item:last-child .top-contact-icon{
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .top-contact-text{
    display: inline !important;
  }
}

/* Hide caret globally */
* {
  caret-color: transparent;
}

/* Restore caret for form inputs only */
input,
textarea,
select,
[contenteditable="true"] {
  caret-color: auto;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  margin-bottom: 8px;
}

.footer-links a{
  color: #F26A21;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover{
  color: #F26A21;
}

.copyright-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.copyright-links a{
  color: #cfd8e3;
  font-size: 13px;
  text-decoration: none;
}

.copyright-links span{
  margin: 0 6px;
  color: #cfd8e3;
}

.copyright-links a:hover{
  color: #ffffff;
}

/* ===============================
   COPYRIGHT BAR (CENTERED)
================================ */
.copyright-bar {
  background: #F26A21;
  padding: 16px 0;
}

.copyright-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.copyright-bar p {
  margin: 0;
  font-size: 14px;
  color: #cfd8e3;
}

/* Match contact-link hover behavior */
.copyright-bar a {
  color: #cfd8e3;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s ease;
}

.copyright-bar a:hover {
  color: var(--purple); /* same purple as contact links */
}

.site-footer a:hover {
  color: var(--purple);
}

/* ===============================
   PRIOR PROJECTS SHOWCASE
================================ */

.projects-showcase{
  width: 100%;
  background: #ffffff;
}

/* ROW */
.project-row{
  display: grid;
  grid-template-columns: 65% 35%;
  min-height: 70vh;
}

/* FLIPPED ROW */
.project-row.reverse{
  grid-template-columns: 35% 65%;
}

.project-row.reverse .project-image{
  order: 2;
}

/* IMAGE */
.project-image{
  background-size: cover;
  background-position: center;
}

/* CONTENT */
.project-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px);
  background: #f7f9fb;
}

.project-content h3{
  font-size: clamp(22px, 2.4vw, 30px);
  margin-bottom: 8px;
}

.project-location{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 18px;
}

.project-content p{
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}

/* MOBILE */
@media (max-width: 900px){
  .project-row,
  .project-row.reverse{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .project-image{
    height: 45vh;
  }

  .project-content{
    padding: 36px 24px;
  }
}

/* ===============================
   PROJECTS SECTION TWEAKS
================================ */

/* extra spacing above Projects section */
.projects-showcase{
  margin-top: clamp(80px, 10vw, 140px);
}

/* force gray title color */
.projects-showcase .about-title{
  color: var(--gray, #0b1f33);
}

/* ===============================
   HOW IT WORKS / SYSTEMS
================================ */

.how-it-works{
  background: #fff;
  padding: clamp(80px, 10vw, 140px) 0;
}

/* intro */
.how-intro{
  max-width: 820px;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 20px;
}

/* steps */
.how-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
  margin-top: 70px;
}

.how-step{
  background: #f7f9fb;
  padding: 36px;
  border-radius: 10px;
}

.how-step-num{
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--gray, #0b1f33);
}

.how-step h3{
  margin: 10px 0 12px;
  font-size: 20px;
}

.how-step p{
  font-size: 15px;
  line-height: 1.6;
}

/* systems */
.systems{
  margin-top: 90px;
  text-align: center;
}

.systems-title{
  font-size: 22px;
  margin-bottom: 32px;
}

.systems-logos{
  display: flex;
  justify-content: center;
  gap: clamp(40px, 6vw, 80px);
  flex-wrap: wrap;
}

/* logo interaction */
.system-logo img{
  height: 60px;
  filter: grayscale(100%) brightness(0.9);
  transition: all 0.25s ease;
}

/* hover + click */
.system-logo:hover img,
.system-logo:focus img,
.system-logo:active img{
  filter: none;
}

/* MOBILE */
@media (max-width: 900px){
  .how-steps{
    grid-template-columns: 1fr;
  }

  .system-logo img{
    height: 48px;
  }
}

/* Emphasize Sika logo */
.system-logo img[src*="sika"]{
  height: 80px; /* default is ~60px */
}

/* ===============================
   HOW IT WORKS ICONS (REFINED)
================================ */

/* icon container — smaller & cleaner */
.how-icon{
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(216,188,138,0.14); /* soft gold wash */
  border-radius: 10px;
}

/* svg icon — gold */
.how-icon svg{
  width: 18px;
  height: 18px;
  fill: #d8bc8a; /* shoreline gold */
}

/* step number spacing */
.how-step-num{
  display: block;
  margin-top: 6px;
}

/* subtle hover (desktop only) */
@media (hover: hover){
  .how-step:hover .how-icon{
    background: rgba(216,188,138,0.22);
    transform: translateY(-1px);
    transition: all 0.25s ease;
  }
}

/* ===============================
   MOBILE NAV — SLIM VERSION
================================ */
@media (max-width: 768px){

  /* NAV BAR */
  .top-nav{
    padding: 0 12px;        /* no vertical padding */
  }

  /* KEEP EVERYTHING IN ONE ROW */
  .top-nav-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* LOGO — SMALLER ON MOBILE */
  .nav-logo img{
    height: 85px;           /* 🔥 THIS is the big win */
    width: auto;
  }

  /* LEFT / RIGHT LINKS */
  .nav-left,
  .nav-right{
    gap: 12px;
  }

  /* TEXT SLIGHTLY SMALLER */
  .nav-left a,
  .nav-right a,
  .nav-dropbtn{
    font-size: 15px;
    line-height: 1;
  }
}




@media (max-width: 900px){
  .project-row.project-3{
    grid-template-columns: 1fr;
  }

  .project-row.project-3 .project-image{
    order: 1;
  }

  .project-row.project-3 .project-content{
    order: 2;
  }
}

/* SERVICES DROPDOWN — SMALLER ITEM TEXT ONLY */
.nav-dropmenu a{
  font-size: 16px;        /* smaller than nav text */
  line-height: 1.15;
  letter-spacing: 0.04em;
}

/* FOOTER — WIDEN BRAND COLUMN, PUSH OTHERS RIGHT */
@media (min-width: 900px){
  .footer-grid{
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    column-gap: 56px;
  }
}

@media (max-width: 900px){
  .project-row.project-3 .project-image{
    grid-row: 2;
  }

  .project-row.project-3 .project-content{
    grid-row: 1;
  }
}


/* =========================================
   HERO + GHL IFRAME — COMPOSITING FIX
   (PREVENTS HERO TITLE DISAPPEARING)
========================================= */

/* Force hero grid into stable paint order */
.hero-split{
  position: relative;
  isolation: isolate;
}

/* Left hero text explicitly preserved */
.hero-left{
  position: relative;
  z-index: 2;
}

/* Isolate form card from hero background */
.hero-form-card{
  position: relative;
  isolation: isolate;
  z-index: 1;
}

/* iframe stays contained */
.hero-form-card iframe{
  position: relative;
  z-index: 1;
  width: 100%;
  border: none;
}

/* =========================================
   GHL IFRAME — HARD FIX
   Remove backdrop-filter from iframe container
========================================= */

.hero-form-card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.14); /* visually identical fallback */
}

/* =========================================
   HERO TEXT — FORCE ABOVE BACKGROUND
========================================= */

.hero-content{
  position: relative;
  z-index: 2;
}

/* ===============================
   TRUST STRIP
================================ */

.trust-strip{

  background:#efefef;
  padding:42px 0;

}

.trust-inner{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;

}

/* Individual items */

.trust-item{

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;

}

/* Images */

.trust-item img{

  height:70px;
  width:auto;
  object-fit:contain;

}

/* Google slightly larger */

.trust-item.google img{

  height:85px;

}

/* BBB slightly smaller */

.trust-item.bbb img{

  height:65px;

}

/* Text */

.trust-item span{

  font-size:14px;
  font-weight:600;
  color:#444;

}

/* Mobile */

@media(max-width:900px){

  .trust-inner{

    flex-wrap:wrap;
    justify-content:center;
    gap:30px;

  }

  .trust-item img{

    height:55px;

  }

}


.trust-item{
 transition:transform .25s ease;
}

.trust-item:hover{
 transform:translateY(-4px);
}

/* VIDEO WRAPPER */

.video-wrapper{

  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 ratio */

  border-radius:18px;
  overflow:hidden;

  box-shadow:0 20px 50px rgba(0,0,0,0.25);

}

.video-wrapper iframe{

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

}

/* SPACE BETWEEN ABOUT PARAGRAPHS */

.about-body{
  margin-bottom: 18px;
}

.about-body:last-child{
  margin-bottom: 0;
}

.about-title{
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  color: #111111;   /* professional black */
  margin: 0 0 18px;
}

.about-body{
  color: #333333;   /* softer professional black */
  line-height: 1.75;
  font-size: 15.5px;
  max-width: 520px;
  margin: 0;
}

/* spacing between paragraphs */
.about-body + .about-body{
  margin-top: 18px;
}



/* =========================================
   PROMO RIBBON: smaller + stays off headline
========================================= */

/* Ensure promo can sit above hero bg but below text */
.hero-overlay{
  position: relative;
  overflow: visible;
}

/* Keep hero text above ribbon */
.hero-content{
  position: relative;
  z-index: 5;
}

.promo-corner{
  position: absolute;
  top: 60px;          /* higher */
  left: -120px;       /* less intrusive */
  transform: rotate(-25deg);

  padding: 10px 80px 10px 120px;
  background: linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:#fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);

  z-index: 9998;
  pointer-events: none;

  animation: promoFloat 3s ease-in-out infinite;
}

.promo-corner span{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.1;
  display: block;
  white-space: nowrap;
}

/* animation (CORRECTLY CLOSED) */
@keyframes promoFloat{
  0%   { transform: rotate(-35deg) translateY(0px); }
  50%  { transform: rotate(-35deg) translateY(-6px); }
  100% { transform: rotate(-35deg) translateY(0px); }
}


/* ===============================
   FOOTER — SHOWER CO (COMPACT + ONE LINE)
================================ */
:root{
  --promo-blue: #F26A21;                 /* promo strip orange */
  --footer-purple: var(--purple);
}

.site-footer{
  background: var(--footer-purple);
  color:#fff;
  padding: 46px 0 0;
  margin:0;
}

/* FORCE ONE LINE */
.footer-grid{
  display:flex;
  flex-wrap:nowrap;                     /* never wrap into another row */
  gap:28px;                             /* compact */
  align-items:flex-start;
  justify-content:space-between;
}

.footer-col{

  flex:1 1 0;     /* allows shrinking */

  min-width:0;    /* CRITICAL FIX */

}

.footer-brand{ min-width:0; }

.footer-address{ min-width:0; }

.footer-locations{ min-width:0; }

/* logo */
.footer-logo{
  height:100px;
  width:auto;
  display:block;
  object-fit:contain;
  margin:0 0 10px;
}

/* social icons (circles) */
.footer-social{
  display:flex;
  gap:10px;
  margin:0 0 10px;
  flex-wrap:wrap;
}

.footer-social a{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.16);
  text-decoration:none;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.footer-social a:hover{
  background:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.28);
  transform:translateY(-1px);
}

.footer-social svg{
  width:16px;
  height:16px;
  fill:#fff;
}

.footer-text{
  margin:0;
  color:rgba(255,255,255,0.82);
  font-size:12.5px;
  line-height:1.55;
}

.footer-blurb{ max-width:240px; }

/* headings */
.site-footer h3{
  margin:0 0 8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* links */
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-links li{ margin:0 0 6px; }

.site-footer a{
  color:rgba(255,255,255,0.86);
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease;
}

.site-footer a:hover{
  color: #F26A21;             /* hover to light blue */
  text-decoration:underline;
}

/* keep this clean */
.footer-address a{ white-space:nowrap; }

/* make the long locations column scroll internally if needed */
/* TALLER FOOTER */

.site-footer{

background: var(--footer-purple);

padding: 70px 0 0;   /* increased from 46px */

}


/* more breathing room between links */

.footer-links li{

margin-bottom: 8px;

}


/* slightly taller line spacing */

.footer-text{

line-height: 1.7;

}

/* subtle scrollbar (optional) */
.footer-locations .footer-links::-webkit-scrollbar{ width:6px; }
.footer-locations .footer-links::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
}

/* ===============================
   COPYRIGHT BAR — PROMO BLUE (FIXED)
================================ */
.copyright-bar{
  background: var(--promo-blue) !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  text-align:center;
  border:0 !important;
}

.copyright-bar p{
  margin:0 !important;
  color:#fff !important;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:800;
}

.copyright-bar a{
  color:#fff !important;
  text-decoration:none;
  transition: color .2s ease, background .2s ease;
}

.copyright-bar a:hover{

color:#ffffff !important;   /* use solid color from gradient */

background:transparent !important;

padding:0;

border-radius:0;

}

@media (max-width: 900px){

  .footer-grid{
    flex-wrap: wrap;
  }

  .footer-col{
    width: 100%;
  }

}

/* ===============================
   SERVICES TITLE — CENTER + SPACING
================================ */

/* center the title block */
.biz-pan .about-kicker,
.biz-pan .about-title,
.biz-pan .about-body,
.biz-pan .about-underline{

  text-align:center;
  margin-left:auto;
  margin-right:auto;

}

/* control max width so it looks clean */
.biz-pan .about-body{

  max-width:700px;

}

/* ADD SPACE between title and panels */
.biz-wrap{

  margin-top:60px;

}

/* SECTION LAYOUT */

.difference-split{

background:#f5f5f5;
padding:120px 0;

}


/* GRID */

.difference-grid{

display:grid;

grid-template-columns:
55%
45%;

gap:60px;

align-items:center;

}


/* MAKE TEXT BIGGER */

.difference-title{

font-size: clamp(42px, 4vw, 56px);

}

.difference-body{

font-size:18px;
max-width:600px;

}


/* BULLETS */

.difference-item{

display:flex;
gap:16px;
margin-top:24px;

}

.difference-icon{

color:var(--purple);
font-size:20px;
margin-top:6px;

}


/* IMAGE FULL RIGHT SIDE */

.difference-image{

position:relative;
height:100%;

}

.difference-image img{

width:100%;
height:100%;

object-fit:cover;

border-radius:0;

}


/* MAKE IMAGE TOUCH RIGHT EDGE */

.difference-split .container{

max-width:1400px;

}


/* MOBILE */

@media(max-width:900px){

.difference-grid{

grid-template-columns:1fr;

}

.difference-image{

margin-top:40px;

}

}

.companycam-section{

background:#f5f5f5;

padding:100px 0;

}

/* ===============================
GOOGLE REVIEWS SECTION
=============================== */

.reviews{
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}


.reviews-bg{
  position: absolute;
  inset: 0;
  background: url("assets/Sarasota_Hero.webp") center / cover no-repeat;
  z-index: 1;
}


.reviews-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2;
}


.reviews-inner{
  position: relative;
  z-index: 3;
  text-align: center;
}


.reviews-title{
  color: #ffffff;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  margin-bottom: 50px;
}


.reviews-panel{
  max-width: 900px;
  margin: auto;
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* Fix Elfsight floating badge spacing */
.elfsight-app-15d89383-6600-46cf-a22a-569d1919fff0{
  position: fixed !important;
}

/* Prevent horizontal scrollbar */
body{
  overflow-x: hidden;
}

/* Remove bottom white gap */
html, body{
  margin: 0;
  padding: 0;
}

/* Prevent Elfsight container from affecting layout */
[class*="elfsight-app"]{
  display: block;
  line-height: 0;
}

.about-underline{
  width: 44px;
  height: 3px;
  background: var(--purple);
  border-radius: 999px;
  margin: 0 0 22px;
}

.last-cta-panel .nav-cta{
  margin-top: 10px;
  align-self: flex-start;
}

/* Fix nav CTA inside last CTA panel */
.last-cta-panel .nav-cta{

  display: inline-block;

  width: auto;

  align-self: flex-start;

  margin-top: 10px;

  text-decoration: none;

}

/* FORCE: Last CTA button to match nav purple button */
.last-cta-panel a.nav-cta,
.last-cta-panel .nav-cta{
  background: var(--purple, #7c3aed) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 22px !important;
  border-radius: 8px !important;

  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;

  border: 0 !important;
  box-shadow: none !important;

  width: fit-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

.last-cta-panel a.nav-cta:hover,
.last-cta-panel .nav-cta:hover{
  filter: brightness(0.95) !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

.process-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 44px;
  margin-top:20px;

}

.process-step{

  display:flex;
  gap:18px;
  align-items:flex-start;

}

.process-number{

  font-size:44px;
  font-weight:700;
  line-height:1;
  color:#00A99D; /* purple */

  min-width:32px;

}

.process-step h4{

  margin:0;
  font-size:18px;

}

.process-step p{

  margin-top:6px;
  font-size:15px;
  line-height:1.5;

}


/* MOBILE */
@media(max-width:768px){

  .process-grid{

    grid-template-columns:1fr;

  }

}

.biz-card{
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.biz-overlay{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 28px;

  color: #ffffff;

  /* THIS IS THE IMPORTANT PART */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.6) 45%,
    rgba(0,0,0,0.2) 75%,
    rgba(0,0,0,0.0) 100%
  );
}

.biz-overlay h3,
.biz-overlay p{
  text-shadow:
    0 2px 8px rgba(0,0,0,0.9);
}

.biz-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.25);
}



/* =========================================
   HIDE PROMO RIBBON ON MOBILE ONLY
========================================= */
@media (max-width:768px){

  .promo-corner{
    display: none !important;
  }

}

@media (max-width:768px){

  .top-nav .nav-cta{
    display: none !important;
  }

}

/* =========================================
   MOBILE CONSULTATION BUTTON — CLEAN VERSION
========================================= */

.mobile-cta{
  display: none;
}

@media (max-width:768px){

  .mobile-cta{

    display: block;

    padding: 18px;

    background: #ffffff;

  }

  .mobile-cta a{

    display: block;

    background: #00A99D;

    color: #fff;

    text-align: center;

    padding: 16px;

    font-size: 18px;

    font-family: "Unica One", system-ui;

    border-radius: 10px;

    text-decoration: none;

    box-shadow: 0 6px 18px rgba(0,0,0,0.2);

  }

.mobile-cta a{

  font-family:"Unica One", system-ui;

  letter-spacing:1.5px;

  text-transform:uppercase;

}

}

/* =========================================================
   NAV / HAMBURGER / MOBILE MENU — CLEAN FIX (PASTE LAST)
   ========================================================= */

/* Desktop defaults */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:10px;
  border-radius:10px;
}
.hamburger span{
  display:block;
  height:3px;
  margin:6px 0;
  background: var(--purple);
  border-radius:999px;
}

/* =========================================
   MOBILE MENU FULL SCROLL FIX
========================================= */

/* =========================================
   MOBILE MENU — CORRECT FINAL VERSION
========================================= */

/* HIDDEN BY DEFAULT */
.mobile-menu{

  display: none;

  position: fixed;

  top: var(--nav-h);

  left: 0;

  width: 100%;

  height: calc(100vh - var(--nav-h));

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  background: rgba(255,255,255,0.98);

  z-index: 999999;

}


/* SHOW ONLY WHEN OPEN */
.mobile-menu.open{

  display: block;

}


/* INNER SCROLL AREA */
.mobile-menu-inner{

  padding: 20px;

  padding-bottom: 80px;

}

/* CRITICAL: ensure inner can scroll fully */

.mobile-menu-inner{

  padding: 20px;

  padding-bottom: 80px;

}

.mobile-menu.open{
  display:block;
}

.mobile-menu-inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 14px 16px 18px;
  display:grid;
  gap: 10px;
}

.mobile-menu-inner hr{
  border:0;
  height:1px;
  background: rgba(0,0,0,0.12);
  margin: 6px 0;
}

.mobile-menu a{
  font-family: "Unica One", system-ui;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(0,0,0,0.85);
  padding: 10px 10px;
  border-radius: 10px;
  display:block;
}

.mobile-menu a:hover{
  background: rgba(76,52,148,0.08);
}

.mobile-menu .mm-cta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--purple);
  color:#fff;
}

/* Mobile behavior */
@media (max-width:768px){

  /* Show hamburger ONLY on mobile */
  .hamburger{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Make nav a simple row on mobile */
  .top-nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
  }

  /* Hide desktop link groups on mobile */
  .nav-left,
  .nav-right{
    display:none !important;
  }

  /* Keep logo sane on mobile */
  .nav-logo img{
    height: 78px;
  }
}

 /* =========================================
   MOBILE NAV LAYOUT — LOGO LEFT, HAMBURGER RIGHT
========================================= */

@media (max-width:768px){

  .top-nav-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

  }


  /* LOGO LEFT */
  .nav-logo{

    order:1;

  }

  .nav-logo img{

    height:72px;

  }


  /* HAMBURGER RIGHT */
  .hamburger{

    display:flex !important;

    align-items:center;

    justify-content:center;

    order:3;

    width:44px;

    height:44px;

    z-index:100000;

  }


  /* hide desktop menu items */
  .nav-left,
  .nav-right{

    display:none !important;

  }

}

.hamburger span{

  width:24px;

  height:3px;

  background:#00A99D;

  display:block;

  margin:5px 0;

}

/* =========================================
   MOBILE MENU — FIX SCROLL + CLICK
========================================= */

.mobile-menu{

  position: fixed;

  top: 120px; /* adjust to bottom of your nav */

  left: 0;

  width: 100%;

  height: calc(100vh - 120px);

  background: rgba(255,255,255,0.98);

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  z-index: 999999;

}


/* make inner container full height */

.mobile-menu-inner{

  padding: 20px;

}


/* prevent background scroll when menu open */

body.menu-open{

  overflow: hidden;

}


/* =========================================
   SMALLER, COMPACT HAMBURGER
========================================= */

.hamburger{

  width:36px;
  height:36px;

  padding:6px;

}

.hamburger span{

  width:20px;
  height:2px;

  margin:4px 0;

}


/* Optional: even tighter on mobile */

@media (max-width:768px){

  .hamburger{

    width:32px;
    height:32px;

  }

  .hamburger span{

    width:18px;
    height:2px;

  }

}

body.menu-open{
  overflow: hidden;
}

/* MOBILE DROPDOWN GROUPS */

.mm-group{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mm-toggle{

  width:100%;

  text-align:left;

  background:none;

  border:none;

  font-family:"Unica One";

  font-size:22px;

  padding:14px 0;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.mm-panel{

  display:none;

  padding-bottom:12px;

}

.mm-panel a{

  display:block;

  padding:8px 0 8px 18px;

  font-size:18px;

}

.mm-group.open .mm-panel{

  display:block;

}

.mm-caret{

  font-size:18px;

}

.mm-panel{
  display:none;
}

.mm-group.open .mm-panel{
  display:block;
}

/* =========================================
   MOBILE NAV — USE BRAND PURPLE
========================================= */

:root{
  --brand-purple: #00A99D;
}


/* section titles */
.mm-toggle{

  color: var(--brand-purple);

  background: transparent;

}


/* links inside dropdown */
.mm-panel a{

  color: var(--brand-purple);

}


/* CTA button */
.mm-cta{

  background: var(--brand-purple);

  color: #fff;

}


/* caret icon */
.mm-caret{

  color: var(--brand-purple);

}


/* remove iPhone blue tap highlight */
.mm-toggle,
.mm-panel a{

  -webkit-tap-highlight-color: transparent;

}


/* hover / tap state */
.mm-toggle:active,
.mm-panel a:active{

  background: rgba(76,52,148,0.08);

}


/* optional: section divider line in purple tint */
.mm-group{

  border-bottom: 1px solid rgba(76,52,148,0.15);

}


/* MOBILE PROMO BAR — USING YOUR REAL PROMO BLUE */


.hero-promo{
  display:none;
}

@media (max-width:768px){

.hero-promo{

  position: sticky;

  top: var(--nav-h);

  width:100%;

  height:44px;

  background: var(--promo-blue);

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  font-family:"Unica One", system-ui;

  font-size:15px;

  letter-spacing:.5px;

  z-index:999;

}

/* MOBILE FIX ONLY — keeps desktop intact */
@media(max-width:900px){

  .biz-card{

    flex:none;

    width:100%;

    height:320px;

    background-image: var(--bg);

    background-size:cover;

    background-position:center;

  }

}

/* MOBILE FOOTER FIX — restore vertical stacking */
@media (max-width: 900px){

  .footer-grid{

    flex-direction: column;   /* stack columns vertically */

  }

  .footer-col,
  .footer-brand,
  .footer-address,
  .footer-locations{

    width: 100%;

    min-width: 100%;          /* prevents text compression */

  }

 }

}

/* ===============================
   DESIGN TOOLS — CLEAN FINAL
================================ */

.design-tools{
  padding: 70px 0;
  background: #ffffff;
}

/* GRID LAYOUT */
.design-tools .design-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

/* COLUMN */
.design-tools .design-column{
  max-width: 360px;
  margin: 0 auto;
}

/* IMAGE — HIGH SPECIFICITY TO WIN CASCADE */
.design-tools .design-column > a > img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* BUTTON */
.design-tools .design-button{
  display: block;
  margin-top: 14px;

  background: var(--purple);
  color: #ffffff;

  text-align: center;
  padding: 14px;

  text-decoration: none;

  font-family: "Unica One", system-ui;
  text-transform: uppercase;
  letter-spacing: 1px;

  border-radius: 8px;
  transition: background 0.2s ease;
}

.design-tools .design-button:hover{
  background: #37246e;
}

/* MOBILE */
@media (max-width: 900px){
  .design-tools .design-grid{
    grid-template-columns: 1fr;
  }

  .design-tools .design-column{
    max-width: 100%;
  }

  .design-tools .design-column > a > img{
    height: 240px;
  }
}

@media (min-width: 769px){
  .top-hero .hero-content{
    margin-top: 44px;
  }
}

.location-map{
  background:#f6f7f4;
  padding:110px 0 0 0;  /* was 70px */
}


/* ===============================
LOCATIONS
================================ */

.locations{
padding:80px 0;
background:#fff;
}


/* TOP TWO */

.locations-main{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin-top:40px;
margin-bottom:28px;
}

.location-large{
height:320px;
}


/* GRID BELOW */

.locations-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}


/* CARD */

.location-card{
position:relative;
overflow:hidden;
border-radius:10px;
height:240px;
display:block;
}

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


/* OVERLAY */

.location-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
text-align:center;
background:linear-gradient(
to top,
rgba(0,0,0,.6),
rgba(0,0,0,.25)
);
}

.location-overlay h3{
font-size:22px;
letter-spacing:.04em;
}

.location-pin{
font-size:26px;
margin-bottom:6px;
}


/* HOVER */

.location-card:hover img{
transform:scale(1.08);
}


/* MOBILE */

@media(max-width:900px){

.locations-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.locations-main{
grid-template-columns:1fr;
}

.locations-grid{
grid-template-columns:1fr;
}

.location-large{
height:260px;
}

}


.project-types{
  background:#ffffff;
}


/* FAQ */

.faq-section{
padding:80px 0;
background:#f7f7f7;
}

.faq-grid{
margin-top:40px;
display:flex;
flex-direction:column;
gap:14px;
}

.faq-item{
background:#fff;
border:1px solid #e5e5e5;
border-radius:6px;
padding:18px 22px;
cursor:pointer;
}

.faq-item summary{
font-weight:600;
font-size:17px;
list-style:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}

.faq-item summary::after{
content:"+";
font-size:22px;
color:#00A99D;
}

.faq-item[open] summary::after{
content:"–";
}

.faq-item p{
margin-top:12px;
color:#444;
line-height:1.6;
}


/* fix overflow only for the what-to-expect section */

.what-expect .difference-grid{
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  width:100%;
}

.what-expect .difference-image img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}


.what-expect .difference-body{
  font-size:15px;
  line-height:1.6;
}

.what-expect .difference-image{
  display:flex;
  align-items:center;
}


/* NAV HOVER COLOR */

.nav-dropbtn:hover{
  color: var(--purple);
}

/* also change caret arrow */
.nav-dropbtn:hover .nav-caret{
  color: var(--purple);
}

/* NAV LINK HOVER COLOR */

.nav-dropbtn:hover,
.nav-dropdown a.nav-dropbtn:hover{
  color: var(--purple);
}

/* caret arrow */
.nav-dropbtn:hover .nav-caret{
  color: var(--purple);
}

/* smooth transition */
.nav-dropbtn{
  transition: color .25s ease;
}


/* HIGHLIGHTS & AWARDS */

.awards-section{
  padding:80px 0;
}

.awards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
  margin-top:40px;
}

.award-card{
  text-align:center;
}

.award-card img{
  max-width:160px;
  height:auto;
  margin-bottom:18px;
  transition:transform .25s ease;
}

.award-card img:hover{
  transform:scale(1.06);
}

.award-card h3{
  font-size:20px;
  margin-bottom:12px;
}

.award-card p{
  font-size:15px;
  line-height:1.6;
  color:#555;
}

/* MOBILE */

@media (max-width:900px){

  .awards-grid{
    grid-template-columns:1fr;
    gap:36px;
  }

}

/* SINGLE AWARD */

.awards-single{
  display:flex;
  justify-content:center;
  margin-top:40px;
}

.award-wide{
  max-width:600px;
}


/* ===============================
WHAT TO EXPECT — MOBILE ORDER FIX
image below text
================================ */

@media (max-width:768px){

  .difference-grid{
    display:flex;
    flex-direction:column;
  }

  .difference-text{
    order:1;
  }

  .difference-image{
    order:2;
    margin-top:24px;
  }

  .difference-image img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
  }

}


.award-more{
  display:inline-block;
  margin-top:12px;
  font-weight:600;
  color:var(--brand-purple);
  text-decoration:none;
}

.award-more:hover{
  text-decoration:underline;
}

.hero-content{
  width: min(1200px, 92%);
  margin: 0 auto;
}

.hero-split{
  justify-content: center;
}


.trust-inner{
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;
  gap: 150px;                /* space between items */
  text-align: center;
}

.trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.trust-item img{
  height: 60px;     /* controls size */
  width: auto;
  object-fit: contain;
  display: block;
}


.trust-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
}

.trust-item{
  width:140px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trust-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* BBB logo only */
.trust-item.bbb img{
  width:110px;
  height:auto;
  max-width:none;
  max-height:none;
}