:root {
    --bg-main: #f3f2ee;
    --bg-soft: #e9e8e3;
    --bg-white: #ffffff;

    --dark: #101416;
    --dark-soft: #181d20;
    --dark-elevated: #20262a;

    --text: #181c1f;
    --text-soft: #666d72;
    --text-faint: #8b9195;

    --white: #ffffff;
    --muted-white: #a9b0b4;

    --accent: #74899f;
    --accent-hover: #667d92;
    --accent-dark: #566e82;
    --accent-soft: #e8eef2;

    --whatsapp: #4d7f77;

    --border: #d2d1cb;
    --border-light: #e3e2dd;
    --border-dark: #30373b;

    --container: 1240px;
    --header-height: 78px;

    --font-heading:
        "Archivo",
        Arial,
        Helvetica,
        sans-serif;

    --font-body:
        "IBM Plex Sans",
        Arial,
        Helvetica,
        sans-serif;

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --text-dark: #172334;
    --muted-dark: #607084;
    --muted: #a9bdd2;

    --shadow-md:
        0 8px 24px
        rgba(15, 28, 44, 0.07);

    --shadow-lg:
        0 18px 46px
        rgba(15, 28, 44, 0.12);

    --shadow-xl:
        0 28px 70px
        rgba(4, 12, 24, 0.28);
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;

    scroll-padding-top:
        calc(
            var(--header-height) +
            24px
        );
}

body {
    margin: 0;

    font-family:
        var(--font-body);

    background:
        var(--bg-main);

    color:
        var(--text);

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

    overflow-x:
        hidden;
}

body.menu-open {
    overflow:
        hidden;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

img {
    display:
        block;

    max-width:
        100%;
}

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

button {
    cursor:
        pointer;
}

::selection {
    background:
        var(--accent);

    color:
        #ffffff;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.container {
    width:
        min(
            calc(100% - 52px),
            var(--container)
        );

    margin-inline:
        auto;
}

.section {
    padding:
        86px 0;
}

section[id],
[data-services-section],
[data-workshop-section],
[data-process-section],
[data-cta-section],
[data-trust-section] {
    scroll-margin-top:
        calc(
            var(--header-height) +
            22px
        );
}

h1,
h2,
h3,
h4,
p {
    margin-top:
        0;
}

h1,
h2,
h3,
h4 {
    font-family:
        var(--font-heading);

    letter-spacing:
        -0.035em;
}

h2 {
    margin-bottom:
        20px;

    font-size:
        clamp(
            2.05rem,
            3.15vw,
            3.3rem
        );

    font-weight:
        600;

    line-height:
        1.05;
}

h3 {
    font-weight:
        600;
}

p {
    color:
        var(--text-soft);
}

.section-kicker {
    margin-bottom:
        16px;

    color:
        var(--accent-dark);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.section-kicker-dark {
    color:
        #95a9b6;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(
            16,
            20,
            22,
            0.965
        );

    border-bottom:
        1px solid
        var(--border-dark);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        background-color
        220ms ease,
        box-shadow
        220ms ease;
}

.site-header.is-scrolled {
    background:
        rgba(
            16,
            20,
            22,
            0.99
        );

    box-shadow:
        0 12px 32px
        rgba(
            0,
            0,
            0,
            0.16
        );
}

.header-row {
    min-height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    transition:
        min-height
        220ms ease;
}

.site-header.is-scrolled
.header-row {
    min-height:
        70px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    flex-shrink:
        0;

    text-decoration:
        none;
}


/* =========================================================
   ANCIEN BRAND MARK
   Compatibilité pages non encore migrées
   ========================================================= */

.brand-mark {
    position:
        relative;

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius:
        14px;

    background:
        #111518;

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.22
        );

    transition:
        width 220ms ease,
        height 220ms ease,
        flex-basis 220ms ease,
        transform 250ms var(--ease),
        border-color 250ms ease,
        box-shadow 250ms ease;
}

.brand-mark img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    transition:
        transform
        350ms var(--ease);
}

.brand:hover
.brand-mark {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            255,
            255,
            255,
            0.18
        );

    box-shadow:
        0 13px 35px
        rgba(
            0,
            0,
            0,
            0.28
        );
}

.brand:hover
.brand-mark img {
    transform:
        scale(1.035);
}

.site-header.is-scrolled
.brand-mark {
    width:
        46px;

    height:
        46px;

    flex-basis:
        46px;
}


/* =========================================================
   ANCIEN TEXTE DE MARQUE
   ========================================================= */

.brand-text strong {
    display:
        block;

    color:
        var(--white);

    font-family:
        var(--font-heading);

    font-size:
        0.98rem;

    font-weight:
        600;

    line-height:
        1.2;
}

.brand-text span {
    display:
        block;

    margin-top:
        3px;

    color:
        #929a9f;

    font-size:
        0.72rem;

    line-height:
        1.3;
}


/* =========================================================
   NOUVEAU LOGO HORIZONTAL
   ========================================================= */

.brand-logo {
    display:
        block;

    width:
        255px;

    height:
        auto;

    max-height:
        58px;

    object-fit:
        contain;

    object-position:
        left center;

    background:
        transparent;

    /*
     * Le PNG/WebP possède encore du noir autour du logo.
     * SCREEN rend le noir invisible sur le header sombre
     * sans masquer les parties blanches et bleu-gris.
     */
    mix-blend-mode:
        screen;

    opacity:
        0.96;

    transition:
        opacity 220ms ease,
        transform 300ms var(--ease),
        filter 300ms ease;
}

.brand:hover
.brand-logo {
    opacity:
        1;

    transform:
        translateY(-1px);

    filter:
        brightness(1.04);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.desktop-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-left:
        auto;
}

