@charset "UTF-8";
/* ==========================================================================
   Ensō Foot Clinic — design system
   Type   M PLUS Rounded 1c throughout — the face on the clinic's business card
          (static weights 300/400/500/700, so every weight below is one of those)
   Colour Drawn from the clinic's ensō mark: sea blue #1673bd, deep #0c3f7c
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --ink:        #0b1f3a;
  --ink-2:      #3a5578;
  --ink-3:      #6a83a3;
  --deep:       #0c3f7c;
  --abyss:      #071f42;
  --teal:       #1673bd;
  --teal-hi:    #45b3e8;
  --teal-300:   #a3d9f4;
  --mist:       #e2f1fb;
  --mist-2:     #f0f8fe;
  --paper:      #fbfdff;
  --white:      #ffffff;
  --sand:       #c2865a;
  --line:       #d2e4f2;
  --line-soft:  #e6f0f9;

  --shadow-sm: 0 1px 2px rgba(11,31,58,.05), 0 2px 8px rgba(11,31,58,.04);
  --shadow-md: 0 2px 6px rgba(11,31,58,.06), 0 12px 32px rgba(11,31,58,.07);
  --shadow-lg: 0 4px 12px rgba(11,31,58,.07), 0 28px 64px rgba(11,31,58,.11);

  --display: "M PLUS Rounded 1c", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: "M PLUS Rounded 1c", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The same skeleton with square terminals — for the name only (entry screen,
     «Ποιοι είμαστε»), which she found too round at display sizes (Oct 2026). */
  --name: "M PLUS 1p", "M PLUS Rounded 1c", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --gap: clamp(1rem, 2.4vw, 1.75rem);
  --pad-x: clamp(1.15rem, 5vw, 3rem);
  --sec-y: clamp(4rem, 9vw, 8rem);
  --wrap: 1240px;
  --measure: 68ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.72;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--teal-300); color: var(--abyss); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--deep); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r) var(--r); font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Typography ───────────────────────────────────────────────────────── */
.display, h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--abyss);
}
h1 { font-size: clamp(2.35rem, 1.4rem + 4vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3rem); }
h3 {
  font-family: var(--text); font-weight: 700; letter-spacing: -.012em;
  font-size: clamp(1.12rem, 1.02rem + .42vw, 1.4rem); line-height: 1.32; color: var(--deep);
}
h4 { font-family: var(--text); font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--deep); }

.eyebrow {
  font-size: .705rem; font-weight: 700; letter-spacing: .175em;
  text-transform: uppercase; color: var(--teal);
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--teal-300); flex: none;
}
.eyebrow--plain::before { display: none; }

.lede {
  font-size: clamp(1.06rem, 1rem + .42vw, 1.3rem);
  line-height: 1.62; color: var(--ink-2); font-weight: 300;
  max-width: 56ch;
}
.muted { color: var(--ink-2); }
.small { font-size: .86rem; line-height: 1.6; }
.tiny  { font-size: .765rem; line-height: 1.55; letter-spacing: .01em; }

/* The patient-voice device: a plain-language statement, set as if spoken.
   Used wherever the site names a symptom the way a person would say it. */
.voice {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 500; line-height: 1.4; color: var(--deep);
  padding-left: 1.15rem; border-left: 2px solid var(--teal-hi);
  quotes: "«" "»";
}
.voice::before { content: open-quote; color: var(--teal-hi); }
.voice::after  { content: close-quote; color: var(--teal-hi); }

/* ── Slogan ───────────────────────────────────────────────────────────── */
/* The clinic's own line. Set in the text face, not the display serif: it is a
   statement of practice rather than a headline, and it should read like one —
   steady, professional, closer to a signature than to a flourish. */
.slogan {
  font-family: var(--text);
  font-weight: 700;
  font-size: clamp(1.42rem, 1rem + 1.85vw, 2.5rem);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--abyss);
  max-width: 27ch;
  text-wrap: balance;
}
.slogan .qm { color: var(--teal-hi); font-weight: 500; }
.slogan__by {
  display: flex; align-items: center; gap: .75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--teal);
}
.slogan__by::before {
  content: ""; width: 2.1rem; height: 2px; flex: none;
  background: var(--teal-hi); border-radius: 2px;
}
.hero h1.slogan { max-width: 27ch; }

/* On the deep ground the slogan carries the band from the clinic's own artwork. */
.section--deep .slogan { color: #fff; }
.section--deep .slogan .qm { color: var(--teal-300); }
.section--deep .slogan__by { color: var(--teal-300); }
.section--deep .slogan__by::before { background: var(--teal-300); }

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--mist { background: var(--mist-2); }
.section--deep { background: var(--abyss); color: #e4f0fa; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .lede, .section--deep .muted { color: #a9c8e6; }
.section--deep .eyebrow { color: var(--teal-300); }
.section--deep .eyebrow::before { background: rgba(163,217,244,.45); }

.sec-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 62ch; }
.sec-head--split {
  max-width: none; grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; }
}

