/* ==========================================================================
   One Hour Labs · Site institutionnel

   Mise en page propre au site. Toute la charte vient du design system
   (vendor/ohl) : aucune couleur écrite en dur ici, uniquement des tokens
   --ohl-*, au besoin passés par color-mix. tools/check_site.py le vérifie.

   Le parti pris tient en trois règles :

   1. Une seule inversion dans toute la page, la bande violette des services.
      C'est elle qui sépare ce que nous sommes de ce que nous vendons, et
      c'est le seul moment fort : tout le reste se tient au calme.
   2. Chaque couleur dit une chose. Le vert pour une application en service,
      l'ambre pour une application à venir, par les couleurs d'état du design
      system. L'orange de marque ne sert plus qu'aux étiquettes de la bande
      violette et au rond creux de la carte One Step. Jamais en aplat, sauf le
      halo du hero, qui est un lavis et non un signal.
   3. Les cartes sont réservées aux applications. Une boîte doit porter un
      objet distinct, avec un état et une adresse ; sept domaines d'égale
      importance n'en sont pas, et une grille de boîtes le ferait croire.
   ========================================================================== */

/* --- Échelle propre au site ----------------------------------------------- */

:root {
  /* Respiration des sections, resserrée sur petit écran. */
  --site-section-space: clamp(56px, 7vw, 104px);
  /* Largeur de lecture confortable pour un paragraphe courant. */
  --site-measure: 62ch;
}

/* --- Registre typographique utilitaire ------------------------------------- */

/* Le surtitre est la seule voix « technique » de la page : capitales,
   interlettrage ouvert, petit corps. Il sert d'étiquette de champ, jamais de
   titre, et contraste avec le display très serré du design system. */
.site-eyebrow {
  margin: 0;
  font-size: var(--ohl-type-caption-size);
  line-height: var(--ohl-type-caption-line-height);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ohl-text-secondary);
}

/* Chiffres et identifiants : tabulaires, pour qu'un BRN se lise comme une
   référence et non comme du texte courant. */
.site-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* --- En-tête --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Translucide et floutée : le contenu qui passe dessous reste deviné, ce qui
     situe la barre au-dessus de la page plutôt que dans son flux. Le filet est
     permanent : le faire apparaître au défilement demanderait du JavaScript
     pour un gain que personne ne remarque. */
  background-color: color-mix(in srgb, var(--ohl-bg-canvas) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--ohl-border-subtle);
}

.site-header__inner {
  inline-size: min(100% - 48px, 1200px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--ohl-space-24);
  min-block-size: 72px;
}
@media (max-width: 640px) {
  .site-header__inner { inline-size: min(100% - 32px, 1200px); gap: var(--ohl-space-12); }
}

.site-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.site-brand .ohl-logo { height: 34px; width: auto; max-width: none; }
@media (max-width: 420px) { .site-brand .ohl-logo { height: 26px; } }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ohl-space-4);
  margin-inline-start: auto;
}

/* Les ancres sont des capsules, comme le fût du symbole de marque. Au repos
   elles ne portent aucun fond : seul le survol en pose un. */
.site-nav__link {
  padding: var(--ohl-space-6) var(--ohl-space-12);
  border-radius: var(--ohl-radius-999);
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  font-weight: 600;
  color: var(--ohl-text-secondary);
  text-decoration: none;
  transition: background-color var(--ohl-duration-150) var(--ohl-ease),
              color var(--ohl-duration-150) var(--ohl-ease);
}
.site-nav__link:hover { background-color: var(--ohl-bg-hover); color: var(--ohl-text-primary); }

.site-lang { flex: 0 0 auto; }
.site-lang label { font-size: var(--ohl-type-small-size); }

/* --- Menu repliable (petits écrans) ---------------------------------------- */

.site-menu { display: none; position: relative; flex: 0 0 auto; }

.site-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ohl-size-40);
  block-size: var(--ohl-size-40);
  border-radius: var(--ohl-radius-999);
  cursor: pointer;
  list-style: none;
  color: var(--ohl-text-primary);
}
.site-menu__button::-webkit-details-marker { display: none; }
.site-menu__button:hover { background-color: var(--ohl-bg-hover); }

