/* ==========================================================================
   Deified Media Group
   Aurelith · Phase 1 — tokens, layout, components
   Monochrome adaptation of the Dala reference. No colour by client constraint.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root{
  /* Surface + ink. Dala's two greys survive because they were already
     achromatic; both clear WCAG AA on black (7.3:1 and 11.1:1). */
  --void:#000000;
  --bone:#ffffff;
  --ash:#9a9a9a;
  --mist:#bdbdbd;
  --hair:rgba(255,255,255,.16);
  --hair-strong:rgba(255,255,255,.28);

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Scale, not weight, carries hierarchy — the Dala signature. */
  --w-light:200;
  --w-regular:400;
  --w-semi:600;

  /* Dala specifies a 113px display. Greek cannot take it here, and the cap
     is measured rather than chosen: the client's own hero line break gives
     "για να κερδίζετε", which needs 723px at 96px against 594px of column.
     Ceiling is 78px; 75px leaves headroom for font-loading variance.
     78px is still Dala's own heading-lg step, not an invented size. */
  --step-display:clamp(2.9rem,8.4vw,4.7rem);
  /* Holds 70px only because the Μέθοδος headline is broken into six short
     lines. Lengthen any line past ~13 Greek characters and this must drop. */
  --step-heading:clamp(1.8rem,5.4vw,4.4rem);
  --step-service:clamp(1.7rem,4.6vw,3.3rem);
  --step-body:1.125rem;
  --step-label:.78rem;
  --step-caption:.72rem;

  /* 6px base unit */
  --s-1:6px;   --s-2:12px;  --s-3:18px;  --s-4:24px;
  --s-5:30px;  --s-6:36px;  --s-8:60px;  --s-12:96px; --s-16:120px;

  --max:1280px;
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --radius:24px;
  --radius-pill:9999px;

  /* One easing token. No exceptions. */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* --- Reset -------------------------------------------------------------- */

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

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

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--font);
  font-size:var(--step-body);
  font-weight:var(--w-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:4px;
  border-radius:2px;
}

/* --- Typography --------------------------------------------------------- */

h1,h2,h3{margin:0;font-weight:var(--w-regular);line-height:1.06}

h1{font-size:var(--step-display);letter-spacing:-.04em}
h2{font-size:var(--step-heading);letter-spacing:-.04em}
h3{font-size:1.7rem;letter-spacing:-.018em}

/* Greek capitals carry diacritics and different sidebearings — at Dala's
   -0.04em they collide. Latin keeps the reference tracking. */
:lang(el) h1,:lang(el) h2{letter-spacing:-.022em}

/* The client's own emphasis pattern: one bold word, one italic word per
   headline. Never two of either. */
h1 b,h2 b{font-weight:var(--w-regular)}
h1 i,h2 i{font-style:italic;font-weight:var(--w-light)}

p{margin:0}

/* --- Layout primitives -------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}

.section{padding-block:clamp(4rem,10vw,7.5rem)}

/* --- Section marker (I–V) ----------------------------------------------- */

.marker{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash);
}

.marker .num{
  font-variant-numeric:tabular-nums;
  letter-spacing:.14em;
  color:var(--bone);
}

.marker .num::after{
  content:"";
  display:inline-block;
  width:var(--s-5);
  height:1px;
  background:var(--hair-strong);
  vertical-align:middle;
  margin-inline-start:var(--s-2);
}

/* --- Header ------------------------------------------------------------- */

#progress{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  height:2px;
  width:0;
  background:var(--bone);
  z-index:80;
}

header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:60;
}

.bar{
  display:flex;
  align-items:center;
  gap:1.75rem;
  height:76px;
}

/* Wordmark only. The triangle mark that used to sit here is gone — the
   figure belongs to the field, and stamping a 20px outline of it in the
   corner competed with the thing itself. No gap: there is one child now. */
.logo{
  display:flex;
  align-items:center;
  font-weight:var(--w-semi);
  font-size:.82rem;
  letter-spacing:.3em;
}

nav.main{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:1.6rem;
}

.navlink{
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.navlink:hover,.navlink:focus-visible{color:var(--bone)}
.navlink[aria-current="page"]{color:var(--bone)}

.lang{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.05em;
  color:var(--ash);
}
.lang button{
  background:none;
  border:0;
  padding:.2rem;
  cursor:pointer;
  color:inherit;
  transition:color .3s var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--bone)}

/* --- Components: buttons ------------------------------------------------ */

/* Dala's single filled pill, re-coloured. Violet is deleted; on a monochrome
   site the only "filled" state available is bone-on-void inverted. */
.pill{
  display:inline-block;
  background:var(--bone);
  color:var(--void);
  border:0;
  border-radius:var(--radius);
  padding:.85rem 1.15rem;
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .3s var(--ease);
}
.pill:hover,.pill:focus-visible{transform:scale(1.04)}

