/* maxroeck.com
   Fonts: Outfit (headings) + DM Sans (body), self-hosted, SIL Open Font License.
   Never load them from Google Fonts; every page uses these files. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens
   "Ink & Signal Green", taken from the MR logo:
   ink #231F20 (the "m") and green #59C136 (the "R").
   --green is for fills and marks (ink text on it: 7.1:1).
   --green-text is the readable green for text on paper (5:1). */
:root {
  --paper: #F6F6F1;
  --surface: #FFFFFF;
  --ink: #231F20;
  --ink-muted: #57524F;
  --line: #E2E1D9;
  --green: #59C136;
  --green-text: #2E7A1B;
  --green-soft: #E6F4DF;
  --mark-m: var(--ink);

  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(35, 31, 32, .06), 0 8px 24px rgba(35, 31, 32, .06);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121111;
    --surface: #1B1A1A;
    --ink: #F3F2EC;
    --ink-muted: #ABA6A1;
    --line: #2D2B2B;
    --green-text: #7BD65C;
    --green-soft: #1C2A17;
    --mark-m: #F3F2EC;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* the drifting glows reach past the edges; clip them here (not on body, which would
   only hide the viewport scrollbar while the page stays wider than the screen) */
main { overflow-x: clip; }
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a:focus-visible, .lang a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* MR mark: Max's original logo artwork (two filled paths, from mr-motion.js's FILL_M / FILL_R).
   The "m" follows the text colour (white in dark mode), the "R" stays logo green. */
.mark { display: block; }
.mark .mark-fill-m { fill: var(--mark-m); }
.mark .mark-fill-r { fill: var(--green); }
/* Film hosts (mr-motion.js): the static logo inside shows until the film SVG replaces it */
[data-mr-film] { position: relative; color: var(--mark-m); }
[data-mr-film] svg { display: block; inset: 0; width: 100%; height: 100%; }
/* .mr-pending is set on <html> by the inline script in each page's <head>, only when a film
   will play (first page view of the session, motion allowed). Then the static logo stays
   hidden until the film's first frame replaces it, so the finished name never flashes first.
   Failsafe: if the film hasn't started after 3 s, the static logo shows and mr-motion.js keeps
   it (no blank, no redraw). Without JavaScript, on later page views and with reduced motion
   there is no .mr-pending: the static logo shows at once. */
.mr-pending [data-mr-film] .mr-static { animation: mr-fallback 0s linear 3s both; }
@keyframes mr-fallback { from { visibility: hidden; } to { visibility: visible; } }
/* Hidden tab (e.g. opened in the background): the failsafe waits too, so the film plays on first
   view (some browsers advance CSS animations in hidden tabs). .mr-hold comes from the same script. */
.mr-pending.mr-hold [data-mr-film] .mr-static { animation-play-state: paused; }

/* ------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
/* spans keep each part of a line like "SAP & process consultant · Founder · UAE"
   together, so a narrow screen breaks between the parts, never inside one */