.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--deep); --btn-fg: #fff; --btn-bd: var(--deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .82rem 1.55rem; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-weight: 500; font-size: .935rem; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--deep); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--teal); --btn-fg: var(--teal); }
.btn--teal { --btn-bg: var(--teal); --btn-bd: var(--teal); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--abyss); --btn-bd: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--outline-light:hover { --btn-bd: #fff; }
.btn--sm { padding: .58rem 1.1rem; font-size: .855rem; }
.btn--block { width: 100%; }

.link-more {
  display: inline-flex; align-items: center; gap: .48rem;
  font-weight: 500; font-size: .9rem; color: var(--teal);
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-more:hover { border-bottom-color: currentColor; gap: .8rem; }
.link-more::after { content: "→"; font-size: 1.05em; line-height: 1; }

/* ── Header ───────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(251,253,253,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line-soft); background: rgba(251,253,253,.95); }
.header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { width: 148px; }
.brand__sub {
  display: none; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding-left: .75rem; border-left: 1px solid var(--line);
}


.nav { display: none; margin-inline-start: auto; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: .15rem; } }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .55rem .78rem; border-radius: 100px;
  font-size: .915rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover, .nav__item[aria-expanded="true"] .nav__link { background: var(--mist); color: var(--deep); }
.nav__link[aria-current="page"] { color: var(--teal); font-weight: 700; }
.nav__chev { transition: transform .24s var(--ease); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + .5rem); left: 50%; translate: -50% 0;
  width: min(680px, 88vw);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.35rem;
  display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity .22s var(--ease), translate .22s var(--ease), visibility .22s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega__col { display: grid; gap: .12rem; align-content: start; }
.mega__title {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 0 .7rem .55rem;
}
.mega__link {
  display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; transition: background-color .18s var(--ease);
}
.mega__link:hover { background: var(--mist-2); }
.mega__link b { font-weight: 500; font-size: .93rem; color: var(--deep); }
.mega__link span { font-size: .8rem; color: var(--ink-3); line-height: 1.45; }

.header__tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
@media (min-width: 1024px) { .header__tools { margin-inline-start: 0; } }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { background: var(--mist); color: var(--deep); }
.lang {
  display: none; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; color: var(--ink-2); padding: .45rem .7rem; border-radius: 100px;
  border: 1px solid var(--line);
}
@media (min-width: 560px) { .lang { display: inline-block; } }
.lang:hover { border-color: var(--teal); color: var(--teal); }
.header .btn { display: none; }
@media (min-width: 780px) { .header .btn { display: inline-flex; } }

.burger { display: grid; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger span {
  display: block; width: 19px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 190;
  background: var(--paper); overflow-y: auto; padding: 1.5rem var(--pad-x) 6rem;
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity .26s var(--ease), translate .26s var(--ease), visibility .26s;
}
body.nav-open .drawer { opacity: 1; visibility: visible; translate: 0 0; }
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) { .drawer { display: none; } }
.drawer__group { border-bottom: 1px solid var(--line-soft); }
.drawer__top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; font-size: 1.05rem; font-weight: 500; color: var(--deep); text-decoration: none;
}
.drawer__panel { display: none; padding-bottom: .9rem; }
.drawer__group.is-open .drawer__panel { display: grid; gap: .1rem; }
.drawer__group.is-open .drawer__top .nav__chev { transform: rotate(180deg); }
.drawer__panel a {
  padding: .6rem .9rem; border-radius: var(--r-sm); text-decoration: none;
  font-size: .95rem; color: var(--ink-2); background: var(--mist-2);
}
.drawer__cta { display: grid; gap: .7rem; margin-top: 1.75rem; }

/* ── Search overlay ───────────────────────────────────────────────────── */
.search {
  position: fixed; inset: 0; z-index: 300; display: grid; align-items: start;
  justify-items: center; padding: clamp(3rem, 12vh, 8rem) 1rem 2rem;
  background: rgba(7,31,66,.42); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s;
}
.search.is-open { opacity: 1; visibility: visible; }
.search__panel {
  width: min(640px, 100%); background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; translate: 0 -10px;
  transition: translate .26s var(--ease-out);
}
.search.is-open .search__panel { translate: 0 0; }
.search__field { display: flex; align-items: center; gap: .8rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.search__field input { flex: 1; border: 0; background: none; font-size: 1.05rem; }
.search__field input::placeholder { color: var(--ink-3); }
.search__kbd {
  font-size: .68rem; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: .18rem .4rem;
}
.search__results { max-height: min(56vh, 460px); overflow-y: auto; padding: .5rem; }
.search__hit {
  display: grid; gap: .12rem; padding: .65rem .8rem; border-radius: var(--r-sm);
  text-decoration: none;
}
.search__hit:hover, .search__hit.is-active { background: var(--mist-2); }
.search__hit b { font-weight: 500; font-size: .95rem; color: var(--deep); }
.search__hit span { font-size: .8rem; color: var(--ink-3); }
.search__hit em { font-style: normal; background: rgba(163,217,244,.42); border-radius: 2px; }
.search__empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3); font-size: .9rem; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
.hero__copy { display: grid; gap: 1.5rem; justify-items: start; position: relative; z-index: 2; }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--teal); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__note { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .82rem; }
.hero__note svg { flex: none; color: var(--teal); }

.hero__figure { position: relative; }
.hero__figure img {
  width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
/* The institute's mark, enlarged into a quiet ground shape. */
.hero__mark {
  position: absolute; z-index: 0; inset: auto -14% -12% auto;
  width: 62%; color: var(--mist); pointer-events: none;
}
.hero__badge {
  position: absolute; z-index: 2; left: -1.5rem; bottom: 2rem;
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow-md);
  padding: .85rem 1.1rem; display: grid; gap: .1rem; max-width: 200px;
}
@media (max-width: 520px) { .hero__badge { left: .75rem; bottom: .75rem; } }
.hero__badge b { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--deep); }
.hero__badge span { font-size: .74rem; color: var(--ink-3); line-height: 1.4; }

/* Credentials strip */
.creds { border-block: 1px solid var(--line-soft); }
.creds__list {
  display: grid; gap: 0; list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .creds__list { grid-template-columns: repeat(4, 1fr); } }
.creds__list li {
  padding: 1.5rem clamp(.9rem, 2vw, 1.6rem); display: grid; gap: .28rem;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 860px) { .creds__list li { border-bottom: 0; } }
.creds__list li:last-child { border-right: 0; }
@media (max-width: 859px) { .creds__list li:nth-child(2n) { border-right: 0; } }
.creds__list b { font-family: var(--display); font-size: 1.55rem; line-height: 1.05; color: var(--deep); }
.creds__list span { font-size: .8rem; color: var(--ink-2); line-height: 1.45; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
  display: grid; gap: .8rem; align-content: start;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.9rem); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative; overflow: hidden;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.card__kicker {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--teal);
}
.card p { color: var(--ink-2); font-size: .94rem; }
.card__foot { margin-top: .35rem; }

.card--stat { background: var(--mist-2); border-color: transparent; }
.card--stat b { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; color: var(--deep); display: block; }

/* Condition cards carry the plain-language line, so a person recognises
   themselves before they meet the medical term. */
.cond-card__voice {
  font-family: var(--display); font-weight: 500; font-size: 1.06rem;
  color: var(--ink-2); line-height: 1.45;
  padding-top: .8rem; border-top: 1px solid var(--line-soft);
}

/* ── Symptom guide ────────────────────────────────────────────────────── */
.guide {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.guide__head {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.guide__steps { display: flex; align-items: center; gap: .45rem; }
.guide__dot {
  width: 26px; height: 4px; border-radius: 2px; background: var(--mist);
  transition: background-color .3s var(--ease);
}
.guide__dot.is-done { background: var(--teal-300); }
.guide__dot.is-now  { background: var(--teal); }
.guide__body { padding: clamp(1.4rem, 3.4vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem); }
.guide__q { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.guide__opts { display: grid; gap: .55rem; }
@media (min-width: 720px) { .guide__opts--2col { grid-template-columns: 1fr 1fr; } }

.opt {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; text-align: left; font-size: .955rem; line-height: 1.5;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .16s var(--ease);
}
.opt:hover { border-color: var(--teal-300); background: var(--mist-2); }
.opt:active { transform: scale(.995); }
.opt__box {
  flex: none; width: 21px; height: 21px; border-radius: 6px; margin-top: .16rem;
  border: 1.6px solid var(--line); display: grid; place-items: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt--radio .opt__box { border-radius: 50%; }
.opt__box svg { opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease), transform .18s var(--ease); color: #fff; }
.opt[aria-pressed="true"] { border-color: var(--teal); background: rgba(43,127,150,.055); }
.opt[aria-pressed="true"] .opt__box { background: var(--teal); border-color: var(--teal); }
.opt[aria-pressed="true"] .opt__box svg { opacity: 1; transform: scale(1); }

.guide__foot {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line-soft);
}
.guide__privacy { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--ink-3); }

.result { display: grid; gap: 1.5rem; }
.result__match {
  display: grid; gap: .8rem; padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--mist-2);
}
.result__rank {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.meter { height: 5px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--teal); border-radius: 3px; transition: width .7s var(--ease-out); }
.result__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .8rem; border-radius: 100px; border: 1px solid var(--line);
  background: #fff; font-size: .82rem; font-weight: 500; color: var(--deep); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.note {
  display: grid; gap: .4rem; padding: 1rem 1.15rem; border-radius: var(--r);
  background: rgba(194,134,90,.08); border: 1px solid rgba(194,134,90,.22);
  font-size: .875rem; line-height: 1.6; color: var(--ink-2);
}
.note b { color: var(--sand); }