.ghost{
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.ghost:hover,.ghost:focus-visible{color:var(--bone)}

.body-lg{
  font-size:var(--step-body);
  font-weight:var(--w-light);
  color:var(--mist);
}

/* --- Reveal system ------------------------------------------------------
   Gated behind .js so the page is fully readable without scripting —
   no flash of hidden content, no blank page if the engine fails. */

/* .rise masks a line; its inner <span> is the moving part. Deliberately not
   <i> — the client uses <i> for italic emphasis inside these same headlines. */
.js .rise{display:block;overflow:hidden}
.js .rise>span{
  display:block;
  transform:translateY(112%);
  transition:transform 1.05s var(--ease);
}
.js .in .rise>span{transform:none}
.js .in .rise:nth-child(2)>span{transition-delay:.08s}
.js .in .rise:nth-child(3)>span{transition-delay:.16s}
.js .in .rise:nth-child(4)>span{transition-delay:.24s}
.js .in .rise:nth-child(5)>span{transition-delay:.32s}
.js .in .rise:nth-child(6)>span{transition-delay:.40s}

.js .fade{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.js .fade.in,.js .in .fade{opacity:1;transform:none}

/* --- I · Hero ----------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  max-width:var(--max);
  margin-inline:auto;
  padding:7.5rem var(--gutter) 4rem;
}

.hero h1{margin-block-start:1.4rem}
.hero .sub{margin-block-start:2rem;max-width:26rem}
.hero .cta{
  margin-block-start:2.4rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}

.stage{position:relative;height:min(78vh,720px)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}

.scrollcue{
  position:absolute;
  inset-block-end:1.6rem;
  inset-inline-start:var(--gutter);
  font-size:.68rem;
  font-weight:var(--w-semi);
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--ash);
}
.scrollcue::after{
  content:"";
  display:block;
  width:1px;
  height:40px;
  margin-block-start:.6rem;
  background:var(--bone);
  opacity:.35;
  transform-origin:top;
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0)}
  45%{transform:scaleY(1)}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* --- II · Ο Κανόνας ----------------------------------------------------
   Phase 1 lays this out static. Phase 3 adds the pin. */

/* Five beats need room to breathe: mess, €, clock, stars, close. Under
   ~500vh the reader is rushed through the part carrying the whole argument. */
.pin{position:relative;height:560vh}
.stick{
  position:sticky;
  inset-block-start:0;
  height:100svh;
  overflow:hidden;
}

/* Full-bleed field BEHIND the copy — not a panel beside it. */
.rule .bg{position:absolute;inset:0;z-index:0}
.rule .bg canvas{width:100%;height:100%}

/* The bottom scrim that used to live here is DELETED. It was added when the
   copy sat centred over the field; the layout has since moved to a two-column
   split twice over, and all it did was lay a 90%-opaque black gradient across
   the lower half of the viewport. That is the "black thing" between II and
   III — not a canvas swap, not a section gap, just an obsolete overlay.

   It also hid from measurement: reading canvas pixels shows a healthy field
   while a CSS layer sits on top of it. Anything that dims the page has to be
   judged on the composited result, not the canvas. */

/* Text centred, low in the frame — the shape owns the middle. */
.steps{
  position:absolute;
  inset-inline:0;
  inset-block-end:clamp(3rem,9vh,6rem);
  z-index:3;
  display:grid;
  justify-items:center;
  text-align:center;
  padding-inline:var(--gutter);
}
.step{
  grid-area:1 / 1;
  max-width:40rem;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .marker{justify-content:center}
.step h2{margin-block-start:1rem}

/* A factor named as its shape lands. Client's own words only. */
.factor .fnum{
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.24em;
  color:var(--ash);
}
.factor .fname{
  margin-block-start:.5rem;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  font-weight:var(--w-regular);
  letter-spacing:-.03em;
  line-height:1;
}
.factor .fsub{
  margin-block-start:.6rem;
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
}

/* --- factor buttons, pinned to the corners ------------------------------
   Positioned by JS at the projected vertices. A factor is a vertex, so the
   control belongs on the vertex — not in a row underneath. */
.picks{
  position:absolute;
  inset:0;
  z-index:4;
  opacity:0;
  /* visibility, not just opacity: opacity:0 and pointer-events:none leave the
     buttons in the tab order and the accessibility tree, so a keyboard user
     could reach and operate them five screens before the figure exists. */
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.picks.live{
  opacity:1;
  visibility:visible;
  transition:opacity .5s var(--ease),visibility 0s;
}
.picks.live .vtx{pointer-events:auto}

.vtx{
  /* Sits ON its corner: JS writes left/top from the projected vertex, the
     translate centres the control on the point itself. */
  position:absolute;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);
  border:1px solid var(--hair-strong);
  border-radius:var(--radius);
  padding:.7rem 1.2rem;
  font-size:.92rem;
  font-weight:var(--w-regular);
  white-space:nowrap;
  cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),opacity .35s var(--ease);
}
.vtx .s{
  display:block;
  margin-block-start:.1rem;
  font-size:.6rem;
  font-weight:var(--w-semi);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .35s var(--ease);
}
.vtx:hover{border-color:var(--bone)}
.vtx[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--void)}
.vtx[aria-pressed="true"] .s{color:rgba(0,0,0,.55)}
.vtx.lost{opacity:.32;text-decoration:line-through;text-decoration-thickness:1px}

.verdict{min-height:7rem}
.verdict .v{color:var(--bone)}
.verdict .v{
  margin-block:.6rem .5rem;
  font-size:1.45rem;
  font-weight:var(--w-regular);
  letter-spacing:-.018em;
}
.verdict .d{max-width:34rem;color:var(--bone);font-weight:var(--w-light)}
.verdict .d strong{font-weight:var(--w-semi)}

/* --- III · Υπηρεσίες ---------------------------------------------------
   No headline here — the live site has none, and inventing one would
   violate the client's text-unchanged constraint. */

.services-list{
  margin-block-start:3rem;
  display:grid;
  gap:clamp(2.2rem,5vw,3.4rem);
}

.svcrow{
  display:grid;
  grid-template-columns:4rem minmax(0,1fr) minmax(0,.9fr);
  gap:1.5rem;
  align-items:baseline;
}
/* Rows arrive one after another rather than as a block; delay is staggered
   in site.js so the cascade survives reordering. */
.js .svcrow{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js .svcrow.in{opacity:1;transform:none}
.svcrow .n{
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.1em;
  color:var(--ash);
  transition:color .45s var(--ease);
}
.svcrow .name{
  font-size:var(--step-service);
  font-weight:var(--w-regular);
  letter-spacing:-.03em;
  line-height:1.02;
  color:var(--bone);
  transition:transform .45s var(--ease);
}
.svcrow .d{
  font-size:.95rem;
  font-weight:var(--w-light);
  color:var(--ash);
}
.svcrow:hover .name{transform:translateX(10px)}
.svcrow:hover .n{color:var(--bone)}

.tag{
  display:inline-block;
  margin-inline-start:.7rem;
  padding:.14rem .55rem;
  border:1px solid var(--ash);
  border-radius:var(--radius-pill);
  font-size:.56rem;
  font-weight:var(--w-semi);
  letter-spacing:.1em;
  vertical-align:.45em;
  color:var(--ash);
}

.smsrow{
  margin-block-start:1rem;
  display:flex;
  align-items:baseline;
  gap:1.4rem;
  flex-wrap:wrap;
}
.smsrow .k{
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ash);
}
.smsrow strong{font-size:1.35rem;font-weight:var(--w-regular);letter-spacing:-.02em}
.smsrow .d{font-size:.95rem;font-weight:var(--w-light);color:var(--ash)}
.smsrow:hover strong{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}

/* --- IV · Μέθοδος ------------------------------------------------------- */

.method h2{margin-block-start:1.2rem}
.method .body-lg + .body-lg{margin-block-start:1.4rem}

/* The two columns were top-aligned, which put the description's first line
   20px ABOVE the headline it is describing — the supporting text arriving
   before the statement it supports, and 220px of dead space under it because
   the headline column is nearly twice as tall.

   Aligning to the BOTTOM edge instead reads as a deliberate setting rather
   than a gap: the description now sits in the lower half of the headline
   block and the two columns finish on the same line. Desktop only — the
   columns stack below 900px and there is no second column to align to. */
@media (min-width:900px){
  .method .wrap.two{align-items:end}
}

/* The section is padded symmetrically, but the fixed bar eats the top 76px
   of the viewport — so what actually reaches the eye is 62px of air above
   the marker against 142px of slack below the chain, and the block reads as
   shoved up under the header. Move half the difference from the bottom to
   the top. Rebalancing rather than adding keeps the section's height exactly
   as it was, so nothing below it moves and the contact scroll timing that
   spells DEIFIED is untouched.

   Desktop only: below 900px the section is far taller than the viewport, the
   columns have stacked, and there is no top-versus-bottom to balance. */
@media (min-width:900px){
  .method{
    padding-block-start:calc(clamp(4rem,10vw,7.5rem) + 2.75rem);
    padding-block-end:max(4rem, calc(clamp(4rem,10vw,7.5rem) - 2.75rem));
  }
}

/* Visualises the client's own sentence — strategy → content → advertising →
   website → data → back to strategy. Phase 3 scrubs it on scroll. */
.chainscene{margin-block-start:3rem;overflow:hidden;padding-block:1.4rem}
.chain{
  display:flex;
  align-items:baseline;
  gap:1.6rem;
  white-space:nowrap;
  will-change:transform;
  transform:translateX(calc(10% - var(--p,0) * 34%));
}
.chain span{
  font-size:clamp(1.6rem,4.6vw,3.2rem);
  font-weight:var(--w-light);
  letter-spacing:-.03em;
  color:var(--ash);
  transition:color .5s var(--ease);
}
.chain span.on{color:var(--bone);font-weight:var(--w-regular)}
.chain i{font-style:normal;font-size:1.1rem;color:var(--ash)}

/* --- V · Επικοινωνία ---------------------------------------------------- */

.contact{
  position:relative;
  min-height:78svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.contact .stage{position:absolute;inset:0;height:auto;opacity:.5}
.contact .wrap{position:relative}
.contact h2{margin-block-start:1.2rem}

.mail{
  display:inline-block;
  margin-block-start:2.6rem;
  font-size:clamp(1.3rem,3.4vw,2.3rem);
  font-weight:var(--w-light);
  letter-spacing:-.02em;
  color:var(--mist);
  transition:color .35s var(--ease);
}
.mail:hover,.mail:focus-visible{color:var(--bone)}

footer{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:2.4rem;
  font-size:var(--step-caption);
  font-weight:var(--w-regular);
  letter-spacing:.04em;
  color:var(--ash);
}

/* --- Chat (Phase 4 wires behaviour) ------------------------------------- */

.chatbtn{
  position:fixed;
  inset-inline-end:1.4rem;
  inset-block-end:1.4rem;
  z-index:70;
  background:var(--bone);
  color:var(--void);
  border:0;
  border-radius:var(--radius);
  padding:.9rem 1.35rem;
  font-size:var(--step-label);
  font-weight:var(--w-semi);
  letter-spacing:.025em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .3s var(--ease);
}
.chatbtn:hover,.chatbtn:focus-visible{transform:scale(1.05)}

.chat{
  position:fixed;
  inset-inline-end:1.4rem;
  inset-block-end:5.4rem;
  z-index:70;
  width:min(340px,calc(100vw - 2.8rem));
  background:var(--void);
  border:1px solid var(--hair-strong);
  border-radius:var(--radius);
  padding:1.4rem;
  display:none;
}
.chat[data-open="true"]{display:block}
.chat h3{font-size:1rem;font-weight:var(--w-regular)}
.chat > p{margin-block:.4rem 1rem;font-size:.82rem;font-weight:var(--w-light);color:var(--ash)}
.chat .q{
  display:block;
  width:100%;
  text-align:start;
  background:none;
  border:1px solid var(--hair);
  border-radius:14px;
  padding:.6rem .8rem;
  margin-block-end:.45rem;
  font-size:.82rem;
  font-weight:var(--w-light);
  cursor:pointer;
  transition:border-color .3s var(--ease);
}
.chat .q:hover,.chat .q:focus-visible{border-color:var(--bone)}

/* --- Responsive --------------------------------------------------------- */

@media (max-width:1100px) and (min-width:901px){
  .bar,nav.main{gap:1rem}
  .navlink{font-size:.7rem}
}

@media (max-width:940px){
  .hero{grid-template-columns:1fr;padding-block-start:8rem}
  .hero .stage{order:-1;height:min(58vh,420px)}
}

@media (max-width:900px){
  .two{grid-template-columns:1fr}
  .navlink{display:none}
}

@media (max-width:820px){
  .svcrow{grid-template-columns:2.6rem 1fr}
  .svcrow .d{grid-column:2}
}

/* --- Reduced motion -----------------------------------------------------
   A first-class path, not a degraded one. Everything remains legible and
   every control remains operable. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .js .rise>span{transform:none}
  .js .fade{opacity:1;transform:none}
  .js .svcrow{opacity:1;transform:none}
  /* Unpin, and hand the choice over immediately — there is no scroll
     assembly to wait for. */
  /* Unpin and unstack: every step becomes an ordinary block in document
     order, the figure renders closed, and the choice is offered immediately.
     Nothing is lost — there is just no scroll performance to sit through. */
  .pin{height:auto}
  .stick{position:static;height:auto;padding-block:4rem;overflow:visible}
  .rule .bg{position:relative;height:min(60vh,520px);margin-block-end:3rem}
  .steps{position:static;display:block;height:auto;text-align:start}
  /* No projected figure to pin to, so the corner buttons become a row. */
  .picks{position:static;opacity:1;visibility:visible;display:flex;gap:.6rem;flex-wrap:wrap;margin-block:2rem}
  .vtx{position:static;transform:none;pointer-events:auto}
  .step{
    grid-area:auto;
    opacity:1;
    transform:none;
    pointer-events:auto;
    margin-block-end:3rem;
  }
  .picks{opacity:1 !important;pointer-events:auto !important}
  .hero-copy{transform:none !important;opacity:1 !important}
  .chain{transform:none !important}
  .scrollcue::after{animation:none;transform:scaleY(1)}
}


/* ==========================================================================
   I · HERO — their promise block over a scattered field
   No figure assembles here. The first screen is the promise; the particles
   are the same field that later forms the euro, just not yet organised.
   ========================================================================== */

.hero{
  position:relative;
  display:grid;
  min-height:100svh;
  padding:7.5rem 0 4rem;
  overflow:hidden;
}
/* The hero no longer owns a canvas — see #field, which spans the hero and the
   factor track as one continuous particle system. */
.hero .promise{position:relative;z-index:2}

.promise{max-width:44rem}
.promise__eye{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--step-label);font-weight:var(--w-semi);
  letter-spacing:.025em;text-transform:uppercase;color:var(--ash);
}
.promise__h{margin-block-start:1.4rem}
/* Their own divider between headline and subline. */
.promise__rule{
  width:72px;height:1px;
  margin-block:2.2rem 1.8rem;
  background:var(--hair-strong);
}
.promise__sub{max-width:28rem}
.promise .cta{margin-block-start:2.4rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

/* ==========================================================================
   II.a · ΟΙ ΠΑΡΑΓΟΝΤΕΣ — horizontal track
   Vertical scroll drives a horizontal track. One persistent particle field
   sits behind it and travels side to side as it morphs, so the euro really is
   made of the dust that was scattered on the first screen.
   ========================================================================== */

.factors{position:relative;height:460vh}
.factors__vp{
  position:sticky;
  inset-block-start:0;
  height:100svh;
  overflow:hidden;
}


.factors__track{
  position:relative;
  z-index:2;
  height:100%;
  width:300%;
  display:flex;
  will-change:transform;
}
.panel{
  width:33.3333%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,6vw,5rem);
  padding-inline:clamp(1.5rem,6vw,6rem);
}
/* Empty on purpose: the figure is painted on the shared canvas behind, and
   this column simply reserves the space it occupies. */
