@font-face {
  font-family: Instrument Serif;
  src: url(fonts/InstrumentSerif-Regular.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url(fonts/Manrope.ttf) format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --ink: #182723;
  --muted: #42554d;
  --paper: #f8f5ed;
  --cream: #fffaf0;
  --gold: #d6aa72;
  --serif: "Instrument Serif", Georgia, serif;
  font: 500 1rem/1.6 Manrope, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body, figure, h1, h2, p { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #c89452; outline-offset: 5px; }
.wrap { width: min(1296px, calc(100% - 100px)); margin-inline: auto; }
header { background: var(--paper); border-bottom: 1px solid #18272325; }
.top, nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; }
.top { min-height: 78px; justify-content: space-between; padding-block: 13px; }
.brand { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; letter-spacing: .13em; text-decoration: none; }
.brand::before { content: ""; width: 16px; height: 16px; background: var(--ink); transform: skew(-16deg); box-shadow: inset -5px 0 var(--gold); }
nav a { font-size: .83rem; font-weight: 800; text-decoration: none; }
nav a:hover, nav [aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.nav-contact { border: 1px solid #18272380; padding: 8px 16px; }
.hero { position: relative; text-align: center; padding-block: clamp(40px, 5.4vw, 77px) clamp(32px, 4vw, 53px); }
.eyebrow { color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(3.35rem, 8.3vw, 8.4rem); line-height: .86; margin: .17em auto .16em; letter-spacing: -.027em; }
.service h1 { font-size: clamp(3rem, 6.7vw, 6.4rem); max-width: 17ch; }
.lead { color: var(--muted); font-size: clamp(.9rem, 1.55vw, 1.13rem); margin-inline: auto; max-width: 59ch; }
.activities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(36px, 6vw, 84px); }
.card { position: relative; isolation: isolate; display: flex; align-items: end; overflow: hidden; min-height: clamp(390px, 43vw, 580px); background: #1b2726; color: var(--cream); }
.card figure, .card img, .card::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.card img { object-fit: cover; object-position: center 44%; }
.card .office { object-position: center 46%; }
.card::after { content: ""; z-index: -1; background: linear-gradient(0deg, #0c1515f5 1%, #101b1be6 18%, #131c1c46 58%, #10171900 78%); }
.card figure { z-index: -2; }
.card figcaption { display: none; }
.card:has(img:not(.office))::before { content: "Image d’illustration"; position: absolute; inset: 14px auto auto 15px; padding: 3px 8px; color: white; background: #142222d9; font-size: .65rem; }
.card:has(.office)::before { content: "Bureau CLASS · Mise en scène"; position: absolute; inset: 14px auto auto 15px; padding: 3px 8px; color: white; background: #142222d9; font-size: .65rem; }
.copy { position: relative; z-index: 1; padding: clamp(22px, 3.15vw, 48px); }
.copy h2, .detail h2, .contact h2 { line-height: .98; font-size: clamp(2.35rem, 4.45vw, 4.55rem); }
.copy p { color: #fffaf0eb; margin: .55em 0 1.25em; max-width: 42ch; font-size: .89rem; }
.btn { display: inline-block; background: var(--cream); color: var(--ink); padding: 11px 15px; text-decoration: none; font-size: .8rem; font-weight: 800; }
.btn:hover { background: #f0d2ab; }
.detail { max-width: 1010px; padding-bottom: clamp(35px, 6vw, 80px); }
.detail img { display: block; width: 100%; max-height: 590px; object-fit: cover; }
.detail figcaption { font-size: .72rem; color: var(--muted); margin-top: 5px; }
.detail h2 { margin-top: 30px; }
.detail p { margin: 12px 0 18px; max-width: 70ch; }
.detail .btn, .contact { background: var(--ink); color: var(--cream); }
.detail .btn:hover { background: #33483e; }
.contact { padding-block: 36px; }
.contact h2 { font-size: clamp(2.2rem, 4.1vw, 3.7rem); }
.contact address { font-style: normal; margin-top: 12px; }
.contact a { color: #f1d0a3; }
footer { padding-block: 18px; font-size: .78rem; }

@media (max-width: 820px) {
  .wrap { width: calc(100% - 42px); }
  .top, nav { gap: .85rem; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 28px); }
  .top { min-height: 0; padding-block: 14px; }
  nav { gap: .65rem; }
  nav a { font-size: .72rem; }
  .nav-contact { padding: 4px 7px; }
  .activities { grid-template-columns: 1fr; }
  .card { min-height: clamp(365px, 96vw, 480px); }
  .hero { padding-block: 36px 30px; }
}

@media (min-width: 821px) {
  .card { min-height: clamp(390px, 34vw, 485px); }
}