/* ==========================================================================
   PARISINQ: unified stylesheet
   --------------------------------------------------------------------------
    1. Fonts               6. Footer               11. Stay tuned
    2. Tokens              7. Landmark layer       12. Contact
    3. Base                8. Buttons & links      13. Legal pages
    4. Utilities           9. Home                 14. Reduced motion & forced colours
    5. Header & nav       10. About & marquee      15. Print
   ========================================================================== */


/* 1. Fonts: self-hosted Anton + Inter (SIL OFL), no third-party requests
   ========================================================================== */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Tokens
   ========================================================================== */

:root {
  /* Light only: browsers that darken pages on their own (Chrome's auto dark mode)
     leave the site as designed, so the logo hero stays seamless */
  color-scheme: only light;

  /* Palette, matched to the logo: its background grey (so the hero is seamless)
     and its own text blue (client decision, 23 Oct 2026). */
  --grey: #D9D9D9;
  --blue: #004AAD;
  --cream: #F8F7F2;
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --ink-soft: rgb(26 26 26 / 0.72);   /* about 5.5:1 on grey */

  /* Type */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --container: 1280px;
  --header-h: 72px;
  --space-section: clamp(4.5rem, 10vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;
  }
}


/* 3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--grey);
  color: var(--blue);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll lock while the mobile menu is open */
html.nav-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}

/* <main> only receives focus from the skip link */
#main:focus {
  outline: none;
}

::selection {
  background-color: var(--blue);
  color: var(--cream);
}

/* On blue: blue blocks, the legal pages' header and the open mobile menu */
.theme-blue ::selection,
.site-header[data-theme="blue"] ::selection,
.nav-open .site-header ::selection {
  background-color: var(--cream);
  color: var(--blue);
}


/* 4. Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Colour blocks: grey with blue type, blue with cream type */
.theme-grey {
  --focus: var(--blue);
  background-color: var(--grey);
  color: var(--blue);
}

.theme-blue {
  --focus: var(--cream);
  background-color: var(--blue);
  color: var(--cream);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.nobr {
  white-space: nowrap;
}

/* Hover underline that draws in from the left */
.hover-line {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--line-offset, 0px));
  background-size: 0% var(--line, 1px);
  transition: background-size 0.3s var(--ease);
}

.hover-line:focus-visible,
.hover-line[aria-current="page"] {
  background-size: 100% var(--line, 1px);
}

@media (hover: hover) {
  .hover-line:hover {
    background-size: 100% var(--line, 1px);
  }
}

/* The two big footer emails are flex items (blockified), so their line sits on an
   inner inline span: measured from the letters, it stays under them */
.site-footer__email,
.footer-branding__email {
  text-decoration: none;
}

.site-footer__email:focus-visible .hover-line,
.footer-branding__email:focus-visible .hover-line {
  background-size: 100% var(--line, 1px);
}

@media (hover: hover) {
  .site-footer__email:hover .hover-line,
  .footer-branding__email:hover .hover-line {
    background-size: 100% var(--line, 1px);
  }
}

/* Small uppercase label, e.g. "LEGAL" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background-color: currentColor;
}


/* 5. Header & navigation
   ========================================================================== */

/* Transparent and absolutely placed over the first section */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  color: var(--blue);
}

.site-header[data-theme="blue"] {
  --focus: var(--cream);
  color: var(--cream);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.site-header__brand {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: baseline;
  padding-block: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav__text {
  position: relative;
}

/* Underline: drawn on hover, permanent for the current page */
.site-nav__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.06em;
  bottom: -0.3em;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.site-nav__link[aria-current="page"] .site-nav__text::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .site-nav__link:hover .site-nav__text::after {
    transform: scaleX(1);
  }
}

.site-nav__num,
.site-nav__extra {
  display: none;
}

/* Hamburger: two bars that morph into an X */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
}

