/* ==========================================================================
   SDK Paysagement Inc. — Landing page
   Design reference: Figma "UI - SDK Paysagement Inc" (1920px artboard)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --c-blue: #1378be;
  --c-blue-20: rgba(19, 120, 190, .2);
  --c-blue-40: rgba(19, 120, 190, .4);
  --c-navy: #0c1d30;
  --c-navy-surface: #1f2f40;
  --c-navy-muted: #1a2d4c;
  --c-ice: #daebf5;
  --c-mist: #e7ebf0;
  --c-porcelain: #f7f9fb;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-gold: #fdc700;
  --c-green: #14c307;
  --c-leaf: #7eb250;
  /* service-card call to action */
  --c-mist-200: #e5e7eb;
  /* service-card body copy on photography */
  --c-red: #ff0000;

  /* Text */
  --t-on-dark: #ffffff;
  --t-on-dark-80: rgba(255, 255, 255, .8);
  --t-on-dark-75: rgba(255, 255, 255, .75);
  --t-on-dark-60: rgba(255, 255, 255, .6);
  --t-on-light: #000000;
  --t-muted-light: rgba(0, 0, 0, .6);

  /* Lines & surfaces */
  --line-on-dark: rgba(255, 255, 255, .2);
  --line-on-dark-soft: rgba(255, 255, 255, .4);
  --line-card: rgba(19, 60, 102, .1);
  --hero-tint: rgba(19, 60, 102, .1);

  /* Shadows */
  --sh-btn: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --sh-card: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --sh-icon: 0 2px 8px 0 rgba(0, 0, 0, .04);
  --sh-feature: 0 4px 5px rgba(0, 0, 0, .04);
  --sh-glass: 0 4px 16px 0 rgba(0, 0, 0, .25);
  --sh-compare: 1.892px 3.784px 9.461px 0 rgba(0, 0, 0, .06);

  /* Layout */
  --shell: 1506px;
  /* 1920 − 2 × 207 */
  --shell-about: 1508px;
  /* 1920 − 208 − 204 */
  --gutter: 24px;
  --section-y: 64px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* Type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--t-on-light);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

section[id] {
  scroll-margin-top: 108px;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-blue);
  color: var(--c-white);
  font-weight: 700;
  border-radius: var(--r-md);
  transition: top .2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: var(--shell);
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container--about {
  width: var(--shell-about);
}

/* Honour the design's asymmetric 208 / 204 padding at the 1920 artboard width. */
@media (min-width: 1920px) {
  .container--about {
    width: auto;
    max-width: none;
    margin-left: 208px;
    margin-right: 204px;
  }
}

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* --- Eyebrow label ------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-left: 2px solid var(--c-blue);
  font-size: 20px;
  line-height: 15px;
  /* cap-height trim, as in Figma */
  font-weight: 700;
  color: var(--c-blue);
}

/* --- Section headings ---------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-title {
  font-size: 38px;
  line-height: 48px;
  font-weight: 700;
  color: var(--t-on-light);
}

.section-title--tight {
  line-height: 45px;
}

.section-title--invert {
  color: var(--t-on-dark);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-md);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: .8px;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
  box-shadow: var(--sh-btn);
}

.btn--primary:hover {
  background: #1069a7;
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: none;
}

.btn--ghost {
  padding: 17px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px var(--c-white);
  color: var(--c-white);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .2);
}

.btn--sm {
  min-height: 56px;
  padding: 10px 24px;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .35px;
  white-space: nowrap;
}

.btn__arrow {
  transform: rotate(90deg);
}

/* --- Star rows ----------------------------------------------------------- */
.stars {
  display: inline-flex;
  flex-shrink: 0;
}

.stars--20 {
  gap: 2px;
}

.stars--20 img {
  width: 20px;
  height: 20px;
}

.stars--24 {
  gap: 8px;
}

