/*
Theme Name: BIOTECH-AFRIKA
Theme URI: https://biotech-afrika.example
Author: BIOTECH-AFRIKA SARL
Description: Thème vitrine fluide et animé pour BIOTECH-AFRIKA — vente & location d’engins, BTP, génie civil, architecture, hydraulique et construction métallique.
Version: 2.1.3
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: biotech-afrika
*/

:root {
  --navy: #071a2e;
  --navy-deep: #04111f;
  --blue: #0c4f7a;
  --green: #1f8a45;
  --lime: #8fc63a;
  --yellow: #f0c400;
  --accent: #e8a317;
  --orange: #e8a317;
  --cream: #eef3f7;
  --red: #c81e2e;
  --mist: #eef3f7;
  --ink: #132230;
  --muted: #5b6b78;
  --white: #fff;
  --border: rgba(7, 26, 46, .12);
  --shadow: 0 22px 60px rgba(4, 17, 31, .14);
  --radius: 20px;
  --container: min(1180px, calc(100% - 40px));
  --font-display: "Syne", "Manrope", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(143, 198, 58, .08), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(12, 79, 122, .08), transparent 50%),
    var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.screen-reader-text:focus { z-index: 9999; top: 8px; left: 8px; width: auto; height: auto; padding: 12px; clip: auto; background: white; color: var(--navy); }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 96px 0; }
.section--soft { background: var(--mist); }
.section--cream { background: var(--cream); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 32px; height: 3px; border-radius: 9px; background: var(--orange); }
.section-title {
  max-width: 760px;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.section-lead { max-width: 720px; margin: 22px 0 0; color: var(--muted); font-size: 19px; }
.section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 48px; }
.section-head .section-lead { max-width: 480px; }

.btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--orange);
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(239, 139, 44, .28); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--outline { border-color: rgba(255,255,255,.42); background: transparent; color: var(--white); }
.btn--outline-dark { border-color: var(--border); background: transparent; color: var(--navy); }
.btn--whatsapp {
  gap: 10px;
  border-color: #1fad4c;
  background: #25d366;
  color: #06351a;
}
.btn--whatsapp:hover { box-shadow: 0 12px 28px rgba(37, 211, 102, .32); }
.btn--whatsapp-light {
  border-color: rgba(255,255,255,.28);
  background: rgba(37, 211, 102, .92);
  color: #06351a;
}
.btn-whatsapp-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}
.service-detail-actions,
.service-cta-actions,
.contact-whatsapp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.service-detail-copy .check-list { margin-bottom: 0; }
.whatsapp-float {
  position: fixed;
  z-index: 1200;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 40px rgba(18, 140, 70, .38);
  font-weight: 800;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: whatsappPulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 46px rgba(18, 140, 70, .48);
  animation: none;
}
.whatsapp-float-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.whatsapp-float-label { white-space: nowrap; }
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(18, 140, 70, .38); }
  50% { box-shadow: 0 14px 40px rgba(18, 140, 70, .55), 0 0 0 12px rgba(37, 211, 102, .16); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}
.text-link { color: var(--green); font-weight: 800; }
.text-link::after { content: " →"; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(9,36,61,.94);
  color: var(--white);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; }
.brand-logo {
  width: auto;
  max-height: 64px;
  border-radius: 10px;
  background: transparent;
}
.brand-text { display: none; }
.brand--footer .brand-text { display: none; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
.brand-tag {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand--footer .brand-logo { max-height: 72px; }
.custom-logo-link { display: none; }
.custom-logo { width: auto; max-height: 58px; }
.main-nav ul { display: flex; align-items: center; gap: 27px; margin: 0; padding: 0; list-style: none; }
.main-nav a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; transition: color .2s; }
.main-nav a:hover, .main-nav .current-menu-item a { color: var(--white); }
.header-cta { min-height: 44px; padding: 10px 18px; }
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
}

