@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/alegreya-sans-800.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/alegreya-sans-800-italic.woff2") format("woff2"); }

:root {
  --bordeaux: #7A1424;
  --bordeaux-dark: #5C0E1A;
  --laiton: #B09A62;
  --laiton-dark: #8C7A49;
  --encre: #1E1B18;
  --mur: #F6F5F2;
  --mur-gris: #E6E3DD;
  --sol: #2F302C;
  --gutter: 24px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mur);
  color: var(--encre);
  font-family: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
p { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: var(--bordeaux); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }

/* Wordmark */
.mark { color: var(--encre); text-decoration: none; font-size: 20px; line-height: 1.1; white-space: nowrap; }
.mark-a { font-style: italic; font-weight: 500; }
.mark-b { font-weight: 800; }

/* Actions */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--bordeaux); color: #fff;
  font-weight: 800; font-size: 19px; text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 300ms ease;
}
.link-arrow { font-weight: 500; font-size: 19px; color: var(--encre); text-decoration: underline; }
.link-arrow::after { content: " →"; }
.link-arrow.on-dark { color: var(--mur); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--bordeaux-dark); }
  .link-arrow:hover { color: var(--bordeaux); }
  .link-arrow.on-dark:hover { color: #fff; text-decoration-thickness: 2px; }
}