.stars--24 img {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 100px;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* Scrolled state: the bar solidifies and the copy flips to navy. */
.site-header.is-stuck {
  background: var(--c-white);
  box-shadow: 0 2px 16px rgba(12, 29, 48, .12);
}

.site-header.is-stuck .site-nav__list,
.site-header.is-stuck .link-phone {
  color: var(--c-navy);
}

.site-header.is-stuck .link-phone:hover {
  background: rgba(12, 29, 48, .06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  margin-top: 10px;
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  width: 158.96px;
  height: 80px;
  object-fit: contain;
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  color: var(--t-on-dark);
  white-space: nowrap;
}

.site-nav__list a {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

.site-nav__list a:hover {
  border-bottom-color: var(--c-blue);
}

.site-nav__list a[aria-current] {
  border-bottom-color: var(--c-blue);
  font-weight: 600;
}

.site-header.is-stuck .site-nav__list a[aria-current] {
  color: var(--c-blue);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 10px 24px;
  border-radius: var(--r-sm);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .35px;
  color: var(--t-on-dark);
  white-space: nowrap;
  transition: background-color .18s ease;
}

.link-phone:hover {
  background: rgba(255, 255, 255, .12);
}

/* Inlined so the glyph inherits the header's colour and still renders when the
   page is opened straight from disk (an external CSS mask would be blocked). */
.link-phone__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.33333;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Desktop: the wrapper is transparent to layout, so the bar is unchanged. */
.site-header__collapse {
  display: contents;
}

/* --- Burger toggle (shown below the desktop breakpoint) ------------------ */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--t-on-dark);
  cursor: pointer;
}

.site-header.is-stuck .nav-toggle {
  color: var(--c-navy);
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}

.nav-toggle__box span:nth-child(1) {
  top: 0;
}

.nav-toggle__box span:nth-child(2) {
  top: 7px;
}

.nav-toggle__box span:nth-child(3) {
  top: 14px;
}

.site-header.is-open .nav-toggle__box span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.site-header.is-open .nav-toggle__box span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle__box span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 941px;
  display: flex;
  align-items: center;
  background: var(--hero-tint);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53.6%;
}

/* Soft radial shadow anchored to the lower-left, as in the Figma fill. */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Figma: radial fill r=10, transform matrix(71.7 3.75 -3.2068 61.314 209.5 632),
     opacity .6 — i.e. a 718 x 614 px ellipse centred at 209.5, 523 in hero space. */
  background: radial-gradient(37.4% 65.2% at 10.9% 55.6%,
      rgba(0, 0, 0, .6) 0%,
      rgba(0, 0, 0, 0) 100%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .56) 0%, rgba(0, 0, 0, .28) 100%);
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 815px;
  max-width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 66px;
  background: var(--c-blue-40);
  box-shadow: inset 0 0 0 1px var(--c-blue);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--t-on-dark);
}

.hero__badge img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.hero__title {
  font-size: 66px;
  line-height: 70px;
  font-weight: 700;
  color: var(--t-on-dark);
}

.hero__lede {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--t-on-dark-80);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 5px;
  padding-bottom: 24px;
}

/* --- Founder glass card -------------------------------------------------- */
.founder {
  width: 560px;
  flex-shrink: 0;
  border: 1px solid var(--t-on-dark-80);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-glass);
  overflow: hidden;
}

.founder__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: rgba(0, 0, 0, .09);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.founder__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.founder__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-blue);
  font-size: 16.16px;
  line-height: 17px;
  font-weight: 700;
  color: var(--t-on-dark);
}

.founder__id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.founder__name {
  font-size: 16.16px;
  line-height: 17px;
  font-weight: 700;
  color: var(--t-on-dark);
}

.founder__role {
  font-size: 14px;
  line-height: 17px;
  color: var(--t-on-dark-80);
}

.founder__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating__text {
  font-size: 14px;
  line-height: 17px;
  color: var(--t-on-dark-80);
}

.founder__rule {
  height: 1px;
  background: var(--line-on-dark-soft);
}

.founder__quote {
  font-size: 16px;
  line-height: 23px;
  color: var(--t-on-dark-80);
}

/* ==========================================================================
   7. Trust bar
   ========================================================================== */
.trustbar {
  background: var(--c-white);
}

.trustbar__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding-block: 26px;
}

.trustbar__item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--t-on-light);
}

.trustbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 2.667px;
  background: var(--c-blue-20);
}

/* ==========================================================================
   8. À propos
   ========================================================================== */
.about {
  background: var(--c-mist);
}

.about__grid {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-block: var(--section-y);
}

.about__media {
  position: relative;
  width: 637px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 684px;
  border-radius: var(--r-sm);
  background: var(--c-mist);
  overflow: hidden;
}

.about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52.8% 50%;
}

.about__photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08) 16.931%, rgba(0, 0, 0, .4) 83.564%);
}