.hero-carousel {
  position: relative;
  min-height: clamp(560px, 82vh, 780px);
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
}
.hero-carousel-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.hero-slide-media {
  position: absolute;
  inset: 0;
}
.hero-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.04);
  transition: transform 8s linear;
}
.hero-slide.is-active .hero-slide-media img {
  transform: scale(1);
  animation: heroKenBurns 12s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 0 110px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 17, 31, .94) 0%, rgba(4, 17, 31, .78) 48%, rgba(4, 17, 31, .35) 100%),
    linear-gradient(180deg, rgba(4, 17, 31, .45) 0%, transparent 30%, rgba(4, 17, 31, .78) 100%);
}
.hero-slide-inner {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand-signal {
  margin: 0 0 14px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  overflow: visible;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}
.eyebrow--light { color: #c8e89a; }
.eyebrow--light::before { background: var(--yellow); }
.hero-title {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.8vw, 58px);
  line-height: 1.12;
  letter-spacing: -.04em;
  overflow: visible;
}
.hero-copy {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-carousel-ui {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 22px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.hero-carousel-footer {
  flex: 1;
  margin-top: 0;
}
.hero-carousel .carousel-button {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: var(--white);
  backdrop-filter: blur(10px);
}
.hero-carousel .carousel-button:hover,
.hero-carousel .carousel-button:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy);
}
.hero-carousel .carousel-dot { background: rgba(255,255,255,.35); }
.hero-carousel .carousel-dot.is-active { background: var(--yellow); }
.hero-carousel .carousel-progress { background: rgba(255,255,255,.18); }
.hero-carousel .carousel-progress span { background: var(--yellow); }
.hero-carousel .carousel-count { color: rgba(255,255,255,.7); }
.hero-carousel .carousel-count strong { color: var(--white); }

.flagship-section {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 90% 20%, rgba(232, 163, 23, .14), transparent 60%),
    linear-gradient(180deg, #f5f8fb, #eef3f7 60%, #fff);
}
.flagship-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}
.flagship-copy .section-title { max-width: 640px; }
.flagship-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--navy);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.flagship-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 55%, rgba(4, 17, 31, .72));
  pointer-events: none;
}
.flagship-visual img {
  width: 100%;
  height: clamp(360px, 48vw, 560px);
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.flagship-visual:hover img { transform: scale(1.04); }
.flagship-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 22px;
  left: 24px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 600;
}
.service-card--featured {
  border-color: rgba(232, 163, 23, .45);
  box-shadow: 0 18px 50px rgba(232, 163, 23, .16);
}
.service-badge,
.service-flag {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-detail--flagship {
  border-top: 0;
  padding-top: 40px;
  margin-top: 20px;
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(232, 163, 23, .1), transparent 70%);
  border-radius: 28px;
}
.service-flag {
  top: auto;
  bottom: 18%;
  left: 18px;
  right: auto;
}

