/* ──────────────────────────────────────────────────────────────
   Pollock design system.

   Extracted 2026-08-25 from the company-page redesign (masthead.html),
   which is now the visual basis for every page. Change it here, not in a
   template: this file is what keeps the pages consistent.

   Type   Cormorant Garamond (wordmark only) · Archivo (UI) · DM Mono (data)
   Shape  square edges everywhere; no border-radius except dots and chips
   Colour ink/paper/gold ramp below; --sage and --clay are semantic
          (active status, positive/negative figures) — do not reuse them
   ────────────────────────────────────────────────────────────── */

:root{
  --ink:#14100b; --ink-2:#3f372c; --ink-3:#6d6253; --ink-4:#8e8272;
  --paper:#fbfaf7; --card:#fff; --paper-2:#f1ece1;
  --line:#ded6c6; --line-2:#c9bfa8; --hair:rgba(20,16,11,.08);
  --gold:#a8762a; --gold-lift:#c99a45; --gold-wash:rgba(168,118,42,.10);
  --sage:#3f6b4f; --clay:#9c3f28;
  --band:#1b1710; --band-2:#2a231a; --band-line:rgba(251,250,247,.14);
  --band-txt:#f6f1e7; --band-mid:#b5a892;
  /* Inter and Roboto Mono, not Archivo and DM Mono: neither of those ships a
     single Greek glyph. On a Greek registry that meant every Greek word fell
     back to the reader's system font while the Latin ones rendered in the
     chosen face, so «Εισάγετε το email σας» was literally set in two
     typefaces. Inter and Roboto Mono both carry Greek, and Inter is what
     DESIGN_GUIDELINES already specified for exactly this reason. */
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,Menlo,monospace;
  --mark:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* Paper grain. Tiled inline SVG noise — no image request, nothing for a CSP to
   block, and it survives any background-colour change.

   No mix-blend-mode. It used to carry multiply, and a fixed element covering
   the whole viewport with a blend mode is the one combination the compositor
   cannot cache: a blend has to be recomputed against whatever is behind it, so
   every scroll frame re-blended the entire window instead of shifting a ready
   layer. That is what made fast scrolling feel heavy.

   Dropping it costs nothing here. z-index:-1 puts this behind all content, so
   the only thing it ever blended with was the flat --paper underneath it, and
   multiplying noise over one uniform colour is a result that can just be
   painted. Opacity is down from .55 to compensate for the near-white grains
   that multiply used to discard. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");opacity:.42}
.band{position:relative}
/* The band's surface: grain, a fine diagonal weave and a soft vignette, so it
   is a material rather than flat ink.

   All of it is one tiled image and two radial gradients on a single
   pseudo-element, and none of it blends. It used to be two elements: a
   repeating-linear-gradient drawing the weave as 1px stripes across the whole
   band, plus a second layer of noise composited with mix-blend-mode:soft-light.

   Isolating that blend was not enough, because the backdrop was never the only
   cost. An element carrying a blend mode needs its own render surface, and
   Chrome will not cache and translate that surface as it scrolls, so the band
   was re-rasterised every frame. That is why scrolling was heavy exactly while
   the masthead was expanded and fine once it had scrolled away.

   The weave is 25 diagonal strokes inside the 180x180 tile rather than a live
   gradient. 25 so they tile seamlessly: at 45 degrees a square tile repeats
   into itself, and 180/25 gives a perpendicular spacing of 5.09px, which is
   the 5px the gradient had. Layer opacity is calibrated against the old band,
   not guessed: see the measurement in the commit. */
.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.035'/%3E%3Cg stroke='%23ffffff' stroke-opacity='.02' stroke-width='1' fill='none'%3E%3Cpath d='M0 0.00L180 -180.00'/%3E%3Cpath d='M0 180.00L180 0.00'/%3E%3Cpath d='M0 7.20L180 -172.80'/%3E%3Cpath d='M0 187.20L180 7.20'/%3E%3Cpath d='M0 14.40L180 -165.60'/%3E%3Cpath d='M0 194.40L180 14.40'/%3E%3Cpath d='M0 21.60L180 -158.40'/%3E%3Cpath d='M0 201.60L180 21.60'/%3E%3Cpath d='M0 28.80L180 -151.20'/%3E%3Cpath d='M0 208.80L180 28.80'/%3E%3Cpath d='M0 36.00L180 -144.00'/%3E%3Cpath d='M0 216.00L180 36.00'/%3E%3Cpath d='M0 43.20L180 -136.80'/%3E%3Cpath d='M0 223.20L180 43.20'/%3E%3Cpath d='M0 50.40L180 -129.60'/%3E%3Cpath d='M0 230.40L180 50.40'/%3E%3Cpath d='M0 57.60L180 -122.40'/%3E%3Cpath d='M0 237.60L180 57.60'/%3E%3Cpath d='M0 64.80L180 -115.20'/%3E%3Cpath d='M0 244.80L180 64.80'/%3E%3Cpath d='M0 72.00L180 -108.00'/%3E%3Cpath d='M0 252.00L180 72.00'/%3E%3Cpath d='M0 79.20L180 -100.80'/%3E%3Cpath d='M0 259.20L180 79.20'/%3E%3Cpath d='M0 86.40L180 -93.60'/%3E%3Cpath d='M0 266.40L180 86.40'/%3E%3Cpath d='M0 93.60L180 -86.40'/%3E%3Cpath d='M0 273.60L180 93.60'/%3E%3Cpath d='M0 100.80L180 -79.20'/%3E%3Cpath d='M0 280.80L180 100.80'/%3E%3Cpath d='M0 108.00L180 -72.00'/%3E%3Cpath d='M0 288.00L180 108.00'/%3E%3Cpath d='M0 115.20L180 -64.80'/%3E%3Cpath d='M0 295.20L180 115.20'/%3E%3Cpath d='M0 122.40L180 -57.60'/%3E%3Cpath d='M0 302.40L180 122.40'/%3E%3Cpath d='M0 129.60L180 -50.40'/%3E%3Cpath d='M0 309.60L180 129.60'/%3E%3Cpath d='M0 136.80L180 -43.20'/%3E%3Cpath d='M0 316.80L180 136.80'/%3E%3Cpath d='M0 144.00L180 -36.00'/%3E%3Cpath d='M0 324.00L180 144.00'/%3E%3Cpath d='M0 151.20L180 -28.80'/%3E%3Cpath d='M0 331.20L180 151.20'/%3E%3Cpath d='M0 158.40L180 -21.60'/%3E%3Cpath d='M0 338.40L180 158.40'/%3E%3Cpath d='M0 165.60L180 -14.40'/%3E%3Cpath d='M0 345.60L180 165.60'/%3E%3Cpath d='M0 172.80L180 -7.20'/%3E%3Cpath d='M0 352.80L180 172.80'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 150% at 18% 0%,rgba(201,154,69,.10) 0%,transparent 55%),
    radial-gradient(100% 120% at 100% 100%,rgba(0,0,0,.35) 0%,transparent 60%);
  opacity:1}
.band > *{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-lift);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.main.wrap{max-width:1330px}

/* ── nav ───────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.nav-in{max-width:1180px;margin:0 auto;padding:9px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:18px}
.mark{font-family:var(--mark);font-weight:700;font-size:34px;line-height:1;
  flex:0 0 auto;margin-right:4px;letter-spacing:-.005em}
/* The wordmark is the only Cormorant on the page, so hovering it stays a
   typographic move rather than a colour swap: the mark holds still and a
   hairline draws beneath it, left to right. Same rule vocabulary the mastbar
   and the section dividers already use, so the nav gains no new idea.

   currentColor, so it works in the nav on paper and in the footer on the
   band without either being named. Offset instead of padded: a rule inside
   the box would change the mark's height and shift the whole nav row.
   Only the anchors: `.mark` is also a timeline marker on the company page. */
a.mark{position:relative;display:inline-block}
a.mark::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
a.mark:hover::after,a.mark:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){ a.mark::after{transition-duration:.01ms} }
/* Condensed masthead: sits directly under the page header, in the band's own
   colour, so it reads as the masthead compressing rather than the nav growing. */
.mastbar{position:fixed;left:0;right:0;top:calc(var(--navh,52px) - 1px);z-index:45;
  background:var(--band);color:var(--band-txt);border-bottom:1px solid rgba(0,0,0,.25);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .2s ease,opacity .2s ease}
