@charset "UTF-8";

/* ==========================================================================
   SELF-HOSTED FONTS
   Served from this domain, not from Google. A third-party font request would
   send every visitor's IP address to Google without consent, which for a
   healthcare practice in the EU is a GDPR problem, not just a performance one.
   Greek + Latin subsets only.
   ========================================================================== */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alegreya-sans-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/alegreya-sans-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/alegreya-sans-700-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-mono-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fira-mono-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fira-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'GFS Didot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gfs-didot-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'GFS Didot';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/gfs-didot-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   PELMA THERAPY — "Δίχρωμη Ανατομική Πλάκα"
   Two inks and paper. See DESIGN.md.
   ========================================================================== */

:root {
  /* --- the two inks ------------------------------------------------------ */
  --berry-ink:    #A0206E;
  --berry-deep:   #6E1149;
  --berry-black:  #1C0A14;
  --lime-ink:     #8FB43C;
  --lime-bright:  #B7CC3C;
  --lime-deep:    #3F5416;

  /* --- the paper --------------------------------------------------------- */
  --plate-stock:  #E3E6E9;
  --plate-field:  #F1F3F5;
  --plate-rule:   #C3C9CF;
  --ink-text:     #241A20;
  --ink-muted:    #5C5058;

  /* --- type ------------------------------------------------------------- */
  --f-display: 'GFS Didot', 'Times New Roman', Times, serif;
  --f-body:    'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --f-label:   'Fira Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* --- rhythm ----------------------------------------------------------- */
  --s-xs: 4px;  --s-sm: 8px;  --s-md: 16px; --s-lg: 24px;
  --s-xl: 40px; --s-2xl: 64px; --s-3xl: 96px; --s-4xl: 144px;

  --plate-w: 1240px;
  --gutter: clamp(16px, 4vw, 44px);

  /* --- motion ----------------------------------------------------------- */
  --ease-plate: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-register: 620ms;
  --dur-ui: 180ms;
}

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

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

body {
  margin: 0;
  background: var(--plate-stock);
  color: var(--ink-text);
  font-family: var(--f-body);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.62;
  /* the stock has a faint mechanical tooth — 1px of it, nothing more */
  background-image:
    repeating-linear-gradient(0deg, rgba(36,26,32,.028) 0 1px, transparent 1px 4px);
}

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

::selection { background: var(--berry-ink); color: var(--plate-stock); }

/* --- everything square ---------------------------------------------------- */
a, button, input, textarea, select, .panel, .imprint { border-radius: 0; }

/* --- focus is a printed rule, never a glow ------------------------------- */
:focus-visible {
  outline: 2px solid var(--berry-ink);
  outline-offset: 3px;
}
.band :focus-visible, .masthead :focus-visible, .footer :focus-visible {
  outline-color: var(--lime-bright);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--berry-ink); color: var(--plate-stock);
  padding: 12px 20px; font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--s-sm); }

/* ==========================================================================
   TYPE ROLES
   ========================================================================== */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.1vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--berry-deep);
  margin: 0;
  text-wrap: balance;
}
/* The plate title sits over a two-ink rule that is deliberately out of
   register: berry laid first, lime landing 4px off. It is the one place the
   two inks touch at full strength, and it is the world's signature artefact. */
.display--plate { position: relative; padding-bottom: 26px; }
.display--plate::before,
.display--plate::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: clamp(120px, 34%, 300px); height: 3px;
}
.display--plate::before { background: var(--berry-ink); }
.display--plate::after {
  background: var(--lime-ink);
  transform: translate(3px, -3px);
  mix-blend-mode: multiply;
}
.band .display--plate::after { mix-blend-mode: normal; background: var(--lime-bright); }

.headline {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  color: var(--berry-deep);
  margin: 0;
  text-wrap: balance;
}
.band .headline, .band .display { color: var(--plate-stock); }

.title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0;
}
.label, .lbl {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}
p { margin: 0 0 1.15em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.16em; line-height: 1.55; }

/* ==========================================================================
   PLATE FRAME + REGISTRATION MARKS
   ========================================================================== */

.plate {
  position: relative;
  width: min(100% - (var(--gutter) * 2), var(--plate-w));
  margin-inline: auto;
}
.plate--framed {
  border: 1px solid var(--plate-rule);
  padding: clamp(20px, 3.4vw, 52px);
}

/* THE SHEET. A teaching plate is a ruled sheet before it is anything else:
   a hairline edge running the height of the page with the folio hung in the
   margin outside the text column. Only wide viewports have the room. */
