@layer reset, tokens, base, frame, sections;
@layer reset {
/* The platform's reset, under every theme (layer "reset"). Only what makes
   the contract's markup neutral; nothing here is a design choice. */

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

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

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

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

ul {
  list-style: none;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* French quotation marks with their thin no-break space */
:lang(fr) {
  quotes: "«\202F" "\202F»" "“" "”";
}

a {
  color: inherit;
  text-decoration: inherit;
}

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

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.site-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* the honeypot stays hidden whatever the theme */
.form-trap {
  display: none !important;
}

/* the note after sending: shown when the site server sends the visitor back
   to #form-sent or #form-error. Themes may restyle it. */
.form-note {
  display: none;
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius, 0.5rem);
  /* translucent, so it reads on light and dark themes */
  background: color-mix(in srgb, var(--primary, #2563eb) 16%, transparent);
  color: inherit;
  scroll-margin-top: 6rem;
}
.form-note:target {
  display: block;
}
.form-note[data-kind="error"] {
  background: color-mix(in srgb, #dc2626 18%, transparent);
}

/* opening hours: days, then times, in two aligned columns. Themes may
   restyle them. */
.s-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1em;
}
.s-hours li {
  display: contents;
}
.s-hours-range {
  white-space: nowrap;
}

}
@layer tokens {
:root {
  --primary: #5f7a61;
  --on-primary: #ffffff;
  --soft: #eff2ef;
  --lifted: #8c9f8d;
  --on-lifted: #0c0c0e;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
}
/* clinique: calm and reassuring, for health practices. White and a cool
   grey, a classic serif for headings, the customer's colour as deep solid
   panels, soft cards, a small cross as the ornament, round icons for the
   practical details. */
:root {
  --font-display: "Playfair Display", var(--font-serif);
  --font-text: "Source Sans 3", var(--font-sans);
  --bg: #ffffff;
  --surface: #ffffff;
  --cool: #f4f6f9;
  --text: #16213a;
  --ink: #16213a;
  --muted: #545f75;
  --border: #e3e7ee;
  --accent: var(--primary);
  /* the customer's colour as text on white: darker, so light palettes read */
  --accent-ink: color-mix(in oklab, var(--primary) 78%, #000);
  --tint: color-mix(in oklab, var(--primary) 10%, #fff);
  /* deep panels: the colour, darkened a little so white reads on any palette */
  --deep: color-mix(in oklab, var(--primary) 80%, #0b1428);
  --gold: #c39a45;
  --radius: 1rem;
  --radius-btn: 0.6rem;
  --shadow: 0 1px 2px rgb(22 33 58 / 0.05), 0 12px 32px -14px rgb(22 33 58 / 0.22);
  --width: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 6.5rem);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  /* a plus sign in a circle, drawn with gradients */
  --cross:
    linear-gradient(currentColor, currentColor) center / 40% 12% no-repeat,
    linear-gradient(currentColor, currentColor) center / 12% 40% no-repeat;
}

}
@layer base {
html {
  font-family: var(--font-text);
}

body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--tint);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.3rem;
}

main a:not([class]) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* the button: solid, calm, with an arrow */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-btn);
  padding: 0.95rem 1.6rem;
  background: var(--deep);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 250ms,
    transform 250ms var(--ease);
}

.btn::after {
  content: "→";
  transition: transform 250ms var(--ease);
}

.btn:hover {
  background: var(--ink);
}

.btn:hover::after {
  transform: translateX(3px);
}

/* sections: centred headings under a small cross */

.s {
  position: relative;
  padding: var(--section-y) var(--gutter);
}

.s-inner {
  position: relative;
  isolation: isolate;
  max-width: var(--width);
  margin: 0 auto;
}

.s-head {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.s-head::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--cross), var(--tint);
  color: var(--accent);
}