.desktop-nav a {
    position:
        relative;

    padding:
        12px 11px;

    color:
        #bec3c6;

    font-size:
        0.87rem;

    font-weight:
        600;

    transition:
        color
        180ms ease;
}

.desktop-nav a::after {
    content:
        "";

    position:
        absolute;

    left:
        11px;

    right:
        11px;

    bottom:
        5px;

    height:
        1px;

    background:
        #ffffff;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        230ms var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color:
        #ffffff;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    transform:
        scaleX(1);
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}

.header-call {
    display:
        grid;

    text-align:
        right;

    line-height:
        1.22;

    transition:
        opacity
        180ms ease;
}

.header-call:hover {
    opacity:
        0.78;
}

.header-call span {
    color:
        #81898e;

    font-size:
        0.65rem;
}

.header-call strong {
    margin-top:
        3px;

    color:
        #ffffff;

    font-size:
        0.84rem;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    position:
        relative;

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    padding:
        13px 19px;

    overflow:
        hidden;

    border:
        1px solid
        transparent;

    background:
        var(--accent);

    color:
        #ffffff;

    font-size:
        0.86rem;

    font-weight:
        700;

    line-height:
        1;

    transition:
        background-color
        200ms ease,
        border-color
        200ms ease,
        color
        200ms ease,
        transform
        200ms var(--ease);
}

.button::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    transform:
        translateX(-101%);

    transition:
        transform
        340ms var(--ease);

    pointer-events:
        none;
}

.button:hover::before {
    transform:
        translateX(0);
}

.button > span {
    position:
        relative;

    z-index:
        2;
}

.button-arrow {
    display:
        inline-flex;

    font-size:
        1rem;

    transition:
        transform
        220ms var(--ease);
}

.button:hover
.button-arrow {
    transform:
        translate(
            3px,
            -3px
        );
}

.button:active {
    transform:
        translateY(1px);
}

.button-primary:hover,
.button-header:hover {
    background:
        var(--accent-hover);
}

.button-header {
    min-height:
        43px;

    padding:
        11px 16px;
}

.button-light {
    background:
        #ffffff;

    color:
        var(--dark);
}

.button-light::before {
    background:
        #e8e8e4;
}

.button-light:hover {
    background:
        #ffffff;

    color:
        var(--dark);
}

.button-outline {
    border-color:
        #b7b6b0;

    background:
        transparent;

    color:
        var(--text);
}

.button-outline::before {
    background:
        rgba(
            24,
            28,
            31,
            0.05
        );
}

.button-outline:hover {
    border-color:
        #858782;

    background:
        transparent;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu-toggle {
    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        9px;

    border:
        1px solid
        var(--border-dark);

    background:
        transparent;
}

.menu-toggle span {
    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        4px 0;

    background:
        #ffffff;

    transform-origin:
        center;

    transition:
        transform
        190ms ease,
        opacity
        190ms ease;
}

.menu-toggle[aria-expanded="true"]
span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}

.menu-toggle[aria-expanded="true"]
span:nth-child(2) {
    opacity:
        0;
}

.menu-toggle[aria-expanded="true"]
span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}

.mobile-menu {
    display:
        none;
}


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        78px 0 72px;

    background:
        var(--dark);
}

.home-hero::before {
    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -270px;

    top:
        -280px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius:
        50%;

    pointer-events:
        none;
}

.home-hero-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.84fr)
        minmax(0, 1.16fr);

    gap:
        66px;

    align-items:
        center;
}

.home-hero-copy {
    position:
        relative;

    z-index:
        2;

    max-width:
        610px;
}

.hero-kicker {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        #9bb0be;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.hero-kicker span {
    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #69767e;
}

.hero-title {
    margin:
        0 0 27px;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.4rem,
            5.1vw,
            5.1rem
        );

    font-weight:
        600;

    line-height:
        0.99;

    letter-spacing:
        -0.055em;
}

.hero-title-line {
    display:
        block;

    overflow:
        hidden;
}

.hero-title-accent {
    color:
        #adb9c1;
}

.hero-description {
    max-width:
        555px;

    margin-bottom:
        0;

    color:
        #aab1b5;

    font-size:
        1.02rem;

    line-height:
        1.72;
}

.hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        25px;

    margin-top:
        31px;
}

.hero-phone {
    display:
        grid;

    gap:
        2px;

    transition:
        opacity
        180ms ease;
}

.hero-phone:hover {
    opacity:
        0.8;
}

.hero-phone span {
    color:
        #879096;

    font-size:
        0.69rem;
}

.hero-phone strong {
    color:
        #ffffff;

    font-size:
        0.89rem;
}

.hero-practical {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        27px;

    margin-top:
        42px;

    padding-top:
        24px;

    border-top:
        1px solid
        var(--border-dark);
}

.hero-practical div {
    display:
        grid;

    gap:
        7px;
}

