/* FILE: residential_services_hub.css
   Residential hub styling (matches commercial level polish)
*/

:root{
  --hub-bg: #071416;

  /* solid panels (no glass) */
  --hub-panel: #0b1d21;
  --hub-panel-2: #0a191d;
  --hub-panel-3: #0c2126;

  --hub-border: rgba(255,255,255,0.10);

  --hub-text: rgba(255,255,255,0.92);
  --hub-muted: rgba(255,255,255,0.72);

  --hub-teal: #128C99;
  --hub-teal-deep: #0B5F68;
  --hub-tan: #d7c4a2;

  --hub-shadow: 0 18px 50px rgba(0,0,0,0.45);
  --hub-shadow-soft: 0 12px 30px rgba(0,0,0,0.28);

  --hub-radius: 18px;
  --hub-max: 1400px;

  --hub-header-h: 76px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

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

.hub{
  color: var(--hub-text);
  background:
    radial-gradient(1400px 900px at 18% -10%, rgba(18,140,153,0.18), transparent 62%),
    radial-gradient(1200px 800px at 85% 0%, rgba(215,196,162,0.10), transparent 66%),
    linear-gradient(180deg, #061214 0%, #071416 45%, #061214 100%);
  background-attachment: fixed;
}

.hub-wrap{
  width: min(var(--hub-max), calc(100% - 2.5rem));
  margin-inline:auto;
}

.muted{ color: var(--hub-muted); }

.lead{
  color: rgba(255,255,255,0.84);
  font-size: clamp(1.1rem, 1.25vw, 1.22rem);
  line-height: 1.75;
}

.hub-section{ padding: clamp(2.6rem, 4vw, 4.1rem) 0; }

.hub-section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* HERO */
.hub-hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display:grid;
  align-items:center;
  overflow:hidden;

  padding-top: var(--hub-header-h);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hub-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hub-hero__slides{ position:absolute; inset:0; }

.hub-hero__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform: scale(1.04);
  animation: hubFade 24s infinite;
  filter: saturate(1.08) contrast(1.08) brightness(0.90);
}
.hub-hero__slide.s1{ animation-delay:0s; }
.hub-hero__slide.s2{ animation-delay:6s; }
.hub-hero__slide.s3{ animation-delay:12s; }
.hub-hero__slide.s4{ animation-delay:18s; }

@keyframes hubFade{
  0%{ opacity:0; }
  6%{ opacity:1; }
  24%{ opacity:1; }
  32%{ opacity:0; }
  100%{ opacity:0; }
}

.hub-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter: saturate(1.08) contrast(1.10) brightness(0.88);
}

.hub-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.32) 52%, rgba(0,0,0,0.48) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.24) 45%, rgba(0,0,0,0.58) 100%),
    radial-gradient(900px 600px at 16% 22%, rgba(18,140,153,0.12), transparent 64%);
}

.hub-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.36) 100%);
}

.hub-hero__content{
  position:relative;
  z-index:2;
  padding: clamp(2.2rem, 5.2vw, 4.4rem) 0;
}

.hub-hero__eyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem;
  margin-bottom:1rem;
  color: rgba(255,255,255,0.86);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:.42rem .75rem;
  border-radius:999px;
  background: linear-gradient(180deg, #102a30, #0b1f23);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(18,140,153,0.18) inset;
  font-weight: 800;
  letter-spacing: .2px;
}
.pill--res{ box-shadow: 0 0 0 1px rgba(18,140,153,0.22) inset; }

.dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,0.7);
}

.hub-hero__title{
  font-size: clamp(2.9rem, 5.8vw, 4.6rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -1.6px;
  font-weight: 800;
  text-shadow: 0 10px 35px rgba(0,0,0,0.55);
}

.hub-hero__lead{
  max-width: 600px;
  margin: 0.85rem 0 0 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
}

/* Blueprint grid overlay */
.hub-hero__grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 15%, transparent 72%);
}

/* Left accent stripe */
.hub-hero__stripe{
  position:absolute;
  left: -1.8rem;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent 8%, var(--hub-teal) 28%, var(--hub-teal) 72%, transparent 92%);
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(18,140,153,0.30);
}

/* Title accent — "General Contractor" in teal */
.hub-hero__title-accent{
  display: block;
  color: var(--hub-teal);
}

/* Region tagline — small uppercase tracked */
.hub-hero__region{
  display: block;
  font-size: clamp(0.76rem, 0.95vw, 0.88rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--hub-tan);
  margin-top: 0.65rem;
}

/* Trust bar — horizontal metrics strip */
.hub-hero__trust-bar{
  display: flex;
  gap: 0;
  margin-top: 1.8rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 740px;
}

.hub-hero__trust-item{
  flex: 1;
  padding: 0 1.1rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.hub-hero__trust-item:first-child{
  border-left: none;
  padding-left: 0;
}

.hub-hero__trust-item strong{
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hub-hero__trust-item span{
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.48);
  margin-top: 0.12rem;
}

.hub-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin: 1.3rem 0 0;
}

