/* Qualité & Méthodologie page only.
   Builds on the service-detail template (service-detail.css) with page-scoped modifiers.
   Spacing, title sizes, buttons, process and check badges come from style.css tokens. */

/* Hero */
.quality-hero { height: 521px; }
.quality-hero .service-hero-media { width: 60%; }
.quality-hero .service-hero-media img { object-position: 60% 40%; }
.quality-hero .service-hero-inner { padding-top: 54px; }
.quality-hero .service-breadcrumb { margin-bottom: 30px; }
.quality-hero h1 { font-size: 58px; line-height: 1.1; }
.quality-hero .service-hero-text { max-width: 620px; font-size: 19.5px; margin-top: 30px; }
.quality-hero .hero-actions { margin-top: 26px; gap: 28px; }
.quality-hero .service-hero-keywords { padding: 28px 28px 24px; }

/* Pillars */
.quality-pillars .icon { width: 62px; height: 62px; margin-bottom: 10px; }

/* Methodology (image right) */
.quality-methodology .service-split.is-reversed { grid-template-columns: 1fr 669px; gap: 58px; }
.quality-methodology .service-split-media { height: 509px; }
.quality-methodology .service-split-media > img { object-position: 30% center; transform: scale(1.15); transform-origin: 40% 88%; }
.quality-methodology .service-split-copy > p:not(.eyebrow) { margin: 14px 0 18px; }
.quality-methodology .service-split-copy .check-list { gap: 9px; margin-bottom: 22px; }
.quality-methodology .service-media-keywords { padding: 24px 24px 22px; font-size: 17px; line-height: 1.8; }

/* Quality standards: dark copy / photo split (copy starts on the page content edge) */
.quality-standards { display: grid; grid-template-columns: 48% 52%; min-height: 471px; background: var(--navy-dark); color: white; }
.quality-standards-copy { display: flex; align-items: center; }
.quality-standards-content { padding: var(--space-section) 40px var(--space-section) var(--edge); }
.quality-standards .eyebrow { color: #3fd0de; }
.quality-standards h2 { font-size: var(--h2); line-height: 1.14; letter-spacing: -.025em; }
.quality-standards-content > p:not(.eyebrow) { color: #e1eaf0; font-size: 17.5px; line-height: 1.5; max-width: 470px; margin: 14px 0 16px; }
.quality-standards .check-list { color: #eaf2f6; font-size: 18px; gap: 9px; margin: 0; }
.quality-standards .check-list li { --check: 28px; --check-bg: var(--cyan); }
.quality-standards-photo { --defer-bg: url('../images/home/home-hero-quality-inspection.webp'); position: relative; background: linear-gradient(90deg, rgb(0 25 39 / 30%), transparent 35%, rgb(0 25 39 / 25%)), var(--bg-img, none) 100% center / cover; }
.quality-standards-photo .service-media-keywords { right: var(--edge); bottom: 36px; font-size: 18px; }

/* Continuous improvement (image left) */
.quality-improvement .service-split { grid-template-columns: 702px 1fr; gap: 58px; }
.quality-improvement .service-split-media { height: 402px; }
.quality-improvement .service-split-media > img { object-position: 40% center; }
.quality-improvement .service-split-copy > p:not(.eyebrow) { font-size: 16.5px; line-height: 1.52; margin: 10px 0 12px; }
.quality-improvement .service-split-copy .check-list { font-size: 16.5px; gap: 7px; margin-bottom: 18px; }

/* Road CTA (reuses .project-cta) */
.quality-cta { border-top: 0; }

.quality-page .footer-column a[aria-current] { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1350px) and (min-width: 1101px) {
  .quality-methodology .service-split.is-reversed { grid-template-columns: 1fr 1fr; gap: 48px; }
  .quality-improvement .service-split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .quality-hero h1 { font-size: 52px; }
}
@media (max-width: 1100px) {
  .quality-hero { height: 540px; }
  .quality-hero .service-hero-media { width: 75%; }
  .quality-hero h1 { font-size: 44px; }
  .quality-hero .service-hero-text { font-size: 17px; max-width: 500px; margin-top: 20px; }
  .quality-hero .service-hero-keywords { bottom: 30px; padding: 16px 18px; }
  .quality-pillars .service-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .quality-pillars .service-benefits-grid > div:nth-child(3)::before { display: none; }
  .quality-pillars .service-benefits-grid p br { display: none; }
  .quality-pillars .icon { width: 48px; height: 48px; }
  .quality-methodology .service-split.is-reversed, .quality-improvement .service-split { grid-template-columns: 1fr 1fr; gap: 34px; }
  .quality-methodology .service-split-media, .quality-improvement .service-split-media { height: 460px; }
  .quality-methodology .service-media-keywords { font-size: 13px; padding: 14px 16px; right: 14px; bottom: 14px; }
  .quality-standards { grid-template-columns: 1fr 1fr; }
  .quality-standards-content { padding-right: 28px; }
  .quality-standards h2 br { display: none; }
  .quality-standards-content > p:not(.eyebrow), .quality-standards .check-list { font-size: 16px; }
  .quality-standards-photo .service-media-keywords { right: 16px; bottom: 16px; font-size: 13px; padding: 14px 16px; }
  .quality-cta p br { display: none; }
}
@media (max-width: 760px) {
  .quality-methodology .service-split.is-reversed, .quality-improvement .service-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .quality-methodology .service-split-media, .quality-improvement .service-split-media { height: auto; aspect-ratio: 4 / 3.2; }
  .quality-standards { grid-template-columns: 1fr; }
  .quality-standards-content { padding-right: var(--edge); }
  .quality-standards-photo { min-height: 360px; }
}
/* The hero keeps its approved height but may grow with the copy (longer heading and text since
   Milestone 8) instead of letting the buttons run into the bottom edge. */
@media (min-width: 641px) {
  .quality-hero, .quality-hero .service-hero-inner { height: auto; min-height: 521px; }
  .quality-hero .service-hero-inner { padding-bottom: 48px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .quality-hero, .quality-hero .service-hero-inner { min-height: 540px; }
}
/* Narrow tablets: the keyword box moves below the copy (same arrangement as on phones). */
@media (min-width: 641px) and (max-width: 860px) {
  .quality-hero .service-hero-inner { padding-bottom: 214px; }
  .quality-hero h1 { font-size: 38px; }
}
@media (max-width: 640px) {
  .quality-hero { height: auto; min-height: 740px; }
  .quality-hero .service-hero-media { width: 100%; }
  .quality-hero h1 { font-size: clamp(30px, 8.6vw, 42px); }
  .quality-hero h1 br { display: none; }
  .quality-hero .service-hero-text { font-size: 16px; }
  .quality-hero .hero-actions { flex-direction: column; align-items: flex-start; }
  .quality-hero .button { font-size: 14px; min-height: var(--btn-sm); }
  .quality-hero .service-hero-keywords { font-size: 12px; bottom: 26px; }
  .quality-pillars h2 { font-size: 15.5px; }
  .quality-pillars .service-benefits-grid p { font-size: 13.5px; }
  .quality-methodology .service-split-copy .button, .quality-improvement .service-split-copy .button { font-size: 14px; padding-inline: 20px; gap: 14px; min-height: var(--btn-sm); }
  .quality-methodology .service-split-media, .quality-improvement .service-split-media { aspect-ratio: 1 / 1; }
  .quality-methodology .service-split-copy h2 br, .quality-improvement .service-split-copy h2 br { display: none; }
  .quality-standards-photo { min-height: 300px; }
  .quality-cta .eyebrow { letter-spacing: .1em; }
}