/* Header and overlay menu rules extracted from the mirrored Lioré stylesheet
   (loire-template.webflow.shared.b7843be11.css) for pages that do not load
   that stylesheet (the About page, which carries the Dossier template).
   Values are unchanged; the menu's .container is scoped to .menu. */
.w-inline-block {max-width: 100%;
  display: inline-block;}
:root {--color--second-color: #121212;
  --font--primary-font: Inter, sans-serif;
  --colors--fourth-color: white;
  --button--nav-text: 1.1rem;
  --line-height--page-line-height: 1.1;
  --font-weight--500: 500;
  --font--h1: 7rem;
  --font--h2: 3.6rem;
  --font--h3: 1.7rem;
  --font--h4: 1.4rem;
  --font--h5: 1rem;
  --font--h6: .8rem;
  --line-height--paragraph-line-height: 1.3;
  --colors--second-color: #f5f5f5;
  --button--button-color: white;
  --font-weight--400: 400;
  --colors--first-color: black;
  --page-container--width: 100%;
  --page-container--container-large: 1300px;
  --page-margin--divider-large: 60px;
  --page-margin--margin-30px\<deleted\|variable-6c1e3925-07e9-8131-6edf-36a407b4761d\>: 30px;
  --page-margin--divider-small: 20px;
  --backdrop-filter--blur-color: #f8f8f31a;
  --backdrop-filter--backdrop-size: 40px;
  --color--first-color: white;
  --page-margin--divider-medium: 50px;
  --button--font-size: 14px;
  --page-margin--margin-100px\<deleted\|variable-cf05ab6e-af2d-3706-c5d9-acfd3ea83e39\>: 100px;
  --line-height--page-line-height-2: .85;
  --font-weight--600: 600;
  --colors--third-color: #ffffffb3;
  --main-title: 17rem;
  --page-margin--margin-80px\<deleted\|variable-b2b76a9d-e8da-0265-5d54-07b10f53a9ca\>: 80px;
  --button--round-corners: 3rem;
  --button--circle-round-corners: 10rem;
  --button--cta-title: 24vw;
  --backdrop-filter--backdrop-size-second: 15px;
  --page-container--round-corners: .6rem;
  --page-margin--divider-extra-small: 10px;
  --page-margin--divider-x-large: 150px;
  --font--second-font: "Playfair Display", sans-serif;
  --font--third-font: Caveat, sans-serif;
  --font--work-title: 1.2rem;
  --section--padding-top-bottom: 250px;
  --section--padding-left-right: 2%;
  --font-weight--300: 300;
  --font-weight--700: 700;
  --font-weight--800: 800;}
.menu .container {z-index: 30;
  width: var(--page-container--width);
  max-width: var(--page-container--container-large);
  mix-blend-mode: normal;
  margin-left: auto;
  margin-right: auto;
  position: relative;}
.navigation-text {font-size: var(--font--h1);
  line-height: var(--line-height--page-line-height-2);
  font-weight: var(--font-weight--600);
  margin-top: 0;
  margin-bottom: 0;}
.hamburger {z-index: 2;
  cursor: pointer;
  order: 1;
  align-items: center;
  margin-left: 3px;
  display: flex;
  position: relative;}
.navigation-content-2 {grid-row-gap: 10px;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;}
.hamburger-menu {cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  position: relative;
  overflow: hidden;}
.hamburger-menu._2 {flex-direction: row;
  width: 100%;}
.dots {width: 40px;
  position: relative;}
.remove {width: 24px;
  position: absolute;
  transform: scale(0);}
.number-text {opacity: .6;
  color: var(--colors--third-color);
  font-size: var(--font--h5);
  font-weight: var(--font-weight--500);
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
  position: relative;}
.menu-circle {z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #111111d9;
  border-radius: 100%;
  width: 150vw;
  height: 150vw;
  position: absolute;}
.second-part {flex-direction: row;
  order: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;}