/* --- "+15 ANS D'EXPÉRIENCE" seal ---------------------------------------- */
.seal {
  position: absolute;
  right: 29.62px;
  bottom: 30.35px;
  width: 219.376px;
  height: 224.649px;
  border: 1.055px solid var(--c-white);
  border-radius: 50%;
  overflow: hidden;
}

.seal__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.seal__arc-text {
  fill: var(--c-white);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
}

.seal__disc {
  position: absolute;
  left: 44.2px;
  top: 42.3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 129.512px;
  height: 132.625px;
  border-radius: 50%;
  background: var(--c-ice);
  color: var(--c-blue);
}

.seal__num {
  font-size: 49.43px;
  line-height: 52.925px;
  font-weight: 900;
  margin-bottom: -5.604px;
}

.seal__unit {
  font-size: 32.14px;
  line-height: 37.566px;
  font-weight: 300;
}

.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  flex: 1 1 0;
  min-width: 0;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.about__body p {
  font-size: 16px;
  line-height: 24px;
}

.about__body strong {
  font-weight: 700;
}

/* --- Feature rows -------------------------------------------------------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 10px;
  border: 1px solid var(--line-card);
  border-radius: var(--r-md);
  background: var(--c-porcelain);
  filter: drop-shadow(var(--sh-feature));
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--sh-icon);
}

.feature p {
  font-size: 14px;
  line-height: 20px;
}

.feature strong {
  font-weight: 700;
}

/* ==========================================================================
   9. Service principal
   ========================================================================== */
.mainservice {
  background: var(--c-white);
}

.mainservice__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding-block: var(--section-y);
}

.mainservice__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 686px;
  flex-shrink: 0;
}

.mainservice__content .section-head {
  margin-bottom: 0;
}

.mainservice__content>.btn {
  margin-top: 8px;
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  list-style: disc;
}

.bullets li {
  display: list-item;
  font-size: 16px;
  line-height: 24px;
}

.bullets strong {
  font-weight: 700;
}

.mainservice__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 696px;
  border-radius: var(--r-md);
  background: var(--c-mist);
  overflow: hidden;
}

.mainservice__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53.7% 50%;
}

.mainservice__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
}

.thumb {
  position: absolute;
  left: 495px;
  width: 253px;
  border: 4px solid var(--c-white);
  border-radius: var(--r-sm);
  background: var(--c-mist);
  overflow: hidden;
}

.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb--1 {
  top: 25px;
  height: 206px;
}

.thumb--1 img {
  object-position: 52.9% 58.3%;
}

.thumb--2 {
  top: 245px;
  height: 208px;
}

.thumb--2 img {
  object-position: 53.5% 50.3%;
}

.thumb--3 {
  top: 467px;
  height: 206px;
}

.thumb--3 img {
  object-position: 50% 50%;
}

/* ==========================================================================
   10. Services (dark)
   ========================================================================== */
.services {
  background: var(--c-navy);
  padding-block: var(--section-y);
}

.services__head {
  width: 834px;
  max-width: 100%;
  margin-inline: auto;
  gap: 8px;
}

.services__lede {
  font-size: 16px;
  line-height: 24px;
  color: var(--t-on-dark);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.scard {
  grid-column: span 2;
}

.scard--4 {
  grid-column: 2 / span 2;
}

.scard--5 {
  grid-column: 4 / span 2;
}

.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 400px;
  padding: 32px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  overflow: hidden;
  isolation: isolate;
}

.scard__img {
  position: absolute;
  z-index: -2;
  transform-origin: center;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  width: 100%;
  height: 100%;
  max-width: none;
  /* these fills are intentionally wider than the card */
  object-fit: cover;
}

/* Each fill reproduces the exact crop box Figma places behind the card.
   Percentages are relative to the 491.33 x 400 card. */
.scard--1 .scard__img {
  left: -10.99%;
  top: 0;
  width: 121.91%;
  height: 100%;
}

.scard--2 .scard__img {
  left: 0;
  top: -50%;
  width: 99.93%;
  height: 218.5%;
}

.scard--3 .scard__img {
  left: -11.06%;
  top: 0;
  width: 122.12%;
  height: 100%;
}

.scard--4 .scard__img {
  left: -15.33%;
  top: -58.94%;
  width: 128.02%;
  height: 209.5%;
}

.scard--5 .scard__img {
  left: -2.82%;
  top: -84.72%;
  width: 106.44%;
  height: 269.36%;
}