.eyebrow span { white-space: nowrap; }
.eyebrow {
  margin: 0 0 14px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-text);
}
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.12;
}
h2 { margin: 0; font-size: clamp(2rem, 5vw, 2.875rem); font-weight: 700; }
h3 { margin: 0; font-size: 1.5rem; font-weight: 600; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #231F20;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: filter .18s ease, background .18s ease;
}
.button:hover { filter: brightness(1.06); }
.hero-actions .button { transition: filter .18s ease, background .18s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.hero-actions .button:hover { transform: translateY(-2px); }
.button--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.button--ghost:hover { filter: none; background: var(--surface); }

/* ------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: padding .3s ease;
}
.site-header.is-scrolled {
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-scrolled .header-inner { padding-top: 11px; padding-bottom: 11px; }
/* Header logo: the mR mark (Max's original artwork) + the "max Roeck" wordmark from the hero.
   Films (mr-motion.js): the name unfolds out of the mR, then slides right while the mark draws
   itself back in front. The name's negative margin cancels its 2% side room, so the gap is exact. */
.brand {
  --brand-mark: 28px;   /* mark height; its width is 97.82 / 88.93 of that */
  --brand-gap: 10px;
  --brand-name: 124px;  /* wordmark width */
  display: flex;
  align-items: center;
  gap: var(--brand-gap);
  margin-right: auto;
  border-radius: 6px;
  text-decoration: none;
}
@media (min-width: 640px) {
  .brand { --brand-mark: 30px; --brand-gap: 12px; --brand-name: 136px; }
}
@media (max-width: 319.98px) { /* e.g. Galaxy Fold cover screen: keep the EN | DE switch in view */
  .brand { --brand-mark: 22px; --brand-gap: 8px; --brand-name: 96px; }
  .header-inner { gap: 12px; }
}
.brand-mark { flex: none; width: calc(var(--brand-mark) * 97.82 / 88.93); height: var(--brand-mark); }
.brand-mark svg { overflow: visible; } /* the film's green click ripples past the mark's edge */
.brand-art {
  display: block;
  flex: none;
  width: var(--brand-name);
  aspect-ratio: 594.52 / 150;
  margin-left: calc(var(--brand-name) * -0.02);
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
/* While the mark waits for its turn (.mr-wait, set by mr-motion.js), the name stands in its
   place; it jumps there without a transition and slides back when the mark starts drawing. */
.brand-mark.mr-wait + .brand-art {
  transform: translateX(calc(-1 * (var(--brand-mark) * 97.82 / 88.93 + var(--brand-gap))));
  transition: none;
}
.site-nav { display: none; gap: 26px; }
.site-nav a {
  position: relative;
  padding: 4px 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
@media (min-width: 640px) {
  .site-nav { display: flex; }
}
.lang {
  display: flex;
  gap: 4px;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.lang a, .lang span {
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
}
.lang a { color: var(--ink-muted); }
.lang a:hover { color: var(--ink); background: var(--line); }
.lang [aria-current] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 32px;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 72px;
}
/* a soft logo-green glow drifting behind the hero */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 193, 54, .22), rgba(89, 193, 54, 0) 68%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-90px, 60px) scale(1.12); }
  100% { transform: translate(-30px, 140px) scale(.94); }
}
/* entrance, one line after the other */
.hero-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-text > :nth-child(1) { animation-delay: .05s; }
.hero-text > :nth-child(2) { animation-delay: .15s; }
.hero-text > :nth-child(3) { animation-delay: .3s; }
.hero-text > :nth-child(4) { animation-delay: .45s; }
.hero-text > :nth-child(5) { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}
/* "max Roeck" wordmark (594.52 x 150 film frame); the film is its own entrance */
.hero h1.name { animation: none; }
/* the film frame has an 11.89-unit inset before the m (2% of 594.52): pull it back so the m
   lines up with the text column */
.name-art { display: block; width: 100%; max-width: 620px; aspect-ratio: 594.52 / 150; margin-left: calc(min(100%, 620px) * -0.02); }
.tagline {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 4.4vw, 1.875rem);
  letter-spacing: -.01em;
  color: var(--ink-muted);
}
.tagline em {
  font-style: normal;
  color: var(--green-text);
  font-weight: 600;
  padding: 0 .08em;
  background: linear-gradient(var(--green-soft), var(--green-soft)) no-repeat 0 88% / 100% 42%;
  animation: marker .7s cubic-bezier(.65, 0, .35, 1) 1.1s both;
}
@keyframes marker { from { background-size: 0% 42%; } }
.lead {
  max-width: 33em;
  margin: 24px 0 0;
  font-size: 1.1875rem;
  color: var(--ink-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
/* phones: round photo above the name; wide screens: portrait on the right */
.hero-photo {
  order: -1;
  width: 132px;
  margin: 0;
  animation: photo-in 1s cubic-bezier(.2, .7, .2, 1) .2s both;
}
@keyframes photo-in { from { opacity: 0; transform: scale(.94); } }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
  background: var(--line);
}
@media (min-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 64px;
    padding-top: 48px;
    padding-bottom: 104px;
  }
  .hero-photo {
    order: 0;
    position: relative;
    width: 100%;
    max-width: 380px;
    justify-self: end;
  }
  .hero-photo::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    border-radius: 28px;
    background: var(--green-soft);
    animation: frame-in .9s cubic-bezier(.2, .7, .2, 1) .65s both;
  }
  @keyframes frame-in { from { opacity: 0; transform: translate(-22px, -22px); } }
  .hero-photo img {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    box-shadow: var(--shadow);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .hero-photo.is-tilting img { transition-duration: .12s; }
}

