/*
Theme Name: Laloyeau Services
Template: motorx
Theme URI: https://www.via-mobilis.com/
Author: Via Mobilis
Author URI: https://www.via-mobilis.com/
Description: Laloyeau Services client theme (landing page), built on top of the motorx parent theme and the wordpress-corpo engine plugin. Same integration as the laloyeau theme.
Version: 1.0.7
Requires PHP: 8.2
Text Domain: laloyeau-services
*/

/*
 * Laloyeau Services brand palette — the same blue/pink as Laloyeau, with
 * pink as the accent (titles, active nav, submit) instead of Laloyeau's green.
 */
:root {
    --color-secondary: #1d428a;
    --color-secondary-light: #f1f5fd;
    --color-primary: #ee398a;
    /* LALOYEAU's own primary green, for the badge linking to it. */
    --color-green: #97d700;
    --color-text: #333333;
    --color-border: #dfe3ea;
    --color-light-grey: rgba(0, 0, 0, 0.05);
    --img-radius: 10px;
    --img-big-radius: 25px;
    --btn-radius: 7px;
    --section-gap: 48px;
    --icon-size: 48px;
    /* #header's own height (see the .header-ct-* rule below) plus some
     * breathing room: how far an in-page anchor's target lands below the
     * top of the viewport, clear of the fixed header. */
    --anchor-offset: 90px;
    --font-heading: "HandelGothic BT", "Arial Narrow", sans-serif;
    --font-body: "DIN Pro", Arial, sans-serif;
}

/*
 * Brand fonts: HandelGothic BT for headings, DIN Pro (Regular + Bold) for
 * body text — client-supplied files, served from assets/fonts/ as-is (no
 * build step). Same declarations as the laloyeau theme.
 *
 * HandelGothic BT only exists in Regular, so its face is declared over the
 * whole 100-900 weight range: a heading still carrying a bold font-weight
 * (motorx's typography_headings default, or a component rule) then resolves
 * to this one face as-is instead of getting a browser-synthesized faux bold.
 */
@font-face {
    font-family: "HandelGothic BT";
    src: url("assets/fonts/handelgothic-bt-regular.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("assets/fonts/dinpro-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("assets/fonts/dinpro-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * motorx prints a font-family (its own Customizer typography_* theme_mods,
 * "Plus Jakarta Sans" by default) on each of these selectors from
 * inc/styles.php — same selector text here, so laloyeau-services-style's
 * print order wins (see inc/enqueue-assets.php). The main nav rule is the
 * exception: motorx generates it with !important, which only another
 * !important can beat.
 */
body, button, input, select, textarea,
#mainnav ul.sub-menu > li > a,
footer .footer-widgets .widget.widget_text, .infor-ft li, footer .wrap-widgets p, footer .widget.widget_nav_menu ul li a,
.themesflat-button, .tf-btn, button, input[type="button"], input[type="reset"], input[type="submit"],
.copyright,
.bottom,
.themesflat-top, .themesflat-top.select-2 .content-left ul li {
    font-family: var(--font-body);
}

#mainnav > ul > li > a, .header-modal-menu-left-btn .text, header .flat-information li {
    font-family: var(--font-body) !important;
}

/* Footer column titles: headings too, but motorx's own font-family rule
 * for them (same inc/styles.php) is more specific than plain h1-h6. */
#footer .footer-widgets .widgets-areas > .widget-title, footer .widget .widget-title, footer .widget h2, footer .wp-block-search .wp-block-search__label {
    font-family: var(--font-heading);
    font-weight: 400;
}

body {
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.25;
}

/* Font sizes follow the laloyeau theme's (the reference for both sites):
 * h1/h2 are its own flat values, h3 its card title's (.category-cards h3).
 * h5/h6, the nav and the topbar keep motorx's typography_* defaults, as on
 * laloyeau. */
h1 {
    font-size: 36px;
    color: var(--color-primary);
    margin-bottom: 24px;
}

h2 {
    font-size: 28px;
    color: var(--color-secondary);
    margin-bottom: 24px;
}

