/* About page (25/09/2026). Kélian's sections and copy on the site's grammar, after Antoine's review.
   Titles as on the home: red kicker (DM Mono 500 14px), black title (DM Sans 500, 48px desktop and 36px mobile,
   line-height 1.03, tracking -.038em), light grey second line (DM Sans 400, mineral). Only the H1 is animated.
   Sections: the landing page hero with editorial figures, why Concord with a painting, the landing page's
   counsel section for Romain, the founders on warm paper, the principles on the home's "How it works" tabs,
   the home's closing. The domain stylesheet sets paragraphs to margin 0 and line-height 1.65, so paragraph
   rules below are scoped to .about-page to win. */

.about-page {
  --about-shell: min(1240px, calc(100% - 40px));
  --about-rule: #dcdcd4;
}
.about-shell {
  width: var(--about-shell);
  margin-inline: auto;
}

/* Shared type: the home's rules. */
.about-page main .kicker {
  margin: 0 0 14px;
  font: 500 14px / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--signal-ink);
}
.about-page main h2 {
  margin: 0;
  font: 500 clamp(34px, 3.4vw, 48px) / 1.03 var(--sans);
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}
.about-page main h2 em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  color: var(--mineral);
}
.about-page main a:focus-visible {
  outline: 2px solid var(--signal-ink);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Section head: title on the left, short description on the right (home "One situation"). */
.about-head {
  display: grid;
  gap: 22px;
  margin-bottom: 56px;
}
.about-page .about-head__description {
  max-width: 320px;
  margin: 0;
  font: 400 15px / 1.6 var(--sans);
  color: var(--muted);
}

/* 1. Hero: the landing page composition, the four facts as editorial figures under the title. */
.about-hero {
  padding: 16px 0 24px;
}
.about-hero__grid {
  display: grid;
  grid-template-areas: "content" "facts" "art";
  row-gap: 32px;
}
.about-hero__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 20px;
}
.about-hero .breadcrumb {
  margin: 0 0 28px;
}
.about-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}
.about-page .about-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font: 500 12px / 1.4 var(--mono);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--signal-ink);
}
.about-page .about-hero h1 {
  margin: 0;
  font: 500 clamp(38px, 4vw, 56px) / 1.015 var(--sans);
  letter-spacing: -0.062em;
  color: var(--ink);
  text-wrap: balance;
}
.about-page .about-hero h1 em {
  display: block;
  margin-top: 9px;
  font-style: normal;
  font-weight: 500;
  color: var(--mineral);
  text-wrap: balance;
}

.about-hero__facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 32px;
  max-width: 580px;
  margin: 0;
  padding: 0;
}
.about-hero__facts > div {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding-top: 20px;
}
.about-hero__facts > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--claret);
}
.about-hero__facts dd {
  margin: 0;
  font:
    400 clamp(28px, 2.4vw, 34px) / 1.02 "IBM Plex Serif",
    Georgia,
    serif;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--ink);
}
.about-hero__facts dt {
  font: 400 14px / 1.45 var(--sans);
  color: var(--muted);
}

.about-hero__art {
  grid-area: art;
  position: relative;
  isolation: isolate;
  min-height: 300px;
  overflow: hidden;
  border-radius: 75px 4px 4px 4px;
  background: var(--navy-deep);
}
.about-hero__art::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--about-image) 50% 55% / cover no-repeat;
}
.about-hero__art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 45, 62, 0.22),
    transparent 40%,
    rgba(20, 45, 62, 0.45)
  );
}

/* 2. Why: a painting on the left, the founders' text on the right; the last sentence carries the commitment. */
.about-why {
  padding: 104px 0;
}
.about-why__grid {
  display: grid;
  gap: 32px;
}
.about-why__art {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  aspect-ratio: 16 / 11;
}
.about-why__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-page .about-why__body p {
  max-width: 600px;
  margin: 0 0 22px;
  font: 400 17px / 1.7 var(--sans);
  color: var(--ink);
}
.about-page .about-why__body p:last-child {
  margin-bottom: 0;
  font-weight: 500;
}