.panel__fig{min-height:1px}
/* Alternating sides — figure left, then right, then left. */
.panel--flip .panel__fig{order:2}
.panel--flip .panel__copy{order:1}

.panel__copy .fnum{
  font-size:var(--step-caption);font-weight:var(--w-semi);
  letter-spacing:.24em;color:var(--ash);
}
.panel__copy .fname{
  margin-block-start:.6rem;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
  font-weight:var(--w-regular);letter-spacing:-.03em;line-height:1;
}
.panel__copy .fsub{
  margin-block-start:.7rem;
  font-size:var(--step-label);font-weight:var(--w-semi);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ash);
}

/* ==========================================================================
   II.b · Ο ΚΑΝΟΝΑΣ — the close. Copy left, figure right, choice on corners.
   ========================================================================== */

/* Shorter: the morph is front-loaded onto the approach now, so a long pin
   is just dead scroll after the figure has closed. */
.rule.pin{height:260vh}
.tri{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
  height:100%;
}
/* Left half is reserved for the figure, which is painted on the shared field
   behind — there is no canvas here to hand over to. */
.tri__fig{min-height:1px}
.tri__copy h2{margin-block-start:1rem}
.tri__copy .body-lg{margin-block-start:1.6rem;max-width:32rem;color:var(--bone)}
.tri__copy .verdict{margin-block-start:2.4rem}