h3 {
    font-size: 24px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

h4 {
    font-size: 16px;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

p {
    margin-bottom: 16px;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--img-radius);
}

/* In-page anchor navigation (every header link is one, see
 * inc/navigation.php): smooth scroll — .landing-section's scroll-margin-top
 * (below) keeps each target clear of the fixed header. */
html {
    scroll-behavior: smooth;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: bold;
}

.color-primary {
    color: var(--color-primary)!important;
}

.color-secondary {
    color: var(--color-secondary)!important;
}

.color-white {
    color: #fff;
}

.bg-secondary {
    background-color: var(--color-secondary)!important;
}

.bg-primary {
    background-color: var(--color-primary)!important;
}

.bg-light-grey {
    background-color: var(--color-light-grey);
}

section {
    padding-block: var(--section-gap);
}

.d-flex {
    align-items: normal; /* Overrides motorx's own .d-flex alignment. */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.landing-section {
    padding-block: var(--section-gap);
    scroll-margin-top: var(--anchor-offset);
}

/*
 * Breadcrumbs (views/zones/layout/content-open.php calls the plugin's
 * views/zones/breadcrumbs.php on every page but the home page). Covers both
 * markups that zone can produce: Yoast SEO's own yoast_breadcrumb() output
 * (active on this install — plain <span> wrappers, separator replaced with
 * an .wordpress-corpo-mask arrow icon via inc/breadcrumbs.php, current crumb
 * marked with .breadcrumb_last) and the plugin's own fallback trail used
 * only if Yoast is ever deactivated (.wordpress-corpo-breadcrumbs-item.is-
 * current, plain ">" separator — inc/breadcrumbs.php only overrides Yoast's
 * own separator, see that file's docblock) — kept in sync so the current-
 * crumb styling doesn't silently break if that ever happens.
 */
#breadcrumbs {
    display: block;
    margin: 0 0 24px;
    font-size: 0.9em;
    color: var(--color-text);
}

#breadcrumbs a {
    color: var(--color-secondary);
    text-decoration: none;
}

#breadcrumbs a:hover {
    text-decoration: underline;
}

#breadcrumbs .breadcrumb_last,
#breadcrumbs .wordpress-corpo-breadcrumbs-item.is-current {
    color: var(--color-primary);
    font-weight: 700;
}

#breadcrumbs .wordpress-corpo-mask {
    width: 0.7em;
    height: 0.7em;
    margin: 0 2px;
    vertical-align: -0.05em;
    opacity: 0.6;
}

/*
 * Header / topbar chrome — see tpl/header/header-default.php.
 */

/* motorx's .themesflat-top.style-01 rule (main.css) hardcodes
 * background: var(--theme-primary-color) — the pink here. Matching its
 * selector exactly ties the specificity; print order wins. No font-size:
 * motorx's typography_topbar default applies, as on laloyeau. */
.themesflat-top.style-01 {
    background: var(--color-secondary);
}

/* Same 42px bar as laloyeau's: there, motorx's own social icons (28px,
 * hidden here, see tpl/header/header-default.php) set .content-right's
 * height, which the bar's 7px padding wraps and the badge stretches to
 * (see .themesflat-top .green-badge). The font-size is motorx's own
 * typography_topbar default (15px), as on laloyeau. */
.themesflat-top .content-right {
    min-height: 28px;
}

/* motorx's responsive.css adds margin-bottom: 10px to this exact selector
 * below 767px, meant for a topbar with socials under the contact info. */
.themesflat-top.style-01 .container-inside .content-left {
    margin-bottom: 0;
}

.themesflat-top .list-infor-topbar li a,
.topbar-address {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

/* Below 992px motorx's topbar wraps its two halves onto separate lines;
 * the mobile mockup only keeps phone + e-mail, so the address goes. */
@media (max-width: 991px) {
    .topbar-address {
        display: none;
    }
}

/* Green "LALOYEAU" badge (topbar + footer, see tpl/header/header-default.php
 * and tpl/footer/footer-widgets.php) — mirror of the laloyeau theme's own
 * .pink-badge, same shape and sizes. */
.green-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-green);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 6px 14px;
    margin-left: 16px;
}

/* Fills the topbar's full height edge to edge: .themesflat-top.style-01
 * (main.css) reserves it with its own `padding: 7px 0`, which the negative
 * margins bleed back over. */
.themesflat-top .green-badge {
    align-self: stretch;
    margin-top: -7px;
    margin-bottom: -7px;
    padding-top: 0;
    padding-bottom: 0;
}

.green-badge img {
    height: 22px;
    width: auto;
    display: block;
    border-radius: 0;
}

