/* II Koc, plomberie à Vénissieux. Une seule feuille, petits écrans d'abord.
   Couleurs en hex uniquement. Quand une photo doit s'effacer dans le bleu nuit, c'est l'image
   qui est rendue translucide (opacity, mask) : aucune couleur transparente. */

:root {
    /* Bleu nuit : la marque */
    --nuit-fonce: #091827;
    --nuit: #0D2033;
    --nuit-clair: #12304A;
    /* Cuivre : l'accent. Le foncé sert au texte et aux traits sur fond clair. */
    --cuivre-fonce: #A64B14;
    --cuivre: #EE8B45;
    /* Neutres */
    --blanc: #FFFFFF;
    --papier: #F6F2EC;
    --bord: #E3DBCF;
    --encre: #142233;
    --gris: #536273;
    /* Sur bleu nuit : texte secondaire et filets */
    --ciel: #A9D2F2;
    --filet-nuit: #24405A;
    --erreur: #B3261E;
    --succes: #1E7A46;

    --police: "Barlow", Arial, sans-serif;
    --police-titre: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --gouttiere: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    margin: 0;
    background: var(--blanc);
    color: var(--encre);
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.55;
    /* Un mot ou un lien très long est coupé au lieu d'élargir la page (RGAA 10.11).
       « anywhere » et non « break-word » : il vaut aussi dans les grilles, dont les colonnes peuvent alors rétrécir. */
    overflow-wrap: anywhere;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; line-height: 1.02; }
h2 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); letter-spacing: -0.005em; }
h3 { font-size: 1.75rem; line-height: 1.08; }

:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; }
.entete :focus-visible,
.hero :focus-visible,
.bande :focus-visible,
.zone :focus-visible,
.pied :focus-visible { outline-color: var(--cuivre); }
main:focus { outline: 0; }

.enveloppe { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere); }
.masque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.picto { flex: none; }

.evitement {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--blanc);
    color: var(--nuit);
    font-weight: 600;
}
.evitement:focus { top: 12px; }

/* ---------- Boutons et liens d'action ---------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    font-family: var(--police);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
}
.bouton-appel {
    min-height: 64px;
    padding: 0 28px 0 22px;
    background: var(--cuivre);
    color: var(--nuit);
    font-family: var(--police-titre);
    font-size: 1.75rem;
    font-weight: 700;
}
.bouton-nuit { background: var(--nuit); color: var(--blanc); }
.bouton-nuit .picto { color: var(--cuivre); }
.bouton:hover { filter: brightness(1.08); }

.lien-souligne {
    display: inline-block;
    padding: 9px 0;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: underline;
    text-decoration-color: var(--cuivre);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}
.lien-souligne:hover { text-decoration-thickness: 3px; }

/* ---------- En-tête ---------- */
/* Dans le flux de la page, sur toutes les pages : sa hauteur suit son contenu (nom long, menu déplié),
   rien n'est posé dessus. Le nom garde au moins 40 % de la largeur ; le bouton d'appel passe sur deux lignes s'il le faut. */
.entete { position: relative; z-index: 10; background: var(--nuit); color: var(--blanc); }
.entete-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "marque bouton"
        "menu menu";
    align-items: center;
    column-gap: 16px;
    min-height: 76px;
    border-bottom: 1px solid var(--filet-nuit);
}
.marque { grid-area: marque; padding: 10px 0; text-decoration: none; }
.marque-nom { display: block; font-family: var(--police-titre); font-size: 1.875rem; font-weight: 700; line-height: 1; }
.marque-nom-long { font-size: 1.5rem; line-height: 1.05; }
.marque-barres { color: var(--cuivre); letter-spacing: 0.06em; }
.marque-metier { display: block; margin-top: 3px; font-size: 0.875rem; color: var(--ciel); }

.menu-bouton {
    grid-area: bouton;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--filet-nuit);
    border-radius: 8px;
    background: none;
    color: var(--blanc);
    font-family: var(--police);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.menu-bouton-fermer,
.menu-bouton[aria-expanded="true"] .menu-bouton-ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .menu-bouton-fermer { display: block; }