.s-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.s-intro {
  margin-top: 0.9rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.s-body {
  font-size: 1.1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.s-body > * + *,
.s-item-text > * + * {
  margin-top: 1em;
}

/* backgrounds chosen by the customer */

.s[data-bg="soft"] {
  background: var(--cool);
}

.s[data-bg="primary"] {
  background: var(--deep);
  color: #fff;
  --text: #fff;
  --muted: rgb(255 255 255 / 0.82);
}

.s[data-bg="primary"] .s-head::before {
  background: var(--cross), rgb(255 255 255 / 0.14);
  color: var(--gold);
}

.s[data-bg="primary"] > .s-inner > .s-actions .btn,
.s[data-bg="primary"] > .s-inner > .s-content .btn,
.s[data-bg="image"] .btn {
  background: #fff;
  color: var(--ink);
}

.s[data-bg="image"] {
  overflow: hidden;
  color: #fff;
  --text: #fff;
  --muted: rgb(255 255 255 / 0.86);
}

.s[data-bg="image"] .s-head::before {
  background: var(--cross), rgb(255 255 255 / 0.18);
  color: #fff;
}

.s-bg {
  position: absolute;
  inset: 0;
}

.s-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 20 40 / 0.62), rgb(11 20 40 / 0.78));
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-bg img {
      height: 130%;
      animation: clinique-parallax linear both;
      animation-timeline: view();
    }

    @keyframes clinique-parallax {
      from {
        transform: translateY(-23%);
      }
      to {
        transform: translateY(0);
      }
    }

    .s-item {
      animation: clinique-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }

    @keyframes clinique-in {
      from {
        opacity: 0;
        transform: translateY(1.25rem);
      }
    }
  }
}

/* forms */

.form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: block;
}

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.6);
  background: var(--cool);
  color: var(--ink);
  padding: 0.85rem 1rem;
  transition:
    border-color 200ms,
    background 200ms,
    box-shadow 200ms;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--tint);
}

}
@layer frame {
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

.site-skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 40;
  border-radius: var(--radius-btn);
  padding: 0.75rem 1.25rem;
  background: var(--deep);
  color: #fff;
}

.site-skip:focus {
  top: 1rem;
}

/* header: white, the name with a cross, the menu on the right */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--width);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink);
}

.site-brand:not(:has(.site-logo))::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: var(--cross), var(--deep);
  color: #fff;
}

.site-logo {
  height: 2.6rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
}

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.site-nav-item a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-weight: 600;
  color: var(--muted);
  transition: color 200ms;
}

.site-nav-item a:hover,
.site-nav-item [aria-current="page"] {
  color: var(--accent-ink);
}