/* The same badge again in the off-canvas mobile nav, right after
 * .bottom-canvas-nav (tpl/header/header-default.php) — lined up with that
 * block's own 20px side padding (motorx's main.css). */
.canvas-nav-badge {
    padding: 0 20px 20px;
}

.canvas-nav-badge .green-badge {
    margin-left: 0;
}

.canvas-nav-badge .green-badge img {
    height: 26px;
}

/* One column width for the whole page, as in the mockup: motorx gives the
 * header/topbar (1434px) and the footer (1375px) wider containers than
 * the content's own .container (1346px, main.css). Same selectors as
 * motorx's main.css rules, print order wins. */
#header.header.header-default .inner-header .container,
#header.header.header-02 .inner-header .container,
#header.header.header-03 .inner-header .container,
.themesflat-top.default .container,
.header-default .themesflat-top.style-01 .container,
.footer_background .container {
    max-width: 1346px;
}

/* motorx's .logo img rule forces image-rendering: crisp-edges (meant for
 * pixel art), which blurs a raster logo. Same specificity, print order. */
img.site-logo {
    image-rendering: auto;
    border-radius: 0;
}

#header #logo img.site-logo {
    max-height: 65px;
    width: auto;
}

#logo-mobi .site-logo {
    max-width: 250px;
}

/* Logo left, nav pushed right (motorx's main.css grows all three columns
 * equally). Same selectors as motorx's rules, print order wins. */
#header .header-wrap .header-ct-left {
    flex-grow: 1;
}

#header .header-wrap .header-ct-center {
    flex-grow: 0;
}

/* Explicit height on the 3 flex children, not left to motorx's height:
 * 100% — see the laloyeau theme's style.css for the circular-percentage
 * layout bug this works around (#header otherwise ignores its content's
 * height). Same 70px as laloyeau's. */
#header .header-wrap .header-ct-left,
#header .header-wrap .header-ct-center,
#header .header-wrap .header-ct-right {
    height: 70px;
}

/* Only the case is set here. motorx's Customizer CSS prints the nav links'
 * size/line-height (typography_menu, left at motorx's defaults) and their
 * hover/active colors (mainnav_*_color, set in inc/customizer-defaults.php)
 * with !important, so those are steered through the theme_mods; the
 * family and weight are overridden with !important (above and below). */
#mainnav > ul > li > a {
    text-transform: uppercase;
}

/* Bold, as on laloyeau. Each of motorx's own selectors: its Customizer
 * prints the top-level weight with !important (typography_menu), the
 * dropdown one without, and main.css sets the mobile ones on
 * #mainnav_canvas ul li a and #mainnav_canvas .sub-menu a. */
#mainnav > ul > li > a {
    font-weight: 700!important;
}

#mainnav ul.sub-menu > li > a,
#mainnav_canvas ul li a,
#mainnav_canvas .sub-menu a {
    font-weight: 700;
}

#mainnav_canvas ul li a {
    text-transform: uppercase;
    color: var(--color-secondary);
}

#mainnav_canvas ul li.current-menu-item > a {
    color: var(--color-primary);
}

#header .inner-canvas-nav .group-header-logo {
    box-shadow: none;
    margin-bottom: 0;
}

/* Burger icon: motorx's Customizer paints it primary_color (pink here)
 * with this same selector, no !important — print order wins. */
.btn-menu:before,
.btn-menu:after,
.btn-menu span {
    background: var(--color-secondary);
}

/* Fixed-on-scroll header — see laloyeauServicesInitStickyHeader()
 * (assets/js/child.js), which toggles .is-fixed and the spacer below. */
#header {
    z-index: 9999;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

#header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.header-fixed-spacer {
    display: none;
}

.header-fixed-spacer.is-active {
    display: block;
}

/* The landing page is full-bleed bands: drop motorx's #themesflat-content
 * padding (content_controls theme_mod, printed inline for
 * #themesflat-content) there. Higher specificity than that rule, and
 * avoids having to tag the page with motorx's "Front Page" template just
 * for this, the way the laloyeau theme's homepage is. */
.home #themesflat-content.page-wrap {
    padding: 0;
}

/* Every other page (legal pages) keeps a boxed column with some air. */
#themesflat-content {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
}