/* 3. The lawyer: the landing page's counsel section. */
.about-lawyer {
  overflow: hidden;
  background: var(--editorial-black);
  color: var(--paper-light);
}
.about-lawyer__frame {
  display: grid;
  gap: 32px;
  padding-top: 88px;
}
.about-lawyer__copy {
  align-self: center;
  max-width: 520px;
  padding-bottom: 8px;
}
.about-page .about-lawyer .kicker {
  color: var(--signal-soft);
}
.about-page .about-lawyer h2 {
  color: #f4f2ed;
}
.about-page .about-lawyer h2 em {
  color: #9da49d;
}
.about-lawyer__facts {
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(248, 246, 241, 0.14);
}
.about-lawyer__facts li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(248, 246, 241, 0.14);
  font: 400 16px / 1.6 var(--sans);
  color: #d6dbd7;
}
.about-lawyer__record {
  margin: -12px 0 28px;
}
.about-lawyer__record dt {
  font: 400 11px / 1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--signal-soft);
}
.about-lawyer__record dd {
  margin: 6px 0 0;
  font: 400 15px / 1.65 var(--sans);
  color: #b7bdb8;
}
.about-lawyer .domain-cta {
  background: var(--paper-light);
  color: var(--ink);
}
.about-lawyer .domain-cta:hover {
  background: #fff;
}
.about-lawyer__portrait {
  align-self: end;
  justify-self: center;
  width: min(100%, 420px);
  margin: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.about-lawyer__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4. Founders: warm paper, three portraits of the same weight. */
.about-founders {
  padding: 104px 0 112px;
  background: var(--paper);
}
.about-founders__list {
  display: grid;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-founder {
  min-width: 0;
}
.about-founder__visual {
  margin-bottom: 22px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(
      ellipse at 50% 38%,
      #b8a998 0%,
      #a39483 58%,
      #95857563 100%
    ),
    #9d8e7f;
}
.about-founder__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.about-page .about-founder__role {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
  font: 400 12px / 1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--signal-ink);
}
.about-founder__craft {
  color: var(--muted);
}
.about-founder h3 {
  margin: 0 0 12px;
  font: 500 27px / 1.15 var(--sans);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.about-page .about-founder__holds {
  margin: 0 0 20px;
  font: 400 15px / 1.65 var(--sans);
  color: var(--muted);
}
.about-founder__quote {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(22, 42, 54, 0.12);
}
.about-page .about-founder__quote p {
  margin: 0;
  font:
    400 19px / 1.45 "IBM Plex Serif",
    Georgia,
    serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 5. Principles: the home's "How it works", a painted stage with a card and four numbered tabs. */
.about-principles {
  padding: 96px 0 104px;
  background: var(--mist);
}
.about-stage {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--navy-deep);
}
.about-scene {
  position: absolute;
  inset: 0;
}
.about-scene[hidden] {
  display: none;
}
.about-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-scene__card {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  overflow: hidden;
  border: 1px solid rgba(22, 42, 54, 0.08);
  border-radius: 12px;
  background: rgba(248, 246, 241, 0.95);
  box-shadow: 0 18px 40px rgba(22, 42, 54, 0.16);
}
.about-page .about-scene__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(22, 42, 54, 0.1);
  font: 500 11px / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.about-scene__bar span:last-child {
  color: var(--signal-ink);
}
.about-page .about-scene__text {
  margin: 0;
  padding: 20px 18px 22px;
  font: 400 22px / 1.2 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.about-principles__list {
  display: grid;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.about-tab {
  display: block;
  width: 100%;
  padding: 20px 0 18px;
  border: 0;
  border-top: 2px solid #c9d0cf;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.about-tab .about-index {
  display: block;
  margin-bottom: 10px;
  font: 500 11px / 1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.about-tab__text {
  display: block;
  font: 500 18px / 1.35 var(--sans);
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 0.3s ease;
}
.about-tab:hover .about-tab__text {
  color: var(--ink);
}
.about-tab:active .about-tab__text {
  opacity: 0.8;
}
.about-tab.is-active {
  border-top-color: var(--signal-ink);
}
.about-tab.is-active .about-index {
  color: var(--signal-ink);
}
.about-tab.is-active .about-tab__text {
  color: var(--ink);
}
.about-tab:focus-visible {
  outline: 2px solid var(--signal-ink);
  outline-offset: 4px;
  border-radius: 3px;
}

/* 6. Contact: the home's closing, painted and centred. */
.about-contact {
  padding: 16px 0 96px;
}
.about-contact__frame {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding: 50px 30px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--navy-deep);
  color: var(--paper-light);
  text-align: center;
}
.about-contact__frame::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -6%;
  background: var(--about-image) 50% 52% / cover no-repeat;
  filter: saturate(0.82) contrast(1.04) brightness(0.62);
  transform: scale(1.07);
}
.about-contact__frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 45, 62, 0.18),
    rgba(20, 45, 62, 0.7)
  );
}
.about-contact__content {
  max-width: 780px;
}
.about-page .about-contact .kicker {
  color: var(--signal-soft);
}
.about-page .about-contact h2 {
  font-size: 52px;
  line-height: 1.05;
  color: var(--paper-light);
}
.about-page .about-contact h2 em {
  font-style: italic;
  color: #efaaa2;
}
.about-page .about-contact__content > p:not(.kicker) {
  max-width: 510px;
  margin: 27px auto 28px;
  font: 400 15px / 1.5 var(--sans);
  color: var(--sage-light);
}
.about-contact .button {
  background: var(--paper-light);
  color: var(--ink);
}

