/*
  Reusable UI components. New component styles get appended here
  (buttons/nav/footer/cta-band now; cards, forms, accordion etc.
  are added as those page sections get built).
*/

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-ink-soft);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--on-dark {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--on-dark:hover {
  background: var(--color-off-white);
}

/* ---------- Site header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: var(--ls-wordmark);
  color: var(--color-ink);
}

.wordmark__tagline {
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.main-nav {
  display: none;
}

@media (min-width: 960px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .main-nav a {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-text);
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: var(--color-ink);
    border-color: var(--color-ink);
  }
}

.site-header__cta {
  display: none;
}

@media (min-width: 960px) {
  .site-header__cta {
    display: inline-flex;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

@media (min-width: 960px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* The panel is also a .container, so it keeps the container's side gutter
   (24px on phones, 40px on tablets, aligned with the logo/hamburger). Only the
   vertical padding is set here: the old `padding: ... 0 ...` shorthand reset
   the gutter to 0 and pushed the links against the screen edge. */
.mobile-nav {
  display: none;
  flex-direction: column;
  padding-block: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  /* The header is sticky, so if the open menu is taller than the screen
     (short landscape phones) it must scroll inside itself. 73px = header bar. */
  max-height: calc(100vh - 73px);
  max-height: calc(100dvh - 73px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  padding: var(--space-3) 0;
  font-size: var(--fs-lead);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav__cta {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* ".mobile-nav a" (nav-link look: dark text, 18px, no side padding) out-ranks
   .btn / .btn--primary, which left the CTA's text dark-on-dark and unpadded.
   This restores the standard button (white on ink, 14px, 14px 24px), the same
   as the desktop header "Get a Quote". a.mobile-nav__cta matches the
   specificity of ".mobile-nav a:last-child" and comes after it. */
.mobile-nav a.mobile-nav__cta {
  color: var(--color-white);
  padding: 14px 24px;
  font-size: var(--fs-small);
  border: 1px solid transparent;
}

/* The mobile CTA markup has no arrow icon (the desktop one does), so the same
   arrow is drawn here in the text colour, keeping it visible and in step with
   the button colour. */
.mobile-nav__cta::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-fast);
}

.mobile-nav__cta:hover::after {
  transform: translateX(3px);
}

@media (min-width: 960px) {
  .mobile-nav {
    display: none !important;
  }
}

/* ---------- CTA band (dark, image background, above footer) ---------- */

.cta-band {
  position: relative;
  color: var(--color-white);
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 24, 26, 0.88) 0%, rgba(23, 24, 26, 0.72) 100%);
}

.cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-7);
}

@media (min-width: 768px) {
  .cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-band h2 {
  color: var(--color-white);
  font-size: var(--fs-h2);
}

/* ---------- Image placeholder ----------
   Stands in for real photography until assets are supplied.
   Swap the wrapping <div class="media-placeholder"> for an <img>
   with the same class removed — layout classes (media--hero, etc.)
   keep working unchanged. */

.media-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  background: linear-gradient(135deg, #dad8d3 0%, #c2c0b9 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.media-placeholder__label {
  margin: var(--space-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}


/* ---------- Link with arrow (e.g. "Explore Electrical →") ---------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  width: fit-content;
}

.link-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: var(--color-white);
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 21, 23, 0.82) 0%, rgba(20, 21, 23, 0.35) 55%, rgba(20, 21, 23, 0.15) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--space-8) var(--space-6);
}

.hero__content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero h1 {
  color: var(--color-white);
  font-size: var(--fs-h1);
}

.hero h1 .weight-strong {
  font-weight: 700;
}

/* Phones only (the 64px desktop/tablet size starts at 768px, unchanged).
   The homepage H1 is "Built for Living.<br>Powered for Life." - two intentional
   lines - but at 52px each line was too wide and wrapped, giving 3-4 lines.
   30px at 320px wide growing to a 32px cap by ~400px: the widest line
   ("Powered for Life.", bold) is ~245px at 30px and ~261px at 32px, so it fits
   inside the narrowest phone's 272px content width. */
@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(1.875rem, 1.375rem + 2.5vw, 2rem);
  }
}