/* 1360px, not 1180: the rules sit at 50% − plate/2 − 34px, which is a NEGATIVE
   offset until the viewport is wider than about 1310px, and a negative offset
   pushes the document sideways. Only draw them once there is real margin. */
.sheet { position: relative; }
@media (min-width: 1360px) {
  .sheet::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: calc(50% - (var(--plate-w) / 2) - 34px);
    width: 1px; background: var(--plate-rule);
  }
  .sheet::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    right: calc(50% - (var(--plate-w) / 2) - 34px);
    width: 1px; background: var(--plate-rule);
  }
  .band.sheet::before, .band.sheet::after { background: rgba(227,230,233,.2); }
  .folio {
    position: absolute; top: 0;
    left: calc(50% - (var(--plate-w) / 2) - 34px);
    transform: translateX(-100%) rotate(180deg);
    writing-mode: vertical-rl;
    padding: 0 0 0 14px;
    font: 500 0.625rem/1 var(--f-label);
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--ink-muted); white-space: nowrap;
  }
  .band .folio { color: rgba(183,204,60,.75); }
}
@media (max-width: 1359px) { .folio { display: none; } }

/* THE OFF-REGISTER, systemic. Berry lays first, lime lands 3px shy — drawn as
   a second impression of the element's own edge, never as a duplicated string,
   so nothing here is read twice by a screen reader. */
.offreg { position: relative; }
.offreg::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--lime-ink);
  transform: translate(3px, -3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.band .offreg::after, .panel--ink.offreg::after {
  border-color: var(--lime-bright); mix-blend-mode: normal; opacity: .55;
}
/* on hover the second impression pulls square, the way a press is corrected */
.imprint.offreg::after { transition: transform var(--dur-ui) var(--ease-plate); }
.imprint.offreg:hover::after { transform: translate(0, 0); }

.reg { position: absolute; inset: 0; pointer-events: none; }
.reg i {
  position: absolute; width: 13px; height: 13px;
}
.reg i::before, .reg i::after { content: ''; position: absolute; background: var(--plate-rule); }
.reg i::before { left: 0; top: 6px; width: 13px; height: 1px; }
.reg i::after  { top: 0; left: 6px; width: 1px; height: 13px; }
.reg i:nth-child(1) { left: -7px;  top: -7px; }
.reg i:nth-child(2) { right: -7px; top: -7px; }
.reg i:nth-child(3) { left: -7px;  bottom: -7px; }
.reg i:nth-child(4) { right: -7px; bottom: -7px; }
.band .reg i::before, .band .reg i::after { background: rgba(227,230,233,.42); }

/* ==========================================================================
   MASTHEAD / NAV
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--berry-black);
  border-bottom: 1px solid rgba(183,204,60,.22);
}
/* The bar runs the full width of the page, gutter to gutter, so the brand
   sits at the left edge and the nav at the right instead of huddling in a
   1240px column adrift in a wide black field. */
.masthead__in {
  width: 100%;
  padding-inline: clamp(18px, 4vw, 56px);
  min-height: 76px;
  display: flex; align-items: center; gap: var(--s-lg);
}
.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--plate-stock);
  margin-right: auto; padding: 10px 0;
}
/* The real logo, mounted as a specimen on a small white plate — the honest
   way to carry a raster mark with a white ground onto a dark bar, and it
   reads as exactly what this world is: a thing pinned to a sheet. */
/* Square tile + object-fit cover crops the JPEG's wide white margins so the
   mark itself fills the plate, without clipping any of the artwork (the art is
   centred and the crop only removes empty paper on the left and right). */
.brand__plate {
  display: block; flex: none;
  width: 56px; height: 56px; padding: 3px;
  background: #fff; border: 1px solid var(--plate-rule);
}
.brand__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer .brand__plate { width: 50px; height: 50px; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.42rem; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--lime-bright); }

.nav { display: flex; align-items: stretch; gap: 2px; }
.nav a {
  display: flex; align-items: center;
  padding: 0 15px; min-height: 76px;
  color: var(--plate-stock); text-decoration: none;
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .14em; text-transform: uppercase;
  border-top: 3px solid transparent;
  transition: color var(--dur-ui) var(--ease-plate), background var(--dur-ui) var(--ease-plate);
}
.nav a:hover { background: rgba(183,204,60,.1); color: var(--lime-bright); }
.nav a[aria-current='page'] {
  border-top-color: var(--lime-bright);
  color: var(--lime-bright);
}