/* Trois filets, dessinés en bordures : aucune image à charger. */
.site-menu__bars,
.site-menu__bars::before,
.site-menu__bars::after {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  border-radius: var(--ohl-radius-999);
  background-color: currentcolor;
}
.site-menu__bars { position: relative; }
.site-menu__bars::before,
.site-menu__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.site-menu__bars::before { inset-block-start: -6px; }
.site-menu__bars::after { inset-block-start: 6px; }

.site-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--ohl-space-8));
  inset-inline-end: 0;
  min-inline-size: 220px;
  display: flex;
  flex-direction: column;
  padding: var(--ohl-space-8);
  border: 1px solid var(--ohl-border-subtle);
  border-radius: var(--ohl-radius-16);
  background-color: var(--ohl-bg-surface);
  box-shadow: 0 18px 40px -20px var(--ohl-shadow-floating);
}
.site-menu__link {
  padding: var(--ohl-space-12);
  border-radius: var(--ohl-radius-8);
  font-size: var(--ohl-type-body-size);
  font-weight: 600;
  color: var(--ohl-text-primary);
  text-decoration: none;
}
.site-menu__link:hover { background-color: var(--ohl-bg-hover); }

/* Sous 900 px les cinq ancres n'entrent plus sur la ligne : elles passent
   dans le dépliant plutôt que de disparaître. */
@media (max-width: 899px) {
  .site-nav { display: none; }
  /* Un lien unique tient sur la ligne à toute largeur : la page de contenu
     garde sa navigation visible, sans dépliant. */
  .site-nav--back { display: flex; }
  .site-menu { display: block; margin-inline-start: auto; }
  .site-lang { order: 2; }
  .site-menu { order: 3; }
}

/* --- Hero ------------------------------------------------------------------ */

.site-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 112px) clamp(48px, 7vw, 96px);
}

/* Halo repris du symbole : le rond violet et le rond orange, très dilués,
   posés hors champ en haut à droite. Il donne de la profondeur au fond ivoire
   sans qu'aucune forme ne soit reconnaissable. */
.site-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -260px;
  inset-inline-end: -200px;
  inline-size: 680px;
  block-size: 680px;
  /* « closest-side » et non un pourcentage : le dégradé atteint le transparent
     au bord le plus proche, donc il est déjà éteint partout ailleurs. Avec un
     rayon exprimé en pourcentage, il débordait d'un côté et la boîte laissait
     voir son arête. */
  background:
    radial-gradient(circle closest-side at 64% 66%, color-mix(in srgb, var(--ohl-orange) 30%, transparent), transparent),
    radial-gradient(circle closest-side at 38% 34%, color-mix(in srgb, var(--ohl-violet) 22%, transparent), transparent);
  pointer-events: none;
}
@media (max-width: 767px) {
  .site-hero::after { inline-size: 440px; block-size: 440px; inset-block-start: -200px; inset-inline-end: -170px; }
}

.site-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 1023px) { .site-hero__grid { grid-template-columns: 1fr; gap: var(--ohl-space-48); } }

.site-hero__statement > * { margin: 0; }
.site-hero__statement > * + * { margin-block-start: var(--ohl-space-24); }
.site-hero__title { max-inline-size: none; text-wrap: balance; }
.site-hero__lead { max-inline-size: 54ch; }

.site-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ohl-space-12); }
@media (max-width: 520px) {
  .site-hero__actions { flex-direction: column; align-items: stretch; }
  .site-hero__actions .ohl-button { inline-size: 100%; justify-content: center; }
}

/* L'illustration : nos propres écrans, en pile. Fond transparent, donc elle
   tient sur l'ivoire comme sur le fond sombre, et elle ne porte ni cadre ni
   ombre en CSS, les ombres sont dans l'image. */
.site-hero__visual img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 620px;
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .site-hero__visual { order: 2; }
  .site-hero__visual img { max-inline-size: 560px; margin-inline: 0; }
}

