/*
 * components.css — Component Styles
 * Styles for all _components/ JS modules and page-level sections.
 * Edit here for style fixes — never rebuild the component JS files.
 */

/* ════════════════════════════════════════════════════════════════
   SITE HEADER — fixed at top (top bar + desktop nav)
   ════════════════════════════════════════════════════════════════ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
}
@media (max-width: 1024px) { #site-header { position: static; } }

/* ════════════════════════════════════════════════════════════════
   TOP BAR — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.top-bar__item {
  display: flex;
  align-items: center;
}
.top-bar__item a { color: inherit; }
@media (max-width: 768px) { .top-bar { display: none; } }


/* ════════════════════════════════════════════════════════════════
   DESKTOP NAV — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* HARD RULE: logo min-width 100px */
.nav__logo img { width: auto; min-width: 100px; }

.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
}
.nav__links > li > a {
  display: block;
  white-space: nowrap;
}

/* The header phone CTA is the one .btn rendered inline beside plain-text nav links.
   Two structural-only safeguards so it lines up and the design pass can style it cleanly:
   1. display:inline-flex — RESTORE it. The generic `.nav__links > li > a { display:block }`
      above is more specific than `.btn`, so without this it flattens the button to a block
      and `.btn`'s align/justify centering stops working (text won't line up; hover effects
      behave oddly on a block box).
   2. line-height:normal — let the digits sit on the same optical line as the text nav links.
   Add NOTHING else here. Colors, padding, background, radius, and hover effects are the
   design pass's job on `.btn` / `.btn--phone`. Do NOT remove — alignment fix, not decoration. */
.nav__phone-item .btn--phone,
.nav__quote-item .btn {
  display: inline-flex;
  line-height: normal;
}

/* Desktop dropdowns — functional behavior
   HARD RULE: top:100% flush, never calc(100%+Npx). Use padding-top inside for visual gap. */
.main-nav .has-dropdown { position: relative; }
.main-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-dropdown);
  list-style: none;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}
.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown:focus-within .dropdown,
.main-nav .has-dropdown.kb-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.main-nav .dropdown li a { display: block; }

/* Chevron rotation */
.dropdown-arrow {
  display: inline-block;
  vertical-align: middle;
  transition: transform var(--transition-base);
}
.main-nav .has-dropdown:hover .dropdown-arrow,
.main-nav .has-dropdown:focus-within .dropdown-arrow,
.main-nav .has-dropdown.kb-open .dropdown-arrow { transform: rotate(180deg); }

/* Hamburger — functional structure
   HARD RULE: min 48x48px, must have visible background + border (circle button) */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hide desktop nav on mobile */
@media (max-width: 1024px) {
  .main-nav { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */

/* Push page content below the fixed header — adjust values in design pass */
body { padding-top: 100px; }
body.has-hero { padding-top: 0; }
@media (max-width: 1024px) {
  body { padding-top: 64px; }
  body.has-hero { padding-top: 0; }
}

.mobile-nav { display: none; }
@media (max-width: 1024px) { .mobile-nav { display: block; } }

/* ── Fixed top bar ── */
.mobile-nav__bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-header);
}
/* HARD RULE: logo min-width 100px */
.mobile-nav__logo img { width: auto; min-width: 100px; }

.mobile-nav__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Phone button — HARD RULE: must show icon + phone number, bright/visible color */
.mobile-nav__phone-btn {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.mobile-nav__phone-btn svg { flex-shrink: 0; }

/* ── Overlay ── */
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mobile-nav__overlay.is-visible { opacity: 1; visibility: visible; }

/* ── Drawer ── */
.mobile-nav__drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  z-index: calc(var(--z-header) + 2);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav__drawer.is-open { transform: translateX(0); }

.mobile-nav__drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mobile-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* HARD RULE: logo min-width 100px */
.mobile-nav__drawer-logo img { width: auto; min-width: 100px; }

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
}

/* Drawer links */
.mobile-nav__links { list-style: none; flex: 1; }
.mobile-nav__links > li > a,
.mobile-nav__links > li > .mobile-dropdown-row .mobile-dropdown-label {
  display: block;
}

/* Dropdown row — HARD RULE: toggle separate from link, min 48x48px, visible bg + border */
.mobile-dropdown-row { display: flex; align-items: center; }
.mobile-dropdown-label { flex: 1; }
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  cursor: pointer;
}
.mobile-dropdown-toggle svg { width: 18px; height: 18px; }
.mobile-dropdown-toggle .dropdown-arrow { margin-left: 0; transition: transform var(--transition-base); }
.mobile-has-dropdown.is-open .mobile-dropdown-toggle .dropdown-arrow { transform: rotate(180deg); }