.hub-hero .hub-btn{
  padding: 1.05rem 1.75rem;
  font-size: 1.02rem;
}

.hub-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .95rem 1.25rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.hub-btn--primary{
  background: linear-gradient(180deg, rgba(18,140,153,0.98), rgba(11,95,104,0.98));
  border-color: rgba(18,140,153,0.40);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  color:#fff;
}
.hub-btn--primary:hover{ transform: translateY(-1px); }

.hub-btn--ghost{
  background: linear-gradient(180deg, #102a30, #0b1f23);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.14);
}
.hub-btn--ghost:hover{ transform: translateY(-1px); }

/* Highlights */
.hub-hero__highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin-top: 1.4rem;
}

.highlight{
  background: linear-gradient(180deg, var(--hub-panel-3), var(--hub-panel));
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 1.05rem 1.1rem;
  box-shadow: var(--hub-shadow-soft);
}
.highlight strong{ display:block; font-size: 1.12rem; }
.highlight span{ display:block; margin-top:.25rem; color: rgba(255,255,255,0.72); }

/* Scroll down */
.hub-hero .scrolldown{
  --color: rgba(255,255,255,0.92);
  --accent: rgba(18,140,153,0.95);
  --accent2: rgba(215,196,162,0.85);
  --sizeX: 30px;
  --sizeY: 50px;

  position:absolute;
  right: 1.25rem;
  bottom: 1.15rem;
  z-index:3;

  width: var(--sizeX);
  height: var(--sizeY);
  border: calc(var(--sizeX)/10) solid var(--color);
  border-radius:999px;
  background: linear-gradient(180deg, #102a30, #0b1f23);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.hub-hero .scrolldown:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.98); }

.hub-hero .scrolldown::before{
  content:"";
  position:absolute;
  bottom: 30px;
  left: 50%;
  width:6px;
  height:6px;
  margin-left:-3px;
  background: var(--accent);
  border-radius:999px;
  animation: scrolldown-anim 2s infinite;
  box-shadow: 0 -6px 10px rgba(18,140,153,0.35);
}
@keyframes scrolldown-anim{
  0%{ opacity:0; height:6px; }
  40%{ opacity:1; height:10px; }
  80%{ transform: translateY(20px); height:10px; opacity:0; }
  100%{ height:3px; opacity:0; }
}

.hub-hero .chevrons{
  padding:6px 0 0 0;
  margin-left:-3px;
  margin-top:48px;
  width:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hub-hero .chevrondown{
  margin-top:-6px;
  border: solid var(--accent2);
  border-width: 0 3px 3px 0;
  width:10px;
  height:10px;
  transform: rotate(45deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.hub-hero .chevrondown:nth-child(odd){ animation: pulse 500ms ease infinite alternate; }
.hub-hero .chevrondown:nth-child(even){ animation: pulse 500ms ease infinite alternate 250ms; }
@keyframes pulse{ from{opacity:.12;} to{opacity:.55;} }

html{ scroll-behavior:smooth; }

/* Split */
.hub-split{
  display:grid;
  grid-template-columns: 2.2fr 0.8fr;
  gap: clamp(1.25rem, 2.6vw, 2.35rem);
  align-items:start;
}

/* Feature grid */
.hub-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.6rem;
}

.hub-feature{
  background: linear-gradient(180deg, var(--hub-panel-3), var(--hub-panel));
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 1.45rem 1.6rem;
  box-shadow: var(--hub-shadow-soft);
}
.hub-feature h3{
  margin:0 0 .65rem 0;
  font-size: 1.36rem;
  letter-spacing:-0.2px;
}
.hub-feature p{
  margin:0;
  color: rgba(255,255,255,0.80);
  line-height: 1.75;
  font-size: 1.08rem;
}

/* Head */
.hub-head{ display:grid; gap:.35rem; margin-bottom: 1rem; }
.hub-head h2{ margin:0; font-size: clamp(1.7rem, 2.4vw, 2.2rem); }

/* SEO block */
.hub-seo{
  margin-top: 1.75rem;
  padding: 1.2rem 1.2rem;
  border-radius: var(--hub-radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, var(--hub-panel-3), var(--hub-panel));
  box-shadow: var(--hub-shadow-soft);
}
.hub-seo h2{ margin:0 0 .6rem 0; font-size: 1.42rem; }
.hub-seo p{ font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.78); }

/* Links bar */
.hub-links{ padding: 1.25rem 0; }
.hub-links__bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.05rem;
  border-radius: var(--hub-radius);
  background: linear-gradient(180deg, var(--hub-panel-3), var(--hub-panel));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--hub-shadow-soft);
}
.hub-links__title{ margin:0; font-size: 1.05rem; letter-spacing:.2px; white-space:nowrap; }
.hub-links__nav{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:flex-end; }

.hub-link{
  text-decoration:none;
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  font-size: 1rem;
  padding: .6rem .85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #102a30, #0b1f23);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .18s ease;
}
.hub-link:hover{ transform: translateY(-1px); }

/* Sidebar card */
.hub-card{
  background: linear-gradient(180deg, var(--hub-panel-2), var(--hub-panel));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  overflow:hidden;
}
.hub-card--sticky{ position: sticky; top: calc(var(--hub-header-h) + 16px); }

.hub-card__top{
  padding: 1.1rem 1.1rem .85rem;
  background: linear-gradient(180deg, #102a30, #0b1f23);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.badge{
  display:inline-flex;
  padding:.35rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  background: rgba(215,196,162,0.12);
  border: 1px solid rgba(215,196,162,0.20);
  color: rgba(255,255,255,0.92);
}

.hub-checklist{
  list-style:none;
  padding: 1rem 1.1rem;
  margin:0;
  display:grid;
  gap:.6rem;
}
.hub-checklist li{ color: rgba(255,255,255,0.82); line-height: 1.6; font-size: 1.02rem; }

.hub-card__actions{
  padding: 1rem 1.1rem 1.15rem;
  display:grid;
  gap:.7rem;
}

.hub-mini-proof{
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* Gallery */
.expand-gallery{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, var(--hub-panel-2), var(--hub-panel));
  box-shadow: var(--hub-shadow);
}

.expand-gallery__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  width:100%;
  height: 420px;
}

.expand-gallery__item{
  position:relative;
  flex: 1 1 0;
  min-width: 70px;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: flex 420ms ease;
}
.expand-gallery__item:last-child{ border-right:none; }

.expand-gallery__item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter: saturate(1.06) contrast(1.06);
  transform: scale(1.02);
  transition: transform 420ms ease, filter 420ms ease;
}