/* The one action the business offers, reachable from every viewport of every
   page — not only from the pages that happen to end in a call to action. */
.mast-tel {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; padding: 9px 16px;
  border: 1px solid var(--lime-bright);
  color: var(--lime-bright); white-space: nowrap;
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.mast-tel:hover { background: var(--lime-bright); color: var(--berry-black); }
.mast-tel__lbl {
  font: 500 0.625rem/1.2 var(--f-label);
  letter-spacing: .14em; text-transform: uppercase;
}
.mast-tel__num {
  font-family: var(--f-display); font-size: 1.1rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
@media (max-width: 1100px) { .mast-tel__lbl { display: none; } }
@media (max-width: 620px) { .mast-tel { padding: 9px 11px; } .mast-tel__num { font-size: 1rem; } }

/* Language toggle. Sits beside the phone in the masthead, drawn as a plate
   button so it reads as part of the apparatus rather than a widget. */
.langbtn {
  appearance: none; cursor: pointer; flex: none;
  background: none; border: 1px solid rgba(227,230,233,.34);
  color: var(--plate-stock);
  padding: 10px 13px; min-height: 40px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 0.625rem/1 var(--f-label);
  letter-spacing: .14em; text-transform: uppercase;
  transition: border-color var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.langbtn:hover { border-color: var(--lime-bright); color: var(--lime-bright); }
.langbtn:focus-visible { outline: 2px solid var(--lime-bright); outline-offset: 3px; }
.langbtn svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 620px) { .langbtn { padding: 10px; gap: 0; } .langbtn [data-lang-label] { display: none; } }

.burger {
  display: none;
  background: none; border: 1px solid rgba(227,230,233,.34);
  color: var(--plate-stock); cursor: pointer;
  min-height: 44px; padding: 11px 15px;
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .16em; text-transform: uppercase;
}
.burger:hover { border-color: var(--lime-bright); color: var(--lime-bright); }

@media (max-width: 900px) {
  .burger { display: block; }
  /* full-bleed band, not a floating card: the menu is a plate too */
  .nav {
    display: none;
    position: absolute; left: 50%; right: auto; top: 100%;
    width: 100vw; margin-left: -50vw;
    flex-direction: column; gap: 0;
    background: var(--berry-black);
    border-bottom: 3px solid var(--lime-bright);
    padding-bottom: var(--s-sm);
  }
  .nav.is-open { display: flex; }
  .nav a {
    min-height: 52px; padding: 15px var(--gutter);
    font-size: 0.8125rem; letter-spacing: .1em;
    border-top: 0; border-left: 3px solid transparent;
  }
  .nav a[aria-current='page'] { border-left-color: var(--lime-bright); }
  .masthead__in { position: relative; gap: var(--s-md); }
  .brand__name { font-size: 1.1rem; }
}
@media (max-width: 460px) { .brand__name { display: none; } }

/* ==========================================================================
   HERO — THE LAYER PLATE
   ========================================================================== */

.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 6vw, 96px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.hero__meta { display: flex; flex-direction: column; }

.platenum {
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-lg);
}
.platenum::after {
  content: ''; flex: 1; height: 1px; background: var(--plate-rule);
}
.band .platenum { color: var(--lime-bright); }
.band .platenum::after { background: rgba(183,204,60,.34); }

.hero .display { margin-bottom: var(--s-xl); }

/* the numbered key: this is the system's primary information device */
.key { list-style: none; margin: 0 0 var(--s-xl); padding: 0; }
.key > li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--s-md);
  padding: 15px 0;
  border-top: 1px solid var(--plate-rule);
  align-items: baseline;
}
.key > li:last-child { border-bottom: 1px solid var(--plate-rule); }
.key__n {
  font: 500 0.75rem/1.5 var(--f-label);
  letter-spacing: .08em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.key__t { font-weight: 500; }

/* interactive variant: the key advances the plate's ink passes.
   State is carried by ink density and a printed rule — never by a bullet. */
.key--live > li { display: block; padding: 0; position: relative; }
/* Targeted reset, not `all: unset` — that wipes the UA focus ring, leaving a
   keyboard user with no indicator anywhere :focus-visible fails to match. */
.key--live button {
  appearance: none; background: none; border: 0; margin: 0; border-radius: 0;
  text-align: left;
  display: grid; grid-template-columns: 30px 1fr; gap: var(--s-md);
  box-sizing: border-box; width: 100%;
  padding: 15px 12px 15px 0;
  cursor: pointer; align-items: baseline;
  font: inherit; color: inherit;
  transition: background var(--dur-ui) var(--ease-plate);
}
.key--live button:focus { outline: 2px solid var(--berry-ink); outline-offset: -2px; }
.key--live button:focus:not(:focus-visible) { outline: none; }
.key--live button:focus-visible { outline: 2px solid var(--berry-ink); outline-offset: -2px; }
.key--live button:hover { background: var(--plate-field); }
.key--live li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--lime-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-register) var(--ease-plate);
}
.key--live li[data-state='done']::after { transform: scaleX(1); background: var(--berry-ink); }
.key--live li[data-state='active']::after { transform: scaleX(1); }
.key--live li[data-state='done'] .key__n { color: var(--berry-deep); }
.key--live li[data-state='active'] { background: var(--plate-field); }
.key--live li[data-state='active'] .key__n { color: var(--berry-ink); font-weight: 500; }
.key--live li[data-state='active'] .key__t { font-weight: 700; }