.mastbar.on{transform:translateY(0);opacity:1;pointer-events:auto}
.mastbar-in{max-width:1180px;margin:0 auto;padding:13px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:14px}
.mb-pip{width:7px;height:7px;border-radius:50%;background:#8fd0a4;flex:0 0 auto}
.mb-pip.off{background:var(--band-mid)}
.mb-nm{font-size:17px;font-weight:700;letter-spacing:-.018em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.mb-afm{font-family:var(--mono);font-size:12px;color:var(--band-mid);flex:0 0 auto}
.mb-fig{margin-left:auto;display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.mb-fig b{font-size:12px;font-weight:500;color:var(--band-txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.mb-fig span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--band-mid);flex:0 0 auto}
.mb-fig{min-width:0}
@media(max-width:820px){ .mb-afm{display:none} }
@media(max-width:560px){ .mb-fig{display:none} .mark{font-size:28px} .mb-nm{font-size:15px} }
.find{position:relative;flex:1;max-width:480px}
/* The search is the single most-used control on this page — 54% of clicks are
   "show me another company" — so it reads as a real input rather than chrome. */
.find-box{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;
  background:var(--card);border:1px solid var(--line-2);border-radius:2px;
  box-shadow:0 1px 0 rgba(20,16,11,.04);
  transition:border-color .16s,box-shadow .16s}
.find-box:hover{border-color:var(--ink-4)}
/* One pulse on load, not a repeating flash: enough to catch the eye without
   reading as an alert. */
.find-box{animation:findPulse 2.2s ease-out .6s 1}
@keyframes findPulse{
  0%{box-shadow:0 0 0 0 rgba(168,118,42,.30)}
  55%{box-shadow:0 0 0 7px rgba(168,118,42,0)}
  100%{box-shadow:0 1px 0 rgba(20,16,11,.04)}}
.find-cursor{display:inline-block;width:1px;height:13px;background:var(--gold);
  vertical-align:-2px;animation:findBlink 1.1s steps(2,start) infinite}
@keyframes findBlink{to{visibility:hidden}}
.find-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.find-box svg{width:15px;height:15px;stroke:var(--gold);flex:0 0 auto}
.find-in{flex:1;min-width:0;border:0;background:none;outline:0;font-family:var(--ui);
  font-size:13.5px;color:var(--ink)}
.find-in::placeholder{color:var(--ink-3)}
.find-kbd{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);
  border:1px solid var(--line-2);border-radius:3px;padding:2px 6px;line-height:1;
  background:var(--paper-2)}
.find-box:focus-within .find-kbd{opacity:0}
@media(max-width:720px){.find-kbd{display:none}}
/* The header was laid out for desktop only: wordmark, search, link and CTA in
   one non-wrapping row, which forced 623px of content into a 375px viewport and
   put the whole page into horizontal scroll. Below 760px the search takes its
   own line under the brand and the actions. */
@media(max-width:760px){
  .nav-in{flex-wrap:wrap;row-gap:10px;gap:12px}
  .mark{font-size:28px;margin-right:0}
  .find{order:3;flex:1 1 100%;max-width:none}
  .nav-r{gap:10px}
  .cta{padding:8px 13px;font-size:12px}
}
@media(max-width:400px){
  .nav-r .lnk{display:none}          /* the CTA carries both jobs at this width */
}
.find-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--card);
  border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(20,16,11,.16);display:none;z-index:60}
.find.open .find-menu{display:block}
.find-row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--hair)}
.find-row:last-child{border-bottom:0}
.find-row:hover,.find-row.on{background:var(--gold-wash)}
.find-nm{flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.find-mt{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px;font-weight:400}
.find-afm{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.find-none{padding:14px;font-size:12.5px;color:var(--ink-3);text-align:center}
.find-row mark{background:none;color:var(--gold);font-weight:700;padding:0}
.find-afm mark{font-weight:500}
.find-row.is-top{background:var(--paper)}
.find-row.is-top .find-nm{font-weight:600}
.find-row.is-top:hover,.find-row.is-top.on{background:var(--gold-wash)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lnk{font-size:13px;color:var(--ink-2)} .lnk:hover{color:var(--gold)}
.cta{padding:8px 15px;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600;
  transition:background .15s,color .15s} .cta:hover{background:var(--gold);color:#fff}

/* ── masthead band ─────────────────────────────────────── */
.band{background:var(--band);color:var(--band-txt);padding:clamp(22px,3.4vw,34px) 0 0;
  overflow:hidden}
/* Status, legal form and seat. Set in --band-mid it sat close enough to the
   band to be missed, which is the wrong outcome for the line that says whether
   the company is trading. Lifted to the band's own text colour held back by
   opacity, rather than by inventing a tone between the two tokens; the
   separators keep their own opacity and multiply down from there. */
.brow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--band-txt);opacity:.82}
.brow .pip{width:6px;height:6px;border-radius:50%;background:#8fd0a4}
.brow .sep{opacity:.35}
.brow .live{color:#8fd0a4}
/* Greek registry names run long: median 33 characters, 90th percentile 69, and
   the longest on file is 353. At one size the masthead either wastes the space
   or fills the viewport, so the heading steps down as the name grows and is
   allowed more measure when it does. */
.co{font-family:var(--ui);font-weight:700;font-size:clamp(27px,4.2vw,46px);line-height:1.06;
  letter-spacing:-.033em;margin:11px 0 0;max-width:22ch}
.co.md{font-size:clamp(24px,3.2vw,36px);line-height:1.1;letter-spacing:-.026em;max-width:30ch}
.co.sm{font-size:clamp(21px,2.5vw,28px);line-height:1.16;letter-spacing:-.018em;max-width:40ch}
.co.xs{font-size:clamp(19px,2vw,23px);line-height:1.22;letter-spacing:-.012em;max-width:52ch}
/* The trading name. For 38% of companies this is the name a reader recognises,
   so it sits directly under the legal one rather than in a field further down. */
.co-dt{margin-top:7px;font-family:var(--ui);font-size:clamp(14px,1.5vw,17px);
  font-weight:600;color:var(--band-txt);letter-spacing:-.01em}
.co-dt span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-mid);margin-right:9px;font-weight:400}
/* The Latin name takes the same label treatment as the trading name above it,
   for the same reason: unlabelled, a third rendering of the company's name is
   just the name written again. */
.co-en{font-size:12.5px;color:var(--band-mid);margin-top:7px;letter-spacing:.02em}
.co-en::before{content:"λατ.";font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--band-mid);
  opacity:.75;margin-right:9px;vertical-align:.08em}
.idbar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 28px;margin-top:20px;
  padding:15px 0 0;border-top:1px solid var(--band-line)}
.idb{padding-bottom:14px;min-width:0}
/* The address takes what is left of the row rather than a fixed 340px, which
   was narrow enough to wrap «Π.Ε.Ο. ΘΕΣΣΑΛΟΝΙΚΗΣ ΚΑΤΕΡΙΝΗΣ 72 ΧΛΜ» onto a
   second line and leave the row a different height on every company. */
.idb-wide{flex:1 1 240px;max-width:none}
.idb-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--band-mid);opacity:.8}
.idb-v{font-family:var(--mono);font-size:14px;margin-top:4px;color:var(--band-txt)}
/* Anything that is a word rather than a number: the legal form and the seat.
   Mono is for identifiers and codes, and setting a street name in it made the
   row look like five identifiers of which three happened to contain letters. */
.idb-v.txt{font-family:var(--ui);font-size:13.5px;color:var(--band-txt);opacity:.92}

/* The two numbers a reader copies elsewhere, and the only two that identify
   the company. Larger and set solid; the descriptive cells beside them step
   down. Structure, so the row stops reading as one flat list of five. */
.idb-id .idb-v{font-size:17px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.idb-id .idb-k{opacity:1;color:var(--band-mid)}
.idb:not(.idb-id) .idb-v{font-size:13px;opacity:.88}

/* The rule that separates the two groups. Its own flex item rather than a
   border on a neighbour, so it survives the row wrapping at narrow widths. */
.idb-div{align-self:stretch;width:1px;margin:1px 6px 14px;background:var(--band-line);
  flex:0 0 auto}
@media(max-width:760px){ .idb-div{display:none} }
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  border-top:1px solid var(--band-line);margin-top:2px}
.kpi{padding:18px 24px 21px;border-right:1px solid var(--band-line)}
.kpi:first-child{padding-left:0}
.kpi:last-child{border-right:0}
.kpi-v{font-family:var(--ui);font-weight:600;font-size:clamp(21px,2.6vw,27px);line-height:1.1;
  letter-spacing:-.026em;font-variant-numeric:tabular-nums}
.kpi-v.gold{color:var(--gold-lift)} .kpi-v.pos{color:#8fd0a4} .kpi-v.neg{color:#e08a6f}
.kpi-k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--band-mid);margin-top:9px;line-height:1.35}
.kpi-s{font-size:11px;color:var(--band-mid);margin-top:5px;opacity:.8;line-height:1.35}
/* A figure that is also a way down the page (the network count, to #diktyo).
   It keeps the tile's own colours; only the last line says it goes somewhere. */