/*
 * Buttons.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: var(--btn-radius);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #fff;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* A <button>, not a link: motorx's own generic button:hover rule
 * (main.css) sets color: #fff and a black background on every plain
 * <button>, so both states are restated here in full. */
.btn-pink,
.btn-pink:hover,
.btn-pink:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-pink:hover,
.btn-pink:focus {
    opacity: 0.85;
}

.btn .wordpress-corpo-mask {
    width: 14px;
    height: 14px;
}

/*
 * Landing sections — views/front-page.php.
 */
.centered-heading {
    text-align: center;
    margin-bottom: 40px;
}

.pink-heading {
    color: var(--color-primary);
}

/* Text + image, side by side from 992px up; stacked (text first) below. */
.two-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.two-col-content,
.two-col-image {
    flex: 1 1 0;
    min-width: 0;
}

.two-col-image {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.two-col-content .btn {
    margin-top: 27px;
}

.services {
    background-color: var(--color-secondary-light);
}

.service-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 24px;
}

.service-card h4 {
    margin-top: 16px;
}

.service-card p:not(.title),
.arrow-list {
    font-size: 16px;
}

.arrow-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.arrow-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.arrow-list .wordpress-corpo-mask {
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--color-primary);
    transform: translateY(1px);
}

/*
 * Contact section: channels + map on one side, the form card on the other.
 */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-info,
.contact-form-wrap {
    min-width: 0;
}

.contact-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.contact-channels li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-channels .wordpress-corpo-mask {
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
}

.contact-channel-text {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.contact-channel-label {
    font-weight: 600;
    color: var(--color-secondary);
}

.contact-channels a {
    color: var(--color-text);
    text-decoration: none;
}

.contact-channels a:hover {
    color: var(--color-primary);
}

.contact-map {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: var(--img-radius);
}

.contact-form-wrap {
    padding: 24px;
    background-color: #fff;
    border-radius: var(--img-radius);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--img-radius);
    font-size: 16px;
    font-weight: normal;
    color: var(--color-text);
    background-color: #fff;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
    border-color: var(--color-secondary);
}

/* Icon inside the field, per the mockup. Pinned to the field's first line
 * (top, not 50%) so the inline error message forms.js inserts after the
 * control (still inside this label) doesn't shift it. */
.field-with-icon {
    position: relative;
    display: block;
    margin: 0;
}

.field-with-icon > .wordpress-corpo-mask {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 15px;
    height: 15px;
    color: var(--color-text);
    pointer-events: none;
}

.field-with-icon input,
.field-with-icon textarea {
    padding-left: 42px;
}

.field-with-icon textarea {
    min-height: 140px;
}

/*
 * International phone field (country toggle + number) — printed by the
 * wordpress-corpo plugin's phone-field zone via corpo_form_phone_field(),
 * whose own assets/forms.css only lays it out structurally; colors and
 * sizes are this theme's job. Adapted from the laloyeau theme's skin (see
 * its style.css for the full reasoning on each rule).
 */

/* No slot for an icon in the plugin's markup, so the number input gets it
 * as a background image — which also keeps it next to the number whatever
 * the country toggle's width. The SVG is the plugin's own phone_ring.svg
 * filled with --color-text's value (a background image can't use
 * currentColor). input.-qualified to tie the generic input[type="tel"]
 * rule above; print order wins. */
input.corpo-tel-intl-number {
    padding-left: 42px;
    background: #fff url("assets/images/icons/icon-phone-field.svg") no-repeat 16px center / 15px 15px;
}

/* A <button>: height pinned to the inputs' own rendered height (an
 * input's content box doesn't follow line-height the way a button's
 * does), line-height explicit so a flag emoji's taller font metrics can't
 * balloon it. */
.corpo-tel-intl-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 47px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--img-radius);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background-color: #fff;
    min-width: max-content;
}

.corpo-tel-intl-toggle span[data-corpo-tel-intl-flag] {
    min-width: 20px;
}

/* motorx's generic button:hover (main.css) sets color: #fff and a black
 * background on every plain <button> — restated here or the toggle turns
 * black on hover. */
.corpo-tel-intl-toggle:hover,
.corpo-tel-intl-toggle:active,
.corpo-tel-intl-toggle:focus {
    background-color: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}

.corpo-tel-intl-toggle:focus-visible {
    border-color: var(--color-secondary);
}

.corpo-tel-intl-toggle .wordpress-corpo-mask {
    width: .7em;
    height: .7em;
}