/* the figure well */
.figwell {
  position: relative;
  background: var(--plate-field);
  border: 1px solid var(--plate-rule);
  padding: clamp(14px, 2.4vw, 26px);
}
/* The whole plate AND its legend must land in the first screen on a laptop,
   or the thing that decodes the figure never gets seen. */
.layerplate {
  position: relative;
  aspect-ratio: 400 / 740;
  width: 100%;
  max-width: min(470px, calc((100svh - 250px) * 400 / 740));
  margin-inline: auto;
}
@media (max-width: 900px) { .layerplate { max-width: 470px; } }
.layerplate svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
}
.lp-layer {
  transition: opacity var(--dur-register) var(--ease-plate),
              transform var(--dur-register) var(--ease-plate);
}
/* Later passes overprint the earlier ones the way translucent ink does:
   the skeleton stays readable through the load field above it. */
.lp-layer + .lp-layer { mix-blend-mode: multiply; }

/* THE REGISTER. A pass does not fade in — it lands off-register and is pulled
   square, which is the one motion this world actually has. Each pass arrives
   from a different offset, because a press does not miss the same way twice. */
.js .lp-layer[data-on='0'] { opacity: 0; }
.js .lp-layer[data-on='0']:nth-child(1) { transform: translate(-7px, 5px) rotate(-.35deg); }
.js .lp-layer[data-on='0']:nth-child(2) { transform: translate(8px, -6px) rotate(.4deg); }
.js .lp-layer[data-on='0']:nth-child(3) { transform: translate(-6px, -7px) rotate(.28deg); }
.js .lp-layer[data-on='1'] { opacity: 1; transform: none; }

.figcap {
  margin-top: var(--s-md); padding-top: var(--s-sm);
  border-top: 1px solid var(--plate-rule);
  font: 500 0.6875rem/1.5 var(--f-label);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; justify-content: space-between; gap: var(--s-md);
  flex-wrap: wrap;
}
.figcap b { color: var(--berry-deep); font-weight: 500; }

/* The footprint is one shape reused at every scale across the site, so the
   atlas, the services plates and the hero are demonstrably the same foot. */
.fpdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fp-shape { fill: #fff; stroke: var(--berry-ink); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.fp-arch { fill: none; stroke: var(--berry-ink); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .5; vector-effect: non-scaling-stroke; }

/* svg text inside plates */
.svg-lbl {
  font-family: var(--f-label);
  font-size: 13px; font-weight: 500;
  letter-spacing: 1.4px;
  fill: var(--ink-muted);
}
/* figures shrink on phones but their keys must not shrink with them */
@media (max-width: 620px) { .svg-lbl { font-size: 16px; letter-spacing: 1px; } }
.svg-lbl--ink { fill: var(--berry-deep); }
.svg-lbl--lime { fill: var(--lime-deep); }

/* On phones the plate goes ABOVE the key, because the key's buttons drive the
   plate — controls below an off-screen figure look broken when you tap them. */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__title { order: 1; }
  .hero .figwell { order: 2; }
  .hero__meta { order: 3; }
}
.hero__title { margin: 0; }
@media (min-width: 901px) {
  .hero__grid { grid-template-areas: 'title fig' 'meta fig'; grid-template-rows: auto 1fr; }
  .hero__title { grid-area: title; }
  .hero__meta { grid-area: meta; }
  .hero .figwell { grid-area: fig; }
}

/* ==========================================================================
   THE IMPRINT — the single primary action
   ========================================================================== */