/* Accordion sub-links */
.mobile-dropdown {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
  margin: 0;
}
.mobile-has-dropdown.is-open .mobile-dropdown { max-height: 600px; }
.mobile-dropdown li a { display: block; }

/* Drawer footer */
.mobile-nav__drawer-footer { display: flex; flex-direction: column; }

/* Prevent body scroll when drawer is open */
body.nav-open { overflow: hidden; }


/* ════════════════════════════════════════════════════════════════
   CHAT WIDGET — position bottom-right, clear of mobile nav bar
   ════════════════════════════════════════════════════════════════ */
.chat-widget {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: calc(var(--z-lightbox) - 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

/* ── Launcher button ── */
.chat-widget__launcher {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  background: #16a34a;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  align-self: flex-end;
}
.chat-widget__launcher:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-xl);
  background: #15803d;
}
.chat-widget__icon {
  position: absolute;
  width: 30px;
  height: 30px;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.chat-widget__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chat-widget.is-open .chat-widget__icon--chat { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chat-widget.is-open .chat-widget__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* ── Panel ── */
.chat-widget__panel {
  width: 360px;
  max-width: calc(100vw - var(--space-8));
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.chat-widget.is-open .chat-widget__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: var(--color-white);
}
.chat-widget__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: contain;
  background: var(--color-white);
  padding: 2px;
  flex-shrink: 0;
}
.chat-widget__title {
  flex: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
}
.chat-widget__minimize {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-widget__minimize svg { width: 22px; height: 22px; }

.chat-widget__body { padding: var(--space-5); }

.chat-widget__intro {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.chat-widget__intro-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: contain;
  flex-shrink: 0;
}
.chat-widget__bubble {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.5;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  margin: 0;
}

.chat-widget__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.chat-widget__form input,
.chat-widget__form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.chat-widget__form textarea { resize: none; min-height: 90px; }
.chat-widget__form input:focus,
.chat-widget__form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.chat-widget__consent {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin: 0;
}
.chat-widget__send {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #16a34a;
  margin-top: var(--space-1);
}
.chat-widget__send:hover { background: #15803d; }
.chat-widget__send svg { width: 20px; height: 20px; }

.chat-widget .mock-label { margin-top: var(--space-3); }

@media (max-width: 480px) {
  .chat-widget { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); align-items: flex-end; }
  .chat-widget__panel { width: 100%; max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════
   FOOTER — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
/* HARD RULE: footer logo min-width 120px */
.footer__col--brand img { width: auto; min-width: 120px; }
.footer__phone { display: block; }
.footer__email { display: block; }
.footer__links { list-style: none; }
.footer__links a { display: block; }
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer__bottom nav { display: flex; align-items: center; }

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
}


/* ════════════════════════════════════════════════════════════════
   HERO — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  width: 100%;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
}
/* Google Rating Badge — big G + stacked text */
.hero-google-badge {
  display: inline-flex;
  align-items: center;
}
.hero-google-badge svg { flex-shrink: 0; }
.hero-google-badge__text { display: flex; flex-direction: column; }
.hero-google-badge__stars { color: #FBBC05; }
.hero-google-badge a { color: inherit; text-decoration: none; }

/* HARD RULE: hero form fade-in prevents GHL iframe layout shift — do not remove */
.hero__form-wrap {
  opacity: 0;
  animation: formFadeIn 0.5s ease 0.4s forwards;
}
@keyframes formFadeIn { to { opacity: 1; } }

/* Small hero (inner pages) */
.hero--sm .hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
  /* Reset the inherited two-column grid gap. .hero__inner is a 2-col grid (the
     design pass adds a column gap for the homepage hero); collapsed to one column
     here, that gap becomes a stray ROW gap between breadcrumb / h1 / subtitle —
     the "huge gap under the heading" bug. Spacing comes from element margins. */
  gap: 0;
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__form-wrap { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════
   TRUST STRIP — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.trust-strip__item svg,
.trust-strip__item img { flex-shrink: 0; }
@media (max-width: 768px) {
  .trust-strip__divider { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   SERVICE CARDS — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.service-card {
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.service-card__img-wrap {
  position: relative;
  overflow: hidden;
}
.service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__body { flex: 1; display: flex; flex-direction: column; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
}

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   PROCESS STEPS — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.process__number {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr; }
  .process__step { display: flex; align-items: flex-start; }
  .process__number { flex-shrink: 0; }
}


/* ════════════════════════════════════════════════════════════════
   PHOTO GALLERY — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-item {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__hidden { display: none; }
.gallery__hidden.is-visible { display: contents; }

@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   FAQ ACCORDION — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.faq__question {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  cursor: pointer;
}
.faq__chevron { flex-shrink: 0; transition: transform var(--transition-base); }
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__answer[hidden] { display: none; }


/* ════════════════════════════════════════════════════════════════
   LIGHTBOX — functional UI, keep intact
   ════════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.lightbox.is-open { pointer-events: auto; opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); }
.lightbox__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}
.lightbox__img-wrap { display: flex; align-items: center; justify-content: center; }
.lightbox__img {
  max-width: 82vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox__close { position: fixed; top: 1rem; right: 1.5rem; color: white; z-index: 1; }
.lightbox__prev,
.lightbox__next { color: white; flex-shrink: 0; }
.lightbox__icon { width: 28px; height: 28px; display: block; }
.lightbox__close .lightbox__icon { width: 24px; height: 24px; }
.lightbox__counter { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); }

@media (max-width: 768px) {
  .lightbox__img { max-width: 95vw; }
}


/* ════════════════════════════════════════════════════════════════
   FINAL CTA SECTION — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.cta-section__left { display: flex; flex-direction: column; }
.cta-section__phone { display: block; }
.cta-section__email { display: block; }
.cta-section__img-wrap { overflow: hidden; }
.cta-section__img-wrap img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .cta-section__inner { grid-template-columns: 1fr; }
  .cta-section__img-wrap { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   TEAM CARDS — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.team-card__img-wrap { overflow: hidden; }
.team-card__img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   ABOUT SECTION — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.about__img-wrap { overflow: hidden; }
.about__img-wrap img { width: 100%; height: 100%; object-fit: cover; }

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


/* ════════════════════════════════════════════════════════════════
   THANK YOU PAGE — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.thank-you-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.thank-you__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thank-you__phone { display: block; }


/* ════════════════════════════════════════════════════════════════
   404 PAGE — structure only, style in design pass
   ════════════════════════════════════════════════════════════════ */
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.error-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════
   ▒▒  DESIGN PASS — Ocean Roofing (decorative styling)  ▒▒
   ════════════════════════════════════════════════════════════════ */

/* ── Top bar ──────────────────────────────────────────────────── */
.top-bar { background: var(--color-top-bar-bg); color: var(--color-top-bar-text); font-size: var(--text-sm); }
.top-bar__inner { gap: var(--space-8); padding: 9px 0; justify-content: flex-end; }
.top-bar__item { gap: var(--space-2); }
.top-bar__item svg { opacity: 0.8; }
.top-bar__item a:hover { color: var(--color-white); }

/* ── Desktop nav ──────────────────────────────────────────────── */
.main-nav { background: var(--color-white); transition: box-shadow var(--transition-base), padding var(--transition-base); }
.main-nav__inner { padding: var(--space-4) 0; transition: padding var(--transition-base); }
.main-nav.is-sticky { box-shadow: 0 6px 24px rgba(16, 42, 50, 0.10); }
.main-nav.is-sticky .main-nav__inner { padding: var(--space-3) 0; }
.nav__logo img { height: 50px; object-fit: contain; transition: height var(--transition-base); }
.main-nav.is-sticky .nav__logo img { height: 44px; }

.nav__links { gap: var(--space-6); }
.nav__links > li > a:not(.btn) {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  color: var(--color-primary);
  padding: 6px 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__links > li > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-base);
}
.nav__links > li > a:not(.btn):hover::after,
.nav__links > li > a:not(.btn).is-active::after { width: 100%; }
.nav__links > li > a:not(.btn):hover { color: var(--color-secondary); }

/* Dropdowns */
.main-nav .dropdown {
  background: var(--color-white);
  min-width: 220px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  transform: translateY(8px);
  margin-top: 4px;
}
.main-nav .dropdown li a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}
.main-nav .dropdown li a:hover { background: var(--color-surface); color: var(--color-secondary); }
.nav__quote-item { margin-left: var(--space-2); }
.nav__phone-item { margin-left: var(--space-2); }

/* Hamburger */
.nav__hamburger { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.nav__hamburger span { background: var(--color-primary); }

/* ── Mobile nav ───────────────────────────────────────────────── */
.mobile-nav__bar { background: var(--color-white); box-shadow: 0 2px 12px rgba(16,42,50,0.08); padding: 0 var(--space-3); gap: var(--space-3); }
.mobile-nav__logo img { height: 34px; object-fit: contain; }
.mobile-nav__actions { gap: var(--space-2); }
.mobile-nav__phone-btn {
  gap: 5px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xs);
  padding: 7px 12px;
  border-radius: var(--radius-full);
}
.mobile-nav__phone-btn svg { width: 16px; height: 16px; }

.mobile-nav__overlay { background: rgba(9,26,31,0.5); backdrop-filter: blur(2px); }
.mobile-nav__drawer {
  background: var(--color-white);
  box-shadow: -12px 0 40px rgba(16,42,50,0.2);
  /* Closed drawer fully removed from layout so its off-canvas box can't extend
     page width (full-page capture / horizontal overflow) or trap focus when
     closed. It slides in via a keyframe when .is-open is added. */
  display: none;
}
.mobile-nav__drawer.is-open {
  display: block;
  animation: drawerSlideIn var(--transition-slow) ease;
}
@keyframes drawerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mobile-nav__drawer-inner { padding: var(--space-5); }
.mobile-nav__drawer-head { padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.mobile-nav__drawer-logo img { height: 40px; object-fit: contain; }
.mobile-nav__close { background: var(--color-surface); border-radius: var(--radius-full); color: var(--color-primary); }

.mobile-nav__links > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav__links > li > a,
.mobile-dropdown-label {
  padding: 15px 2px;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-primary);
}
.mobile-dropdown-toggle { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary); }
.mobile-dropdown li a { padding: 11px 14px; color: var(--color-text-secondary); font-size: var(--text-base); }
.mobile-dropdown li a:hover { color: var(--color-secondary); }
.mobile-dropdown { background: var(--color-surface); border-radius: var(--radius-md); }
.mobile-nav__drawer-footer { gap: 6px; padding-top: var(--space-5); margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.mobile-nav__drawer-phone { font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); font-size: var(--text-2xl); color: var(--color-secondary); }
.mobile-nav__drawer-email { color: var(--color-text-secondary); font-size: var(--text-base); }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); }
.footer__main { padding: var(--space-20) 0 var(--space-12); }
.footer__grid { gap: var(--space-10); }
.footer__col--brand img { height: 52px; object-fit: contain; margin-bottom: var(--space-4); }
.footer__tagline { font-size: var(--text-base); margin-bottom: var(--space-5); max-width: 280px; }
.footer__phone { font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); font-size: var(--text-2xl); color: var(--color-white); margin-bottom: var(--space-2); }
.footer__phone:hover { color: var(--color-secondary); }
.footer__email { margin-bottom: var(--space-3); }
.footer__email:hover { color: var(--color-white); }
.footer__heading { font-size: var(--text-lg); color: var(--color-white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-5); }
.footer__links a { padding: 7px 0; transition: color var(--transition-base), transform var(--transition-base); }
.footer__links a:hover { color: var(--color-secondary); transform: translateX(3px); }
.footer__bottom { background: rgba(0,0,0,0.25); }
.footer__bottom-inner { padding: var(--space-5) 0; font-size: var(--text-sm); gap: var(--space-4); }
.footer__bottom nav { gap: var(--space-3); }
.footer__bottom nav a:hover { color: var(--color-white); }


/* ── Hero ─────────────────────────────────────────────────────── */
.hero { min-height: 92vh; color: var(--color-white); }
.hero::before {
  background:
    linear-gradient(105deg, rgba(9,26,31,0.85) 0%, rgba(9,26,31,0.55) 45%, rgba(9,26,31,0.30) 100%),
    var(--color-overlay);
}
.hero__inner { gap: var(--space-16); padding-top: 200px; padding-bottom: var(--space-20); }
.hero__content { min-width: 0; }
.hero__badge {
  gap: 6px;
  background: rgba(76,175,80,0.18);
  border: 1px solid rgba(76,175,80,0.55);
  color: #BFE9C1;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-5);
  backdrop-filter: blur(4px);
}
.hero__badge svg { width: 13px; height: 13px; color: #6FD073; }
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.16rem, 5.04vw, 3.69rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero h1 .accent { color: #6FD073; }
.hero__subtitle { font-size: var(--text-lg); color: #DCE7E5; max-width: 540px; margin-bottom: var(--space-8); line-height: 1.55; }
.hero__cta { gap: var(--space-4); margin-bottom: var(--space-8); }
.hero__cta .btn--lg { font-size: var(--text-lg); min-height: 50px; padding: 14px 32px; }
.hero-google-badge {
  gap: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  transition: background var(--transition-base);
}
.hero-google-badge:hover { background: rgba(255,255,255,0.2); }
.hero-google-badge__score { font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); font-size: var(--text-2xl); line-height: 1; color: var(--color-white); }
.hero-google-badge__stars { font-size: var(--text-base); letter-spacing: 2px; margin: 2px 0; }
.hero-google-badge__label { font-size: var(--text-xs); color: #C9D6D4; letter-spacing: 0.5px; }

/* Hero quote card (mock form) */
.hero__form-wrap { width: 100%; }
.quote-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  color: var(--color-text);
}
.quote-card__eyebrow { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-sm); letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-secondary); }
.quote-card__title { font-size: var(--text-2xl); text-transform: none; margin: 4px 0 var(--space-2); }
.quote-card__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }

/* Mock form fields */
.mock-form { display: flex; flex-direction: column; gap: var(--space-3); }
.mock-form input, .mock-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-text);
}
.mock-form input:focus, .mock-form textarea:focus { outline: none; border-color: var(--color-secondary); background: var(--color-white); }
.mock-form .btn { width: 100%; margin-top: var(--space-1); }
.mock-label { font-size: var(--text-xs); color: var(--color-text-light); text-align: center; margin-top: var(--space-3); }

/* ── Trust strip ──────────────────────────────────────────────── */
.trust-strip { background: var(--color-primary); border-top: 3px solid var(--color-secondary); }
.trust-strip__inner { gap: var(--space-8); padding: var(--space-6) 0; }
.trust-strip__item { gap: 10px; color: #DCE7E5; font-family: var(--font-heading); font-weight: var(--font-weight-semibold); font-size: var(--text-base); }
.trust-strip__item svg { width: 24px; height: 24px; color: #6FD073; }
.trust-strip__divider { width: 1px; height: 28px; background: rgba(255,255,255,0.18); }

/* ── Services (photo cards) ───────────────────────────────────── */
.services-grid { gap: var(--space-6); }
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(16,42,50,0.14); border-color: transparent; }

/* Photo header */
.service-card__media { position: relative; aspect-ratio: 16 / 10; overflow: visible; }
.service-card__media picture { position: absolute; inset: 0; display: block; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.service-card:hover .service-card__media img { transform: scale(1.07); }
.service-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,26,31,0.45) 0%, transparent 55%);
}
/* Icon badge overlapping the photo bottom-left */
.service-card__icon {
  position: absolute;
  left: var(--space-6); bottom: -28px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgba(76,175,80,0.4);
  z-index: 2;
}
.service-card__icon svg { width: 30px; height: 30px; }