.menu-text-wrapper {font-size: var(--font--h5);
  font-weight: var(--font-weight--600);
  flex: none;
  height: 17px;
  margin-right: 10px;
  overflow: hidden;}
.navigation-main {color: var(--color--first-color);
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  overflow: hidden;}
.menu {z-index: 15;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;}
.navigation-wrapper {z-index: 999;
  background-color: #0000;
  position: fixed;
  inset: 0% 0% auto;}
.navigation {z-index: 20;
  width: var(--page-container--width);
  max-width: var(--page-container--container-large);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 20px;
  display: grid;
  position: relative;}
.navigation.second {grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
  padding-left: 0;
  padding-right: 0;}
.sub-logo-text {font-family: var(--font--primary-font);
  font-size: var(--font--h5);
  font-weight: var(--font-weight--600);}
.logo-flex {justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;}
.line-below {background-color: var(--color--first-color);
  width: 100%;
  height: 3px;
  margin-top: 3px;}
.nav-overflow {overflow: hidden;}
@media screen and (max-width: 991px) {
.navigation-text {margin-bottom: 7px;}
.menu-circle {width: 100%;
    height: 100%;
    position: fixed;}
.menu {width: 100%;
    height: 100%;}
.navigation, .navigation.second {padding-left: 2%;
    padding-right: 2%;}
.line-below {height: 2px;}
}
@media screen and (max-width: 479px) {
.hamburger {order: 1;
    margin-left: 10px;}
.hamburger.second {margin-left: 0;}
.number-text {display: none;}
.navigation {padding: 10px 3%;}
.navigation.second {min-height: 60px;
    padding-left: 4%;
    padding-right: 4%;}
}

/* ---- site header behaviour (moved from site.css so every page gets it) ---- */
/* Fixed header: two independent local blur fields, one behind the tagline
   and one behind the menu icon. No fill and no full-width bar: each field
   only softens whatever scrolls directly beneath its control, feathered to
   nothing by a radial mask, so it is invisible over plain black or white
   and never touches the hero words. Purely decorative: pointer-events none,
   sits behind the control in its own stacking context (z-index -1).
   Readability over light sections comes from the theme switch below, not
   from the field. */
.sub-logo-text,
.second-part {
  position: relative;
  isolation: isolate;
}

.sub-logo-text::before,
.second-part::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--haze-tint, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 78%);
}

.sub-logo-text::before {
  inset: -20px -32px; /* ~20px above/below, ~32px either side of the label */
}

.second-part::before {
  inset: -24px -28px; /* one field behind the theme toggle and the menu icon together */
}

/* Section-aware foreground: site.js sets data-contrast="light" on the header
   while a light section is under the controls (default dark). Text goes
   dark and the white SVG icons are inverted. */
.sub-logo-text,
.hamburger .menu-text {
  transition: color 180ms ease;
}

.hamburger .dots,
.hamburger .remove {
  transition: filter 180ms ease;
}

.navigation-wrapper[data-contrast="light"] .sub-logo-text,
.navigation-wrapper[data-contrast="light"] .hamburger .menu-text {
  color: #121212;
}

.navigation-wrapper[data-contrast="light"] .hamburger .dots,
.navigation-wrapper[data-contrast="light"] .hamburger .remove {
  filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .sub-logo-text,
  .hamburger .menu-text,
  .hamburger .dots,
  .hamburger .remove {
    transition: none;
  }
}

/* Header: show only the menu icon; the "Menu" / "Close" text is hidden.
   The markup stays (the template's open/close animation targets it) and the
   icon carries aria-label="Menu" for assistive technology. */
.hamburger .menu-text-wrapper {
  display: none;
}

/* Overlay menu: six links now. Sized against the viewport height so the
   whole list stays on screen, and never wraps ("Work With Me"). */
.menu .navigation-content-2 {
  max-width: none;
}

.menu .navigation-text {
  font-size: min(var(--font--h1), 8vh, 7vw);
  line-height: 1;
  white-space: nowrap;
}

.menu .number-text {
  font-size: min(var(--font--h5), 2vh);
}