.imprint {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  gap: 0;
  text-decoration: none;
  border: 0;
  transition: transform var(--dur-ui) var(--ease-plate);
}
.imprint__lbl {
  background: var(--berry-ink); color: var(--plate-stock);
  padding: 17px 20px;
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.imprint__num {
  background: var(--berry-deep); color: var(--plate-stock);
  padding: 15px 22px;
  font-family: var(--f-display); font-size: 1.42rem; line-height: 1.25;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.imprint:hover .imprint__lbl { background: var(--berry-deep); color: var(--lime-bright); }
.imprint:hover .imprint__num { background: var(--berry-black); color: var(--lime-bright); }
.band .imprint__lbl { background: var(--lime-bright); color: var(--berry-black); }
.band .imprint__num { background: var(--plate-stock); color: var(--berry-black); }
.band .imprint:hover .imprint__lbl { background: var(--plate-stock); color: var(--berry-black); }
.band .imprint:hover .imprint__num { background: var(--lime-bright); color: var(--berry-black); }

/* a real sentence, so it is not shouted in tracked caps */
.imprint__note {
  display: block; margin-top: 13px; max-width: 44ch;
  font-size: 0.9375rem; line-height: 1.5;
  color: var(--ink-muted);
}
.band .imprint__note { color: rgba(227,230,233,.78); }

/* secondary: the plate button */
.pbtn {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--berry-ink);
  color: var(--berry-deep);
  padding: 14px 22px;
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.pbtn:hover { background: var(--berry-ink); color: var(--plate-stock); }
.band .pbtn { border-color: var(--lime-bright); color: var(--lime-bright); }
.band .pbtn:hover { background: var(--lime-bright); color: var(--berry-black); }

/* ==========================================================================
   THRESHOLD BANDS + SECTIONS
   ========================================================================== */

.band {
  background: var(--berry-black);
  color: var(--plate-stock);
  padding: clamp(48px, 7vw, 104px) 0;
  position: relative;
  overflow: hidden;
}
/* a contour set, pulled in the second ink, running off the edge of the band */
.band__contours {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .30;
}
.band > .plate { position: relative; }
.band p { color: rgba(227,230,233,.9); }
.band a { color: var(--lime-bright); }

section { position: relative; }
/* More space above a section than beneath it — the same rule the type follows,
   applied at page scale so the rhythm is one system and not two. */
.sect { padding: clamp(56px, 8vw, 128px) 0 clamp(36px, 5vw, 80px); }
.sect--tight { padding: clamp(32px, 4.5vw, 64px) 0 clamp(20px, 3vw, 40px); }
.sect + .sect { padding-top: clamp(28px, 4vw, 64px); }
.band + .sect, .sect + .band { padding-top: clamp(56px, 8vw, 128px); }

.rule { height: 1px; background: var(--plate-rule); border: 0; margin: 0; }

/* two-column reading spread */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.6vw, 72px);
  align-items: start;
}
.spread--sidebar { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.spread--figleft { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
/* minmax(0,…) not 1fr: a bare 1fr track floors at the item's min-content
   width, which lets a wide figure push the whole document sideways. */
@media (max-width: 900px) {
  .spread, .spread--sidebar, .spread--figleft { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--s-lg); }
.stack--lg > * + * { margin-top: var(--s-xl); }

/* heading gets more air above than below */
.sect h2, .sect h3 { margin-top: 0; }
h2 + p, h2 + .stack, h3 + p { margin-top: var(--s-lg); }

/* ==========================================================================
   PANELS / PLATE FIGURES
   ========================================================================== */

.panel {
  position: relative;
  background: var(--plate-field);
  border: 1px solid var(--plate-rule);
  padding: clamp(20px, 2.8vw, 36px);
}
.panel--ink {
  background: var(--berry-black);
  border-color: rgba(183,204,60,.3);
  color: var(--plate-stock);
}
.panel--ink .title, .panel--ink .headline { color: var(--plate-stock); }
.panel--ink p { color: rgba(227,230,233,.9); }

/* the indication list — lime is a field here, never a word */
.marks { list-style: none; margin: 0; padding: 0; }
.marks li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-top: 1px solid var(--plate-rule);
}
.marks li:last-child { border-bottom: 1px solid var(--plate-rule); }
.marks li::before {
  content: ''; position: absolute; left: 0; top: 21px;
  width: 18px; height: 8px;
  background: var(--lime-ink);
  /* a contour band terminus, not a bullet */
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}
.marks li::after {
  content: ''; position: absolute; left: 0; top: 21px;
  width: 18px; height: 8px;
  border: 1px solid var(--berry-ink);
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
  transform: translate(2px, -2px);
}
.panel--ink .marks li,
.band .marks li { border-color: rgba(227,230,233,.24); }
.band .marks li::after { border-color: var(--lime-bright); }

/* a plain rule-separated list, no lime */
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li {
  padding: 12px 0;
  border-top: 1px solid var(--plate-rule);
  display: flex; align-items: baseline; gap: var(--s-md);
}
.plainlist li:last-child { border-bottom: 1px solid var(--plate-rule); }
.plainlist .n {
  font: 500 0.75rem/1.6 var(--f-label);
  color: var(--berry-ink); font-variant-numeric: tabular-nums;
  min-width: 24px;
}
.band .plainlist li { border-color: rgba(227,230,233,.24); }
.band .plainlist .n { color: var(--lime-bright); }

/* A figure too wide for the phone scrolls, so it must be a focusable region
   with a label and a visible cue that there is more of it off-screen. */
.scroller { position: relative; overflow-x: auto; }
.scroller:focus-visible { outline: 2px solid var(--berry-ink); outline-offset: 3px; }
.scroller::after {
  content: ''; position: absolute; inset: 0 0 0 auto; width: 40px;
  background: linear-gradient(90deg, rgba(241,243,245,0), var(--plate-field));
  pointer-events: none;
}
@media (min-width: 780px) { .scroller::after { display: none; } }
.scrollnote {
  display: none;
  margin: 0 0 10px; color: var(--ink-muted);
  font: 500 0.6875rem/1.4 var(--f-label); letter-spacing: .13em; text-transform: uppercase;
}
@media (max-width: 779px) { .scrollnote { display: block; } }

/* ==========================================================================
   CONDITION ATLAS (Παθήσεις)
   ========================================================================== */

/* One plate, six numbered sites, the condition names as its key beside it —
   the wall-chart convention, instead of the same foot redrawn six times. */
.atlasplate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .atlasplate { grid-template-columns: minmax(0, 1fr); } }
.atlasplate__fig { position: relative; }
.atlasplate svg { width: 100%; height: auto; display: block; }