/* Two picked: the explanation collapses and the verdict takes its place.
   max-height rather than display:none so the verdict RISES into the gap
   instead of jumping — the eye needs to see that one replaced the other.
   The value only has to exceed the tallest the paragraph ever gets; it is a
   ceiling for the transition, not a layout constraint.

   visibility is what actually removes it from the accessibility tree and the
   tab order: opacity:0 and max-height:0 leave text a screen reader will
   still announce. Delayed on the way out so the fade is visible first, and
   instant on the way back in so it is focusable before it finishes opening. */
.tri__copy .body-lg{
  overflow:hidden;
  max-height:24rem;
  visibility:visible;
  transition:opacity .45s var(--ease),
             max-height .6s var(--ease),
             margin-block-start .6s var(--ease),
             visibility 0s linear 0s;
}
.tri__copy.chosen .body-lg{
  opacity:0;
  max-height:0;
  margin-block-start:0;
  visibility:hidden;
  transition:opacity .45s var(--ease),
             max-height .6s var(--ease),
             margin-block-start .6s var(--ease),
             visibility 0s linear .6s;
}
.tri__copy.chosen .verdict{margin-block-start:1.6rem}

@media (prefers-reduced-motion:reduce){
  .tri__copy .body-lg,
  .tri__copy.chosen .body-lg{transition:none}
}