/* ------------------------------------------------------------ ticker
   Decorative (aria-hidden): the list is in the markup twice and slides by half its width,
   so the loop is seamless. Pauses on hover; static with reduced motion. */
.ticker {
  overflow: hidden;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ticker-track span::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker + .section { border-top: 0; }

/* ------------------------------------------------------------ scroll reveals
   script.js adds .reveal only to elements below the fold, then .is-visible on scroll.
   `translate` (not transform) so it never fights the cards' hover transform. */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-visible { opacity: 1; translate: none; }
.reveal h2 { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.reveal h2 .mask-inner {
  display: inline-block;
  translate: 0 108%;
  transition: translate .95s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.reveal.is-visible h2 .mask-inner { translate: none; }
/* list items and icons inside a revealed block follow one by one */
.reveal .project-points li,
.reveal .social li {
  opacity: 0;
  translate: -10px 0;
  transition: opacity .5s ease, translate .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms + 350ms + var(--j, 0) * 90ms);
}
.reveal.is-visible .project-points li,
.reveal.is-visible .social li { opacity: 1; translate: none; }
.project-points li:nth-child(2), .social li:nth-child(2) { --j: 1; }
.project-points li:nth-child(3), .social li:nth-child(3) { --j: 2; }
.project-points li:nth-child(4), .social li:nth-child(4) { --j: 3; }
.social li:nth-child(5) { --j: 4; }

/* ------------------------------------------------------------ sections */
.section {
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--line);
}
.section-head { max-width: 40em; margin-bottom: 40px; }
.section-head p:not(.eyebrow) { margin: 16px 0 0; color: var(--ink-muted); }

/* projects: the main focus. One column on phones, three on wide screens */
.projects {
  display: grid;
  gap: 18px;
}
@media (min-width: 960px) {
  .projects { grid-template-columns: repeat(3, 1fr); }
}
.project {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.project > * { position: relative; z-index: 1; }
/* glow that follows the pointer (script.js sets --mx / --my) */
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(89, 193, 54, .13), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.project:hover {
  transform: translateY(-6px);
  border-color: rgba(89, 193, 54, .55);
  box-shadow: 0 2px 4px rgba(35, 31, 32, .06), 0 22px 44px rgba(35, 31, 32, .12);
}
.project:hover::before { opacity: 1; }
.project:hover .project-icon { transform: rotate(-6deg) scale(1.07); }
.project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
/* the thin ring keeps dark icons (Roeck's navy) visible on dark cards */
.project-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.project-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.project-tag--new { background: var(--green-soft); border-color: transparent; color: var(--green-text); }
.project p { margin: 12px 0 0; color: var(--ink-muted); font-size: 1rem; }
.project-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: .9375rem;
}
.project-points li {
  position: relative;
  padding-left: 26px;
}
.project-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green-soft);
}
.project-points li::after {
  content: "";
  position: absolute;
  left: 5px; top: calc(.32em + 4px);
  width: 4px; height: 7px;
  border: solid var(--green-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green-text);
  text-decoration: none;
}
.project-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.project-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.project-link:hover svg { transform: translateX(3px); }

/* the smaller "also from me" links */
.also {
  margin-top: 40px;
  display: grid;
  gap: 12px;
}
.also-title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.also-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
@media (min-width: 760px) {
  .also-list { grid-template-columns: 1fr 1fr; }
}
.also-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.also-list a:hover { border-color: var(--green); background: var(--surface); }
.also-list a:hover svg { transform: translateX(3px); color: var(--green-text); }
.also-list svg { transition: transform .2s ease, color .2s ease; }
.also-body { display: grid; gap: 2px; }
.also-name { font-family: var(--font-display); font-weight: 600; }
.also-text { font-size: .875rem; color: var(--ink-muted); line-height: 1.4; }
.also-list svg { flex: none; width: 15px; height: 15px; color: var(--ink-muted); }