.atlaskey { list-style: none; margin: 0; padding: 0; }
.atlaskey li { position: relative; border-top: 1px solid var(--plate-rule); }
.atlaskey li:last-child { border-bottom: 1px solid var(--plate-rule); }
.atlaskey button {
  appearance: none; background: none; border: 0; margin: 0; border-radius: 0;
  text-align: left; width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-md);
  align-items: baseline; padding: 17px 12px 17px 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--dur-ui) var(--ease-plate);
}
.atlaskey button:hover, .atlaskey li[data-on] button { background: var(--plate-field); }
.atlaskey button:focus-visible { outline: 2px solid var(--berry-ink); outline-offset: -2px; }
.atlaskey .n {
  font: 500 0.9375rem/1.4 var(--f-label); color: var(--berry-ink);
  font-variant-numeric: tabular-nums;
}
.atlaskey .t { font-weight: 500; }
.atlaskey li[data-on] .t { font-weight: 700; }
.atlaskey li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--lime-bright); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-plate);
}
.atlaskey li[data-on]::after { transform: scaleX(1); }

/* Every site is drawn at full ink by default — that is what the plate is, and
   it is what a visitor without JavaScript must get. Holding the other five
   back only happens while a key row is actually being read. */
.atlasplate .site { fill: var(--lime-ink); transition: fill var(--dur-ui) var(--ease-plate); }
/* opacity itself is driven inline by plate.js — see the note there */
.atlasplate .sitegroup { transition: opacity var(--dur-ui) var(--ease-plate); }
.atlasplate .sitegroup.is-on .site { fill: var(--lime-bright); }

/* Six figures, so the grid divides them evenly at every width — 3x2, 2x3,
   1x6. auto-fit would leave an orphan row of dead plate. */