.hero p {
  color: var(--color-white);
  max-width: 460px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-on-dark-muted);
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__dots span {
  opacity: 0.5;
}

.hero__dots span.is-active {
  opacity: 1;
  color: var(--color-white);
}

.hero__meta svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}

/* ---------- Split tiles (e.g. Electrical / Homes teaser) ---------- */

.tile-split {
  display: grid;
}

@media (min-width: 768px) {
  .tile-split {
    grid-template-columns: 1fr 1fr;
  }
}

.tile {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
}

.tile--dark {
  background-color: var(--color-ink);
}

.tile--dark::before {
  background: linear-gradient(0deg, rgba(20, 21, 23, 0.75) 0%, rgba(20, 21, 23, 0.15) 60%);
}

.tile--light {
  background-color: var(--color-off-white);
  color: var(--color-ink);
}

.tile--light::before {
  background: linear-gradient(0deg, rgba(245, 244, 241, 0.85) 0%, rgba(245, 244, 241, 0.2) 60%);
}

.tile--light p {
  color: var(--color-text-muted);
}

.tile__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
}

.tile__number {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tile__number::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.tile h2 {
  color: inherit;
  font-size: var(--fs-h2);
}

/* ---------- Icon feature block ---------- */

.icon-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.icon-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-off-white);
  color: var(--color-ink);
  flex-shrink: 0;
}

.icon-feature__icon svg {
  width: 20px;
  height: 20px;
}

.icon-feature h3 {
  font-size: 1.0625rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.icon-feature p {
  font-size: var(--fs-small);
}

/* Inline variant: icon sits beside the text instead of above it */
.icon-feature--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

/* ---------- Project / service card ---------- */

.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-card__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.project-card__category {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.project-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-ink);
}

/* Data-driven cards (includes/project-card.php): the whole card is a link and
   the photo is a real <img> (for alt text). The frame's size comes only from
   its width and the 4:5 ratio; the photo is taken out of the flow and cropped
   to fill it, so a photo's own dimensions can never change the card's height. */
.project-card[hidden] {
  display: none;
}

a.project-card .project-card__media {
  position: relative;
  width: 100%;
}

.project-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Small category/name gap on listing + related cards; the homepage's arrow
   cards (.project-card--arrow) keep their original tight spacing. */
a.project-card:not(.project-card--arrow) .project-card__title {
  margin-top: var(--space-1);
}

a.project-card:hover .icon-circle-link {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

a.project-card:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.icon-circle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.icon-circle-link svg {
  width: 14px;
  height: 14px;
}

.icon-circle-link:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

/* Service card used on division/service listing pages (image + eyebrow + title + text + Learn More) */

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.service-card__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-card__body h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
}

.service-card__body p {
  font-size: var(--fs-small);
}

/* ---------- Testimonial ---------- */

.testimonial-block {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .testimonial-block {
    grid-template-columns: 1.2fr 0.9fr;
    align-items: stretch;
  }
}

/* Stacked layout (below 900px): the image panel sits under the quote card.
   Its inline `min-height:100%` only means something when the panel is stretched
   beside the card (desktop); stacked, it collapsed to a ~60px strip that clipped
   the "Great people. Exceptional results." overlay. Give it a real height instead
   (about square on phones, easing toward landscape on tablets). Its photo already
   uses background-size: cover; the overlay and label are positioned inside it.
   A square crop can't show the whole landscape photo, so it is anchored toward
   the left: the pale wall then sits behind the whole dark "Great people.
   Exceptional results." overlay (a centred crop put the wall/plant edge under
   the text). The faint white halo keeps it legible over any darker patch. The
   .testimonial-block prefix out-ranks the plain .review-media rule (which sets
   background-position: center) further down this file. */