a.kpi-link{display:block;color:inherit;text-decoration:none}
.kpi-go{font-size:11.5px;color:var(--gold-lift);margin-top:8px;line-height:1.35}
a.kpi-link:hover .kpi-go,a.kpi-link:focus-visible .kpi-go{text-decoration:underline;text-underline-offset:3px}

/* ── content ───────────────────────────────────────────── */
/* A quiet index down the left margin: markers only until you approach it,
   labels on hover. Hidden wherever there isn't spare gutter. */
/* The index is a column of the page, not an overlay: it sits in the grid and
   sticks within its own track while the content scrolls beside it. */
.main{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1080px){
  .main{grid-template-columns:196px minmax(0,1fr);gap:clamp(28px,3.4vw,52px)}
}
.mcol{min-width:0}

.sidenav{display:none;flex-direction:column;gap:2px;align-self:start;
  position:sticky;top:calc(var(--navh,52px) + var(--barh,50px) + 20px)}
@media(min-width:1080px){.sidenav{display:flex}}
.sidenav-k{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-4);padding:0 0 10px 12px;margin-bottom:5px;border-bottom:1px solid var(--line)}
.sidenav a{display:flex;align-items:center;padding:8px 10px 8px 12px;
  font-size:13px;color:var(--ink-3);border-left:2px solid transparent;
  transition:color .16s,border-color .16s,background .16s}
.sidenav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenav a:hover{color:var(--ink);background:var(--paper-2)}
.sidenav a.on{color:var(--ink);font-weight:600;border-left-color:var(--gold);
  background:var(--gold-wash)}
/* vertical only — a padding shorthand here resets the left padding that
   makes room for the section index */
.main{padding-top:clamp(26px,4vw,42px);padding-bottom:60px}
/* Experiment, toggled with ?boxed=1 on staging: each section as its own object
   on the paper rather than a run of type. Delete this block and the body class
   to revert; nothing else depends on it. */
/* Halfway between --paper and --paper-2. The cards are #fff and plain --paper
   is only 2% off that, so they read flat; --paper-2 separates them but weighs
   the page down. This keeps the lift without the tan. */
body.boxed{background-color:#f6f3ec}
body.boxed .blk{background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,16,11,.04);
  padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,26px) clamp(22px,2.8vw,30px)}
body.boxed .blk + .blk{margin-top:clamp(13px,1.7vw,20px)}
/* Inside a card the title needs less shouting than it does on open paper. */
body.boxed .blk-t{font-size:clamp(17px,1.8vw,20px)}
body.boxed .blk-hd{border-bottom-width:1px;border-bottom-color:var(--line-2);
  margin:calc(-1 * clamp(6px,.8vw,9px)) 0 clamp(15px,2vw,19px)}
/* Full-bleed children reach the card edge instead of floating inside it. */
body.boxed .graph{margin-left:calc(-1 * clamp(18px,2.4vw,26px));
  margin-right:calc(-1 * clamp(18px,2.4vw,26px));border-left:0;border-right:0}
/* The registries block is already a dark object; wrapping it in a white card
   just puts a box around a box. It IS the section here. */
body.boxed #mitroa{background:transparent;border:0;box-shadow:none;padding:0}
body.boxed #mitroa .blk-hd{margin-top:0}
body.boxed .up-banner{box-shadow:0 1px 0 rgba(20,16,11,.04)}
body.boxed .end{margin-bottom:0}
/* The rail is a page-level index, so it stays on the ground, not on a card. */
body.boxed .sidenav{background:transparent}

/* Sections are discrete parts of a record, not a continuous page. The only
   divider used to be the rule under each title, which reads as an underline
   belonging to the heading rather than as a boundary. Three cues now: real
   space, a rule that sits in the gap, and an index numeral. */
.mcol{counter-reset:sec}
/* Separation comes from space and type, not from more rules. The page already
   has plenty of horizontal lines; adding one per boundary made none of them
   mean anything. A section announces itself by starting far from the last one
   and by carrying a title large enough to be a landmark. */
.blk + .blk{margin-top:clamp(40px,5.2vw,72px)}
.blk-t{counter-increment:sec}
.blk-t::before{content:counter(sec,decimal-leading-zero);
  font-family:var(--mono);font-size:.62em;font-weight:500;color:var(--gold);
  letter-spacing:.04em;margin-right:13px;vertical-align:.22em}
/* Anchor jumps land at y=0, which sits under the fixed header and company bar.
   scroll-margin-top reserves that space so section headings stay visible. */
.blk,#up-banner{scroll-margin-top:calc(var(--navh,52px) + var(--barh,50px) + 18px)}
/* Whole-block variant: a wash across the entire section, bled out past the
   content so it reads as the block rather than a stray panel. */
.blk.lit{animation:blkLit 1.6s ease-out}
@keyframes blkLit{
  0%,30%{background:var(--gold-wash);box-shadow:0 0 0 14px var(--gold-wash)}
  100%{background:transparent;box-shadow:0 0 0 14px transparent}}
.blk.lit .blk-hd{animation:blkLitHd 1.6s ease-out}
@keyframes blkLitHd{0%,30%{border-bottom-color:var(--gold)}100%{border-bottom-color:var(--ink)}}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .blk.lit,.blk.lit .blk-hd{animation:none}}
.blk-hd{display:flex;align-items:baseline;gap:11px;padding-bottom:10px;
  border-bottom:2px solid var(--ink);margin-bottom:16px}
.blk-t{font-family:var(--ui);font-weight:700;font-size:clamp(19px,2.1vw,23px);
  letter-spacing:-.018em;text-transform:none}
.blk-c{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
/* A section whose content already announces itself does not need a heading
   printed above it. The h2 stays in the DOM for the section index, the
   document outline and screen readers, and is taken out of the visible
   numbering so the printed sequence has no gap. */
.blk-hd.vh{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.blk-hd.vh .blk-t{counter-increment:none}
.lede{font-size:13.5px;color:var(--ink-2);margin:0 0 13px;max-width:66ch;line-height:1.5}
#rel-blk .lede{font-size:12.5px;margin-bottom:9px}
.nb{white-space:nowrap}
.lede b{font-weight:600;color:var(--ink)}

/* Dividers belong to the rows, not to the gaps between them. Built as a flex
   gap over a coloured background they land on fractional device pixels once the
   display is scaled: at 125% they alternated 2,1,1,1,2,1,1,1,2 down the list,
   which reads as random thickening. A border is part of the row's own box and
   rounds with it. */
.rows{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2)}
.row{background:var(--card);padding:12px 15px;display:flex;align-items:center;gap:13px;
  border-top:1px solid var(--line-2)}
.row:first-child{border-top:0}
a.row{transition:background .14s} a.row:hover{background:var(--gold-wash)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:0 0 auto}
.dot.off{background:var(--ink-4)}
.av{width:29px;height:29px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto}
.av svg{width:13px;height:13px;stroke:var(--ink-4)}
.av.init{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);letter-spacing:.01em}
.rb{flex:1;min-width:0}
.r-nm{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.r-mt{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}
.rb .redact + .r-mt{margin-top:8px}
.r-rl{margin-top:8px}
/* Withheld text reads as redacted, not as still-loading. A shimmering
   skeleton promises content is coming; this promises it is being kept. */
.redact{display:inline-flex;align-items:center;gap:7px;padding:2px 8px 2px 6px;
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 4px,
    var(--line) 4px,var(--line) 5px);
  border:1px solid var(--line-2);border-radius:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3)}
.redact svg{width:10px;height:10px;stroke:var(--ink-3);flex:0 0 auto}
/* Masked name: first initial plus the real letter count. Mono so the asterisks
   line up and read as redaction rather than as a typo. */
.r-plate{display:block;height:12px;border-radius:2px;
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 3px,
    var(--line-2) 3px,var(--line-2) 4.5px);border:1px solid var(--line-2)}
a.row:hover .r-plate{border-color:var(--gold)}
.r-mask{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-2);
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-rl{font-size:12.5px;color:var(--ink-2);font-weight:500}
.r-name{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.005em}
/* The participations count is the paid step in both states, so it keeps the
   lock even after the name is revealed. */