/* about */
.about {
  display: grid;
  gap: 40px;
}
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 72px; }
}
.about-text p { margin: 18px 0 0; color: var(--ink-muted); max-width: 36em; }
.about-text p:first-of-type { margin-top: 24px; }
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin: 34px 0 0;
}
.stats div { display: flex; flex-direction: column-reverse; gap: 6px; }
.stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stats dd [data-count] { color: var(--green-text); }
.stats dt { font-size: .875rem; color: var(--ink-muted); }
.facts {
  align-self: start;
  margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: grid;
  gap: 16px;
}
.facts div { display: grid; gap: 2px; }
.facts dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.facts dd { margin: 0; font-weight: 500; }

/* social icons */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.social a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-3px); }
.social a { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

/* FAQ: native <details>, generated with its JSON-LD by design/seo.py */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--green-text), var(--green-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--green-text), var(--green-text)) center / 2px 12px no-repeat,
    var(--green-soft);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--green-text); }
.faq summary:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 6px; }
.faq details p {
  max-width: 42em;
  margin: 0 0 22px;
  color: var(--ink-muted);
}
.faq details[open] p { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.faq a { color: var(--green-text); text-underline-offset: .18em; }

/* contact */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -120px;
  bottom: -220px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 193, 54, .18), rgba(89, 193, 54, 0) 68%);
  animation: drift 16s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
.contact .button:hover { transform: translateY(-2px); }
.contact .button { transition: filter .18s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.contact h2 { margin-top: 2px; }
.contact p:not(.eyebrow) { max-width: 32em; margin: 16px auto 0; color: var(--ink-muted); }
.contact .button { margin-top: 28px; }
.contact-section { padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------ legal pages */
.legal {
  max-width: 760px;
  padding-top: 24px;
  padding-bottom: 80px;
}
.legal h1 { margin: 0; font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; }
.legal-note { margin: 12px 0 0; color: var(--ink-muted); font-size: .9375rem; }
.legal h2 { margin: 44px 0 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.legal h3 { margin: 24px 0 0; font-size: 1.0625rem; font-weight: 600; }
.legal p, .legal address, .legal ul { margin: 10px 0 0; color: var(--ink-muted); }
.legal address { font-style: normal; color: var(--ink); }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 4px; }
.legal a { color: var(--green-text); text-underline-offset: .18em; }
.legal .back { display: inline-block; margin-top: 48px; font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------ footer */
.footer {
  margin-top: auto;
  padding: 28px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  font-size: .8125rem;
  color: var(--ink-muted);
}
.footer a, .link-button { color: var(--ink-muted); text-decoration: none; }
.footer a:hover, .link-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
/* "Cookie settings" is a button (it opens the banner) styled like the footer links */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.legal .link-button { color: var(--green-text); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }

/* ------------------------------------------------------------ cookie banner
   Built by consent.js, inserted first in <body> so keyboard and screen-reader users reach it
   first; shown fixed at the bottom left. Decline and Accept are the same size on purpose. */
.consent {
  position: fixed;
  z-index: 90;
  left: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(35, 31, 32, .08), 0 18px 48px rgba(35, 31, 32, .18);
}
.consent-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.consent-text { margin: 0 0 16px; font-size: .875rem; line-height: 1.55; color: var(--ink-muted); }
.consent-text a { color: var(--green-text); text-underline-offset: .18em; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .button { flex: 1; justify-content: center; padding: 10px 16px; font-size: .9375rem; }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; }
}

/* ------------------------------------------------------------ 404 */
.soon {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.soon .mark { width: 140px; height: 140px; margin-bottom: 20px; }
.notfound h1 { margin: 0; font-size: clamp(2.5rem, 9vw, 4rem); }
.intro { max-width: 34em; margin: 22px 0 32px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}