/* Ephessus v2. Foundation: tokens, type, header, footer, components.
   Frozen 2026-09-04 (idea 57). Eight lines, decided once:
   1 Framework  embedded engineering. The client's operation is the subject; Ephessus is the means.
   2 Voice      short sentences. Title is the obvious name, body is only the difference. No superlatives, no em dash.
   3 Mark       three circles and two lines (the systems graph) beside the word Ephessus in Source Serif 4.
   4 Type       Source Serif 4 weight 400 for display (72 to 96px, tracking -0.03em); Inter for text and UI; JetBrains Mono for labels.
   5 Icon       no icon set. The graph is the only symbol, drawn once, small, in the section about the firm.
   6 Colour     cool graphite for dark ground, cold off-white for light ground. Moss green only as a rare accent: a state, a chart, one glow.
   7 Image      generated, textured, tightly framed. Never a postcard. One canvas on the whole site.
   8 Motion     one easing, one duration table, transform and opacity only. Reduced motion honoured; ?motion=1 forces it, ?static=1 disables it. */

@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-Variable-latin.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../assets/fonts/SourceSerif4-Italic-latin.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Variable-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Variable-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
/* v6 (2026-09-15): every number on the site is set in Geist, a geometric sans with tabular figures; the serif stays for words */
@font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Variable-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  /* ground */
  --g0: #0b0c0e;            /* hero and stages, deepest graphite */
  --g1: #121316;            /* dark sections */
  --g2: #191b1f;            /* panels on dark */
  --g3: #22252a;            /* raised panels */
  --p0: #eef0f2;            /* cold off-white sections */
  --p1: #e2e5e9;            /* panels on light */
  /* type on dark */
  --t-hi: #eceef1;
  --t-mid: #a4a9b0;
  --t-dim: #878c94;           /* 5.79 on g0, 5.49 g1, 5.10 g2, 4.55 g3 (AA) */
  /* type on light */
  --k-hi: #15171a;
  --k-mid: #4c5158;
  --k-dim: #61676f;           /* 5.00 on p0, 4.52 on p1 (AA) */
  /* lines */
  --line-d: rgba(236, 238, 241, 0.11);
  --line-d2: rgba(236, 238, 241, 0.2);
  --line-l: rgba(21, 23, 26, 0.13);
  /* accent, rare */
  --moss: #4a6b3a;          /* on light ground only */
  --moss-lit: #8aa676;      /* on dark ground only */
  --moss-glow: rgba(138, 166, 118, 0.22);
  --amber: #d4a545;         /* state: pending, reserved */
  --red: #c4584a;           /* state: overdue */
  /* type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --numeric: 'Geist', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  /* motion: one curve, one table */
  --ez: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;          /* feedback */
  --t-state: 280ms;         /* state change */
  --t-layout: 440ms;        /* layout */
  --t-enter: 760ms;         /* entrance */
  /* layout */
  --container: 1240px;
  --gutter: 32px;
  --hd-h: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--g0); color: var(--t-hi);
  font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: rgba(138, 166, 118, 0.35); color: var(--t-hi); }
.light ::selection { background: rgba(74, 107, 58, 0.25); color: var(--k-hi); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.wide { max-width: 1400px; }

/* ---------- type scale ---------- */
.kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-dim);
}
.light .kicker { color: var(--k-dim); }
.kicker.acc { color: var(--moss-lit); }
.light .kicker.acc { color: var(--moss); }

h1, .h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.025em;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.12; letter-spacing: -0.015em;
}
.lede { font-size: 19px; line-height: 1.55; color: var(--t-mid); max-width: 38rem; }
.light .lede { color: var(--k-mid); }
.body { font-size: 16.5px; line-height: 1.6; color: var(--t-mid); max-width: 62ch; }
.light .body { color: var(--k-mid); }
.num {
  font-family: var(--numeric); font-weight: 500;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.95; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* numbers: one family, one weight, tabular figures, wherever a figure is the thing being read */
.figure { font-family: var(--numeric); font-weight: 500; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; }
.mono { font-family: var(--mono); letter-spacing: 0.08em; }
.tab { font-variant-numeric: tabular-nums; }

/* ---------- grounds ---------- */
.dark { background: var(--g1); color: var(--t-hi); }
.deep { background: var(--g0); color: var(--t-hi); }
.light { background: var(--p0); color: var(--k-hi); }
.sec { padding: 128px 0; }
.sec-tight { padding: 88px 0; }
.hr { height: 1px; background: var(--line-d); border: 0; }
.light .hr { background: var(--line-l); }

/* ---------- header ---------- */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  color: var(--t-hi);
  border-bottom: 1px solid transparent;
  transition: background var(--t-state) var(--ez), border-color var(--t-state) var(--ez);
}
.hd.on { background: rgba(11, 12, 14, 0.9); backdrop-filter: blur(10px); border-bottom-color: var(--line-d); }
.hd .container { display: flex; align-items: center; justify-content: space-between; height: var(--hd-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 21px; font-weight: 450; letter-spacing: -0.012em; white-space: nowrap; }
.brand svg { flex: 0 0 auto; }
.brand .mk-stroke { stroke: var(--t-mid); }
.brand .mk-fill { fill: var(--t-hi); }
.brand .mk-fill.acc { fill: var(--moss-lit); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-size: 14px; font-weight: 450; color: var(--t-mid); transition: color var(--t-fast) var(--ez); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--t-hi); }
.nav .sep { width: 1px; height: 16px; background: var(--line-d2); }
.nav .cta {
  color: var(--g0); background: var(--t-hi);
  border-radius: 999px; padding: 9px 18px; font-weight: 500;
  transition: background var(--t-fast) var(--ez), transform var(--t-fast) var(--ez);
}
.nav .cta:hover { background: #ffffff; color: var(--g0); box-shadow: 0 0 28px var(--moss-glow); }
.nav-toggle { display: none; }
/* language: two flags, the active one lit; English is the default, the choice is kept on the device */
.lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--line-d2); border-radius: 999px; background: transparent; cursor: pointer; }
.lang svg { width: 20px; height: 14px; border-radius: 2px; opacity: 0.38; transition: opacity var(--t-fast) var(--ez), transform var(--t-fast) var(--ez); display: block; }
.lang svg.on { opacity: 1; }
.lang:hover svg { opacity: 0.7; }
.lang:hover svg.on { opacity: 1; }
.lang .sep2 { width: 1px; height: 12px; background: var(--line-d2); }
.hd-right { display: flex; align-items: center; gap: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--t-hi); color: var(--g0);
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: background var(--t-fast) var(--ez), box-shadow var(--t-state) var(--ez), transform var(--t-fast) var(--ez);
}
.btn:hover { background: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 54px var(--moss-glow), 0 18px 44px rgba(0, 0, 0, 0.35); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 12px; height: 12px; }
.btn.big { font-size: 17px; padding: 20px 32px; }
.btn.big .sub { font-size: 12.5px; }
.btn .sub { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.62; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(11, 12, 14, 0.25); }
.btn.ghost { background: transparent; color: var(--t-hi); border-color: var(--line-d2); }
.btn.ghost:hover { background: rgba(236, 238, 241, 0.06); box-shadow: none; }
.light .btn { background: var(--k-hi); color: var(--p0); }
.light .btn:hover { background: #000; box-shadow: 0 12px 40px rgba(21, 23, 26, 0.2); }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--t-hi);
  border-bottom: 1px solid var(--line-d2); padding-bottom: 3px;
  transition: border-color var(--t-fast) var(--ez);
}
.link:hover { border-color: var(--t-hi); }
.link svg { width: 11px; height: 11px; transition: transform var(--t-fast) var(--ez); }
.link:hover svg { transform: translate(2px, -2px); }
.light .link { color: var(--k-hi); border-color: var(--line-l); }
.light .link:hover { border-color: var(--k-hi); }