.scard__scrim {
  position: absolute;
  z-index: -1;
  inset: -27px -22px -15px -23px;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, .7) 39.904%,
      rgba(0, 0, 0, 0) 81.25%);
}

.scard__body {
  display: flex;
  flex-direction: column;
}

.scard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: var(--r-xs);
  background: var(--c-blue);
}

.scard__title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--t-on-dark);
}

/* --- Hover reveal --------------------------------------------------------
   The extra copy lives in a grid row that animates from 0fr to 1fr, so the
   icon and title are pushed up by the real height of the content and nothing
   has to be measured in JavaScript. */
.scard__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1);
}

.scard__reveal-inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.scard:hover .scard__reveal,
.scard:focus-within .scard__reveal {
  grid-template-rows: 1fr;
}

.scard:hover .scard__reveal-inner,
.scard:focus-within .scard__reveal-inner {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

.scard:hover .scard__img,
.scard:focus-within .scard__img {
  transform: scale(1.04);
}


.scard__desc {
  padding-top: 8px;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-mist-200);
}

.scard__points {
  display: flex;
  flex-direction: column;
}

.scard__points li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-mist-200);
}

.scard__points li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.scard__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--c-leaf);
}

.scard__link img {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
}

.scard__link:hover img {
  transform: translateX(4px);
}

/* ==========================================================================
   11. Avantages
   ========================================================================== */
.benefits {
  background: var(--c-white);
  padding-block: var(--section-y);
}

.benefits__head {
  width: 756px;
  max-width: 100%;
}

.benefits__grid {
  display: flex;
  align-items: stretch;
  gap: 48px;
  margin-top: 48px;
}

.benefits__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  width: 756px;
  flex-shrink: 0;
}

.benefits__lede {
  font-size: 16px;
  line-height: 24px;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -13px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}

.checklist img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.benefits__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 439px;
  border-radius: var(--r-sm);
  background: var(--c-mist);
  overflow: hidden;
}

.benefits__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   12. Réalisations
   ========================================================================== */
.gallery {
  background: var(--c-mist);
  padding-block: var(--section-y);
}

.gallery__head {
  gap: 17px;
}

.gallery__head .section-title,
.gallery__lede {
  width: 778.12px;
  max-width: 100%;
}

.gallery__lede {
  font-size: 16px;
  line-height: 24px;
}

.gallery__grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 48px;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}

.gthumb {
  display: block;
  position: relative;
  width: 100%;
  height: 310px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-white);
  overflow: hidden;
  cursor: zoom-in;
}

.gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.gthumb:hover img,
.gthumb:focus-visible img {
  transform: scale(1.05);
}

/* Magnifier badge that fades in on hover */
.gthumb__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(12, 29, 48, .72) no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.gthumb:hover .gthumb__zoom,
.gthumb:focus-visible .gthumb__zoom {
  opacity: 1;
  transform: none;
}

.gthumb--inset {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gthumb__frame {
  display: block;
  width: calc(100% - 14px);
  height: 295px;
  margin-bottom: 8px;
  border-radius: var(--r-xs);
  overflow: hidden;
}

.gthumb__frame {
  position: relative;
}

.gthumb__frame img {
  position: absolute;
  left: -2.2%;
  top: -14.67%;
  width: 104.4%;
  height: 134.24%;
  max-width: none;
  object-fit: cover;
}

/* --- Before / after slider ---------------------------------------------- */
.compare {
  --split: 47.28%;
  /* divider position in the Figma comp */
  position: relative;
  width: 810px;
  height: 636px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-compare);
  overflow: hidden;
  isolation: isolate;
}

.compare__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__img--before {
  position: absolute;
  inset: 0;
  object-position: 51.3% 50%;
}

.compare__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--split));
}