.info-label {
    color:
        #707b81;

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.hero-practical strong {
    color:
        #d7dcdf;

    font-size:
        0.81rem;

    font-weight:
        600;

    line-height:
        1.55;
}


/* =========================================================
   HERO MEDIA
   ========================================================= */

.hero-media {
    position:
        relative;

    min-width:
        0;

    clip-path:
        inset(0 0 0 0);
}

.hero-image-wrap {
    height:
        520px;

    overflow:
        hidden;

    background:
        #1b2226;
}

.hero-image-wrap img {
    width:
        100%;

    height:
        108%;

    object-fit:
        cover;

    object-position:
        center;

    transform-origin:
        center center;

    will-change:
        transform;
}

.hero-media-label {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        min(
            100%,
            330px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px 20px;

    background:
        #ffffff;

    color:
        var(--text);

    transition:
        background-color
        180ms ease;
}

.hero-media-label:hover {
    background:
        #f2f2ef;
}

.hero-media-label div {
    display:
        grid;

    gap:
        3px;
}

.hero-media-label span {
    color:
        #737b80;

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.hero-media-label strong {
    font-family:
        var(--font-heading);

    font-size:
        0.85rem;

    font-weight:
        600;
}

.media-label-arrow {
    color:
        var(--accent-dark) !important;

    font-size:
        1.05rem !important;

    transition:
        transform
        200ms ease;
}

.hero-media-label:hover
.media-label-arrow {
    transform:
        translate(
            3px,
            -3px
        );
}


/* =========================================================
   TRUST
   ========================================================= */

.trust-section {
    background:
        #ffffff;

    border-bottom:
        1px solid
        var(--border);
}

.trust-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.trust-item {
    position:
        relative;

    display:
        flex;

    gap:
        18px;

    padding:
        24px 28px;

    border-right:
        1px solid
        var(--border);

    overflow:
        hidden;

    transition:
        background-color
        180ms ease;
}

.trust-item::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        2px;

    background:
        var(--accent);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        280ms var(--ease);
}

.trust-item:hover {
    background:
        #fafaf8;
}

.trust-item:hover::after {
    transform:
        scaleX(1);
}

.trust-item:first-child {
    padding-left:
        0;
}

.trust-item:last-child {
    border-right:
        0;
}

.trust-number {
    margin-top:
        2px;

    color:
        var(--accent-dark);

    font-size:
        0.64rem;

    font-weight:
        700;
}

.trust-item strong {
    display:
        block;

    margin-bottom:
        3px;

    font-family:
        var(--font-heading);

    font-size:
        0.84rem;

    font-weight:
        600;
}

.trust-item p {
    margin:
        0;

    color:
        #777e82;

    font-size:
        0.77rem;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.5fr);

    gap:
        72px;

    align-items:
        end;

    margin-bottom:
        48px;
}

.section-heading h2 {
    max-width:
        650px;

    margin-bottom:
        0;
}

.section-heading-side {
    max-width:
        420px;

    justify-self:
        end;
}

.section-heading-side p {
    margin-bottom:
        16px;

    line-height:
        1.7;
}


/* =========================================================
   TEXT LINKS
   ========================================================= */

.text-link {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    font-size:
        0.82rem;

    font-weight:
        700;
}

.text-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        22px;

    bottom:
        -4px;

    height:
        1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        220ms ease;
}

.text-link:hover::after {
    transform:
        scaleX(1);
}

.text-link span {
    color:
        var(--accent-dark);

    transition:
        transform
        190ms ease;
}

.text-link:hover span {
    transform:
        translate(
            3px,
            -3px
        );
}

.text-link-dark {
    color:
        #c5cbcf;
}

.text-link-dark span {
    color:
        #96adba;
}


/* =========================================================
   HOME SERVICES
   ========================================================= */

.services-section {
    background:
        var(--bg-main);
}

.services-list {
    border-top:
        1px solid
        var(--border);
}

.service-row {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        60px
        minmax(210px, 0.9fr)
        minmax(320px, 1.15fr)
        44px;

    gap:
        30px;

    align-items:
        center;

    min-height:
        122px;

    border-bottom:
        1px solid
        var(--border);

    overflow:
        hidden;

    transition:
        padding-left
        260ms var(--ease),
        background-color
        220ms ease;
}

.service-row::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        var(--accent);

    transform:
        scaleY(0);

    transform-origin:
        center bottom;

    transition:
        transform
        320ms var(--ease);
}

.service-row:hover {
    padding-left:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );
}

.service-row:hover::before {
    transform:
        scaleY(1);
}

.service-row-index {
    color:
        var(--accent-dark);

    font-size:
        0.65rem;

    font-weight:
        700;
}

.service-row-title {
    display:
        grid;

    gap:
        4px;
}

.service-row-title strong {
    color:
        var(--text);

    font-family:
        var(--font-heading);

    font-size:
        1rem;

    font-weight:
        600;

    transition:
        color
        180ms ease;
}

.service-row:hover
.service-row-title strong {
    color:
        var(--accent-dark);
}

.service-row-title span {
    color:
        #81878b;

    font-size:
        0.74rem;
}

.service-row p {
    max-width:
        500px;

    margin:
        0;

    font-size:
        0.87rem;

    line-height:
        1.62;
}

.service-row-arrow {
    justify-self:
        end;

    color:
        var(--accent-dark);

    font-size:
        1rem;

    transition:
        transform
        240ms var(--ease);
}

.service-row:hover
.service-row-arrow {
    transform:
        translate(
            4px,
            -4px
        );
}


/* =========================================================
   WORKSHOP
   ========================================================= */

.workshop-section {
    padding:
        88px 0;

    background:
        var(--dark-soft);

    overflow:
        hidden;
}

.workshop-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        74px;

    align-items:
        center;
}

.workshop-media {
    position:
        relative;

    min-width:
        0;
}

.workshop-image-mask {
    height:
        560px;

    overflow:
        hidden;

    background:
        #20282d;
}

.workshop-image-mask img {
    width:
        100%;

    height:
        108%;

    object-fit:
        cover;

    object-position:
        center;

    transform-origin:
        center center;

    will-change:
        transform;
}

.workshop-image-caption {
    display:
        inline-block;

    margin-top:
        12px;

    color:
        #747f85;

    font-size:
        0.66rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.workshop-copy {
    max-width:
        600px;
}

.workshop-copy h2 {
    margin-bottom:
        25px;

    color:
        #ffffff;
}

.workshop-intro {
    color:
        #d2d7da;

    font-size:
        1.03rem;

    line-height:
        1.7;
}

.workshop-copy
> p:not(.section-kicker):not(.workshop-intro) {
    color:
        #8d979d;

    line-height:
        1.72;
}

.workshop-info {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    margin-top:
        32px;

    border-top:
        1px solid
        var(--border-dark);

    border-left:
        1px solid
        var(--border-dark);
}

.workshop-info > div {
    min-height:
        102px;

    padding:
        19px;

    border-right:
        1px solid
        var(--border-dark);

    border-bottom:
        1px solid
        var(--border-dark);

    transition:
        background-color
        180ms ease;
}

.workshop-info > div:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}

