/* ==========================================================================
   BASE: layout and components. Every colour and size comes from tokens.css.

   Mobile-first: rules outside a media query are for phones; 48em (768px)
   and 64em (1024px) add to them. 64em is also where the menu switches from
   the panel to the inline bar; keep DESKTOP in js/site.js in step with it.

   OLDER BROWSERS (target: iOS 12+, Chrome/Android ~2018+)
   - left/right properties, not margin-inline / padding-inline / inset
   - spacing in flex rows uses margins; `gap` only on grid
   - clamp() / min() / max() only inside @supports
   - :focus-visible only as an enhancement over :focus
   ========================================================================== */


/* 1. Reset ================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

svg {
  flex: none;
}

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

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* The menu panel is open: stop the page behind it from scrolling. */
.nav-open,
.nav-open body {
  overflow: hidden;
}


/* 2. Type ================================================================== */

h1, h2, h3, h4 {
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Greek capitals carry accents (tonos) above the cap height: give them room,
   and Greek reads better with less negative tracking. */
:lang(el) h1, :lang(el) h2, :lang(el) h3, :lang(el) h4 {
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); }

p {
  text-wrap: pretty;
}

strong {
  font-weight: 650;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Hide the ring for mouse clicks where the browser can tell the difference.
   Older browsers don't understand :focus-visible, drop this rule, and keep
   the ring above: the safe failure. */
:focus:not(:focus-visible) {
  outline: none;
}

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

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase; /* with lang="el", browsers drop the accents */
  color: var(--color-accent);
}

.lead {
  max-width: 40rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.text-soft {
  color: var(--color-ink-soft);
}

/* Heading size without changing the heading level. */
.h3 {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}


/* 3. Layout ================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* iPhone in landscape: keep content clear of the notch. */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-xl);
}

.section-head > * + * {
  margin-top: var(--space-s);
}

.section-head p {
  color: var(--color-ink-soft);
}

/* Vertical rhythm: space between siblings, never around them. */
.stack > * + * {
  margin-top: var(--space-m);
}

/* Cards and other blocks: stacked on phones, columns from tablet up. */
.grid > * + * {
  margin-top: var(--space-l);
}

@media (min-width: 48em) {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
  }

  .grid > * + * {
    margin-top: 0;
  }
}

@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Two columns side by side from desktop up: text + facts, form + details. */
.split > * + * {
  margin-top: var(--space-2xl);
}

@media (min-width: 64em) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .split--center {
    align-items: center;
  }

  .split > * + * {
    margin-top: 0;
  }
}

/* A row of buttons. Negative margin + item margin instead of flex `gap`,
   which Safari before 14.1 ignores. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: calc(var(--space-xs) * -1);
}

.actions > * {
  margin: var(--space-xs);
}

.actions--center {
  justify-content: center;
}

* + .actions {
  margin-top: var(--space-l);
}


/* 4. Header & menu ========================================================= */

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-bg);
}

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  view-transition-name: site-header; /* stays put while pages cross-fade */
}

.site-header__bar {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
}

/* The brand yields space; the menu button never does. A long name truncates
   instead of pushing the button off a narrow phone. */
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: auto;
  padding: 0.5rem 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand:hover {
  color: var(--color-ink);
}

.brand__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The logo image: <img class="brand__logo" src="/images/logo-243.png"
   alt="LOVE MYBODY" width="243" height="100">. Height is capped, width
   follows the artwork. */
.brand__logo {
  width: auto;
  height: 3rem;
  max-width: 100%;
}

.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-s);
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lang-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

/* "Menu" exists twice: a link to the footer page list (works with no
   JavaScript at all) and a button that opens the panel. site.js swaps
   the link for the button. Same look, so nothing moves when it does. */
.menu-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 2.75rem;
  margin-left: var(--space-2xs);
  padding: 0 0.875rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.menu-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.menu-toggle__icon {
  position: relative;
  width: 16px;
  height: 10px;
  margin-right: 0.5rem;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }

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

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

/* Phone & tablet: the menu is a panel under the header. */
.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: fixed;
  top: calc(var(--header-h) + 1px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-xs) var(--gutter) var(--space-2xl);
  background: var(--color-bg);
}

.nav__item {
  border-bottom: 1px solid var(--color-line);
}

