/* ============================================================
   SELENE — minimal multi-page studio site
   Fonts: GFS Didot (display) · SF Pro / Inter (UI/body) ·
          Poppins (Latin wordmark only)
   All fonts are self-hosted subsets (/fonts/fonts.css): the site
   promises no third-party requests, so it makes none.
   ============================================================ */

:root {
  --paper:      #000000;     /* deep black */
  --paper-2:    #111113;     /* lifted surface (cards) */
  --ink:        #F5F5F7;     /* off-white ink: no halation against pure black */
  --ink-soft:   #A1A1A6;
  --ink-faint:  #7C7C82;   /* AA: 5.06:1 on #000, 4.55:1 on #111113 (paper-2) */
  --line:       rgba(255, 255, 255, 0.12);
  --line-soft:  rgba(255, 255, 255, 0.07);
  --accent:     #C7C7CC;     /* soft system grey (was Apple blue) */
  --accent-ink: #000000;

  /* Display face: GFS Didot — the Greek Didot printing tradition, one weight
     (400), high-contrast hairline strokes that echo the site's 1px rules and
     the hero's metal rim. Georgia carries Greek if the webfont is blocked. */
  --serif: 'GFS Didot', Georgia, 'Times New Roman', serif;
  /* San Francisco on Apple devices, Inter everywhere else */
  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  /* display face for the Selene wordmark (hero, brand, boot, 404) —
     Poppins has no Greek subset, so Greek glyphs fall through to Inter */
  --display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --frame-gap: clamp(20px, 3vw, 44px);   /* page margin around the hero window */

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1400px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- starfield background ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* ---------- film grain overlay (texture only) ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============================================================
   BOOT — "Selene" vaporize loader
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--ease);
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-canvas { display: block; width: 100%; height: 100%; }
body.booting { overflow: hidden; }