.corpo-tel-intl-panel {
    padding: 8px;
    margin-top: 4px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--img-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.corpo-tel-intl-search {
    margin-bottom: 8px;
}

.corpo-tel-intl-option {
    padding: 8px 12px;
    border-radius: calc(var(--img-radius) / 2);
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

.corpo-tel-intl-option:hover {
    background-color: var(--color-secondary-light);
}

.contact-form > *:has(.corpo-form-error:not(:empty)) textarea,
.contact-form > *:has(.corpo-form-error:not(:empty)) input {
    border-color: var(--corpo-form-error-color);
}

.contact-form .btn-pink {
    width: 100%;
}

.contact-consent {
    margin: 0;
    font-size: 0.75em;
    opacity: 0.7;
}

/* Theme-local mask icons, used alongside .wordpress-corpo-mask (plugin's
 * assets/icons.css) — the plugin ships no user/edit icon. */
.user-mask {
    -webkit-mask-image: url("assets/images/icons/icon-user.svg");
    mask-image: url("assets/images/icons/icon-user.svg");
}

.edit-mask {
    -webkit-mask-image: url("assets/images/icons/icon-edit.svg");
    mask-image: url("assets/images/icons/icon-edit.svg");
}

/*
 * Footer — see tpl/footer/footer-widgets.php (logo + contact channels) and
 * motorx's own tpl/footer/bottom.php (copyright + legal links).
 */
.footer_background {
    background-color: var(--color-secondary);
    border-top-right-radius: var(--img-big-radius);
    border-top-left-radius: var(--img-big-radius)
}

.footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.wrap-logo-footer {
    display: block;
    margin: 0;
}

.footer .green-badge {
    margin-left: 0;
}

/* height: auto undoes .green-badge img's fixed topbar height, which would
 * otherwise crop the logo (object-fit: cover, see the global img rule) —
 * on laloyeau, .certifications img does that job for the pink badge. */
.footer .green-badge img {
    width: 150px;
    max-width: 150px;
    height: auto;
}

.wrap-logo-footer img {
    display: block;
    width: 220px;
    max-width: 100%;
    border-radius: 0;
}

.contact-channels--footer {
    margin: 0;
    flex-direction: column;
    gap: 16px;
}

.contact-channels--footer .contact-channel-label,
.contact-channels--footer a {
    color: #fff;
}

.contact-channels--footer a:hover {
    color: var(--color-primary);
}

.footer_background .bottom {
    background-color: transparent;
    font-size: 14px;
    line-height: 1.5;
}

.footer_background .bottom::before {
    background: rgba(255, 255, 255, 0.6);
}

.footer_background .copyright, .footer_background .bottom {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.footer_background .bottom .menu-bottom a:hover,
.footer_background .bottom .copyright a:hover {
    color: var(--color-primary);
}

/* Stacked on mobile (per the mobile mockup), one row from 768px up. */
#menu-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu-legal li {
    margin: 0;
}

.main-content.legals ul {
    list-style: unset;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

/*
 * Breakpoints (mobile first) — Bootstrap's, which motorx bundles.
 */
@media (min-width: 768px) {
    .service-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-channels--footer {
        flex-direction: row;
        gap: 24px 40px;
    }

    #menu-legal {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (min-width: 992px) {

    .two-col {
        flex-direction: row;
        align-items: center;
        gap: 64px;
    }

    /* Image on the left for the intervention band, per the mockup — the
     * markup keeps text first so the reading order stays the same on
     * every viewport. */
    .two-col--reverse {
        flex-direction: row-reverse;
    }

    .service-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 56px;
    }

    /* Both columns stretch to the taller one (the form card), and the map
     * fills whatever the heading and channels leave in the left column —
     * so its bottom edge always lines up with the form card's, whatever
     * the form's height (e.g. once validation errors appear in it). */
    .contact-grid {
        flex-direction: row;
        align-items: stretch;
    }

    .contact-info {
        flex: 1.5 1 0;
        display: flex;
        flex-direction: column;
    }

    .contact-form-wrap {
        flex: 1 1 0;
    }

    .contact-map {
        flex: 1 1 auto;
        height: auto;
        min-height: 320px;
    }

    .footer-row {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-brand {
        align-items: flex-start;
    }

    #menu-legal {
        justify-content: flex-end;
    }
}