.atlas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--plate-rule);
  border: 1px solid var(--plate-rule);
}
@media (max-width: 900px) { .atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .atlas { grid-template-columns: 1fr; } }
.atlas > figure {
  margin: 0; padding: clamp(18px, 2.2vw, 28px);
  background: var(--plate-field);
  display: flex; flex-direction: column; gap: var(--s-md);
  transition: background var(--dur-ui) var(--ease-plate);
}
.atlas > figure:hover { background: #fff; }
.atlas svg { width: 100%; height: auto; display: block; }
.atlas figcaption { display: flex; flex-direction: column; gap: 5px; }
.atlas .fignum {
  font: 500 0.6875rem/1.2 var(--f-label);
  letter-spacing: .16em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.atlas .signame { font-weight: 700; font-size: 1.0625rem; line-height: 1.28; }

/* the affected site is the only thing in the second ink */
.atlas .site { fill: var(--lime-ink); }
.atlas figure:hover .site { fill: var(--lime-bright); }

/* ==========================================================================
   REVIEWS — real Google reviews, written in at build time (see tools/)
   Treated as specimens mounted on the plate: each one a ruled card with a
   stipple-filled rating, in the same two inks. Never a rounded testimonial
   bubble with a drop shadow.
   ========================================================================== */

/* THE SPECIMEN RAIL. Reviews slide on a native CSS scroll-snap track, so the
   sliding is real scrolling: it works with a trackpad, a touch swipe, the
   keyboard, and with JavaScript switched off entirely. The arrows and the
   position counter are enhancement on top of that, never the mechanism. */
.reviewrail { position: relative; }

.reviewtrack {
  display: flex;
  /* natural card heights: stretching every card to the longest review left
     short ones with a third of their box empty */
  /* equal-height cards: the caption then sits on one baseline across the
     whole rail, which is what makes them read as a mounted set */
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* dividers are per-card borders, not a filled backdrop — with ragged card
     heights a backdrop would show as grey blocks under the shorter ones */
  background: var(--plate-field);
  border: 1px solid var(--plate-rule);
  /* the scrollbar is replaced by the rule + counter below it */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.reviewtrack::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .reviewtrack { scroll-behavior: auto; } }

.review {
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 430px);
  scroll-snap-align: start;
  background: var(--plate-field);
  border-right: 1px solid var(--plate-rule);
  padding: clamp(22px, 3vw, 34px);
  display: flex; flex-direction: column; gap: var(--s-md);
  margin: 0;
  /* each card is its own specimen: the rule runs its full height */
  align-self: stretch;
}
.review:last-child { border-right: 0; }
@media (min-width: 700px)  { .review { width: 400px; } }
@media (min-width: 1100px) { .review { width: 430px; } }

/* the rail's own controls, drawn as plate buttons */
.railbar {
  display: flex; align-items: center; gap: var(--s-md);
  margin-top: var(--s-md);
}
.railbtn {
  appearance: none; border: 1px solid var(--berry-ink); background: none;
  border-radius: 0; cursor: pointer;
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  color: var(--berry-deep);
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate);
}
.railbtn:hover:not(:disabled) { background: var(--berry-ink); color: var(--plate-stock); }
.railbtn:focus-visible { outline: 2px solid var(--berry-ink); outline-offset: 3px; }
.railbtn:disabled { opacity: .3; cursor: default; border-color: var(--plate-rule); }
.railbtn svg { width: 17px; height: 17px; display: block; }

/* a ruled progress bar, not a row of dots */
.railprog { flex: 1; height: 3px; background: var(--plate-rule); position: relative; min-width: 40px; }
.railprog span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--berry-ink);
  transition: width var(--dur-ui) var(--ease-plate), left var(--dur-ui) var(--ease-plate);
}
.railcount {
  font: 500 0.6875rem/1 var(--f-label); letter-spacing: .14em;
  color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: none;
}
/* with JS off there is nothing to drive the arrows, so hide them and let the
   track scroll natively */
.railbar { display: none; }
.js .railbar { display: flex; }
.js .reviewtrack { scrollbar-width: none; }
:root:not(.js) .reviewtrack { scrollbar-width: thin; }
.review__rating { display: flex; align-items: center; gap: 8px; }
.review__stars { display: block; flex: none; }
.review__stars .st-on { fill: var(--berry-ink); }
.review__stars .st-off { fill: none; stroke: var(--plate-rule); stroke-width: 1.4; }
.review__score {
  font: 500 0.6875rem/1 var(--f-label);
  letter-spacing: .14em; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.review__text {
  margin: 0; max-width: none;
  font-size: 1rem; line-height: 1.6;
}
.review__cite {
  margin-top: auto; padding-top: var(--s-md);
  border-top: 1px solid var(--plate-rule);
  display: flex; justify-content: space-between; gap: var(--s-sm);
  align-items: baseline; flex-wrap: wrap;
  font-style: normal;
}
.review__who { font-weight: 700; font-size: 0.9375rem; }
.review__when {
  font: 500 0.625rem/1.4 var(--f-label);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted);
}