.stats { position: relative; z-index: 5; margin-top: -36px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.stat { padding: 30px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; color: var(--navy); font-size: 34px; line-height: 1; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }

.partners-marquee-section {
  padding: 72px 0 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f3f7fa 100%);
}
.partners-marquee-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 36px;
}
.partners-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-marquee-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: partnersScroll 32s linear infinite;
}
.partners-marquee.is-paused .partners-marquee-track,
.partners-marquee:hover .partners-marquee-track {
  animation-play-state: paused;
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-marquee-track { animation: none; }
}
.partner-logo-item {
  display: grid;
  flex: 0 0 auto;
  width: 240px;
  min-height: 118px;
  place-items: center;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 28px rgba(7, 26, 46, .05);
  color: var(--navy);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.partner-logo-item:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 138, 69, .35);
  box-shadow: var(--shadow);
}
.partner-logo-item img {
  width: 100%;
  max-width: 200px;
  height: 56px;
  object-fit: contain;
}
.partner-logo-item span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-hero--partners {
  background:
    linear-gradient(115deg, rgba(5,29,47,.97), rgba(12,79,122,.78)),
    url("assets/images/pdf/p14-01-atelier-montage-fabrication.jpg") center 40% / cover;
}
.partners-page-section { background: var(--mist); }
.partners-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.partner-card {
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 12px 36px rgba(7, 26, 46, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.partner-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.partner-card-logo {
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #f4f7fa;
}
.partner-card-logo img {
  width: 100%;
  max-width: 220px;
  height: 72px;
  object-fit: contain;
}
.partner-card-name {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 22px;
}
.partner-card-link {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}
.partner-card-link--muted { color: var(--muted); font-weight: 600; }

.gallery-showcase {
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
  background: var(--white);
}
.gallery-showcase::before {
  position: absolute;
  top: 5%;
  right: -11vw;
  width: 36vw;
  height: 36vw;
  border: 1px solid rgba(29,123,84,.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.gallery-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 40px; }
.carousel-actions { display: flex; gap: 10px; }
.carousel-button {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 21px;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s, border-color .2s;
}
.carousel-button:hover, .carousel-button:focus-visible {
  border-color: var(--green);
  outline: none;
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.work-carousel {
  overflow: hidden;
  border-radius: 28px;
  outline: none;
}
.carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  position: relative;
  flex: 0 0 clamp(300px, 53vw, 690px);
  height: clamp(390px, 48vw, 570px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--navy);
  scroll-snap-align: start;
  isolation: isolate;
}
.carousel-slide::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 28%, rgba(5,27,44,.92) 100%);
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.carousel-slide.is-active img { transform: scale(1.035); }
.carousel-caption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(24px, 4vw, 42px);
  color: var(--white);
}
.carousel-caption span { color: #c4e49c; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.carousel-caption h3 { margin: 8px 0 6px; font-size: clamp(25px, 3vw, 39px); line-height: 1.08; letter-spacing: -.025em; }
.carousel-caption p { max-width: 540px; margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.carousel-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 26px; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #cbd6d6;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.carousel-dot.is-active { width: 28px; background: var(--green); }
.carousel-progress { position: relative; height: 2px; overflow: hidden; background: var(--border); }
.carousel-progress span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .35s ease; }
.carousel-count { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.carousel-count strong { color: var(--navy); font-size: 18px; }

.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 80px; }
.about-visual { position: relative; min-height: 560px; }
.about-shape {
  position: absolute;
  inset: 0 10% 8% 0;
  overflow: hidden;
  border-radius: 180px 26px 26px 26px;
  background: var(--navy);
}
.about-shape::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(145deg, transparent 45%, rgba(9,36,61,.52));
}
.about-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.about-visual:hover .about-shape img {
  transform: scale(1.045);
}
.about-card {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 285px;
  padding: 26px;
  border-radius: 20px;
  background: var(--orange);
  color: var(--navy);
  box-shadow: var(--shadow);
}
.about-card strong { display: block; font-size: 22px; line-height: 1.2; }
.about-card span { display: block; margin-top: 9px; font-size: 14px; }
.check-list { display: grid; gap: 13px; margin: 30px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before {
  position: absolute;
  top: 3px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(29,123,84,.12);
  color: var(--green);
  content: "✓";
  font-size: 13px;
  font-weight: 900;
}

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  position: relative;
  display: block;
  min-height: 430px;
  padding: 0 28px 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-7px); border-color: rgba(29,123,84,.35); box-shadow: var(--shadow); }
