@import url("assets/fonts/fonts.css");
@import url("assets/fonts/fonts-el.css");
/* Clean Corfu — built on opsis.
   Layout system: the page is measured. A ruler spine runs the left edge,
   sections are distances, and section markers reuse the mark's own geometry. */
:root {
  --ink:      #0A1E3F;
  --ink-deep: #061530;
  --ink-line: #1C3764;
  --paper:    #FAF8F3;
  --paper-2:  #EFEBE2;
  --signal:   #FFE03D;
  --signal-d: #E0BE1F;
  --link:     #2D7FF0;

  --on-ink:     #B6C7DD;
  --on-paper:   #46556E;
  --paper-line: #DCD6C9;

  --disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 88rem;
  --rail: 7rem;
}

/* Greek pages: Bricolage and Public Sans have no Greek subset, so the Greek
   site uses Commissioner and Inter, which do. The wordmark is Latin in both
   languages and is unaffected. */
html[lang="el"] {
  --disp: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0; background: var(--paper); color: var(--on-paper);
  font-family: var(--text); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.d1, .d2, .d3 { font-family: var(--disp); font-weight: 800; text-transform: uppercase; margin: 0; }
.d1 { font-variation-settings:"wdth" 100; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.04em; }
.d2 { font-variation-settings:"wdth" 100; font-size: clamp(1.45rem, 2.5vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; }
.d3 { font-variation-settings:"wdth" 100; font-weight: 700; font-size: 1.02rem; line-height: 1.26; letter-spacing: -.015em; }

.hl { background: var(--signal); color: var(--ink); padding: .06em .26em;
      -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* display type runs tight; vertical padding there would touch the line above */
.d1 .hl, .d2 .hl, .d3 .hl, .d3-split .hl { padding-block: 0; }
.nb { white-space: nowrap; }

.lede { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.7; max-width: 42ch; }
.body { max-width: 42ch; }
.body p { margin: 0 0 1em; font-size: clamp(.98rem,1.1vw,1.04rem); line-height: 1.72; }
.body p:last-child { margin-bottom: 0; }
.body strong { font-weight: 600; }
.s-ink .body strong, .s-ink-deep .body strong { color: var(--paper); }
.s-paper .body strong, .s-paper2 .body strong { color: var(--ink); }

/* ---------- surfaces ---------- */
.s-ink    { background: var(--ink);    color: var(--paper); }
.s-paper  { background: var(--paper);  color: var(--ink); }
.s-paper2 { background: var(--paper-2); color: var(--ink); }
.s-signal { background: var(--signal); color: var(--ink); }
.s-ink p { color: var(--on-ink); }
.s-paper p, .s-paper2 p { color: var(--on-paper); }
.s-signal p { color: #5B4A06; }

/* ---------- the grid ----------
   Every section: measure label, headline, body — side by side, same baseline.
   Wide content spans the two content columns beneath. */
.sec { padding-block: clamp(var(--s6), 6vw, var(--s7)); }
.sec .inner { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 1000px) {
  .sec .inner {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: clamp(var(--s5), 4vw, var(--s7));
    row-gap: var(--s5);
    align-items: start;
  }
  .sec .wide { grid-column: 1 / -1; margin-top: var(--s4); }
}
/* eyebrow is a section label: own row, so headline and body share a top line */
@media (min-width: 1000px) {
  .sec .inner > .eyebrow { grid-column: 1 / -1; margin-bottom: calc(var(--s3) * -1); }
}
.sec .head .d2 { max-width: 20ch; }
.sec .head .lede { margin-top: var(--s3); }

.eyebrow {
  margin: 0 0 var(--s3);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- split: two colour columns, one edge ----------
   Full-bleed four-track grid: [edge][text][edge][text]. Because the two text
   tracks are equal fr units, the third track starts at exactly 50% — the seam
   in the gradient. So the left text lands on the page gutter like every other
   section, and the right text is inset from the seam by that same gutter. */
.split-in { display: grid; grid-template-columns: 1fr; }
.split .half { padding-block: clamp(var(--s6), 6vw, var(--s7)); padding-inline: var(--gutter); }
.split .half > p:last-child { margin-bottom: 0; max-width: 42ch; }
.split .eyebrow { margin-bottom: var(--s3); }
/* two lines in both columns, so the paragraphs start on the same y */
.split h2 { margin: 0 0 var(--s4); }
.on-signal { background: var(--signal); color: var(--ink); }
.on-signal p { color: #5B4A06; }
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink p { color: var(--on-ink); }

@media (min-width: 900px) {
  .split { background: linear-gradient(to right, var(--signal) 0 50%, var(--ink) 50% 100%); }
  .split-in {
    --edge: max(var(--gutter), (100% - var(--maxw)) / 2 + var(--gutter));
    grid-template-columns: var(--edge) 1fr var(--edge) 1fr;
  }
  .split .half { background: none; padding-inline: 0; }
  .split .half.on-signal { grid-column: 2; padding-right: var(--s5); }
  .split .half.on-ink { grid-column: 4; padding-right: var(--gutter); }
  /* two lines of headline and four of body in both columns, so they stay level */
  .split h2 { min-height: 2.28em; }
  .split .half > p:last-child { min-height: 6.4em; }
}

.d3-split { font-family: var(--disp); font-variation-settings:"wdth" 100; font-weight: 800;
            text-transform: uppercase; font-size: clamp(1.25rem, 1.9vw, 1.7rem);
            line-height: 1.14; letter-spacing: -.025em; text-wrap: pretty; }

.s-ink .eyebrow, .on-ink .eyebrow { color: var(--on-ink); }
.s-paper .eyebrow, .s-paper2 .eyebrow { color: var(--on-paper); }
.s-signal .eyebrow, .on-signal .eyebrow { color: #6B5708; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  border: 2px solid transparent; padding: 15px 26px;
  font-family: var(--text); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-signal { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn-signal:hover { background: var(--signal-d); border-color: var(--signal-d); }
.btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-line  { background: transparent; color: currentColor; border-color: currentColor; }
.s-ink .btn-line:hover { background: var(--paper); color: var(--ink); }
.s-paper .btn-line:hover, .s-paper2 .btn-line:hover { background: var(--ink); color: var(--paper); }
.btn:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }
/* buttons never take the body-link underline, wherever they sit */
a.btn, a.btn:hover { text-decoration: none; }
a.btn-paper, a.btn-signal { color: var(--ink); }

/* ---------- header ---------- */
header.site { position: sticky; top: 0; z-index: 20; background: var(--ink); color: var(--paper); }
header.site .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px var(--s3); padding-block: 14px; }
.lock { display: inline-flex; text-decoration: none; color: inherit; }
.nm { font-family: var(--disp); text-transform: lowercase; font-size: 1.35rem; line-height: 1;
      font-variation-settings:"wdth" 100; letter-spacing: -.005em;
      display: inline-block; text-decoration: none; color: inherit; }
.nm .a { font-weight: 400; opacity: .72; }
.nm .b { font-weight: 800; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--s3); }
header nav a.lnk { color: var(--paper); text-decoration: none; font-size: .84rem; }
header nav a.lnk:hover { color: var(--signal); }
@media (min-width: 640px) { header nav a.lnk { font-size: .88rem; } }
header .btn { padding: 11px 18px; font-size: .72rem; }
/* language switch: a segmented control, not two links and a dot */
.lang { display: inline-flex; margin-left: var(--s3); border: 1px solid var(--ink-line);
  font-family: var(--text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.lang > * { padding: 8px 11px; text-decoration: none; color: var(--on-ink);
  transition: background .15s ease, color .15s ease; }
.lang .on { background: var(--paper); color: var(--ink); }
.lang a:hover { background: var(--ink-line); color: var(--paper); }
.lang a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- hero: type runs to the edge ---------- */
/* the street along the foot of the hero — the site's own scale, drawn the
   same way as the terrace on the about page, at night. Nine lit windows carry
   the one yellow: somebody is in. */
.hero { padding-block: clamp(var(--s6), 8vw, 8rem) 0; }
.hero .wrap { padding-bottom: clamp(var(--s6), 6vw, var(--s7)); }
.hero-street { display: block; width: 100%; height: clamp(150px, 17vw, 300px); }
.hero .d1 { max-width: none; }
.hero .lede { margin-top: var(--s4); max-width: 44ch; }
.hero .actions { margin-top: var(--s5); }

/* ---------- trio: three items, spaced. No rules, no markers. ---------- */
.trio { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.trio h3 { margin: 0 0 var(--s3); }
.trio p { margin: 0; font-size: .98rem; max-width: 34ch; }
.trio .more { margin-top: var(--s5); }
@media (min-width: 860px) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: clamp(var(--s5), 4vw, var(--s7)); }
  .trio.four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .trio.four { grid-template-columns: repeat(4, 1fr); gap: clamp(var(--s4), 3vw, var(--s6)); }
  .trio.four p { min-height: 4.9em; }
}
/* inside a head column the three run as a stacked list beside the body text */
.head .trio, .head .trio.trio { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
.head .trio h3 { margin-bottom: 8px; }
.head .trio p { max-width: 36ch; }

/* ---------- lists ---------- */
.rows { margin-top: 0; }
.row { padding-block: var(--s4); border-top: 1px solid currentColor; display: grid; gap: var(--s2); }
@media (min-width: 760px) { .row { grid-template-columns: 3rem 1fr 1fr; gap: var(--s4); align-items: start; } }
.row:last-child { border-bottom: 1px solid currentColor; }
.row .n { font-family: var(--disp); font-variation-settings:"wdth" 96; font-weight: 800;
          font-size: .95rem; letter-spacing: .06em; opacity: .5; font-variant-numeric: tabular-nums; }
.row p { margin: 0; font-size: .98rem; }
.s-paper .row, .s-paper2 .row { border-color: var(--paper-line); }

/* ---------- bins ---------- */
.bins { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: 0; }
@media (min-width: 560px)  { .bins { grid-template-columns: repeat(2,1fr); gap: var(--s5) var(--s4); } }
@media (min-width: 1000px) {
  .bins { grid-template-columns: repeat(4,1fr); column-gap: var(--s5); }
  .bin svg { width: 104px; height: 120px; margin-bottom: var(--s4); }
  .bin .d3 { margin-bottom: 10px; }
}
/* phones: the bin sits beside its text, not above it */
.bin { margin: 0; display: grid; grid-template-columns: 62px 1fr; column-gap: var(--s3); align-items: start; }
.bin svg { width: 62px; height: 73px; grid-column: 1; grid-row: 1 / span 2; }
.bin .d3 { grid-column: 2; margin-bottom: 6px; }
.bin p { grid-column: 2; }
@media (min-width: 560px) {
  .bin { display: block; }
  .bin svg { width: 88px; height: 104px; margin-bottom: var(--s3); }
  .bin .d3 { margin-bottom: 8px; }
  .bin p { min-height: 5em; }
}
.bin p { margin: 0; font-size: .93rem; line-height: 1.65; }
.bin strong { color: var(--ink); font-weight: 600; }
.bins-note { margin: var(--s6) 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.7; }
.bin-group + .bin-group { margin-top: var(--s6); }
.bins-note + .bins-note { margin-top: var(--s4); }
.group-label + .bins-note { margin-top: 0; }
.group-label { margin: 0 0 var(--s4); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-paper); }
.btn.call { margin-top: var(--s4); font-variant-numeric: tabular-nums; }
.bins-note strong { color: var(--ink); font-weight: 600; }

/* ---------- about page ---------- */
.places { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 760px) { .places { grid-template-columns: repeat(3,1fr); } }
.place { border-top: 2px solid currentColor; padding-top: var(--s3); }
.place .d3 { margin-bottom: 8px; }
.place p { margin: 0; font-size: .95rem; }
.tm-diagram { margin: var(--s5) 0 0; overflow-x: auto; }
.tm-diagram svg { width: 100%; min-width: 580px; height: auto; }
.tm-diagram figcaption { margin-top: var(--s4); max-width: 54ch;
  font-size: .95rem; line-height: 1.6; color: var(--on-paper); }
.tm-diagram .lbl { font-family: var(--text); font-size: 16px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); }
.tm-diagram .lbl-s { font-size: 13px; fill-opacity: .7; }
.backlink { display: inline-flex; align-items: center; gap: .5em; margin-bottom: var(--s4);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-ink); text-decoration: none; }
.backlink:hover { color: var(--signal); }

/* ---------- legal pages ---------- */
.prose { max-width: 62ch; }
.prose .lede { margin: 0 0 var(--s5); }
.prose h2 { margin: var(--s5) 0 var(--s2); }
.prose p { margin: 0 0 1em; font-size: clamp(.98rem,1.1vw,1.04rem); line-height: 1.72; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
footer.site { background: var(--ink-deep); color: var(--paper); }
.f-top { padding-block: clamp(var(--s6),8vw,var(--s7)) 0; display: grid; gap: var(--s6); }
@media (min-width: 880px) { .f-top { grid-template-columns: 1fr auto; gap: var(--s7); align-items: start; } }
.f-brand .nm { font-family: var(--disp); text-transform: lowercase; font-size: 1.35rem; line-height: 1;
      font-variation-settings:"wdth" 100; letter-spacing: -.005em;
      display: inline-block; text-decoration: none; color: inherit; }
.f-brand .sign { margin: var(--s3) 0 0; font-family: var(--disp); font-variation-settings:"wdth" 100;
  font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1.18; letter-spacing: -.03em;
  color: var(--paper); max-width: 15ch; }
.f-brand .parent { margin: var(--s4) 0 0; font-size: .86rem; color: #6E8099; max-width: 32ch; }
.f-brand .parent strong { color: var(--paper); font-weight: 600; }
.f-brand .parent a { color: inherit; text-decoration: underline;
  padding: .08em .3em; margin-inline: -.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration-color: var(--signal-d); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.f-brand .parent a:hover { background: var(--signal); text-decoration-color: transparent; }
.f-brand .parent a:hover strong { color: var(--ink); }
.f-cols { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 620px) { .f-cols { grid-template-columns: repeat(2,auto); gap: var(--s7); } }
.f-cols h4 { margin: 0 0 14px; font-size: .64rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #6E8099; }
.f-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.f-cols a { color: var(--paper); text-decoration: none; font-size: .93rem; }
.f-cols a:hover { color: var(--signal); }
.f-note { margin: clamp(var(--s6),8vw,var(--s7)) 0 0; max-width: 44ch; font-size: .86rem; line-height: 1.7; color: #6E8099; }
.f-note a { color: #9DAFC8; }
.f-bottom { margin-top: var(--s5); }
.f-bottom .in { border-top: 1px solid var(--ink-line); padding-block: var(--s4) var(--s6);
  display: grid; gap: var(--s3); }
@media (min-width: 720px) { .f-bottom .in { grid-template-columns: 1fr auto; align-items: center; } }
.f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: .8rem; color: #6E8099; }
.f-legal a { color: #6E8099; text-decoration: none; }
.f-legal a:hover { color: var(--signal); }
.f-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.f-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--ink-line); color: var(--paper); }
.f-social a:hover { border-color: var(--signal); color: var(--signal); }
.f-social svg { width: 17px; height: 17px; }

a.hl { color: var(--ink); text-decoration: none; }
a.hl:hover { background: var(--signal-d); }
/* body links: brand underline, yellow highlight on hover */
.body a:not(.hl):not(.btn), .trio a:not(.more), .bins-note a, .row a, .split a,
.f-note a, .prose a {
  color: inherit;
  padding: .08em .3em;
  margin-inline: -.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration: underline;
  text-decoration-color: var(--signal-d);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.body a:not(.hl):not(.btn):hover, .trio a:not(.more):hover, .bins-note a:hover, .row a:hover,
.split a:hover, .f-note a:hover, .prose a:hover {
  background: var(--signal); color: var(--ink); text-decoration-color: transparent;
}

/* standalone "read more" link */
.more {
  display: inline-flex; align-items: baseline; gap: .55em;
  margin-top: var(--s3);
  font-family: var(--text); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  padding: 8px 12px; border-bottom: 2px solid var(--signal-d);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.more:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.more:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

/* two-column spread used on the about page */
.spread { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 980px) { .spread { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; } }
.spread .d2 { max-width: 18ch; }