/* ── Foot diagram ─────────────────────────────────────────────────────── */
.anatomy { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 940px) { .anatomy { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.anatomy__stage {
  position: relative; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}
.anatomy__svg { width: 100%; height: auto; touch-action: manipulation; }
.hot { cursor: pointer; transition: opacity .22s var(--ease); }
.hot__hit { fill: transparent; }
.hot__shape { fill: #fff; stroke: var(--teal); stroke-width: 2; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.hot__num { font-family: var(--text); font-size: 12.5px; font-weight: 700; fill: var(--teal); text-anchor: middle; pointer-events: none; transition: fill .3s var(--ease); }
.hot__ring { stroke: var(--teal-hi); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hot__label { font-family: var(--text); font-size: 14px; font-weight: 700; fill: var(--deep); pointer-events: none; }
.hot__sub { font-family: var(--text); font-size: 11.5px; fill: var(--ink-3); pointer-events: none; }
.hot__lead { stroke: var(--line); stroke-width: 1.5; pointer-events: none; transition: stroke .3s var(--ease); }
.hot.is-active .hot__shape, .hot:hover .hot__shape { fill: var(--teal); }
.hot.is-active .hot__num, .hot:hover .hot__num { fill: #fff; }
.hot.is-active .hot__label, .hot:hover .hot__label { fill: var(--teal); }
.hot.is-active .hot__lead { stroke: var(--teal-hi); }
.hot.is-active .hot__ring { opacity: 1; animation: hot-pulse 2.2s var(--ease) infinite; }
@keyframes hot-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
/* On a phone the print fills the card and the labels move to a legend below it,
   which is also tappable — the same four hotspots, in HTML. */
.anatomy__legend { display: none; }
@media (max-width: 600px) {
  .anatomy__stage { overflow: hidden; }
  .anatomy__svg { width: 168%; max-width: none; margin-left: 2%; }
  .anatomy__svg .hot__label, .anatomy__svg .hot__sub, .anatomy__svg .hot__lead { display: none; }
  .anatomy__legend {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem;
    list-style: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  }
  .anatomy__legend li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--ink-2); line-height: 1.3; }
  .anatomy__legend b {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--teal); color: var(--teal); font-size: .74rem; font-weight: 700;
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }
  .anatomy__legend li.is-active b { background: var(--teal); color: #fff; }
  .anatomy__legend li.is-active span { color: var(--teal); font-weight: 700; }
}
.anatomy__toggle {
  position: absolute; top: clamp(1rem, 2.5vw, 1.75rem); right: clamp(1rem, 2.5vw, 1.75rem);
  display: inline-flex; background: var(--mist-2); border-radius: 100px; padding: 3px; gap: 2px;
}
.anatomy__toggle button {
  padding: .38rem .85rem; border-radius: 100px; font-size: .78rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .24s var(--ease), color .24s var(--ease);
}
.anatomy__toggle button[aria-pressed="true"] { background: #fff; color: var(--deep); box-shadow: var(--shadow-sm); }
.anatomy__panel { display: grid; gap: 1rem; align-content: start; min-height: 220px; }
.anatomy__panel .voice { margin-block: .25rem; }
.anatomy__hint { font-size: .8rem; color: var(--ink-3); display: flex; align-items: center; gap: .45rem; }

/* ── Comparison table ─────────────────────────────────────────────────── */
.compare__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.filter {
  padding: .45rem 1rem; border-radius: 100px; border: 1px solid var(--line);
  font-size: .85rem; font-weight: 500; color: var(--ink-2); background: #fff;
  transition: all .2s var(--ease);
}
.filter:hover { border-color: var(--teal-300); }
.filter[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.compare__scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: #fff; }
.compare table { min-width: 780px; font-size: .9rem; }
.compare th, .compare td { padding: 1rem 1.15rem; text-align: left; vertical-align: top; }
.compare thead th {
  position: sticky; top: 0; background: var(--mist-2); z-index: 1;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
}
.compare tbody tr { border-bottom: 1px solid var(--line-soft); transition: background-color .2s var(--ease); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare tbody tr:hover { background: var(--mist-2); }
.compare tbody tr[hidden] { display: none; }
.compare td:first-child { min-width: 220px; }
.compare td a { color: var(--deep); font-weight: 500; text-decoration: none; }
.compare td a:hover { color: var(--teal); }
.tag {
  display: inline-block; padding: .18rem .55rem; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
}
.tag--prevention { background: rgba(43,127,150,.1); color: var(--teal); }
.tag--care { background: rgba(194,134,90,.13); color: var(--sand); }
.tag--device { background: rgba(20,66,79,.1); color: var(--deep); }
.tag--open { background: rgba(43,127,150,.12); color: var(--teal); }
.tag--announced { background: rgba(194,134,90,.14); color: var(--sand); }
.tag--past { background: rgba(111,141,150,.13); color: var(--ink-3); }

/* ── Seminars ─────────────────────────────────────────────────────────── */
.sem-card {
  display: grid; gap: .85rem; align-content: start;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sem-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); }
.sem-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sem-card h3 { font-size: 1.25rem; }
.sem-card h3 a { text-decoration: none; }
.sem-card h3 a:hover { color: var(--teal); }
.sem-card__facts { display: grid; gap: .45rem; list-style: none; margin-top: .2rem; }
.sem-card__facts li { display: flex; gap: .6rem; font-size: .84rem; line-height: 1.45; }
.sem-card__facts b { font-weight: 500; color: var(--deep); min-width: 8.5rem; flex: none; }
.sem-card__facts span { color: var(--ink-2); }
.sem-empty {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px dashed var(--teal-300); border-radius: var(--r-lg); background: var(--mist-2);
}
/* The stats strip puts the number in <b>; a facts strip inverts that — the
   label is the quiet half and the value carries the weight. */
.creds__list--facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.creds__list--facts li { gap: .35rem; }
.creds__list--facts b {
  font-family: var(--text); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--teal); line-height: 1.4;
}
.creds__list--facts span { font-size: .95rem; color: var(--ink); line-height: 1.5; }

/* ── Foot-care tracker ────────────────────────────────────────────────── */
.tracker { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .tracker { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.tracker__stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  max-width: 340px; margin-inline: auto; width: 100%;
}
.tracker__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.tracker__ring circle { fill: none; stroke-linecap: round; }
.tracker__track { stroke: var(--mist); stroke-width: 6; }
.tracker__prog  { stroke: var(--teal); stroke-width: 6; transition: stroke-dashoffset .25s linear, stroke .4s var(--ease); }
.tracker__orb {
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--teal-hi), var(--deep) 78%);
  display: grid; place-items: center; color: #fff;
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
  box-shadow: 0 12px 40px rgba(20,66,79,.22);
}
.tracker__orb.is-hold { transform: scale(.74); box-shadow: 0 6px 22px rgba(20,66,79,.3); }
.tracker__orb.is-rest { transform: scale(1); }
.tracker__phase { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.tracker__count { font-size: 2.4rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.tracker__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.tracker__meta div { display: grid; gap: .1rem; }
.tracker__meta b { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--deep); }
.tracker__progs { display: grid; gap: .5rem; }
.prog-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  text-align: left; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.prog-btn:hover { border-color: var(--teal-300); }
.prog-btn[aria-pressed="true"] { border-color: var(--teal); background: rgba(43,127,150,.05); }
.prog-btn b { font-weight: 500; color: var(--deep); font-size: .95rem; }
.prog-btn span { font-size: .8rem; color: var(--ink-3); }
.prog-btn i { font-style: normal; font-size: .78rem; color: var(--teal); font-weight: 700; white-space: nowrap; }

/* ── Article layout ───────────────────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; z-index: 210;
  transform-origin: 0 50%; transform: scaleX(0); background: var(--teal);
}
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--ink-3); list-style: none; margin-bottom: 1.1rem; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--teal); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }

.doc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .doc { grid-template-columns: minmax(0, 1fr) 260px; } }
.doc__aside { display: none; }
@media (min-width: 1000px) {
  .doc__aside { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 1.5rem); align-content: start; }
}
.toc { display: grid; gap: .1rem; border-left: 1px solid var(--line-soft); }
.toc a {
  padding: .38rem 0 .38rem .95rem; margin-left: -1px; border-left: 2px solid transparent;
  font-size: .855rem; line-height: 1.45; color: var(--ink-3); text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.toc a:hover { color: var(--deep); }
.toc a.is-active { color: var(--teal); border-left-color: var(--teal); font-weight: 500; }
.toc a[data-depth="3"] { padding-left: 1.7rem; font-size: .81rem; }

/* Prose — the clinic's own copy, restyled */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); margin-top: 2.4em; margin-bottom: .1em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h3 {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); margin-top: 2em; margin-bottom: -.15em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h4 { margin-top: 1.7em; }
.prose p { color: var(--ink-2); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: .45rem; color: var(--ink-2); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li::before {
  content: ""; position: absolute; left: .28rem; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal-300);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--teal); font-weight: 700; }
.prose blockquote {
  border-left: 2px solid var(--teal-hi); padding-left: 1.25rem;
  font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--deep);
}
.prose table { font-size: .9rem; margin-block: 1.5em; }
.prose th, .prose td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
.prose th { font-weight: 700; color: var(--deep); background: var(--mist-2); }
.prose figure img { border-radius: var(--r); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: .6rem; }
.faq__item { border: 1px solid var(--line-soft); border-radius: var(--r); background: #fff; overflow: hidden; }
.faq__item.is-open { border-color: var(--teal-300); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; text-align: left; font-weight: 500; color: var(--deep); font-size: .985rem; line-height: 1.45;
}
.faq__sign { flex: none; width: 20px; height: 20px; position: relative; margin-top: .18rem; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.6px; background: var(--teal);
  border-radius: 2px; transition: transform .28s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.3rem 1.25rem; color: var(--ink-2); font-size: .94rem; }

/* ── Gallery ──────────────────────────────────────────────────────────── */
.gal { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Illustration tiles: the drawing on top, its own caption underneath, so the
   grid stays scannable without opening the lightbox. */
.gal { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.gal__item {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist-2);
  border: 1px solid var(--line-soft); display: grid; grid-template-rows: auto auto;
  text-align: left; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gal__item > :first-child { aspect-ratio: 8/5; }
.gal__cap {
  display: block; padding: .85rem 1rem 1rem; font-size: .85rem; line-height: 1.5;
  color: var(--ink-2); border-top: 1px solid var(--line-soft); background: var(--white);
}
.gal__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.gal__item[hidden] { display: none; }
.gal__play { /* retained for tiles that carry a badge overlay */
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(7,31,66,.05), rgba(7,31,66,.5)); color: #fff;
}
.gal__play svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }

.lightbox {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: rgba(7,31,66,.92); padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), visibility .24s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { width: min(1100px, 100%); }
.lightbox__stage img { width: 100%; border-radius: var(--r); }
.lightbox__stage .ratio { position: relative; padding-top: 56.25%; border-radius: var(--r); overflow: hidden; }
.lightbox__stage .ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff; margin-bottom: .9rem; }
.lightbox__nav { display: flex; gap: .5rem; }
.lightbox__nav button, .lightbox__close {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; transition: background-color .2s var(--ease);
}
.lightbox__nav button:hover, .lightbox__close:hover { background: rgba(255,255,255,.22); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--abyss); color: #b9d3ea; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer a { color: #b9d3ea; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer__brand img { width: 168px; filter: brightness(0) invert(1); opacity: .93; }
.footer h4 { color: #fff; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 700; }
.footer ul { list-style: none; display: grid; gap: .55rem; font-size: .9rem; }
.footer__place { display: grid; gap: .15rem; }
.footer__place b { color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.footer__place + .footer__place { margin-top: .5rem; }
.footer__hours { display: grid; gap: .5rem; font-size: .875rem; }
.footer__hours div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .5rem; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8rem; color: #7f9fc0;
}
.footer__legal { display: inline-block; margin-top: .35rem; color: #6d8bab; letter-spacing: .01em; }
.socials { display: flex; gap: .5rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }

/* ── Mobile action bar ────────────────────────────────────────────────── */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(251,253,253,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%); transition: transform .32s var(--ease);
}
.actionbar.is-shown { transform: translateY(0); }
@media (min-width: 780px) { .actionbar { display: none; } }
@media (max-width: 779px) { body { padding-bottom: 72px; } }

.totop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(5.5rem, 8vw, 2rem); z-index: 140;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--deep);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 780px) { .totop { bottom: 2rem; } }