/* Parent items hold a link, a submenu button and the submenu itself. */
.nav__item--parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav__link {
  display: block;
  flex: 1 1 auto;
  padding: 0.875rem 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 550;
  text-decoration: none;
}

.nav__link:hover {
  color: var(--color-accent);
}

.nav__link[aria-current="page"],
.nav__item--current > .nav__link {
  color: var(--color-accent);
}

.nav__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-ink-soft);
}

.nav__toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.nav__toggle svg {
  transition: transform 0.2s ease;
}

.nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav__sub {
  display: none;
  flex-basis: 100%;
  padding: 0 0 var(--space-s) var(--space-s);
}

.nav__item.is-open > .nav__sub {
  display: block;
}

.nav__sublink {
  display: block;
  padding: 0.625rem 0;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.nav__sublink:hover {
  color: var(--color-ink);
}

.nav__sublink[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* On phones the language link sits in the bar instead. */
.nav__item--lang {
  display: none;
}

/* Desktop: the menu is an inline bar with dropdowns. */
@media (min-width: 64em) {
  .menu-toggle,
  .lang-link--bar {
    display: none !important;
  }

  .site-nav,
  .site-nav.is-open {
    display: block;
    position: static;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .nav {
    display: flex;
    align-items: center;
  }

  .nav__item {
    position: relative;
    margin-left: var(--space-2xs);
    border: 0;
  }

  .nav__item--parent {
    flex-wrap: nowrap;
  }

  .nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-s);
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .nav__link:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
  }

  .nav__link[aria-current="page"],
  .nav__item--current > .nav__link {
    color: var(--color-accent);
  }

  .nav__item--parent > .nav__link {
    padding-right: 0.25rem;
  }

  .nav__toggle {
    width: 1.75rem;
    height: 2.25rem;
  }

  /* Dropdown. Hidden with visibility (not display) so it can fade, and so
     closing waits 0.2s: the pointer can cross the gap without it vanishing. */
  .nav__sub {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 15rem;
    margin-top: 0.5rem;
    padding: var(--space-xs);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-m);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.2s;
  }

  /* Invisible bridge over the gap between the link and the dropdown. */
  .nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
  }

  .nav__item.is-open > .nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .nav__sublink {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-s);
    font-size: 0.9375rem;
  }

  .nav__sublink:hover {
    background: var(--color-surface-alt);
  }

  .nav__item--lang {
    display: block;
    margin-left: var(--space-s);
    padding-left: var(--space-s);
    border-left: 1px solid var(--color-line);
  }
}

/* Mouse: open on hover. Touch screens skip this and use the button. */
@media (min-width: 64em) and (hover: hover) {
  .nav__item--parent:hover > .nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

/* No JavaScript: keyboard users open dropdowns by tabbing into them. */
@media (min-width: 64em) {
  .site-nav:not(.is-enhanced) .nav__item--parent:focus-within > .nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}


/* 5. Buttons & links ======================================================= */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.button--secondary {
  border-color: var(--color-line-strong);
  background: transparent;
  color: var(--color-ink);
}

.button--secondary:hover {
  border-color: var(--color-ink-soft);
  background: var(--color-bg);
  color: var(--color-ink);
}

.button[disabled],
.button.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.link-arrow {
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: " \2192";
}

.link-arrow:hover {
  text-decoration: underline;
}


/* 6. Page heads, hero, breadcrumbs ========================================= */

.hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-section);
}

.hero > .container > * + * {
  margin-top: var(--space-l);
}

.hero__title {
  max-width: 20ch;
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

:lang(el) .hero__title {
  line-height: 1.18;
  letter-spacing: -0.015em;
}

@media (min-width: 48em) {
  .hero {
    padding-top: var(--space-3xl);
  }
}

.page-head {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-line);
}

.page-head > .container > * + * {
  margin-top: var(--space-m);
}

.breadcrumb {
  padding-top: var(--space-l);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.5rem;
  color: var(--color-line-strong);
}

.breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.breadcrumb [aria-current] {
  color: var(--color-ink);
}

/* A breadcrumb sits directly above the page head. */
.breadcrumb + .page-head {
  padding-top: var(--space-m);
}