.service-card__body { padding: var(--space-10) var(--space-6) var(--space-6); display: flex; flex-direction: column; }
.service-card__body h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.service-card__body p { color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.service-card__link { gap: 6px; font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-secondary); margin-top: auto; }
.service-card__link svg { width: 18px; height: 18px; transition: transform var(--transition-base); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }

/* ── Quality band (parallax image) ────────────────────────────── */
.quality-band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--color-white);
  text-align: center;
}
.quality-band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(9,26,31,0.78), rgba(9,26,31,0.7)); }
.quality-band__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.quality-band .section__tag { color: #6FD073; }
.quality-band h2 { color: var(--color-white); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-5); }
.quality-band p { color: #D7E2E0; font-size: var(--text-xl); margin-bottom: var(--space-8); }
@media (max-width: 768px) { .quality-band { background-attachment: scroll; } }


/* ── Partners band ────────────────────────────────────────────── */
.partners { padding: var(--space-12) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.partners__label { text-align: center; font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-sm); letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-light); margin-bottom: var(--space-6); }
.partners__logos { display: flex; align-items: center; justify-content: center; }
.partners__logos img { max-width: min(880px, 100%); height: auto; opacity: 0.92; }

/* ── About / Why split ────────────────────────────────────────── */
.about-grid { gap: var(--space-16); }
.about__media { position: relative; }
.about__media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: block; }
.about__media-badge {
  position: absolute;
  bottom: -24px; right: -16px;
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 18px 40px rgba(76,175,80,0.4);
  text-align: center;
}
.about__media-badge strong { display: block; font-family: var(--font-heading); font-size: var(--text-4xl); line-height: 1; }
.about__media-badge span { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.about__content h2 { text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-5); }
.about__content p { color: var(--color-text-secondary); font-size: var(--text-lg); margin-bottom: var(--space-5); }
.about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin: var(--space-8) 0; }
.about__stat { border-left: 3px solid var(--color-secondary); padding-left: var(--space-4); }
.about__stat strong { display: block; font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); font-size: var(--text-3xl); color: var(--color-primary); line-height: 1; }
.about__stat span { font-size: var(--text-sm); color: var(--color-text-secondary); }
@media (max-width: 768px) { .about__media-badge { right: 16px; } }

