/* CoPro Concept — rebuilt from the live Elementor site.
   Every size below is ported from the live site's generated Elementor CSS
   (post-2 = home, post-33 = header, post-37 = footer, post-7 = kit) and its
   @media (max-width:1024px) / (max-width:767px) blocks, then checked against
   getComputedStyle + bounding boxes at 1440 / 768 / 375 (verify/geo.mjs).

   Elementor container model, reproduced here so the percentages land exactly:
   - "full width" containers put their % padding on the section itself
     (% of the viewport width).
   - "boxed" containers centre a 1240px inner box and put their vertical %
     padding on that inner box, i.e. % of (viewport - 2 x 5%) = 0.9 x %.
     We reproduce that with calc(0.9 * N%) and
     padding-inline: max(5%, (100% - 1240px) / 2).
   - Row gap 30px / column gap 60px everywhere unless a section overrides it.
   - Text-editor blocks keep the trailing 14.4px paragraph margin. */

/* ---------- fonts (self-hosted, exact files served by the original) ---------- */
@font-face {
  font-family: 'Columbia Sans W';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/Columbia-Sans-W-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Columbia Sans W';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Columbia-Sans-W-Light-1.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Maxima Nouva';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/MaximaNouva-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Maxima Nouva';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/MaximaNouva-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Columbia Sans W Disp';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/Columbia-Sans-W-Disp-XLight.woff2') format('woff2');
  font-display: swap;
}

