/* ============================================================
   ANOVA PROJECTS — Site chrome & page sections
   Logo · Navigation · Hero · Outcomes · Pillars · Philosophy
   Work · Process · CTA · Footer
   ============================================================ */

/* ------------------------------------------------------------
   Logo lockup
   ------------------------------------------------------------ */

.logo {
  /* Grayscale antialiasing: the letterspaced sub-line is small enough that
     subpixel rendering fringes it with colour. */
  -webkit-font-smoothing: antialiased;
  opacity: .999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-strong);
  transition: opacity var(--dur-2) var(--ease);
}
.logo:hover { opacity: .82; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__mark .lm-ring { fill: none; stroke: var(--anova-silver); vector-effect: non-scaling-stroke; }
.logo__mark .lm-core { fill: var(--accent-bright); }
.logo__type { height: 32px; width: auto; flex: none; }
.logo__type .lt-glyph { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: square; stroke-linejoin: miter; }
.logo__type .lt-sub {
  fill: currentColor;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 9.5px;
}
.logo--sm .logo__mark { width: 30px; height: 30px; }
.logo--sm .logo__type { height: 25px; }
.logo--lg .logo__mark { width: 56px; height: 56px; }
.logo--lg .logo__type { height: 38px; }

/* Focus point at the heart of the mark breathes very slowly */
@media (prefers-reduced-motion: no-preference) {
  .logo__mark .lm-core { animation: fl-breathe 6s var(--ease-in-out) infinite; }
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-block: 14px;
  background: transparent;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.site-nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.site-nav.is-stuck {
  background: var(--bg-scrim);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-nav);
}
.site-nav.is-stuck::after { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: calc(var(--nav-h) - 28px);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links li { margin: 0; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav__link:hover { color: var(--text-strong); background: rgba(255, 255, 255, .03); }
.nav__link[aria-current="page"] { color: var(--text-strong); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-dot);
}

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__cta { display: none; }

/* Icon-only control (language, menu) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}
.icon-btn:hover { color: var(--text-strong); border-color: var(--border-strong); background: rgba(255, 255, 255, .03); }
.icon-btn .icon { color: currentColor; }
.icon-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--border-accent); }

/* Language switcher */
.lang { position: relative; }
.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--anova-moon);
  box-shadow: var(--shadow-raise);
  list-style: none;
  margin: 0;
  z-index: var(--z-overlay);
}
.lang__menu li { margin: 0; }
.lang__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lang__opt:hover { background: rgba(255, 255, 255, .04); color: var(--text-strong); }
.lang__opt[aria-checked="true"] { color: var(--text-strong); }
.lang__opt[aria-checked="true"]::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow-dot);
}

/* Mobile drawer */
.nav__toggle { display: grid; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-void);
  padding: 14px var(--gutter) calc(var(--gutter) + 8px);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
  overflow-y: auto;
}
/* The closed state is the [hidden] attribute (display:none), not
   visibility:hidden. Transitioning visibility would leave the drawer
   unfocusable until a frame had been painted, which strands keyboard
   users if the browser is not compositing. */
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--nav-h) - 28px);
}
.mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: var(--s-8) 0 0;
  display: grid;
  gap: 2px;
  align-content: start;
}
.mobile-menu__links li { margin: 0; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 16px 4px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-light);
  color: var(--text-2);
  letter-spacing: -0.01em;
  transition: color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
}
.mobile-menu__link .icon { color: var(--text-4); width: 20px; height: 20px; }
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: var(--text-strong); padding-left: 10px; }
.mobile-menu__link[aria-current="page"] { color: var(--text-strong); }
.mobile-menu__link[aria-current="page"] .icon { color: var(--accent); }
.mobile-menu__foot { display: grid; gap: var(--s-4); padding-top: var(--s-6); }

body.is-locked { overflow: hidden; }

@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero__title { margin-bottom: var(--s-5); }
.hero__title .line { display: block; }
.hero__title .accent-word { color: var(--accent); }
.hero__lead { margin-bottom: var(--s-7); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }

.hero__figure {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}
.hero__figure svg { width: 100%; height: 100%; overflow: visible; }