.nav-toggle__bars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.35s var(--ease);
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 760px) {
  .site-header__brand {
    font-size: 1.5rem;
  }

  /* A 44px-tall touch target inside the 64px header, nothing moves (with
     JavaScript only: without it the nav links wrap right under the brand) */
  .js .site-header__brand::after {
    content: "";
    position: absolute;
    inset: max(-0.875rem, (100% - 44px) / 2) 0;
  }

  /* With JavaScript: a full-screen blue overlay */
  .js .nav-toggle {
    display: block;
  }

  .js .site-nav {
    --focus: var(--cream);
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: calc(var(--header-h) + clamp(1.5rem, 7vh, 3.5rem)) var(--gutter) max(2rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: var(--header-h);   /* focused links stop below the header band */
    background-color: var(--blue);
    color: var(--cream);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .js.nav-open .site-header {
    --focus: var(--cream);
    color: var(--cream);
  }

  .js.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s var(--ease);
  }

  /* When the overlay scrolls (short and landscape screens), the links pass under
     this blue band, never under the brand and the X */
  .js .site-header__inner::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 2;
    height: var(--header-h);
    background-color: var(--blue);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .js.nav-open .site-header__inner::before {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s var(--ease);
  }

  .js .site-header__brand,
  .js .nav-toggle {
    z-index: 3;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .js .site-nav__link {
    gap: 0.85rem;
    padding-block: 0.15rem;
    /* The vw cap only binds with enlarged text (e.g. 200%): CONTACT then still fits a 320px screen */
    font-size: min(clamp(2.75rem, 14vw, 4.75rem), 18vw);
    letter-spacing: 0.01em;
  }

  .js .site-nav__text::after {
    right: 0.01em;
    bottom: 0.02em;
    height: 3px;
  }

  .js .site-nav__num {
    display: inline-block;
    min-width: 1.5rem;
    font-family: var(--font-text);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .js .site-nav__extra {
    display: grid;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(248 247 242 / 0.4);
  }

  /* Links rise in, one after another */
  .js .site-nav__list > li,
  .js .site-nav__extra {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
  }

  .js.nav-open .site-nav__list > li,
  .js.nav-open .site-nav__extra {
    opacity: 1;
    transform: none;
  }

  .js.nav-open .site-nav__list > li:nth-child(2) { transition-delay: 0.04s; }
  .js.nav-open .site-nav__list > li:nth-child(3) { transition-delay: 0.08s; }
  .js.nav-open .site-nav__list > li:nth-child(4) { transition-delay: 0.12s; }
  .js.nav-open .site-nav__extra { transition-delay: 0.16s; }

  /* The general address, and under it the smaller investors' line */
  .site-nav__contact {
    display: grid;
    gap: 0.5rem;
  }

  .site-nav__email,
  .site-nav__investors {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .site-nav__email {
    font-size: 1.25rem;
    text-decoration: none;
  }

  .site-nav__investors {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.4em;
    font-size: 0.9375rem;
  }

  .site-nav__investors a {
    text-decoration: none;
  }

  .site-nav__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .site-nav__legal a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  /* Without JavaScript: the links stay visible and wrap */
  .no-js .site-header__inner {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0.15rem;
    padding-block: 0.75rem;
  }

  .no-js .site-nav__list {
    flex-wrap: wrap;
    gap: 0.15rem 1.1rem;
  }

  .no-js .site-nav__link {
    font-size: 1rem;
  }
}


/* 6. Footer
   ========================================================================== */

.site-footer__main {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2rem);
}

/* Baseline alignment: the email sits on the wordmark's baseline */
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid currentColor;
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: min(clamp(2.75rem, 7vw, 5.5rem), 25vw);   /* cap: binds only with enlarged text on phones */
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The two addresses: the general one, and under it the smaller investors' line. The
   block's first line keeps the wordmark's baseline. Beside the wordmark both lines end
   on the container's right edge; stacked under it (phones) they start on the left. */
.site-footer__contact {
  --email-size: clamp(1.125rem, 2vw, 1.625rem);
  --investors-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The 44px hit areas of the two lines (see Touch targets below) meet without overlapping */
  row-gap: max(0.375rem, 44px - (1.15 * var(--email-size) + 1.2 * var(--investors-size)) / 2);
}

.site-footer__email {
  --line-offset: 0.2em;
  font-family: var(--font-display);
  font-size: var(--email-size);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "For investors:" and its address, wrapping as two items on the narrowest screens */
.site-footer__investors {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--investors-size);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer__investors .site-footer__email {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

@media (min-width: 601px) {
  .site-footer__contact {
    align-items: flex-end;
    margin-left: auto;   /* also when it wraps under the wordmark (enlarged text) */
    text-align: right;
  }

  .site-footer__investors {
    justify-content: flex-end;
  }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.25rem;
}

/* Page links (Home · About · Stay Tuned · Contact), a row of their own above the
   legal links: the header scrolls away, and long pages would need a trip back up */
.site-footer__pages {
  flex-basis: 100%;
  margin-bottom: 0.75rem;   /* with the row gap, the 44px hit areas of the two rows do not overlap */
}

.site-footer__pages-list {
  --dot-gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem var(--dot-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* A dot that would open a wrapped line lies outside the left edge and is clipped;
     focus rings and the taller hit areas keep their room */
  clip-path: inset(-1.5rem -1.5rem -1.5rem -0.5rem);
}

.site-footer__pages-list li {
  position: relative;
}

/* CSS-drawn dot separators, centred in the gap and on the capitals */
.site-footer__pages-list li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--dot-gap) / -2);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

.site-footer__pages a {
  --line-offset: 0.2em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Row gap: when the links wrap (phones), the 44px hit areas of two rows meet
   without overlapping */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__copy {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Touch targets: the small footer links and the footer emails get a hit area
   44px tall, extended vertically only, so nothing moves */
.site-footer__pages a,
.site-footer__links a,
.site-footer__email,
.footer-branding__email {
  position: relative;
}

.site-footer__pages a::after,
.site-footer__links a::after,
.site-footer__email::after,
.footer-branding__email::after {
  content: "";
  position: absolute;
  inset: max(-0.875rem, (100% - 44px) / 2) 0;
}

/* Contact page: grey bottom branding, then a slim blue legal bar */
.footer-branding {
  position: relative;
  isolation: isolate;
}

.footer-branding__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.footer-branding__name {
  font-family: var(--font-display);
  font-size: min(clamp(3.25rem, 9.5vw, 9rem), 25vw);   /* cap: binds only with enlarged text on phones */
  line-height: 0.84;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The same pair as in the footer, larger: the general address, the investors' line under it */
.footer-branding__contact {
  --email-size: min(clamp(1.375rem, 3.4vw, 3.25rem), 11vw);   /* cap: as above */
  --investors-size: min(clamp(1.0625rem, 1.6vw, 1.5rem), 7vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The 44px hit areas of the two lines meet without overlapping */
  row-gap: max(0.5rem, 44px - (1.05 * var(--email-size) + 1.15 * var(--investors-size)) / 2);
}

.footer-branding__email {
  --line: 2px;
  --line-offset: 0.2em;
  font-family: var(--font-display);
  font-size: var(--email-size);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-branding__investors {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--investors-size);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-branding__investors .footer-branding__email {
  --line: 1px;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

@media (min-width: 601px) {
  .footer-branding__contact {
    align-items: flex-end;
    margin-left: auto;
    text-align: right;
  }

  .footer-branding__investors {
    justify-content: flex-end;
  }
}

.site-footer__bar .site-footer__bottom {
  padding-block: 1.35rem;
}


/* 7. Landmark layer: ink line art printed into the background
   --------------------------------------------------------------------------
   Usage: <div class="landmark landmark--eiffel" aria-hidden="true"></div>
   inside a .has-landmarks section. Multiply keeps the ink reading as ink on
   grey and as a deeper blue on blue. The drawings are siblings of the logo's
   Arc: drawn large, with firm outlines. Opacity follows what lies over them:
   - on grey, beside or behind display type (Anton, 24px and up): up to 0.28,
     which keeps the blue type at 3.2:1 or more on the darkest line (WCAG AA
     for large text asks 3:1)
   - on grey, behind smaller text: 0.11 (4.6:1; AA asks 4.5:1)
   - on blue: the cream type only gains contrast over the darker lines, so
     0.24-0.32, kept lighter where lines run behind small text
   ========================================================================== */

.has-landmarks {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.landmark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mix-blend-mode: multiply;
  opacity: var(--landmark-opacity, 0.12);
}

/* About: the tower stands to the right of the copy and Notre-Dame's west façade
   to its left, both on the section's bottom edge. --tower is the height of the
   tower's ink: from 1.5rem below the ABOUT rule (the rule sits at .about's top
   padding) down to the bottom edge. */
.about .landmark {
  --landmark-opacity: 0.28;
  --tower: min(72rem, 100% - var(--header-h) - clamp(2rem, 5vw, 4.5rem) - 1.5rem);
  bottom: 0;
  background-position: center bottom;
}

/* The tower: on wide screens the last term anchors it to the 1280px container
   (the same 7.75rem overhang as at 1440). Its box adds the drawing's own margins
   (7.5%) and drops by the lower one, so the ground line meets the bottom edge. */
.landmark--eiffel {
  right: max(-3vw, -48px, calc((100% - var(--container)) / 2 - 7.75rem));
  height: calc(var(--tower) * 1.075);
  aspect-ratio: 600 / 1200;
  transform: translateY(calc(3.33% - 3px));
  background-image: url("images/landmarks/eiffel-tower.svg");
}

/* Notre-Dame's west façade, used twice: privacy notice (right) and About (left) */
.landmark--notre-dame {
  aspect-ratio: 900 / 1200;
  background-image: url("images/landmarks/notre-dame.svg");
  background-position: center bottom;
}

/* About: the façade ends 1.5rem before the copy column (15.5em of the copy's
   font size, centred), so it never runs behind the text. It is 0.62 of the
   tower's height where there is room; on narrower screens the room left of the
   copy (up to 48px past the screen edge) sets its size. */
.about .landmark--notre-dame {
  right: calc(50% + 7.75 * clamp(1.6rem, 2.7vw, 2.75rem) + 1.5rem);
  height: min(var(--tower) * 0.66, (50vw - 7.75 * clamp(1.6rem, 2.7vw, 2.75rem) - 1.5rem + min(3vw, 48px)) * 4 / 3);
  transform: translateY(calc(1.33% - 3px));
}

/* Phones: the tower stays a tall watermark behind the copy, its antenna clear of
   the header band; the façade would only crowd the copy, so it rests */
@media (max-width: 760px) {
  .about .landmark {
    --landmark-opacity: 0.2;
    --tower: min(72rem, 100% - var(--header-h) - 0.75rem);
  }

  .about .landmark--notre-dame {
    display: none;
  }
}

/* Skyline strip along the bottom edge (home ABOUT band, about marquee, cookie
   policy). The sections keep room for a strip max(100%, 75rem) wide; it is drawn
   1.2 times that size and lowered by 15.73% of its height, so its highest point
   (the Eiffel's antenna, 94.4% up) stands exactly where it stood and every other
   line sits lower: whatever the sections keep clear above it stays clear. The
   lower floors run past the bottom edge. */
.landmark--skyline {
  --landmark-opacity: 0.3;
  left: 50%;
  bottom: 0;
  width: calc(max(100%, 75rem) * 1.2);
  aspect-ratio: 2400 / 500;
  transform: translate(-50%, 15.73%);
  background-image: url("images/landmarks/paris-skyline.svg");
  background-position: center bottom;
  background-size: 100% 100%;
}

/* Stay tuned (and the 404 page): Sacré-Cœur centred behind the statement, as large
   as the section allows. Its ink (92% of the drawing's height) keeps 0.5rem clear
   of the header band and of a header height at the bottom, and it is at most 80rem
   wide (inside the logo's frames on wide screens); on narrow screens its outer
   trees may run past the sides while the basilica stays whole. */
.landmark--sacre-coeur {
  --landmark-opacity: 0.22;
  top: 50%;
  left: 50%;
  width: min(125%, 80rem);
  height: calc((100% - 2 * var(--header-h) - 1rem) / 0.92);
  transform: translate(-50%, -50%);
  background-image: url("images/landmarks/sacre-coeur.svg");
}

/* 404: the short note (Inter) runs over the drawing, so it keeps to the
   behind-small-text opacity */
.stay-hero--not-found .landmark--sacre-coeur {
  --landmark-opacity: 0.11;
}

/* Stay tuned: the logo's own ornate frames, left and right. The last term keeps
   them 0.75rem clear of the header band on short and landscape screens. */
.landmark--frame {
  --landmark-opacity: 0.85;
  top: 50%;
  height: min(80%, 51vw, 100% - 2 * var(--header-h) - 1.5rem);
  transform: translateY(-50%);
}

/* Wide screens: the frames stand where the logo puts them (the 1920px-wide
   logo at 1080px height), not at the screen edges */
.landmark--frame-left {
  left: max(0px, calc(50% - 60rem));
  aspect-ratio: 796 / 1622;
  background-image: url("images/landmarks/ornate-frame-left.webp");
  background-position: left center;
}

.landmark--frame-right {
  right: max(0px, calc(50% - 60rem));
  aspect-ratio: 798 / 1622;
  background-image: url("images/landmarks/ornate-frame-right.webp");
  background-position: right center;
}

/* Louvre pyramid (stay-tuned banner). Below 1100px it stands in a band of its own
   under the buttons (see .privacy-banner); from 1100px it sits beside the centred
   copy, the pyramid's left corner (18.4% in) 0.5rem past the copy column
   (50% + 20.25rem). There everything up and left of its left slope (the palace's
   left wing, a basin) is masked away along that slope (137.5deg, at 33% of the
   gradient line), and nothing shows left of the copy column's edge, so no line
   runs behind or beside the text. */
.landmark--louvre {
  --landmark-opacity: 0.32;
  right: calc(var(--louvre-w) * -0.2);
  bottom: calc(var(--louvre-w) * -0.1);
  width: var(--louvre-w);
  aspect-ratio: 1600 / 800;
  background-image: url("images/landmarks/louvre-pyramid.svg");
  background-position: right bottom;
}

@media (min-width: 1100px) {
  .landmark--louvre {
    right: auto;
    bottom: 0;
    left: calc(50% + 20.75rem - var(--louvre-w) * 0.184);
    -webkit-mask-image: linear-gradient(137.5deg, transparent 30%, #000 33%), linear-gradient(to right, transparent calc(18.4% - 0.5rem), #000 18.4%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(137.5deg, transparent 30%, #000 33%), linear-gradient(to right, transparent calc(18.4% - 0.5rem), #000 18.4%);
    mask-composite: intersect;
  }
}

/* Contact: the Arc behind the heading column, as in the logo, where the name
   stands over the Arc. The first term starts the attic 1rem below the header band
   (the drawing's own 7.4% top margin taken up); the last keeps it inside the
   heading column: the form column starts at 0.96vw - 32rem on screens up to about
   1400px wide, and 60rem is that limit on wider, container-anchored screens. */
.landmark--arc {
  --landmark-opacity: 0.24;
  left: max(-3vw, -48px, calc((100% - var(--container)) / 2 - 7.75rem));   /* container-anchored on wide screens */
  bottom: 0;
  height: min((100% - var(--header-h) - 1rem) / 0.926, 60rem, 108vw - 36.5rem);
  aspect-ratio: 1000 / 1100;
  background-image: url("images/landmarks/arc-de-triomphe.svg");
  background-position: left bottom;
}

/* Stacked layout: the Arc moves beside SEND, below the form, so it never runs
   behind the labels or gets cut by the inputs (see .contact for the extra room);
   its top stays 1.5rem below the privacy line, and below any message under SEND.
   The contact breakpoints are in em: 56.25em / 56.24875em = 900px / 899.98px at
   the default 16px (no gap at fractional widths), and a larger default font size
   stacks the form earlier. */
@media (max-width: 56.24875em) {
  .landmark--arc {
    left: auto;
    right: -0.5rem;
    height: var(--arc-h);
  }
}

/* Privacy notice: the façade on the right, as tall as the hero allows (the
   towers start 0.5rem below the header band; the drawing's 4.7% top margin taken
   up). Below 1200px it reaches behind the intro, so it stays lighter there. */
.legal-hero .landmark--notre-dame {
  --landmark-opacity: 0.22;
  right: max(-2vw, -32px, calc((100% - var(--container)) / 2 - 7.75rem));   /* container-anchored on wide screens */
  bottom: 0;
  height: min((100% - var(--header-h) - 0.5rem) / 0.953, 60rem);
  background-position: right bottom;
}

@media (min-width: 1200px) {
  .legal-hero .landmark--notre-dame {
    --landmark-opacity: 0.32;
  }
}

/* Wrought-iron balcony rail: a seamless horizontal divider. Heights are
   multiples of 3px, so the 400x120 tile repeats at whole-pixel widths. */
.balcony {
  height: 60px;
  background-image: url("images/landmarks/haussmann-balcony.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

@media (min-width: 601px) {
  .balcony {
    height: 72px;
  }
}

@media (min-width: 1100px) {
  .balcony {
    height: 90px;
  }
}

@media (min-width: 1700px) {
  .balcony {
    height: 102px;
  }
}


/* 8. Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: 3.25rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn__icon {
  flex: none;
  width: 1.4em;
  height: auto;
  transition: transform 0.3s var(--ease);
}

/* On blue: solid cream, or a cream outline */
.btn--solid {
  border-color: var(--cream);
  background-color: var(--cream);
  color: var(--blue);
}

.btn--ghost {
  color: var(--cream);
}

@media (hover: hover) {
  .btn:hover .btn__icon {
    transform: translateX(0.25em);
  }

  .btn--solid:hover {
    background-color: transparent;
    color: var(--cream);
  }

  .btn--ghost:hover {
    background-color: var(--cream);
    color: var(--blue);
  }
}


/* 9. Home: the full-screen logo
   ========================================================================== */

.hero {
  height: 100vh;
  height: 100svh;
  min-height: 20rem;
  /* On short, wide screens, inset the logo so the artwork (from 12.8% of the
     image height) always starts below the overlaid header. */
  padding-block: max(0px, calc((var(--header-h) + 8px - 12.8vh) * 1.344));
  padding-block: max(0px, calc((var(--header-h) + 8px - 12.8svh) * 1.344));
  background-color: var(--grey);
}

.hero__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The <picture> wrapper fills the hero, so the image still sizes against it */
.hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Portrait screens get the stacked medallion (the <source> in index.html uses
   the same media query): it starts 8px below the header, 24px of grey under it */
@media (max-aspect-ratio: 4/5) {
  .hero {
    padding-block: calc(var(--header-h) + 8px) 24px;
  }
}

/* The ABOUT band under the logo: the About page's opening on blue, with the
   skyline along the bottom as under the About marquee. The centred button ends
   clear above the drawing under it (Notre-Dame's spire, 0.8 of the strip's
   height; the strip is max(100vw, 75rem) / 4.8 tall), so nothing touches it. */
.home-about {
  padding-block: var(--space-section) calc(max(100vw, 75rem) * 0.167 + clamp(1.5rem, 3vw, 2.5rem));
}

/* Between the About copy and the marquee in size; the cap keeps "MAJOR PLATFORMS."
   on 320px screens at 200% text, as on the About page */
.home-about__copy {
  max-width: 19em;
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  font-family: var(--font-display);
  font-size: min(clamp(2rem, 4.2vw, 4.5rem), 11.5vw);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.home-about__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* 10. About & marquee
   ========================================================================== */

.about {
  padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)) var(--space-section);
}

/* Thin rule across the container, with the label below it */
.section-label {
  padding-top: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* On blue (the home page's ABOUT band) the rule is cream like the label */
.theme-blue .section-label {
  border-top-color: currentColor;
}

.about__copy {
  max-width: 15.5em;
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  font-family: var(--font-display);
  font-size: min(clamp(1.6rem, 2.7vw, 2.75rem), 11.5vw);   /* cap: "MAJOR PLATFORMS." fits 320px at 200% text */
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: pretty;
}

.about__copy p + p {
  margin-top: 1.05em;
}

/* "ONLY" (<em>, upright: Anton has no italic) and the closing STAY TUNED link share
   one line, drawn from Anton's metrics (content area ends 0.33em below the baseline),
   so it sits 0.06em under the letters in every browser and clear of the next line's
   capitals. On the link it is permanent, so the words read as a link without hover. */
.about__copy em,
.about__cta {
  font-style: normal;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.21em) / 100% 0.06em;
}

/* Hover: the link's line thickens downwards; its top edge stays where it is */
.about__cta {
  transition: background-size 0.25s var(--ease), background-position 0.25s var(--ease);
}

@media (hover: hover) {
  .about__cta:hover {
    background-position: 0 calc(100% - 0.17em);
    background-size: 100% 0.1em;
  }
}

/* Marquee: two identical groups in a max-content track, moved by -50% */
.marquee {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(21rem, 60vh, 46rem);
  min-height: clamp(21rem, 60svh, 46rem);
  padding-block: clamp(3rem, 8vh, 6rem);
}

.marquee__track {
  display: flex;
  align-self: flex-start;
  width: max-content;
  animation: marquee var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}

.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  /* One spacing for every gap, including the seam between the two groups */
  --marquee-gap: 0.3em;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-gap);
  padding-inline-end: var(--marquee-gap);
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 13rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The ⦁ glyph stays in the DOM but is drawn as a cream dot on the cap centre */
.marquee__dot {
  flex: none;
  width: 0.18em;
  height: 0.18em;
  overflow: hidden;
  border-radius: 50%;
  background-color: currentColor;
  text-indent: -999em;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause/Play toggle (WCAG 2.2.2) */
.marquee__toggle {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));   /* on the container edge */
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: var(--blue);
  color: var(--cream);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.marquee__toggle-icon {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}

.marquee__toggle[aria-pressed="true"] .marquee__toggle-icon {
  width: 12px;
  margin-left: 3px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (hover: hover) {
  .marquee__toggle:hover {
    background-color: var(--cream);
    color: var(--blue);
  }
}

.no-js .marquee__toggle {
  display: none;
}


/* 11. Stay tuned
   ========================================================================== */

.stay-hero {
  /* Width-led, capped on short screens so the five lines (4.75 x the size) fit
     between the paddings, but never below 2.25rem */
  --st-size: min(clamp(2.6rem, 7.5vw, 7rem), max(2.25rem, (100vh - 2 * var(--header-h) - 3rem) / 4.75));
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Equal top and bottom padding keeps the statement on the optical centre */
  padding-block: calc(var(--header-h) + 1.5rem);
  text-align: center;
}

/* A custom property keeps its last value even where svh is unknown, hence @supports */
@supports (height: 100svh) {
  .stay-hero {
    --st-size: min(clamp(2.6rem, 7.5vw, 7rem), max(2.25rem, (100svh - 2 * var(--header-h) - 3rem) / 4.75));
  }
}

.stay-hero__title {
  font-family: var(--font-display);
  font-size: var(--st-size);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Narrow screens: the frames turn 90° and sit above and below the text */
@media (max-width: 600px) {
  /* Tall enough for the header band, both turned frames (each reaches 0.445 x
     its span beyond the text; 0.75rem clear of the band) and the statement */
  .stay-hero {
    --frame-span: min(84vw, 26rem);
    min-height: max(100vh, 2 * var(--header-h) + 1.5rem + 4.75 * var(--st-size) + 0.8907 * var(--frame-span));
    min-height: max(100svh, 2 * var(--header-h) + 1.5rem + 4.75 * var(--st-size) + 0.8907 * var(--frame-span));
  }

  .landmark--frame {
    top: 50%;
    left: 50%;
    width: calc(var(--frame-span) * 0.4907);
    height: var(--frame-span);
    aspect-ratio: auto;
    background-position: center;
  }

  .landmark--frame-left {
    top: calc(50% - var(--st-size) * 2.375 - var(--frame-span) * 0.2);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .landmark--frame-right {
    top: calc(50% + var(--st-size) * 2.375 + var(--frame-span) * 0.2);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* 404 page: the stay-tuned layout with a short note and a way home */
.stay-hero.stay-hero--not-found {
  /* No frames on this page, so none of the extra height they need on narrow screens */
  min-height: 100vh;
  min-height: 100svh;
}

/* With enlarged text (e.g. 200%) the title would outgrow a 320px screen: cap it by the width */
.stay-hero--not-found .stay-hero__title {
  font-size: min(var(--st-size), 17vw);
}

.not-found {
  padding-inline: var(--gutter);
}

/* With enlarged text the button's padding plus HOMEPAGE outgrow a 320px screen; these caps
   equal the normal values at the default text size, so they only bind when text is enlarged */
.not-found .btn {
  padding-inline: min(1.6rem, 8vw);
  font-size: min(1.0625rem, 6vw);
}

.not-found__text {
  max-width: 30rem;
  margin: clamp(1.25rem, 3vw, 2rem) auto clamp(1.75rem, 4vw, 2.5rem);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  text-wrap: balance;
}

/* On grey: the outline button fills blue */
@media (hover: hover) {
  .not-found .btn:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    color: var(--cream);
  }
}

.privacy-banner {
  /* Below 1100px the Louvre gets a band under the buttons: the banner grows
     by the visible part of the drawing (40% of its width) */
  --louvre-w: max(540px, 68vw);
  padding-block: var(--space-section) calc(var(--louvre-w) * 0.4 + 0.5rem);
  text-align: center;
}

@media (min-width: 1100px) {
  .privacy-banner {
    --louvre-w: clamp(42rem, 50vw, 64rem);
    padding-bottom: var(--space-section);
  }
}

.privacy-banner__title {
  max-width: 9.5em;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.privacy-banner__text {
  max-width: 36rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}

.privacy-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* 12. Contact
   ========================================================================== */

.contact {
  padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)) var(--space-section);
}

/* Stacked layout: room beside and under SEND for the Arc. Its top stays about
   1.5rem below the privacy line (SEND + gaps = 6.6rem below that line).
   When text appears under SEND (errors, sending, fallback) or the thank-you
   panel shows, the Arc steps down 1.5rem below that text instead. */
@media (max-width: 56.24875em) {
  .contact {
    --arc-h: clamp(11.5rem, (100vw - 9.5rem) * 1.1, 26rem);
    padding-bottom: max(var(--space-section), calc(var(--arc-h) - 5rem));
  }

  .contact:has(.form-status:not(:empty), .form-success:not([hidden]), .form-success:target) {
    padding-bottom: calc(var(--arc-h) + 1.5rem);
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 4rem);
}

@media (min-width: 56.25em) {
  /* The heading column never gets narrower than its longest word (enlarged text):
     the form column gives way instead */
  .contact__grid {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 32rem);
    column-gap: clamp(3rem, 7vw, 8rem);
    align-items: start;
  }
}

.contact__title {
  font-family: var(--font-display);
  font-size: min(clamp(3.25rem, 8vw, 8rem), 22vw);   /* cap: "CURIOUS?" fits 320px at 200% text */
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.contact__panel {
  max-width: 32rem;
}

@media (min-width: 56.25em) {
  .contact__panel {
    padding-top: clamp(0.5rem, 2vw, 2rem);
  }
}

/* Form */
.contact-form {
  --focus: var(--blue);
  display: grid;
  gap: 1.5rem;
  color: var(--ink);
}

.form-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-group__legend {
  margin-bottom: 0.75rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.field__req {
  color: var(--ink-soft);
  font-weight: 400;
}

/* The two name labels stack "(required)" so both inputs line up */
.form-row .field__req {
  display: block;
}

.field__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: var(--grey);   /* light grey fill: line art never runs behind typed text */
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}

textarea.field__input {
  min-height: 10.5rem;
  resize: vertical;
}

.field__input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (hover: hover) {
  .field__input:hover {
    box-shadow: inset 0 0 0 1px var(--ink);
  }
}

/* Error state: a heavier blue border plus a bold "Please…" message */
.field__input[aria-invalid="true"] {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.field__error {
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Characters left, shown near the message limit (script.js); bold blue at the limit */
.field__count {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.field__count.is-full {
  color: var(--blue);
  font-weight: 600;
}

/* Keep browser autofill on-palette */
.field__input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100px var(--grey);
  -webkit-text-fill-color: var(--ink);
}

/* Honeypot: off-screen, out of the tab order, hidden from assistive tech */
.form-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Privacy line at the point of collection */
.form-note {
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .form-note a:hover {
    text-decoration-thickness: 2px;
  }
}

.form-actions {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-top: 0.25rem;
}

/* Two columns: the privacy line sits beside SEND, so the form stays compact */
@media (min-width: 56.25em) {
  .form-actions {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "send note"
      "status status";
    align-items: center;
    column-gap: 1.75rem;
  }

  .form-actions .btn-send {
    grid-area: send;
  }

  .form-actions .form-note {
    grid-area: note;
  }

  .form-actions .form-status {
    grid-area: status;
  }
}

/* SEND: a black oval */
.btn-send {
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 4.6rem;
  padding: 0 0 0 0.14em;
  border: 0;
  border-radius: 50%;
  background-color: var(--ink);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.25s var(--ease), transform 0.2s var(--ease);
}

.btn-send:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn-send:active {
  transform: scale(0.97);
}

.btn-send[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

@media (hover: hover) {
  .btn-send:hover {
    background-color: var(--blue);
  }
}

.form-status {
  max-width: 30rem;
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;   /* the email address in the fallback text, with enlarged text */
}

.form-status__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

@media (hover: hover) {
  .form-status__link:hover {
    background-color: var(--blue);
    color: var(--cream);
  }
}

/* Thank-you state */
.form-success:focus {
  outline: none;
}

/* Without JavaScript, Formward redirects back to contact.html?sent=1#form-success:
   the targeted panel shows and the form steps aside. */
.no-js .form-success:target {
  display: block !important;   /* outranks the global [hidden] rule */
}

.no-js .contact__panel:has(.form-success:target) .contact-form {
  display: none;
}

.form-success__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.form-success__text {
  max-width: 26rem;
  margin-top: 1.25rem;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.6;
}

.link-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

@media (hover: hover) {
  .link-button:hover {
    text-decoration-thickness: 2px;
  }
}


/* 13. Legal pages
   ========================================================================== */

.legal-hero {
  padding-block: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)) clamp(3.5rem, 8vw, 6.5rem);
}

/* Cookie policy: the copy ends above the skyline's rooftops (they start at
   about 55% of its height; the strip is max(100vw, 75rem) / 4.8 tall) */
.legal-hero--skyline {
  padding-bottom: calc(max(100vw, 75rem) * 0.115 + 1rem);
}

/* Its Eiffel and spires rise behind the intro: lighter than the other strips */
.legal-hero--skyline .landmark--skyline {
  --landmark-opacity: 0.24;
}

/* Terms of use: the Louvre. Below 1100px it stands as on the stay-tuned banner, in a
   band of its own under the intro: the hero grows by the visible part of the drawing
   (40% of its width). From 1100px it sits on the hero's bottom edge, right of the copy:
   only the pyramid and what lies right of its left slope show (the masks of section 7),
   its left corner (18.4% in) 3.5rem right of the intro column (40rem wide), and it
   grows into the room on the right, up to 55rem wide. No line runs behind the text. */
.legal-hero--louvre {
  --louvre-w: max(68vw, 540px);   /* as on the stay-tuned banner */
}

@media (max-width: 1099.98px) {
  .legal-hero--louvre {
    padding-bottom: calc(var(--louvre-w) * 0.4 + 0.5rem);
  }
}

@media (min-width: 1100px) {
  .legal-hero--louvre {
    --copy-left: max(var(--gutter), (100% - var(--container)) / 2);
    --louvre-w: min(55rem, (100% + min(2vw, 32px) - var(--copy-left) - 43.5rem) / 0.816);
  }

  /* The slope mask with a sharper edge (32-33%; the slope lies at 33.3%): on wide
     screens the title's second line ends near the slope, and none of the palace
     behind it may show there */
  .legal-hero--louvre .landmark--louvre {
    left: calc(var(--copy-left) + 43.5rem - var(--louvre-w) * 0.184);
    -webkit-mask-image: linear-gradient(137.5deg, transparent 32%, #000 33%), linear-gradient(to right, transparent calc(18.4% - 0.5rem), #000 18.4%);
    mask-image: linear-gradient(137.5deg, transparent 32%, #000 33%), linear-gradient(to right, transparent calc(18.4% - 0.5rem), #000 18.4%);
  }
}

.legal-hero__title {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.legal-hero__meta {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-hero__intro {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.legal-hero__intro p + p {
  margin-top: 1em;
}

/* Reading section: ornate corners frame the text */
.legal-body {
  --corner: clamp(64px, 11vw, 168px);
  --corner-inset: clamp(10px, 1.8vw, 26px);
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--corner) + var(--corner-inset) + clamp(0.5rem, 2vw, 1.5rem));
}

.legal-corner {
  position: absolute;
  z-index: -1;
  width: var(--corner);
  height: var(--corner);
  background: url("images/landmarks/ornate-corner.webp") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.legal-corner--tl {
  top: var(--corner-inset);
  left: var(--corner-inset);
}

.legal-corner--tr {
  top: var(--corner-inset);
  right: var(--corner-inset);
  transform: scaleX(-1);
}

.legal-corner--bl {
  bottom: var(--corner-inset);
  left: var(--corner-inset);
  transform: scaleY(-1);
}

.legal-corner--br {
  right: var(--corner-inset);
  bottom: var(--corner-inset);
  transform: scale(-1, -1);
}

.legal-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
  font-size: 1.0625rem;
}

@media (min-width: 768px) {
  .legal-body__grid {
    font-size: 1.125rem;
  }
}

@media (min-width: 1100px) {
  .legal-body__grid {
    grid-template-columns: 15rem minmax(0, 68ch);
    justify-content: start;
    column-gap: clamp(3rem, 6vw, 6.5rem);
  }

  .legal-toc {
    align-self: start;
  }
}

/* Sticky only where the whole list fits the window (the 14-entry privacy list
   needs about 43rem with its offset), so no entry can sit below the fold */
@media (min-width: 1100px) and (min-height: 46rem) {
  .legal-toc {
    position: sticky;
    top: 2rem;
  }
}

/* "On this page": its top rule lines up with the first h2's rule */
.legal-toc {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.9375rem;
}

.legal-toc__title {
  margin-bottom: 1rem;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.legal-toc__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(26 26 26 / 0.22);
  list-style: none;
  counter-reset: toc;
}

.legal-toc__list li {
  border-bottom: 1px solid rgb(26 26 26 / 0.22);
  counter-increment: toc;
}

/* The number stands out of flow, so the hover underline marks the label only */
.legal-toc__list a {
  position: relative;
  display: block;
  padding-block: 0.6rem;
  padding-left: 2.1rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.legal-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .legal-toc__list a:hover {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}

/* Legal text */
.legal-content {
  max-width: 68ch;
  color: var(--ink);
  font-size: inherit;
  line-height: 1.65;
  overflow-wrap: break-word;   /* long words in narrow nested lists, with enlarged text */
}

/* The first heading starts flush, so its rule lines up with the TOC's rule */
.legal-content > :first-child,
.legal-content > :first-child > h2:first-child {
  margin-top: 0;
}

/* Jump targets (the TOC's sections and any anchor in the text, such as an h3 with
   an id): a little air above them after a jump */
.legal-content [id] {
  scroll-margin-top: 1.5rem;
}

.legal-content h2 {
  margin: 3.25rem 0 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.legal-content h3 {
  margin: 2rem 0 0.5rem;
  color: var(--ink);
  font-size: 1.0625em;
  font-weight: 600;
  line-height: 1.4;
}

/* Defensive: ol, dl, address, b and nested lists are unused today, styled for future edits */
.legal-content p,
.legal-content ul,
.legal-content ol,
.legal-content dl,
.legal-content address {
  margin: 0 0 1.1em;
}

.legal-content ul,
.legal-content ol {
  padding-left: 1.35em;
}

.legal-content li {
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}

.legal-content li::marker {
  color: var(--blue);
}

.legal-content ul ul,
.legal-content ol ol,
.legal-content ul ol,
.legal-content ol ul {
  margin: 0.45em 0 0;
}

.legal-content a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .legal-content a:hover {
    text-decoration-thickness: 2px;
  }
}

.legal-content strong,
.legal-content b {
  font-weight: 600;
}

.legal-content address {
  font-style: normal;
}

.legal-content dt {
  font-weight: 600;
}

.legal-content dd {
  margin: 0 0 0.75em;
}

.legal-table {
  width: 100%;
  margin: 1.5rem 0 2rem;
  border-collapse: collapse;
  font-size: 0.875em;
  line-height: 1.5;
}

.legal-table caption {
  margin-bottom: 0.6rem;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.legal-table th,
.legal-table td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  border-bottom: 1px solid rgb(26 26 26 / 0.22);
  text-align: left;
  vertical-align: top;
}

.legal-table tr > :last-child {
  padding-right: 0;
}

.legal-table th {
  color: var(--blue);
  font-weight: 600;
}

/* The same column split in every engine (WebKit's auto layout squeezes the
   first column); phones reset it below */
.legal-table thead th:first-child {
  width: 35%;
}

/* Ink rules above the first row, under the header row and the last row */
.legal-table tr:first-child > * {
  border-top: 1px solid var(--ink);
}

.legal-table tr:last-child > *,
.legal-table thead th {
  border-bottom-color: var(--ink);
}

/* A table that ends its section: the next section's rule closes it (no double rule) */
.legal-section > .legal-table:last-child tr:last-child > * {
  border-bottom: 0;
}

/* Narrow screens: wide tables scroll sideways instead of breaking words */
@media (max-width: 600px) {
  .legal-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .legal-table th,
  .legal-table td {
    min-width: 8.5rem;
  }

  .legal-table thead th:first-child {
    width: auto;
  }
}

/* Values the client still has to fill in */
.placeholder {
  padding-inline: 0.15em;
  border-radius: 2px;
  background-color: rgb(0 74 173 / 0.08);   /* --blue at 8% */
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.theme-blue .placeholder {
  background-color: rgb(248 247 242 / 0.14);
  color: inherit;
}

/* End of the page: back to top (the page links follow in the footer) */
.legal-end {
  display: flex;
  align-items: center;
  max-width: 68ch;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.back-to-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* A 44px-tall touch target, extended vertically only */
.back-to-top::after {
  content: "";
  position: absolute;
  inset: max(-0.875rem, (100% - 44px) / 2) 0;
}

.back-to-top svg {
  width: 0.75em;
  height: auto;
  transition: transform 0.3s var(--ease);
}

@media (hover: hover) {
  .back-to-top:hover svg {
    transform: translateY(-0.2em);
  }
}


/* 14. Reduced motion & forced colours
   ========================================================================== */

/* Reduced motion, and print (a printed page cannot move): no animation, and
   the marquee becomes one static statement */
@media print, (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* The marquee becomes one static, centred statement */
  .marquee__track {
    align-self: stretch;
    justify-content: center;
    width: auto;
    animation: none;
  }

  /* The three phrases stack, centred, with the dots as separators */
  .marquee__group {
    flex: 0 1 auto;
    flex-direction: column;
    gap: 0.22em;
    padding-inline: var(--gutter);
    font-size: clamp(2.5rem, 6vw, 6rem);
    text-align: center;
    white-space: normal;
  }

  .marquee__dot {
    width: 0.14em;
    height: 0.14em;
  }

  .marquee__group + .marquee__group,
  .marquee__group > .marquee__dot:last-child,
  .marquee__toggle {
    display: none;
  }
}

/* Without JavaScript there is no Pause button (WCAG 2.2.2), so nothing may move:
   the same static statement (the toggle is hidden in 10. About & marquee) */
.no-js .marquee__track {
  align-self: stretch;
  justify-content: center;
  width: auto;
  animation: none;
}

.no-js .marquee__group {
  flex: 0 1 auto;
  flex-direction: column;
  gap: 0.22em;
  padding-inline: var(--gutter);
  font-size: clamp(2.5rem, 6vw, 6rem);
  text-align: center;
  white-space: normal;
}

.no-js .marquee__dot {
  width: 0.14em;
  height: 0.14em;
}

.no-js .marquee__group + .marquee__group,
.no-js .marquee__group > .marquee__dot:last-child {
  display: none;
}

/* The narrowest screens: "CUSTOMISABILITY" still fits with user text spacing
   (WCAG 1.4.12) */
@media (prefers-reduced-motion: reduce) and (max-width: 360px) {
  .marquee__group {
    font-size: 2.25rem;
  }
}

@media (max-width: 360px) {
  .no-js .marquee__group {
    font-size: 2.25rem;
  }
}

/* Forced colours (Windows contrast themes): the browser drops background colours
   and gradients, so the CSS-drawn icons, lines and shapes are redrawn in system colours */
@media (forced-colors: active) {
  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .site-nav__text::after,
  .marquee__toggle-icon,
  .marquee__dot,
  .site-footer__pages-list li + li::before {
    forced-color-adjust: none;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .marquee__dot,
  .site-footer__pages-list li + li::before {
    background-color: CanvasText;
  }

  .site-nav__text::after {
    background-color: LinkText;
  }

  .marquee__toggle-icon {
    color: ButtonText;
  }

  /* SEND keeps its oval as an outline */
  .btn-send {
    border: 2px solid ButtonText;
  }

  /* Gradient underlines become real ones */
  .about__copy em,
  .about__cta,
  .hover-line[aria-current="page"],
  .hover-line:focus-visible,
  .site-footer__email:focus-visible .hover-line,
  .footer-branding__email:focus-visible .hover-line {
    text-decoration: underline;
  }
}

@media (forced-colors: active) and (hover: hover) {
  .hover-line:hover,
  .site-footer__email:hover .hover-line,
  .footer-branding__email:hover .hover-line {
    text-decoration: underline;
  }
}


/* 15. Print (legal pages first and foremost)
   ========================================================================== */

@media print {
  @page {
    margin: 18mm 16mm;
  }

  html,
  body,
  .theme-blue,
  .theme-grey {
    background: var(--white) !important;
    color: var(--ink) !important;
  }

  .skip-link,
  .site-header,
  .landmark,
  .legal-corner,
  .legal-toc,
  .legal-end,
  .balcony,
  .marquee__toggle,
  .site-footer {
    display: none !important;
  }

  .legal-hero,
  .legal-body {
    padding: 0 !important;
  }

  .legal-hero {
    margin-bottom: 8mm;
  }

  .legal-hero__title {
    font-size: 26pt;
  }

  .legal-body__grid {
    display: block;
    font-size: 10.5pt;
  }

  .legal-content {
    max-width: none;
    line-height: 1.5;
  }

  .legal-content h2 {
    margin-top: 8mm;
    color: var(--ink);
    font-size: 15pt;
    break-after: avoid;
  }

  .legal-content h3 {
    break-after: avoid;
  }

  .legal-content a {
    color: var(--ink);
  }

  .legal-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-weight: 400;
  }

  .legal-table tr {
    break-inside: avoid;
  }

  .placeholder {
    background: none;
    color: inherit;
  }

  /* Stay tuned: the statement no longer fills a whole sheet, so the banner follows it */
  .stay-hero {
    min-height: 0;
    padding-block: 0 10mm;
  }

  /* Backgrounds do not print by default: buttons print as ink outlines, and the
     eyebrow rule (a background) is drawn as a border */
  .btn {
    border-color: var(--ink) !important;
    background: none !important;
    color: var(--ink) !important;
  }

  .eyebrow::before {
    height: 0;
    border-top: 1px solid currentColor;
  }
}