.site-nav-item [aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.site-langs {
  display: flex;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.site-langs [aria-current] {
  color: var(--accent-ink);
}

.site-header-inner > .site-nav,
.site-header-inner > .site-langs {
  display: none;
}

.site-menu {
  position: relative;
}

.site-menu-toggle {
  border-radius: var(--radius-btn);
  background: var(--deep);
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: #fff;
}

.site-menu-panel {
  position: absolute;
  right: 0;
  z-index: 20;
  width: min(17rem, 85vw);
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.site-menu-panel .site-nav-list {
  flex-direction: column;
}

.site-menu-panel .site-langs {
  margin-top: 1rem;
}

@media (min-width: 900px) {
  .site-header-inner > .site-nav,
  .site-header-inner > .site-langs {
    display: flex;
  }

  .site-header-inner > .site-nav {
    margin-left: auto;
  }

  .site-header-inner > .site-langs {
    border-left: 1px solid var(--border);
    padding-left: 1.25rem;
  }

  .site-menu {
    display: none;
  }
}

/* footer: the deep colour, everything in columns */

.site-footer {
  background: color-mix(in oklab, var(--deep) 70%, #050a14);
  color: rgb(255 255 255 / 0.75);
  padding: clamp(3.5rem, 7vw, 5rem) var(--gutter) 2.5rem;
  font-size: 0.95rem;
}

.site-footer-inner {
  display: grid;
  gap: 2rem;
  max-width: var(--width);
  margin: 0 auto;
}

.site-footer-name {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  color: #fff;
}

.site-footer-business > * + * {
  margin-top: 0.3rem;
}

.site-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: start;
}

.site-social a {
  display: block;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: #fff;
  transition:
    background 200ms,
    border-color 200ms;
}

.site-social a:hover {
  border-color: var(--gold);
  background: rgb(255 255 255 / 0.08);
}

.site-legal,
.site-badge {
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.875rem;
}

.site-legal a,
.site-badge a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-legal a:hover,
.site-badge a:hover {
  color: #fff;
}

@media (min-width: 800px) {
  .site-footer-inner {
    grid-template-columns: 1fr auto;
  }

  .site-social {
    justify-content: end;
  }

  .site-legal {
    grid-column: 1;
  }

  .site-badge {
    text-align: right;
  }
}

}
@layer sections {
/* a tall photo with its corner on a tinted block, the text beside */

.s--about .s-inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.s--about .s-media {
  position: relative;
  margin: 0 1rem 1rem 0;
}

.s--about .s-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1rem -1rem -1rem 1rem;
  border-radius: var(--radius);
  background: var(--tint);
}

.s--about .s-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.s--about .s-head {
  margin: 0 0 1.25rem;
  text-align: left;
}

.s--about .s-head::before {
  margin-left: 0;
}

.s--about .s-content:only-child {
  max-width: 46rem;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .s--about .s-inner:has(.s-media) {
    grid-template-columns: 5fr 6fr;
  }

  .s--about .s-media img {
    aspect-ratio: 4 / 5;
  }

  .s--about[data-variant="image-right"] .s-inner:has(.s-media) {
    grid-template-columns: 6fr 5fr;
  }

  .s--about[data-variant="image-right"] .s-media {
    order: 1;
  }
}

.s--about[data-variant="portrait"] .s-media {
  justify-self: center;
  width: min(80%, 22rem);
  margin: 0;
}

.s--about[data-variant="portrait"] .s-media::before {
  inset: -0.75rem;
  border-radius: 50%;
}

.s--about[data-variant="portrait"] .s-media img {
  aspect-ratio: 1;
  border-radius: 50%;
}

/* each detail with its round icon, the form in a card */

.s--contact .s-inner {
  display: grid;
  gap: 2rem;
}

.s--contact .s-details {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.s--contact .s-detail {
  display: grid;
  grid-template-columns: 3rem 1fr;
  /* the icon spans a flexible third row, so the label and value stay together */
  grid-template-rows: auto auto 1fr;
  column-gap: 1rem;
  align-items: start;
}

.s--contact .s-detail::before {
  content: "";
  grid-row: 1 / span 3;
  grid-column: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tint);
}

.s--contact .s-detail::after {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.85rem;
  background: var(--accent-ink);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.s--contact .s-detail[data-kind="phone"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.s--contact .s-detail[data-kind="email"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.s--contact .s-detail[data-kind="address"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.s--contact .s-detail[data-kind="hours"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.s--contact .s-detail dt {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--muted);
}

.s--contact .s-detail dd {
  grid-column: 2;
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.s--contact .s-detail[data-kind="hours"] dd {
  font-weight: 400;
  font-size: 1rem;
}

.s--contact .s-detail a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.s--contact:is([data-bg="primary"], [data-bg="image"]) .s-detail::before {
  background: rgb(255 255 255 / 0.14);
}

.s--contact:is([data-bg="primary"], [data-bg="image"]) .s-detail::after {
  background: #fff;
}

.s--contact .form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow);
}

@media (min-width: 860px) {
  .s--contact[data-variant="default"] .s-inner:has(.form):has(.s-details) {
    grid-template-columns: 2fr 3fr;
    gap: 3rem;
  }

  .s--contact .s-head {
    grid-column: 1 / -1;
  }
}

.s--contact[data-variant="stacked"] .s-inner {
  max-width: 46rem;
}

@media (min-width: 640px) {
  .s--contact[data-variant="stacked"] .s-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* a rounded panel of the deep colour, the title on the left */

.s--cta .s-inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.s--cta .s-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.s--cta .s-intro {
  margin-top: 0.75rem;
}

@media (min-width: 860px) {
  .s--cta .s-inner {
    grid-template-columns: 1fr auto;
    gap: 4rem;
  }
}

.s--cta[data-bg="primary"] {
  background: none;
  color: inherit;
}

.s--cta[data-bg="primary"] > .s-inner {
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.5);
  background: radial-gradient(50% 120% at 100% 0%, rgb(255 255 255 / 0.12), transparent), var(--deep);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}

.s--cta:is([data-bg="none"], [data-bg="soft"]) > .s-inner {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  background: var(--surface);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  box-shadow: var(--shadow);
}

.s--cta[data-bg="image"] {
  padding-top: clamp(5rem, 11vw, 9rem);
  padding-bottom: clamp(5rem, 11vw, 9rem);
}

.s--faq .s-items {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
  margin: 0 auto;
}

.s--faq .s-item {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.8);
  background: var(--surface);
  color: var(--ink);
  transition: box-shadow 250ms;
}

.s--faq .s-item[open] {
  box-shadow: var(--shadow);
}

.s--faq .s-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 1.5rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.s--faq .s-item-title::after {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--cross), var(--tint);
  color: var(--accent-ink);
  transition: transform 300ms var(--ease);
}

.s--faq .s-item[open] .s-item-title::after {
  transform: rotate(45deg);
}

.s--faq .s-item-text {
  padding: 0 1.5rem 1.4rem;
  color: #545f75;
  line-height: 1.7;
}

.s--faq[data-variant="open"] .s-item-title {
  pointer-events: none;
}

.s--faq[data-variant="open"] .s-item-title::after {
  content: none;
}

/* split: the text on a deep panel of the customer's colour, the photo to
   the edge of the screen */

.s--hero {
  padding: 0;
  overflow: clip;
}

.s--hero .s-content {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
}

.s--hero .s-content::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.75rem;
  border-radius: 50%;
  background: var(--cross), rgb(255 255 255 / 0.14);
  color: var(--gold);
}

.s--hero .s-title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1.08;
}

.s--hero .s-intro {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
}

.s--hero .s-actions {
  margin-top: 2.25rem;
}

.s--hero:is([data-bg="none"], [data-bg="soft"], [data-bg="primary"]) {
  background: var(--deep);
  color: #fff;
  --text: #fff;
  --muted: rgb(255 255 255 / 0.82);
}

.s--hero:is([data-bg="none"], [data-bg="soft"], [data-bg="primary"]) .btn {
  background: var(--gold);
  color: #1a1408;
}

.s--hero:is([data-bg="none"], [data-bg="soft"], [data-bg="primary"]) .btn:hover {
  background: #fff;
}

.s--hero[data-bg="image"] .s-content::before {
  color: #fff;
}

.s--hero .s-media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .s--hero .s-inner {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* the text keeps to the page's width on its side */
  .s--hero .s-content {
    justify-self: end;
    width: min(100%, calc(var(--width) / 2));
    align-self: center;
    padding-right: clamp(2rem, 4vw, 4rem);
  }

  .s--hero .s-media img {
    aspect-ratio: auto;
    min-height: min(78svh, 44rem);
  }

  .s--hero .s-inner:not(:has(.s-media)) {
    grid-template-columns: 1fr;
  }

  .s--hero .s-inner:not(:has(.s-media)) .s-content {
    justify-self: center;
    width: min(100%, 52rem);
    padding: clamp(5rem, 10vw, 8rem) var(--gutter);
    text-align: center;
  }

  .s--hero .s-inner:not(:has(.s-media)) .s-content::before,
  .s--hero .s-inner:not(:has(.s-media)) .s-intro {
    margin-inline: auto;
  }
}

/* without a photo: a soft glow on the panel */
.s--hero:not(:has(.s-media)):not([data-bg="image"]) {
  background: radial-gradient(60% 90% at 85% 10%, rgb(255 255 255 / 0.12), transparent), var(--deep);
}

.s--legal .s-inner {
  max-width: 48rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: clamp(2rem, 5vw, 3.25rem);
  box-shadow: var(--shadow);
}

.s--legal .s-head {
  margin: 0 0 1rem;
  text-align: left;
}

.s--legal .s-head::before {
  margin-left: 0;
}

.s--legal .s-subtitle {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
}

.s--legal .s-subtitle + p {
  margin-top: 0.5rem;
  font-weight: 600;
}

.s--legal p + p {
  color: #545f75;
}

.s--legal .s-details {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}

.s--legal .s-detail {
  display: contents;
}

.s--legal .s-detail dt {
  color: #545f75;
}

@media (min-width: 640px) {
  .s--legal .s-details {
    grid-template-columns: auto 1fr;
  }
}

/* white cards with a round icon, lifted by a soft shadow */

.s--services .s-items {
  display: grid;
  gap: 1.25rem;
}

.s--services .s-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: var(--shadow);
  transition:
    transform 300ms var(--ease),
    box-shadow 300ms var(--ease);
}

