/* New Frank loads from Adobe Fonts; Space Grotesk is self-hosted. */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --blanc-atelier: #f5f4f0;
  --noir: #050505;
  --graphite: #343434;
  --acier: #777;
  --aluminium: #b8b8b8;
  --ligne: #dadada;
  --rouge-clair: #ff4a4f;
  --rouge-signal: #e30613;
  --white: #fff;
  --content-width: 1040px;
  --header-height: 106px;
  --gutter: 48px;
  --font-body: "Space Grotesk", Arial, sans-serif;
  --font-heading: "new-frank", Arial, sans-serif;
  /* Figma text styles in rem; 1rem = 16px at the browser's default size. */
  --type-display-xl: 700 7.5rem/3.5rem var(--font-heading);
  --type-h2: 800 3rem/3.3125rem var(--font-heading);
  --type-h3: 800 2.25rem/2.6875rem var(--font-heading);
  --type-p-large: 400 1.25rem/2.25rem var(--font-body);
  --type-p-regular: 500 1rem/1.625rem var(--font-body);
  --type-p-medium: 400 .875rem/1.375rem var(--font-body);
  --type-small-heading: 700 .875rem/1.25rem var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; background: var(--blanc-atelier); color: var(--graphite); font: var(--type-p-regular); }
main { padding-top: var(--header-height); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
button, a, [tabindex] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.container { width: min(var(--content-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* Header / Figma 39:275. Navigation extends 20px past the content at desktop. */
.site-header { position: fixed; top: 0; inset-inline: 0; z-index: 5; height: var(--header-height); border-bottom: 1px solid var(--ligne); background: var(--blanc-atelier); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { position: relative; display: block; flex: 0 0 79px; height: 53px; margin-left: -1px; overflow: clip; }
.brand__cpc { position: absolute; top: 14.57%; left: .02%; }
.brand__cpc img { transform: scale(.731482, .736111); transform-origin: left top; }
.brand__enseignes { position: absolute; top: 0; left: .6%; }
.brand__enseignes img { transform: scale(2.4401125, .2973); transform-origin: left top; }
.navigation { display: flex; align-items: center; gap: 20px; margin-right: -20px; }
.navigation__link { display: flex; height: 72px; align-items: center; justify-content: center; padding: 18px 20px; border: 0 solid transparent; border-radius: 0; background: transparent; font: var(--type-p-large); text-transform: uppercase; transition: border-color 300ms ease-out, border-width 300ms ease-out, border-radius 300ms ease-out; }
.navigation__link:hover { border-width: 1px; border-color: var(--graphite); border-radius: 42px; }
.navigation__link:first-child { min-width: 127px; }
.navigation__link:last-child { min-width: 119px; }

/* Figma crop geometry is applied to each image, including the portrait sources. */
.carousel { position: relative; aspect-ratio: 1040 / 564; overflow: hidden; background: var(--graphite); }
.carousel__slide { position: absolute; inset: 0; overflow: hidden; }
.carousel__image { position: absolute; top: var(--image-top, -28.9291%); left: 0; width: 100%; height: var(--image-height, 184.3972%); }

/* Intro / Figma 39:57. The zero-height separators preserve the original spacing. */
.intro { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; padding-block: 30px; }
.intro__title { display: flex; align-items: center; height: 7.375rem; color: var(--noir); font-weight: 800; }
.intro__on { min-width: 11.5625rem; padding-right: .625rem; font: var(--type-display-xl); text-transform: uppercase; }
.intro__verbs { display: flex; flex-direction: column; width: 13.875rem; }
.intro__verb { height: 2.875rem; margin-bottom: -.4375rem; font: var(--type-h3); text-transform: uppercase; }
.intro__tagline { font: var(--type-p-regular); }
.separator { width: 100%; height: 1px; margin-block: -.5px; overflow: clip; }
.intro__copy { max-width: 491px; color: var(--acier); font-size: 1rem; line-height: 1.625rem; }
.estimate-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 15px; min-width: 315px; min-height: 72px; padding: 18px 30px; border-radius: 40px; background: var(--rouge-clair); color: var(--white); font: var(--type-p-large); text-transform: uppercase; transition: background 400ms ease-out, color 400ms ease-out, gap 400ms ease-out; }
.estimate-button:hover { gap: 25px; background: var(--white); color: var(--rouge-clair); }

/* Footer / Figma 39:109. */
.contact { display: flex; flex-direction: column; gap: 20px; padding-block: 30px; margin-top: 10px; }
.contact__title { color: var(--noir); font: var(--type-h2); text-transform: uppercase; }
.contact__title > span { display: block; }
.contact__accent { color: var(--rouge-clair); }
.contact__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 72px 72px; gap: 20px; }
.contact__label { margin-bottom: 10px; color: var(--rouge-signal); font: var(--type-small-heading); }
.contact address { font-style: normal; }
.social-link { display: block; position: relative; width: 72px; height: 72px; border-radius: 50%; }
.social-link img { position: absolute; top: 0; left: 0; transition: opacity 300ms ease-out; }
.social-link__hover { opacity: 0; }
.social-link:hover .social-link__hover, .social-link:focus-visible .social-link__hover { opacity: 1; }
.social-link:hover .social-link__default, .social-link:focus-visible .social-link__default { opacity: 0; }
.contact__copyright { color: var(--aluminium); font: var(--type-p-medium); }

@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .contact__grid { grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.4fr) 72px 72px; gap: 16px; }
  .contact__title { font-size: 2.625rem; line-height: 3rem; }
}

@media (max-width: 700px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px 20px; }
  .social-link { grid-row: 2; grid-column: 1; }
  .social-link:last-child { grid-column: 1; margin-left: 92px; }
  .contact__details { grid-column: 2; grid-row: 1; }
  .contact__title { font-size: 2.25rem; line-height: 2.5625rem; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; --header-height: 88px; }
  .brand { transform: scale(.88); transform-origin: left center; }
  .navigation { gap: 4px; margin-right: -12px; }
  .navigation__link { height: 52px; padding: 12px; font-size: .875rem; line-height: 1.75rem; }
  .navigation__link:first-child, .navigation__link:last-child { min-width: 0; }
  .carousel { aspect-ratio: 1040 / 700; }
  .carousel__image { top: calc(var(--crop-top, -28.9291%) * .805714); height: calc(var(--crop-height, 184.3972%) * .805714); }
  .intro { padding-top: 24px; padding-bottom: 24px; }
  .intro__title { height: 6rem; }
  .intro__on { min-width: 0; font-size: clamp(4.5rem, 23.59vw, 5.75rem); line-height: 3.5rem; }
  .intro__verbs { width: auto; }
  .intro__verb { height: 2.25rem; margin-bottom: -.3125rem; font-size: clamp(1.375rem, 7.18vw, 1.75rem); line-height: 2.125rem; }
  .intro__tagline { font-size: .875rem; line-height: 1.5rem; }
  .intro__copy { font-size: .9375rem; line-height: 1.5625rem; }
  .estimate-button { min-width: 0; min-height: 60px; padding: 14px 24px; gap: 12px; font-size: 1rem; line-height: 2rem; }
  .contact { margin-top: 8px; padding-top: 24px; padding-bottom: 28px; }
  .contact__title { font-size: clamp(1.5625rem, 6.75vw, 2.25rem); line-height: 1.15; overflow-wrap: anywhere; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact__details { grid-column: 1; grid-row: 2; }
  .social-link { grid-row: 3; }
  .social-link:last-child { margin-left: 92px; }
  .contact__copyright { font-size: .75rem; line-height: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}