/* Corner controls sit in viewport coordinates, over the fixed field. */
.picks{
  position:fixed;
  inset:0;
  z-index:5;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.picks.live{
  opacity:1;
  visibility:visible;
  transition:opacity .5s var(--ease),visibility 0s;
}
.picks.live .vtx{pointer-events:auto}

@media (max-width:900px){
  .tri{grid-template-columns:1fr;gap:2rem}
  .tri__fig{display:none}
  .panel{grid-template-columns:1fr;align-content:end;padding-block-end:14vh}
  .panel__fig{display:none}
}

@media (prefers-reduced-motion:reduce){
  .factors{height:auto}
  .factors__vp{position:static;height:auto;overflow:visible}
  .factors__track{width:auto;display:block;transform:none !important}
  .panel{width:auto;height:auto;grid-template-columns:1fr;padding-block:3rem}

  .rule.pin{height:auto}
  .tri{grid-template-columns:1fr}
  .picks{position:static;opacity:1;visibility:visible}
}


/* ==========================================================================
   The shared field — fixed to the viewport for the whole opening movement.
   Nothing clips it: it is the page's background, not a panel inside one.
   ========================================================================== */
#field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .35s linear;
}
#field canvas{width:100%;height:100%}
/* Everything else rides above it. */
.hero,.factors{position:relative;z-index:1}
.hero .promise{z-index:2}