.workshop-info
> div
> span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #737e85;

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.workshop-info strong,
.workshop-info strong span {
    color:
        #e0e4e6;

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.55;
}

.workshop-info a {
    transition:
        color
        180ms ease;
}

.workshop-info a:hover {
    color:
        #ffffff;
}

.workshop-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        25px;

    margin-top:
        29px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-section {
    background:
        #ffffff;
}

.process-layout {
    display:
        grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        82px;
}

.process-intro {
    max-width:
        430px;
}

.process-intro
> p:not(.section-kicker) {
    line-height:
        1.7;
}

.process-intro
.button {
    margin-top:
        9px;
}

.process-list {
    border-top:
        1px solid
        var(--border);
}

.process-item {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        120px
        minmax(0, 1fr);

    gap:
        30px;

    padding:
        26px 0;

    border-bottom:
        1px solid
        var(--border);

    transition:
        padding-left
        220ms var(--ease);
}

.process-item::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        2px;

    background:
        var(--accent);

    transform:
        scaleY(0);

    transform-origin:
        center bottom;

    transition:
        transform
        280ms ease;
}

.process-item:hover {
    padding-left:
        11px;
}

.process-item:hover::before {
    transform:
        scaleY(1);
}

.process-item
> span {
    color:
        var(--accent-dark);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.process-item strong {
    display:
        block;

    margin-bottom:
        7px;

    font-family:
        var(--font-heading);

    font-size:
        0.98rem;

    font-weight:
        600;
}

.process-item p {
    max-width:
        520px;

    margin:
        0;

    font-size:
        0.84rem;

    line-height:
        1.65;
}


/* =========================================================
   SERVICES PAGE
   ========================================================= */

.services-page-hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        94px 0 98px;

    background:
        var(--dark);

    color:
        #ffffff;
}

.services-page-hero::after {
    content:
        "";

    position:
        absolute;

    right:
        -230px;

    top:
        -300px;

    width:
        520px;

    height:
        520px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius:
        50%;
}

.services-page-intro {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, 0.55fr);

    align-items:
        end;

    gap:
        100px;
}

.services-page-title {
    max-width:
        830px;

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.3rem,
            6vw,
            5.7rem
        );

    font-weight:
        600;

    line-height:
        0.99;

    letter-spacing:
        -0.055em;
}

.services-page-intro-text {
    padding-bottom:
        8px;
}

.services-page-intro-text p {
    margin-bottom:
        28px;

    color:
        #a9b1b5;

    font-size:
        1.02rem;

    line-height:
        1.8;
}

.services-page-list {
    padding:
        10px 0;

    background:
        var(--bg-main);
}

.service-detail-row {
    display:
        grid;

    grid-template-columns:
        62px
        minmax(300px, 0.85fr)
        minmax(380px, 1.15fr);

    gap:
        58px;

    align-items:
        start;

    padding:
        76px 0;

    border-bottom:
        1px solid
        var(--border);
}

.service-detail-number {
    padding-top:
        4px;

    color:
        var(--accent-dark);

    font-size:
        0.7rem;

    font-weight:
        700;
}

.service-detail-type {
    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--accent-dark);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.service-detail-heading h2 {
    max-width:
        430px;

    margin:
        0;

    font-size:
        clamp(
            2rem,
            3.2vw,
            3.25rem
        );

    line-height:
        1.08;
}

.service-detail-copy {
    padding-top:
        35px;
}

.service-detail-copy p {
    margin-bottom:
        18px;

    font-size:
        0.96rem;

    line-height:
        1.78;
}

.service-detail-copy
.text-link {
    margin-top:
        7px;
}


/* =========================================================
   DIAGNOSTIC FEATURE
   ========================================================= */

.diagnostic-feature {
    padding:
        88px 0;

    background:
        var(--dark-soft);

    color:
        #ffffff;
}

.diagnostic-feature-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        76px;

    align-items:
        center;
}

.diagnostic-feature-media {
    position:
        relative;

    min-width:
        0;

    height:
        560px;

    overflow:
        hidden;

    background:
        #20272b;
}

.diagnostic-feature-media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}

.diagnostic-photo-caption {
    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        min(
            100%,
            310px
        );

    padding:
        20px 22px;

    background:
        #ffffff;

    color:
        var(--text);
}

.diagnostic-photo-caption span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #788086;

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.diagnostic-photo-caption strong {
    font-family:
        var(--font-heading);

    font-size:
        0.92rem;
}

.diagnostic-feature-copy {
    max-width:
        550px;
}

.diagnostic-feature-copy h2 {
    color:
        #ffffff;
}

.diagnostic-feature-lead {
    color:
        #a8b0b4;

    font-size:
        1rem;

    line-height:
        1.78;
}

.diagnostic-points {
    margin:
        34px 0;

    border-top:
        1px solid
        var(--border-dark);
}

.diagnostic-points > div {
    display:
        grid;

    grid-template-columns:
        52px 1fr;

    gap:
        18px;

    padding:
        20px 0;

    border-bottom:
        1px solid
        var(--border-dark);
}

.diagnostic-points span {
    color:
        #91a6b4;

    font-size:
        0.67rem;

    font-weight:
        700;
}

.diagnostic-points p {
    margin:
        0;

    color:
        #c2c8cb;
}


/* =========================================================
   ASSISTANCE
   ========================================================= */

.service-assistance {
    background:
        #ffffff;
}

.assistance-lines {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}