.service-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}
.service-detail {
  scroll-margin-top: 100px;
}
.service-media { height: 205px; margin: 0 -28px 0; overflow: hidden; background: var(--navy); }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .service-media img { transform: scale(1.07); }
.service-number { position: absolute; z-index: 2; top: 16px; right: 20px; color: rgba(255,255,255,.85); font-size: 35px; font-weight: 900; line-height: 1; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.service-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  place-items: center;
  border-radius: 16px;
  border: 5px solid var(--white);
  background: var(--mist);
  color: var(--green);
  font-size: 25px;
}
.service-card h3 { margin: 18px 0 10px; color: var(--navy); font-size: 23px; line-height: 1.2; }
.service-card p { margin: 0; color: var(--muted); font-size: 15px; }
.service-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.btn--whatsapp-compact {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
.services-more { margin: 35px 0 0; text-align: center; }

.projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.project-card {
  position: relative;
  grid-column: span 4;
  min-height: 410px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.project-card:first-child, .project-card:nth-child(5) { grid-column: span 8; }
.project-art { position: absolute; inset: 0; transition: transform .45s ease; }
.project-art--bridge { background: linear-gradient(155deg, #78a18e, #183f53 60%, #09243d); }
.project-art--bridge::after { position:absolute; right:-8%; bottom:22%; width:115%; height:34%; border:18px solid rgba(255,255,255,.62); border-radius:50%; content:""; }
.project-art--hangar { background: linear-gradient(145deg, #c5844c, #3e5e67 60%, #142d3e); }
.project-art--hangar::after { position:absolute; inset:25% 13% 0; background:rgba(255,255,255,.54); clip-path:polygon(50% 0,100% 26%,92% 26%,92% 100%,8% 100%,8% 26%,0 26%); content:""; }
.project-art--school { background: linear-gradient(145deg, #85b474, #267188 55%, #12334c); }
.project-art--school::after { position:absolute; inset:30% 12% 0; background:rgba(255,255,255,.63); clip-path:polygon(0 20%,50% 0,100% 20%,95% 25%,95% 100%,5% 100%,5% 25%); content:""; }
.project-art--water { background: radial-gradient(circle at 70% 25%, #9fd2dc, transparent 22%), linear-gradient(145deg, #7cb68a, #17688a 60%, #0b334e); }
.project-art--water::after { position:absolute; right:20%; bottom:18%; width:90px; height:190px; border:16px solid rgba(255,255,255,.62); border-radius:50% 50% 12px 12px; content:""; }
.project-card:hover .project-art { transform: scale(1.05); }
.project-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.project-card:hover .project-image { transform: scale(1.065); filter: saturate(1.08); }
.project-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 28px; background: linear-gradient(transparent 30%, rgba(5,25,40,.92)); }
.project-type { color: #c4e49c; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-card h3 { margin: 8px 0 5px; font-size: 24px; line-height: 1.15; }
.project-card p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }

.process { background: var(--navy); color: var(--white); }
.process .section-title { color: var(--white); }
.process .section-lead { color: rgba(255,255,255,.64); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 52px; background: rgba(255,255,255,.12); }
.process-step { position: relative; padding: 34px 26px; background: var(--navy); }
.process-step::after { position: absolute; top: 45px; right: -8px; z-index: 2; content: "→"; color: var(--orange); font-size: 20px; }
.process-step:last-child::after { display: none; }
.process-step strong { display: block; color: var(--orange); font-size: 13px; letter-spacing: .1em; }
.process-step h3 { margin: 16px 0 8px; font-size: 20px; }
.process-step p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; }

.innovation-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
.innovation-box {
  position: relative;
  min-height: 440px;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  background: var(--navy);
  box-shadow: var(--shadow);
}
.innovation-box::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 40%, rgba(5,28,46,.86));
}
.innovation-box img {
  width: 100%;
  height: 490px;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.innovation-box:hover img { transform: scale(1.035); }
.innovation-box figcaption {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 20px;
  left: 25px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}
.notice { margin-top: 23px; padding: 17px 19px; border-left: 4px solid var(--orange); background: var(--cream); color: var(--muted); font-size: 13px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card { padding: 27px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.team-avatar { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 20px; font-weight: 900; }
.team-card h3 { margin: 18px 0 2px; color: var(--navy); font-size: 18px; }
.team-card p { margin: 0; color: var(--green); font-size: 13px; font-weight: 700; }

.contact-section { padding: 95px 0; background: linear-gradient(135deg, var(--cream), #e8f1ec); }
.contact-cta-section {
  padding: 100px 0;
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(12, 79, 122, .08), transparent 70%),
    #f7f9fb;
  text-align: center;
}
.contact-cta-inner {
  max-width: 720px;
  margin-inline: auto;
}
.contact-cta-label {
  margin: 0 0 14px;
  color: #4a90c2;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact-cta-title {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.contact-cta-text {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.contact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.btn--contact-primary {
  border: 0;
  background: linear-gradient(90deg, #3d8fd4 0%, #0a2f6b 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(10, 47, 107, .28);
}
.btn--contact-primary:hover {
  box-shadow: 0 16px 34px rgba(10, 47, 107, .36);
}
.btn--contact-whatsapp {
  border: 1px solid rgba(7, 26, 46, .16);
  background: #fff;
  color: var(--navy);
}
.btn--contact-whatsapp:hover {
  border-color: #25d366;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .18);
}
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
.contact-list { display: grid; gap: 18px; margin-top: 35px; }
.contact-item { display: flex; gap: 15px; align-items: flex-start; }
.contact-item-icon { display: grid; min-width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--white); color: var(--green); }
.contact-item strong { display: block; color: var(--navy); font-size: 14px; }
.contact-item span, .contact-item a { color: var(--muted); font-size: 14px; }
.contact-form { padding: 35px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--navy); font-size: 13px; font-weight: 800; }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fbfcfc;
  padding: 13px 14px;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,123,84,.1); }
.field textarea { min-height: 125px; resize: vertical; }
.form-status { margin: 0 0 18px; padding: 12px 15px; border-radius: 10px; background: #e9f6ed; color: #176642; font-size: 14px; }
.form-status--error { background: #fff0eb; color: #a13e22; }

.site-footer { padding: 70px 0 25px; background: #061a2c; color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 50px; }
.footer-about { max-width: 340px; margin: 20px 0 0; color: rgba(255,255,255,.58); font-size: 14px; }
.footer-title { margin: 0 0 18px; color: var(--white); font-size: 15px; }
.footer-links { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-links span { color: rgba(255,255,255,.58); font-size: 14px; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 55px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.45); font-size: 12px; }
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-credit:hover {
  border-color: rgba(232, 163, 23, .55);
  background: rgba(232, 163, 23, .1);
  color: #fff;
}
.footer-credit-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.footer-credit strong {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.page-hero { padding: 90px 0; background: linear-gradient(130deg, var(--navy), #126573); color: var(--white); }
.page-hero h1 { max-width: 800px; margin: 0; font-size: clamp(42px, 6vw, 70px); line-height: 1; letter-spacing: -.04em; }
.page-hero p:not(.eyebrow) { max-width: 720px; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: 19px; }
.page-hero--services {
  background:
    linear-gradient(115deg, rgba(5,29,47,.97), rgba(7,70,70,.84)),
    url("assets/images/pdf/p14-01-atelier-montage-fabrication.jpg") center 44% / cover;
}
.page-hero--projects {
  background:
    linear-gradient(115deg, rgba(5,29,47,.97), rgba(7,52,65,.76)),
    url("assets/images/pdf/p16-01-pont-mixte-rn12-tshela.jpg") center 48% / cover;
}
.page-content { width: min(850px, calc(100% - 40px)); margin: 0 auto; padding: 80px 0; }
.page-content h2, .page-content h3 { color: var(--navy); }
.page-content a { color: var(--green); text-decoration: underline; }
.alignwide { max-width: 1180px; margin-right: auto; margin-left: auto; }

.service-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 75px; }
.service-intro-grid .section-lead { margin-top: 0; }
.service-intro-grid .btn { margin-top: 25px; }
.services-catalog { padding: 25px 0 110px; }
.service-detail {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: clamp(45px, 7vw, 95px);
  padding: 82px 0;
  border-top: 1px solid var(--border);
}
.service-detail--reverse .service-detail-media { order: 2; }
.service-detail-media { position: relative; min-height: 570px; padding: 0 12% 13% 0; }
.service-detail-main {
  width: 100%;
  height: 500px;
  border-radius: 180px 24px 24px 24px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.service-detail-thumbs {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 48%;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 9px;
  border-radius: 19px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.service-detail-thumbs img { width: 100%; height: 120px; border-radius: 12px; object-fit: cover; }
.service-detail-number {
  position: absolute;
  top: 25px;
  right: 5%;
  color: rgba(255,255,255,.95);
  font-size: 45px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.service-detail-copy h2 { margin: 0; color: var(--navy); font-size: clamp(32px, 4vw, 49px); line-height: 1.06; letter-spacing: -.035em; }
.service-detail-copy > p:not(.eyebrow) { color: var(--muted); }
.service-detail-copy .service-detail-lead { margin: 22px 0 12px; color: var(--green); font-size: 19px; font-weight: 750; line-height: 1.45; }
.service-detail-copy .check-list { margin-bottom: 0; }
.service-cta { padding: 80px 0; background: var(--navy); color: var(--white); }
.service-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.service-cta h2 { max-width: 760px; margin: 0; font-size: clamp(32px, 4.4vw, 55px); line-height: 1.05; letter-spacing: -.035em; }
.service-cta .eyebrow { color: #c4e49c; }

.projects-catalog-section { background: var(--mist); }
.project-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 40px; }
.project-filter {
  min-height: 42px;
  padding: 8px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.project-filter:hover, .project-filter:focus-visible, .project-filter.is-active { border-color: var(--green); outline: none; background: var(--green); color: var(--white); }
.project-catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.project-catalog-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 10px 35px rgba(9,36,61,.06);
  transition: transform .28s ease, box-shadow .28s ease;
}
.project-catalog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.project-catalog-card[hidden] { display: none; }
.project-catalog-media { position: relative; height: 245px; overflow: hidden; background: var(--navy); }
.project-catalog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.project-catalog-card:hover .project-catalog-media img { transform: scale(1.07); }
.project-catalog-media span { position: absolute; bottom: 15px; left: 15px; padding: 7px 11px; border-radius: 99px; background: rgba(9,36,61,.86); color: var(--white); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); }
.project-catalog-body { padding: 25px; }
.project-meta { margin: 0; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-catalog-body h3 { margin: 10px 0 10px; color: var(--navy); font-size: 22px; line-height: 1.2; }
.project-catalog-body > p:not(.project-meta) { margin: 0; color: var(--muted); font-size: 14px; }
.project-client { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.project-client strong { color: var(--navy); }

.photo-portfolio { padding: 110px 0; overflow: hidden; }
.photo-portfolio-head { max-width: 820px; margin-bottom: 75px; }
.portfolio-group { padding: 58px 0; border-top: 1px solid var(--border); }
.portfolio-group-head { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.portfolio-group-head > div { display: grid; grid-template-columns: 48px 1fr; max-width: 780px; column-gap: 18px; }
.portfolio-index { grid-row: 1 / 3; margin: 2px 0 0; color: var(--orange); font-size: 14px; font-weight: 900; letter-spacing: .08em; }
.portfolio-group-head h3 { margin: 0; color: var(--navy); font-size: clamp(25px, 3vw, 37px); line-height: 1.1; letter-spacing: -.025em; }
.portfolio-group-head p:not(.portfolio-index) { grid-column: 2; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.portfolio-group-head > span { padding: 7px 12px; border-radius: 99px; background: var(--mist); color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.portfolio-masonry { columns: 4 240px; column-gap: 14px; }
.portfolio-thumb {
  position: relative;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 0;
  border-radius: 14px;
  background: var(--navy);
  cursor: zoom-in;
}
.portfolio-thumb img { width: 100%; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.portfolio-thumb > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--navy);
  opacity: 0;
  transform: translateY(5px);
  transition: .25s;
}
.portfolio-thumb:hover img { transform: scale(1.045); opacity: .82; }
.portfolio-thumb:hover > span, .portfolio-thumb:focus-visible > span { opacity: 1; transform: translateY(0); }
.portfolio-thumb:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.image-lightbox {
  width: min(1100px, calc(100% - 28px));
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #061521;
  color: var(--white);
  box-shadow: 0 30px 100px rgba(0,0,0,.6);
}
.image-lightbox::backdrop { background: rgba(2,13,22,.86); backdrop-filter: blur(8px); }
.image-lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }
.image-lightbox p { margin: 0; padding: 15px 22px; color: rgba(255,255,255,.72); font-size: 13px; }
.lightbox-close { position: absolute; z-index: 2; top: 13px; right: 13px; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(5,25,40,.78); color: white; font-size: 26px; cursor: pointer; backdrop-filter: blur(6px); }

@media (max-width: 1024px) {
  .main-nav { position: fixed; inset: 82px 0 auto; display: none; padding: 24px 20px 35px; background: var(--navy); }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; }
  .main-nav a { font-size: 18px; }
  .menu-toggle { display: block; }
  .header-cta { display: none; }
  .hero-inner, .about-grid, .innovation-grid, .contact-grid, .flagship-grid { grid-template-columns: 1fr; }
  .partners-marquee-head { flex-direction: column; align-items: flex-start; }
  .partners-page-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-carousel {
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .hero-carousel-track {
    position: relative;
    inset: auto;
    min-height: 0;
  }
  .hero-slide {
    position: relative;
    inset: auto;
    display: none;
    min-height: 0;
  }
  .hero-slide.is-active {
    display: block;
  }
  .hero-slide-media {
    position: relative;
    inset: auto;
    height: min(42vh, 320px);
  }
  .hero-slide-overlay {
    position: relative;
    inset: auto;
    display: block;
    align-items: stretch;
    padding: 28px 0 96px;
    overflow: visible;
    background: linear-gradient(180deg, #04111f 0%, #071a2e 100%);
  }
  .hero-slide-inner {
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .brand-signal { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
  .hero-title { font-size: 28px; line-height: 1.18; }
  .hero-copy { font-size: 15px; margin-top: 12px; }
  .hero-actions { margin-top: 18px; }
  .hero-carousel-ui {
    bottom: 16px;
    flex-wrap: wrap;
  }
  .hero-carousel-ui .carousel-actions { order: 1; }
  .hero-carousel-footer { order: 2; width: 100%; }
  .gallery-showcase { padding: 100px 0 80px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card, .project-card:first-child, .project-card:nth-child(5) { grid-column: span 6; }
  .process-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after { display: none; }
  .service-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .service-detail { grid-template-columns: 1fr; }
  .service-detail--reverse .service-detail-media { order: initial; }
  .service-detail-media { max-width: 760px; }
  .project-catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --container: min(100% - 28px, 1180px); --radius: 18px; }
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .brand-tag { display: none; }
  .partners-page-grid { grid-template-columns: 1fr; }
  .partner-logo-item { width: 200px; min-height: 104px; }
  .partners-marquee-track { animation-duration: 26s; }
  .hero-slide-media { height: min(38vh, 260px); }
  .hero-slide-overlay { padding: 22px 0 88px; }
  .brand-signal { font-size: 20px; }
  .hero-title { font-size: 24px; }
  .hero-copy { font-size: 14px; }
  .flagship-visual img { height: 320px; }
  .hero { min-height: auto; }
  .hero-inner { gap: 42px; padding: 70px 0 90px; }
  .hero-panel { padding: 16px; }
  .hero-visual { min-height: 300px; }
  .stats { margin-top: -28px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 22px; border-bottom: 1px solid var(--border); }
  .stat:nth-child(2) { border-right: 0; }
  .gallery-showcase { padding: 82px 0 68px; }
  .gallery-head { align-items: center; }
  .gallery-head .section-title { font-size: 38px; }
  .carousel-button { width: 46px; height: 46px; }
  .carousel-slide { flex-basis: 88%; height: 440px; }
  .carousel-footer { grid-template-columns: 1fr auto; }
  .carousel-progress { display: none; }
  .carousel-caption p { display: none; }
  .section-head { display: block; }
  .about-grid { gap: 45px; }
  .about-visual { min-height: 430px; }
  .services-grid, .team-grid { grid-template-columns: 1fr; }
  .project-card, .project-card:first-child, .project-card:nth-child(5) { grid-column: 1 / -1; min-height: 350px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
  .service-detail { padding: 62px 0; }
  .service-detail-media { min-height: 440px; padding: 0 8% 14% 0; }
  .service-detail-main { height: 390px; border-radius: 100px 20px 20px 20px; }
  .service-detail-thumbs { width: 54%; }
  .service-detail-thumbs img { height: 90px; }
  .service-cta-inner { align-items: flex-start; flex-direction: column; }
  .whatsapp-float-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .whatsapp-float { width: 58px; height: 58px; min-height: 58px; padding: 0; justify-content: center; border-radius: 50%; }
  .whatsapp-float-icon { width: 100%; height: 100%; background: transparent; }
  .project-catalog-grid { grid-template-columns: 1fr; }
  .project-catalog-media { height: 270px; }
  .portfolio-group-head { flex-direction: column; }
  .portfolio-masonry { columns: 2 145px; column-gap: 10px; }
  .portfolio-thumb { margin-bottom: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}