@media (prefers-reduced-motion:reduce){
  #field{position:absolute;height:60vh}
}


/* ==========================================================================
   III · ΥΠΗΡΕΣΙΕΣ — the bento
   Cards carry NO border of their own. The outline is drawn by the shared
   particle field on top, so the figure and the interface are one object.
   Dala forbids cards; this is a deliberate art-direction override, and the
   border being particles rather than CSS is what keeps it honest.
   ========================================================================== */

/* Longer: the fly-through runs across 60% of this and needs room to
   breathe. At 300vh the field crossed the camera in a rush. */
.pin-svc{position:relative;height:440vh}
.pin-svc .stick{
  position:sticky;
  inset-block-start:0;
  height:100svh;
  display:grid;
  align-items:center;
  overflow:hidden;
}

.bento{
  margin-block-start:2rem;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(.6rem,1.4vw,1.1rem);
  height:min(62vh,560px);
}

.cell{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.35rem;
  padding:clamp(.9rem,1.6vw,1.5rem);
  background:transparent;
  border:0;                   /* the particles are the border */
  border-radius:var(--radius);
  overflow:hidden;
  opacity:0;
  transition:opacity .5s var(--ease),transform .45s var(--ease);
}
.bento.on .cell{opacity:1}
/* Not clickable until the outline exists. An invisible hit target that
   navigates is worse than no hit target — same gate as the corner picker. */
.cell{pointer-events:none}
.bento.live .cell{pointer-events:auto}
.cell:hover{transform:translateY(-3px)}
.cell:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