/* The page head already has a bottom rule: the first section needs less air. */
.page-head + .section {
  padding-top: var(--space-2xl);
}


/* 7. Cards & facts ========================================================= */

.card {
  position: relative;
  padding: var(--space-l);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card > * + * {
  margin-top: var(--space-xs);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-s);
}

.card--accent {
  border-color: transparent;
  background: var(--color-accent-soft);
}

.card__title {
  font-size: var(--step-1);
}

.card__link {
  color: var(--color-ink);
  text-decoration: none;
}

/* The whole card is clickable through the title link. */
.card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radius);
}

.card__link:hover {
  color: var(--color-accent);
}

.card__text {
  color: var(--color-ink-soft);
}

.card__more {
  display: inline-block;
  margin-top: var(--space-s);
  color: var(--color-accent);
  font-weight: 600;
}

/* Key numbers: the value sits above its label. */
.facts > div {
  display: flex;
  flex-direction: column-reverse;
  padding: var(--space-l) 0;
  border-top: 1px solid var(--color-line);
}

.facts > div:last-child {
  border-bottom: 1px solid var(--color-line);
}

.facts dt {
  color: var(--color-ink-soft);
}

.facts dd {
  font-size: var(--step-3);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Label / value pairs: contact details and the like. */
.details > div + div {
  margin-top: var(--space-m);
}

.details dt {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink-soft);
}

.panel {
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.panel > * + * {
  margin-top: var(--space-m);
}

.cta {
  text-align: center;
}

.cta > * + * {
  margin-top: var(--space-m);
}

.cta .lead {
  margin-left: auto;
  margin-right: auto;
}


/* 8. Prose: long text such as the privacy policy ========================== */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 2em;
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: 1.5em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.375em;
}


/* 9. Forms ================================================================= */

.form {
  max-width: 40rem;
}

.form > * + * {
  margin-top: var(--space-l);
}

.field label,
.legend {
  display: block;
  margin-bottom: 0.375rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

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

.hint {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
.input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-s);
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:hover {
  border-color: var(--color-ink-soft);
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

textarea.input {
  min-height: 9rem;
  resize: vertical;
}

select.input {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23565d6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 12px;
}

/* Error styles appear only after a send attempt, not while typing. */
.was-validated .input:invalid,
.input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.was-validated .input:invalid:focus,
.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--color-error-ring);
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices > * + * {
  margin-top: var(--space-xs);
}

.check {
  display: flex;
  align-items: flex-start;
}

.check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0.75rem 0 0;
  accent-color: var(--color-accent);
}

.check label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
}

/* Two fields side by side from tablet up. */
.field-row > * + * {
  margin-top: var(--space-l);
}

@media (min-width: 48em) {
  .field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l);
  }

  .field-row > * + * {
    margin-top: 0;
  }
}

/* Spam trap: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sent / failed messages. Shown by site.js, or, with no JavaScript, by
   :target when the Worker redirects back to #form-sent or #form-error. */
.form-status {
  display: none;
  max-width: 40rem;
  margin-bottom: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 1px solid;
  border-radius: var(--radius-s);
  font-weight: 500;
}

.form-status:target,
.form-status.is-visible {
  display: block;
}

.form-status:focus {
  outline: none;
}