.expand-gallery__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.25rem;
  padding: 1.1rem 1.1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.66) 100%);
}

.expand-gallery__title{
  font-weight: 900;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 10px 30px rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.expand-gallery__meta{
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.expand-gallery__item:hover,
.expand-gallery__item:focus-visible,
.expand-gallery__item.is-active{ flex: 5 1 0; }

.expand-gallery__item:hover img,
.expand-gallery__item:focus-visible img,
.expand-gallery__item.is-active img{
  transform: scale(1.06);
  filter: saturate(1.10) contrast(1.10);
}

/* CTA */
.hub-cta{ padding: clamp(2.2rem, 3.6vw, 3.4rem) 0; }

.hub-cta__inner{
  background: linear-gradient(180deg, var(--hub-panel-3), var(--hub-panel));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  padding: clamp(1.25rem, 2.4vw, 1.95rem);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
}

.hub-cta__copy h2{ margin:0 0 .35rem 0; font-size: 1.7rem; }
.hub-cta__copy p{ margin:0; color: rgba(255,255,255,0.78); line-height: 1.65; }
.hub-cta__actions{ display:flex; gap:.85rem; flex-wrap:wrap; }



/* Responsive */
@media (max-width: 980px){
  .hub-split{ grid-template-columns: 1fr; }
  .hub-card--sticky{ position: relative; top:auto; }

  .hub-hero__highlights{ grid-template-columns: 1fr; max-width: 560px; }
  .hub-feature-grid{ grid-template-columns: 1fr; }

  .hub-hero__trust-bar{
    flex-wrap: wrap;
    gap: 0.75rem 0;
  }
  .hub-hero__trust-item{
    flex: 1 1 45%;
    border-left: none;
    padding: 0;
  }
  .hub-hero__title{ letter-spacing: -1px; }
}

@media (max-width: 720px){
  .hub-wrap{ width: min(var(--hub-max), calc(100% - 1.75rem)); }
  .hub-links__bar{ flex-direction: column; align-items:flex-start; }
  .hub-links__nav{ justify-content:flex-start; }
}

@media (max-width: 640px){
  .hub-cta__inner{ flex-direction: column; align-items:flex-start; }
  .expand-gallery__list{ height: 320px; }
  .hub-hero__content{ padding: clamp(1.8rem, 6vw, 3.2rem) 0; }

  .hub-hero__trust-bar{
    flex-direction: column;
    gap: 0.6rem;
    border-top: none;
    padding-top: 0;
    margin-top: 1.2rem;
  }
  .hub-hero__trust-item{
    padding: 0.55rem 0;
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .hub-hero__trust-item:last-child{ border-bottom: none; }

  .hub-hero__stripe{ display: none; }
  .hub-hero__grid{ opacity: 0.5; }
  .hub-hero__region{ letter-spacing: 3px; }
}

@media (max-width: 640px){
  .expand-gallery{
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
  }

  .expand-gallery__list{
    height: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: .9rem;
    overflow-x: auto;
    padding: 0 .1rem .5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .expand-gallery__item{
    min-width: 0;
    height: 260px;
    flex: unset;
    border-right: none;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    scroll-snap-align: start;
  }

  .expand-gallery__item:hover,
  .expand-gallery__item:focus-visible,
  .expand-gallery__item.is-active{
    flex: unset;
  }

  .expand-gallery__title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .expand-gallery__meta{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: .92rem;
    line-height: 1.35;
  }

  .expand-gallery__list::-webkit-scrollbar{
    height: 8px;
  }

  .expand-gallery__list::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
  }
}