/* ============================================
   MEUBLES CIANO — Service pages
   Builds on the shared design language in
   style.css / home.css / about.css.
   ============================================ */

/* Service hero — reuses the .about-hero visual language, shorter than the full-screen About hero */
.svc-page-hero { height: 58vh; min-height: 400px; max-height: 620px; }
.svc-page-hero .about-hero-content {
  padding-top: calc(var(--nav-height) + 36px);
  padding-bottom: 64px;
}
.svc-page-hero .about-hero-content h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }

/* Overview: feature "points" inside the about-intro text column */
.svc-points {
  margin: 34px 0 38px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.svc-point {
  padding-left: 24px;
  border-left: 2px solid var(--color-accent);
}
.svc-point h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-bottom: 7px;
}
.svc-point p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

/* Services index — cards section */
.svc-cards-section { padding: 100px 0; }
.svc-cards-lead { max-width: 640px; margin-bottom: 8px; }
.svc-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--featured-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 44px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Inset gold frame on hover — mirrors the about-intro image treatment */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 169, 110, 0);
  border-radius: 4px;
  pointer-events: none;
  transition: border-color var(--transition);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.4); }
.svc-card:hover::before { border-color: rgba(201, 169, 110, 0.5); }
.svc-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 14px;
}
.svc-card p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  flex: 1;
  margin: 0;
}
.svc-card-arrow {
  margin-top: 26px;
  color: var(--color-accent);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}
.svc-card:hover .svc-card-arrow { transform: translateX(6px); }

/* Photo variant of the index cards — image on top, body below */
.svc-card--photo { padding: 0; overflow: hidden; }
.svc-card--photo::before { inset: 10px; z-index: 2; }
.svc-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.svc-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.svc-card:hover .svc-card-img img { transform: scale(1.045); }
.svc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 36px 34px;
}

/* Commercial banner — full-width card under the residential grid */
.svc-commercial-band {
  display: grid;
  grid-template-columns: 5fr 4fr;
  margin-top: 24px;
  background: var(--featured-cards-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.svc-commercial-band::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 169, 110, 0);
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
  transition: border-color var(--transition);
}
.svc-commercial-band:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.4); }
.svc-commercial-band:hover::before { border-color: rgba(201, 169, 110, 0.5); }
.svc-commercial-band-img { overflow: hidden; min-height: 260px; }
.svc-commercial-band-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.svc-commercial-band:hover .svc-commercial-band-img img { transform: scale(1.045); }
.svc-commercial-band-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 48px;
}
.svc-commercial-band-body .section-label { margin-bottom: 10px; }
.svc-commercial-band-body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--color-text);
  margin-bottom: 12px;
}
.svc-commercial-band-body p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 22px;
}

/* "What we build" — keyword-rich specifics grid */
.svc-build { padding: 100px 0; background: var(--color-bg-light); }
.svc-build-header { max-width: 640px; margin-bottom: 54px; }
.svc-build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}
.svc-build-item {
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  position: relative;
}
.svc-build-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--color-accent);
}
.svc-build-item h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: 8px;
}
.svc-build-item p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
}

/* Mini gallery — three project photos + link to the full gallery */
.svc-gallery { padding: 100px 0; }
.svc-gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.svc-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-accent);
  transition: color var(--transition-fast);
}
.svc-gallery-link:hover { color: var(--color-accent); }
.svc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}
.svc-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.svc-gallery-item:hover img { transform: scale(1.045); }

/* FAQ — reuses the value-acc accordion styles from about.css */
.svc-faq { padding: 100px 0; background: var(--color-bg-light); }
.svc-faq-inner { max-width: 780px; margin: 0 auto; }
.svc-faq-inner > .section-label,
.svc-faq-inner > .section-title { display: block; text-align: center; }
.svc-faq-inner .divider { margin: 0 auto 44px; }
.svc-faq .value-acc-body { display: block; }
.svc-faq .value-desc { max-width: none; }

/* Commercial "why us" — stats row under the grid */
.svc-why-stats { margin: 56px 0 0; }

/* Commercial page — alternating audience rows */
.svc-aud { padding: 100px 0; }
.svc-aud-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.svc-aud-img { position: relative; }
.svc-aud-img::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}
.svc-aud-img-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}
.svc-aud-img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-aud-row--flip .svc-aud-img { order: 2; }
.svc-aud-text .divider { margin-bottom: 26px; }
.svc-aud-text .about-body { margin-bottom: 0; }
.svc-aud-row + .svc-aud-row { margin-top: 110px; }

/* Services index — "where we work" band, 3 areas across */
.svc-areas-section { border-top: 1px solid var(--color-border); }
.svc-areas-grid { grid-template-columns: repeat(3, 1fr); }

/* "Everywhere in Quebec" — full-width card under the area cards */
.svc-quebec-card {
  margin-top: 24px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 36px 44px;
}
.svc-quebec-text h3 { margin-bottom: 10px; }
.svc-quebec-card p { flex: none; max-width: 680px; }
.svc-quebec-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}
.svc-quebec-card .svc-card-arrow { margin-top: 0; }

/* Service-area pages — neighbourhoods band */
.area-hoods { padding: 92px 0; background: var(--featured-cards-bg); text-align: center; }
.area-hoods .divider { margin-left: auto; margin-right: auto; }
.area-hoods-list {
  max-width: 760px;
  margin: 30px auto 0;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 2.15;
  color: var(--color-text-muted);
}
.area-hoods-note {
  max-width: 560px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* Closing CTA band */
.svc-cta { padding: 120px 0; background: var(--cta-bg); text-align: center; }
.svc-cta .divider { margin-left: auto; margin-right: auto; }
.svc-cta .section-subtitle { max-width: 580px; margin: 0 auto 38px; }

@media (max-width: 900px) {
  .svc-index-grid { grid-template-columns: 1fr; }
  .svc-areas-grid { grid-template-columns: 1fr; }
  .svc-page-hero { height: auto; min-height: 62vh; }
  .svc-cards-section { padding: 72px 0; }
  .area-hoods { padding: 68px 0; }
  .svc-cta { padding: 80px 0; }
  .svc-quebec-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 32px 30px; }
  .svc-commercial-band { grid-template-columns: 1fr; }
  .svc-commercial-band-img { min-height: 220px; }
  .svc-commercial-band-body { padding: 34px 30px 38px; }
  .svc-build { padding: 72px 0; }
  .svc-build-grid { grid-template-columns: 1fr; gap: 30px; }
  .svc-gallery { padding: 72px 0; }
  .svc-gallery-header { flex-direction: column; align-items: flex-start; }
  .svc-gallery-grid { grid-template-columns: 1fr; }
  .svc-faq { padding: 72px 0; }
  .svc-aud { padding: 72px 0; }
  .svc-aud-row { grid-template-columns: 1fr; gap: 36px; }
  .svc-aud-row--flip .svc-aud-img { order: 0; }
  .svc-aud-row + .svc-aud-row { margin-top: 64px; }
}