/* ── Cookie notice ────────────────────────────────────────────────────── */
.cookies {
  position: fixed; left: clamp(1rem, 3vw, 1.5rem); bottom: clamp(1rem, 3vw, 1.5rem); z-index: 160;
  width: min(400px, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 1.35rem;
  display: grid; gap: 1rem;
  /* The hidden offset has to clear the bottom gap as well, otherwise a strip
     of the notice stays on screen -- the gap is larger on phones. */
  transform: translateY(calc(100% + 3rem));
  opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out), visibility .4s;
}
.cookies.is-shown { transform: translateY(0); opacity: 1; visibility: visible; }
@media (max-width: 779px) {
  .cookies { bottom: 5.5rem; transform: translateY(calc(100% + 7rem)); }
  .cookies.is-shown { transform: translateY(0); }
}
.cookies__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 100px; background: var(--line); transition: background-color .2s var(--ease); }
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .22s var(--ease); box-shadow: var(--shadow-sm);
}
.switch input:checked + i { background: var(--teal); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:disabled + i { opacity: .5; }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-left  { }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr .85fr; } }
.frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.frame img { width: 100%; }
.stack { display: grid; gap: 1.15rem; align-content: start; justify-items: start; }
.pill-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.map { width: 100%; height: clamp(300px, 45vh, 460px); border: 0; border-radius: var(--r-lg); }
/* One card per centre: the map, then the address and the way-finding links. */
.mapcard { margin: 0; display: grid; gap: .8rem; }
.mapcard .map { height: clamp(240px, 32vh, 320px); }
.mapcard figcaption { display: grid; gap: .6rem; }
.mapcard figcaption > div:first-child { display: grid; gap: .1rem; }
.mapcard figcaption b { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.mapcard figcaption span { font-size: .95rem; color: var(--ink); }
.mapcard + .mapcard { padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.contact-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.info-list { display: grid; gap: 1.35rem; list-style: none; }
.info-list li { display: grid; grid-template-columns: 38px 1fr; gap: .9rem; align-items: start; }
.info-list svg { color: var(--teal); margin-top: .15rem; }
.info-list b { display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: .18rem; }
.info-list a { color: var(--deep); text-decoration: none; font-weight: 500; }
.info-list a:hover { color: var(--teal); }

.article-list { display: grid; gap: .1rem; }
.article-row {
  display: grid; gap: .5rem 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; align-items: start;
  transition: padding-left .3s var(--ease);
}
@media (min-width: 760px) { .article-row { grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; } }
.article-row:hover { padding-left: .6rem; }
.article-row:hover h3 { color: var(--teal); }
.article-row[hidden] { display: none; }
.article-row time { font-size: .8rem; color: var(--ink-3); letter-spacing: .04em; }
.article-row h3 { transition: color .2s var(--ease); }
.article-row p { font-size: .89rem; color: var(--ink-3); margin-top: .3rem; }

.searchbar {
  display: flex; align-items: center; gap: .7rem; padding: .75rem 1.1rem;
  border: 1px solid var(--line); border-radius: 100px; background: #fff; max-width: 380px; width: 100%;
}
.searchbar input { flex: 1; border: 0; background: none; font-size: .94rem; }
.searchbar svg { color: var(--ink-3); flex: none; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-3); }

.pdf-card {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem;
  border: 1px solid var(--line-soft); border-radius: var(--r); background: #fff;
  text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pdf-card:hover { border-color: var(--teal-300); transform: translateY(-2px); }
.pdf-card svg { color: var(--sand); flex: none; }
.pdf-card b { display: block; font-weight: 500; color: var(--deep); font-size: .95rem; }
.pdf-card span { font-size: .8rem; color: var(--ink-3); }

.timeline { display: grid; gap: 0; list-style: none; }
.timeline li {
  display: grid; gap: .3rem 1.4rem; padding: 1.15rem 0 1.15rem 1.6rem;
  border-left: 1px solid var(--line); position: relative;
}
@media (min-width: 620px) { .timeline li { grid-template-columns: 84px 1fr; } }
.timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 1.6rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300); border: 2px solid var(--paper);
}
.timeline b { font-family: var(--display); font-size: 1.05rem; color: var(--teal); }
.timeline span { color: var(--ink-2); font-size: .93rem; }