/* Sans JavaScript, le menu reste déplié sous le nom ; avec, il se range derrière le bouton « Menu ». */
.navigation { grid-area: menu; padding-bottom: 12px; }
.navigation ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.navigation a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.navigation a:hover { text-decoration: underline; text-decoration-color: var(--cuivre); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.js .menu-bouton { display: inline-flex; }
.js .navigation { display: none; }
.js .navigation.navigation-ouverte { display: block; }
.js .navigation ul { display: block; padding: 6px 0 4px; }
.js .navigation li + li { border-top: 1px solid var(--filet-nuit); }
.js .navigation a { display: flex; min-height: 52px; font-size: 1.125rem; }

.entete-appel {
    grid-area: appel;
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 6px 20px;
    border: 2px solid var(--cuivre);
    border-radius: 23px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.entete-appel .picto { color: var(--cuivre); }
.entete-appel:hover { background: var(--cuivre); color: var(--nuit); }
.entete-appel:hover .picto { color: var(--nuit); }

/* ---------- Haut de page ---------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--nuit);
    color: var(--blanc);
}
.hero-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}
/* Quadrillage de plan, tracé en bleu ciel puis estompé par l'opacité du calque. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--ciel) 1px, transparent 1px),
        linear-gradient(90deg, var(--ciel) 1px, transparent 1px);
    background-size: 120px 120px;
    background-position: -1px -1px;
    opacity: 0.07;
}
.hero-corps { display: grid; gap: 40px; padding-top: 36px; padding-bottom: 48px; }
.hero h1 {
    font-size: clamp(2.5rem, 1.55rem + 4.4vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.hero-accroche { max-width: 34em; margin-top: 22px; font-size: 1.1875rem; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 30px; }
.hero-actions .bouton-appel { flex: 1 1 100%; }

.carte { padding: 12px 12px 10px; border: 1px solid var(--filet-nuit); border-radius: 18px; background: var(--nuit-fonce); }
.carte-svg { width: 100%; height: auto; }
.carte-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 18px;
    padding: 10px 6px 2px;
    border-top: 1px solid var(--filet-nuit);
}
.carte-titre { margin-right: auto; font-family: var(--police-titre); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.carte-legende a { display: inline-block; padding: 11px 0; font-size: 0.9375rem; font-weight: 600; text-underline-offset: 4px; }
.carte-source { flex: 1 1 100%; font-size: 0.8125rem; color: var(--ciel); }

/* Le cercle de la zone se déploie une fois, à l'arrivée sur la page. */
@media (prefers-reduced-motion: no-preference) {
    .carte-rayon { transform-box: fill-box; transform-origin: center; animation: rayon 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
    @keyframes rayon {
        from { transform: scale(0.12); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
}

/* ---------- Prestations ---------- */
.prestations { padding: 64px 0 56px; background: var(--papier); }
.section-tete { display: grid; gap: 14px; margin-bottom: 30px; }
.section-tete p { max-width: 30em; font-size: 1.125rem; color: var(--gris); }
.catalogue { border-bottom: 1px solid var(--bord); }
.prestation { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; padding: 26px 0; border-top: 1px solid var(--bord); }
.prestation-sans-photo { grid-template-columns: 1fr; }
.prestation img { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; background: var(--bord); }
.prestation p { margin-top: 8px; color: var(--gris); }
.details { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 0.9375rem; font-weight: 600; }
.details li { display: flex; align-items: center; gap: 8px; }
.details li::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--cuivre-fonce); }

/* ---------- Bande photo ---------- */
.bande { position: relative; isolation: isolate; overflow: hidden; background: var(--nuit); color: var(--blanc); }
/* Cadrage un peu sous le milieu : dans une photo de pièce ou de chantier, le sujet est rarement en haut. */
.bande-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; opacity: 0.32; }
.bande-corps { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; min-height: 300px; padding-top: 56px; padding-bottom: 56px; }
.bande-phrase { max-width: 15em; font-family: var(--police-titre); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.05; text-wrap: balance; }

/* ---------- Les bons réflexes ---------- */
.reflexes { padding: 64px 0; }
.reflexes-corps { display: grid; gap: 28px; }
.reflexes-photo img { width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; object-fit: cover; background: var(--papier); }
.reflexes-liste { margin-top: 22px; counter-reset: reflexe; }
.reflexes-liste li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 14px 0 14px 58px;
    border-top: 1px solid var(--bord);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
    counter-increment: reflexe;
}
.reflexes-liste li:last-child { border-bottom: 1px solid var(--bord); }
.reflexes-liste li::before {
    content: counter(reflexe);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--police-titre);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cuivre-fonce);
}
/* Sur petit écran, la barre d'appel fixe est déjà sous le pouce : pas de second bouton identique juste au-dessus. */
.reflexes .bouton { display: none; margin-top: 26px; }