.compare__after .compare__img {
  position: absolute;
  top: 0;
  right: -9.506%;
  width: 120.74%;
  max-width: none;
  height: 100%;
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3.784px;
  background: var(--c-white);
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 45.413px;
  height: 45.413px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.compare__handle img {
  width: 100%;
  height: 100%;
}

.compare__badge {
  position: absolute;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  padding: 5.962px 17.885px;
  border-radius: 44.712px;
  font-size: 14.904px;
  line-height: 20.865px;
  font-weight: 700;
  color: var(--c-white);
}

.compare__badge--before {
  left: 18px;
  background: var(--c-red);
}

.compare__badge--after {
  right: 22px;
  background: var(--c-green);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.compare__range::-moz-range-thumb {
  width: 46px;
  height: 636px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.compare__range::-moz-range-track {
  background: transparent;
}

.compare__range:focus-visible {
  outline-offset: -4px;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  width: min(1200px, 92vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(6, 14, 25, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

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

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  max-width: 100%;
}

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: lightbox-in .28s cubic-bezier(.22, .61, .36, 1);
}

.lightbox__caption {
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  color: var(--t-on-dark-80);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color .2s ease;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, .24);
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__btn--close {
  top: -60px;
  right: 0;
}

.lightbox__btn--prev {
  left: -64px;
  top: 50%;
  margin-top: -24px;
}

.lightbox__btn--next {
  right: -64px;
  top: 50%;
  margin-top: -24px;
}

@media (max-width: 1400px) {
  .lightbox {
    width: min(1200px, 84vw);
  }

  .lightbox__btn--prev {
    left: 8px;
  }

  .lightbox__btn--next {
    right: 8px;
  }

  .lightbox__btn--close {
    top: -56px;
    right: 8px;
  }
}

/* ==========================================================================
   13. Témoignages
   ========================================================================== */
.reviews {
  background: var(--c-navy);
  padding-block: var(--section-y);
}

.reviews__head {
  width: 737px;
  max-width: 100%;
  margin-inline: auto;
  gap: 17px;
}

.reviews__score {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviews__score-text {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--t-on-dark);
}

.reviews__widget {
  margin-top: 48px;
  min-height: 320px;
}

/* ==========================================================================
   14. Zones desservies
   ========================================================================== */
.zones {
  background: var(--c-mist);
}

.zones__grid {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-block: var(--section-y);
}

.zones__content {
  width: 576px;
  flex-shrink: 0;
}

.zones__content .section-head {
  gap: 17px;
}

.zones__content .section-title {
  max-width: 470px;
}

.zones__lede {
  width: 566px;
  max-width: 100%;
  margin-top: 17px;
  font-size: 16px;
  line-height: 24px;
}

.zones__list {
  display: grid;
  grid-template-columns: repeat(2, 280px);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 44px);
  gap: 16px;
  margin-top: 17px;
}

.zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: 16px;
  line-height: 20px;
}

.zone::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-blue);
}

.zones__note {
  margin-top: 17px;
  font-size: 14px;
  line-height: 24px;
  font-style: italic;
  color: var(--t-muted-light);
}

.zones__map {
  flex: 1 1 0;
  min-width: 0;
  height: 497px;
  border-radius: 16px;
  overflow: hidden;
}

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

/* ==========================================================================
   15. Soumission
   ========================================================================== */
.quote {
  position: relative;
  background: var(--c-navy);
  overflow: hidden;
  isolation: isolate;
}

.quote__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.quote__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 12, 22, .88) 0%, rgba(4, 12, 22, .62) 55%, rgba(4, 12, 22, .5) 100%);
}

.quote__grid {
  display: flex;
  align-items: flex-start;
  gap: 67px;
  padding-block: var(--section-y);
}

.quote__content {
  width: 834px;
  flex-shrink: 0;
}

.quote__content .section-head {
  gap: 17px;
}

.quote__content .section-title {
  max-width: 720px;
}

.quote__lede {
  margin-top: 17px;
  font-size: 16px;
  line-height: 24px;
  color: var(--t-on-dark-80);
}

.infolist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 17px;
}

.info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}

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

.info__icon img {
  width: 20px;
  height: 20px;
}

.info__text {
  display: flex;
  flex-direction: column;
}

.info__label {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--t-on-dark-60);
}

.info__value {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--t-on-dark);
}

a.info__value:hover {
  text-decoration: underline;
}

/* --- Quote form ---------------------------------------------------------- */
.quote__card {
  width: 605px;
  flex-shrink: 0;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--c-mist);
}

.quote__form-title {
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
  color: var(--t-on-light);
}

.qform {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.qform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field {
  position: relative;
  display: flex;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: 14px;
  line-height: 14px;
  color: var(--t-on-light);
  transition: border-color .18s ease;
}

.field input,
.field select {
  height: 46px;
}

.field textarea {
  height: 138px;
  line-height: 20px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #6f757c;
}

.field select {
  color: #6f757c;
  -webkit-appearance: none;
  appearance: none;
}

.field select:valid {
  color: var(--t-on-light);
}

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

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
}