.r-lk{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.r-lk svg{width:9px;height:9px;stroke:var(--ink-4);flex:0 0 auto}
.r-lk b{display:inline;font-size:13px}
.r-x{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:right;flex:0 0 auto;line-height:1.35}
.r-x b{display:block;color:var(--gold);font-size:15px;font-weight:500}

.split{display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:1fr}
@media(min-width:860px){.split{grid-template-columns:1.1fr .9fr}}
@media(max-width:640px){.kpi{padding:15px 0 16px;border-right:0;
  border-bottom:1px solid var(--band-line)} .kpi:last-child{border-bottom:0}}
/* The statement sits on a sheet, with the other published years stacked
   underneath it — the layers are the remaining χρήσεις, not decoration. */
/* Neutral edges. The paper is white; it was the tan border and the three tan
   stack lines beneath it that made the whole block read brown. */
.sheet{background:var(--card);border:1px solid #ddd9d2;padding:15px 17px 8px;
  position:relative;margin-bottom:16px}
.sheet.stacked{box-shadow:
  0 7px 0 -1px var(--card),   0 7px 0 0 #ddd9d2,
  0 15px 0 -3px var(--card),  0 15px 0 -2px #ddd9d2,
  0 22px 0 -6px var(--card),  0 22px 0 -5px #ddd9d2,
  0 20px 18px -14px rgba(20,16,11,.18);
  margin-bottom:38px}
.sheet-hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.sheet-hd span{font-family:var(--ui);font-weight:700;font-size:clamp(19px,2.4vw,24px);
  letter-spacing:-.022em;color:var(--ink);text-transform:none}
.sheet-hd b{font-family:var(--ui);font-size:clamp(19px,2.4vw,24px);font-weight:700;
  letter-spacing:-.022em;color:var(--gold)}
.tbl{width:100%;border-collapse:collapse}
.tbl td{padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.tbl td.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tbl tr.tot td{border-top:1px solid var(--ink);border-bottom:0;font-weight:700;padding-top:12px}
.tbl tr.thead td{padding:0 0 7px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4)}
.tbl tr:not(.thead):not(.tot):hover td{background:var(--paper-2)}
.tbl td{transition:background .12s}
/* Withheld figures use the page's redaction hatch rather than a blur or a dash. */
.hbar{display:inline-block;height:11px;width:74px;border-radius:1px;vertical-align:-1px;
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 3px,
    var(--line-2) 3px,var(--line-2) 4.5px);border:1px solid var(--line-2)}
.hbar.wide{height:17px;width:130px}
/* dark-band variant: the light hatch disappears against the masthead */
.hbar.dark{height:19px;width:118px;border-color:rgba(246,241,231,.22);
  background:repeating-linear-gradient(-45deg,rgba(246,241,231,.05),rgba(246,241,231,.05) 3px,
    rgba(246,241,231,.19) 3px,rgba(246,241,231,.19) 4.5px)}
.hbar.dark.sm{width:62px}
/* Second level. A long section holds several distinct topics, and at 10px grey
   mono they read as captions rather than as structure — the section then looks
   like one wall. Given a rule, a gold tick and darker ink so the eye can find
   the seams inside a section the way it finds them between sections. */
.sub{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 11px;padding-left:22px}
.sub::before{content:"";position:absolute;top:.52em;left:0;width:14px;height:1px;
  background:var(--gold-lift)}
.sub-gap{margin-top:clamp(26px,3.4vw,38px)}
/* A sub-block's explanation sits tighter than a section's. */
.sub-lede{font-size:12.5px;margin-bottom:10px}

.more{margin-top:14px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  border:1px solid var(--gold);background:var(--gold-wash);padding:12px 15px}
.more svg{width:12px;height:12px;stroke:var(--gold);flex:0 0 auto}
.more-t{flex:1;min-width:190px;font-size:12.5px;color:var(--ink-2)}
.more-t b{font-weight:600;color:var(--ink)}
.more-a{font-size:12.5px;font-weight:600;color:var(--gold);white-space:nowrap}
.more-a:hover{text-decoration:underline}