.assistance-line {
    min-height:
        240px;

    padding:
        34px;

    border-right:
        1px solid
        var(--border);

    transition:
        background-color
        200ms ease;
}

.assistance-line:last-child {
    border-right:
        0;
}

.assistance-line:hover {
    background:
        #f7f6f2;
}

.assistance-line
> span {
    color:
        var(--accent-dark);

    font-size:
        0.66rem;

    font-weight:
        700;
}

.assistance-line strong {
    display:
        block;

    margin-top:
        52px;

    margin-bottom:
        12px;

    font-family:
        var(--font-heading);

    font-size:
        1.05rem;
}

.assistance-line p {
    margin:
        0;

    max-width:
        310px;

    font-size:
        0.87rem;
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        70px 0;

    background:
        var(--dark-soft);

    color:
        #ffffff;
}

.about-hero::after {
    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -300px;

    top:
        -240px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius:
        50%;
}

.about-hero-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        76px;

    align-items:
        center;
}

.about-hero-copy h1 {
    max-width:
        600px;

    margin:
        0 0 28px;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.1rem,
            5.2vw,
            5.2rem
        );

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -0.055em;
}

.about-hero-lead {
    max-width:
        570px;

    color:
        #aeb5b9;

    font-size:
        1rem;

    line-height:
        1.76;
}

.about-hero-actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        28px;

    margin-top:
        30px;
}

.about-hero-media {
    position:
        relative;
}

.about-hero-image {
    height:
        560px;

    overflow:
        hidden;

    background:
        #20272a;
}

.about-hero-image img {
    width:
        100%;

    height:
        108%;

    object-fit:
        cover;

    object-position:
        center;
}

.about-photo-caption {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        min(
            100%,
            365px
        );

    padding:
        20px 22px;

    background:
        #ffffff;

    color:
        var(--text);
}

.about-photo-caption span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #7c8387;

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.about-photo-caption strong {
    font-family:
        var(--font-heading);

    font-size:
        0.9rem;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-intro {
    padding:
        100px 0;

    background:
        var(--bg-main);
}

.about-intro-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    gap:
        100px;
}

.about-intro-grid h2 {
    max-width:
        650px;
}

.about-intro-copy {
    padding-top:
        35px;
}

.about-intro-copy p {
    line-height:
        1.8;
}

.about-intro-lead {
    color:
        #292d30;

    font-size:
        1.04rem;
}

.about-intro-copy
.text-link {
    margin-top:
        8px;
}


/* =========================================================
   ABOUT VALUES
   ========================================================= */

.about-values {
    padding:
        90px 0 100px;

    background:
        #ffffff;
}

.about-values-heading {
    margin-bottom:
        48px;
}

.about-values-heading h2 {
    margin:
        0;
}

.about-values-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}

.about-value {
    min-height:
        280px;

    padding:
        36px;

    border-right:
        1px solid
        var(--border);

    transition:
        background-color
        220ms ease;
}

.about-value:last-child {
    border-right:
        0;
}

.about-value:hover {
    background:
        #f7f6f2;
}

.about-value
> span {
    color:
        var(--accent-dark);

    font-size:
        0.67rem;

    font-weight:
        700;
}

.about-value h3 {
    margin:
        60px 0 16px;

    font-size:
        1.15rem;
}

.about-value p {
    max-width:
        335px;

    margin:
        0;

    line-height:
        1.75;
}


/* =========================================================
   ABOUT PRACTICAL
   ========================================================= */

.about-practical {
    padding:
        70px 0;

    background:
        var(--dark-soft);

    color:
        #ffffff;
}

.about-practical-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--border-dark);

    border-bottom:
        1px solid
        var(--border-dark);
}

.about-address,
.about-hours {
    padding:
        55px 48px;
}

.about-address {
    border-right:
        1px solid
        var(--border-dark);
}

.about-address h2,
.about-hours h2 {
    color:
        #ffffff;
}

.about-address
> p:not(.section-kicker) {
    max-width:
        550px;

    color:
        #aab2b6;

    line-height:
        1.8;
}

.about-services-short {
    display:
        grid;

    margin:
        35px 0;

    border-top:
        1px solid
        var(--border-dark);
}

.about-services-short span {
    padding:
        13px 0;

    color:
        #c7cccf;

    border-bottom:
        1px solid
        var(--border-dark);
}

.about-hours-list {
    margin:
        35px 0 0;

    padding:
        0;

    list-style:
        none;
}

.about-hours-list li {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        15px 0;

    border-bottom:
        1px solid
        var(--border-dark);
}

.about-hours-list span {
    color:
        #a8b0b4;
}

.about-hours-list strong {
    color:
        #ffffff;

    text-align:
        right;
}


/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-hero {
    position:
        relative;

    overflow:
        hidden;

    padding:
        94px 0;

    background:
        var(--dark);

    color:
        #ffffff;
}

.contact-hero::after {
    content:
        "";

    position:
        absolute;

    right:
        -230px;

    top:
        -290px;

    width:
        520px;

    height:
        520px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius:
        50%;
}

.contact-hero-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr);

    gap:
        95px;

    align-items:
        center;
}

.contact-hero h1 {
    max-width:
        770px;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            3.35rem,
            6vw,
            5.7rem
        );

    font-weight:
        600;

    line-height:
        0.99;

    letter-spacing:
        -0.055em;
}

.contact-hero-side p {
    color:
        #a8b0b4;

    font-size:
        1rem;

    line-height:
        1.8;
}