@media (max-width: 899px) {
  .testimonial-block .review-media {
    height: clamp(300px, 92vw, 440px);
    background-position: 25% center;
  }

  .testimonial-block .review-media p {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 3px rgba(255, 255, 255, 0.6);
  }
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
}

.testimonial-card__quote-mark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-border);
}

.testimonial-card__text {
  color: var(--color-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-off-white);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--fs-small);
}

.testimonial-card__role {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.testimonial-card__stars {
  color: var(--color-gold);
  font-size: var(--fs-small);
  letter-spacing: 2px;
}

.slider-controls {
  display: flex;
  gap: var(--space-2);
}

.slider-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.slider-controls svg {
  width: 14px;
  height: 14px;
}

.testimonial-card,
.review-media {
  transition: opacity 200ms ease;
}

.testimonial-card.is-fading,
.review-media.is-fading {
  opacity: 0;
}

.section-heading-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .section-heading-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* ---------- Stat bar (number + label row, used on About/Electrical/Homes) ---------- */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

@media (min-width: 640px) {
  .stat-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-bar__item {
  padding: var(--space-4) var(--space-3);
  border-left: 1px solid var(--color-border);
}

.stat-bar__item:first-child {
  border-left: none;
}

.stat-bar__number {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-ink);
}

.stat-bar__label {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ---------- Process steps (numbered circles connected by a line) ---------- */

.process-steps {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-off-white);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
}

@media (min-width: 768px) {
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 44px;
    width: calc(100% - 44px);
    height: 1px;
    background: var(--color-border);
  }
}

.process-step h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
}

.process-step p {
  font-size: var(--fs-small);
}

/* ---------- Breadcrumb (used on individual service detail pages) ---------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb a:hover {
  color: var(--color-white);
}

/* ---------- Trust bar (icon + label row under a hero) ---------- */

.trust-bar {
  display: grid;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 640px) {
  .trust-bar {
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
  }
}

.trust-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .trust-bar__item {
    justify-content: flex-start;
  }
}

.trust-bar__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-ink);
}

.trust-bar__item h4 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

.trust-bar__item p {
  font-size: 0.8125rem;
}

/* Three-item variant, used by the service detail template (service.php) for
   both Electrical and Homes. The generic bar above suits four short items; with
   three, a phone-width row left each text column only ~60-100px, so headings
   wrapped to 2-3 lines, descriptions to 3-5, and the row overflowed the page.
   Below 768px the items now stack in one left-aligned column (icon beside
   heading + text) with the standard gap; from 768px it is three equal columns,
   as before. This replaces an inline `grid-template-columns: repeat(3, 1fr)`
   that forced three columns at every width and beat the stylesheet. */
.trust-bar--3 {
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
}

.trust-bar--3 .trust-bar__item {
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .trust-bar--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- FAQ accordion ---------- */

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
}

.faq-item__question svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.faq-item.is-open .faq-item__question svg {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: none;
  padding-bottom: var(--space-4);
  font-size: var(--fs-small);
  max-width: 60ch;
}

.faq-item.is-open .faq-item__answer {
  display: block;
}

/* ---------- Filter chips (Projects page) ---------- */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.filter-chip.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

/* ---------- Projects listing: grid + empty state ---------- */

.project-grid[hidden],
.project-empty[hidden] {
  display: none;
}

.project-empty {
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  text-align: center;
}

/* ---------- Project detail page (project.php) ---------- */

.project-hero {
  min-height: 560px;
}

@media (min-width: 768px) {
  .project-hero {
    min-height: 640px;
  }
}

.project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark-muted);
}

.project-hero__meta li + li::before {
  content: "·";
  margin-right: var(--space-4);
}

.project-overview {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .project-overview {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
  }

  .project-overview--single {
    grid-template-columns: minmax(0, 760px);
  }
}

.project-overview__intro {
  font-size: var(--fs-lead);
}

.project-details {
  padding: var(--space-5);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
}