/* ---------- panels (system screens) ---------- */
.panel {
  background: var(--g2); color: var(--t-hi);
  border: 1px solid var(--line-d);
  border-radius: 8px; overflow: hidden;
}
.panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-d);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim);
}
.panel-h .live { display: inline-flex; align-items: center; gap: 7px; color: var(--moss-lit); }
.panel-h .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss-lit); animation: livep 1.6s ease-in-out infinite; }
@keyframes livep { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.kv { display: grid; gap: 4px; }
.kv .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dim); }
.kv .v { font-family: var(--numeric); font-weight: 500; font-size: 24px; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- footer ---------- */
.ft { background: var(--g0); color: var(--t-mid); border-top: 1px solid var(--line-d); padding: 72px 0 40px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.ft .brand { color: var(--t-hi); margin-bottom: 18px; }
.ft-tag { font-size: 14.5px; line-height: 1.55; max-width: 28ch; color: var(--t-dim); }
.ft h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-dim); font-weight: 500; margin-bottom: 18px; }
.ft ul { list-style: none; display: grid; gap: 10px; }
.ft ul a { font-size: 14.5px; color: var(--t-mid); transition: color var(--t-fast) var(--ez); }
.ft ul a:hover { color: var(--t-hi); }
.ft-mail a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
.ft-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-d);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-dim);
}

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); }
.rv.on { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ez), transform var(--t-enter) var(--ez); transition-delay: var(--d, 0ms); }
html.static .rv, html.nomotion .rv { opacity: 1; transform: none; transition: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav a { font-size: 13.5px; }
}
@media (max-width: 960px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sec { padding: 96px 0; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .hd-right { gap: 10px; }
  .nav.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; top: var(--hd-h); left: 0; right: 0;
    background: var(--g0); border-bottom: 1px solid var(--line-d);
    padding: 12px 24px 24px; max-height: calc(100vh - var(--hd-h)); overflow: auto;
  }
  .nav.open a { padding: 12px 0; font-size: 17px; color: var(--t-hi); width: 100%; border-bottom: 1px solid var(--line-d); }
  .nav.open .sep { display: none; }
  .nav.open .cta { margin-top: 18px; border: none; text-align: center; padding: 14px 18px; border-radius: 999px; }
  .nav-toggle {
    display: block; background: none; border: 1px solid var(--line-d2); color: var(--t-hi); border-radius: 999px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 16px; min-height: 44px;
  }
  .container { padding: 0 24px; }
  :root { --gutter: 24px; }
  /* touch targets: 24px minimum, 44px where the thumb lands (WCAG 2.5.8) */
  .ft ul { gap: 0; }
  .ft ul a, .ft-mail a { display: block; padding: 11px 0; }
  .contact-mails a { padding: 11px 0; }
  .link { padding: 10px 0 12px; }
  .btn { flex-wrap: wrap; row-gap: 6px; }
  .btn svg { order: 2; }
  .btn .sub { order: 3; border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr; gap: 34px; }
  .ft { padding-top: 56px; }
  .lede { font-size: 17px; }
  .sec { padding: 80px 0; }
  h1, .h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); letter-spacing: -0.025em; }
  h2, .h2 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
}

/* ---------- reduced motion: static state wins ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion) { scroll-behavior: auto; }
  html:not(.motion) .rv { opacity: 1; transform: none; transition: none; }
  html:not(.motion) * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
html.static * { animation: none !important; transition: none !important; }