/* Top: header + hero, one screen */
.top { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.bar-phone { display: none; font-weight: 800; font-size: 22px; color: var(--bordeaux); text-decoration: none; font-variant-numeric: lining-nums; }
@media (hover: hover) and (pointer: fine) { .bar-phone:hover { text-decoration: underline; } }

.hero { flex: 1; display: flex; flex-direction: column; }
.hero-text { padding: 16px var(--gutter) 32px; }
h1 {
  font-weight: 800;
  font-size: clamp(42px, 12.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.012em;
}
.lead { font-weight: 500; font-size: 20px; line-height: 1.4; }
.hero .lead { margin-top: 24px; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.proof { margin-top: 32px; max-width: 36ch; font-size: 16px; font-weight: 500; line-height: 1.4; }

.hero-photo { flex: 1; min-height: 200px; position: relative; overflow: hidden; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }

/* The plaque */
.wall { background: var(--mur-gris); padding: 64px 0; }
.wall-grid { display: grid; gap: 48px; }
.wall-main { display: flex; flex-direction: column; align-items: center; }
.plate {
  position: relative;
  width: 100%; max-width: 900px;
  background: var(--laiton);
  color: var(--encre);
  padding: 40px 28px 44px;
  border-radius: var(--radius);
}
.screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--laiton-dark); }
.screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #6E5F37; transform: rotate(-35deg); }
.s1 { left: 12px; top: 12px; } .s2 { right: 12px; top: 12px; } .s3 { left: 12px; bottom: 12px; } .s4 { right: 12px; bottom: 12px; }
.s2::after, .s3::after { transform: rotate(20deg); }
.plate-title {
  font-style: italic; font-weight: 800;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
}
.plate-title em { text-transform: none; }
.plate-rows { margin-top: 28px; display: grid; gap: 20px; }
.plate-rows div { display: grid; gap: 2px; text-align: center; }
.plate-rows dt { font-style: italic; font-weight: 800; font-size: clamp(16px, 1.9vw, 25px); text-transform: uppercase; letter-spacing: 0.03em; }
.plate-rows dd { font-style: italic; font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.wall-note { margin-top: 32px; max-width: 34ch; text-align: center; font-size: 19px; line-height: 1.45; }

/* The waiting room, by the plaque */
.wall-photo { width: 100%; max-width: 480px; margin: 0 auto; }
.wall-photo img { width: 100%; border-radius: var(--radius); }
.wall-photo figcaption { margin-top: 8px; font-size: 15px; font-weight: 500; }

/* Team */
.team { padding: 0 0 96px; }
.team-grid { display: grid; gap: 40px; }
.team-photo { margin: 0 calc(var(--gutter) * -1); }
.team-photo img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 22%; }
.d2 { font-weight: 800; font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -0.01em; }
.team-lead { margin-top: 24px; max-width: 32ch; }
.people { margin-top: 40px; display: grid; gap: 20px; }
.people li { display: grid; gap: 2px; }
.who { font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
.since { font-size: 18px; }

/* Find us */
.find { background: var(--sol); color: var(--mur); padding: 80px 0; }
.find-grid { display: grid; gap: 56px; }
.find .d2 { max-width: 14ch; }
.access { margin-top: 24px; font-size: 19px; }
.find-links { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.find-hours h3 { font-weight: 800; font-size: 24px; }
.hours { margin-top: 16px; font-variant-numeric: lining-nums tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; }
.hours div + div { box-shadow: inset 0 1px 0 rgba(246, 245, 242, 0.14); }
.hours dt { font-weight: 500; }
.hours dd span + span::before { content: ", "; }
.hours .today dt, .hours .today dd { font-weight: 800; color: #fff; }
.hours .off { opacity: 0.7; }

/* Close */
.close { padding: 96px 0 104px; }
.close-title { font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; max-width: 22ch; }
.big-phone {
  display: inline-block; margin-top: 16px;
  font-weight: 800; font-size: clamp(44px, 16vw, 176px); line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
  text-decoration: none; color: var(--bordeaux);
  font-variant-numeric: lining-nums;
}
@media (hover: hover) and (pointer: fine) { .big-phone:hover { color: var(--bordeaux-dark); } }

/* Footer */
.foot { background: var(--mur-gris); padding: 48px 0 112px; font-size: 16px; line-height: 1.5; }
.foot-grid { display: grid; gap: 24px; }
.foot a { color: var(--encre); }
.foot-name { font-size: 20px; }
.foot-small { font-size: 15px; }

/* Pinned call on the phone */
.pin {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: var(--radius);
  background: var(--bordeaux); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 19px;
  box-shadow: 0 6px 20px rgba(30, 27, 24, 0.28);
  transition: transform 300ms ease, opacity 300ms ease;
}
.js .pin { transform: translateY(140%); opacity: 0; }
.js .pin.show { transform: none; opacity: 1; }

/* Reveal */
.js .reveal > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .reveal.in > * { opacity: 1; transform: none; }
.js .reveal.in > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal.in > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal.in > *:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { opacity: 1; transform: none; transition: none; }
  .pin, .btn { transition: none; }
}

/* Tablet */
@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .plate { padding: 56px 64px 60px; }
  .plate-rows div { grid-template-columns: 1fr auto; text-align: left; align-items: baseline; gap: 32px; }
  .plate-rows dd { font-size: clamp(22px, 2.6vw, 34px); }
  .wall-photo { width: 60%; margin: 0 0 0 auto; }
  .team { padding-top: 96px; }
  .team-photo { margin: 0; }
  .team-photo img { height: 480px; border-radius: var(--radius); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .find-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}

/* Desktop */
@media (min-width: 1000px) {
  :root { --gutter: 48px; }
  .bar-phone { display: inline; }
  .top { height: 100vh; min-height: 640px; max-height: 1100px; }
  .hero { flex-direction: row; min-height: 0; }
  .hero-text {
    flex: 1 1 56%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 48px 72px max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter)));
  }
  h1 { font-size: clamp(64px, 6.6vw, 108px); }
  .hero .lead { font-size: 23px; margin-top: 32px; }
  .actions { margin-top: 40px; }
  .proof { margin-top: 40px; font-size: 16px; }
  .hero-photo { flex: 1 1 44%; min-height: 0; }
  .wall { padding: 112px 0; }
  .wall-grid { grid-template-columns: minmax(0, 860px) minmax(0, 400px); justify-content: space-between; align-items: center; gap: 64px; }
  .wall-photo { width: 100%; margin: 0; }
  .team-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .team-photo img { height: clamp(440px, 42vw, 620px); }
  .wall-note { font-size: 21px; }
  .team { padding: 128px 0; }
  .find { padding: 112px 0; }
  .close { padding: 128px 0 136px; }
  .pin { display: none; }
  .foot { padding-bottom: 48px; }
}