/* ==== Base / Layout Primitives ==== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--cream);
}

h1, h2, h3 {
  font-weight: var(--weight-bold);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 32px;
}

h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

p {
  margin: 0 0 12px;
}

/* ==== Header ==== */
.site-header {
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: block;
}

.wordmark {
  font-size: 1.05rem;
}

.wordmark-dedalos {
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  color: var(--cream);
  text-transform: uppercase;
}

.wordmark-innovation {
  font-weight: var(--weight-bold);
  color: var(--bronze);
}

.lang-toggle {
  font-size: 0.9rem;
  color: var(--muted);
}

.lang-toggle a {
  color: var(--muted);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms ease-out, color 250ms ease-out;
}

.lang-toggle a:hover {
  color: var(--cream);
  background-size: 100% 1px;
}

.lang-current {
  color: var(--cream);
}

/* ==== Hero ==== */
.hero {
  padding: 64px 0;
}

.hero-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
  align-items: center;
}

.hero-mark img,
.hero-mark svg {
  width: 160px;
  height: 160px;
  max-width: 40vw;
}

.hero-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.hero-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.95rem;
}

.hero-contact-links a,
.hero-email {
  color: var(--muted);
  text-decoration: none;
}

.hero-contact-links a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms ease-out, color 250ms ease-out;
}

.hero-contact-links a:hover {
  color: var(--cream);
  background-size: 100% 1px;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: var(--weight-bold);
}

.btn-bronze {
  background: var(--bronze);
  color: var(--ink);
}

.btn-bronze:hover {
  /* Background stays --bronze (unchanged) so contrast with --ink text
     only improves; a brightness bump signals interactivity without a
     hex/color swap. */
  filter: brightness(1.06);
}

/* ==== Sections ==== */
.section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

/* v2: alternating section rhythm — lifts #pos-douleuoume and #poioi-eimaste
   off the base --bg by 2.5% cream (see --bg-lift in tokens.css). Body text
   sitting directly on the lift (not inside a --panel card) switches to
   --muted-on-lift to hold 4.5:1 — see .step p / .about-copy p below. */
#pos-douleuoume,
#poioi-eimaste {
  background: var(--bg-lift);
}

.section-closing {
  color: var(--muted);
  margin-top: 24px;
}

/* ==== Cards ==== */
.card-grid,
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card,
.case-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel);
  border-radius: 12px;
  padding: 24px;
  transition: transform 220ms ease-out, border-color 220ms ease-out;
}

.card:hover,
.case-card:hover {
  border-color: color-mix(in srgb, var(--bronze) 45%, transparent);
}

/* corner ticks — sharp-cornered bronze brackets, kept as a static cue at
   rest and reinforced on hover. Decorative: aria-hidden by nature of being
   pseudo-elements, no text is carried by them. */
.card::before,
.case-card::before,
.card::after,
.case-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--bronze) 40%, transparent);
}

.card::before,
.case-card::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid color-mix(in srgb, var(--bronze) 40%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--bronze) 40%, transparent);
}

.card::after,
.case-card::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid color-mix(in srgb, var(--bronze) 40%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--bronze) 40%, transparent);
}

.card p,
.case-card p {
  /* AA contrast fix: --muted on --panel is 4.16:1 (fails). Use the
     panel-tuned mix instead — see tokens.css for the computed ratio. */
  color: var(--muted-on-panel);
}

.case-card strong {
  color: var(--cream);
}

/* ==== Steps ==== */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.step {
  position: relative;
  padding-top: 8px;
}

.step-number {
  display: inline-block;
  font-weight: var(--weight-bold);
  font-size: 1.4rem;
  color: var(--bronze);
  margin-bottom: 8px;
}

.step p {
  /* #pos-douleuoume sits on --bg-lift (v2 rhythm) — --muted directly on
     --bg-lift measures 4.45:1 (fails 4.5:1), so use --muted-on-lift here
     instead (5.08:1 — see tokens.css). */
  color: var(--muted-on-lift);
}

/* ==== About ==== */
.about-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.about-mark img {
  width: 120px;
  height: 120px;
}

.about-copy p {
  /* #poioi-eimaste sits on --bg-lift (v2 rhythm) — see .step p note above
     for why --muted-on-lift replaces --muted here. */
  color: var(--muted-on-lift);
  max-width: 68ch;
}

/* ==== Footer ==== */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
}