.cell__no{
  font-size:var(--step-caption);font-weight:var(--w-semi);
  letter-spacing:.18em;color:var(--ash);
}
.cell__name{
  font-size:clamp(1rem,1.6vw,1.5rem);
  font-weight:var(--w-regular);letter-spacing:-.02em;line-height:1.05;
}
.cell__desc{
  font-size:.82rem;font-weight:var(--w-light);color:var(--ash);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Social Media Marketing leads — twice the span in both directions. */
.cell--lead{grid-column:span 2;grid-row:span 2}
.cell--lead .cell__name{font-size:clamp(1.5rem,3.2vw,2.9rem)}
.cell--lead .cell__desc{font-size:.95rem;-webkit-line-clamp:4}
.cell--wide{grid-column:span 2}

/* The rule copy is swept off by the same wind that disperses the field. */
.tri__copy{will-change:transform,opacity}

@media (max-width:940px){
  /* No pin, no particle outline — real borders, ordinary stacked cards.
     The particle version is an enhancement; this is the actual interface. */
  .pin-svc{height:auto}
  .pin-svc .stick{position:static;height:auto;overflow:visible;padding-block:4rem}
  .bento{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    height:auto;
    gap:.75rem;
  }
  .cell{
    opacity:1;
    border:1px solid var(--hair-strong);
    justify-content:flex-start;
    gap:.5rem;
    padding:1.15rem;
  }
  .cell--lead,.cell--wide{grid-column:span 1;grid-row:span 1}
  .cell{pointer-events:auto}
  .cell__desc{-webkit-line-clamp:none;overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  .pin-svc{height:auto}
  .pin-svc .stick{position:static;height:auto;overflow:visible;padding-block:4rem}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;height:auto}
  .cell{opacity:1;border:1px solid var(--hair-strong);transition:none;pointer-events:auto}
  .cell:hover{transform:none}
}


/* ==========================================================================
   Sound toggle — their control, their default (off).
   The four bars only move while sound is actually on, so the icon reports
   real state rather than decorating.
   ========================================================================== */

.snd{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.snd__b{
  display:block;
  width:2px;
  height:4px;
  background:var(--ash);
  transition:background .3s var(--ease),height .3s var(--ease);
}
.snd:hover .snd__b{background:var(--bone)}
.snd[aria-pressed="true"] .snd__b{
  background:var(--bone);
  animation:sndbar 1.1s ease-in-out infinite;
}
.snd[aria-pressed="true"] .snd__b:nth-child(2){animation-delay:.14s}
.snd[aria-pressed="true"] .snd__b:nth-child(3){animation-delay:.28s}
.snd[aria-pressed="true"] .snd__b:nth-child(4){animation-delay:.42s}

@keyframes sndbar{
  0%,100%{height:4px}
  50%{height:13px}
}

@media (prefers-reduced-motion:reduce){
  .snd[aria-pressed="true"] .snd__b{animation:none;height:9px}
}

/* Secondary nav in the footer keeps long-form and utility routes discoverable
   after the compact header has handed the page over to its content. */
.footlinks{display:flex;gap:1.25rem;flex-wrap:wrap}
.footlinks a{
  font-size:var(--step-caption);
  font-weight:var(--w-semi);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ash);
  transition:color .3s var(--ease);
}
.footlinks a:hover,.footlinks a:focus-visible{color:var(--bone)}
@media (max-width:900px){
  /* .navlink is hidden at this width, so the footer becomes the only route. */
  .footlinks{width:100%}
}


/* ==========================================================================
   "You cannot have all three" — the refusal.
   Picking a third factor is REFUSED rather than silently swapping the oldest
   choice out. Swapping let a reader collect all three one at a time and never
   meet the constraint the section exists to teach.

   THE ONLY COLOUR ON THIS SITE. Client constraint C9 is white and black only;
   this is a deliberate, single exception for an error state, agreed with
   Aurelith. It is used nowhere else, and nothing decorative may borrow it.
   ========================================================================== */

.tri-warn{
  position:absolute;
  transform:translate(-50%,-50%) scale(.94);
  margin:0;
  max-width:15rem;
  text-align:center;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  font-weight:var(--w-regular);
  letter-spacing:-.01em;
  line-height:1.25;
  color:#ff4d4d;
  text-shadow:0 0 18px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.9);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.tri-warn.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Refusing a press with no feedback reads as a broken button, so the control
   that was refused shivers once. */
.picks.live .vtx[aria-pressed="false"]:active{transform:translate(-50%,-50%) scale(.97)}

@media (prefers-reduced-motion:reduce){
  .tri-warn{transition:opacity .01ms;transform:translate(-50%,-50%)}
  .tri-warn.show{transform:translate(-50%,-50%)}
}

/* ==========================================================================
   MOBILE
   The site had no navigation at all below 900px: .navlink is display:none
   there and nothing replaced it, so on a phone Υπηρεσίες, Μέθοδος,
   Επικοινωνία, Ερωτήσεις and Blog were unreachable from every one of the
   fifteen pages. Everything in this block exists to fix that class of
   problem — reachability and legibility on a small screen.
   ========================================================================== */

/* --- The menu ------------------------------------------------------------
   <details>, so it needs no JavaScript to open. nav.js only closes it after
   an in-page jump; if that script never runs the menu still works. */
.menu{display:none;position:relative}
.menu summary{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;          /* a real tap target, not a 20px glyph */
  margin-inline-start:-10px;       /* optically aligned with the gutter */
  list-style:none;
  cursor:pointer;
  border-radius:50%;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:focus-visible{outline:2px solid var(--bone);outline-offset:2px}

/* Three rules drawn from one element, so there is no extra markup to keep
   in sync across seventeen pages. */
.menu summary span{
  position:relative;
  display:block;
  width:18px;height:1px;
  background:var(--bone);
  transition:background .2s var(--ease);
}
.menu summary span::before,
.menu summary span::after{
  content:"";
  position:absolute;
  inset-inline:0;
  height:1px;
  background:var(--bone);
  transition:transform .28s var(--ease);
}
.menu summary span::before{inset-block-start:-6px}
.menu summary span::after{inset-block-start:6px}

.menu[open] summary span{background:transparent}
.menu[open] summary span::before{transform:translateY(6px) rotate(45deg)}
.menu[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}

.menu__panel{
  position:absolute;
  inset-block-start:calc(100% + 14px);
  inset-inline-start:-10px;
  min-width:min(66vw,17rem);
  display:flex;
  flex-direction:column;
  padding:.5rem 0;
  background:#050505;
  border:1px solid var(--hair-strong);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.75);
}
.menu__panel a{
  padding:.85rem 1.25rem;          /* 44px+ rows */
  font-size:1rem;
  font-weight:var(--w-regular);
  letter-spacing:.02em;
  color:var(--mist);
}
.menu__panel a:hover,
.menu__panel a:focus-visible{color:var(--bone);background:rgba(255,255,255,.06)}

@media (max-width:900px){
  .menu{display:block}

  /* Last in the bar, not second. nav.main is a flex row, so `order` moves
     the button to the far right — logo left, menu right — without touching
     the DOM on seventeen pages, and keyboard order still follows source. */
  .menu{order:9}
  /* Anchored to its own right edge, or the panel would hang off-screen. */
  .menu__panel{inset-inline-start:auto;inset-inline-end:-8px}
  .menu summary{margin-inline:0 -8px}

  .bar{gap:.9rem}
  nav.main{gap:.75rem}

  /* 20px and 24px tall were the two smallest targets on the site. */
  .logo{padding-block:.7rem}
  .lang button{padding:.55rem .3rem}
}

@media (max-width:700px){
  /* The hero's bottom edge was carrying the CTA row, the scroll cue and the
     chat button within 120px of each other. The cue is the one with no job:
     a phone user does not need to be told a page scrolls. */
  .scrollcue{display:none}

  .logo{font-size:.78rem;letter-spacing:.24em}
  .pill{padding:.7rem .9rem}
}

/* --- The picker on a phone ----------------------------------------------
   On desktop the three controls sit ON the triangle's corners, which is the
   whole point: you are dismantling a figure. That does not survive a phone.
   Below 700px .tri__fig is already display:none and the copy takes the full
   width, so the buttons — positioned by JS at the projected vertices — land
   directly on top of the paragraph. All three of them.

   So on a phone they become what they actually are: a choice of three,
   in a bar within thumb reach. The refusal, the verdict and the released
   edge all still work; only the placement changes. site.js stops writing
   left/top below this width, so there are no inline styles to fight. */
@media (max-width:700px){
  .picks{
    inset-block-start:auto;
    inset-block-end:0;
    height:auto;
    /* Sits ABOVE the chat button rather than across it. Measured on a
       375x812 screen: ΒΟΗΘΕΙΑ occupies y 742-790 and the third control
       would otherwise land at 754-800 — the two were drawn on top of each
       other. Clearing it here is a static offset, so it holds whether or
       not any script runs. */
    inset-block-end:calc(5.25rem + env(safe-area-inset-bottom,0px));
    padding:.75rem;
    display:flex;
    gap:.5rem;
    background:linear-gradient(to top,rgba(0,0,0,.92) 55%,rgba(0,0,0,0));
  }
  .picks .vtx{
    position:static;
    transform:none;
    flex:1 1 0;
    min-width:0;
    padding:.8rem .4rem;
    text-align:center;
    white-space:normal;
    font-size:.85rem;
    line-height:1.15;
  }
  .picks.live .vtx[aria-pressed="false"]:active{transform:scale(.97)}

  /* The sub-label doubles the height of every button in a row of three. */
  .vtx .s{display:none}

  /* The refusal was centred on the triangle's centroid, which is nowhere
     near the bar now. Sit it directly above the controls instead. */
  .tri-warn{
    position:fixed;
    inset-block-end:11.5rem;
    inset-inline:1rem;
    transform:none;
    max-width:none;
  }
  .tri-warn.show{transform:none}

  /* Clear the bar so the last line of copy is never under it. */
  .rule .stick{padding-block-end:11rem}


  /* 43px was a hair under the 44px target size. */
  .picks .vtx{padding-block:.9rem}
}

/* Nothing here should animate for someone who asked for stillness. */
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  .chatbtn{transition:transform .3s var(--ease)}
}

@media (max-width:700px){
  /* Μέθοδος — the chain is a masked marquee: 1109px of words scrubbed
     sideways by --p inside an overflow:hidden window. On a 375px screen the
     scrub covers about a third of its length, so three of the six links in
     the cycle — Ιστότοπος, Δεδομένα and the Στρατηγική it returns to — could
     never be reached. The point of the sentence is that it is a loop, which
     you cannot see if you only ever see the start of it.

     So on a phone it stops being a marquee and becomes what it is: a list
     that wraps. The highlight still advances with scroll. */
  .chainscene{overflow:visible}
  .chain{
    white-space:normal;
    flex-wrap:wrap;
    gap:.45rem .9rem;
    transform:none !important;
  }
  .chain span{font-size:1rem}
  .chain i{font-size:.95rem}
}