/* ---------- design tokens, straight from the Elementor kit ---------- */
:root {
  --color-primary: #242E2A;      /* dark green: section bg + headings on light bg */
  --color-text: #2C2C2C;
  --color-cream: #F6F1EB;        /* interventions bg + form underline colour */
  --color-accent: #A88C7A;
  --color-white: #FFFFFF;

  --font-display: 'Columbia Sans W Disp', sans-serif;  /* big headings */
  --font-heading: 'Columbia Sans W', sans-serif;       /* footer link lists */
  --font-body: 'Maxima Nouva', sans-serif;

  /* Elementor kit: container max width 1240px on desktop. */
  --boxed: 1240px;

  /* Elementor's motion_fx "speed" is not literal pixels: measured amplitude at
     plateau = 75 * speed (confirmed against the live site: speed 0.5 -> 37.5px).
     Keep that single multiplier here so retuning every parallax image is one line. */
  --motion-fx-range-factor: 75;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;               /* kit text size: 13px desktop, 11px <=1024 */
  font-weight: 400;
  line-height: 1.5em;
  color: var(--color-text);
  background: var(--color-white);
  /* Live theme sets antialiased smoothing; without it macOS renders every
     light weight visibly bolder than the original. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }
p { margin: 0 0 14.4px; }        /* kit: 0.9rem, kept on the last paragraph too */
ul { margin: 0; padding-left: 40px; }      /* live text-editor lists: no block margin */
a { color: inherit; text-decoration: none; }

/* Kit heading scale (em of the 13px / 11px body size) */
h2.disp-h2 { font-family: var(--font-display); font-size: 2.7em; font-weight: 200; line-height: 1.2em; }
h3.disp-h3 { font-family: var(--font-display); font-size: 2em; font-weight: 200; line-height: 1; }
.eyebrow { text-transform: uppercase; }

/* Pill button (kit button: 0.9em, 1.1em line, 0.6px tracking, 2px border) */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.6px;
  line-height: 1.1em;
  text-transform: uppercase;
  padding: 6px 30px;
  border-radius: 100px;
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.btn:hover, .btn:focus { background: var(--color-primary); color: var(--color-white); }
.btn--invert { border-color: var(--color-white); color: var(--color-primary); background: var(--color-white); }
.btn--invert:hover, .btn--invert:focus { background: var(--color-primary); color: var(--color-white); border-color: var(--color-white); }

.container { max-width: 1440px; margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================== HEADER (shared, template 33) =========================== */
.site-header {
  /* Live site: the header sits in NORMAL FLOW (reserving 100px) until the Elementor
     "sticky" effect switches it to fixed on scroll. The hero section then cancels
     that reserved space with margin-top:-100px so its background bleeds up behind
     the transparent header. */
  position: relative; top: 0; left: 0; width: 100%; z-index: 999;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 100px; padding: 0 2%;
  background: transparent;
  transition: background-color .3s;
}
.site-header.is-stuck { position: fixed; background: var(--color-white); }
.site-header.is-stuck .btn { border-color: var(--color-primary); color: var(--color-primary); }
/* Measured live: the header's wordmark is display:none until the header goes
   sticky on scroll - the brand is already shown via the big stacked mark in the hero. */
.site-header__logo { display: none; }
.site-header.is-stuck .site-header__logo { display: block; }
.site-header__logo img { width: 180px; }
/* Right-hand column (30% wide on live, content pushed to its right edge): the
   CONTACT button + hamburger always sit top RIGHT, even while the logo is hidden. */
.site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 40px; margin-left: auto; }
/* Header CTA: white outline on the transparent header, fills white on hover. */
.site-header .btn { border-color: var(--color-white); color: var(--color-white); }
.site-header .btn:hover, .site-header .btn:focus { background: var(--color-white); color: var(--color-primary); }

/* Hamburger (hamburgers.css "collapse" pattern used by the live site) */
.hamburger {
  display: inline-block; padding: 8px; background: transparent; border: 0; margin: 0; cursor: pointer;
  position: relative; z-index: 1000; overflow: visible;
}
.hamburger:hover { opacity: .7; }
.hamburger-box { width: 40px; height: 24px; position: relative; display: block; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  display: block; left: 0;
  width: 40px; height: 3px; border-radius: 4px; position: absolute;
  background: #ffffff; transition: all .2s ease;
}
.site-header.is-stuck .hamburger-inner,
.site-header.is-stuck .hamburger-inner::before,
.site-header.is-stuck .hamburger-inner::after { background: var(--color-primary); }
.hamburger-inner { top: 50%; margin-top: -2px; }
.hamburger-inner::before { content: ''; top: -10px; }
.hamburger-inner::after { content: ''; top: auto; bottom: -10px; }
.hamburger.is-active .hamburger-inner { transform: translateY(-10px) rotate(-45deg); }
.hamburger.is-active .hamburger-inner::before { transform: rotate(-90deg); top: 0; }
.hamburger.is-active .hamburger-inner::after { opacity: 0; top: 0; }
.site-header.is-stuck .hamburger.is-active .hamburger-inner,
.site-header.is-stuck .hamburger.is-active .hamburger-inner::before,
.site-header.is-stuck .hamburger.is-active .hamburger-inner::after { background: #ffffff; }

/* Off-canvas menu: live panel is 600px wide (full width on phones), slides in
   from the right over an rgba(0,0,0,.8) overlay. Closed = visibility:hidden so it
   never paints, takes clicks or widens the page. */
.off-canvas {
  position: fixed; top: 0; right: 0; height: 100%; width: min(600px, 100%);
  background: var(--color-primary);
  z-index: 1001;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.17,.67,.37,.96), visibility 0s linear .4s;
  overflow-y: auto;
}
.off-canvas::before {
  content: ''; position: absolute; inset: 0;
  background: url('../img/footer-02.avif') center center / cover no-repeat;
  opacity: .1;
}
.off-canvas[aria-hidden="false"] {
  visibility: visible; transform: translateX(0);
  transition: transform .4s cubic-bezier(.17,.67,.37,.96), visibility 0s;
}
.off-canvas__overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 1000;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
}
.off-canvas[aria-hidden="false"] ~ .off-canvas__overlay,
.off-canvas__overlay.is-visible { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.off-canvas__inner {
  position: relative; z-index: 1; min-height: 100%;
  padding: 18px 30px 30px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  align-items: center; text-align: center;
}
.off-canvas__logo img { height: 156px; width: auto; }
.off-canvas__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.off-canvas__nav a { font-family: var(--font-display); font-size: 2.7em; line-height: 1.2em; color: #fff; text-transform: uppercase; }
.off-canvas__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; color: #fff;
  font-family: var(--font-heading); font-weight: 200; font-size: 1.3em; line-height: 1.5em; text-transform: uppercase; }
.off-canvas__inner p { margin: 0; color: #fff; }
.off-canvas__social { display: flex; gap: 12px; justify-content: center; }
.off-canvas__social a { color: #fff; }

/* =========================== HERO (8e86588, boxed) =========================== */
.hero {
  position: relative;
  min-height: 90vh;
  margin-top: -100px;
  padding: calc(0.9 * 2%) 5% calc(0.9 * 3%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  background: url('../img/copro-hero-01.avif') center center / cover no-repeat;
  text-align: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-color: #695E5A; opacity: .4; mix-blend-mode: multiply;
  isolation: isolate;
}
.hero__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
/* Icon widget: 180px-tall svg in a 186px line box. */
.hero__mark { display: block; height: 186px; }
.hero__mark img { height: 180px; width: auto; }
/* Heading sits in a 600px boxed container with Elementor's default 10px padding. */
.hero__title {
  color: #fff; width: 100%; max-width: 600px; margin: 10px auto;
  text-shadow: 0 0 5px rgba(0,0,0,.3);
}

/* =========================== ABOUT (105a1c1, full width, dark green) =========================== */
.about {
  background: var(--color-primary);
  padding: 5%;
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
  gap: 30px 60px;
  overflow: hidden;
  color: #fff;
}
.about__text {
  width: 40%; padding: 0 3%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
  text-align: center;
}
.about__text .eyebrow { color: #fff; }
.about__text h3 { color: #fff; max-width: 1000px; }
.about__text p { color: #fff; }
.about__media {
  width: 60%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.about__media img { width: 100%; height: auto; }

/* =========================== INTERVENTIONS (9f671fa, cream) =========================== */
.interventions {
  background: var(--color-cream);
  padding: 5% 5% 5% 0;
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
  gap: 30px 60px;
  overflow: hidden;
}
.interventions__media {
  width: 55%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.interventions__media img { width: 100%; height: auto; }
.interventions__text {
  width: 45%; padding: 0 15% 0 3%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 30px;
}
.interventions__text h2 { color: var(--color-text); }
.interventions__text .btn { align-self: flex-start; }

/* =========================== full-width image band (6d2e3f5) =========================== */
.image-band { overflow: hidden; }
.image-band img { width: 100%; height: auto; display: block; }

/* =========================== SERVICES (749d37c, boxed) =========================== */
.services {
  padding: calc(0.9 * 5%) max(5%, calc((100% - var(--boxed)) / 2)) calc(0.9 * 3%);
  display: flex; flex-wrap: nowrap; gap: 30px 60px; justify-content: center; align-items: flex-start;
  overflow: hidden;
}
.services__title { width: 50%; display: flex; flex-direction: column; align-items: flex-start; }
.services__body { width: 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.services__body .btn { margin: 0; }

/* =========================== service cards / carousel (c5962ea + 0074280) ===========================
   Live: a nested carousel, 1 slide per view, each slide = 2 cards (50% each,
   60px apart). On phones the two cards of a slide stack vertically. The cards are
   a flat CMS repeater here, so the "slides" are grid columns: one row of
   half-width columns on desktop, two rows x full-width columns on phones.
   script.js pages by offsetLeft of every 2nd card, so both layouts just work. */
.carousel-section {
  padding: 0 max(5%, calc((100% - var(--boxed)) / 2)) calc(0.9 * 5%);
}
.carousel { position: relative; overflow: hidden; }
/* Desktop/tablet columns alternate (W+60)/2 and (W-40)/2 wide so that, with the
   card margins below, cards are (W-60)/2 wide, 60px apart inside a slide and the
   next slide starts 10px after the previous one (swiper slides-gap 10px). */
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(50% + 30px) calc(50% - 20px);
  align-items: start;
  transition: transform .5s ease;
}
.card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.card:nth-child(odd) { margin-right: 60px; }
.card:nth-child(even) { margin-right: 10px; }
.card__media { width: 100%; overflow: hidden; }
.card__media img { width: 100%; height: auto; }
.card h5 {
  margin-top: 30px;
  font-family: var(--font-body); font-size: 1.1em; font-weight: 400; line-height: 1em;
  letter-spacing: 1px; text-transform: uppercase; color: var(--color-text);
}
/* Live content quirk, ported as-is: only the FIRST card's text is wrapped in a
   <p> (so it carries the 14.4px paragraph margin); cards 2-4 are bare text. That
   margin is what makes card 1 the tallest and sets the carousel height. */
.card p { margin: 10px 0 0; }
.card:first-child p { margin-bottom: 14.4px; }
/* Elementor nested-carousel arrows: bare 45px chevrons, inside the slide edges,
   centred on the swiper box (widget height minus 30px). */
.carousel__arrow {
  position: absolute; top: calc(50% - 15px); transform: translateY(-50%); z-index: 2;
  width: 45px; height: 45px; padding: 0; margin: 0;
  border: 0; background: transparent; color: rgba(238,238,238,.9);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow svg { width: 45px; height: 45px; fill: currentColor; }

/* =========================== CONTACT (footer part 1, f4014ca boxed @ 900px) =========================== */
.contact-band {
  position: relative;
  background-color: var(--color-primary);
  /* vertical: boxed 5% (= 0.9 x 5% of the viewport); horizontal: content box
     clamps to 900px so the card's own % padding resolves against 900px. */
  padding: calc(0.9 * 5%) max(5%, calc((100% - 900px) / 2));
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  background: url('../img/footer-02.avif') center center / cover no-repeat;
  opacity: .2;
}
/* The card (3b57826): solid green with a soft shadow, 5% / 8% padding. */
.contact-band__inner {
  position: relative; z-index: 1;
  background: var(--color-primary);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  padding: 5% 8%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  transition: transform .3s;
}
.contact-band__inner:hover { transform: translateY(-5px); }
.contact-band h3 { color: #fff; }
.contact-band__intro { color: #fff; margin: 0 0 14.4px; }

/* ---- form (b7138de): underline-only fields, 10px gutters ---- */
.contact-form { width: 100%; text-align: left; }
.contact-form .row { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.contact-form .field { flex: 0 0 50%; max-width: 50%; padding: 0 5px; margin-bottom: 10px; min-width: 0; }
.contact-form .field--third { flex-basis: 33.333%; max-width: 33.333%; }
/* a row holding one field (the message) spans the full width */
.contact-form .field:only-child { flex-basis: 100%; max-width: 100%; }
.contact-form label.visually-hidden { display: block; }
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  display: block; width: 100%; margin: 0;
  font-family: var(--font-body); font-size: 1em; font-weight: 400;
  line-height: 1.4;
  color: #fff;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--color-cream);
  border-radius: 0;
  outline-offset: 0;
}
.contact-form input:not([type="checkbox"]) { min-height: 40px; padding: 8px 16px; }
.contact-form select {
  min-height: 40px; padding: 5px 20px 5px 14px; line-height: 1.5;
  appearance: none; -webkit-appearance: none;
  /* select caret, as Elementor's select wrapper draws it (cream) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23F6F1EB'/%3E%3C/svg%3E") no-repeat right 10px center / 11px 7px;
}
.contact-form select option { color: #000; }
.contact-form textarea { padding: 5px 14px; resize: vertical; }
.contact-form ::placeholder { color: #fff; opacity: 1; }
/* Acceptance: inline checkbox + 12px label on the 13px/1.5 line grid, wrapping
   under the box exactly like Elementor's field-option markup. */
.contact-form .consent { display: block; margin: 0 0 10px; line-height: 1.5em; color: #fff; cursor: pointer; }
.contact-form .consent input { width: 13px; height: 13px; margin: 0; vertical-align: -1px; }
.contact-form .consent span { font-size: 12px; line-height: 12px; }
.contact-form .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-form .cf-turnstile { display: flex; justify-content: center; }
.contact-form .cf-turnstile:not(:empty) { margin-bottom: 10px; }
.contact-form__submit { text-align: center; }
.contact-form__submit .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 30px; }
.contact-form .btn--invert[disabled] { opacity: .6; cursor: default; }
.form-success { color: #fff; max-width: 560px; margin: 0 auto; text-align: center; }

/* =========================== FOOTER (footer part 2, c746c86) =========================== */
.site-footer {
  position: relative;
  background-color: var(--color-primary);   /* solid band, no texture (live) */
  color: #fff;
  padding: 0 max(0px, calc((100% - var(--boxed)) / 2));
  line-height: 1.5em;
}
.site-footer__row {
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
}
.site-footer__contact, .site-footer__legal {
  width: 32%;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--font-heading); font-weight: 200;
  font-size: 1.3em; line-height: 1.5em; text-transform: uppercase;
}
.site-footer__contact { align-items: flex-start; }
.site-footer__legal { align-items: flex-end; text-align: right; }
.site-footer__legal a:hover, .site-footer__contact a:hover { opacity: .8; }
.site-footer__logo { width: 32%; padding: 40px; display: flex; justify-content: center; align-items: center; }
.site-footer__logo img { width: 180px; }
.site-footer__row--bottom {
  border-top: 1px solid #fff;
  padding: 20px 0 30px;
  align-items: center;
}
.site-footer__follow { width: 50%; display: flex; align-items: center; gap: 10px; }
.site-footer__follow a { color: #fff; display: block; width: 30px; line-height: 0; }   /* social-icons widget box is 30px wide */
.site-footer__follow svg { width: 20px; height: 20px; fill: #fff; }
.site-footer__copyright { margin: 0; text-align: right; }

/* =========================== legal pages (privacy / disclaimer) ===========================
   Live: logo band da546d8 (360px, boxed 2% top padding, 180px icon) tucked under
   the in-flow header with -100px, then cream band dae8143 (5% padding) holding a
   column (4143c94: 5% side padding, 40px gap) with a centred title and the
   text-editor body (803px wide at desktop). */
.legal-hero {
  position: relative;
  margin-top: -100px;
  min-height: 360px;
  overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(0.9 * 2%) 5% 0;
  background: url('../img/copro-hero-01.avif') center center / cover no-repeat;
}
.legal-hero::before {
  content: ''; position: absolute; inset: 0;
  background-color: #695E5A; opacity: .4; mix-blend-mode: multiply; isolation: isolate;
}
.legal-hero img { position: relative; z-index: 1; height: 180px; width: auto; }
.legal-content { background: var(--color-cream); padding: 5%; }
.legal-content__inner { padding: 0 5%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
/* Title font on live is "Megafield", which the site never loads, so browsers draw
   the generic sans-serif fallback. Same declaration = same rendering. */
.legal-title { font-family: Megafield, sans-serif; font-size: 2em; font-weight: 300; line-height: 1.5em; color: var(--color-primary); text-align: center; }
/* Body is shrink-to-fit (Elementor column container, align-items:center): as wide
   as its longest paragraph, capped at the column. */
.legal-content article { max-width: 100%; min-width: 0; }
/* Disclaimer page differs from privacy on live: its band is a boxed container
   (vertical padding 0.9 x 5%) and its text widget has a fixed 720px width. */
.legal-content--disclaimer { padding: calc(0.9 * 5%) 5%; }
.legal-content--disclaimer article { width: 720px; }
.legal-content article h2 { font-family: var(--font-display); font-size: 2.7em; font-weight: 200; line-height: 1.2em; margin: 8px 0 16px; }
.legal-content p { margin: 0 0 14.4px; }
.legal-content hr { margin: 0; }
.legal-content ul { margin: 0; }

/* =========================== 404 (Hello theme's own 404 template) =========================== */
.notfound-hero {
  max-width: 1140px; margin: 0 auto; padding: 8px 0 0;
  color: var(--color-text);
}
.notfound-hero h1 { font-family: var(--font-heading); font-size: 3.6em; font-weight: 300; line-height: 1.3em; margin: 0 0 16px; }
.notfound-hero p { margin: 0 0 14.4px; }
@media (max-width: 1199px) { .notfound-hero { max-width: 800px; } }
@media (max-width: 991px) { .notfound-hero { max-width: 600px; } }
@media (max-width: 767px) { .notfound-hero { max-width: 500px; } }
@media (max-width: 575px) {
  .notfound-hero { max-width: none; padding: 8px 10px 0; }
  .notfound-hero h1 { padding: 0 10px; }
}

/* =========================== tablet (<=1024) — Elementor max-width:1024px blocks =========================== */
@media (max-width: 1024px) {
  :root { --boxed: 1024px; }
  /* kit: text 11px, h2 2.4em, h3 1.8em, h5 1em */
  body { font-size: 11px; }
  h2.disp-h2 { font-size: 2.4em; }
  h3.disp-h3 { font-size: 1.8em; }
  .about__text .eyebrow { font-size: 2.7em; }   /* eyebrow keeps its own 2.7em */
  .card h5 { font-size: 1em; }

  .site-header .btn { display: none; }          /* both header buttons hidden <=1024 */

  .hero { min-height: 60vh; padding: 40px; }
  .hero__mark { height: 105px; }
  .hero__mark img { height: 100px; }
  .legal-hero img { height: 100px; }
  .legal-content article h2 { font-size: 2.4em; }
  .notfound-hero h1 { font-size: 3.2em; }

  .about { gap: 30px; }
  .about__text { width: 55%; gap: 15px; }
  .about__media { width: 45%; }

  .interventions { gap: 30px; }
  .interventions__text { padding: 0; gap: 15px; }

  .services__body { gap: 15px; }
  .card h5 { margin-top: 15px; }

  .contact-form__submit .btn { border-width: 1px; }

  .site-footer { padding: 15px; }
  .site-footer__contact, .site-footer__legal { font-size: 1.1em; }   /* c9cb4ef: 1.3em -> 1.1em */
  .site-footer__logo { padding: 0 40px; }
  .site-footer__logo img { width: 150px; }
  .site-footer__legal { padding-left: 40px; }
}

/* =========================== mobile (<=767) — Elementor max-width:767px blocks =========================== */
@media (max-width: 767px) {
  :root { --boxed: 767px; }

  .site-header { padding: 10px; }
  .site-header__right { width: 15%; justify-content: flex-start; flex: none; }

  .hero { padding: 20px; background-position: center left; }
  .legal-hero { padding: 20px 20px 0; }
  .legal-content, .legal-content--disclaimer { padding: 40px 15px; }
  .legal-content__inner { gap: 30px; }
  .hero__title { max-width: none; padding: 0 10px; }

  .about { flex-direction: column-reverse; flex-wrap: wrap; padding: 40px 15px; }
  .about__text, .about__media { width: 100%; }

  .interventions { flex-direction: column; flex-wrap: wrap; padding: 40px 15px; }
  .interventions__media, .interventions__text { width: 100%; }

  .services { flex-wrap: wrap; padding: 40px 15px 0; }
  .services__title, .services__body { width: 100%; }

  .carousel-section { padding: 40px 15px; }
  .carousel__track {
    grid-template-rows: auto auto; grid-auto-columns: 100%;
    column-gap: 10px; row-gap: 30px;
  }
  .card:nth-child(odd), .card:nth-child(even) { margin-right: 0; }

  .contact-band { padding: 40px 15px 80px; }
  .contact-band__inner { justify-content: flex-start; padding: 40px 20px; }
  .contact-form .field, .contact-form .field--third { flex-basis: 100%; max-width: 100%; }

  .site-footer { padding: 40px 15px 15px; }
  .site-footer__row { flex-direction: column; gap: 20px; padding-bottom: 40px; }
  .site-footer__contact, .site-footer__legal, .site-footer__logo { width: 100%; }
  .site-footer__contact { align-items: center; text-align: center; }
  .site-footer__logo { padding: 0; }
  .site-footer__logo img { width: 112.5px; }    /* max-width:50% of the 225px svg */
  .site-footer__legal { align-items: center; text-align: center; padding: 10px 0 10px 20px; }
  .site-footer__row--bottom { flex-direction: column; gap: 20px; padding: 20px; }
  .site-footer__follow { width: auto; justify-content: center; }
  .site-footer__copyright { text-align: center; }
}