.project-details__heading {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.project-details dl {
  margin: 0;
}

.project-details__row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.project-details dt {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

.project-details dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.project-details dd li + li {
  margin-top: var(--space-1);
}

.project-description {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .project-description {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--space-8);
  }
}

.project-description__body {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}

/* Gallery: consistent 4:3 frames; 1 column on phones, 2 on tablets, 3 on
   desktop. One image spans full width at 16:9; 2 or 4 images sit in pairs. */
.project-gallery {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .project-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .project-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-gallery--pairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-gallery.project-gallery--single {
  grid-template-columns: 1fr;
}

.project-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  cursor: zoom-in;
}

.project-gallery--single .project-gallery__item {
  aspect-ratio: 16 / 9;
}

.project-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lightbox (native <dialog>: focus is kept inside and Esc closes it) */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--space-7) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-white);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(23, 24, 26, 0.94);
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  max-height: 100%;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100dvh - 180px);
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox__counter {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-on-dark-muted);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  background: rgba(23, 24, 26, 0.6);
  color: var(--color-white);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.lightbox__btn:hover {
  background: var(--color-ink-soft);
  border-color: var(--color-text-on-dark-muted);
}

.lightbox__btn:focus-visible {
  outline-color: var(--color-white);
}

.lightbox__btn svg {
  width: 18px;
  height: 18px;
}

.lightbox__close {
  top: var(--space-3);
  right: var(--space-3);
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: var(--space-3);
}

.lightbox__next {
  right: var(--space-3);
}

/* Phones: arrows move under the image so they never cover it */
@media (max-width: 767px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: var(--space-3);
    transform: none;
  }

  .lightbox__prev {
    left: calc(50% - 56px);
  }

  .lightbox__next {
    right: calc(50% - 56px);
  }
}

/* ---------- Forms (Contact, Get a Quote) ---------- */

.form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: #c0392b;
}

.field__error {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: #c0392b;
}

/* Honeypot: must stay out of the accessibility tree via display:none — off-screen
   positioning alone still gets auto-filled by Chrome/Edge/Firefox profile autofill
   (they only skip display:none/visibility:hidden fields), which was silently
   populating this field and triggering false spam rejections on every submission. */
.field--honeypot {
  display: none;
}

.file-dropzone {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.file-dropzone:hover,
.file-dropzone.is-dragover {
  border-color: var(--color-ink);
  background: var(--color-off-white);
}

.file-dropzone svg {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.file-dropzone input[type="file"] {
  display: none;
}

.file-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.file-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-bottom: var(--space-5);
}

.alert--success {
  background: #eaf5ec;
  color: #1e6b34;
  border: 1px solid #bfe3c6;
}

.alert--error {
  background: #fbebe9;
  color: #a4312a;
  border: 1px solid #f1c4bf;
}

/* Info card used beside forms (Contact / Get a Quote "Get in Touch" panel) */

.info-card {
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.info-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.info-card__row svg {
  width: 20px;
  height: 20px;
  color: var(--color-ink);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-card__row h4 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}

.info-card__row p {
  font-size: var(--fs-small);
}

/* ---------- Site footer ---------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-7) var(--space-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.site-footer h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.site-footer .wordmark__name,
.site-footer .wordmark__tagline {
  color: var(--color-white);
}

.site-footer .wordmark__tagline {
  color: var(--color-text-on-dark-muted);
}

.site-footer p {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links a {
  font-size: var(--fs-small);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-ink-soft);
  border-color: var(--color-text-on-dark-muted);
}

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

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__bottom-links {
  display: flex;
  gap: var(--space-4);
}

/* custom css*/
.home-about{
  background-image: url('../images/home/about-us.jpg');
  background-size: cover;
  background-position: center;
}

.review-media{
  background-image: url('../images/home/reviews.jpg');
   background-size: cover;
  background-position: center;
}
.hero__dots{
  display: none;
}
.testimonial-card__avatar{
  display: none;
}
.policy-page-content h2, .policy-page-content h3, .policy-page-content h1, .policy-page-content h4{
  font-size: unset;
}