.form-status--ok {
  border-color: var(--color-success-line);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-status--error {
  border-color: var(--color-error-line);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.form-note {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}


/* 10. Footer =============================================================== */

.site-footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

@supports (padding: max(0px)) {
  .site-footer {
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  }
}

.footer-grid > * + * {
  margin-top: var(--space-xl);
}

@media (min-width: 48em) {
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .footer-grid > * + * {
    margin-top: 0;
  }
}

.footer-grid .brand {
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.footer-grid p {
  max-width: 24rem;
}

.footer-title {
  margin-bottom: var(--space-s);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-list li + li {
  margin-top: var(--space-xs);
}

.footer-list a,
.footer-bottom a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.footer-list a:hover,
.footer-bottom a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-line);
  font-size: var(--step--1);
}

.footer-bottom > * {
  margin: 0 var(--space-l) var(--space-xs) 0;
}

.footer-bottom > :last-child {
  margin-right: 0;
}


/* 11. Utilities ============================================================ */

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

.center {
  text-align: center;
}


/* 12. Motion =============================================================== */

/* Cross-fade between pages (Chrome, Edge, Safari 18.2+). Other browsers
   load the next page normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* 13. Print ================================================================ */

@media print {
  .site-header,
  .skip-link,
  .site-footer nav,
  .form,
  .actions {
    display: none !important;
  }

  body {
    font-size: 11pt;
  }

  .section,
  .page-head {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}


/* 14. Clinic ==============================================================
   Parts this site adds to the template: header phone/social links, menu
   subtitles, the home slideshow, quote and counters, the category cards,
   images inside the treatment text, the contact page and map, and the
   footer's page lists. */

/* Header phone and social links. Phones: one round "call" button next to
   Menu. 64em-80em: hidden, the menu needs the room. 80em+: everything,
   to the right of the menu, as on the old site. */
.header-contact {
  display: flex;
  align-items: center;
}

.header-contact__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.header-contact__link:hover {
  background: var(--color-surface-alt);
  color: var(--color-accent);
}

.header-contact__link svg {
  color: var(--color-brand);
}

.header-contact__link--social,
.header-contact__link--extra {
  display: none;
}

/* The number is read out on phones but shown only on wide screens. */
.header-contact__num {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 64em) {
  .header-contact {
    display: none;
  }
}

@media (min-width: 80em) {
  .header-contact {
    display: flex;
    order: 2;
    margin-left: var(--space-s);
    padding-left: var(--space-s);
    border-left: 1px solid var(--color-line);
  }

  .header-contact__link--social,
  .header-contact__link--extra {
    display: inline-flex;
  }

  .header-contact__num {
    position: static;
    width: auto;
    height: auto;
    margin-left: 0.375rem;
    overflow: visible;
    clip: auto;
  }
}

/* Menu button: the icon alone, as on the old site; the word "Μενού" is
   there for screen readers only. */
.menu-toggle {
  justify-content: center;
  width: 2.75rem;
  padding: 0;
}

.menu-toggle__icon {
  margin-right: 0;
}

/* Menu: subtitle under a submenu link, as on the old site. */
.nav__subnote {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-ink-soft);
}

.nav__sublink[aria-current="page"] .nav__subnote {
  color: inherit;
}

/* Desktop dropdowns: one column. On short screens the ten-item list
   scrolls inside the dropdown, since the header stays put. (Only there:
   the scroll box would clip the hover bridge above the dropdown.) */
@media (min-width: 64em) {
  .nav__sub {
    width: 22rem;
  }
}

@media (min-width: 64em) and (max-height: 50em) {
  .nav__sub {
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
  }
}

/* Slideshow (home), full width of the window. Without JavaScript: a strip
   of slides you swipe or scroll sideways, snapping to each one. With
   site.js (.is-enhanced): the viewport clips, the track moves one slide at
   a time with a transform, plays on its own and loops; arrows on the
   sides, swipe on touch screens, pause button below. */
.carousel {
  padding-top: var(--space-l);
}

.carousel__viewport {
  position: relative;
}

.carousel__track {
  display: flex;
  margin: 0;
  padding: 0 var(--gutter) var(--space-s);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  list-style: none;
}

.carousel.is-enhanced .carousel__viewport {
  overflow: hidden;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  touch-action: pan-y; /* sideways swipes are the slideshow's, not the page's */
}

/* Keep the 0.6s in step with DURATION in js/site.js. */
.carousel.is-enhanced .carousel__track {
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
  transition: transform 0.6s ease;
}

/* The loop's jump back to the start, and following a finger: no animation. */
.carousel.is-enhanced .carousel__track.is-jumping {
  transition: none;
}

/* The owner wants the slideshow to play for everyone, so it keeps sliding
   with the reduced-motion setting too (Windows turns it on when its
   animations are off). The pause button stops it. */
@media (prefers-reduced-motion: reduce) {
  .carousel.is-enhanced .carousel__track:not(.is-jumping) {
    transition-duration: 0.6s !important;
  }
}

/* Phones show one slide and a bit of the next; then 2, 3 and 4 at once. */
.carousel__slide {
  flex: 0 0 78%;
  margin-right: var(--space-m);
  scroll-snap-align: start;
}

.carousel__slide:last-child {
  margin-right: 0;
}

@media (min-width: 30em) {
  .carousel__slide { flex-basis: 46%; }
}

@media (min-width: 48em) {
  .carousel__slide { flex-basis: 31%; }
}

@media (min-width: 64em) {
  .carousel__slide { flex-basis: 23.5%; }
}

.carousel__link {
  position: relative;
  display: block;
  height: 26rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  text-decoration: none;
}

/* Tablet up: 60% of the window height, as on the old site, within limits. */
@media (min-width: 48em) {
  .carousel__link {
    height: 60vh;
    min-height: 24rem;
    max-height: 34rem;
  }
}

.carousel__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease, transform 0.4s ease;
}

.carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2xl) var(--space-m) var(--space-l);
  background: linear-gradient(to top, var(--color-veil) 60%, var(--color-veil-clear));
  text-align: center;
}