.field--select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 1.6px solid #6d737a;
  border-bottom: 1.6px solid #6d737a;
  transform: rotate(45deg);
  pointer-events: none;
}

.qform__submit {
  height: 46px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-blue);
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  color: var(--c-white);
  cursor: pointer;
  transition: background-color .18s ease;
}

.qform__submit:hover {
  background: #1069a7;
}

.qform__submit:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* --- Validation ---------------------------------------------------------- */
.field {
  flex-direction: column;
}

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: #c0261b;
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: #c0261b;
  background: #fff6f5;
}

.field--error .field__error {
  display: block;
}

/* La fleche du select reste alignee sur le champ, pas sur le bloc entier. */
.field--select::after {
  top: 23px;
  margin-top: 0;
}

.qform__resp {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.qform__resp--error {
  color: #c0261b;
}

.qform__resp--ok {
  color: #14803a;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */
.site-footer {
  background: var(--c-navy);
  padding-block: var(--section-y);
  color: var(--t-on-dark);
}

.site-footer__top {
  display: flex;
  gap: 48px;
}

.site-footer__brand {
  width: 311px;
  flex-shrink: 0;
}

.site-footer__logo {
  width: 158.96px;
  height: 80px;
  object-fit: contain;
}

.site-footer__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 21.5px;
  color: var(--t-on-dark-60);
}

.site-footer__urgence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-blue);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 287.33px);
  gap: 57px;
  margin-left: auto;
}

.fcol__title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--t-on-dark);
}

.fcol__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.fcol__list li {
  font-size: 14px;
  line-height: 20px;
  color: var(--t-on-dark-75);
}

.fcol__list a:hover {
  color: var(--t-on-dark);
  text-decoration: underline;
}

.fcol__list--icons li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fcol__list--icons img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fcol__list--loose {
  margin-top: 16px;
}

.social {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 32px;
  padding: 0 8px;
  border-radius: var(--r-md);
  background: var(--c-navy-surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--t-on-dark);
  transition: background-color .18s ease;
}

.social:hover {
  background: #2a3d52;
}

.social img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 53px;
  margin-top: 48px;
  padding-top: 33px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer__mark {
  width: 67px;
  height: 21.67px;
  object-fit: contain;
}

.site-footer__copy {
  font-size: 14px;
  line-height: 20px;
  color: var(--t-on-dark-60);
}