.hot:focus-visible { outline: none; }
.hot:focus-visible .hot__shape { stroke: var(--teal); stroke-width: 2.6; }
.hot:focus-visible .hot__label { fill: var(--teal); }
.anatomy__panel .result__links { margin-top: .3rem; }
.anatomy__cond { display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.anatomy__cond:first-of-type { border-top: 0; padding-top: 0; }

/* ── Adjustments ──────────────────────────────────────────────────────── */
.nav__link { white-space: nowrap; }
.header__bar > * { min-width: 0; }
.nav { flex-wrap: nowrap; }
/* The header bar is capped by --wrap, so a wider viewport buys the nav no extra
   room: the space between the brand and the tools is ~750px at every desktop
   width. Six items fit that; seven never did. Illustrations therefore live in the
   drawer and the footer only, and articles is the one that sheds when the brand
   and tools grow. Sizing is deliberately identical across all desktop widths —
   with a fixed budget there is nothing to gain from scaling it up. */
@media (min-width: 1024px) {
  .nav__link { padding-inline: .5rem; font-size: .865rem; }
  .header__bar { gap: .85rem; }
  .brand img { width: 150px; }
}
@media (min-width: 1024px) and (max-width: 1210px) {
  .nav__link { padding-inline: .38rem; font-size: .805rem; }
  .brand img { width: 132px; }
  .nav__item--optional { display: none; }
  .header .btn { padding-inline: 1.05rem; }
}
/* The notice sits opposite the hero call to action so it never covers it. */
@media (min-width: 780px) {
  .cookies { left: auto; right: clamp(1rem, 3vw, 1.5rem); }
}
body:has(.cookies.is-shown) .totop { bottom: 15rem; }
@media (max-width: 779px) { body:has(.cookies.is-shown) .totop { bottom: 22rem; } }

.creds__list li b { hyphens: none; }
.card__kicker { line-height: 1.4; }
.article-row .chip { justify-self: start; }
.gal__item img { background: var(--mist-2); }
.info-list li:last-child { grid-template-columns: 38px minmax(0, 1fr); }
.prose > ul:first-child, .prose > ul { margin-top: 1.15em; }
.timeline b { font-family: var(--text); font-weight: 700; font-size: .8rem; letter-spacing: .1em; }
.doc__aside .card { padding: 1.25rem; }
.doc__aside .card .btn { margin-top: .25rem; }
.lightbox__stage-wrap { display: grid; }

/* Illustration tiles sit on paper, not on a photo crop, so they get a light
   ground and full-bleed contain rather than cover. */
.gal__item { background: var(--white); border: 1px solid var(--line); }
.gal__item img { object-fit: contain; padding: .4rem; background: var(--white); }
.gal__item img { transition: transform .5s var(--ease); }
.gal__item:hover img { transform: scale(1.03); }
.lightbox__stage img { background: var(--white); border-radius: var(--r); }

/* Daily foot-care checklist inside the tracker widget. */
.checks { display: grid; gap: .5rem; list-style: none; }
.check {
  display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.check:hover { border-color: var(--teal-300); }
.check input { margin: .28rem 0 0; accent-color: var(--teal); width: 1.05rem; height: 1.05rem; flex: none; }
.check span { display: grid; gap: .12rem; }
.check b { font-weight: 500; color: var(--deep); font-size: .95rem; line-height: 1.4; }
.check i { font-style: normal; font-size: .82rem; color: var(--ink-3); line-height: 1.55; }
.check.is-done { background: rgba(43,127,150,.05); border-color: var(--teal-300); }
.check.is-done b { color: var(--teal); }
.tracker__count { font-size: 1.95rem; letter-spacing: -.01em; }

/* Bare lists that carry prose styling without a .prose ancestor. */
.bullets { list-style: none; padding-left: 0; display: grid; gap: .55rem; color: var(--ink-2); }
.bullets > li { position: relative; padding-left: 1.5rem; }
.bullets > li::before {
  content: ""; position: absolute; left: .28rem; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal-300);
}

/* <picture> wrappers must not break the layouts their <img> used to fill. */
.gal__item picture, .frame picture, .hero__figure picture { display: block; width: 100%; height: 100%; }
.gal__item picture img { width: 100%; height: 100%; object-fit: cover; }
.hero__figure picture img {
  width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); position: relative; z-index: 1;
}
.frame picture img { width: 100%; }

