/* Gashi Construct Website Final Cleanup Patch
   Purpose: clean URL support companion, mobile/tablet polish, overflow control,
   global font lock, and safer responsive behavior without touching portfolio/gallery content.
*/

:root {
  --gashi-red: #F80906;
  --gashi-black: #111111;
  --gashi-white: #FFFFFF;
  --gashi-grey: #B8B8B8;
}

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

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  font-family: 'Gosha Sans', 'GoshaSans', Arial, Helvetica, sans-serif;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: initial;
  height: initial;
  display: initial;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

a,
button,
input,
select,
textarea {
  font-family: inherit;
}

.site-header,
.section,
.hero,
.about-hero,
.portfolio-soon,
.legal-page,
footer,
.site-footer {
  max-width: 100vw;
}

.site-header {
  left: 0;
  right: 0;
  width: 100%;
}

.brand,
.nav,
.hero,
.hero-inner,
.section,
.estimate-section,
.detail-section,
.portfolio-preview-section,
.legal-wrap {
  min-width: 0;
}

.hero h1,
.about-hero h1,
.portfolio-soon h1,
.legal-wrap h1,
.section-head h2,
.detail-copy h2,
.estimate-copy h2,
.portfolio-preview-copy h2 {
  overflow-wrap: normal;
  text-wrap: balance;
}

.hero-copy,
.about-lead,
.portfolio-lead,
.detail-copy p,
.estimate-copy p,
.legal-wrap p,
.legal-wrap li {
  overflow-wrap: anywhere;
}

/* Desktop/tablet safety: prevent wide cards/forms from creating horizontal overflow. */
.hero-card,
.estimate-form,
.estimate-copy,
.detail-copy,
.detail-image,
.portfolio-preview-copy,
.portfolio-preview-card,
.service-card,
.process-grid article,
.intro-strip,
.legal-wrap {
  max-width: 100%;
}

