.skip-link { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; top: auto; width: 1px; }
.skip-link:focus { clip-path: none; height: auto; overflow: visible; top: 1rem; width: auto; z-index: 2000; }
.hero, .hero .hero-grid { color: #fff; }
.hero .button { align-items: center; background: #e51e30 !important; border: 1px solid #e51e30 !important; border-radius: 4px; color: #fff !important; display: inline-flex; justify-content: center; min-height: 50px; padding: .75rem 1.1rem; text-decoration: none !important; }
.hero .button:hover { background: #c0392b !important; border-color: #c0392b !important; }
/* The hero secondary CTA follows the same red-outline treatment as service cards. */
.hero .button.button-outline { background: #fff !important; border-color: #e51e30 !important; color: #e51e30 !important; }
.hero .button.button-outline:hover { background: #e51e30 !important; border-color: #e51e30 !important; color: #fff !important; }
.hero .button:focus-visible, .menu-toggle:focus-visible, .primary-nav a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
.hero { align-items: center; display: grid; }
/* Keep homepage hero CTAs visually separate, including when the row wraps. */
.hero .hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .hero-actions > .button { margin: 0; }
.service-card .button { align-items: center; background: #e51e30; border: 1px solid #e51e30; border-radius: 4px; color: #fff; display: inline-flex; justify-content: center; min-height: 44px; padding: .65rem 1rem; text-decoration: none; }
.service-card .button:hover { background: #c0392b; border-color: #c0392b; }
.service-card .button:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
/* Give the homepage agencies CTA the same filled treatment as service buttons. */
.about a[href$="/agences/"].button-outline { align-items: center; background: #e51e30 !important; border: 1px solid #e51e30 !important; border-radius: 4px; color: #fff !important; display: inline-flex; justify-content: center; min-height: 44px; padding: .65rem 1rem; text-decoration: none; }
.about a[href$="/agences/"].button-outline:hover { background: #c0392b !important; border-color: #c0392b !important; color: #fff !important; }
.about a[href$="/agences/"].button-outline:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
.footer-inner { border-top: 1px solid var(--gom-line); padding-top: 1.25rem; text-align: center; }

/* Keep the complete navigation on one line only when it has enough room. */
@media (min-width: 1100px) {
	.header-inner { align-items: center; display: flex; gap: 1.5rem; }
	.site-branding { align-items: center; display: flex; flex: 0 1 auto; gap: .75rem; min-width: 0; }
	.site-title { color: var(--gom-ink); font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
	.menu-toggle { display: none; }
	.primary-nav { margin-left: auto; }
	.primary-nav .menu { align-items: center; display: flex; flex-wrap: nowrap; gap: 0; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
	.primary-nav .menu a { align-items: center; border-radius: 4px; color: var(--gom-ink); display: inline-flex; font-weight: 700; min-height: 44px; padding: .5rem .75rem; text-decoration: none; }
	.primary-nav .menu a:hover, .primary-nav .menu a:focus-visible { background: var(--gom-soft); color: var(--gom-red-dark); }
	.hero .hero-actions { margin-bottom: 1.25rem; }
}

/* The existing accessible hamburger menu also covers tablets and small laptops. */
@media (max-width: 1099px) {
	.site-header .site-shell { width: min(100% - 1.25rem, 75rem); }
	.header-inner { align-items: center; display: flex; flex-wrap: nowrap; gap: .5rem; min-height: 60px; padding-block: .5rem; position: relative; }
	.site-branding { align-items: center; display: flex; flex: 1 1 auto; gap: .5rem; min-width: 0; }
	.brand-logo { flex: 0 0 auto; height: 40px; max-width: 44px; object-fit: contain; width: auto; }
	.site-title { font-size: clamp(.78rem, 3.7vw, 1rem); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
	.menu-toggle { align-items: center; background: #fff; border: 1px solid var(--gom-line); border-radius: 4px; color: var(--gom-ink); display: inline-flex; flex: 0 0 44px; font-size: 1.25rem; height: 44px; justify-content: center; margin-left: 0; padding: 0; width: 44px; }
	.primary-nav { display: none; left: 0; position: absolute; right: 0; top: 100%; z-index: 1; }
	.primary-nav.is-open { background: #fff; border: 1px solid var(--gom-line); box-shadow: 0 4px 10px rgb(0 0 0 / .12); display: block; padding: .5rem; }
	.primary-nav .menu { list-style: none; margin: 0; padding: 0; }
	.primary-nav .menu li + li { margin-top: .25rem; }
	.primary-nav .menu a { align-items: center; color: var(--gom-ink); display: flex; min-height: 44px; overflow-wrap: anywhere; padding: .5rem .75rem; text-decoration: none; }
	.primary-nav .menu a:hover { background: var(--gom-soft); color: var(--gom-red-dark); }
	.hero { background-image: linear-gradient(90deg, rgb(0 0 0 / .70), rgb(0 0 0 / .45)), var(--gom-hero-image); min-height: 500px; }
	.hero h1 { color: #fff !important; font-size: 32px; }
	.hero-grid p { color: #fff !important; font-size: 1.125rem; }
	.hero .button { min-height: 44px; padding: .7rem 1.1rem; }
}

@media (max-width: 359px) { .site-title { font-size: .78rem; } }

@media (max-width: 600px) {
	.hero .hero-actions { width: 100%; }
	.hero .hero-actions > .button { flex: 1 1 100%; width: 100%; }
}