/* Build credit */
.credit { display: inline-flex; align-items: center; gap: .35rem; opacity: .8; transition: opacity .2s var(--ease); }
.credit:hover { opacity: 1; }
.credit b { font-weight: 700; color: #cfe2f3; }
.credit a { color: inherit; text-decoration: none; }
.credit a:hover b { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Homepage — the deep band
   The clinical pages stay light and plain. The front page gets one dark,
   luminous block: aurora wash, a hairline grid, the mark floating on glass,
   and the numbers ticking up. Everything here is scoped to .page--home or
   .hero--deep, so no other page is touched.
   ══════════════════════════════════════════════════════════════════════════ */
.hero--deep {
  background: var(--abyss);
  color: #fff;
  isolation: isolate;
  /* Slide up under the transparent header and pay the height back as padding. */
  margin-top: calc(var(--header-h) * -1);
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) clamp(2.5rem, 5vw, 4rem);
}
.hero--deep > .wrap { position: relative; z-index: 2; }

/* Aurora: three slow, blurred washes. The reduced-motion reset at the top of
   this file freezes them, which is a perfectly good static state. */
.hero__aurora {
  position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none;
  filter: blur(72px); opacity: .5;
}
.hero__aurora i { position: absolute; display: block; border-radius: 50%; }
.hero__aurora i:nth-child(1) {
  width: 46%; aspect-ratio: 1; left: 48%; top: 0;
  background: radial-gradient(circle, #1673bd 0%, rgba(22,115,189,0) 68%);
  animation: aurora-a 26s var(--ease) infinite alternate;
}
.hero__aurora i:nth-child(2) {
  width: 38%; aspect-ratio: 1; left: 4%; top: 34%;
  background: radial-gradient(circle, #45b3e8 0%, rgba(69,179,232,0) 70%);
  animation: aurora-b 32s var(--ease) infinite alternate;
}
.hero__aurora i:nth-child(3) {
  width: 30%; aspect-ratio: 1; left: 62%; top: 52%;
  background: radial-gradient(circle, #0a3a80 0%, rgba(10,58,128,0) 72%);
  animation: aurora-c 22s var(--ease) infinite alternate;
}
@keyframes aurora-a { to { transform: translate3d(-9%, 10%, 0) scale(1.14); } }
@keyframes aurora-b { to { transform: translate3d(11%, -8%, 0) scale(1.1); } }
@keyframes aurora-c { to { transform: translate3d(-7%, -12%, 0) scale(1.2); } }

/* Hairline grid, faded out at the edges so it never reads as a table. */
.hero__mesh {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(163,217,244,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(163,217,244,.08) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(115% 85% at 62% 38%, #000 28%, transparent 76%);
  mask-image: radial-gradient(115% 85% at 62% 38%, #000 28%, transparent 76%);
}

/* Type on the deep ground */
.hero--deep .slogan { color: #fff; }
.hero--deep .slogan .qm { color: var(--teal-300); }
.hero--deep .slogan__by { color: var(--teal-300); }
.hero--deep .slogan__by::before { background: var(--teal-300); }
.hero--deep .eyebrow { color: var(--teal-300); }
.hero--deep .eyebrow::before { background: rgba(163,217,244,.5); }
.hero--deep .lede { color: #bcd6ec; }
.hero--deep .hero__note { color: #8fb5d6; }
.hero--deep .hero__note svg { color: var(--teal-300); }

/* The mark, floating on glass with a glow behind it */
.hero__pane {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(163,217,244,.2);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.hero__pane::before {
  content: ""; position: absolute; inset: -30%; z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(69,179,232,.4), transparent 62%);
  filter: blur(40px); pointer-events: none;
}
.hero__pane img { position: relative; z-index: 1; box-shadow: none; border-radius: 0; }
.hero--deep .hero__badge {
  background: rgba(7,31,66,.72);
  border: 1px solid rgba(163,217,244,.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.hero--deep .hero__badge b { color: #fff; }
.hero--deep .hero__badge span { color: #8fb5d6; }

/* Numbers strip, inside the deep band */
.creds__list--deep {
  border-top: 1px solid rgba(163,217,244,.16);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.creds__list--deep li { border-right-color: rgba(163,217,244,.16); }
.creds__list--deep b {
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.creds__list--deep span { color: #93bcc7; }

/* The header floats over the band until the page scrolls past it. */
.brand__light { display: none; }

/* A pull-quote panel on the deep ground, used for the seminars door. */
.panel {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--r-xl);
}
@media (min-width: 860px) { .panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.panel--deep {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--deep), var(--abyss) 65%);
  color: #fff;
}
.panel--deep::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; z-index: -1;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(69,179,232,.4), transparent 65%);
  filter: blur(52px);
}
.panel--deep h2 { color: #fff; }
.panel--deep .lede { color: #bcd6ec; }
.panel--deep .eyebrow { color: var(--teal-300); }
.panel--deep .eyebrow::before { background: rgba(163,217,244,.5); }

/* Cards on the front page pick up a hairline glow as the pointer crosses them. */
.page--home .card {
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.page--home .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: linear-gradient(140deg, rgba(69,179,232,.16), transparent 46%);
}
.page--home .card:hover::after { opacity: 1; }

@media (max-width: 939px) {
  .hero--deep { padding-block: calc(var(--header-h) + 2rem) 2.5rem; }
  .hero__pane { max-width: 420px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Entry screen (homepage)
   The whole screen is one button: the mark, the name, «Πατήστε εδώ». It sits
   over the page and fades out on tap. It shows every time the homepage opens.
   ══════════════════════════════════════════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 200; isolation: isolate; overflow: hidden;
  display: block; width: 100%; height: 100%; padding: 0; text-align: center;
  background: var(--abyss); color: #fff; font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .75s var(--ease), visibility .75s;
}
.gate__inner {
  position: relative; z-index: 2; height: 100%; width: 100%;
  display: grid; justify-items: center; align-content: center; gap: 0;
  padding: var(--pad-x);
}
.gate:focus-visible { outline: none; }
.gate:focus-visible .gate__cta { outline: 2px solid #fff; outline-offset: 4px; }
.gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-open { overflow: hidden; }
.gate > .hero__aurora { opacity: .55; }
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,217,244,.45); }
  60% { box-shadow: 0 0 0 16px rgba(163,217,244,0); }
}


/* Photographs. A figure with a caption under it; the frame stays the same. */
.frame--photo { margin: 0; background: var(--white); }
.frame--photo picture, .frame--photo img { display: block; width: 100%; height: auto; }
.frame--photo figcaption {
  padding: .8rem 1.1rem; font-size: .8rem; color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   Entry screen, Oct 2026 (second round): the ring nearly filling the screen,
   ENSŌ / FOOT CLINIC centred inside it, a round ENTER button under the name.
   No hairline grid, nothing under the ring.
   ══════════════════════════════════════════════════════════════════════════ */
.gate__inner { align-content: center; gap: 0; padding: 1.5vh var(--pad-x); }
.gate__ring {
  --ring: min(96vh, 96vw, 1280px);
  position: relative; z-index: 2; display: block;
  width: var(--ring); height: var(--ring);
  /* JS (lean) writes the four custom properties; until it does this is a no-op. */
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
    translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0)
    scale(var(--lockup-scale, 1));
  transition: transform .45s var(--ease-out);
}
.gate__inner { animation: gate-in 1.1s var(--ease-out) both; }
.gate.is-pointing .gate__ring { transition: transform .12s linear; }
.gate:hover { --lockup-scale: 1.02; }
.gate:active { --lockup-scale: .988; }
/* A wash of the logo's own aqua that follows the pointer, behind the artwork. */
.gate__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--glow-x, 50%) var(--glow-y, 45%),
              rgba(163,217,244,.22), rgba(163,217,244,0) 68%);
  transition: opacity .6s var(--ease);
}
.gate.is-pointing .gate__glow { opacity: 1; }
/* No pointer to follow: the ring breathes instead, so the screen is not dead. */
@media (hover: none) { .gate__ring { animation: gate-float 7s 1.4s ease-in-out infinite; } }
@keyframes gate-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -10px, 0) scale(1.012); }
}
/* The name sits at the centre of the ring's OPENING, not of the screen. The
   brush is heavier on the left and top, so the clear circle inside the ring is
   centred at 61% / 54.6% of the image (measured from the badge, radius ≈ 23%). */
.gate__core {
  position: absolute; left: 61%; top: 54.6%; transform: translate(-50%, -50%);
  width: calc(var(--ring) * .46);
  display: grid; justify-items: center; align-content: center;
  row-gap: calc(var(--ring) * .045);
}
.gate__mark {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.4));
}
.gate__lockup { display: grid; justify-items: center; row-gap: calc(var(--ring) * .022); white-space: nowrap; }
.gate__word, .gate__word2 { font-family: var(--name); text-transform: uppercase; line-height: 1; }
.gate__word {
  font-weight: 500; letter-spacing: .12em; padding-left: .12em;
  font-size: calc(var(--ring) * .095); color: #fff;
}
.gate__word2 {
  font-weight: 700; letter-spacing: .2em; padding-left: .2em; white-space: nowrap;
  font-size: calc(var(--ring) * .036); color: var(--teal-300);
}
.gate__enter {
  --enter: clamp(64px, calc(var(--ring) * .115), 128px);
  display: inline-grid; place-items: center;
  width: var(--enter); height: var(--enter); border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.65);
  font-family: var(--name); font-size: clamp(.68rem, calc(var(--enter) * .15), 1rem);
  font-weight: 700; letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  animation: gate-pulse 2.6s 1s ease-in-out infinite;
}
.gate:hover .gate__enter { background: #fff; color: var(--deep); border-color: #fff; transform: scale(1.05); }
.gate:focus-visible .gate__enter { outline: 2px solid #fff; outline-offset: 4px; }

/* Phones in portrait (Oct 2026, third round): the desktop idea — the name inside
   the ring's opening — does not survive a narrow screen, so the gate becomes a
   compact lockup instead: the ring small on the left, ENSŌ / FOOT CLINIC beside
   it, the round ENTER centred underneath. The ring stays a .gate__mark so the
   flight to the header still works. */
@media (max-width: 719px) and (orientation: portrait) {
  .gate__inner { padding: var(--pad-x); }
  .gate__ring {
    --mark: clamp(92px, 29vw, 132px);
    width: auto; height: auto;
    display: grid; grid-template-columns: var(--mark) auto; align-items: center;
    column-gap: clamp(.8rem, 4vw, 1.25rem); row-gap: clamp(1.6rem, 6vh, 2.6rem);
    justify-content: center;
  }
  .gate__mark {
    position: static; width: var(--mark); height: var(--mark); z-index: auto;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.4));
  }
  .gate__core { display: contents; }
  .gate__lockup {
    justify-items: start; text-align: left; row-gap: .45em;
    font-size: clamp(2rem, 11vw, 2.8rem);
  }
  .gate__word  { font-size: 1em; padding-left: 0; letter-spacing: .1em; }
  .gate__word2 { font-size: .34em; padding-left: 0; letter-spacing: .22em; }
  .gate__enter { grid-column: 1 / -1; justify-self: center; --enter: 76px; }
  .gate.is-leaving .gate__core { transform: none; }
}

/* ── Ποιοι είμαστε ──────────────────────────────────────────────────── */
.about__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 940px) { .about__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.about__who { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 940px) { .about__who { position: sticky; top: calc(var(--header-h) + 2rem); } }
.about__who h1 { font-family: var(--name); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.about__role {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); line-height: 1.6; max-width: 34ch;
}
.about__mark { width: min(260px, 60%); margin-top: 1rem; opacity: .95; }
@media (max-width: 939px) { .about__mark { display: none; } }
.about__text { display: grid; gap: 1.4rem; max-width: 62ch; }
.about__text p {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); line-height: 1.75;
  color: var(--ink-2); font-weight: 300;
}
.about__text p:first-child { color: var(--ink); font-weight: 400; }
.about__text .qm { color: var(--teal-hi); font-weight: 500; }

/* ── Βιογραφικό (under «Ποιοι είμαστε») ───────────────────────────────── */
.about__bio {
  margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line); max-width: 72ch;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.about__bio .eyebrow { margin-bottom: .6rem; }
.about__bio-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: 1.25rem; }
.about__bio .timeline b { font-family: var(--text); font-weight: 700; font-size: .8rem; letter-spacing: .1em; }
@media (min-width: 620px) { .about__bio .timeline li { grid-template-columns: 140px 1fr; } }
.about__bio .timeline b { white-space: normal; line-height: 1.45; }
#poioi-eimaste { scroll-margin-top: var(--header-h); }

/* ── «Περισσότερα» disclosure ────────────────────────────────────────────
   Used for the rest of the biography. The marker is removed so the summary
   can be a chip; the chevron rotates when it opens. */
.more { margin-top: 1.25rem; }
.more > summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .9rem; border-radius: 100px; border: 1px solid var(--line);
  background: var(--white); font-size: .84rem; font-weight: 500; color: var(--deep);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }
.more > summary:hover { border-color: var(--teal); color: var(--teal); }
.more > summary svg { transition: transform .25s var(--ease); }
.more[open] > summary svg { transform: rotate(180deg); }
.more .more__shut, .more[open] .more__open { display: none; }
.more[open] .more__shut { display: inline; }

/* ── The full CV («Λεπτομέρειες») ────────────────────────────────────────
   What the disclosure under the brief timeline opens. Plain, documentary:
   a profile line, then one block per section of her CV. */
.cv { margin-top: 1.5rem; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.cv__profile { color: var(--ink-2); font-size: 1rem; line-height: 1.7; max-width: 66ch; }
.cv__section h3 {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft);
}
.cv__list { list-style: none; display: grid; gap: 1.1rem; }
.cv__entry { display: grid; gap: .25rem; }
.cv__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.cv__head h4 { font-size: 1rem; margin: 0; }
.cv__when { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.cv__sub { font-size: .9rem; color: var(--teal); font-weight: 500; }
.cv__entry p:not(.cv__sub), .cv__bullets li { font-size: .93rem; color: var(--ink-2); line-height: 1.65; }
.cv__bullets { padding-left: 1.1rem; display: grid; gap: .35rem; }

/* ── Note at the foot of the services ────────────────────────────────────
   Her legal wording: discreet, small, set apart with a hairline. */
.disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line-soft);
  font-size: .82rem; line-height: 1.65; color: var(--ink-3); max-width: 80ch;
}
.disclaimer--inline { margin-top: 2.5rem; }

/* ── The clinic's motto band (replaced «Επόμενο βήμα») ───────────────── */
.motto { text-align: center; }
.motto__rule { display: block; width: 3rem; height: 2px; margin: 0 auto 2rem; background: var(--teal-300); border-radius: 2px; }
.motto__lead {
  font-family: var(--display); font-weight: 700; color: #fff;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); line-height: 1.2; letter-spacing: -.01em;
  text-wrap: balance;
}
.motto__body {
  margin: 1.4rem auto 0; max-width: 46ch;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem); line-height: 1.65;
  color: #bcd6ec; font-weight: 300;
}