/* ---------- Zone d'intervention ---------- */
.zone { position: relative; isolation: isolate; padding: 64px 0; background: var(--nuit-clair); color: var(--blanc); }
/* Quadrillage fin, même principe que celui du haut de page. */
.zone::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--ciel) 1px, transparent 1px),
        linear-gradient(90deg, var(--ciel) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.05;
}
.zone-corps { display: grid; gap: 32px; }
.zone-texte p { max-width: 28em; margin-top: 16px; font-size: 1.125rem; }
.communes { columns: 2; column-gap: 28px; font-weight: 600; }
.communes li { padding: 11px 0; border-bottom: 1px solid var(--filet-nuit); break-inside: avoid; }
.communes li:first-child { color: var(--cuivre); }

/* ---------- Horaires ---------- */
.horaires { padding: 64px 0; }
.horaires-corps { display: grid; gap: 24px; }
.horaires-liste > div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.horaires-liste > div:first-child { border-top: 1px solid var(--bord); }
.horaires-liste dt { font-weight: 600; }
.horaires-liste dd { text-align: right; color: var(--gris); }
.horaires-note { margin-top: 16px; color: var(--gris); }

/* ---------- Présentation ---------- */
.presentation { padding: 64px 0; background: var(--papier); }
.presentation-corps { display: grid; gap: 30px; }
.presentation-photo img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; background: var(--bord); }
.presentation-texte p { max-width: 36em; margin-top: 16px; font-size: 1.125rem; }

/* ---------- Photos de chantiers ---------- */
.galerie { padding: 64px 0; }
.galerie-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 30px; }
.galerie-grille img { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; object-fit: cover; background: var(--papier); }

/* ---------- Avis ---------- */
.avis { padding: 64px 0; background: var(--papier); }
.avis-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 48px; margin-top: 30px; }
.avis-liste li { padding: 24px 0; border-top: 1px solid var(--bord); }
.avis-note { display: flex; margin-bottom: 10px; color: var(--cuivre-fonce); }
.avis-note span[aria-hidden] { display: flex; gap: 2px; }
.avis-note .picto { fill: currentColor; }
.avis blockquote p + p { margin-top: 10px; }
.avis figcaption { margin-top: 12px; font-weight: 600; }

/* ---------- Demande de devis ---------- */
.devis { padding: 64px 0 72px; }
.devis-corps { display: grid; gap: 34px; }
.devis-texte p { max-width: 24em; margin-top: 16px; font-size: 1.125rem; color: var(--gris); }
.devis-contacts { display: grid; gap: 4px; margin-top: 22px; }
.devis-contacts a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; text-underline-offset: 4px; }
.devis-contacts .picto { color: var(--cuivre-fonce); }

.champs-2 { display: grid; gap: 0 18px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; margin-bottom: 7px; font-size: 1rem; font-weight: 600; }
.champ-precision { font-weight: 400; color: var(--gris); }
.champ input,
.champ select,
.champ textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1.5px solid var(--gris);
    border-radius: 8px;
    background-color: var(--blanc);
    color: var(--encre);
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.4;
}
.champ textarea { resize: vertical; }
.champ [aria-invalid="true"] { border-color: var(--erreur); border-width: 2.5px; }
.champ-aide { margin-top: 6px; font-size: 0.9375rem; color: var(--gris); }
.champ-erreur { margin-top: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--erreur); }
.formulaire-bas { display: grid; gap: 14px; }
.formulaire-bas p { font-size: 0.9375rem; color: var(--gris); }
.formulaire-etat { margin-top: 20px; padding: 16px 18px; border-left: 5px solid var(--succes); border-radius: 8px; background: var(--papier); font-weight: 600; }
/* Zone d'annonce toujours présente pour les lecteurs d'écran, invisible tant qu'elle est vide. */
.formulaire-etat:empty { margin: 0; padding: 0; border: 0; }

/* ---------- Pages de texte (mentions légales, confidentialité) ---------- */
.page-texte { padding: 48px 0 72px; }
.page-texte .enveloppe { max-width: 800px; }
.page-texte h1 { font-size: clamp(2.5rem, 2rem + 2.4vw, 3.5rem); }
.page-texte h2 { margin-top: 40px; font-size: 1.875rem; }
.page-texte p { margin-top: 14px; }
.page-texte a { color: var(--cuivre-fonce); font-weight: 600; text-underline-offset: 4px; }
.fiche { margin-top: 16px; }
.fiche > div { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.fiche > div:first-child { border-top: 1px solid var(--bord); }
.fiche dt { color: var(--gris); }
.fiche dd { min-width: 0; font-weight: 600; text-align: right; }

/* ---------- Pied de page ---------- */
.pied { padding: 36px 0 40px; background: var(--nuit-fonce); color: var(--blanc); }
.pied-corps { display: grid; gap: 26px; }
.pied-nom { font-family: var(--police-titre); font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.pied-corps a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 0 26px; }
.pied-gestion { color: var(--ciel); }

/* ---------- Barre d'appel des petits écrans ---------- */
.barre-appel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border: 2px solid var(--nuit);
    border-radius: 10px;
    background: var(--cuivre);
    color: var(--nuit);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}