.contact-hero-actions {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        17px;

    margin-top:
        25px;
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.contact-main {
    padding:
        95px 0;

    background:
        var(--bg-main);
}

.contact-main-grid {
    display:
        grid;

    grid-template-columns:
        minmax(260px, 0.64fr)
        minmax(500px, 1.36fr);

    gap:
        80px;
}

.contact-info h2 {
    margin-bottom:
        35px;
}

.contact-info-list {
    border-top:
        1px solid
        var(--border);
}

.contact-info-line {
    display:
        grid;

    grid-template-columns:
        120px 1fr;

    gap:
        20px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        var(--border);
}

.contact-info-line span,
.contact-info-note
> span {
    color:
        var(--accent-dark);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.contact-info-line a,
.contact-info-line strong {
    color:
        var(--text);

    font-size:
        0.91rem;

    font-weight:
        600;

    line-height:
        1.55;
}

.contact-info-note {
    margin-top:
        40px;

    padding-top:
        30px;

    border-top:
        1px solid
        var(--border);
}

.contact-info-note p {
    margin:
        10px 0 0;

    max-width:
        340px;

    line-height:
        1.75;
}

.contact-form-heading {
    margin-bottom:
        38px;
}

.contact-form-heading h2 {
    margin-bottom:
        16px;
}

.contact-form-heading
> p:not(.section-kicker) {
    max-width:
        660px;

    line-height:
        1.75;
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form {
    position:
        relative;
}

.form-honeypot {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;
}

.form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px;
}

.form-field {
    display:
        grid;

    gap:
        8px;

    margin-bottom:
        25px;
}

.form-field label {
    color:
        var(--text);

    font-size:
        0.82rem;

    font-weight:
        600;
}

.form-field input,
.form-field select,
.form-field textarea {
    width:
        100%;

    padding:
        14px 15px;

    border:
        1px solid
        #c9c7c1;

    border-radius:
        0;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--text);

    transition:
        border-color
        180ms ease,
        box-shadow
        180ms ease,
        background-color
        180ms ease;
}

.form-field input,
.form-field select {
    min-height:
        56px;
}

.form-field textarea {
    min-height:
        180px;

    resize:
        vertical;

    line-height:
        1.7;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color:
        #a7a6a0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(
            116,
            137,
            159,
            0.11
        );
}

.form-help {
    color:
        #878c8f;

    font-size:
        0.74rem;
}

.field-error {
    min-height:
        16px;

    color:
        #aa4048;

    font-size:
        0.74rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color:
        #aa4048;
}

.form-consent {
    margin-top:
        8px;

    padding:
        21px 0;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);
}

.form-consent label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    cursor:
        pointer;
}

.form-consent input {
    width:
        19px;

    height:
        19px;

    min-height:
        auto;

    flex:
        0 0 19px;

    margin-top:
        2px;
}

.form-submit-row {
    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    margin-top:
        34px;
}

.form-status {
    min-height:
        22px;

    margin-top:
        17px;

    font-size:
        0.8rem;

    font-weight:
        600;
}

.form-status.is-success {
    color:
        #247257;
}

.form-status.is-error {
    color:
        #a43b46;
}


/* =========================================================
   LOCATION
   ========================================================= */

.contact-location {
    padding:
        95px 0 105px;

    background:
        #ffffff;
}

.contact-location-heading {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        45px;
}

.contact-location-heading h2 {
    margin:
        0;
}

.contact-location-heading
> p {
    margin:
        0;

    text-align:
        right;

    font-size:
        1rem;
}

.contact-map {
    height:
        520px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);
}

.contact-map iframe {
    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-section {
    padding:
        0 0 82px;

    background:
        #ffffff;
}

.cta-panel {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        62px;

    padding:
        43px 48px;

    overflow:
        hidden;

    background:
        var(--accent);

    color:
        #ffffff;

    transition:
        background-color
        300ms ease;
}

.cta-panel:hover {
    background:
        var(--accent-dark);
}

.cta-panel::after {
    content:
        "";

    position:
        absolute;

    width:
        315px;

    height:
        315px;

    right:
        -165px;

    top:
        -185px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        50%;

    transform:
        scale(0.92);

    transition:
        transform
        600ms var(--ease);
}

.cta-panel:hover::after {
    transform:
        scale(1.08);
}

.cta-panel p {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        9px;

    color:
        #dde7ec;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}

.cta-panel h2 {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        9px;

    color:
        #ffffff;
}

.cta-panel
> div
> span {
    position:
        relative;

    z-index:
        2;

    color:
        #d8e0e5;

    font-size:
        0.89rem;
}

.cta-actions {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    flex-shrink:
        0;
}

.cta-phone {
    display:
        grid;

    gap:
        2px;

    transition:
        opacity
        180ms ease;
}

.cta-phone:hover {
    opacity:
        0.78;
}

.cta-phone span {
    color:
        #d5e0e6;

    font-size:
        0.64rem;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.cta-phone strong {
    color:
        #ffffff;

    font-size:
        0.88rem;
}


/* =========================================================
   FOOTER + LOGO COMPLET
   ========================================================= */

.footer {
    padding:
        62px 0 26px;

    background:
        var(--dark);

    border-top:
        1px solid
        var(--border-dark);
}

.footer-grid {
    display:
        grid;

    grid-template-columns:
        1.4fr
        0.75fr
        1fr
        1fr;

    gap:
        52px;
}


/* =========================================================
   LOGO FOOTER
   ========================================================= */

.footer-logo {
    width:
        245px;

    height:
        auto;

    display:
        block;

    overflow:
        visible;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    transition:
        transform
        260ms var(--ease),
        opacity
        200ms ease;
}

.footer-logo img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        contain;

    object-position:
        left center;

    background:
        transparent;

    /*
     * Même correction que dans le header :
     * le noir du fichier se confond avec le footer.
     */
    mix-blend-mode:
        screen;

    opacity:
        0.96;

    transition:
        opacity
        220ms ease,
        filter
        300ms ease;
}

.footer-logo:hover {
    transform:
        translateY(-2px);
}

.footer-logo:hover img {
    opacity:
        1;

    filter:
        brightness(1.04);
}

.footer-brand p {
    max-width:
        310px;

    margin-top:
        23px;

    color:
        #78838a;

    font-size:
        0.8rem;

    line-height:
        1.68;
}

.footer-column {
    display:
        grid;

    align-content:
        start;

    gap:
        9px;
}

.footer-column
> strong {
    margin-bottom:
        6px;

    color:
        #ffffff;

    font-family:
        var(--font-heading);

    font-size:
        0.8rem;

    font-weight:
        600;
}

.footer-column a,
.footer-column
> span {
    color:
        #929ca2;

    font-size:
        0.78rem;

    line-height:
        1.65;
}

.footer-column a {
    width:
        fit-content;

    transition:
        color
        180ms ease,
        transform
        180ms ease;
}

.footer-column a:hover {
    color:
        #ffffff;

    transform:
        translateX(2px);
}

.footer-bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        50px;

    padding-top:
        21px;

    border-top:
        1px solid
        var(--border-dark);
}

.footer-bottom span {
    color:
        #667178;

    font-size:
        0.71rem;
}


/* =========================================================
   MOBILE QUICK ACTIONS
   ========================================================= */

.mobile-action-bar {
    display:
        none;
}


/* =========================================================
   GENERIC COMPATIBILITY
   ========================================================= */

.grid {
    display:
        grid;

    gap:
        24px;
}

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

.grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.grid-4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}