/* ── Process steps ────────────────────────────────────────────── */
.process-steps { gap: var(--space-6); margin-top: var(--space-12); }
.process__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  text-align: left;
  padding: var(--space-8);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.process__step:hover {
  transform: translateY(-6px);
  background: rgba(76,175,80,0.10);
  border-color: rgba(76,175,80,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
/* Number badge — top-left, aligned with the heading */
.process__number {
  position: static;
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-secondary), #2f7d33);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-2xl);
  line-height: 1;
  box-shadow: 0 10px 24px rgba(76,175,80,0.4);
}
.process__content { flex: 1; min-width: 0; padding-top: 4px; }
.process__title { color: var(--color-white); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.process__desc { color: #B7C7C4; }

/* ── Gallery (recent work) ────────────────────────────────────── */
.gallery-grid { gap: var(--space-5); margin-top: var(--space-4); }
.gallery-item { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.gallery-item img { transition: transform var(--transition-slow); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(9,26,31,0); 
  transition: background var(--transition-base);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { background: rgba(9,26,31,0.35); }
.gallery-item__zoom {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.7);
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white); color: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0; z-index: 2;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.gallery-item:hover .gallery-item__zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ── Reviews cards ────────────────────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.review-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.review-card__stars { color: var(--color-accent); font-size: var(--text-lg); letter-spacing: 2px; margin-bottom: var(--space-4); }
.review-card__text { color: var(--color-text); font-size: var(--text-lg); line-height: 1.6; margin-bottom: var(--space-5); flex: 1; }
.review-card__author { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-secondary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--font-weight-bold); }
.review-card__name { font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.review-card__src { font-size: var(--text-xs); color: var(--color-text-light); }
@media (max-width: 1024px) { .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); background: var(--color-white); overflow: hidden; transition: box-shadow var(--transition-base); }
.faq__item:hover { box-shadow: var(--shadow-md); }
.faq__question { padding: var(--space-5) var(--space-6); font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-lg); color: var(--color-primary); gap: var(--space-4); }
.faq__chevron { color: var(--color-secondary); }
.faq__answer { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-secondary); font-size: var(--text-base); line-height: 1.7; }

/* ── Final CTA ────────────────────────────────────────────────── */
.cta-section { position: relative; overflow: hidden; }
.cta-section__inner { gap: var(--space-12); position: relative; z-index: 1; }
.cta-section__left h2 { color: var(--color-white); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-4); font-size: clamp(2rem, 4vw, 3rem); }
.cta-section__sub { color: #C9D6D4; font-size: var(--text-xl); margin-bottom: var(--space-8); }
.cta-section__contact { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.15); }
.cta-section__phone { font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); font-size: var(--text-4xl); color: #6FD073; line-height: 1; margin-bottom: var(--space-2); }
.cta-section__email { color: var(--color-white); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); }
.cta-section__email:hover { color: #6FD073; }
@media (max-width: 768px) { .cta-section__form { margin-top: var(--space-8); } }


/* ── Off-canvas drawer containment ────────────────────────────────
   The closed drawer sits off-screen to the right (translateX(100%)).
   As a position:fixed element it extends body's layout width (visible
   as a sliver / horizontal overflow in full-page capture). Making
   .mobile-nav a full-viewport fixed clipping layer and the drawer
   position:absolute inside it lets overflow:hidden clip the closed
   drawer, with pointer-events passing through the empty layer. */
@media (max-width: 1024px) {
  .mobile-nav {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-header);
  }
  .mobile-nav__bar { pointer-events: auto; }
  .mobile-nav__overlay { pointer-events: auto; }
  .mobile-nav__drawer { position: absolute; pointer-events: auto; }
}

/* Hero CTA buttons: allow shrink to column width so a nowrap label (esp. with
   the fallback font before Montserrat loads) can't force a min-content blowout. */
@media (max-width: 768px) {
  .hero__cta .btn { width: 100%; min-width: 0; }
}