.pied .barre-appel:focus-visible { outline-color: var(--nuit); outline-offset: -6px; }
/* Tant que le bouton d'appel du haut de page est à l'écran, la barre reste rangée (assets/js/site.js). */
.js .barre-appel:not(.barre-appel-sortie) { transform: translateY(160%); visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .barre-appel { transition: transform 0.25s ease-out, visibility 0.25s; }
}
.pied { padding-bottom: 116px; } /* la place de la barre d'appel */
:root { --ea-bouton-bas: 92px; } /* le bouton « Modifier mon site » de l'espace artisan passe au-dessus de la barre */

/* ---------- À partir de 700 px ---------- */
@media (min-width: 700px) {
    :root { --gouttiere: 32px; --ea-bouton-bas: 16px; }
    .pied { padding-bottom: 40px; }
    .barre-appel { display: none; }
    .entete-corps {
        grid-template-columns: minmax(40%, 1fr) auto auto;
        grid-template-areas:
            "marque appel bouton"
            "menu menu menu";
    }
    .entete-appel { display: inline-flex; }
    .hero-actions .bouton-appel { flex: none; }
    .prestations, .reflexes, .zone, .horaires, .presentation, .galerie, .avis { padding: 88px 0; }
    .devis { padding: 88px 0 96px; }
    .prestation { grid-template-columns: 128px 1fr; gap: 26px; padding: 32px 0; }
    .prestation-sans-photo { grid-template-columns: 1fr; }
    .prestation img { width: 128px; height: 128px; border-radius: 20px; }
    .champs-2 { grid-template-columns: 1fr 1fr; }
    .formulaire-bas { grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
    .reflexes .bouton { display: inline-flex; }
    .reflexes-avec-photo { grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; }
    .reflexes-photo img { aspect-ratio: 1; }
    .communes { columns: 3; }
    .bande-corps { min-height: 380px; }
    .pied-corps { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- À partir de 1000 px ---------- */
@media (min-width: 1000px) {
    :root { --gouttiere: 56px; }
    /* La photo se révèle vers la droite et vers le bas : le titre à gauche reste sur un bleu nuit
       presque plein, lisible quelle que soit la photo choisie, et la photo naît sous l'en-tête sans coupure. */
    .hero-photo {
        opacity: 0.5;
        -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 82%), linear-gradient(transparent, #000 200px);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 22%, #000 82%), linear-gradient(transparent, #000 200px);
        mask-composite: intersect;
    }
    .hero-corps { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 64px; align-items: center; min-height: min(84vh, 800px); padding-top: 56px; padding-bottom: 80px; }
    .hero-accroche { font-size: 1.25rem; }
    .carte { padding: 16px 16px 12px; }

    .section-tete { grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 44px; }
    .catalogue { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
    .bande-photo {
        opacity: 0.8;
        -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 88%);
        mask-image: linear-gradient(90deg, transparent 42%, #000 88%);
    }
    .bande-phrase { max-width: 12em; }
    .zone-corps { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
    .horaires-corps { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
    .reflexes-avec-photo { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
    .presentation-avec-photo { grid-template-columns: 420px 1fr; gap: 72px; align-items: center; }
    .devis-corps { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
}

/* ---------- À partir de 1100 px : le menu est écrit dans l'en-tête ---------- */
/* Le menu garde au moins la moitié de la largeur. S'il manque de place (noms longs, cinq entrées), le nom,
   le menu et le bouton d'appel passent chacun sur deux lignes et l'en-tête grandit. */
@media (min-width: 1100px) {
    .entete-corps {
        grid-template-columns: minmax(0, auto) minmax(50%, 1fr) minmax(0, auto);
        grid-template-areas: "marque menu appel";
        column-gap: 28px;
        min-height: 92px;
    }
    .menu-bouton, .js .menu-bouton { display: none; }
    .navigation, .js .navigation { display: block; padding: 0; }
    .navigation ul, .js .navigation ul { display: flex; justify-content: flex-end; gap: 0 26px; padding: 0; }
    .js .navigation li + li { border-top: 0; }
    .js .navigation a { display: inline-flex; min-height: 44px; font-size: 1.0625rem; }
}