/* the aggregate, set as an imprint so it reads as a stamped figure */
.ratingblock { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; }
.ratingblock__num {
  font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1; color: var(--berry-deep); font-variant-numeric: tabular-nums;
}
.ratingblock__meta { display: flex; flex-direction: column; gap: 7px; }

/* Google's attribution is required by their terms when showing their reviews */
.review-attrib {
  margin-top: var(--s-md);
  font: 500 0.625rem/1.5 var(--f-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.band .review-attrib { color: rgba(227,230,233,.6); }

/* ==========================================================================
   CONTACT / ROUTE PLATE
   ========================================================================== */

.contactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--plate-rule);
  border: 1px solid var(--plate-rule);
}
.contactgrid > div {
  background: var(--plate-field);
  padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 9px;
}
.contactgrid .lbl { color: var(--ink-muted); }
.contactgrid a { color: var(--berry-deep); text-decoration: none; border-bottom: 1px solid var(--berry-ink); }
.contactgrid a:hover { background: var(--berry-ink); color: var(--plate-stock); border-bottom-color: transparent; }
.contactgrid .big {
  font-family: var(--f-display); font-size: 1.6rem; line-height: 1.2;
  color: var(--berry-deep); font-variant-numeric: tabular-nums;
}

.routes { list-style: none; margin: 0; padding: 0; }
.routes > li { border-top: 1px solid var(--plate-rule); padding: var(--s-xl) 0 var(--s-lg); }
.routes > li:last-child { border-bottom: 1px solid var(--plate-rule); }
.routes h2, .routes h3 { margin: 0 0 var(--s-sm); }
/* the route headings are a rank below a section headline — a class, not an
   inline font-size on every one of them */
.headline--route { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.routes .marker {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 7px;
  background: var(--berry-ink); color: var(--plate-stock);
  font: 500 0.6875rem/1 var(--f-label); letter-spacing: .1em;
  margin-right: 10px; vertical-align: 2px;
}

.oasa { display: inline-flex; align-items: baseline; gap: 8px; word-break: break-all; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--berry-black);
  color: rgba(227,230,233,.82);
  padding: clamp(40px, 5vw, 72px) 0 var(--s-xl);
  border-top: 3px solid var(--lime-bright);
}
.footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-xl);
}
.footer a { color: var(--plate-stock); text-decoration: none; }
.footer a:hover { color: var(--lime-bright); text-decoration: underline; text-underline-offset: 4px; }
.footer .lbl { color: var(--lime-bright); display: block; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 9px; }
.footer__base {
  margin-top: var(--s-xl); padding-top: var(--s-md);
  border-top: 1px solid rgba(227,230,233,.2);
  display: flex; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap;
  font: 500 0.6875rem/1.6 var(--f-label); letter-spacing: .13em; text-transform: uppercase;
}

/* ==========================================================================
   COOKIE PLATE
   ========================================================================== */

.cookie {
  position: fixed; z-index: 150; inset: auto var(--gutter) var(--gutter) auto;
  width: min(430px, calc(100vw - var(--gutter) * 2));
  background: var(--berry-black); color: var(--plate-stock);
  border: 1px solid var(--lime-bright);
  padding: var(--s-lg);
}
.cookie[hidden] { display: none; }
.cookie .title { color: var(--plate-stock); margin-bottom: 10px; }
.cookie p { font-size: 0.875rem; line-height: 1.55; color: rgba(227,230,233,.82); margin-bottom: var(--s-md); max-width: none; }
.cookie a { color: var(--lime-bright); }
.cookie__acts { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.cookie button {
  cursor: pointer; background: none; border: 1px solid rgba(227,230,233,.42);
  color: var(--plate-stock); padding: 11px 15px;
  font: 500 0.625rem/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase;
  transition: background var(--dur-ui) var(--ease-plate), color var(--dur-ui) var(--ease-plate), border-color var(--dur-ui) var(--ease-plate);
}
.cookie button:hover { border-color: var(--lime-bright); color: var(--lime-bright); }
.cookie button.is-primary { background: var(--lime-bright); border-color: var(--lime-bright); color: var(--berry-black); }
.cookie button.is-primary:hover { background: var(--plate-stock); border-color: var(--plate-stock); color: var(--berry-black); }

/* ==========================================================================
   UTILITY
   ========================================================================== */

.vh {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mono-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .lp-layer[data-on='0'] { opacity: 1; transform: none; }
}

@media print {
  .masthead, .cookie, .band__contours { display: none; }
  body { background: #fff; }
}