/* L'entité juridique en bandeau : une ligne de faits sous l'énoncé, réglée
   comme un en-tête de papier à lettres. Le filet est violet et non orange :
   l'orange ne dit qu'une chose sur cette page, « en service ». */
.site-entity {
  position: relative;
  margin-block-start: clamp(40px, 5vw, 72px);
  padding-block-start: var(--ohl-space-24);
  border-block-start: 1px solid var(--ohl-border-subtle);
}

.site-entity__list {
  margin: var(--ohl-space-16) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ohl-space-24);
}
@media (max-width: 899px) { .site-entity__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .site-entity__list { grid-template-columns: 1fr; gap: var(--ohl-space-16); } }

.site-entity__item { display: grid; gap: var(--ohl-space-2); }
.site-entity__item dt {
  margin: 0;
  font-size: var(--ohl-type-caption-size);
  line-height: var(--ohl-type-caption-line-height);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ohl-text-muted);
}
.site-entity__item dd {
  margin: 0;
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  font-weight: 600;
  color: var(--ohl-text-primary);
}

/* --- Sections -------------------------------------------------------------- */

.site-section { padding-block: var(--site-section-space); }
/* Deux sections qui se suivent cumulaient leurs marges et creusaient un vide
   du double de la respiration voulue : une seule des deux la porte. */
.site-section + .site-section,
.site-hero + .site-section { padding-block-start: 0; }
.site-section--close { padding-block-end: clamp(64px, 8vw, 120px); }

.site-section__head { max-inline-size: 760px; margin-block-end: clamp(32px, 4vw, 56px); }
.site-section__head > * { margin: 0; }
.site-section__head > * + * { margin-block-start: var(--ohl-space-16); }
.site-section__intro { max-inline-size: var(--site-measure); }

/* --- Activités : liste typographique, sans numéro ni boîte ----------------- */

.site-capabilities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}
@media (max-width: 767px) { .site-capabilities { grid-template-columns: 1fr; } }

.site-capability {
  padding-block: var(--ohl-space-24);
  border-block-start: 1px solid var(--ohl-border-subtle);
}
/* Les deux premières lignes de la grille n'ont pas de filet au-dessus : le
   titre de section fait déjà la séparation. */
.site-capability:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
@media (max-width: 767px) {
  .site-capability:nth-child(2) { border-block-start: 1px solid var(--ohl-border-subtle); padding-block-start: var(--ohl-space-24); }
}

.site-capability__title {
  margin: 0 0 var(--ohl-space-8);
  font-size: var(--ohl-type-h5-size);
  line-height: var(--ohl-type-h5-line-height);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ohl-text-primary);
}
.site-capability p { margin: 0; max-inline-size: 48ch; }

/* --- Bande services : la seule inversion de la page ------------------------ */

.site-band {
  background-color: var(--ohl-violet);
  color: var(--ohl-text-primary);
  padding-block: clamp(64px, 8vw, 120px);
}
/* Le violet de marque est plus soutenu que la surface sombre par défaut :
   on le pose comme surface pour que cartes et filets s'y accordent. */
.site-band { --ohl-bg-surface: var(--ohl-violet); }

.site-band__head { max-inline-size: 820px; margin-block-end: clamp(40px, 5vw, 64px); }
.site-band__head > * { margin: 0; }
.site-band__head > * + * { margin-block-start: var(--ohl-space-16); }
.site-band__head .site-eyebrow { color: var(--ohl-brand-accent); }
.site-band__intro { max-inline-size: var(--site-measure); color: var(--ohl-text-secondary); }

.site-scope {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 56px);
}
@media (max-width: 1023px) { .site-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .site-scope { grid-template-columns: 1fr; } }

.site-scope__item {
  padding-block-start: var(--ohl-space-16);
  border-block-start: 1px solid color-mix(in srgb, var(--ohl-lavande) 28%, transparent);
}
.site-scope__title {
  margin: 0 0 var(--ohl-space-8);
  font-size: var(--ohl-type-h6-size);
  line-height: var(--ohl-type-h6-line-height);
  font-weight: 700;
  color: var(--ohl-text-primary);
}
.site-scope__item p {
  margin: 0;
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  color: var(--ohl-text-secondary);
}