.footer-line {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.footer-line a {
  color: var(--muted);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms ease-out, color 250ms ease-out;
}

.footer-line a:hover {
  color: var(--cream);
  background-size: 100% 1px;
}

.footer-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
  width: 100%;
}

/* ==== Breakpoints ==== */
@media (min-width: 600px) {
  .hero-actions {
    flex-wrap: nowrap;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 96px 0;
  }

  .section {
    padding: 96px 0;
  }

  .hero-grid {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .hero-mark {
    flex: 0 0 30%;
  }

  .hero-mark img,
  .hero-mark svg {
    width: 100%;
    height: auto;
    max-width: none;
  }

  .hero-copy {
    flex: 1;
  }

  .about-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .about-mark {
    flex: 0 0 120px;
  }
}

/* ============================================================
   ==== v2 Visual Layer — editorial line-work, hero display
   type, grain, labyrinth watermark, scroll reveals, draw-in ====
   ============================================================ */

/* ---- Item 3: grain overlay ----
   Fixed, full-viewport, static feTurbulence noise. pointer-events:none so
   it never blocks interaction; opacity is low enough (.045) that text
   underneath stays crisp. Grayscale only (feColorMatrix saturate=0) — no
   color values in the data URI. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.045;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---- Item 1: editorial line-work section labels ----
   `01 — <heading>` row: aria-hidden number + em-dash, the real h2
   (restyled, not duplicated) as the uppercase tracked label, and a
   trailing hairline that flexes to the container edge. */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
}

.section-label .label-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  font-size: 12px;
  color: var(--bronze);
}

.section-label .label-dash {
  font-size: 12px;
  color: var(--bronze);
}

.section-label h2 {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-color);
  white-space: nowrap;
}

.section-label .label-line {
  flex: 1 1 auto;
  align-self: center;
  height: 1px;
  margin-left: 4px;
  background: var(--line);
}

/* ---- Item 2: hero type overhaul ---- */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.hero-kicker .kicker-rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--bronze);
}

.hero-kicker .kicker-text {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}

.hero-copy h1 {
  font-size: clamp(2.8rem, 1rem + 8vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-align: left;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--bronze);
}

/* ---- Item 6: ambient bronze glow ----
   Single radial wash behind the hero headline, layered over --bg. Kept to
   8% bronze mix so it reads as scene lighting, not a color change — flag
   this one for an eyeball pass, brand is gradient-sensitive. */
.hero {
  background:
    radial-gradient(ellipse 80% 55% at 70% -10%, color-mix(in srgb, var(--bronze) 8%, transparent), transparent 60%),
    var(--bg);
}

/* ---- Item 4: labyrinth watermark ----
   Giant aria-hidden stroke-only mark bleeding off the right edge, behind
   the About section content. */
#poioi-eimaste {
  position: relative;
  overflow: hidden;
}

.mark-watermark {
  position: absolute;
  top: 0;
  right: -15%;
  z-index: 0;
  height: 120vh;
  width: auto;
  pointer-events: none;
}

.mark-watermark path {
  fill: none;
  stroke: color-mix(in srgb, var(--cream) 4%, transparent);
}

.mark-watermark .wm-wall {
  stroke-width: 8;
}

.mark-watermark .wm-d {
  stroke-width: 10;
}

/* ---- Item 5: scroll reveals + hover states ----
   Base state is always fully visible/interactive so the site works with
   JS disabled. The .js class is added synchronously by an inline script
   in <head>; only once it's present, and only under
   prefers-reduced-motion: no-preference, does .reveal start hidden and
   the hero-mark draw-in engage. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js .reveal.in {
    opacity: 1;
    transform: none;
  }

  .js .card:hover,
  .js .case-card:hover {
    transform: translateY(-4px);
  }

  /* ---- Item 7: signature moment — maze line-draw ----
     Wall path draws first, the D path follows with a .4s delay. The
     dasharray value (600) is generously larger than either path's actual
     length, so before the transition starts the stroke is fully hidden;
     once .draw-in lands, offset animates to 0 and the mark completes at
     an end-state identical to the static mark (same paths, same colors). */
  .js .draw-wall,
  .js .draw-d {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.4s ease-out;
  }

  .js .draw-d {
    transition-delay: 0.4s;
  }

  .js.draw-in .draw-wall,
  .js.draw-in .draw-d {
    stroke-dashoffset: 0;
  }
}