.hours-list {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.hours-list li {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        var(--border);
}

.map-wrap {
    min-height:
        340px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);
}

.map-wrap iframe {
    width:
        100%;

    min-height:
        340px;

    border:
        0;
}


/* =========================================================
   ADMIN COMPATIBILITY
   ========================================================= */

.admin-body {
    background:
        #081522;

    color:
        #eef5ff;
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .header-call {
        display:
            none;
    }

    .brand-logo {
        width:
            215px;

        max-height:
            52px;
    }

    .home-hero-grid {
        gap:
            44px;
    }

    .workshop-grid {
        gap:
            50px;
    }

    .services-page-intro,
    .contact-hero-grid {
        gap:
            60px;
    }

    .about-hero-grid {
        gap:
            50px;
    }

    .footer-grid {
        gap:
            34px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --header-height:
            70px;
    }

    .desktop-nav,
    .header-actions
    > .button {
        display:
            none;
    }

    .brand-logo {
        width:
            195px;

        max-height:
            48px;
    }

    .menu-toggle {
        display:
            block;
    }

    .mobile-menu {
        display:
            block;

        max-height:
            0;

        overflow:
            hidden;

        transition:
            max-height
            280ms var(--ease);
    }

    .mobile-menu.is-open {
        max-height:
            440px;
    }

    .mobile-menu nav {
        display:
            grid;

        padding:
            4px 0 18px;

        border-top:
            1px solid
            var(--border-dark);
    }

    .mobile-menu a {
        padding:
            13px 3px;

        border-bottom:
            1px solid
            #242c31;

        color:
            #b9c0c4;

        font-size:
            0.86rem;

        font-weight:
            600;
    }

    .mobile-menu
    a.is-active {
        color:
            #ffffff;
    }

    .home-hero-grid,
    .workshop-grid,
    .process-layout,
    .services-page-intro,
    .diagnostic-feature-grid,
    .about-hero-grid,
    .about-intro-grid,
    .contact-hero-grid,
    .contact-main-grid {
        grid-template-columns:
            1fr;
    }

    .home-hero-copy {
        max-width:
            700px;
    }

    .hero-image-wrap {
        height:
            460px;
    }

    .section-heading {
        grid-template-columns:
            1fr;

        gap:
            19px;
    }

    .section-heading-side {
        justify-self:
            start;
    }

    .service-row {
        grid-template-columns:
            50px
            minmax(190px, 0.8fr)
            minmax(250px, 1.2fr)
            30px;
    }

    .workshop-image-mask {
        height:
            490px;
    }

    .process-layout {
        gap:
            46px;
    }

    .process-intro {
        max-width:
            620px;
    }

    .services-page-intro,
    .contact-hero-grid,
    .about-hero-grid {
        gap:
            45px;
    }

    .service-detail-row {
        grid-template-columns:
            50px 1fr;

        gap:
            25px 35px;
    }

    .service-detail-copy {
        grid-column:
            2;
    }

    .diagnostic-feature-media {
        height:
            520px;
    }

    .diagnostic-feature-copy {
        max-width:
            700px;
    }

    .about-hero-image {
        height:
            520px;
    }

    .about-intro-grid {
        gap:
            35px;
    }

    .about-intro-copy {
        padding-top:
            0;
    }

    .about-practical-grid {
        grid-template-columns:
            1fr;
    }

    .about-address {
        border-right:
            0;

        border-bottom:
            1px solid
            var(--border-dark);
    }

    .contact-main-grid {
        gap:
            60px;
    }

    .cta-panel {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            33px;
    }

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }

    .section,
    .workshop-section {
        padding:
            62px 0;
    }

    .header-row,
    .site-header.is-scrolled
    .header-row {
        min-height:
            68px;
    }

    .brand-mark,
    .site-header.is-scrolled
    .brand-mark {
        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        border-radius:
            12px;
    }

    .brand-text span {
        display:
            none;
    }

    .brand-logo {
        width:
            170px;

        max-height:
            44px;
    }

    .home-hero {
        padding:
            46px 0 52px;
    }

    .home-hero-grid {
        gap:
            38px;
    }

    .hero-title {
        font-size:
            clamp(
                2.75rem,
                13vw,
                3.7rem
            );
    }

    .hero-description {
        font-size:
            0.94rem;
    }

    .hero-actions {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            16px;
    }

    .hero-actions
    .button {
        width:
            100%;
    }

    .hero-phone {
        text-align:
            center;
    }

    .hero-practical {
        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            35px;
    }

    .hero-image-wrap {
        height:
            325px;
    }

    .hero-media-label {
        left:
            12px;

        right:
            12px;

        bottom:
            12px;

        width:
            auto;
    }

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

    .trust-item,
    .trust-item:first-child {
        padding:
            18px 0;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);
    }

    .trust-item:last-child {
        border-bottom:
            0;
    }

    .section-heading {
        margin-bottom:
            33px;
    }

    .service-row {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            30px;

        gap:
            8px 14px;

        min-height:
            0;

        padding:
            23px 0;
    }

    .service-row-index {
        grid-column:
            1;

        grid-row:
            1 / span 2;
    }

    .service-row-title {
        grid-column:
            2;
    }

    .service-row p {
        grid-column:
            2;

        font-size:
            0.82rem;
    }

    .service-row-arrow {
        grid-column:
            3;

        grid-row:
            1 / span 2;

        align-self:
            center;
    }

    .service-row:hover {
        padding-left:
            6px;
    }

    .workshop-image-mask {
        height:
            380px;
    }

    .workshop-info {
        grid-template-columns:
            1fr;
    }

    .workshop-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .workshop-actions
    .button {
        width:
            100%;
    }

    .process-item {
        grid-template-columns:
            1fr;

        gap:
            7px;

        padding:
            22px 0;
    }


    /* =====================================================
       SERVICES MOBILE
       ===================================================== */

    .services-page-hero,
    .contact-hero {
        padding:
            64px 0 70px;
    }

    .services-page-title,
    .contact-hero h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }

    .service-detail-row {
        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            52px 0;
    }

    .service-detail-copy {
        grid-column:
            auto;

        padding-top:
            0;
    }

    .diagnostic-feature {
        padding:
            62px 0;
    }

    .diagnostic-feature-media {
        height:
            390px;
    }

    .assistance-lines {
        grid-template-columns:
            1fr;
    }

    .assistance-line {
        min-height:
            205px;

        padding:
            28px 0;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);
    }

    .assistance-line:last-child {
        border-bottom:
            0;
    }

    .assistance-line strong {
        margin-top:
            36px;
    }


    /* =====================================================
       ABOUT MOBILE
       ===================================================== */

    .about-hero {
        padding:
            55px 0;
    }

    .about-hero-copy h1 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }

    .about-hero-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .about-hero-actions
    .button {
        width:
            100%;
    }

    .about-hero-image {
        height:
            400px;
    }

    .about-photo-caption {
        width:
            calc(100% - 20px);
    }

    .about-intro {
        padding:
            70px 0;
    }

    .about-values {
        padding:
            65px 0 75px;
    }

    .about-values-list {
        grid-template-columns:
            1fr;
    }

    .about-value {
        min-height:
            220px;

        padding:
            28px 0;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);
    }

    .about-value:last-child {
        border-bottom:
            0;
    }

    .about-value h3 {
        margin-top:
            38px;
    }

    .about-practical {
        padding:
            45px 0;
    }

    .about-address,
    .about-hours {
        padding:
            40px 0;
    }

    .about-hours-list li {
        flex-direction:
            column;

        gap:
            4px;
    }

    .about-hours-list strong {
        text-align:
            left;
    }


    /* =====================================================
       CONTACT MOBILE
       ===================================================== */

    .contact-main {
        padding:
            70px 0;
    }

    .contact-info-line {
        grid-template-columns:
            1fr;

        gap:
            6px;
    }

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

    .form-submit-row {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .form-submit-row
    .button {
        width:
            100%;
    }

    .contact-location {
        padding:
            70px 0 80px;
    }

    .contact-location-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            16px;
    }

    .contact-location-heading
    > p {
        text-align:
            left;
    }

    .contact-map {
        height:
            380px;
    }


    /* =====================================================
       CTA MOBILE
       ===================================================== */

    .cta-section {
        padding-bottom:
            62px;
    }

    .cta-panel {
        padding:
            32px 25px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .cta-actions {
        align-items:
            stretch;

        flex-direction:
            column;

        width:
            100%;
    }

    .cta-actions
    .button {
        width:
            100%;
    }


    /* =====================================================
       FOOTER MOBILE
       ===================================================== */

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

    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-top:
            38px;
    }

    .footer-logo {
        width:
            220px;

        height:
            auto;
    }


    /* =====================================================
       MOBILE ACTION BAR
       ===================================================== */

    .mobile-action-bar {
        position:
            fixed;

        left:
            12px;

        right:
            12px;

        bottom:
            12px;

        z-index:
            950;

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            7px;

        padding:
            7px;

        border:
            1px solid
            #30383d;

        background:
            rgba(
                16,
                20,
                23,
                0.97
            );

        box-shadow:
            0 12px 32px
            rgba(
                0,
                0,
                0,
                0.25
            );

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);
    }

    .mobile-action-bar a {
        min-height:
            47px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        color:
            #ffffff;

        font-size:
            0.82rem;

        font-weight:
            700;
    }

    .mobile-action-bar
    a:first-child {
        background:
            var(--accent);
    }

    .mobile-action-bar
    a:last-child {
        background:
            var(--whatsapp);
    }

    .footer {
        padding-bottom:
            108px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .brand-mark,
    .site-header.is-scrolled
    .brand-mark {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        border-radius:
            10px;
    }

    .brand-text strong {
        font-size:
            0.92rem;
    }

    .brand-logo {
        width:
            155px;

        max-height:
            40px;
    }

    .hero-image-wrap {
        height:
            285px;
    }

    .workshop-image-mask {
        height:
            330px;
    }

    .about-hero-image {
        height:
            350px;
    }

    .diagnostic-feature-media {
        height:
            340px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

}