/* Le socle technique ferme la bande comme une ligne de pied de fiche. */
.site-band__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ohl-space-8) var(--ohl-space-16);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-block-start: var(--ohl-space-24);
  border-block-start: 1px solid color-mix(in srgb, var(--ohl-lavande) 28%, transparent);
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  color: var(--ohl-text-secondary);
}
.site-band__foot .site-eyebrow { color: var(--ohl-brand-accent); }

/* --- Applications : les seules cartes de la page --------------------------- */

.site-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ohl-space-24);
}
@media (max-width: 1023px) { .site-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .site-products { grid-template-columns: 1fr; } }

.site-product {
  display: flex;
  flex-direction: column;
  /* Aucun rembourrage sur la carte : la capture doit toucher les bords, le
     corps porte son propre rembourrage. */
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ohl-border-subtle);
  border-radius: var(--ohl-radius-16);
  background-color: var(--ohl-bg-surface);
  transition: border-color var(--ohl-duration-200) var(--ohl-ease),
              transform var(--ohl-duration-200) var(--ohl-ease),
              box-shadow var(--ohl-duration-200) var(--ohl-ease);
}

/* La capture de l'application. Rapport fixe pour que les cinq cartes
   s'alignent quelle que soit la hauteur de la page capturée, et cadrage par le
   haut : c'est là que vit l'en-tête du produit. */
.site-product__shot {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-block-end: 1px solid var(--ohl-border-subtle);
  background-color: var(--ohl-bg-subtle);
}

/* One Step n'est pas publiée : à la place de la capture, le symbole de marque,
   dont le rond orange reste creux tant que rien n'est en ligne. */
.site-product__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ohl-bg-subtle);
}
/* --ohl-bg-inverse bascule avec le thème, violet sur clair et ivoire sur
   sombre : le symbole reste visible des deux côtés. Le violet brut,
   dilué, disparaissait sur le fond sombre. */
.site-mark__bar { fill: color-mix(in srgb, var(--ohl-bg-inverse) 32%, transparent); }
.site-mark__pending {
  fill: none;
  stroke: color-mix(in srgb, var(--ohl-orange) 55%, transparent);
  stroke-width: 4;
}

.site-product__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ohl-space-12);
  padding: var(--ohl-space-24);
}
.site-product:hover {
  border-color: color-mix(in srgb, var(--ohl-violet) 35%, var(--ohl-border-subtle));
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -24px var(--ohl-shadow-floating);
}

.site-product__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ohl-space-12);
  flex-wrap: wrap;
}
.site-product__name {
  margin: 0;
  font-size: var(--ohl-type-h4-size);
  line-height: var(--ohl-type-h4-line-height);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ohl-text-primary);
}
.site-product p { margin: 0; flex: 1 1 auto; }

.site-product__link {
  margin-block-start: auto;
  padding-block-start: var(--ohl-space-12);
  border-block-start: 1px solid var(--ohl-border-subtle);
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  font-weight: 600;
  color: var(--ohl-text-link);
  text-decoration: none;
}
.site-product__link:hover { text-decoration: underline; }
.site-product__link--none { color: var(--ohl-text-muted); }

/* L'état de l'application, par les couleurs d'état du design system et non par
   l'accent de marque : vert pour ce qui tourne, ambre pour ce qui vient. Elles
   sont faites pour être lisibles, là où l'orange de marque ne donne que 2,1:1
   sur l'ivoire, très en deçà du seuil pour un texte de douze pixels.

   Le libellé reste écrit à côté du point : la couleur ne porte jamais seule
   l'information, pour qui ne la distingue pas. */
.site-state {
  display: inline-flex;
  align-items: center;
  gap: var(--ohl-space-6);
  font-size: var(--ohl-type-caption-size);
  line-height: var(--ohl-type-caption-line-height);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ohl-text-muted);
}
.site-dot {
  inline-size: var(--ohl-space-8);
  block-size: var(--ohl-space-8);
  border-radius: var(--ohl-radius-999);
  background-color: currentcolor;
  flex: 0 0 auto;
}
.site-state--live { color: var(--ohl-status-success-strong); }
.site-state--soon { color: var(--ohl-status-warning-strong); }