/* Tablet / iPad: drawer starts earlier, but with one stable final rule set. */
@media (max-width: 1100px) {
  .site-header {
    position: fixed;
    min-height: 76px;
    padding: 14px clamp(18px, 3vw, 28px) !important;
    gap: 14px;
  }

  .header-call {
    display: none !important;
  }

  .brand {
    max-width: calc(100% - 62px);
  }

  .brand span {
    min-width: 0;
  }

  .brand strong {
    font-size: clamp(17px, 2.4vw, 22px) !important;
    letter-spacing: clamp(.14em, 2vw, .24em) !important;
    white-space: nowrap;
  }

  .brand em {
    font-size: clamp(9px, 1.25vw, 11px) !important;
    letter-spacing: clamp(.24em, 2.8vw, .34em) !important;
    white-space: nowrap;
  }

  .mobile-menu-toggle {
    flex: 0 0 auto;
  }

  .site-header .nav {
    width: min(360px, 86vw) !important;
    max-width: 86vw !important;
    padding: 88px 22px 24px !important;
    overflow-x: hidden !important;
  }

  .site-header .nav a {
    white-space: normal !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.mobile-menu-open .site-header {
    z-index: 5000 !important;
  }

  .hero,
  .about-hero,
  .portfolio-soon,
  .legal-page {
    padding-top: 112px !important;
  }
}

/* Phones: stronger scale lock, clean spacing, no squeezed buttons. */
@media (max-width: 760px) {
  .section {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
  }

  .hero,
  .about-hero,
  .portfolio-soon,
  .legal-page {
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: .02em !important;
  }

  .about-hero h1,
  .portfolio-soon h1,
  .legal-wrap h1 {
    font-size: clamp(40px, 12vw, 62px) !important;
    line-height: .94 !important;
    letter-spacing: .02em !important;
  }

  .hero-card,
  .estimate-form,
  .legal-wrap,
  .portfolio-note-grid article {
    padding-left: clamp(20px, 5vw, 26px) !important;
    padding-right: clamp(20px, 5vw, 26px) !important;
  }

  .btn,
  .nav-mobile-cta,
  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .btn,
  .nav-mobile-cta {
    white-space: normal;
    text-align: center;
  }

  .estimate-form input,
  .estimate-form select,
  .estimate-form textarea,
  .estimate-form button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .site-header {
    min-height: 72px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .brand {
    gap: 10px !important;
    max-width: calc(100% - 56px);
  }

  .brand img {
    width: 32px !important;
    height: 42px !important;
  }

  .brand strong {
    font-size: clamp(14px, 4.2vw, 16px) !important;
    letter-spacing: .15em !important;
  }

  .brand em {
    font-size: 8.5px !important;
    letter-spacing: .22em !important;
  }

  .mobile-menu-toggle {
    width: 42px !important;
    height: 40px !important;
  }

  .site-header .nav {
    width: min(310px, 84vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero h1,
  .about-hero h1,
  .portfolio-soon h1,
  .legal-wrap h1 {
    font-size: clamp(38px, 11.5vw, 52px) !important;
  }
}

/* Keep the portfolio/gallery content untouched; only protect its layout from overflow. */
.portfolio-soon,
.portfolio-note-grid,
.portfolio-preview-section,
.portfolio-preview-card {
  overflow-x: clip;
}


/* =========================================================
   May 18 final visual polish: homepage/services screenshots
   - tighter long headline readability
   - safer homepage service card sizing
   - balanced services grid
   - cleaner contact/form spacing
   - no portfolio/gallery content changes
   ========================================================= */

/* Long uppercase headings need less tracking than short logo-style labels. */
.section-head h2,
.detail-copy h2,
.estimate-copy h2,
.services-intro h2,
.services-band h2,
.service-detail-copy h2,
.services-cta h2 {
  letter-spacing: clamp(.012em, .55vw, .035em) !important;
  text-wrap: balance;
}

/* Homepage services: keep premium image-card look, but stop text from feeling trapped. */
.services-section .section-head {
  max-width: 900px;
}

.services-section .section-head h2 {
  max-width: 860px;
}

.service-grid {
  align-items: stretch;
}

.service-card {
  min-height: 470px !important;
  border-color: rgba(255,255,255,.10);
}

.service-card.large {
  min-height: 960px !important;
}

.service-card::after {
  background: linear-gradient(180deg, rgba(0,0,0,.05) 16%, rgba(7,7,7,.52) 55%, rgba(7,7,7,.94) 100%) !important;
}

.service-card div {
  left: clamp(22px, 3vw, 40px) !important;
  right: clamp(22px, 3vw, 40px) !important;
  bottom: clamp(24px, 3vw, 42px) !important;
  max-width: calc(100% - 44px);
}

.service-card p {
  margin: 0 0 12px !important;
  font-size: clamp(11px, .9vw, 13px) !important;
  letter-spacing: .18em !important;
}

.service-card h3 {
  margin: 0 !important;
  font-size: clamp(28px, 2.35vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: .025em !important;
  max-width: 760px;
}

.service-home-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 28px;
}

/* Services page: fix visual balance and make the service cards read like contractor scope cards. */
.services-hero h1 {
  letter-spacing: clamp(-.055em, -.6vw, -.028em) !important;
}

.services-lead {
  max-width: 680px;
}

.full-service-grid {
  align-items: stretch;
}

.full-service-card {
  min-height: 390px !important;
  padding: clamp(26px, 2.25vw, 34px) !important;
  display: flex;
  flex-direction: column;
}

.full-service-card p {
  margin: 0;
  line-height: 1.62 !important;
}

.full-service-card ul {
  margin-top: 24px !important;
  gap: 12px !important;
}

.full-service-card li {
  line-height: 1.52 !important;
}

.full-service-card h3 {
  letter-spacing: -.026em !important;
  line-height: 1.04 !important;
}

@media (min-width: 1121px) {
  .full-service-card:nth-of-type(7),
  .full-service-card:last-child {
    grid-column: span 2;
  }
}

.services-band-grid article {
  min-height: 168px;
}

.services-cta {
  align-items: center;
}

/* Contact / estimate area: cleaner field rhythm after homepage screenshot review. */
.estimate-form {
  padding: clamp(26px, 3vw, 42px) !important;
}

.form-row {
  gap: clamp(14px, 1.8vw, 20px) !important;
}

label {
  margin-bottom: 18px !important;
}

input,
select,
textarea {
  min-height: 48px;
}

textarea {
  min-height: 132px;
}

@media (max-width: 980px) {
  .service-card,
  .service-card.large {
    min-height: 500px !important;
  }
}

@media (max-width: 760px) {
  .section-head h2,
  .detail-copy h2,
  .estimate-copy h2,
  .services-intro h2,
  .services-band h2,
  .service-detail-copy h2,
  .services-cta h2 {
    letter-spacing: .018em !important;
    line-height: .98 !important;
  }

  .service-card,
  .service-card.large {
    min-height: 430px !important;
  }

  .service-card h3 {
    font-size: clamp(25px, 7.6vw, 34px) !important;
  }

  .service-home-actions,
  .service-home-actions .btn {
    width: 100%;
  }

  .service-home-actions .btn {
    justify-content: center;
  }

  .full-service-card,
  .full-service-card:nth-of-type(7),
  .full-service-card:last-child {
    grid-column: auto !important;
    min-height: auto !important;
  }

  .services-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   May 18 final-final service page alignment
   - Services page typography now matches the homepage rhythm
   - Prevents over-tight hero lettering that made CLEAR look clipped
   - Keeps About/Homepage untouched
   ========================================================= */
.services-page,
.services-page * {
  font-family: "Gosha Sans", Arial, sans-serif !important;
}

.services-page h1,
.services-page h2,
.services-page h3,
.services-page .eyebrow,
.services-page .btn {
  font-weight: 700;
}

.services-hero h1 {
  font-size: clamp(48px, 5.5vw, 86px) !important;
  line-height: .92 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
  max-width: 920px;
}

.services-hero h1 span {
  color: var(--gashi-red);
}

.services-page .section-head h2,
.services-band h2,
.service-detail-copy h2,
.services-cta h2 {
  letter-spacing: .035em !important;
  line-height: .96 !important;
}

.services-page h3,
.full-service-card h3,
.services-band-grid h3 {
  letter-spacing: .025em !important;
}

.services-page p,
.services-page li,
.services-lead,
.full-service-card p,
.full-service-card li,
.services-band-grid p,
.service-detail-copy p,
.services-cta p {
  font-weight: 400;
  letter-spacing: .02em !important;
}

.service-pill-strip span {
  font-family: "Gosha Sans", Arial, sans-serif !important;
  letter-spacing: .02em !important;
}

@media (max-width: 760px) {
  .services-hero h1 {
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .9 !important;
    letter-spacing: .03em !important;
  }
}


/* =========================================================
   Google Business Profile integration
   - Adds clean local-trust links without bulky embeds
   - Keeps homepage/about styling intact
   ========================================================= */
.google-profile-strip {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid rgba(248, 9, 6, 0.36);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.78);
  font-family: "Gosha Sans", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.google-profile-strip a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

.google-profile-strip a:hover {
  color: var(--gashi-red);
}

.site-footer a[href*="share.google"] {
  color: rgba(255, 255, 255, 0.86);
}

.site-footer a[href*="share.google"]:hover {
  color: var(--gashi-red);
}

.services-cta-actions .google-btn {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .google-profile-strip {
    width: 100%;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
}