.carousel__title {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}

.carousel__text {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.carousel__controls {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-s);
}

.carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: var(--space-xs);
  padding: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
}

.carousel__button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Previous / next: on the photos, at the left and right edges. */
.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -1.375rem;
  margin-left: 0;
  border-color: transparent;
  box-shadow: var(--shadow-m);
}

.carousel__nav--prev {
  left: var(--space-s);
}

.carousel__nav--next {
  right: var(--space-s);
}

/* The pause button shows "pause" while playing, "play" while paused. */
.carousel__play-icon,
[data-playing="true"] .carousel__pause-icon {
  display: block;
}

.carousel__pause-icon,
[data-playing="true"] .carousel__play-icon {
  display: none;
}

/* Photos in black and white until pointed at, like the old site. Touch
   screens have no hover, so they keep the colour. */
@media (hover: hover) {
  .carousel__link img,
  .card__img {
    filter: grayscale(100%);
  }

  .carousel__link:hover img,
  .carousel__link:focus img,
  .card--media:hover .card__img,
  .card--media:focus-within .card__img {
    filter: none;
  }

  .carousel__link:hover img {
    transform: scale(1.03);
  }
}

/* Home: quote and counters. */
.quote {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.quote > * + * {
  margin-top: var(--space-m);
}

.quote svg {
  margin-left: auto;
  margin-right: auto;
  color: var(--color-brand);
}

.quote blockquote p {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.quote figcaption {
  color: var(--color-ink-soft);
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 30em) {
  .stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.stats > div {
  display: flex;
  flex-direction: column-reverse;
}

.stats dt {
  color: var(--color-ink-soft);
}

.stats dd {
  color: var(--color-accent);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Treatment cards with a photo (the two category pages). */
.card--media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.card--media > * + * {
  margin-top: 0;
}

.card__img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.card__body {
  padding: var(--space-l);
}

.card__body > * + * {
  margin-top: var(--space-xs);
}

/* Photos inside the treatment text. --right floats beside the text from
   tablet up; on phones it sits centred, at a sensible size. */
.prose::after {
  content: "";
  display: table;
  clear: both;
}

.prose .figure {
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}

.prose > .figure:first-child {
  margin-top: 0;
}

.figure img {
  border-radius: var(--radius-s);
}

.figure--right {
  max-width: 12rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48em) {
  .prose .figure--right {
    float: right;
    width: 40%;
    max-width: 20rem;
    margin: 0.375em 0 var(--space-m) var(--space-l);
  }
}

/* Contact page: the old page's lines (tel, social, address). */
.contact-lines {
  font-size: var(--step-1);
  line-height: 1.9;
}

/* Google map on the contact page. */
.map {
  position: relative;
  height: 22rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 48em) {
  .map { height: 28rem; }
}

/* Footer, as on the old site: ΕΠΙΚΟΙΝΩΝΙΑ, then the ΑΔΥΝΑΤΙΣΜΑ and
   ΟΜΟΡΦΙΑ page lists. */
.footer-grid .brand__logo {
  height: 4.5rem;
}

.footer-title a {
  color: inherit;
  text-decoration: none;
}

.footer-title a:hover {
  text-decoration: underline;
}

.footer-nav > * + * {
  margin-top: var(--space-xl);
}

@media (min-width: 48em) {
  .footer-grid--clinic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-xl);
  }

  .footer-nav > * + * {
    margin-top: 0;
  }
}