/* ==========================================================================
   Header, mobile menu and footer of the home page, for every other page of the site
   (the home page has them in styles.css; the other pages don't load styles.css).
   Markup: copied from index.html by tools/chrome.py, never edited by hand in the pages.
   ========================================================================== */
:root { --creme-2: #EDE6D8; --encre-2: #221F23; --framboise-d: #C8215A; --ease: cubic-bezier(.2, .7, .2, 1); --pop: cubic-bezier(.34, 1.4, .64, 1); --dv: "wdth" 125; --hdm: clamp(20px, 4vw, 64px); }

.menu { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; padding: 18px var(--hdm) 32px; background: var(--encre); color: var(--creme); }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-logo { width: 62px; height: 36px; color: var(--creme); }
.menu-close { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--creme); color: var(--encre); font: 650 16px var(--text); }
.menu-links { margin-top: auto; display: flex; flex-direction: column; }
.menu-links a { font-family: var(--disp); font-variation-settings: var(--dv); font-weight: 800; font-size: 11vw; line-height: 1.05; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.menu-links a[aria-current] { color: var(--framboise); }
.menu-cta { margin-top: 32px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--framboise); color: var(--encre); font-weight: 700; text-decoration: none; }
.menu-soc { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.soc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .22); color: var(--creme); }
.soc svg { width: 19px; height: 19px; }
@media (max-width: 899px) {
  
  
  
  
  
  
}
@media (prefers-reduced-motion: reduce) {  }
.soc { transition: background .25s, color .25s, box-shadow .25s; }
.soc:hover, .soc:focus-visible, .soc:active { background: var(--framboise); color: var(--encre); box-shadow: none; }
html { scroll-padding-top: 110px; }

/* the page starts under the fixed header */
main.pg, main.lg { padding-top: calc(5vh + 96px); }
@media (max-width: 899px) { main.pg, main.lg { padding-top: calc(4vh + 72px); } }

/* footer: as on the home page. There, the last section's rounded bottom lies over the footer;
   here the page's cream does the same, so the footer starts with the same rounded edge. */
.ft { position: relative; z-index: 1; margin-top: 8vh; background: var(--encre); color: var(--creme); padding: calc(8vh + 48px) var(--hdm) 26px; }
.ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 0 0 48px 48px; background: var(--sol, var(--creme)); }
.ft a { color: inherit; }
.ft-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.ft-brand a { display: block; width: fit-content; }
.ft-brand .ft-logo { width: min(100%, 360px); height: auto; aspect-ratio: 708 / 416; display: block; overflow: visible; }
.fl-p, .fl-o { fill: var(--creme); stroke: var(--creme); stroke-width: 2.5; stroke-linejoin: round; }
.fl-o { fill: var(--framboise); stroke: var(--framboise); }
.ft-logo.is-ready .fl-p, .ft-logo.is-ready .fl-o { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ft-logo.is-drawn .fl-p, .ft-logo.is-drawn .fl-o { fill-opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .2s, fill-opacity .8s var(--ease) 1.8s; }
.ft-logo.is-drawn .fl-o { transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .5s, fill-opacity .8s var(--ease) 2.1s; }
.ft-col a, .ft-col span { display: block; padding: 5px 0; font-size: 15.5px; line-height: 1.6; color: rgba(246, 241, 231, .86); text-decoration: none; }
.ft-col a:hover { color: var(--framboise); }
.ft-soc { display: flex; gap: 10px; margin-top: 12px; }
.ft-col .ft-soc { margin-top: 16px; }
.ft-col .ft-soc a { display: grid; padding: 0; width: 44px; height: 44px; }
.ft-h { font-size: 13px; font-weight: 650; color: #A8A1AA; margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ft-bot { margin-top: 7vh; padding-top: 20px; border-top: 1px solid rgba(246, 241, 231, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #A8A1AA; }
.ft-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-legal a { color: rgba(246, 241, 231, .78); text-decoration: none; }
.ft-legal a:hover { color: var(--framboise); }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .ft { padding-top: calc(8vh + 28px); }
  .ft::before { height: 28px; border-radius: 0 0 28px 28px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-brand .ft-logo { width: 62vw; }
  .ft-col:last-child { grid-column: 1 / -1; }
  .d-only-link { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .ft-logo.is-drawn .fl-p, .ft-logo.is-drawn .fl-o, .soc { transition: none; } }

/* ==========================================================================
   MOBILE MENU · organised: the four services as coloured rows (what each one is, in a line), then the rest,
   then the call to action and the contacts — all on one screen, no giant words
   ========================================================================== */
.menu { padding: 16px 16px 24px; overflow-y: auto; gap: 0; }
.menu-top { flex: none; }
.menu-close { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 20px; font: 700 15px/1 var(--text); }
.menu-close i { position: relative; width: 14px; height: 14px; }
.menu-close i::before, .menu-close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.menu-close i::after { transform: rotate(-45deg); }
.menu-h { margin: 28px 0 10px; font: 700 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 241, 231, .5); }
.menu-links { margin-top: 0; }
.menu .menu-svc { display: grid; gap: 8px; }
.menu .menu-svc a { position: relative; display: grid; grid-template-columns: 1fr 40px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 14px 16px 18px; border-radius: 22px;
  background: var(--c); color: var(--encre); text-decoration: none; white-space: normal; font: inherit; line-height: 1; letter-spacing: 0; }
.menu .menu-svc a[style*="--b:1"] { background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .25); }
.menu .menu-svc b { grid-column: 1; font: 800 25px/1 var(--disp); font-variation-settings: var(--dv); letter-spacing: -.04em; }
.menu .menu-svc small { grid-column: 1; margin-top: 6px; font: 600 13.5px/1.3 var(--text); opacity: .72; }
.menu .menu-svc i { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.menu .menu-svc i::before { content: ""; position: absolute; left: 12px; top: 13px; width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.menu .menu-svc a:active { transform: scale(.98); }
.menu .menu-more { display: flex; flex-wrap: wrap; gap: 8px; }
.menu .menu-more a { padding: 12px 18px; border-radius: 99px; background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1px rgba(246, 241, 231, .14); font: 700 16px/1 var(--text); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.menu .menu-more a[aria-current] { background: var(--framboise); color: var(--encre); }
.menu .menu-cta { flex: none; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: auto; padding-top: 0; height: 58px; font-size: 17px; }
.menu-links ~ .menu-cta { margin-top: 28px; }
.menu-cta i { font-style: normal; }
.menu .menu-soc { margin-top: 14px; }

.menu .menu-svc a.is-dk { background: rgba(246, 241, 231, .08); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .25); }