.s--services .s-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgb(22 33 58 / 0.05),
    0 20px 40px -16px rgb(22 33 58 / 0.3);
}

.s--services .s-item::before {
  content: "";
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.4rem;
  border-radius: 50%;
  background: var(--cross), var(--tint);
  color: var(--accent-ink);
}

.s--services .s-item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.s--services .s-item-text {
  margin-top: 0.7rem;
  color: #545f75;
  line-height: 1.6;
}

.s--services .s-item-price {
  margin-top: auto;
  padding-top: 1.25rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.s--services .s-item-price-from,
.s--services .s-item-price-unit {
  font-weight: 400;
  color: #545f75;
}

@media (min-width: 700px) {
  .s--services .s-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .s--services:not([data-count="1"], [data-count="2"], [data-count="4"]) .s-items {
    grid-template-columns: repeat(3, 1fr);
  }

  .s--services[data-count="4"] .s-items,
  .s--services[data-count="8"] .s-items {
    grid-template-columns: repeat(4, 1fr);
  }
}

.s--services[data-count="1"] .s-items {
  grid-template-columns: 1fr;
  max-width: 34rem;
  margin: 0 auto;
}

/* list: one line each, the icon on the left */
.s--services[data-variant="list"] .s-items {
  grid-template-columns: 1fr;
  max-width: 50rem;
  margin: 0 auto;
  gap: 0.75rem;
}

.s--services[data-variant="list"] .s-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1.25rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
}

.s--services[data-variant="list"] .s-item::before {
  grid-row: span 2;
  margin: 0;
}

.s--services[data-variant="list"] .s-item-text {
  grid-column: 2;
}

.s--services[data-variant="list"] .s-item-price {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  padding: 0.2rem 0 0;
  text-align: right;
}

.s--text .s-inner {
  max-width: 46rem;
}

.s--text[data-variant="narrow"] .s-inner {
  max-width: 36rem;
}

@media (min-width: 860px) {
  .s--text[data-variant="columns"] .s-inner {
    max-width: var(--width);
  }

  .s--text[data-variant="columns"] .s-body {
    columns: 2;
    column-gap: 4rem;
  }

  .s--text[data-variant="columns"] .s-body > * {
    break-inside: avoid;
  }
}

}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-display-latin-400-italic.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: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-display-latin-ext-400-italic.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-display-latin-400-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-display-latin-ext-400-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/playfair-display-latin-600-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/playfair-display-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-400-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext-400-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-600-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext-600-normal.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;
}