/* ── Contact cards & company details ─────────────────────────────────── */
.place h3 { margin-bottom: .4rem; }
.place .info-list { gap: 1rem; }
.info-list span { color: var(--ink); }
.legal {
  display: grid; gap: 0; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden; max-width: 760px;
}
.legal > div {
  display: grid; grid-template-columns: minmax(8rem, .4fr) 1fr; gap: 1rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--line-soft); font-size: .95rem;
}
.legal > div:last-child { border-bottom: 0; }
.legal b { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; align-self: center; }
.legal .pending { color: var(--sand); font-style: italic; }
.prose .legal { margin-top: 1.2em; }
.prose .legal > div { font-size: .9rem; }

/* Two equal call buttons in the phone action bar. */
.actionbar .btn { padding-inline: .6rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Futuristic layer, 07/10/2026 — restored 16/10/2026 for the new entry screen.
   Decoration over a page that is complete without it; the reduced-motion
   reset at the top of this file switches the movement off and the JS does not
   add the classes at all in that case.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The logo's flight from the entry screen to the header ─────────────── */
.gate-fly {
  position: fixed; z-index: 400; pointer-events: none; margin: 0;
  transform-origin: 50% 50%; will-change: transform, opacity, filter;
}
.gate-open .header .brand img,
.brand-landing .header .brand img { opacity: 0; }
.header .brand img { transition: opacity .45s var(--ease); }
.brand-landed .header .brand { animation: brand-land 1.2s var(--ease-out); }
@keyframes brand-land {
  0%   { filter: drop-shadow(0 0 14px rgba(69,179,232,.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(69,179,232,0)); }
}
.gate.is-leaving .gate__core {
  opacity: 0; transform: translate(-50%, -50%) scale(.92);
  transition: opacity .3s, transform .4s var(--ease);
}

/* ── Reveal: rise out of a blur, staggered ─────────────────────────────── */
.js .fx-rise[data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(8px); }
.js .fx-rise[data-reveal].is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.js .footer .fx-rise[data-reveal] { filter: none; }

/* The motto, word by word. */
.fx-word { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(-60deg); filter: blur(6px);
  transform-origin: 50% 100%; }
.motto__lead.is-in .fx-word { opacity: 1; transform: none; filter: none;
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms); }
.js .motto__lead[data-reveal] { opacity: 1; transform: none; }

/* Headings lean into fast scrolling (JS writes --fx-skew). */
.fx-skew { transform: skewY(var(--fx-skew, 0deg)); transform-origin: 0 50%; }
.fx-skew.fx-rise[data-reveal].is-in { transform: skewY(var(--fx-skew, 0deg)); }

/* ── A light that follows the pointer along card edges ─────────────────── */
.fx-glow { position: relative; isolation: isolate; }
.fx-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; z-index: 3; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(69,179,232,.95), rgba(163,217,244,.35) 35%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(69,179,232,.10), transparent 60%);
}
.fx-glow:hover::after, .fx-glow:hover::before { opacity: 1; }
.card.fx-glow, .place.fx-glow, .sem-card.fx-glow {
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.card.fx-glow:hover, .place.fx-glow:hover, .sem-card.fx-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(12,63,124,.14), 0 0 0 1px rgba(69,179,232,.25);
}