/* ============================================================
   HEADER — Work | Selene | Contact us
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}
.nav-link {
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
/* invisible hit-area extension: 44px-class tap targets without layout shift */
.nav-link::before {
  content: '';
  position: absolute;
  inset: -16px -10px;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

/* language toggle (ΕΛ ↔ EN): a quieter, smaller sibling of .nav-link */
.lang-link {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-left: 1.1rem;
}

.nav-left  { justify-self: start; }
.nav-right { justify-self: end; }

.brand {
  justify-self: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(5rem, 12vw, 11rem);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 2.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.site-footer .brand { font-size: 1.05rem; justify-self: start; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { position: relative; }
.footer-links a::after { content: ''; position: absolute; inset: -14px -8px; }
.footer-links a:hover { color: var(--ink); }

/* ============================================================
   HERO (home)
   ============================================================ */
/* HERO is now a framed "window": a crisp bordered box with the page (starfield)
   visible around it; all hero animation is clipped inside it. */
.hero {
  position: relative;
  width: calc(100% - 2 * var(--frame-gap));
  max-width: 1280px;
  margin: var(--frame-gap) auto;
  height: min(720px, calc(100svh - 72px - 2 * var(--frame-gap)));
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  background: transparent;       /* see-through to the page starfield until the photo fades in */
  border: 0;                     /* the metal rim (::before) draws the edge */
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  isolation: isolate;            /* keep the hero's z-index stack self-contained */
  /* The frame starts FULL (complete rounded rect) during the intro, then the
     top edge "cuts" away on an irregular, asymmetric line once the photo
     settles in. Same vertex count in both polygons so clip-path interpolates
     smoothly. Applied to the rim + hover spotlight so the edge stays consistent. */
  --cut-full: polygon(0% 0%, 31% 0%, 59% 0%, 100% 0%, 100% 100%, 0% 100%);
  --cut: polygon(0% 33%, 31% 19%, 59% 27%, 100% 13%, 100% 100%, 0% 100%);
}

/* bright moon-silver metal rim — a gradient border that follows the rounded
   corners (mask cuts out the interior so only the 2px edge shows). The
   light→dark→light stops fake a brushed-metal sheen. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,
    #fdfdff 0%, #c7c7cc 16%, #84878d 34%, #f4f5f8 50%,
    #6f7177 66%, #c9c9ce 84%, #fbfbfd 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  clip-path: var(--cut-full);              /* full frame until the photo settles */
  transition: clip-path 1200ms var(--ease);
}

/* edge spotlight — lights the frame segment nearest the cursor */
.hero-edge {
  clip-path: var(--cut-full);
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;                  /* frame thickness that gets lit */
  background: radial-gradient(240px circle at var(--sx, -300px) var(--sy, -300px),
              rgba(255, 255, 255, 0.9), rgba(199, 199, 204, 0.25) 38%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--ease), clip-path 1200ms var(--ease);
}

/* once the photo has settled in, reveal the asymmetric top cut */
.hero.is-settled::before,
.hero.is-settled .hero-edge { clip-path: var(--cut); }
.hero.is-edge-lit .hero-edge { opacity: 1; }
/* photo backdrop — Athens wireframe; fades in as "Selene" settles (js/main.js).
   Sits above the shader (z0), below the wordmark/lockup (z2). The bottom-left
   scrim keeps the settled silver lockup legible over the city detail. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 34%, transparent 58%),
    url('/img/athens-wireframe.webp') center / cover no-repeat;
  /* fade the sky (top) to transparent so the page's starfield shows through;
     keep the city + Acropolis (lower band) opaque */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 24%, #000 40%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 24%, #000 40%);
  opacity: 0;
  transition: opacity 1400ms ease-out;
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero-mark {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 22vw, 21rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: #EDEDED;                                 /* fallback */
  background: linear-gradient(180deg, #FAFAFA, #9A9A9A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-mark em { font-style: normal; font-weight: inherit; }
/* After the opening reveal, "Selene" settles into the lower-left; a hairline
   rule then "breaks" out beneath it and the tagline is revealed under that.
   The lockup is absolutely anchored, so the big centred reveal (h1 stays in
   normal flow, alone) sits perfectly centred — js/main.js moves the <h1> into
   .hero-lockup at settle and runs the FLIP. */
.hero-lockup {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.85rem;
}
.hero.is-settled .hero-mark {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-lockup .hero-tag {
  margin: 0;
  max-width: 34ch;
  text-align: left;
}
/* the "break" — a hairline that draws open beneath the wordmark */
.hero-break {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(199, 199, 204, 0.12));
  transition: width 750ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-break.is-open { width: clamp(170px, 24vw, 320px); }
.hero-tag {
  position: relative;
  z-index: 2;                   /* above the woven backdrop */
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 34ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
}
/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
/* display headings: keep last lines from orphaning */
.section-title, .cf-heading, .contact-hero h1, .case-title { text-wrap: balance; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  letter-spacing: 0;
  line-height: 1.12;
}
.section-head p { max-width: 38ch; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Services (home) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.service-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  min-height: clamp(15rem, 26vw, 22rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #000000;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.22); }
/* service cards are links now; the cursor ring hides the native cursor, so
   keyboard focus must be loud (same treatment as .work-card) */
.service-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-color: rgba(255, 255, 255, 0.22);
}

.service-no { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.05em; }
.service-img {
  width: 112%;
  margin: 0.25rem -6% 0.5rem;
  height: clamp(11rem, 20vw, 17rem);
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease);
}
.service-card:hover .service-img { opacity: 1; }
.service-name {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.65rem, 2.8vw, 2.3rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin-top: auto;
}
.service-desc { margin-top: 0.9rem; font-size: 0.92rem; color: var(--ink-soft); }
.svc-lang-note { color: var(--ink-faint); font-size: 0.85em; }

/* ============================================================
   SELECTED WORK (home) — editorial rows, media + text alternating.
   Distinct from the work-page card grid on purpose: the home page
   presents each study like a plate in a portfolio book.
   ============================================================ */
.sel-rows { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.sel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.sel-row:nth-child(even) .sel-media { order: 2; }
.sel-media {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  transition: border-color 0.5s var(--ease);
}
.sel-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.sel-row:hover .sel-media { border-color: rgba(255, 255, 255, 0.22); }
.sel-row:hover .sel-media img,
.sel-row:focus-visible .sel-media img { transform: scale(1.03); }
.sel-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 14px;
}
.sel-body { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.sel-title {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  letter-spacing: 0;
  line-height: 1.08;
}
.sel-summary { font-size: 0.98rem; color: var(--ink-soft); max-width: 44ch; }
.sel-more {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sel-row:hover .sel-more { color: var(--ink); border-color: var(--ink); }
.section-head .head-link {
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.section-head .head-link:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 860px) {
  .sel-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .sel-row:nth-child(even) .sel-media { order: 0; }
}

/* ============================================================
   PROCESS (home) — four steps, broadsheet cells; the duration is
   the data label, the left-to-right order is the sequence.
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.step-cell {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.step-when {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.step-name {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: 0;
  line-height: 1.12;
}
.step-desc { font-size: 0.9rem; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   RECEIPTS (home) — published performance numbers, broadsheet table.
   Ships hidden: .receipts-pending + [hidden] until real measurements land.
   ============================================================ */
section.receipts-pending[hidden] { display: none; }
.receipts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.receipt-cell {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem) 0;
}
.receipt-cell + .receipt-cell {
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}
.receipts dt {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* measurements stay in the sans "instrument" voice: tabular digits hold
   still while the count-up runs (js/main.js) */
.receipts dd {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (max-width: 860px) {
  .receipts { grid-template-columns: 1fr 1fr; }
  .receipt-cell,
  .receipt-cell + .receipt-cell { border-left: 0; padding-left: 0; }
  .receipt-cell:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 1rem; }
  .receipt-cell:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ============================================================
   WORK — gallery wall + portfolio grid
   ============================================================ */
/* ---------- image trail (cursor-driven wireframe trail) ---------- */
.work-trail {
  position: relative;
  height: 100vh;
  min-height: 40rem;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.trail-word {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(4.5rem, 24vw, 20rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-align: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.trail-hint {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}
/* spawned site screenshots flow BEHIND the word; photographic frames need
   crisp edges (no blend, no feather) or the light pages wash out */
.trail-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.trail-img {
  position: absolute;
  width: clamp(110px, 11vw, 200px);
  height: auto;
  will-change: transform, opacity;
  border-radius: 6px;
  border: 1px solid rgba(245, 245, 247, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* source pool: hidden during the interactive trail */
.trail-srcs { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* no trail without a hovering fine pointer (touch / coarse) or with reduced
   motion: hide the hint + stage and show the sketches as a static gallery */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .work-trail { height: auto; display: block; padding-block: clamp(3rem, 7vw, 6rem); }
  .trail-hint { display: none; }
  .trail-stage { display: none; }
  .trail-srcs {
    position: static; width: auto; height: auto; opacity: 1; overflow: visible;
    list-style: none; margin: clamp(2rem, 5vw, 4rem) auto 0; max-width: 70rem;
    padding: 0 clamp(1rem, 4vw, 2rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
    place-items: center;
  }
  .trail-srcs img { width: 100%; height: auto; border-radius: 6px; border: 1px solid rgba(245, 245, 247, 0.12); }
}

/* ---------- studies grid (four self-initiated case studies) ----------
   Replaces the old placeholder gallery wall / portfolio grid: each card is
   a real focusable link to its /work-<slug>.html case study. */
.section-head .head-lede { max-width: 52ch; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* four studies sit as a balanced 2x2 */
  gap: clamp(1rem, 2.5vw, 2rem);
}
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.work-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.22); }
/* the cursor ring hides the native cursor, so keyboard focus must be loud */
.work-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-color: rgba(255, 255, 255, 0.22);
}
.work-card-media { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.work-card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.work-card:hover .work-card-media img,
.work-card:focus-visible .work-card-media img { transform: scale(1.04); }
/* two-frame hover: a second screen of the same study crossfades in */
.work-card-media .frame-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.work-card:hover .work-card-media .frame-b,
.work-card:focus-visible .work-card-media .frame-b { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .work-card-media .frame-b { display: none; }
}
.work-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.work-card-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.work-card-tags span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}
.work-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  letter-spacing: 0;
  line-height: 1.1;
}
.work-card-summary { font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 980px) {
  .work-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}

/* ============================================================
   CASE STUDY (work-obscura / work-kamini / work-periastron / work-aether)
   Editorial article layout: kicker + title + disclosure, full-width
   screenshots, narrow text column, facts list, prev/next studies.
   ============================================================ */
.case { padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.case-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case-kicker .case-dot { color: var(--accent); letter-spacing: 0; }
.case-title {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(3rem, 9vw, 6.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.case-disclosure {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
  padding-left: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
}
.case-media {
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--paper-2);
}
.case-media img { width: 100%; height: auto; }
.case-body { max-width: 46rem; }
.case-section + .case-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.case-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.case-section p { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; }
.case-section p + p { margin-top: 0.9rem; }
.case-live { margin-top: 1.75rem; }
.case-facts dl { border-top: 1px solid var(--line); }
.case-facts dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}
.case-facts dt {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.15rem;
}
.case-facts dd { font-size: 0.95rem; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .case-facts dl > div { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .case-facts dd { text-align: left; }
}
.case-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.case-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.case-nav-link:hover { color: var(--ink); }
.case-nav-link span {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case-nav-link strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}
.case-nav-link.next { align-items: flex-end; text-align: right; }
.case-nav-link.all {
  flex-direction: row;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case-nav-link.all:hover { color: var(--ink); }
/* footer addition (work + case pages): the no-cookies note under the pills */
.cf-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* ============================================================
   STORY — scroll-drawn timeline (About / How / Why)
   ============================================================ */
.story {
  padding-block: clamp(4rem, 11vw, 9rem) clamp(2rem, 5vw, 4rem);
}
.story .eyebrow {
  display: block;
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-left: 3rem;           /* line up "INDEX" with the timeline content */
}

/* ---------- cursor spotlight reveal ---------- */
.spotlight {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.sl-layer { display: block; }
.sl-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* bright copy revealed only inside a circle around the cursor */
  -webkit-mask-image: radial-gradient(circle 230px at var(--mx, -600px) var(--my, -600px), #000 0%, #000 32%, transparent 72%);
          mask-image: radial-gradient(circle 230px at var(--mx, -600px) var(--my, -600px), #000 0%, #000 32%, transparent 72%);
}
.sl-stanza { padding-block: clamp(1.25rem, 3.2vw, 2.6rem); }
.sl-eyebrow {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.sl-title {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2rem, 5.4vw, 3.8rem);
  letter-spacing: 0;
  line-height: 1.14;
}
.sl-base { color: rgba(255, 255, 255, 0.22); }   /* dim resting state, still legible */
.sl-glow .sl-eyebrow { color: var(--accent); }
.sl-glow .sl-title  { color: var(--ink); }
.spotlight-hint {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* no hover / touch: no cursor to track → reveal the bright layer fully so it stays readable */
@media (hover: none), (pointer: coarse) {
  .sl-glow { -webkit-mask-image: none; mask-image: none; }
  .spotlight-hint { display: none; }
}

/* ============================================================
   ORIGIN BUTTON (kataskevi service pages)
   ============================================================ */
/* origin-fill button — a circle expands from the pointer's entry point (port of OriginButton) */
.origin-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.5s var(--ease);
}
.origin-btn:active { transform: scale(0.985); }
.origin-btn.is-filling { border-color: var(--ink); }
.origin-fill {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.origin-btn.is-filling .origin-fill { transform: translate(-50%, -50%) scale(1); }
.origin-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.origin-btn.is-filling .origin-label { color: var(--paper); }
.origin-btn .arrow { transition: transform 0.4s var(--ease); }
.origin-btn.is-filling .arrow { transform: translate(3px, -3px); }

/* ============================================================
   CONTACT — pill button + brief form
   ============================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn-pill:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn-pill .arrow { transition: transform 0.4s var(--ease); }
.btn-pill:hover .arrow { transform: translate(3px, -3px); }

/* brief form (contact.html#brief) — always visible; submission handled in
   js/main.js: POST to FORM_ENDPOINT when configured, otherwise a prefilled
   mailto to hello@selenedigital.com. */
.contact-form { display: grid; gap: 1.15rem; }
.contact-form .field { display: grid; gap: 0.45rem; }
.contact-form label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family: var(--sans);
  font-size: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.3s var(--ease);
}
.contact-form select { color-scheme: dark; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: rgba(232, 161, 161, 0.7); }
.field-error { font-size: 0.8rem; color: #E8A1A1; }   /* 9.3:1 on #000 */
.field-error:empty { display: none; }
.form-actions { margin-top: 0.35rem; }
.form-status { font-size: 0.95rem; color: var(--ink-soft); }
.form-status:empty { display: none; }
.form-status.is-error { color: #E8A1A1; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .nav-link { font-size: 0.74rem; }
  .lang-link { font-size: 0.62rem; margin-left: 0.75rem; }
  .brand { font-size: 1.15rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-canvas { display: none !important; }
  .origin-fill { transition: none !important; }
  .sl-glow { -webkit-mask-image: none !important; mask-image: none !important; }
  .curtain { transition: none !important; }
}

/* ============================================================
   ACCESSIBILITY — skip link + visible keyboard focus
   ============================================================ */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 10001;                /* above grain + boot */
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #000;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 0 0 8px 8px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* the cursor-ring hides the native cursor; make focus unmistakable for keyboard users */
.cursor-ring-on a:focus-visible,
.cursor-ring-on button:focus-visible,
.cursor-ring-on .origin-btn:focus-visible { outline-offset: 4px; }

/* ============================================================
   SCROLL PROGRESS — 1px silver line tracking page depth
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), #fff);
  z-index: 60;                   /* just above the sticky header (50) */
  pointer-events: none;
  will-change: transform;
}

/* smart header: slides away on scroll-down, returns on scroll-up */
.site-header { transition: transform 0.42s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }

/* magnetic elements ease back to rest when released */
[data-magnetic] { transition: transform 0.35s var(--ease); will-change: transform; }

/* ============================================================
   PAGE TRANSITION — fast black crossfade (cover → navigate → reveal)
   Default state covers the viewport so the next page paints behind
   it with no flash; JS fades it out on load and back in on leave.
   ============================================================ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9990;                 /* above content, below grain(9999) + boot(10000) */
  background: #000;
  opacity: 1;                    /* covering on first paint */
  transition: opacity 0.25s ease;
  pointer-events: none;
  will-change: opacity;
}
/* JS adds this once the incoming page is ready */
.curtain.is-open { opacity: 0; }

/* ============================================================
   CURSOR RING — DOM ring that replaces the native cursor with
   context: shrinks to a dot on links, grows + labels over work.
   ============================================================ */
.cursor-ring-on { cursor: none; }
.cursor-ring-on a,
.cursor-ring-on button,
.cursor-ring-on [role="button"],
.cursor-ring-on .origin-btn { cursor: none; }
.cursor-ring-on input,
.cursor-ring-on textarea,
.cursor-ring-on select { cursor: text; }

.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 9998;                 /* below grain(9999); above curtain + content */
  opacity: 0;                    /* revealed after first pointer move */
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition:
    width 0.26s var(--ease),
    height 0.26s var(--ease),
    opacity 0.22s ease,
    background-color 0.26s var(--ease),
    border-color 0.26s var(--ease);
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 0.75; }

/* link/button: collapse to a small filled dot */
.cursor-ring.is-link {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-color: transparent;
}

/* work tiles: expand into a labelled lens */
.cursor-ring.is-view {
  width: 88px;
  height: 88px;
  background: rgba(199, 199, 204, 0.10);
  border-color: rgba(199, 199, 204, 0.5);
}
.cursor-ring.is-view.is-visible { opacity: 1; }

/* muted: yield to an element's own cursor effect (e.g. the contact spotlight) */
.cursor-ring.is-muted,
.cursor-ring.is-muted.is-visible { opacity: 0; }

.cursor-ring__label {
  font: 600 0.62rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.26s var(--ease);
  pointer-events: none;
}
.cursor-ring.is-view .cursor-ring__label { opacity: 1; transform: scale(1); }

/* ============================================================
   CINEMATIC FOOTER (curtain-reveal pin) — monochrome port
   ============================================================ */
.footer-reveal {
  position: relative;
  height: 82vh;                        /* scroll distance for the sticky pin */
  margin-top: clamp(3rem, 7vw, 6rem);
}
.cine-footer {
  position: sticky;
  bottom: 0;
  height: 82vh;
  min-height: 34rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  border-top: 1px solid var(--line-soft);
}

/* ambient aurora glow (silver, breathing) */
.cf-aurora {
  position: absolute; left: 50%; top: 50%;
  width: 80vw; height: 60vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(199,199,204,0.10) 0%, rgba(255,255,255,0.05) 40%, transparent 70%);
  animation: cf-breathe 8s ease-in-out infinite alternate;
}
@keyframes cf-breathe {
  from { transform: translate(-50%,-50%) scale(1);   opacity: .6; }
  to   { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
}

/* faint grid, masked top + bottom */
.cf-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

/* giant background wordmark */
.cf-giant {
  position: absolute; left: 50%; bottom: -3vh;
  transform: translateX(-50%);
  z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26vw;
  line-height: .75;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  -webkit-background-clip: text; background-clip: text;
  will-change: transform;
}

/* diagonal sleek marquee */
.cf-marquee {
  position: absolute; top: clamp(4.5rem, 19vh, 13rem); left: 50%; width: 108%;
  transform: translateX(-50%) rotate(-2deg);
  overflow: hidden; z-index: 1;
  border-block: 1px solid var(--line-soft);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding-block: .9rem;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
}
.cf-track { display: flex; width: max-content; animation: cf-marquee 38s linear infinite; }
@keyframes cf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cf-group {
  display: flex; align-items: center; gap: 3rem; padding-inline: 1.5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.cf-star { color: var(--accent); }

/* centre content */
.cf-main {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2rem, 4vw, 3rem);
  width: 100%; max-width: 60rem; margin: 3rem auto 0; padding: 0 var(--gutter);
}
.cf-heading {
  font-family: var(--serif); font-weight: 400; font-synthesis: none;
  font-size: clamp(2.7rem, 8vw, 6.2rem);
  letter-spacing: 0; line-height: 1.1; text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(255,255,255,0.62) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.12));
}
.cf-actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; }
.cf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cf-row-sm { gap: .6rem; }

/* glass pills (reuse the site's magnetic system) */
.cf-pill {
  --pb1: rgba(255,255,255,0.045); --pb2: rgba(255,255,255,0.015);
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  background: linear-gradient(145deg, var(--pb1), var(--pb2));
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--ink-soft); font-weight: 600; font-size: .82rem; line-height: 1;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
}
.cf-pill:hover {
  --pb1: rgba(255,255,255,0.09); --pb2: rgba(255,255,255,0.03);
  border-color: var(--line); color: var(--ink);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.2);
}
.cf-pill-lg { padding: 1.05rem 2rem; font-weight: 700; font-size: .95rem; color: var(--ink); }
.cf-pill svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* bottom bar */
.cf-bottom {
  position: relative; z-index: 3; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
}
.cf-copy { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cf-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-soft);
  background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.cf-badge .cf-star { animation: cf-twinkle 3s ease-in-out infinite; }
@keyframes cf-twinkle { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
.cf-top {
  width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft);
  background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--ink-soft); transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cf-top:hover { color: var(--ink); border-color: var(--line); }
.cf-top svg { width: 1.15rem; height: 1.15rem; transition: transform .3s var(--ease); }
.cf-top:hover svg { transform: translateY(-3px); }

/* bottom-bar tools: pause-motion toggle + back-to-top, side by side */
.cf-tools { display: inline-flex; align-items: center; gap: 0.6rem; }
.cf-pause .ic-play { display: none; }
.cf-pause[aria-pressed="true"] .ic-pause { display: none; }
.cf-pause[aria-pressed="true"] .ic-play { display: block; }
.cf-pause[aria-pressed="true"] { color: var(--ink); border-color: var(--line); }

/* ============================================================
   PAUSE MOTION (WCAG 2.2.2) — the footer toggle puts .motion-paused
   on <html>; CSS freezes the looping garnish, and the rAF loops in
   js/main.js check window.__seleneMotionPaused for the rest.
   ============================================================ */
.motion-paused .cf-track,
.motion-paused .cf-aurora,
.motion-paused .cf-badge .cf-star { animation-play-state: paused; }

@media (max-width: 700px) {
  .cf-giant { font-size: 40vw; }
  .cf-bottom { justify-content: center; text-align: center; }
  .cf-marquee { top: 3.4rem; }        /* clear the centre heading on phones */
  .cf-main { margin-top: 5rem; }
  .trail-srcs { grid-template-columns: repeat(2, 1fr); }   /* sketches stay readable */
}
@media (max-width: 520px) {
  .cf-copy { font-size: 0.74rem; }
  .cf-note, .colophon p { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-aurora, .cf-track, .cf-badge .cf-star { animation: none; }
  .footer-reveal { height: auto; margin-top: clamp(3rem, 7vw, 6rem); }
  .cine-footer { position: static; height: auto; min-height: 0; padding-block: clamp(3rem, 8vw, 6rem); }
  .cf-giant { display: none; }
}

/* ============================================================
   CONTACT PAGE — intro, brief layout, colophon, founders byline
   ============================================================ */
.contact-hero { padding-block: clamp(3.5rem, 8vw, 7rem) 0; }
.contact-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(3rem, 8vw, 6.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.contact-sub {
  margin-top: 1.4rem;
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}
.contact-jump { margin-top: 1.6rem; }
.contact-jump a {
  font-size: 0.84rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-jump a:hover { color: var(--ink); border-color: var(--ink); }

/* what happens after the brief lands: a true sequence, so numbered */
.next-steps { margin-top: 2.2rem; display: grid; gap: 0.9rem; }
.next-steps ol { list-style: none; counter-reset: step; display: grid; gap: 0.7rem; }
.next-steps li {
  counter-increment: step;
  display: flex;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 30ch;
}
.next-steps li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-faint);
  flex: none;
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  max-width: 66rem;
}
.brief-aside { display: grid; gap: 0.7rem; align-content: start; }
.brief-email {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  letter-spacing: 0;
  user-select: all;              /* one click selects the whole address */
  overflow-wrap: anywhere;
}
.brief-promise {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  margin-bottom: 1.6rem;
}
.privacy-notice { margin-top: 1.2rem; font-size: 0.8rem; color: var(--ink-faint); max-width: 52ch; }
.privacy-notice a,
.colophon a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s var(--ease); }
.privacy-notice a:hover,
.colophon a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .brief-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* colophon: small legal block above the footer (no ΓΕΜΗ / phone yet: pending) */
.colophon {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--line-soft);      /* hairline rule */
  padding-top: 1.4rem;
  display: grid;
  gap: 0.4rem;
}
.colophon p { font-size: 0.78rem; color: var(--ink-faint); }
.colophon .colophon-line { color: var(--ink-soft); }

/* founders byline — the section ships commented out in contact.html until
   photos + confirmed names/bios land; un-commenting is then the only step */
.byline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 56rem;
}
.byline-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  margin: 0;
}
.byline-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #0B0B0D;           /* holds the slot while a photo is pending */
  border-bottom: 1px solid var(--line-soft);
}
.byline-card figcaption {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.byline-name {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  letter-spacing: 0;
}
.byline-bio { font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 700px) {
  .byline-grid { grid-template-columns: 1fr; max-width: 26rem; }
}

/* ============================================================
   LEGAL — privacy.html: plain editorial page (plain .site-footer)
   ============================================================ */
.legal { max-width: 46rem; padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; }
.legal h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.legal-updated {
  margin-top: 1.4rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-intro { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1.05rem; }
.legal section { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  letter-spacing: 0;
  margin-bottom: 0.8rem;
}
.legal section p { color: var(--ink-soft); max-width: 64ch; }

/* ============================================================
   404 — plain lost page (plain .site-footer, no boot loader)
   ============================================================ */
.lost {
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding-block: 6rem 4rem;
  position: relative;
  z-index: 2;
}
.lost-code {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.9;
  font-size: clamp(5rem, 20vw, 16rem);
  letter-spacing: -0.045em;
  color: #EDEDED;
  background: linear-gradient(180deg, #FAFAFA, #9A9A9A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lost-title { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 600; margin-top: 0.5rem; }
.lost-sub { max-width: 42ch; color: var(--ink-soft); margin-top: 0.35rem; }
.lost-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.lost .lost-sub[lang="en"] { font-size: 0.88rem; color: var(--ink-faint); }
.lost-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lost-link:hover { border-color: var(--accent); background: rgba(199, 199, 204, 0.06); }

/* ============================================================
   SERVICE PAGE (kataskevi-istoselidon.html / kataskevi-eshop.html)
   Reuses the case-study scaffold (.case, .case-title, .case-section)
   plus an intro, a linked case card and a CTA row.
   ============================================================ */
.svc-intro { margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 58ch; }
.svc-intro p { color: var(--ink-soft); font-size: 1.06rem; }
.svc-intro p + p { margin-top: 0.9rem; }
.svc-body { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.svc .case-section a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s var(--ease); }
.svc .case-section a:hover { color: var(--ink); }
.svc-case { margin-top: clamp(3rem, 7vw, 5rem); max-width: 36rem; }
.svc-case .eyebrow { display: block; margin-bottom: 1rem; }
.svc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.svc-cta p { color: var(--ink-soft); font-size: 1.02rem; max-width: 44ch; }