@media (min-width: 760px) {
  .about-founders__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .about-principles__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
@media (min-width: 900px) {
  .about-head {
    grid-template-columns: minmax(0, 860px) minmax(260px, 320px);
    justify-content: space-between;
    align-items: end;
    gap: 60px;
    margin-bottom: 64px;
  }
  .about-page .about-head__description {
    padding-bottom: 4px;
  }
  .about-hero__grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "content art" "facts art";
    column-gap: 40px;
    row-gap: 40px;
  }
  .about-hero__content {
    align-self: end;
    padding-top: 24px;
  }
  .about-hero__facts {
    align-self: start;
  }
  .about-hero__art {
    min-height: 620px;
    border-radius: 140px 7px 7px 7px;
  }
  .about-why__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: 80px;
  }
  .about-lawyer__frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    min-height: 640px;
    padding-top: 72px;
  }
  .about-lawyer__copy {
    padding-bottom: 72px;
  }
  .about-lawyer__portrait {
    justify-self: end;
    width: min(100%, 470px);
  }
  .about-stage {
    height: 510px;
  }
  .about-scene__card {
    top: 62px;
    right: 38px;
    bottom: auto;
    left: auto;
    width: 510px;
  }
  .about-page .about-scene__bar {
    padding: 16px 18px;
  }
  .about-page .about-scene__text {
    padding: 30px 28px 34px;
    font-size: 34px;
    line-height: 1.08;
  }
}
@media (min-width: 1100px) {
  .about-principles__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 26px;
  }
}
@media (max-width: 700px) {
  .about-page main .kicker {
    font-size: 12px;
  }
  .about-page main h2 {
    font-size: 36px;
  }
  .about-hero .breadcrumb {
    margin-bottom: 22px;
  }
  .about-page .about-hero__eyebrow {
    margin-bottom: 20px;
    font-size: 11px;
  }
  .about-page .about-hero h1 {
    font-size: clamp(34px, 9.5vw, 42px);
    letter-spacing: -0.057em;
  }
  .about-hero__facts dd {
    font-size: 22px;
  }
  .about-why,
  .about-founders {
    padding: 72px 0;
  }
  .about-principles {
    padding: 72px 0 80px;
  }
  .about-lawyer__frame {
    padding-top: 72px;
  }
  .about-lawyer__portrait {
    width: min(100%, 330px);
  }
  .about-founder h3 {
    font-size: 24px;
  }
  .about-tab__text {
    font-size: 16px;
  }
  .about-contact {
    padding-bottom: 64px;
  }
  .about-contact__frame {
    min-height: 520px;
    padding: 42px 22px;
    border-radius: 18px;
  }
  .about-page .about-contact h2 {
    font-size: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-tab__text {
    transition: none;
  }
}

/* Romain's official portrait is a cut-out whose hair touches the top edge: it sits lower in its frame so the
   headroom matches Kélian's and Antoine's studio portraits. */
.about-founder__visual img[src*="romain-official"] { object-position: 50% 0; transform: translateY(9%); }