/* --- Société : le lieu, puis la table de faits ----------------------------- */

/* Large et courte : elle situe la société sans prendre la place du texte
   légal, qui est ce que la section doit d'abord donner à lire. */
.site-place {
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.site-place img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 45 / 16;
  object-fit: cover;
  border-radius: var(--ohl-radius-16);
}
@media (max-width: 639px) { .site-place img { aspect-ratio: 3 / 2; } }

.site-place__caption {
  margin-block-start: var(--ohl-space-8);
  font-size: var(--ohl-type-caption-size);
  line-height: var(--ohl-type-caption-line-height);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ohl-text-muted);
}

/* --- Société : table de faits ---------------------------------------------- */

.site-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}
@media (max-width: 767px) { .site-facts { grid-template-columns: 1fr; } }

.site-fact {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.3fr);
  gap: var(--ohl-space-16);
  padding-block: var(--ohl-space-16);
  border-block-start: 1px solid var(--ohl-border-subtle);
}
.site-facts .site-fact:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
@media (max-width: 767px) {
  .site-facts .site-fact:nth-child(2) { border-block-start: 1px solid var(--ohl-border-subtle); padding-block-start: var(--ohl-space-16); }
}
@media (max-width: 479px) { .site-fact { grid-template-columns: 1fr; gap: var(--ohl-space-4); } }

.site-fact dt {
  margin: 0;
  font-size: var(--ohl-type-caption-size);
  line-height: var(--ohl-type-caption-line-height);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ohl-text-muted);
  padding-block-start: var(--ohl-space-2);
}
.site-fact dd {
  margin: 0;
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  font-weight: 500;
  color: var(--ohl-text-primary);
}

/* --- Contact --------------------------------------------------------------- */

.site-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--ohl-radius-24);
  background-color: var(--ohl-bg-subtle);
  border: 1px solid var(--ohl-border-subtle);
}
@media (max-width: 899px) { .site-contact { grid-template-columns: 1fr; } }

.site-contact__lead > * { margin: 0; }
.site-contact__lead > * + * { margin-block-start: var(--ohl-space-16); }
.site-contact__lead h2 { max-inline-size: 18ch; }
.site-contact__lead p { max-inline-size: 52ch; color: var(--ohl-text-secondary); }
.site-contact__action { margin-block-start: var(--ohl-space-24); }

.site-contact__facts { margin: 0; }
.site-contact__facts .site-fact:first-child { border-block-start: 0; padding-block-start: 0; }

/* --- Pied de page ---------------------------------------------------------- */

.site-footer {
  border-block-start: 1px solid var(--ohl-border-subtle);
  padding-block: var(--ohl-space-32);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ohl-space-12) var(--ohl-space-24);
  font-size: var(--ohl-type-small-size);
  line-height: var(--ohl-type-small-line-height);
  color: var(--ohl-text-muted);
}
.site-footer__push { margin-inline-start: auto; }
@media (max-width: 640px) { .site-footer__push { margin-inline-start: 0; } }

/* --- Page de contenu (politique de confidentialité) ------------------------ */

.site-prose {
  max-inline-size: 760px;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 80px);
}
.site-prose > * + * { margin-block-start: var(--ohl-space-32); }
.site-prose h2 {
  margin-block-start: var(--ohl-space-48);
  padding-block-start: var(--ohl-space-24);
  border-block-start: 1px solid var(--ohl-border-subtle);
}
.site-prose h3 { margin-block-start: var(--ohl-space-32); }

/* --- Accessibilité --------------------------------------------------------- */

/* Le design system pose déjà un anneau de focus sur ses composants ; les
   éléments propres au site doivent le porter aussi. */
.site-nav__link:focus-visible,
.site-menu__button:focus-visible,
.site-menu__link:focus-visible,
.site-product__link:focus-visible,
.site-footer__push:focus-visible {
  outline: 2px solid var(--ohl-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ohl-radius-4);
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav__link,
  .site-product { transition: none; }
  .site-product:hover { transform: none; }
}