/* Proof strip under the hero */
.hero__meta {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-5);
}
.hero__meta-label { color: var(--text-4); font-size: var(--fs-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.hero__meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__meta-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.hero__meta-list .icon { color: var(--text-3); width: 20px; height: 20px; }

@media (min-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero__meta { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-8); }
}

/* ------------------------------------------------------------
   Outcomes
   ------------------------------------------------------------ */

.outcome {
  align-content: start;
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(34, 208, 238, .05), transparent 60%),
    var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.outcome:hover { border-color: var(--border); transform: translateY(-2px); }
.outcome__icon { color: var(--text); }
.outcome h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); margin: 0; }
.outcome p { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.outcome__list {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.outcome__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.outcome__list li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--anova-steel);
}
.outcome__rings {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  opacity: .35;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Pillars (What we build)
   ------------------------------------------------------------ */

.pillar { gap: var(--s-5); }
.pillar__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.pillar__head h3 { margin: 0 0 4px; }
.pillar__kicker { font-size: var(--fs-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }

/* ------------------------------------------------------------
   Philosophy / sequence
   ------------------------------------------------------------ */

.sequence {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sequence li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-inset);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.sequence li:hover { border-color: var(--border-accent); background: var(--bg-surface); }
.sequence__num {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: .1em;
  color: var(--accent);
  min-width: 22px;
}
.sequence__word { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-light); color: var(--text-strong); min-width: 128px; }
.sequence__desc { color: var(--text-3); font-size: var(--fs-sm); }

@media (max-width: 620px) {
  .sequence li { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .sequence__word { min-width: 0; }
  .sequence__desc { flex-basis: 100%; }
}

.split {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + 32px); }
  .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* ------------------------------------------------------------
   Process
   ------------------------------------------------------------ */

.process {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.process__item {
  align-content: start;
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  margin: 0;
  transition: border-color var(--dur-3) var(--ease), background var(--dur-3) var(--ease);
}
.process__item:hover { border-color: var(--border); background: var(--bg-surface-2); }
.process__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.process__num {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: .12em;
  color: var(--text-4);
}
.process__item h3 { font-size: var(--fs-body); font-weight: var(--fw-medium); margin: 0; }
.process__item p { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }
.process__item .icon { color: var(--text-2); }

@media (min-width: 640px)  { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px)  { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 940px) {
  /* Seven steps in a four-column grid would leave a hole. "Understand" takes
     the extra width instead — it is the step everything else depends on. */
  .process__item:first-child { grid-column: span 2; }
}

/* Connecting flow line behind the process on wide screens */
.process-wrap { position: relative; }
.process-flow { position: absolute; inset-inline: 0; top: 50%; height: 1px; display: none; }
@media (min-width: 940px) { .process-flow { display: block; } }

/* ------------------------------------------------------------
   Work / case studies
   ------------------------------------------------------------ */

.work-card { gap: var(--s-5); }
.work-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(34, 208, 238, .1), transparent 55%),
    linear-gradient(160deg, var(--anova-moon), var(--bg-inset));
  overflow: hidden;
}
.work-card__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.work-card__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.work-card__scope li {
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: var(--fs-caption);
}

/* ------------------------------------------------------------
   CTA band
   ------------------------------------------------------------ */

.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}
.cta-band__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.cta-band__title { margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  position: relative;
  background: var(--bg-well);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(48px, 6vw, 80px) var(--s-6);
  overflow: hidden;
}
.site-footer__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.site-footer__brand { max-width: 340px; display: grid; gap: var(--s-4); align-content: start; }
.site-footer__tagline {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-4);
  line-height: 1.9;
}
.site-footer__cols { display: grid; gap: var(--s-6); }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--text-2); font-size: var(--fs-sm); transition: color var(--dur-2) var(--ease); }
.site-footer a:hover { color: var(--accent); }

.site-footer__bottom {
  position: relative;
  z-index: var(--z-base);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.site-footer__bottom a { font-size: var(--fs-xs); color: var(--text-4); }

.site-footer__field {
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  opacity: .32;
  pointer-events: none;
}

@media (min-width: 720px)  { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }

/* ------------------------------------------------------------
   Page header (interior pages)
   ------------------------------------------------------------ */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline);
}
.page-head__inner { position: relative; z-index: var(--z-base); max-width: 780px; }
.page-head h1 { margin-bottom: var(--s-5); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--text-4);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: "/"; color: var(--text-4); }

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */

.contact-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .contact-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.next-steps li { display: flex; gap: var(--s-4); margin: 0; }
.next-steps__num {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
}
.next-steps h3 { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin: 0 0 4px; }
.next-steps p { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }

/* ------------------------------------------------------------
   Misc page furniture
   ------------------------------------------------------------ */

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.anchor-nav li { margin: 0; }
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: all var(--dur-2) var(--ease);
}
.anchor-nav a:hover { border-color: var(--border-accent); color: var(--text-strong); }
.anchor-nav .icon { width: 16px; height: 16px; color: var(--text-3); }
.anchor-nav a:hover .icon { color: var(--accent); }

.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-line);
  background: var(--bg-inset);
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.6;
}
.note .icon { flex: none; color: var(--accent); width: 18px; height: 18px; margin-top: 2px; }

.error-page { display: grid; place-items: center; min-height: 62vh; text-align: center; }

/* ------------------------------------------------------------
   Target size — WCAG 2.2 (2.5.8). Text links in navigational
   lists get real vertical padding rather than relying on the
   spacing exception.
   ------------------------------------------------------------ */

.site-footer ul { gap: 2px; }
.site-footer ul a {
  display: inline-block;
  padding-block: 7px;
}
.site-footer__bottom nav a {
  display: inline-block;
  padding-block: 6px;
}
.breadcrumb a { display: inline-block; padding-block: 5px; }
.link-arrow { padding-block: 6px; }


/* ------------------------------------------------------------
   Long-form legal text (Impressum, Datenschutzerklärung).
   Capped measure for readability, aligned with the page heading
   above it rather than centred in the viewport.
   ------------------------------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-h3); }
.prose .spec-list li { padding: 8px 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: .92em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  color: var(--text);
}