.dv-d{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 auto;width:74px}
.dv-t{display:block;font-size:13px;font-weight:600;letter-spacing:-.005em}
.dv-o{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Named rows with a proportional bar. The unlabelled proportion strip this
   replaced looked like decoration — nobody could tell what it measured. */
.kad-wrap{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:1fr}
@media(min-width:820px){.kad-wrap{grid-template-columns:300px 1fr}}
.kad-side{display:flex;flex-direction:column;gap:16px}
.kad-body{min-width:0}
.kad-body .sub:not(:first-child){margin-top:16px}
.kad-say{margin:0 0 15px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.kad-say b{font-weight:600;color:var(--ink)}
.divs{margin:0 0 clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:9px}
.dv-row{display:grid;grid-template-columns:1fr 120px 26px;align-items:center;gap:10px}
/* Division names run long; truncating them to an ellipsis loses the word that
   distinguishes one from another. Two lines instead. */
.dv-nm{font-size:12px;color:var(--ink-2);line-height:1.32;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dv-row{align-items:center}
.dv-bar{height:11px;background:var(--paper-2);border:1px solid var(--line-2)}
.dv-bar i{display:block;height:100%;background:var(--gold)}
.dv-ct{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right}
@media(max-width:560px){.dv-row{grid-template-columns:1fr 70px 24px}}
.kad-grp{background:var(--band);color:var(--band-mid);padding:8px 15px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.kad-grp b{color:var(--band-txt);font-weight:500}
/* These lists sit ABOVE their toggle, so revealing them inserts content above
   the button. Browser scroll anchoring then compensates and lands the reader at
   the END of the list; suppressing it keeps the page still, so the list opens
   from its first row. */
/* Chrome picks the anchor from elements in the viewport, so opting out has to
   happen on the column, not on the inserted rows. */
.mcol{overflow-anchor:none}
.kad-more{margin-top:13px;width:100%;padding:9px;background:var(--card);
  border:1px solid var(--line-2);cursor:pointer;font-family:var(--ui);font-size:12.5px;
  font-weight:600;color:var(--gold);transition:background .14s}
.kad-more:hover{background:var(--gold-wash)}

/* Board timeline. One column per quarter so bars land on their real dates;
   grid columns, never percent offsets — that is what overhung last time. */
.bt{margin-top:2px}
.bt-r{display:grid;grid-template-columns:clamp(112px,21%,170px) 1fr;gap:13px;
  align-items:center;padding:6px 0;border-bottom:1px solid var(--hair)}
.bt-r:last-of-type{border-bottom:0}
.bt-nm{min-width:0}
.bt-nm .r-name{font-size:12.5px}
.bt-nm .r-mask{font-size:11.5px}
/* Departed members recede in the label column too. */
.bt-r.past .bt-nm .r-name{color:var(--ink-3);font-weight:500}
.bt-r.past .bt-nm .r-mask{color:var(--ink-4)}
.bt-tr{display:grid;grid-auto-rows:21px;position:relative;
  background:repeating-linear-gradient(to right,transparent 0,transparent calc(100%/16 - 1px),
    var(--line) calc(100%/16 - 1px),var(--line) calc(100%/16))}
/* Three weights, not two. Seniority carries the fill, so the chart reads as a
   hierarchy instead of a field of identical beige blocks. */
.bt-b{grid-row:1;display:flex;align-items:center;padding:0 7px;overflow:hidden;
  white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.03em;
  background:var(--card);border:1px solid var(--line-2);color:var(--ink-4)}
.bt-b.lead{background:rgba(20,16,11,.13);border-color:var(--ink-4);color:var(--ink);
  font-weight:500}
.bt-b.now{background:var(--gold-wash);border-color:var(--gold);color:var(--gold)}
.bt-b.now.lead{background:var(--gold);border-color:var(--gold);color:var(--card);
  box-shadow:0 1px 0 rgba(20,16,11,.12)}
/* A mandate whose end ΓΕΜΗ never recorded. Hatched and dashed, so the chart
   never claims a date it does not have. */
.bt-b.est{border-style:dashed;
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 4px,
    var(--line) 4px,var(--line) 5px)}
.bt-b.est.lead{background:repeating-linear-gradient(-45deg,rgba(20,16,11,.13),
  rgba(20,16,11,.13) 4px,rgba(20,16,11,.05) 4px,rgba(20,16,11,.05) 5px)}
/* An open right edge means the mandate has not ended. */
.bt-b.open{border-right:0;
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%);
          mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
/* On a phone a quarter is five pixels wide and a role name inside a bar is two
   letters and an ellipsis. The bars become a plain strip that shows when, and
   the role is said in words beside the name. */
.bt-role{display:none}
@media(max-width:640px){
  .bt-r{grid-template-columns:1fr;gap:5px;padding:9px 0}
  .bt-nm{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .bt-role{display:inline;font-family:var(--ui);font-size:11.5px;color:var(--ink-3);text-align:right}
  .bt-r.past .bt-role{color:var(--ink-4)}
  .bt-tr{grid-auto-rows:9px}
  .bt-b,.bt .bt-b{font-size:0;padding:0;border-radius:2px;min-width:3px}
  .bt-b.open{-webkit-mask-image:none;mask-image:none}
}
.bt-ax{display:grid;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  color:var(--ink-4);padding-top:5px}
.bt-ax span{grid-row:1;border-left:1px solid var(--line);padding-left:4px}
.bt-key{display:flex;gap:16px;align-items:center;margin-top:9px;font-family:var(--mono);
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.bt-key i{display:inline-block;width:16px;height:8px;margin-right:6px;vertical-align:-1px;
  background:var(--card);border:1px solid var(--line-2)}
.bt-key i.lead{background:rgba(20,16,11,.13);border-color:var(--ink-4)}
.bt-key i.now{background:var(--gold);border-color:var(--gold)}
.bt-key i.est{border-style:dashed;
  background:repeating-linear-gradient(-45deg,var(--paper-2),var(--paper-2) 3px,
    var(--line) 3px,var(--line) 4px)}
@media(max-width:620px){
  .bt-r{grid-template-columns:1fr;gap:4px}
  .bt-nm{padding-bottom:2px}
}

/* ── page footer ───────────────────────────────────────────
   Full-bleed and on the band, so the document closes on the surface it
   opened with. Product lives here; company content never does. */
.foot{background:var(--band);color:var(--band-txt);margin-top:clamp(44px,6vw,76px)}
/* Same texture as the masthead, but the gold radial is sized for a tall hero;
   over a short footer it reads as a stain. Weave stays, wash drops. */
.foot.band::before{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.035'/%3E%3Cg stroke='%23ffffff' stroke-opacity='.018' stroke-width='1' fill='none'%3E%3Cpath d='M0 0.00L180 -180.00'/%3E%3Cpath d='M0 180.00L180 0.00'/%3E%3Cpath d='M0 7.20L180 -172.80'/%3E%3Cpath d='M0 187.20L180 7.20'/%3E%3Cpath d='M0 14.40L180 -165.60'/%3E%3Cpath d='M0 194.40L180 14.40'/%3E%3Cpath d='M0 21.60L180 -158.40'/%3E%3Cpath d='M0 201.60L180 21.60'/%3E%3Cpath d='M0 28.80L180 -151.20'/%3E%3Cpath d='M0 208.80L180 28.80'/%3E%3Cpath d='M0 36.00L180 -144.00'/%3E%3Cpath d='M0 216.00L180 36.00'/%3E%3Cpath d='M0 43.20L180 -136.80'/%3E%3Cpath d='M0 223.20L180 43.20'/%3E%3Cpath d='M0 50.40L180 -129.60'/%3E%3Cpath d='M0 230.40L180 50.40'/%3E%3Cpath d='M0 57.60L180 -122.40'/%3E%3Cpath d='M0 237.60L180 57.60'/%3E%3Cpath d='M0 64.80L180 -115.20'/%3E%3Cpath d='M0 244.80L180 64.80'/%3E%3Cpath d='M0 72.00L180 -108.00'/%3E%3Cpath d='M0 252.00L180 72.00'/%3E%3Cpath d='M0 79.20L180 -100.80'/%3E%3Cpath d='M0 259.20L180 79.20'/%3E%3Cpath d='M0 86.40L180 -93.60'/%3E%3Cpath d='M0 266.40L180 86.40'/%3E%3Cpath d='M0 93.60L180 -86.40'/%3E%3Cpath d='M0 273.60L180 93.60'/%3E%3Cpath d='M0 100.80L180 -79.20'/%3E%3Cpath d='M0 280.80L180 100.80'/%3E%3Cpath d='M0 108.00L180 -72.00'/%3E%3Cpath d='M0 288.00L180 108.00'/%3E%3Cpath d='M0 115.20L180 -64.80'/%3E%3Cpath d='M0 295.20L180 115.20'/%3E%3Cpath d='M0 122.40L180 -57.60'/%3E%3Cpath d='M0 302.40L180 122.40'/%3E%3Cpath d='M0 129.60L180 -50.40'/%3E%3Cpath d='M0 309.60L180 129.60'/%3E%3Cpath d='M0 136.80L180 -43.20'/%3E%3Cpath d='M0 316.80L180 136.80'/%3E%3Cpath d='M0 144.00L180 -36.00'/%3E%3Cpath d='M0 324.00L180 144.00'/%3E%3Cpath d='M0 151.20L180 -28.80'/%3E%3Cpath d='M0 331.20L180 151.20'/%3E%3Cpath d='M0 158.40L180 -21.60'/%3E%3Cpath d='M0 338.40L180 158.40'/%3E%3Cpath d='M0 165.60L180 -14.40'/%3E%3Cpath d='M0 345.60L180 165.60'/%3E%3Cpath d='M0 172.80L180 -7.20'/%3E%3Cpath d='M0 352.80L180 172.80'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(140% 180% at 12% 0%,rgba(201,154,69,.035) 0%,transparent 60%),
  radial-gradient(100% 130% at 100% 100%,rgba(0,0,0,.28) 0%,transparent 62%)}
.foot-in{padding:clamp(30px,4vw,48px) clamp(18px,4vw,40px) clamp(22px,3vw,30px)}
.foot-grid{display:grid;gap:clamp(26px,4vw,58px);grid-template-columns:1fr}
@media(min-width:900px){.foot-grid{grid-template-columns:minmax(230px,290px) minmax(0,1fr)}}
.foot-mark{display:block;font-size:44px;color:var(--band-txt);line-height:.95}
.foot-tag{margin:11px 0 0;font-size:13px;color:#d8cdb9;line-height:1.55}
.foot-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--band-mid);margin:0 0 4px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.foot-k span{letter-spacing:.09em;opacity:.7}
/* A ruled index: each capability gets its own hairline, so ten of them read as
   ten things rather than one paragraph of grey. */
.caps{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,3vw,42px)}
@media(min-width:620px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Presence without size: a firmer rule, a gold tick on it to carry the accent
   into a block that is otherwise all neutrals, and descriptions lifted off the
   background enough to read as text rather than as shading. */
.cap{position:relative;padding:13px 0 12px;border-top:1px solid rgba(251,250,247,.20)}
.cap::before{content:"";position:absolute;top:-1px;left:0;width:22px;height:1px;
  background:var(--gold-lift)}
.cap-t{font-weight:600;font-size:13px;letter-spacing:-.005em;margin-bottom:3px;
  color:#fbf7ef}
.cap-d{font-size:11.5px;color:#bcae96;line-height:1.5}
.cap-cta{margin-top:20px;display:flex}
.cap-sub{display:block;margin-top:9px;font-family:var(--mono);font-size:10px;color:var(--band-mid)}
.foot-bot{margin-top:clamp(26px,3.4vw,34px);padding-top:16px;
  border-top:1px solid var(--band-line);display:flex;gap:14px 26px;flex-wrap:wrap;
  justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--band-mid)}
.foot-lnks{display:flex;gap:20px;flex-wrap:wrap}
.foot-lnks a:hover{color:var(--band-txt)}

.pip.warn{background:var(--gold-lift)}
.pip.off{background:var(--band-mid)}
.susp{color:var(--gold-lift)}
.susp-note{border-left-color:var(--gold-lift);margin:0 0 clamp(20px,2.6vw,28px)}

/* A statutory explanation standing in for data that does not exist. Given a
   gold rule and real reading size because it IS the answer on these pages, not
   a footnote to an empty card. */
.lawnote{border:1px solid var(--line-2);border-left:3px solid var(--gold);
  background:var(--card);padding:clamp(15px,2.1vw,20px) clamp(16px,2.3vw,22px);
  margin-top:13px}
.lawnote-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.lawnote p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-2);max-width:76ch}

/* Indicator families. Twenty locked rows would read as a wall; four counts say
   the same thing and stay honest, since each is what this company actually has. */
/* Inside the balance sheet, because that is what they are derived from: the
   ratios are the same document read a different way, not a separate product. */
.sheet-kpi{margin:16px -17px 0;padding:14px 17px 15px;border-top:1px solid var(--ink);
  background:var(--paper-2)}
/* This is a second heading inside the sheet, not a caption: at 9.5px mono the
   fact that the block is about indicators disappeared entirely. */
.sheet-kpi-k{margin:0 0 12px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.sheet-kpi-k b{font-family:var(--ui);font-weight:700;font-size:clamp(15px,1.6vw,17px);
  letter-spacing:-.014em;color:var(--ink)}
.sheet-kpi-k span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.kpigrid{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* A large gold numeral beside a category name reads as a score out of ten. The
   label leads and the count follows with its unit, so it can only be read as
   how many indicators exist — the page never rates anything. */
.kpig{background:var(--card);padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px}
.kpig-l{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.005em}
.kpig-n{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-variant-numeric:tabular-nums}

/* The locked sections' shared CTA. Geometry copied from .kad-more so the two
   buttons are visibly the same object; only the emphasis differs — gold rule
   and a wash instead of a grey rule on card. Square, like everything here. */
.unlock{margin-top:13px;width:100%;padding:9px;background:var(--gold-wash);
  border:1px solid var(--gold);cursor:pointer;font-family:var(--ui);font-size:12.5px;
  font-weight:600;color:var(--gold);transition:background .14s;
  display:flex;align-items:center;justify-content:center;gap:8px}
.unlock:hover{background:rgba(168,118,42,.18)}
.unlock svg{width:10px;height:10px;stroke:currentColor;flex:0 0 auto}


/* The one thing worth reading first: what this company actually does. */
.kad-main{border:1px solid var(--line-2);border-top:3px solid var(--gold);
  background:var(--paper-2);padding:17px 18px 18px;margin:0}
.kad-main-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.kad-main-c{font-family:var(--mono);font-size:12px;color:var(--gold);margin-top:9px;letter-spacing:.04em}
/* ΓΕΜΗ stores these descriptions in capitals, so at 17px/600 in a narrow column
   they shout and run to six lines. Smaller and lighter reads as a label. */
.kad-main-d{font-family:var(--ui);font-weight:500;font-size:13px;color:var(--ink-2);
  margin-top:7px;line-height:1.45;letter-spacing:.005em}
.kad{background:var(--card);padding:8px 14px;display:flex;gap:14px;align-items:baseline}
.kad.is-primary{background:var(--gold-wash)}
.kad-p{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);flex:0 0 auto}
.kad-c{font-family:var(--mono);font-size:11px;color:var(--ink-4);flex:0 0 auto;min-width:88px}
.kad-l{font-size:12px;color:var(--ink-2);line-height:1.45;letter-spacing:.004em}
.kad-p{font-family:var(--mono);font-size:9px;letter-spacing:.11em;color:var(--ink-3);
  border:1px solid var(--line-2);padding:2px 6px;align-self:center;flex:0 0 auto}

.sector{margin:0;padding:0 2px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sector-n{font-family:var(--ui);font-weight:700;font-size:26px;line-height:1;
  color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sector-t{font-size:12px;color:var(--ink-3);flex:1;min-width:170px;line-height:1.4}
.sector-t b{font-weight:600;color:var(--ink)}
/* The bed-and-gap trick shows the bed through empty tracks when the cell
   count does not fill the last row. Cells carry their own hairline instead,
   so a short final row just ends. */
.grid2{display:grid;gap:1px;background:var(--card);border:1px solid var(--line-2);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g-cell{background:var(--card);padding:12px 15px;box-shadow:0 0 0 1px var(--line-2)}
.g-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.g-v{font-size:13px;color:var(--ink-2);margin-top:6px;word-break:break-word}
.g-v.mono{font-family:var(--mono);font-size:12.5px}
.g-v a:hover{color:var(--gold)}
.masked{color:var(--ink-2);letter-spacing:.06em}
.masked-n{display:block;font-family:var(--mono);font-size:9.5px;color:var(--ink-4);
  margin-top:5px;letter-spacing:.05em}
/* Column count is pinned to divisors of 12 so the last row is never short —
   auto-fit was landing on 5 columns and leaving 3 empty cells showing through. */
/* Reference material, not a feature — quiet type, no boxes, hairline separators. */
.faq{display:flex;flex-direction:column;background:transparent;border:0}
.faq-i{background:transparent;padding:15px 0 16px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:5px}
.faq-i:first-child{padding-top:2px}
.faq-i:last-child{border-bottom:0;padding-bottom:2px}
.faq-q{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:-.005em;color:var(--ink)}
.faq-a{font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:78ch;
  padding-left:13px;border-left:2px solid var(--line)}
.faq-a b{font-weight:600;color:var(--ink-2)}
.faq-a .redact{vertical-align:-2px;margin:0 2px}
.redact.rv{min-width:62px;justify-content:center}
.rel{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  grid-template-columns:1fr}
@media(min-width:520px){.rel{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.rel{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.rel{grid-template-columns:repeat(4,1fr)}}
.rel a{background:var(--card);padding:8px 12px;display:block;transition:background .14s;min-width:0}
.rel a:hover{background:var(--gold-wash)}
.rel-n{font-size:11.5px;font-weight:600;letter-spacing:-.005em;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-m{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:3px;display:block}
.end{margin-top:34px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-4)}





/* ── anonymised connection graph ───────────────────────────────── */
.graph{position:relative;border:1px solid var(--line-2);background:var(--card);
  margin:0 0 14px;overflow:hidden}   /* <figure> defaults to margin:1em 40px */
.graph svg{display:block;width:100%;height:auto}
.gedge{stroke:var(--line-2);stroke-width:1.4;transition:stroke .18s,stroke-width .18s}
.gedge.hot{stroke:var(--gold);stroke-width:2.2}
/* While a node is focused, everything off the path recedes so the highlighted
   route is read against quiet context rather than equal-weight noise. */
.gsvg-focus .gedge{opacity:.13}
.gsvg-focus .gedge.hot{opacity:1}
.gsvg-focus .gnode{opacity:.3}
.gsvg-focus .gnode.hot,.gsvg-focus .gnode.self{opacity:1}
.gedge,.gnode{transition:opacity .16s}
.gnode{cursor:default}
.gnode.co,.gnode.pe{cursor:pointer}
.ghit{fill:transparent}
.gdisc{fill:var(--card);stroke:var(--line-2);stroke-width:1.5;transition:stroke .18s,fill .18s}
.gnode.self .gdisc{fill:var(--band);stroke:var(--band)}
.gnode.pe .gdisc{fill:var(--paper-2);stroke:var(--line-2);stroke-dasharray:3 2.4}
.gnode.co .gdisc{fill:var(--card);stroke:var(--line-2)}
.gnode.co.off .gdisc{stroke:var(--line)}
.gnode.hot .gdisc{stroke:var(--gold);stroke-width:2.2}
.gnode.pe .gdisc{}
.glab{font-family:var(--ui);font-size:9.5px;font-weight:600;fill:var(--ink-2);
  text-anchor:middle;pointer-events:none;letter-spacing:-.01em}
.gnode.self .glab{fill:var(--band-txt);font-size:10.5px;font-weight:700}
.gnode.self .glab.sm{font-size:8.6px;font-weight:600}
.gsub{font-family:var(--mono);font-size:9px;fill:var(--ink-3);text-anchor:middle;pointer-events:none}
.gname{font-family:var(--ui);font-size:12px;font-weight:600;fill:var(--ink);letter-spacing:-.01em}
.gmeta{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.04em}
.grole{font-family:var(--ui);font-size:11px;font-weight:500;fill:var(--ink-2);text-anchor:end}
.ghalo{fill:var(--card);pointer-events:none}
.gsvg-focus .gnode.hot .ghalo{fill:var(--card)}
.gplate{fill:url(#hatch);stroke:var(--line-2);stroke-width:1;pointer-events:none}
.gnode.hot .gplate{stroke:var(--gold)}
.gnode.hot .gname{fill:var(--gold)}
.gchip{cursor:pointer}
.gchip rect{fill:var(--gold-wash);stroke:var(--gold);stroke-width:1.2;transition:fill .15s}
.gchip text{font-family:var(--mono);font-size:11px;fill:var(--gold);text-anchor:middle;
  pointer-events:none;letter-spacing:.02em;font-weight:500;transition:fill .15s}
.gchip:hover rect,.gchip:focus-visible rect{fill:var(--gold)}
.gchip:hover text,.gchip:focus-visible text{fill:#fff}
.gnode.hot .gchip rect{stroke-width:1.8}
.gdot{fill:var(--card);stroke:var(--line-2);stroke-width:1.4}
.gnode.hot .gdot{stroke:var(--gold)}
.graph.frame{border-right-width:2px;border-right-color:var(--ink)}
.gstub{stroke:var(--ink-4);stroke-width:1.8;fill:none;stroke-linecap:round;
  stroke-dasharray:0.5 4;opacity:1}
.gnode.hot .gstub{stroke:var(--gold);opacity:1}
.gmore{font-family:var(--mono);font-size:9.5px;fill:var(--gold);pointer-events:none;letter-spacing:.03em}
.gnode.rest .gdisc{fill:var(--paper-2);stroke:var(--line-2);stroke-dasharray:2 2.5}
.grest{font-family:var(--ui);font-size:11.5px;font-weight:600;fill:var(--ink-3);pointer-events:none}
.gnode.self .gsub{fill:var(--band-mid)}
.gmask{pointer-events:none}
.gmask rect{fill:var(--ink-4);opacity:.5;rx:1.5}
.ginit{font-family:var(--ui);font-size:13px;font-weight:600;fill:var(--ink-2);
  text-anchor:middle;pointer-events:none}
.gnode.hot .ginit{fill:var(--gold)}
.gcap{display:flex;align-items:baseline;gap:9px 16px;flex-wrap:wrap;padding:9px 14px;
  border-top:1px solid var(--line);background:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
/* The dot is a background image on the label itself: background-position:center
   centres it on this element's own box, so no inline metric can shift it. */
.gkey{display:inline-block;white-space:nowrap;line-height:1.4;padding-left:15px;
  background-repeat:no-repeat;background-position:left center;background-size:9px 9px;
  color:var(--ink-3)}
.gkey.k-self{background-image:radial-gradient(circle at 50% 50%,var(--band) 48%,transparent 50%)}
.gkey.k-pe{background-image:radial-gradient(circle at 50% 50%,var(--ink-4) 48%,transparent 50%)}
.gkey.k-co{background-image:radial-gradient(circle at 50% 50%,var(--gold) 48%,transparent 50%)}
.gkey.k-priv{background-image:radial-gradient(circle at 50% 50%,var(--ink-3) 48%,transparent 50%)}
.gnode.co.priv .gdisc{stroke-dasharray:3 2.4}
.graph svg{max-height:none}
.gcap .push{margin-left:auto;color:var(--gold);font-weight:500}
.gcap .push:hover{text-decoration:underline}
/* 32% of traffic is ~384px wide, where a 980-unit viewBox renders company names
   at under 5px. Below 760px the picture keeps a width at which the names read
   and the reader swipes across it, rather than losing it (which is what happened
   until 2026-09-16, on the app page too, since it shares this class). */
.gswipe{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin:6px 0 0}
@media(max-width:760px){
  .graph{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .graph svg{min-width:720px}
  .graph.two svg{min-width:1140px}
  .net-note{display:block}
  .gswipe{display:inline-block}
  /* Where the page carries the compact drawing, that is the one a phone
     shows, whole, and nothing is swiped. */
  .graph.has-c{overflow-x:visible}
  .graph.has-c .g-wide{display:none}
  .graph.has-c .g-compact{display:block}
  .graph.has-c .g-compact svg{min-width:0}
  .graph.has-c .gswipe{display:none}
}
.g-compact{display:none}
.graph svg.gc .gplate{fill:url(#hatchc)}
.graph svg.gc .gmeta{font-size:11.5px;letter-spacing:0}
.graph svg.gc .ginit{font-size:15px}
.graph svg.gc .gsub{font-size:10.5px}
.graph svg.gc .glab{font-size:9px}
.graph svg.gc .gchip text{font-size:12px}
.net-note{display:none;margin:0 0 12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;color:var(--ink-3)}

/* ── Upgrade treatments (switchable via the dev panel) ─────────────
   Benefit-led rather than feature-led: what you get, not what it is. */

/* The page's one offer. Gold is the accent everywhere else on this page, so
   spending it on the button too left nothing as the action; ink is the action,
   gold stays the highlight. The list shows the actual withheld shapes rather
   than ticking off feature names. */
.up-banner{margin:0 0 clamp(22px,3vw,32px);border:1px solid var(--line-2);
  border-left:3px solid var(--ink);background:var(--card);
  box-shadow:0 1px 0 rgba(20,16,11,.04);
  padding:clamp(17px,2.3vw,23px) clamp(18px,2.4vw,24px) clamp(18px,2.4vw,24px);
  display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:840px){.up-banner{grid-template-columns:1fr auto;align-items:center}}
.up-k{margin:0 0 7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}
.up-t{font-family:var(--ui);font-weight:700;font-size:clamp(17px,1.9vw,20px);
  letter-spacing:-.018em;line-height:1.25}
/* Stacked, with the samples column-aligned: three lines of a redacted record
   rather than a wrapping row of feature names. */
.up-list{display:grid;gap:7px;margin:15px 0 0;padding:0;list-style:none}
.up-list li{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px}
.up-x{opacity:.85;min-width:0}
.up-x .hbar{display:block}
.up-list .r-mask{font-size:11px;letter-spacing:.02em;color:var(--ink-3);
  overflow:hidden;text-overflow:clip;white-space:nowrap}
.up-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.up-act{display:flex;flex-direction:column;align-items:stretch}
.up-btn{display:inline-block;padding:13px 24px;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:600;white-space:nowrap;text-align:center;
  transition:background .15s,color .15s}
.up-btn:hover{background:var(--gold);color:#fff}
.up-btn.alt{margin-top:12px;background:var(--card);color:var(--ink);border:1px solid var(--line-2);padding:11px 24px}
.up-btn.alt:hover{background:var(--card);color:var(--ink);border-color:var(--ink)}
.up-sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:8px;text-align:center}
/* On a phone the three sample lines wrap instead of pushing the page out
   to 725px: below the banner's own breakpoint the label may break, and under
   480px the sample column narrows so the words keep most of the width. */
@media(max-width:839px){.up-l{white-space:normal;line-height:1.55}}
@media(max-width:479px){.up-list li{grid-template-columns:96px 1fr;gap:10px}}


/* Διαύγεια: one readable decision sitting on a stack of implied ones. */
#dv{display:block;background:transparent;border:0;padding:0}
.deck{position:relative;padding-bottom:30px}
.deck-card{position:relative;z-index:3;background:var(--card);
  border:1px solid var(--line-2);border-left:3px solid var(--gold);padding:15px 18px 15px;
  box-shadow:
    0 8px 0 -1px var(--card),  0 8px 0 0 var(--line-2),
    0 17px 0 -3px var(--card), 0 17px 0 -2px var(--line-2),
    0 26px 0 -6px var(--card), 0 26px 0 -5px var(--line-2),
    0 30px 22px -18px rgba(20,16,11,.28)}
.deck-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.deck-d{font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.04em}
.deck-tag{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:2px 7px}
.deck-body{display:flex;align-items:center;gap:22px;margin-top:10px}
.deck-main{flex:1;min-width:0}
.deck-t{font-family:var(--ui);font-weight:600;font-size:16px;letter-spacing:-.012em}
.deck-o{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.deck-amt{flex:0 0 auto;margin-left:auto;text-align:right;padding-left:18px;
  border-left:1px solid var(--hair)}
.deck-amt-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
@media(max-width:520px){.deck-body{flex-direction:column;align-items:flex-start;gap:12px}
  .deck-amt{margin-left:0;padding-left:0;border-left:0;text-align:left}}

@media(max-width:560px){.chk{height:auto;padding:9px 15px;flex-wrap:wrap}
  .chk-dots{display:none}.chk-bar{margin-left:auto}}

/* Risk panel. Dark, full-width and instrument-like — the convention credit and
   compliance reports use (overall assessment + individual signal indicators),
   and the only dark element in the body, so it carries real weight. */
.checks{background:var(--band);color:var(--band-txt);border:0;padding:0;position:relative;
  overflow:hidden;box-shadow:0 14px 30px -18px rgba(20,16,11,.5)}
.rp-hd{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:17px 20px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--band-mid)}
/* This is the section's only title now that the printed h2 above it is gone,
   so it carries a title's weight rather than an eyebrow's. */
.rp-hd b{font-family:var(--ui);font-size:clamp(16px,1.7vw,19px);font-weight:700;
  letter-spacing:-.016em;text-transform:none;color:var(--band-txt)}
.rp-lights{display:grid;grid-template-columns:1fr;gap:1px;
  background:rgba(246,241,231,.09);margin:16px 0 0}
@media(min-width:560px){.rp-lights{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.rp-l{background:var(--band);padding:19px 14px 17px;text-align:center;position:relative}
/* An unlit indicator: solid ring, dim core, no pattern — a hatched fill at this
   size just read as stripes. */
/* A padlock per registry, closed. The shackle lifts and swings on hover, so the
   section reads as "locked, and openable" rather than as generic status lights. */
.rp-lock{display:block;width:30px;height:30px;margin:0 auto;overflow:visible}
.rp-lock .bd{fill:none;stroke:rgba(246,241,231,.42);stroke-width:1.7;
  transition:stroke .2s}
.rp-lock .sh{fill:none;stroke:rgba(246,241,231,.42);stroke-width:1.7;stroke-linecap:round;
  transform-origin:8px 11px;
  transition:transform .26s cubic-bezier(.34,1.5,.5,1), stroke .2s}
.rp-lock .kh{fill:rgba(246,241,231,.42);transition:fill .2s}
.rp-l:hover .rp-lock .bd,
.rp-l:hover .rp-lock .sh{stroke:var(--gold-lift)}
.rp-l:hover .rp-lock .kh{fill:var(--gold-lift)}
.rp-l:hover .rp-lock .sh{transform:translateY(-2.5px) rotate(-16deg)}
/* A padlock over a registry with no entry implies there is something behind it.
   97.8% of companies have none, so the lock only appears where a record exists;
   otherwise the result is stated, which is the honest answer and the useful one.
   The mark stays neutral — a dash, not a green tick — because "clean" would be
   an assessment and assessment is the reader's to make. */
.rp-l.clear .rp-n{color:var(--band-mid)}
.rp-none{display:block;width:30px;height:30px;margin:0 auto}
.rp-none line{stroke:rgba(246,241,231,.34);stroke-width:1.7;stroke-linecap:round}
.rp-s{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--band-mid);margin-top:7px}
.rp-l:not(.clear) .rp-s{color:var(--gold-lift)}

.rp-n{display:block;font-family:var(--ui);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#fbf7ef;margin-top:13px;line-height:1.35}
.rp-foot{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:15px 20px 17px;
  border-top:1px solid rgba(246,241,231,.09)}
.rp-foot svg{width:13px;height:13px;stroke:var(--gold-lift);flex:0 0 auto}
.rp-t{flex:1;min-width:200px;font-size:12.5px;color:var(--band-mid);line-height:1.45}
.rp-t b{color:var(--band-txt);font-weight:600}
.rp-a{font-size:12.5px;font-weight:600;color:var(--gold-lift);white-space:nowrap}
.rp-a:hover{text-decoration:underline}

/* Two free figures side by side, then the withheld sheet beneath them. The
   section used to be one flat table with a single number in it. */
.finhero{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);margin-bottom:18px}
@media(min-width:620px){.finhero{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.finhero{grid-template-columns:1fr 1fr 1fr}}
.fh{background:var(--card);padding:17px 19px 18px;position:relative}
.fh-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.fh-v{font-family:var(--ui);font-weight:700;font-size:clamp(24px,2.9vw,31px);line-height:1.02;
  letter-spacing:-.032em;margin-top:9px;color:var(--ink);font-variant-numeric:tabular-nums}
.fh-v.pos{color:var(--sage)}
.fh-v.neg{color:var(--clay)}
.fh-s{font-size:11.5px;color:var(--ink-3);margin-top:9px;line-height:1.45}
/* capital is free data, so it gets the accent rather than the paywalled column */
.fh-cap{border-top:3px solid var(--gold)}
.fh-cap .fh-v{color:var(--gold)}
@media(min-width:620px){.fh-cap{border-top:0;border-left:3px solid var(--gold)}}

/* Announcement history. The rail plots only the filings that mean something —
   statute amendments and board changes — so it stays legible; routine auditor
   elections would triple the points and say nothing. */
/* A timeline built from grid cells rather than percentage offsets: each year is
   one cell, the rule runs through every cell so it reads continuous, and the
   marker sits on it. Contained by construction — nothing can overhang. */
.yrs{display:grid;margin:10px 0 22px}
.yr{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:16px 0 0;min-width:0}
.yr::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;
  background:var(--line-2)}
.yr:first-child::before{left:50%}
.yr:last-child::before{right:50%}
.yr-d{position:relative;z-index:2;width:9px;height:9px;border-radius:50%;
  background:var(--card);box-shadow:0 0 0 1.5px var(--line-2);transition:.16s}
.yr.has .yr-d{width:13px;height:13px;background:var(--gold);box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--gold)}
.yr.none .yr-d{width:5px;height:5px;background:var(--line-2);box-shadow:none}
.yr:hover .yr-d{transform:scale(1.25)}
.yr-n{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:13px;letter-spacing:.03em}
.yr.has .yr-n{color:var(--ink-2);font-weight:500}
.yr-c{font-family:var(--mono);font-size:9px;color:var(--gold);margin-top:3px;min-height:11px}
.evlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2)}
.evlist li{background:var(--card);padding:10px 15px;display:flex;align-items:baseline;gap:16px}
.evlist li:hover{background:var(--paper-2)}
.ev-y{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);flex:0 0 auto;
  letter-spacing:.03em;width:82px}
.ev-t{font-family:var(--ui);font-size:13.5px;font-weight:500;color:var(--ink-2);
  line-height:1.4;letter-spacing:-.005em}
.evlist li.mark .ev-t{font-weight:600;color:var(--ink)}
.evlist li.mark .ev-y{color:var(--gold)}


@media(prefers-contrast:more){ body::before,.band::before{display:none} }
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .find-box{animation:none}
  .rp-l:hover .rp-lock .sh{transform:none}}


/* ── password fields ───────────────────────────────────────
   Shared by the auth pages and the change-password form in settings, because
   both include _password_ui.html and must look as identical as they behave.
   The mismatch rules are written against the element, not a class, so they
   outrank .form-input and .s-input wherever those are defined. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:40px}
.pw-toggle{position:absolute;top:0;right:0;width:38px;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink-4);
  transition:color .15s}
.pw-toggle:hover{color:var(--ink-2)}
.pw-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The rules go green as they are met, so the reader sees progress rather than
   a static list they have to re-read. Sage is the positive semantic colour
   used everywhere else, and each item carries a mark as well as a colour so it
   still reads when colour is not available. */
.password-requirements{margin:-4px 0 15px;font-size:11.5px;line-height:1.6;
  color:var(--ink-3)}
.password-requirements ul{margin:5px 0 0;padding:0;list-style:none}
.password-requirements li{position:relative;margin-bottom:3px;padding-left:19px;
  transition:color .16s}
.password-requirements li::before{content:"";position:absolute;left:4px;top:.52em;
  width:6px;height:6px;border:1px solid var(--line-2);border-radius:50%;
  transition:border-color .16s,background .16s}
.password-requirements li.valid{color:var(--sage)}
/* A tick, drawn rather than a glyph, so it lands on the baseline predictably. */
.password-requirements li.valid::before{left:2px;top:.28em;width:9px;height:5px;
  border:1.6px solid var(--sage);border-top:0;border-right:0;border-radius:0;
  background:none;transform:rotate(-45deg)}

/* Retyping the password wrong was only caught on submit. Said here instead, as
   soon as the two fields disagree, and only once there is something to compare. */
.field-note{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--clay)}
.field-note.ok{color:var(--sage)}
input.mismatch{border-color:var(--clay)}
input.mismatch:focus{border-color:var(--clay);box-shadow:0 0 0 3px rgba(156,63,40,.12)}


/* ── document snapshot (experiment, review servers only) ────────
   The blurred first page of the latest ΓΕΜΗ publication, set as a sheet
   of paper beside the history's lede: a hairline, a soft drop, and a
   caption in the label voice. Shown only when the page is asked for it. */
.snap{float:right;width:176px;margin:2px 0 18px 26px;position:relative}
.snap-sheet{display:block;width:100%;height:auto;border:1px solid var(--line-2);background:#fff;
  box-shadow:0 1px 2px rgba(20,16,11,.08),0 14px 28px -14px rgba(20,16,11,.45)}
.snap-cap{margin:9px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.5}
.snap-cap b{display:block;font-family:var(--ui);font-size:12px;letter-spacing:0;text-transform:none;
  font-weight:600;color:var(--ink);margin-bottom:2px}
.snap-lock{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:34px;height:34px;
  border-radius:50%;background:var(--card);border:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 8px rgba(20,16,11,.15)}
.snap-lock svg{width:14px;height:14px;stroke:var(--ink-2);fill:none;stroke-width:2}
@media (max-width:700px){.snap{float:none;width:150px;margin:0 0 18px}}

/* ── the Διαύγεια list a free account sees: four rows, tight ─────
   The outer #dv is transparent (it also holds the deck), so the list gets
   its own bordered box, and the rows lose the height the record rows carry:
   one line for the decision, one for the body, the date and the withheld
   amount on one line at the right. */
.dv-list{border:1px solid var(--line-2);background:var(--card)}
.dv-list .row{padding:8px 13px;gap:12px}
.dv-list .r-name{font-size:13px;line-height:1.3}
.dv-list .r-rl{margin-top:2px;font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.35}
.dv-list .r-x{display:flex;align-items:baseline;gap:10px;font-size:10px}
.dv-list .r-x b{display:inline;font-size:12.5px}
.dv-list .dv-amt{color:var(--ink-4)}
.dv-list .dv-amt svg{width:10px;height:10px;vertical-align:-1px}

/* ── every lock names its key ─────────────────────────────────
   On the visitor's banner each withheld item says what opens it, so a
   free account is never taken for the whole record. */
.up-key{display:inline-block;margin-left:9px;padding:2px 6px 1px;border:1px solid var(--line-2);
  border-radius:2px;letter-spacing:.1em;font-size:8.5px;color:var(--ink-3);vertical-align:1px;white-space:nowrap}
.up-key.free{border-color:var(--sage);color:var(--sage)}
.up-alt{display:block;margin-top:12px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:0}
.up-alt:hover{color:var(--gold)}
.up-alt-2{margin-top:7px;font-weight:500;color:var(--ink-3)}
a.unlock{text-decoration:none;box-sizing:border-box}