/* --- Touch devices: no hover, so the copy is always shown ----------------- */
@media (hover: none) {
  .scard {
    height: auto;
    min-height: 400px;
  }

  .scard__reveal {
    grid-template-rows: 1fr;
  }

  .scard__reveal-inner {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   17. Responsive — large desktop → tablet
   ========================================================================== */
@media (max-width: 1600px) {
  .hero__title {
    font-size: 56px;
    line-height: 62px;
  }

  .hero__copy {
    width: 640px;
  }

  .founder {
    width: 480px;
  }

  .about__media {
    width: 46%;
  }

  .mainservice__content,
  .benefits__content {
    width: 52%;
  }

  .compare {
    width: 54%;
    height: auto;
    aspect-ratio: 810 / 636;
  }

  .zones__content {
    width: 48%;
  }

  .quote__content {
    width: 54%;
  }

  .quote__card {
    width: 44%;
  }

  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    flex: 1 1 auto;
  }
}

@media (max-width: 1280px) {
  :root {
    --section-y: 56px;
  }

  .feature {
    height: auto;
    min-height: 56px;
  }

  .founder {
    height: auto;
  }

  .site-nav__list {
    gap: 14px;
    font-size: 15px;
  }

  .link-phone {
    padding: 10px 14px;
  }

  .btn--sm {
    padding: 10px 16px;
  }

  .hero {
    min-height: 820px;
  }

  .hero__title {
    font-size: 46px;
    line-height: 54px;
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
  }

  .hero__copy,
  .founder {
    width: 100%;
    max-width: 640px;
  }

  .trustbar__list {
    flex-wrap: wrap;
    gap: 20px 32px;
    justify-content: flex-start;
  }

  .section-title {
    font-size: 32px;
    line-height: 42px;
  }

  .section-title--tight {
    line-height: 40px;
  }

  .about__grid,
  .mainservice__grid,
  .benefits__grid,
  .gallery__grid,
  .zones__grid,
  .quote__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .about__media,
  .mainservice__content,
  .mainservice__media,
  .benefits__content,
  .benefits__media,
  .compare,
  .zones__content,
  .zones__map,
  .quote__content,
  .quote__card {
    width: 100%;
  }

  .about__media {
    min-height: 520px;
  }

  .mainservice__media {
    height: 560px;
  }

  .thumb {
    left: auto;
    right: 24px;
  }

  .compare {
    height: auto;
    aspect-ratio: 810 / 636;
  }

  .zones__map {
    height: 420px;
  }

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

  .scard,
  .scard--4,
  .scard--5 {
    grid-column: span 1;
  }


  .site-footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .site-footer__cols {
    margin-left: 0;
  }
}

/* --- Collapsible header: the inline nav stops fitting below this width ---- */
@media (max-width: 1180px) {
  .site-header {
    position: sticky;
    height: auto;
    background: var(--c-navy);
  }

  .site-header__inner {
    height: 72px;
    margin-top: 0;
    gap: 16px;
  }

  .site-header__logo img {
    width: 128px;
    height: 64px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero {
    padding-top: 0;
  }

  .site-header__collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-height: 0;
    padding: 0 var(--gutter);
    background: var(--c-navy);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease, visibility 0s .35s;
  }

  .site-header.is-stuck .site-header__collapse {
    background: var(--c-white);
  }

  .site-header.is-open .site-header__collapse {
    max-height: min(70vh, 520px);
    padding: 16px var(--gutter) 24px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease, visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    white-space: normal;
  }

  .site-nav__list a {
    display: block;
    padding: 11px 0 11px 12px;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }

  .site-nav__list a:hover,
  .site-nav__list a[aria-current] {
    border-left-color: var(--c-blue);
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .site-header.is-stuck .site-header__actions {
    border-top-color: rgba(12, 29, 48, .12);
  }

  .link-phone {
    display: flex;
    justify-content: center;
    height: 48px;
  }

  .site-header__actions .btn--sm {
    min-height: 48px;
  }
}

/* ==========================================================================
   18. Responsive — mobile
   ========================================================================== */
@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --section-y: 48px;
  }

  section[id] {
    scroll-margin-top: 24px;
  }

  .hero {
    min-height: 0;
    padding-block: 56px;
  }

  .hero__inner {
    padding-block: 0;
  }

  .hero__title {
    font-size: 34px;
    line-height: 42px;
  }

  .hero__badge {
    font-size: 13px;
    line-height: 20px;
    padding: 6px 12px;
  }

  .hero__lede {
    font-size: 16px;
  }

  .hero__cta {
    width: 100%;
    padding-bottom: 0;
  }

  .hero__cta .btn {
    flex: 1 1 220px;
  }

  .founder__body {
    padding: 20px;
    gap: 20px;
  }

  .founder__quote {
    font-size: 15px;
    line-height: 22px;
  }

  .trustbar__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-block: 24px;
  }

  .trustbar__item {
    font-size: 16px;
  }

  .section-title {
    font-size: 26px;
    line-height: 34px;
  }

  .section-title--tight {
    line-height: 34px;
  }

  .eyebrow {
    font-size: 16px;
    line-height: 12px;
  }

  .about__media {
    min-height: 380px;
  }

  .seal {
    right: 16px;
    bottom: 16px;
    transform: scale(.78);
    transform-origin: bottom right;
  }

  .mainservice__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .thumb {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    display: none;
  }

  .services__grid,
  .gallery__thumbs {
    grid-template-columns: 1fr;
  }

  .scard {
    height: 320px;
    padding: 120px 24px 24px;
  }

  .gthumb {
    height: 240px;
  }

  .zones__list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: 12px;
  }

  .zones__map {
    height: 300px;
  }

  .quote__grid {
    gap: 32px;
  }

  .quote__card {
    padding: 20px;
  }

  .quote__form-title {
    font-size: 20px;
    line-height: 28px;
  }

  .qform__row {
    grid-template-columns: 1fr;
  }

  .quote__scrim {
    background: linear-gradient(180deg, rgba(4, 12, 22, .9) 0%, rgba(4, 12, 22, .84) 100%);
  }

  .compare__badge {
    font-size: 12px;
    padding: 4px 12px;
  }

  .compare__handle {
    width: 36px;
    height: 36px;
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer__bottom {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 8px;
  }
}

/* ==========================================================================
   19. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}