/* ── Buttons: a sheen that sweeps across on hover ──────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn > svg, .btn { z-index: 0; }
.btn:not(.btn--ghost)::before {
  content: ""; position: absolute; inset: -2px auto -2px -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out); display: block; opacity: 1; z-index: 2;
}
.btn:not(.btn--ghost):hover::before { left: 120%; }
.btn:not(.btn--ghost) { background-image: linear-gradient(120deg, var(--deep), var(--teal) 140%); }
.btn--light:not(.btn--ghost) { background-image: none; }

/* ── Page heads: a living grid and a slow orb behind the title ─────────── */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: -20% -10% -10%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(22,115,189,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,115,189,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 80% at 75% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(70% 80% at 75% 30%, #000 10%, transparent 70%);
  animation: grid-drift 30s linear infinite;
}
.page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 46vw; aspect-ratio: 1; right: -12vw; top: -22vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(69,179,232,.22), rgba(22,115,189,.08) 45%, transparent 70%);
  filter: blur(30px); animation: orb 16s var(--ease) infinite alternate;
}
@keyframes grid-drift { to { background-position: 56px 56px, 56px 56px; } }
@keyframes orb { to { transform: translate(-6vw, 5vw) scale(1.15); } }

/* Titles in a moving gradient of the brand blues. */
.page-head h1, .about__who h1, #poioi-eimaste h1 {
  background: linear-gradient(100deg, var(--abyss) 0%, var(--deep) 35%, var(--teal) 55%, var(--deep) 75%, var(--abyss) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: title-flow 9s ease-in-out infinite alternate;
}
@keyframes title-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* The eyebrow's hairline draws itself in. */
.fx-rise .eyebrow::before, .eyebrow.fx-rise::before { transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1s .25s var(--ease-out); }
.fx-rise.is-in .eyebrow::before, .eyebrow.fx-rise.is-in::before { transform: scaleX(1); }
.about__who .eyebrow::before { transform: none; }

/* ── Dark bands: aurora, scan line, grid ───────────────────────────────── */
.section--deep, .footer { position: relative; isolation: isolate; overflow: hidden; }
.section--deep::before, .footer::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 45% at 20% 30%, rgba(22,115,189,.45), transparent 70%),
    radial-gradient(30% 40% at 80% 70%, rgba(69,179,232,.28), transparent 70%),
    radial-gradient(25% 35% at 60% 10%, rgba(10,58,128,.5), transparent 70%);
  filter: blur(40px); animation: aurora-sway 22s var(--ease) infinite alternate;
}
.section--deep::after, .footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(163,217,244,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(163,217,244,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(80% 90% at 50% 50%, #000 20%, transparent 80%);
}
@keyframes aurora-sway { to { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.1); } }
.motto { padding-block: clamp(5rem, 11vw, 9rem); }
.motto .wrap { position: relative; }
.motto .wrap::after {
  content: ""; position: absolute; left: 50%; top: -3rem; bottom: -3rem; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(163,217,244,.5), transparent);
  transform: translateX(-50%); opacity: .35; z-index: -1;
}
.motto__lead { text-shadow: 0 0 40px rgba(69,179,232,.35); }
.motto__rule { box-shadow: 0 0 18px rgba(69,179,232,.8); animation: rule-pulse 3.2s ease-in-out infinite; }
@keyframes rule-pulse { 50% { width: 5rem; opacity: .7; } }

/* ── Header: an animated hairline once it sticks ───────────────────────── */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--teal-hi), var(--teal-300), transparent);
  background-size: 200% 100%; opacity: 0; transition: opacity .4s;
  animation: hairline 6s linear infinite;
}
.header.is-stuck::after { opacity: .8; }
@keyframes hairline { to { background-position: -200% 0; } }
.progress { background: linear-gradient(90deg, var(--teal), var(--teal-hi), var(--teal-300)); box-shadow: 0 0 12px rgba(69,179,232,.7); }

/* ── Small touches ─────────────────────────────────────────────────────── */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-hi)); transition: left .35s var(--ease-out), right .35s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { left: .6rem; right: .6rem; }
.info-list svg { filter: drop-shadow(0 0 6px rgba(69,179,232,.45)); }
.about__mark { animation: mark-spin 40s linear infinite; }
@keyframes mark-spin { to { transform: rotate(360deg); } }
.legal > div { transition: background-color .3s; }
.legal > div:hover { background: var(--mist-2); }
::selection { background: rgba(69,179,232,.3); }


/* ── Seminar checkout (/seminaria/egrafi/) ───────────────────────────────
   Participant form + order summary. The consent block follows the Visa/
   MasterCard rule Worldline quoted: checkbox first, then the Terms and the
   Cancellation Policy as expand/collapse panels that scroll in place. */
.checkout {
  display: grid; gap: var(--gap); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}
.checkout__main { display: grid; gap: 1.5rem; min-width: 0; }
.checkout__aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.fieldset {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: #fff;
  padding: clamp(1.25rem, 2.4vw, 1.75rem); margin: 0; min-width: 0;
}
.fieldset > legend {
  float: left; width: 100%; margin: 0 0 1.1rem; padding: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.fieldset > legend + * { clear: both; }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.field small { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: .7rem .95rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%233a5578' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; padding-right: 2.4rem;
}
.field input:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(22,115,189,.15); }
.field input:user-invalid { border-color: #c0392b; }
.field select:disabled { color: var(--ink-3); }
.check {
  display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; margin-top: 1rem;
  font-size: .92rem; color: var(--ink);
}
.check input {
  flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--teal); cursor: pointer;
}
.check small { display: block; margin-top: .25rem; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
.check--consent { margin-top: 0; font-weight: 500; }
.invoice-fields { margin-top: 1rem; }
.invoice-fields[hidden] { display: none; }

/* Terms / Cancellation panels, inline under the consent checkbox */
.folds { display: grid; gap: .6rem; margin-top: 1rem; }
.fold {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden;
}
.fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: .85rem 1rem; font-size: .9rem; color: var(--deep); list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary svg { flex: none; transition: transform .25s var(--ease); }
.fold[open] > summary { border-bottom: 1px solid var(--line-soft); }
.fold[open] > summary svg { transform: rotate(180deg); }
.fold__scroll {
  max-height: 18rem; overflow-y: auto; padding: 1rem 1.1rem; font-size: .86rem;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.fold__scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.prose--compact h2 { font-size: 1.02rem; margin-top: 1.5rem; }
.prose--compact h3 { font-size: .94rem; margin-top: 1.1rem; }
.prose--compact > :first-child { margin-top: 0; }
.prose--compact p, .prose--compact li { font-size: .86rem; line-height: 1.6; }
.prose--compact table { font-size: .84rem; }

/* Order summary */
.order {
  display: grid; gap: .8rem; background: var(--mist-2); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.order__title { font-size: 1.1rem; margin: 0; }
.order__rows { display: grid; gap: .5rem; margin: .4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.order__rows > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.order__rows dt { color: var(--ink-2); } .order__rows dd { margin: 0; font-weight: 500; }
.order__total { padding-top: .5rem; border-top: 1px dashed var(--line); font-size: 1.05rem !important; }
.order__total dd { font-weight: 700; color: var(--deep); }
.order .btn { margin-top: .4rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.order__secure { color: var(--ink-3); }
.form-note {
  margin: .9rem 0 0; padding: .85rem 1rem; border-radius: var(--r); font-size: .86rem; line-height: 1.55;
  background: #fff7e8; border: 1px solid #f1d9a6; color: #6b4d12;
}
.form-note[hidden] { display: none; }
@media (max-width: 879px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__aside { position: static; }
}
@media (max-width: 559px) {
  .field-grid { grid-template-columns: 1fr; }
}