/* ==========================================================================
   SATYROS — Portfolio (Vanilla HTML/CSS/JS rebuild of the Next.js project)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Roboto-thin';
  src: url('../assets/fonts/Roboto-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-regular';
  src: url('../assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto-bold';
  src: url('../assets/fonts/Roboto-Bold.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
hr { height: 0; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
img, svg, video, canvas, audio, embed, object { vertical-align: middle; display: flex; }
iframe { vertical-align: middle; }  /* no display:block — breaks embedded widgets like hCaptcha */
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; color: inherit; background-color: transparent; border-radius: 0; }
button { cursor: pointer; }
textarea { resize: vertical; }
ol, ul, menu { list-style: none; }
[hidden] { display: none !important; }

/* ---------- Design tokens ---------- */
:root {
  color-scheme: dark;
  --background: oklch(0.16 0.006 285);
  --foreground: oklch(0.97 0 0);
  --card: oklch(0.21 0.006 285);
  --card-foreground: oklch(0.97 0 0);
  --primary: oklch(0.97 0 0);
  --primary-foreground: oklch(0.16 0.006 285);
  --secondary: oklch(0.27 0.006 285);
  --muted: oklch(0.27 0.006 285);
  --muted-foreground: oklch(0.68 0.006 285);
  --accent: oklch(0.27 0.006 285);
  --lime: oklch(0.85 0.21 128);
  --lime-invert: oklch(0.55 0.22 264);
  --destructive: oklch(0.6 0.22 25);
  --border: oklch(1 0 0 / 10%);
  --border-lime: oklch(0.16 0.006 285 / 20%);
  --input: oklch(1 0 0 / 12%);
  --ring: var(--lime);
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --font-heading: 'Roboto-bold', 'Arial', sans-serif;
  --font-heading-accent: 'Roboto-thin', 'Arial', sans-serif;
  --font-sans: 'Roboto', 'Arial', sans-serif;
  --font-mono: 'Roboto', 'Arial', sans-serif;
  --ease-site: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-site: cubic-bezier(0.22, 1, 0.36, 1);
}

html.light {
  color-scheme: light;
  --background: oklch(1 0 0);
  --foreground: oklch(0.16 0.006 285);
  --card: oklch(0.98 0 0);
  --card-foreground: oklch(0.16 0.006 285);
  --primary: oklch(0.16 0.006 285);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.96 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0.006 285);
  --accent: oklch(0.96 0 0);
  --lime: oklch(0.55 0.22 264);
  --lime-invert: oklch(0.85 0.21 128);
  --destructive: oklch(0.58 0.24 27);
  --border: oklch(0 0 0 / 10%);
  --border-lime: oklch(0.97 0 0 / 20%);
  --input: oklch(0 0 0 / 12%);
}

/* ---------- Base ---------- */
html { font-family: var(--font-sans); scrollbar-width: thin; scrollbar-color: var(--lime) transparent; overflow-x: hidden; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 0.4s ease, color 0.4s ease;
}
*, *::before, *::after { border-color: var(--border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--lime) 75%, var(--background)); border-radius: 999px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

@media (pointer: fine) {
  html.custom-cursor-active * { cursor: none !important; }
}

a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }

/* ---------- Typography helpers ---------- */
.font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.text-lime { color: var(--lime); }
.text-foreground { color: var(--foreground); }
.text-muted { color: var(--muted-foreground); }
.text-background { color: var(--background); }



mark{ background-color: var(--lime); padding: 0px 5px; color: var(--background);}



.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--lime);
}
.eyebrow .rule { height: 1px; width: 3rem; background: var(--lime); flex-shrink: 0; }

@media (min-width: 640px) { .eyebrow { font-size: 9px; } }
@media (min-width: 768px) { .eyebrow { font-size: 11px; } }
@media (min-width: 1280px) { .eyebrow { font-size: 11px; } }



/* ---------- Layout helpers ---------- */
.container-xl { max-width: 1600px; margin-inline: auto; }
@media (min-width: 768px) { .container-xl { padding-inline: 0rem; } }

.section { position: relative; }

.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;
}

img, .img-cover { object-fit: cover; }

/* ---------- Bilingual text toggling ---------- */

html[data-lang="en"] [data-l="de"] { display: none !important; }
html[data-lang="de"] [data-l="en"] { display: none !important; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
  /* Fast exit — element disappears quickly when scrolled away */
  transition:
    opacity  0.25s ease-in,
    transform 0.25s ease-in;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* Slow, layered entrance — opacity lingers, transform springs */
  transition:
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-line {
  display: block;
  overflow: hidden;
}
.reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-line.is-visible > span { transform: translateY(0); }

/* ==========================================================================
   Page loader
   ========================================================================== */
.page-loader {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--background);
  transition: transform 0.7s var(--ease-site);
}
.page-loader.is-done { transform: translateY(-100%); pointer-events: none; }
.page-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-inline: 1.5rem; text-align: center; }
.page-loader__tag { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--lime); }
.page-loader__title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; font-size: 4rem; line-height: 1; color: var(--foreground); }
@media (min-width: 768px) { .page-loader__title { font-size: 6rem; } }
.page-loader__bar { margin-top: 0.5rem; height: 1px; width: 12rem; overflow: hidden; background: var(--border); }
@media (min-width: 768px) { .page-loader__bar { width: 18rem; } }
.page-loader__bar-fill { height: 100%; width: 0%; background: var(--lime); }
.page-loader__count { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-foreground); }

/* ==========================================================================
   Page transition
   ========================================================================== */
.page-shell {
  position: relative;
}
.page-enter {
  animation: pageEnter 0.7s var(--ease-site) both;
}
@keyframes pageEnter {
  from { transform: translateX(6%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.page-exit {
  animation: pageExit 0.4s var(--ease-site) both;
}
@keyframes pageExit {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-8%); opacity: 0; }
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.custom-cursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; }
@media (pointer: fine) and (min-width: 768px) {
  html.custom-cursor-active .custom-cursor { display: block; }
}
.custom-cursor__dot {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 999px;
  background: var(--lime); transform: translate(-50%, -50%);
  will-change: transform;
}
.custom-cursor__ring {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--foreground) 60%, transparent); 
  transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
  transition: width 0.25s cubic-bezier(0.22,1,0.36,1), height 0.25s cubic-bezier(0.22,1,0.36,1),
              border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
  will-change: transform, width, height;
}
.custom-cursor__ring.is-hovering { width: 48px; height: 48px; border-color: var(--lime); }
.custom-cursor__ring.is-down { transform: translate(-50%, -50%) scale(0.85); }
.custom-cursor__ring.has-label { width: 72px; height: 72px; background: var(--lime); border-color: var(--lime); }
.custom-cursor__label {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--background);
  white-space: nowrap;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  padding: 1rem 1rem 0;
}
@media (min-width: 768px) { .navbar { padding: 1.5rem 2rem 0; } }
.navbar__bar {
  margin-inline: auto; max-width: 1700px; display: flex; align-items: center; justify-content: space-between;
  border-radius: 999px; background: var(--foreground);
}
@media (min-width: 768px) {
  .navbar__bar { justify-content: flex-start; gap: 0.75rem; border-radius: 0; background: transparent; }
}
@media (max-width: 768px) {
  .navbar__bar { border-style: solid; border-width: 1px; border-color: var(--background); }
}

.navbar__logo {
  display: flex; height: 3.5rem; flex-shrink: 0; align-items: center; border-radius: 999px;
  padding-inline: 1.75rem; color: var(--background); transition: transform 0.2s ease; border-style: solid;  border-color: var(--background);
}
.navbar__logo:hover { transform: scale(1.03); }
@media (min-width: 768px) { .navbar__logo { height: 4rem; padding-inline: 2.25rem; background: var(--foreground); border-width: 1px;} }
.navbar__logo span { font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: -0.01em; }
@media (min-width: 768px) { .navbar__logo span { font-size: 1.5rem; } }

.navbar__nav { display: none; }
@media (min-width: 768px) {
  .navbar__nav { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--foreground); padding-inline: 2rem; height: 4rem; border-width: 1px; border-style: solid; border-color: var(--background);}
}
.navbar__links { display: flex; align-items: center; gap: 2.5rem; }
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__links { gap: 1.1rem; }
  .navbar__nav { padding-inline: 1rem; }
}
.navbar__link {
  position: relative; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  color: color-mix(in oklch, var(--background) 50%, transparent); transition: color 0.2s ease;
}
.navbar__link:hover { color: var(--background); }
.navbar__link.is-active { color: var(--background); }
.navbar__link.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: -0.4rem; width: 4px; height: 4px;
  border-radius: 999px; background: var(--lime); transform: translateX(-50%);
}

.navbar__controls {
  display: flex; height: 3.5rem; flex-shrink: 0; align-items: center; gap: 0.75rem;
  border-radius: 999px; background: var(--foreground); padding-inline: 0.75rem; border-style: solid; border-color: var(--background);
}
@media (min-width: 768px) { .navbar__controls { height: 4rem; padding-inline: 1rem; border-width: 1px; } }

.lang-toggle-wrap { border-radius: 999px; background: color-mix(in oklch, var(--background) 10%, transparent); padding: 0.25rem; }
.lang-toggle {
  position: relative; display: flex; align-items: center; border-radius: 999px;
  background: color-mix(in oklch, var(--foreground) 10%, transparent);
  padding: 0.25rem; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.lang-toggle__btn {
  position: relative; z-index: 1; border-radius: 999px; padding: 0.25rem 0.625rem;
  text-transform: uppercase; color: color-mix(in oklch, var(--background) 50%, transparent);
  transition: color 0.2s ease;
}
.lang-toggle__btn.is-active { color: var(--foreground); }
.lang-toggle__pill {
  position: absolute; inset: 0.25rem; z-index: 0; border-radius: 999px; background: var(--background);
  transition: transform 0.35s cubic-bezier(0.34,1.3,0.4,1);
  width: calc(50% - 0.25rem);
}
.lang-toggle__pill[data-pos="de"] { transform: translateX(100%); }

.menu-toggle {
  display: flex; width: 2.25rem; height: 2.25rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
}
.menu-toggle__bar { display: block; height: 2px; width: 1.25rem; border-radius: 999px; background: var(--background); transition: transform 0.3s var(--ease-out-site); }
.menu-toggle.is-open .menu-toggle__bar:first-child { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:last-child { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center;
  background: var(--background); padding-inline: 1.5rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-site);
  visibility: hidden;
}
@media (min-width: 768px) { .mobile-menu { padding-inline: 2rem; } }
.mobile-menu.is-open { clip-path: inset(0 0 0% 0); visibility: visible; }
.mobile-menu__nav { margin-inline: auto; width: 100%; max-width: 1600px; }
.mobile-menu__list { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-menu__item { opacity: 0; transform: translateY(40px); transition: opacity 0.5s var(--ease-out-site), transform 0.5s var(--ease-out-site); }
.mobile-menu.is-open .mobile-menu__item { opacity: 1; transform: translateY(0); }
.mobile-menu__link {
  display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border);
  padding-block: 1rem; font-family: var(--font-heading); font-size: 40px; line-height: 1; color: var(--foreground);
  transition: color 0.2s ease;
}
.mobile-menu__link:hover { color: var(--lime); }
@media (min-width: 768px) { .mobile-menu__link { font-size: 80px; } }
.mobile-menu__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.theme-toggle {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 50;
  display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--foreground); color: var(--background);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; transition: opacity .2s ease, transform .25s ease; }
.theme-toggle .icon-sun { display: none; }
html.light .theme-toggle .icon-moon { display: none; }
html.light .theme-toggle .icon-sun { display: block; }

/* ==========================================================================
   Mobile menu utility row — language + theme controls, relocated here
   from the navbar / floating corner button below 768px (see media query
   further down). Sits as its own row under the nav links, separated by
   a thin rule, mirroring the pill/circle button language already used
   elsewhere on the site.
   ========================================================================== */
.mobile-menu-utility {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out-site) 0.1s, transform 0.5s var(--ease-out-site) 0.1s;
}
.mobile-menu.is-open .mobile-menu-utility { opacity: 1; transform: translateY(0); }
.theme-toggle--inline {
  position: static; flex-shrink: 0; box-shadow: none;
}

@media (max-width: 767px) {
  /* The navbar's own language pill and the floating corner theme button
     both move into the mobile menu above — hide the originals so there
     is exactly one of each on screen at a time. */
  .navbar__controls > .lang-toggle-wrap { display: none; }
  body > .theme-toggle:not(.theme-toggle--inline) { display: none; }
}
@media (min-width: 768px) {
  /* Only relevant below 768px — hide on desktop so it never doubles up
     with the navbar's own language pill and floating theme button. */
  .mobile-menu-utility { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--background); padding: 4rem 2rem 2rem; }
@media (min-width: 768px) { .footer { padding: 6rem 6rem 2rem; } }
.footer__grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__brand { font-family: var(--font-heading); font-size: 2.25rem; color: var(--foreground); }
@media (min-width: 768px) { .footer__brand { font-size: 3rem; } }
.footer__tagline { margin-top: 1rem; max-width: 22rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.footer__cta {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; background: var(--foreground); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  color: #08110a; transition: transform 0.5s ease;
}
html.light .footer__cta { color: #fff; }
.footer__cta:hover { transform: scale(1.05); background: var(--lime)}
.footer__heading { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
.footer__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.footer__list2 { display: flex; flex-direction: column; justify-content: flex-end; }
.footer__list a { font-size: 0.875rem; color: color-mix(in oklch, var(--foreground) 80%, transparent); transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 0.25rem; }
.footer__list a:hover { color: var(--lime); }
.footer__list a svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.2s ease; }
.footer__list a:hover svg { opacity: 1; }
.footer__bottom {
  margin-top: 4rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--foreground); padding-top: 1.5rem; font-size: 0.75rem; color: var(--muted-foreground);
}
@media (min-width: 768px) { .footer__bottom { flex-direction: row; align-items: center; } }
.footer__bottom a:hover { color: var(--lime); }

.footer-links{
  display: flex; flex-direction: row; justify-content: space-between;
}

.social-link{
  height: 35px;
  width: 35px;
  padding:8px;
  border-radius: 4px;
  background-color: var(--foreground);
  margin-bottom: 10px;
  transition: transform 0.5s ease
}

.social-link:hover{
  background-color: var(--lime);
  transform: scale(1.05);
}

.social-link svg{
  color: var(--background);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh; height: 100svh;   /* use svh so mobile chrome doesn't cause jump */
  align-items: center;
  overflow: hidden;
  padding: 6rem 3rem 2rem;
  z-index: 0;
}
@media (min-width: 768px) { .hero { padding-inline: 6rem; } }
.hero__grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background-image: linear-gradient(var(--foreground) 1px, transparent 1px), linear-gradient(90deg, var(--foreground) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero__content {
  position: relative; margin-inline: auto; width: 100%; max-width: 1600px;
  display: grid; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .hero__content { grid-template-columns: 1.4fr 1fr; } }
.hero__eyebrow-row { display: flex; align-items: center; gap: 1rem; opacity: 0; animation: fadeInLeft 0.6s 0.2s var(--ease-out-site) forwards; }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
.hero__title {
  margin-top: 1.5rem; font-family: var(--font-heading); font-size: 34px; line-height: 1.1; color: var(--foreground);
}
@media (min-width: 640px) { .hero__title { font-size: 34px; } }
@media (min-width: 768px) { .hero__title { font-size: 64px; } }
@media (min-width: 1280px) { .hero__title { font-size: 90px; } }
.hero__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color:var(--lime); }
.hero__intro {
  margin-top: 2rem; max-width: 28rem; font-size: 16px; line-height: 1.6; color: var(--muted-foreground);
  opacity: 0; animation: fadeInUp 0.6s 0.7s var(--ease-out-site) forwards;
}
@media (min-width: 640px) { .hero__intro { font-size: 16px; } }
@media (min-width: 768px) { .hero__intro { font-size: 18px; } }
@media (min-width: 1280px) { .hero__intro { font-size: 18px; } }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero__badge {
  margin-top: 2.5rem; display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--lime) 50%, transparent); padding: 0.625rem 1.25rem;
  opacity: 0; animation: fadeInUp 0.6s 0.85s var(--ease-out-site) forwards;
}
.hero__badge-dot { position: relative; display: flex; width: 0.5rem; height: 0.5rem; }
.hero__badge-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--lime); opacity: 0.75;
  animation: pingDot 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
.hero__badge-dot::after { content: ''; position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--lime); }
@keyframes pingDot { 75%, 100% { transform: scale(2); opacity: 0; } }
.hero__badge span:last-child { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.hero__card {
  position: relative; margin-left: auto; width: 100%; max-width: 24rem; overflow: hidden;
  border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); padding: 2rem;
  opacity: 0; animation: cardIn 0.8s 0.6s var(--ease-out-site) forwards;
}
@media (max-width: 1024px) { .hero__card  { display: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.hero__card-glow { position: absolute; right: -2.5rem; bottom: -4rem; width: 14rem; height: 14rem; border-radius: 999px; background: color-mix(in oklch, var(--lime) 20%, transparent); filter: blur(64px); pointer-events: none; }
.hero__card-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.hero__card-top span:last-child { color: var(--lime); }
.hero__card-stat { margin-top: 3rem; }
.hero__card-stat .value { font-family: var(--font-heading); font-size: 6rem; line-height: 1; color: var(--foreground); }
.hero__card-stat p { margin-top: 0.75rem; max-width: 14rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.hero__card-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero__card-tags span { border-radius: 999px; border: 1px solid var(--border); padding: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in oklch, var(--foreground) 70%, transparent); }

.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; animation: fadeIn 0.6s 1.1s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@media (min-width: 768px) { .hero__scroll { display: flex; } }
.hero__scroll span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.hero__scroll-line { height: 2.5rem; width: 1px; background: linear-gradient(to bottom, var(--lime), transparent); transform-origin: top; animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine { 0%,100% { transform: scaleY(0.3);} 50% { transform: scaleY(1);} }

/* AnimatedLine for hero headline */
.line-wrap { display: block; overflow: hidden; }
.line-wrap > span { display: block; transform: translateY(110%); animation: lineUp 0.8s var(--ease-out-site) forwards; }
.line-wrap:nth-child(1) > span { animation-delay: 0.3s; }
.line-wrap:nth-child(2) > span { animation-delay: 0.4s; }
.line-wrap:nth-child(3) > span { animation-delay: 0.5s; }
@keyframes lineUp { to { transform: translateY(0); } }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee { border-block: 1px solid var(--border); background: var(--background); padding-block: 1.5rem; }
@media (min-width: 768px) { .marquee { padding-block: 2rem; } }
.marquee__track { display: flex; overflow: hidden; }
.marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: 2rem; padding-right: 2rem; animation: marquee 30s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 2rem; }
.marquee__item span:first-child { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.875rem; text-transform: uppercase; color: var(--foreground); }
@media (min-width: 768px) { .marquee__item span:first-child { font-size: 3rem; } }
.marquee__item span:last-child { color: var(--lime); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.logo-rows { border-block: 1px solid var(--border); background: var(--background); padding-block: 3.5rem; }
@media (min-width: 768px) { .logo-rows { padding-block: 5rem; } }
.logo-rows__head { margin: 0 auto 2.5rem; max-width: 80rem; padding-inline: 1.5rem; }
@media (min-width: 768px) { .logo-rows__head { margin-bottom: 3.5rem; } }
.logo-rows__head p:first-child { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--lime); }
.logo-rows__head h2 { margin-top: 0.75rem; font-family: var(--font-heading); font-size: 1.875rem; text-transform: uppercase; color: var(--foreground); }
@media (min-width: 768px) { .logo-rows__head h2 { font-size: 3rem; } }
.logo-rows__rows { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .logo-rows__rows { gap: 2rem; } }
.logo-row { display: flex; overflow: hidden; }
.logo-row__group { display: flex; flex-shrink: 0; align-items: center; gap: 3rem; padding-right: 3rem; animation: marquee 30s linear infinite; }
.logo-row__group.reverse { animation: marquee-reverse 35s linear infinite; }
.logo-row__item { display: flex; align-items: center; gap: 3rem; }
.logo-row__item span:first-child { white-space: nowrap; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.5rem; text-transform: uppercase; color: var(--muted-foreground); transition: color 0.3s ease; }
.logo-row__logo { height: 1.5rem; width: auto; display: block; fill: var(--muted-foreground); transition: fill 0.3s ease; }
.logo-row__item:hover .logo-row__logo { fill: var(--foreground); }
@media (min-width: 768px) { .logo-row__logo { height: 2.25rem; } }
.logo-row__item:hover span:first-child { color: var(--foreground); }
@media (min-width: 768px) { .logo-row__item span:first-child { font-size: 2.25rem; } }
.logo-row__item span:last-child { color: var(--lime); }

/* ==========================================================================
   About preview (home)
   ========================================================================== */
.about-preview { position: relative; padding: 7rem 2rem; }
@media (min-width: 768px) { .about-preview { padding: 10rem 6rem; } }
.about-preview__grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .about-preview__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; } }
.about-preview__portrait { position: relative; border-radius: 1.5rem; }
.about-preview__portrait-caption { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: 1.5rem; }
.about-preview__portrait-caption p:first-child { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; }
.about-preview__portrait-caption p:last-child { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--lime); }

/* 180° flip card: hover reveals "how I work" on the back */
.flip-card { perspective: 1800px; width: 100%; aspect-ratio: 4 / 5; }
.flip-card__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  transform-style: preserve-3d;
}
@media (hover: hover) {
  .flip-card:hover .flip-card__inner { transform: rotateY(180deg); }
}
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__front, .flip-card__back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid var(--border);
}
.flip-card__front { background: var(--card); }
.flip-card__front img { width: 100%; height: 100%; object-fit: cover; }
.flip-card__back {
  transform: rotateY(180deg);
  padding: 0;
}
.flip-card__back .wb-board--mini {
  height: 100%;
  border-radius: 0;
  border: none;
}
/* Static (non-draggable) copies of a few whiteboard items — same look,
   but no grab cursor / drag affordance since these can't be moved. */
.wb-item--static { cursor: default; touch-action: auto; }
.wb-card--tools-mini { width: 8rem; padding: 0.6rem; }
.wb-card--tools-mini .wb-tools-grid { gap: 0.35rem; }
.wb-card--tools-mini .wb-tools-grid div { font-size: 0.65rem; border-radius: 0.3rem; }
.wb-card--tools-mini > p { margin-top: 0.4rem; font-size: 7px; }
.wb-polaroid--mini { width: 8rem; padding: 0.4rem 0.4rem 0; }
.wb-polaroid--mini .wb-placeholder,
.wb-polaroid--mini img { height: 5.5rem; }
.wb-polaroid--mini p { padding-block: 0.4rem; font-size: 0.55rem; }
.wb-rainbow--mini { width: 5.5rem; padding: 0.4rem; }
.wb-rainbow--mini .inner { padding: 0.5rem; }
.wb-rainbow--mini .inner p { font-size: 0.55rem; }
.wb-rainbow--mini > p { font-size: 7px; }
.wb-terminal--mini { width: 10.5rem; box-shadow: 0 12px 28px rgba(0,0,0,0.4); }
.wb-terminal--mini .wb-terminal__bar { padding: 0.35rem 0.6rem; }
.wb-terminal--mini .wb-terminal__bar span { width: 0.45rem; height: 0.45rem; }
.wb-terminal--mini .wb-terminal__bar small { font-size: 8px; }
.wb-terminal--mini .wb-terminal__body { padding: 0.5rem 0.6rem; height: 110px; }
.wb-terminal--mini .wb-terminal__output,
.wb-terminal--mini .wb-terminal__cursor { font-size: 0.5rem; }
.wb-terminal--mini .wb-terminal__output .tl-art { font-size: 0.45rem; }

/* The general mobile whiteboard reset (below) turns .wb-board into a
   static flex stack and forces every .wb-item to position:static via
   !important — appropriate for the big whiteboard on the About page,
   but wrong for this compact card back, which should keep its small
   absolute-positioned scatter layout at every screen size. Restore it
   here with matching !important + position-in-list overrides. */
@media (max-width: 767px) {
  .flip-card__back .wb-board--mini {
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .flip-card__back .wb-item {
    position: absolute !important;
    max-width: 12rem !important;
    margin: 0 !important;
  }
  .flip-card__back .wb-item:nth-child(1) { left: 5%  !important; top: 4%  !important; }
  .flip-card__back .wb-item:nth-child(2) { left: 37% !important; top: 2%  !important; }
  .flip-card__back .wb-item:nth-child(3) { display: none !important; }
  .flip-card__back .wb-item:nth-child(4) { left: 5%  !important; top: 44% !important; }
  .flip-card__back .wb-item:nth-child(5) { left: 60% !important; top: 48% !important; }
  .flip-card__back .wb-item:nth-child(6) { left: 32% !important; top: 84% !important; }
}
.about-preview__copy { display: flex; flex-direction: column; justify-content: center; }
.about-preview__heading { font-family: var(--font-heading); font-size: 32px; line-height: 0.95; color: var(--foreground); }
@media (min-width: 640px) { .about-preview__heading { font-size: 56px; } }
@media (min-width: 768px) { .about-preview__heading { font-size: 56px; } }
.about-preview__heading .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.about-preview__text { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.about-buttons{ display: flex; flex-direction: row; gap: 24px;}
.about-preview__cta {
  margin-top: 2.5rem; display: inline-flex; width: fit-content; align-items: center; gap: 0.75rem;
  border-radius: 999px; background: var(--foreground); padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 600;
  color: var(--background); transition: transform 0.2s ease;
}
.about-preview__cta:hover { transform: scale(1.05); }
.about-preview__cta svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.about-preview__cta:hover svg { transform: translate(2px,-2px); }
.about-cv { 
  margin-top: 2.5rem; display: inline-flex; width: fit-content; align-items: center; gap: 0.75rem;
  border-radius: 999px; border: 1.2px solid var(--muted-foreground); padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 600;
  color: var(--muted-foreground); transition: transform 0.2s ease;
}
.about-cv:hover { transform: scale(1.05); color: var(--lime); border: 1.2px solid var(--lime);}
.about-cv svg { width: 1rem; height: 1rem; transition: transform 0.5s ease; transform: rotate(135deg);}
.about-cv:hover svg { transform: rotate(135deg) translate(2px,-2px); }
.about-preview__stats { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.about-preview__stats .value:hover { color:var(--lime); }
.about-preview__stats .value { font-family: var(--font-heading); font-size: 1.875rem; color: var(--foreground); }
@media (min-width: 640px) { .about-preview__stats .value { font-size: 2.25rem; } }
@media (min-width: 768px) { .about-preview__stats .value { font-size: 3rem; } }
.about-preview__stats .label { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* Rope line — a hoverable "string" that bends toward the cursor and
   springs back, replacing the plain border-top above the stats. */
.rope-line {
  grid-column: 1 / -1;
  width: 100%;
  height: 40px;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  cursor: pointer;
}
.rope-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rope-line path { transition: stroke 0.2s ease; }

/* ==========================================================================
   Services preview (services.html — plain static section)
   ========================================================================== */
.services-preview {
  padding: 6rem 2rem;
}
@media (min-width: 768px) { .services-preview { padding: 8rem 6rem; } }

/* ==========================================================================
   Home services reveal (index.html only) — the circular-mask section.
   Fully independent from .services-preview above; nothing here is shared
   with services.html, so changes to one can never affect the other.
   ========================================================================== */
.home-services-reveal {
  padding: 6rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1;
  pointer-events: auto;
  background-color: var(--lime);
  will-change: clip-path;
}

.home-services-eyebrow{
  color:var(--background);
}


@media (min-width: 768px) { .home-services-reveal { padding: 8rem 6rem; } }
.services-reveal-stage { position: relative; pointer-events: none; }
.services-reveal-freeze { position: relative; pointer-events: none; }
.home-services-reveal__top { display: grid; gap: 3rem; padding-top: 50vh; }
@media (min-width: 1024px) { .home-services-reveal__top { grid-template-columns: 1fr 1fr; } }
.home-services-reveal__heading { margin-top: 1.5rem; font-family: var(--font-heading); font-size: 3rem; line-height: 0.95; color: var(--background); }
@media (min-width: 768px) { .home-services-reveal__heading { font-size: 4.5rem; } }
.home-services-reveal__heading .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--background); }
.home-services-reveal__text { margin-top: 1.5rem; line-height: 1.6; color: var(--muted); }
.home-services-reveal__cta {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 999px;
  background: var(--background); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--lime);
  transition: gap 0.2s ease;
}
.home-services-reveal__cta:hover { gap: 1rem; }
.home-services-reveal__cta svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.home-services-reveal__cta:hover svg { transform: rotate(45deg); }

.services-rows { margin-top: 4rem; border-top: 1px solid var(--border); }
.service-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid var(--border); padding-block: 2rem; transition: background-color 0.2s ease;
}
.services-services{margin-top: 8rem;}
.services-sevices__heading { font-family: var(--font-heading); font-size: 2.25rem; line-height: 0.95; color: var(--foreground); }
@media (min-width: 640px) { .services-sevices__heading { font-size: 3rem; } }
@media (min-width: 768px) { .services-sevices_heading { font-size: 3.75rem; } }
.services-sevices__heading .accent { font-family: var(--font-sans); font-weight: 300; font-style: italic; color: var(--lime); }
@media (min-width: 768px) { .service-row { padding-block: 2.5rem; } }
.service-row:hover { background: color-mix(in oklch, var(--foreground) 3%, transparent); }
.service-row__main { flex: 1; padding-inline: 0.5rem; }
@media (min-width: 768px) { .service-row__main { padding-inline: 1rem; } }
.service-row__title-line { display: flex; align-items: baseline; gap: 1rem; }
.service-row__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--lime); }
.service-row__title { font-family: var(--font-heading); font-size: 1.875rem; color: var(--foreground); transition: transform 0.3s ease, color 0.3s ease; }
.service-row:hover .service-row__title { transform: translateX(0.5rem); color: var(--lime); }
@media (min-width: 768px) { .service-row__title { font-size: 3rem; } }
.service-row__desc,
.service-row__clients {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-left: 2rem;
  font-size: 0.875rem;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin-top 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-row__desc { color: var(--foreground); }
.service-row__clients { max-width: 42rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .service-row__desc, .service-row__clients { padding-left: 2.5rem; } }
.service-row:hover .service-row__desc,
.service-row:hover .service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
}
.service-row.is-measuring .service-row__desc,
.service-row.is-measuring .service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
  transition: none !important;
}

/* First row starts already "open" — until something in the list is
   hovered, at which point normal per-row :hover behavior takes over. */
.services-rows:not(:hover) .service-row:first-child .service-row__desc,
.services-rows:not(:hover) .service-row:first-child .service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
}
.services-rows:not(:hover) .service-row:first-child .service-row__title {
  color: var(--lime);
}

/* Mobile: no hover at all — keep every row permanently open. */
@media (max-width: 767px) {
  .service-row__desc,
  .service-row__clients {
    max-height: 4rem;
    opacity: 1;
    margin-top: 0.5rem;
  }
  .service-row__title { color: var(--lime); }
}
.service-row__arrow {
  display: flex; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); color: var(--foreground); transition: all 0.3s ease;
}
@media (min-width: 768px) { .service-row__arrow { width: 4rem; height: 4rem; } }
.service-row:hover .service-row__arrow { border-color: var(--lime); background: var(--lime); color: var(--background); }
.service-row__arrow svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s ease; }
.service-row:hover .service-row__arrow svg { transform: rotate(-45deg); }

/* ==========================================================================
   Home service rows (index.html only) — fully independent copy of the
   .service-row family above. Nothing here is shared with services.html,
   so future edits to one can never bleed into the other.
   ========================================================================== */
.home-services-rows { margin-top: 4rem; border-top: 1px solid var(--border-lime); }
.home-service-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid var(--border-lime); padding-block: 2rem; transition: background-color 0.2s ease;
}
@media (min-width: 768px) { .home-service-row { padding-block: 2.5rem; } }
.home-service-row:hover { background: color-mix(in oklch, var(--foreground) 3%, transparent); }
.home-service-row__main { flex: 1; padding-inline: 0.5rem; }
@media (min-width: 768px) { .home-service-row__main { padding-inline: 1rem; } }
.home-service-row__title-line { display: flex; align-items: baseline; gap: 1rem; }
.home-service-row__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--background); }
.home-service-row__title { font-family: var(--font-heading); font-size: 1.875rem; color: var(--background); transition: transform 0.3s ease, opacity 0.3s ease; }
.home-service-row:hover .home-service-row__title { transform: translateX(0.5rem); opacity: 0.7; }
@media (min-width: 768px) { .home-service-row__title { font-size: 3rem; } }
.home-service-row__desc,
.home-service-row__clients {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-left: 2rem;
  font-size: 0.875rem;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, margin-top 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-service-row__desc { color: var(--background); }
.home-service-row__clients { max-width: 42rem; color: var(--muted); }
@media (min-width: 768px) { .home-service-row__desc, .home-service-row__clients { padding-left: 2.5rem; } }
.home-service-row:hover .home-service-row__desc,
.home-service-row:hover .home-service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
}
.home-service-row.is-measuring .home-service-row__desc,
.home-service-row.is-measuring .home-service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
  transition: none !important;
}

/* First row starts already "open" — until something in the list is
   hovered, at which point normal per-row :hover behavior takes over. */
.home-services-rows:not(:hover) .home-service-row:first-child .home-service-row__desc,
.home-services-rows:not(:hover) .home-service-row:first-child .home-service-row__clients {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.5rem;
}

/* Mobile: no hover at all — keep every row permanently open. */
@media (max-width: 767px) {
  .home-service-row__desc,
  .home-service-row__clients {
    max-height: 4rem;
    opacity: 1;
    margin-top: 0.5rem;
  }
}
.home-service-row__arrow {
  display: flex; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border-lime); color: var(--background); transition: all 0.3s ease;
}
@media (min-width: 768px) { .home-service-row__arrow { width: 4rem; height: 4rem; } }
.home-service-row:hover .home-service-row__arrow { border-color: var(--background); background: var(--background); color: var(--lime); }
.home-service-row__arrow svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s ease; }
.home-service-row:hover .home-service-row__arrow svg { transform: rotate(-45deg); }

@media (min-width: 1024px) {  }

/* Fullscreen fixed layer that contains the preview */

@media (min-width: 1024px) {  }

/* ==========================================================================
   Featured scroll (home) — horizontal pinned scroll
   ========================================================================== */
.featured-scroll { background: var(--background); }  /* height set by JS; may include extra scroll distance for circular reveal transition. Intentionally NOT position:relative — that would elevate it into the positioned paint layer, above later normal-flow sections (logo-rows, cta-band), causing them to bleed through during the reveal transition. */
.featured-scroll__sticky { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; justify-content: center; overflow: hidden; }
.featured-scroll__head { padding-inline: 2rem; }
@media (min-width: 768px) { .featured-scroll__head { padding-inline: 6rem; } }
.featured-scroll__head-row { margin-inline: auto; max-width: 1600px; display: flex; align-items: flex-end; justify-content: space-between; }
.featured-scroll__title { margin-top: 1rem; font-family: var(--font-heading); font-size: 3rem; line-height: 0.95; color: var(--foreground); }
@media (min-width: 768px) { .featured-scroll__title { font-size: 4.5rem; } }
.featured-scroll__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.featured-scroll__all { display: none; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); transition: color 0.2s ease; border: 1.2px solid var(--muted-foreground); border-radius: 999px; padding:10px 15px; }
.featured-scroll__all:hover { color: var(--lime); border: 1.2px solid var(--lime); }
@media (min-width: 768px) { .featured-scroll__all { display: inline-flex; } }
.featured-scroll__rail-wrap { margin-top: 3rem; overflow: hidden; padding-inline: 2rem; }
@media (min-width: 768px) { .featured-scroll__rail-wrap { padding-inline: 6rem; } }
.featured-scroll__rail-inner { margin-inline: auto; max-width: 1600px; }
.featured-scroll__rail { display: flex; gap: 1.5rem; will-change: transform; }
.featured-card {
  position: relative; height: 60vh; width: 80vw; flex-shrink: 0; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border);
}
@media (min-width: 768px) { .featured-card { width: 42vw; } }
.featured-card img { position: absolute; inset: 0; height: 100%; width: 100%; transition: transform 0.7s ease; }
.featured-card:hover img { transform: scale(1.05); }
.featured-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 50%, transparent); }
.featured-card__top { position: absolute; left: 1.5rem; top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.featured-card__num { border-radius: 999px; background: rgba(255,255,255,0.3); padding: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; color: #fff; }
.featured-card__cat { border-radius: 999px; background: var(--lime); padding: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--background); backdrop-filter: blur(6px); }
.featured-card__bottom { position: absolute; inset-inline: 1.5rem; bottom: 1.5rem; }
.featured-card__bottom h3 { font-family: var(--font-heading); font-size: 1.875rem; color: #fff; }
@media (min-width: 768px) { .featured-card__bottom h3 { font-size: 2.25rem; } }
.featured-card__bottom p { margin-top: 0.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }

/* Portfolio cards inside the homepage horizontal scroll rail */
.featured-scroll__rail .portfolio-card {
  width: 80vw;
  min-width: 300px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .featured-scroll__rail .portfolio-card { width: 40vw; }
}
@media (min-width: 1200px) {
  .featured-scroll__rail .portfolio-card { width: clamp(420px, 32vw, 560px); }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

   
.cta-band { padding: 6rem 2rem; }
@media (min-width: 768px) { .cta-band { padding: 8rem 6rem;} }
.cta-band__inner {
  position: relative; margin-inline: auto; max-width: 1600px; overflow: hidden; border-radius: 2rem;
  border: 1px solid var(--border); background: var(--card); padding: 5rem 1.5rem; text-align: center;
}
@media (min-width: 768px) { .cta-band__inner { padding: 8rem 3rem; } }
.cta-band__glow {
  position: absolute; left: 50%; top: 50%; width: 40rem; height: 40rem; transform: translate(-50%,-50%);
  border-radius: 999px; background: color-mix(in oklch, var(--lime) 10%, transparent); filter: blur(64px); pointer-events: none;
}
.cta-band__title { position: relative; margin-top: 1.5rem; font-family: var(--font-heading); font-size: 3rem; line-height: 0.95; color: var(--foreground); }
@media (min-width: 768px) { .cta-band__title { font-size: 6rem; } }
.cta-band__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.cta-band__cta {
  position: relative; margin-top: 2.5rem; display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 999px;
  background: var(--foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; color: var(--background);
  transition:transform 0.8s ease, background-color 0.8s ease, gap 0.8s ease; 
}
.cta-band__cta:hover { gap: 1.25rem; background-color: var(--lime); transform:scale(1.1);}
.cta-band__cta svg { width: 1.25rem; height: 1.25rem; transition: transform 0.8s ease; }
.cta-band__cta:hover svg { transform: rotate(45deg); }

/* ==========================================================================
   About hero
   ========================================================================== */
.about-hero { position: relative; padding: 10rem 2rem 0; }
@media (min-width: 768px) { .about-hero { padding: 12rem 6rem 0; } }
.about-hero__title { margin-top: 2rem; font-family: var(--font-heading); font-size: 3.75rem; line-height: 1.1; color: var(--foreground); }
@media (min-width: 640px) { .about-hero__title { font-size: 4rem; } }
@media (min-width: 768px) { .about-hero__title { font-size: 6rem; } }
@media (min-width: 1280px) { .about-hero__title { font-size: 7rem; } }
.about-hero__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime);}
.about-hero__bottom { margin-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .about-hero__bottom { grid-template-columns: 1.2fr 1fr; align-items: flex-end; } }
.about-hero__intro { max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.about-hero__cta {
  display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 999px; background: var(--foreground);
  padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 600; color: var(--background); transition: transform 0.2s ease;
}
.about-hero__cta:hover { transform: scale(1.05); }
@media (min-width: 768px) { .about-hero__cta-wrap { justify-self: end; } }

/* ==========================================================================
   Whiteboard — interactive drag-and-drop cork board
   ========================================================================== */
.whiteboard-section {
  margin-block: 6rem;
  padding: 0 6rem;
  position: relative;
  isolation: isolate; /* z-index auf wb-items bleibt innerhalb der Section */
}

@media (max-width: 768px) { .whiteboard-section { padding: 0; } }

.wb-board {
  position: relative;
  height: clamp(620px, 82vh, 720px);
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid oklch(0 0 0 / 12%);
  background-color: var(--foreground);
  background-image:
    linear-gradient(var(--muted-foreground) 1px, transparent 1px),
    linear-gradient(90deg, var(--muted-foreground) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---- Draggable items ---- */
.wb-item {
  position: absolute;
  transform: rotate(var(--r, 0deg));
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: filter 0.2s ease, transform 0.2s ease;
  will-change: transform, left, top;
}
.wb-item:hover  { filter: drop-shadow(0 12px 28px rgba(0,0,0,0.28)); z-index: 20; }
.wb-item.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.45));
  transition: filter 0.2s ease; /* keep shadow transition, skip position */
}

/* ---- Common card base ---- */
.wb-card { border-radius: 1rem; padding: 1rem; color: #fff; }

/* ---- Luggage Tag ---- */
.wb-luggage-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: pendulum 3.8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  /* overrides the generic --r rotation */
  transform: rotate(-8deg);
}
.wb-luggage-tag.is-dragging { animation: none; }

@keyframes pendulum {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.wb-nail {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--background); box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.wb-thread {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--muted-foreground), var(--background));
  flex-shrink: 0;
}
.wb-tag-card {
  position: relative;
  width: 11rem;
  background: var(--background);
  border-radius: 0.875rem;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.wb-eyelet {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: var(--foreground);
  z-index: 1;
}
.wb-tag-label { padding: 2.25rem 0.875rem 0; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lime); }
.wb-tag-name  { padding: 0.25rem 0.875rem 0; font-family: var(--font-heading); font-size: 1.125rem; color: var(--foreground); }
.wb-tag-role  { padding: 0.2rem 0.875rem 0.75rem; font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.wb-tag-card img { width: 100%; height: 8.5rem; object-fit: cover; filter: grayscale(1); display: block; }

/* ---- Polaroid ---- */
.wb-polaroid { width: 18rem; background: var(--background); padding: 0.7rem 0.7rem 0; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.wb-polaroid .wb-placeholder,
.wb-polaroid img     { width: 100%; height: 12rem; object-fit: cover; display: block; }
.wb-polaroid .wb-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: #aaa; background: #f0f0f0; }
.wb-polaroid p       { padding-block: 0.75rem; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }

/* ---- GIF / placeholder card ---- */
.wb-placeholder-card {
  width: 9rem; height: 9rem; border-radius: 1rem;
  background: var(--background);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.wb-placeholder-card span { font-size: 1.75rem; }
.wb-placeholder-card small { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }

/* ---- Sticker ---- */
.wb-sticker {
  border-radius: 999px; background: var(--background); color: var(--lime);
  padding: 0.5rem 1.1rem; font-family: var(--font-mono); font-size: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* ---- Pill ---- */
.wb-pill {
  border-radius: 999px; background: var(--background); color: var(--foreground);
  padding: 0.6rem 1.25rem; font-family: var(--font-mono); font-size: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* ---- Tools grid ---- */
.wb-card--tools        { width: 16rem; background: var(--background); }
.wb-tools-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; }
.wb-tools-grid div     { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:0.5rem; font-family:var(--font-heading); font-size:1rem; color:#fff; }
.wb-tools-grid .c1{background:#2563eb}.wb-tools-grid .c2{background:#f97316}
.wb-tools-grid .c3{background:#db2777}.wb-tools-grid .c4{background:#4f46e5}
.wb-tools-grid .c5{background:#7c3aed}.wb-tools-grid .c6{background:#404040}
.wb-card--tools > p    { margin-top:0.9rem; text-align:center; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted-foreground); }

/* ---- Rainbow card ---- */
.wb-rainbow { width: 7rem; padding: 0.6rem; box-shadow: 0 12px 28px rgba(0,0,0,0.3); background: #ffe991; }
.wb-rainbow .inner     { padding: 0.9rem; text-align: center; }
.wb-rainbow .inner p   { font-family: var(--font-mono); font-size: 0.75rem; color: #000; line-height: 1.5; }
.wb-rainbow > p        { margin-top: 0.4rem; text-align: center; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #000; }

/* ---- Terminal ---- */
.wb-terminal { width: 10rem; overflow: hidden; border-radius: 0.625rem; background: var(--background); box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.wb-terminal__bar { display:flex; align-items:center; gap:0.35rem; background:var(--muted); padding:0.5rem 0.875rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.wb-terminal__bar span { width:0.65rem; height:0.65rem; border-radius:999px; }
.wb-terminal__bar span:nth-child(1){background:#ff5f57}.wb-terminal__bar span:nth-child(2){background:#febc2e}.wb-terminal__bar span:nth-child(3){background:#28c840}
.wb-terminal__bar small { margin-left:0.5rem; font-family:var(--font-mono); font-size:10px; color:var(--muted-foreground); }
.wb-terminal__body {
  padding: 0.75rem 0.875rem;
  height: 195px;          /* fixed — animation läuft darin ohne Größenänderung */
  overflow: hidden;
}
.wb-terminal__output { font-family:var(--font-mono); font-size:0.65rem; line-height:1.65; }
.wb-terminal__output div { display:block; }
.wb-terminal__output .tl-art { white-space:pre; color:var(--muted-foreground); font-size:0.6rem; line-height:1.45; }
.wb-terminal__output .tl-cmd { color:var(--lime); }
.wb-terminal__output .tl-out { color:var(--muted-foreground); }
.wb-terminal__cursor { display:inline-block; font-family:var(--font-mono); font-size:0.65rem; color:var(--lime); animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ==========================================================================
   Journey (timeline)
   ========================================================================== */
.journey { position: relative; margin-inline: auto; max-width: 1600px; padding: 6rem 2rem; }
@media (min-width: 768px) { .journey { padding-inline: 6rem; padding-block: 8rem; } }
.journey__title { font-family: var(--font-heading); font-size: 3rem; line-height: 0.95; }
@media (min-width: 768px) { .journey__title { font-size: 4.5rem; } }
.journey__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.journey__intro { margin-top: 1.5rem; max-width: 36rem; line-height: 1.6; color: var(--muted-foreground); }
.journey__rail { position: relative; margin-top: 5rem; }
.journey__line { position: absolute; left: 1rem; top: 0; height: 100%; width: 1px; background: var(--border); }
@media (min-width: 768px) { .journey__line { left: 50%; transform: translateX(-50%); } }
.journey__line-fill { height: 0%; width: 100%; transform-origin: top; background: var(--lime); transition: height 0.1s linear; }
.journey__list { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 768px) { .journey__list { gap: 5rem; } }
.journey__item { position: relative; padding-left: 3rem; }
@media (min-width: 768px) { .journey__item { width: 50%; padding-left: 0; } }

@media (min-width: 768px) { .journey__item.is-left { padding-right: 4rem; text-align: right; } .journey__item.is-right { margin-left: auto; padding-left: 4rem; } }
.journey__dot {
  position: absolute; top: 0.75rem; z-index: 1; width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--background);
  background: var(--lime); left: 7px; box-shadow: 0 0 0 4px color-mix(in oklch, var(--lime) 30%, transparent);
}
@media (min-width: 768px) { .journey__item.is-left .journey__dot { left: auto; right: -8px; } .journey__item.is-right .journey__dot { left: -8px; } }
.journey__card { max-width: 350px; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.5rem; transition: border-color 0.2s ease; }
@media (min-width: 768px) { .journey__card { padding: 2rem; } }
.journey__card:hover { border-color: color-mix(in oklch, var(--lime) 40%, transparent); }
.journey__period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--lime); }
.journey__card h3 { margin-top: 0.5rem; font-family: var(--font-heading); font-size: 1.5rem; }
@media (min-width: 768px) { .journey__card h3 { font-size: 1.875rem; } }
.journey__card p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

/* ==========================================================================
   Skills (horizontal pinned)
   ========================================================================== */
.skill-bar { transition: transform 0.5s ease; }
.skill-bar:hover { transform: scale(1.05); }
.skills { position: relative; }  /* height set by JS */
.skills__sticky { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; justify-content: center; overflow: hidden;}
.skills__head { margin-inline: auto; width: 100%; max-width: 1600px; padding-inline: 0rem; }
@media (min-width: 768px) { .skills__head { padding-inline: 6rem; } }
.skills__title { margin-top: 1rem; font-family: var(--font-heading); font-size: 3rem; line-height: 0.9; color: var(--foreground); }
@media (min-width: 768px) { .skills__title { font-size: 4.5rem; } }
.skills__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.skills__intro { margin-top: 1rem; max-width: 48rem; line-height: 1.6; color: var(--muted-foreground); }
.skills__rail-wrap { margin-top: 2.5rem; overflow: hidden; padding-inline: 0rem; }
@media (min-width: 768px) { .skills__rail-wrap { padding-inline: 2rem; } }
.skills__rail-inner { margin-inline: auto; max-width: 1600px; }
.skills__rail { display: flex; gap: 1.5rem; will-change: transform; }
.skill-card { width: 88vw; flex-shrink: 0; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); padding: 2rem; }
@media (min-width: 768px) { .skill-card { width: 720px; padding: 3rem; } }
.skill-card__meta { display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-foreground); }
.skill-card h3 { margin-top: 0.75rem; font-family: var(--font-heading); font-size: 1.875rem; color: var(--card-foreground); }
@media (min-width: 768px) { .skill-card h3 { font-size: 3rem; } }
.skill-card p { margin-top: 1rem; max-width: 28rem; line-height: 1.6; color: var(--muted-foreground); }
.skill-bars { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.skill-bar__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--card-foreground); }
.skill-bar__head span:last-child { color: var(--lime); }
.skill-bar__track { margin-top: 0.5rem; height: 0.625rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
.skill-bar__fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(to right, color-mix(in oklch, var(--muted-foreground) 40%, transparent), var(--lime)); transition: width 1s var(--ease-out-site); }
.hardskill-bars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; padding: .5rem .5rem 0rem 0rem;  gap: 1.25rem; max-height: 20vh; overflow-y: auto;  }
.hardskills { display: flex; flex-direction: column; align-items: center;}
.hardskills span:last-child { color: var(--lime); }
.hardskills span { color:var(--card-foreground); font-size: 0.75rem; }
.hardskills .tool { display: inline-block;}
.tool img { padding: 4px; background-color: var(--muted); border-radius: 8px; overflow: hidden; border-radius: 8px; overflow: hidden; width: 70px; height: 70px; margin-bottom: 4px; }

/* ==========================================================================
   Portfolio hero + grid
   ========================================================================== */
.portfolio-hero { padding: 10rem 2rem 0; }
@media (min-width: 768px) { .portfolio-hero { padding: 12rem 6rem 0; } }
.portfolio-hero__title { margin-top: 2rem; font-family: var(--font-heading); font-size: 3.75rem; line-height: 0.9; color: var(--foreground); display: flex; flex-direction: column; }
@media (min-width: 768px) { .portfolio-hero__title { font-size: 8rem; } }
.portfolio-hero__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.portfolio-hero__intro { margin: 1.5rem 0 4rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }

/* ── Portfolio filters ──────────────────────────────────────────────────── */
.portfolio-filters { position: relative; z-index: 30; margin-bottom: 3rem; }

/* Mobile toggle button */
.pf-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.6rem 1rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--foreground);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.pf-toggle:hover { border-color: var(--lime); }
.pf-toggle__prefix { color: var(--muted-foreground); flex-shrink: 0; }
.pf-toggle__label  { flex: 1; text-align: left; color: var(--foreground); }
.pf-toggle__chevron { flex-shrink: 0; transition: transform 0.3s ease; margin-left: auto; }
.portfolio-filters.is-open .pf-toggle__chevron { transform: rotate(180deg); }
@media (min-width: 640px) { .pf-toggle { display: none; } }

/* Dropdown — hidden on mobile when closed */
.pf-dropdown {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.5rem;
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.portfolio-filters.is-open .pf-dropdown { display: flex; }

/* Desktop: inline row */
@media (min-width: 640px) {
  .pf-dropdown {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* Filter buttons — same pill style as ch-tag with lime fill from bottom */
.pf-dropdown button {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--muted-foreground);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: color 0.35s ease, border-color 0.35s ease;
  z-index: 0;
}
/* Lime fill slides up from bottom (same as ch-tag) */
.pf-dropdown button::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  border-radius: inherit;
}
.pf-dropdown button:hover { color: var(--background); border-color: var(--lime); }
.pf-dropdown button:hover::after { transform: translateY(0); }

/* Active state */
.pf-dropdown button.is-active {
  border-color: var(--lime); background: var(--lime);
  color: #08110a;
}
.pf-dropdown button.is-active::after { transform: translateY(0); }

/* Mobile: buttons are full-width in dropdown */
@media (max-width: 639px) {
  .pf-dropdown button { width: 100%; justify-content: flex-start; border-radius: 0.65rem; }
}
html.light .pf-dropdown button.is-active { color: #fff; }

.portfolio-grid-section { padding: 0 2rem 8rem; }
@media (min-width: 768px) { .portfolio-grid-section { padding-inline: 6rem; } }
.portfolio-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(2,1fr); } }
.portfolio-card { display: block; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); }
.portfolio-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.portfolio-card__media img { width: 100%; height: 100%; transition: transform 0.7s ease; }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.05); }
.portfolio-card__tags { position: absolute; left: 1rem; top: 1rem; right: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portfolio-card__tag { border-radius: 999px; background: var(--lime); padding: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--background); backdrop-filter: blur(6px); }
.portfolio-card__body { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; }
.portfolio-card__body h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--card-foreground); }
@media (min-width: 768px) { .portfolio-card__body h3 { font-size: 1.875rem; } }
.portfolio-card__body p { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.portfolio-card__arrow { display: flex; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); color: var(--foreground); transition: all 0.2s ease; }
.portfolio-card:hover .portfolio-card__arrow { border-color: var(--lime); background: var(--lime); color: var(--background); }

/* ==========================================================================
   Case study
   ========================================================================== */
.case-study { padding: 10rem 1rem 0; }
@media (min-width: 768px) { .case-study { padding: 12rem 2rem 0; } }
.case-study__wrap { margin-inline: auto; max-width: 1600px; padding-inline: 2rem; }
@media (min-width: 768px) { .case-study__wrap { padding-inline: 6rem; } }
.case-study__back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); transition: color 0.2s ease; margin-right: 24px;}
.case-study__back:hover { color: var(--lime); }
.case-study__back svg { width: 14px; height: 14px; }
.case-study__eyebrow { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.case-study__grid { margin-top: 1.5rem; display: grid; gap: 4rem; }
@media (min-width: 1024px) { .case-study__grid { grid-template-columns: 1.6fr 1fr; } }
.case-study__title { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.02; color: var(--foreground); }
@media (min-width: 768px) { .case-study__title { font-size: 3.75rem; } }
.case-study__briefing { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.case-study__results { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; border-top: 1px solid var(--border); padding-top: 2.5rem; }
.case-study__results .value { font-family: var(--font-heading); font-size: 2.25rem; color: var(--lime); }
@media (min-width: 768px) { .case-study__results .value { font-size: 3.75rem; } }
.case-study__results .label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }


@media (min-width: 1024px) { .case-study__sidebar { border-left: 1px solid var(--border); padding-left: 2.5rem; } }
.sidebar-block { border-bottom: 1px solid var(--border); padding-block: 1.5rem; }
.sidebar-block:first-child { padding-top: 0; }
.sidebar-block__label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--lime); }
.sidebar-block__clients { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-block__clients span { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); }
@media (min-width: 768px) { .sidebar-block__clients span { font-size: 1.875rem; } }
.sidebar-block__clients svg { width: 16px; height: 16px; color: var(--lime); }
.sidebar-block__value { margin-top: 0.5rem; font-family: var(--font-heading); font-size: 1.875rem; color: var(--foreground); }
.sidebar-block__tools { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sidebar-block__tools span { display: flex; flex-direction: row; gap: 4px; align-items: center; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--card); padding: 0.375rem 0.75rem; font-family: var(--font-mono); font-size: 1.2rem; color: var(--card-foreground); }
.sidebar-block__tools span img{ width: 30px; height: 30px; }

/* gallery bento */
.case-gallery { margin-top: 5rem; }
.case-gallery__head { display: flex; align-items: center; gap: 1rem; }
.case-gallery__head .rule { height: 1px; flex: 1; background: var(--border); }
.case-gallery__grid { margin-top: 2rem; display: grid; grid-auto-rows: 200px; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .case-gallery__grid { grid-auto-rows: 450px; grid-template-columns: repeat(6,1fr); } }
.gallery-item { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); cursor: pointer; opacity:0; transform: translateY(40px); will-change: opacity, transform;
  transition: opacity .6s var(--ease-out-site), transform .6s var(--ease-out-site); }
.gallery-item.is-visible { opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); }
.gallery-item img { width: 100%; height: 100%; transition: transform 0.7s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__expand { pointer-events: none; position: absolute; right: 0.75rem; top: 0.75rem; display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--lime); color: var(--background); opacity: 0; backdrop-filter: blur(6px); transition: opacity 0.3s ease; }
.gallery-item:hover .gallery-item__expand { opacity: 1; }
.gallery-item--0 { grid-column: span 1; }
@media (min-width: 768px) { .gallery-item--0 { grid-column: span 6; grid-row: span 2; } .gallery-item--1, .gallery-item--2 { grid-column: span 3; } .gallery-item--3,.gallery-item--4,.gallery-item--5,.gallery-item--6 { grid-column: span 2; } .gallery-item--4 { grid-column: 3 / -1; } }

.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
@media (min-width: 768px) { .lightbox { padding: 2.5rem; } }
.lightbox.is-open { display: flex; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(6px); }
.lightbox__close { position: absolute; right: 1.25rem; top: 1.25rem; z-index: 10; display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(6px); transition: background 0.2s ease; }
.lightbox__close:hover { background: rgba(255,255,255,0.2); }
.lightbox img { position: relative; max-height: 88vh; max-width: 92vw; border-radius: 1rem; object-fit: contain; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }

.case-similar__grid { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .case-similar__grid { grid-template-columns: repeat(2,1fr); } }
.similar-card { overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); display: block; }
.similar-card__media { aspect-ratio: 16/9; overflow: hidden; }
.similar-card__media img { width: 100%; height: 100%; transition: transform 0.7s ease; }
.similar-card:hover .similar-card__media img { transform: scale(1.05); }
.similar-card__body { padding: 1.5rem; }
.similar-card__body h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--card-foreground); }
.similar-card__body p { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }

.case-next { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border-top: 1px solid var(--border); padding-block: 5rem; text-align: center; margin-top: 6rem; }
.case-next__label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.case-next__title { font-family: var(--font-heading); font-size: 2.25rem; color: var(--foreground); transition: color 0.2s ease; display: flex; flex-direction: row; align-items: center; gap: 24px;}
@media (min-width: 768px) { .case-next__title { font-size: 4.5rem; } }
.case-next:hover .case-next__title { color: var(--lime); }

/* ==========================================================================
   Services list page
   ========================================================================== */
.services-hero { padding: 10rem 2rem 0; }
@media (min-width: 768px) { .services-hero { padding: 12rem 6rem 0; } }
.services-hero__title { margin-top: 2rem; font-family: var(--font-heading); font-size: 3.75rem; line-height: 1.1; color: var(--foreground); display: flex; flex-direction: column; }
@media (min-width: 768px) { .services-hero__title { font-size: 7rem; } }
.services-hero__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime);}
.services-hero__intro { margin-top: 2rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }

.services-list { margin-top: 5rem; padding: 0 1rem 8rem; }
@media (min-width: 768px) { .services-list { padding-inline: 2rem; } }
.services-list__wrap { margin-inline: auto; max-width: 1600px; border-top: 1px solid var(--border); }
.service-accordion { border-bottom: 1px solid var(--border); }
.service-accordion__btn { display: flex; width: 100%; align-items: center; gap: 1.5rem; padding-block: 2.5rem; text-align: left; }
@media (min-width: 768px) { .service-accordion__btn { padding-block: 3.5rem; } }
.service-accordion__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-foreground); }
.service-accordion__body { flex: 1; }
.service-accordion__title { font-family: var(--font-heading); font-size: 2.25rem; color: var(--foreground); transition: color 0.2s ease; }
@media (min-width: 768px) { .service-accordion__title { font-size: 3.75rem; } }
.service-accordion__btn:hover .service-accordion__title { color: var(--lime); }
.service-accordion__panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease-out-site); }
.service-accordion.is-open .service-accordion__panel { max-height: 12rem; }
.service-accordion__short { margin-top: 1rem; display: block; max-width: 42rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }
@media (min-width: 768px) { .service-accordion__short { font-size: 1.125rem; } }
.service-accordion__clients { margin-top: 0.5rem; display: block; font-family: var(--font-mono); font-size: 0.75rem; color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
.service-accordion__link {
  display: flex; width: 3.5rem; height: 3.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid var(--border); color: var(--foreground); transition: all 0.2s ease;
}
.service-accordion.is-open .service-accordion__link { border-color: var(--lime); background: var(--lime); color: #08110a; }
html.light .service-accordion.is-open .service-accordion__link { color: #fff; }
.service-accordion__link svg { width: 22px; height: 22px; }

/* ==========================================================================
   Service detail page
   ========================================================================== */
.service-detail { padding: 10rem 1rem 0; }
@media (min-width: 768px) { .service-detail { padding: 12rem 0rem 0; } }
.service-detail__back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); transition: color 0.2s ease; }
.service-detail__back:hover { color: var(--lime); }
.service-detail__back svg { width: 16px; height: 16px; }
.service-detail__head { margin-top: 2.5rem; display: grid; gap: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 4rem; }
@media (min-width: 1024px) { .service-detail__head { grid-template-columns: 1fr auto; align-items: flex-end;} }
.service-detail__num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--lime); }
.service-detail__title { display: inline-block; margin-top: 0.75rem; font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.2; color: var(--background); background-color: var(--lime); border-radius: 999px; padding: 12px 0px; }
.service-detail__title span { box-sizing: border-box; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding:12px 40px;}
@media (min-width: 768px) { .service-detail__title { font-size: 4rem; } }
.service-detail__short { max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: var(--lime); }

.service-detail__body { display: grid; gap: 4rem; padding-block: 4rem; }
@media (min-width: 1024px) { .service-detail__body { grid-template-columns: 1.4fr 1fr; } }
.service-detail__desc { font-size: 1.5rem; line-height: 1.5; color: var(--foreground); }
@media (min-width: 768px) { .service-detail__desc { font-size: 1.875rem; } }
.service-detail__clientsline { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.service-detail__included { border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); padding: 2rem; }
.service-detail__included-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lime); }
.service-detail__included-list { margin-top: 1.5rem; display: flex; flex-direction: column; }
.service-detail__included-list li { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border); padding-block: 1rem; color: var(--foreground); }
.service-detail__included-list li:last-child { border-bottom: none; }
.service-detail__included-list .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lime); flex-shrink: 0; }

.service-detail__process { border-top: 1px solid var(--border); padding-block: 4rem; }
.service-detail__process-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lime); }
.process-grid { margin-top: 2.5rem; display: grid; gap: 1px; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--border); }
@media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4,1fr); } }
.process-step { background: var(--card); padding: 2rem; }
.process-step__num { font-family: var(--font-heading); font-size: 3rem; color: var(--lime); }
.process-step h3 { margin-top: 1.5rem; font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); }
.process-step p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

.breadcrump{margin: 20px 0px; display: flex; flex-direction: row; gap: 16px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;} 
.breadcrump-link{color: var(--muted-foreground); }
.breadcrump-link:hover{color: var(--lime);}

.service-detail__others { display:flex; flex-direction: row; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); padding-block: 1rem; }

/* ── "Other services" quicklinks: dropdown on mobile, inline row on desktop ── */
.svc-others { position: relative; z-index: 30; flex: 1; }

.svc-others__toggle {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.6rem 1rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--foreground);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.svc-others__toggle:hover { border-color: var(--lime); }
.svc-others__toggle-label { flex: 1; text-align: left; }
.svc-others__chevron { flex-shrink: 0; margin-left: auto; transition: transform 0.3s ease; }
.svc-others.is-open .svc-others__chevron { transform: rotate(180deg); }
@media (min-width: 640px) { .svc-others__toggle { display: none; } }

.svc-others__dropdown {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.5rem;
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.svc-others.is-open .svc-others__dropdown { display: flex; }

.service-detail__others-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 639px) {
  .svc-others__dropdown .service-detail__others-list { flex-direction: column; }
  .svc-others__dropdown .service-detail__others-list a { width: 100%; text-align: left; border-radius: 0.65rem; }
}
@media (min-width: 640px) {
  .svc-others__dropdown { display: flex !important; position: static; flex-direction: row; background: none; border: none; padding: 0; box-shadow: none; }
}
.service-detail__others-list a {
  position: relative; overflow: hidden; display: inline-block;
  border-radius: 999px; border: 1px solid var(--border);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-foreground); text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
  z-index: 0;
}
/* Lime fill slides up from bottom — same as ch-tag on case study heroes */
.service-detail__others-list a::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1; border-radius: inherit;
}
.service-detail__others-list a:hover { color: var(--background); border-color: var(--lime); }
.service-detail__others-list a:hover::after { transform: translateY(0); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact { padding: 10rem 1rem 0; }
@media (min-width: 768px) { .contact { padding: 12rem 6rem 0; } }
.contact__wrap { margin-inline: auto; display: grid; max-width: 1600px; gap: 4rem; padding-bottom: 8rem; }
@media (min-width: 1024px) { .contact__wrap { grid-template-columns: 1fr 1.1fr; } }
.contact__title { margin-top: 2rem; font-family: var(--font-heading); font-size: 3.75rem; line-height: 0.9; color: var(--foreground); }
@media (min-width: 768px) { .contact__title { font-size: 6rem; } }
.contact__title .accent { font-family: var(--font-heading-accent); font-weight: 300; font-style: italic; color: var(--lime); }
.contact__intro { margin-top: 2rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.contact__elsewhere-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-top: 3rem; }
.contact__socials { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact__socials a { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid var(--border); padding: 0.625rem 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--foreground); transition: all 0.2s ease; }
.contact__socials a:hover { border-color: var(--lime); color: var(--lime); }
.contact__email { margin-top: 2rem; display: inline-block; font-family: var(--font-heading); font-size: 1.5rem; color: var(--foreground); transition: color 0.2s ease; }
@media (min-width: 768px) { .contact__email { font-size: 2.25rem; } }
.contact__email:hover { color: var(--lime); }

.contact-hero{
  padding: 0 1rem;
}

/* ── Contact form (Web3Forms) ─────────────────────────────────────────────── */
.contact-form {
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1rem;
  margin: 0 1rem;
}
@media (min-width: 768px) { .contact-form { padding: 2.5rem; } }

/* Two-column row */
.cf-row { display: grid; gap: 1.5rem; }
@media (min-width: 600px) { .cf-row { grid-template-columns: 1fr 1fr; } }

/* Field */
.cf-field { margin-top: 1.5rem; }
.cf-row .cf-field { margin-top: 0; }

.cf-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.cf-input {
  display: block;
  width: 100%;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.75rem 1rem;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease;
}
.cf-input::placeholder { color: var(--muted-foreground); opacity: 0.6; }
.cf-input:focus { border-color: var(--lime); }
.cf-textarea { resize: none; margin-bottom: 2rem;}

/* Submit button */
.cf-submit {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  border-radius: 999px;
  background: var(--lime);
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #08110a;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
html.light .cf-submit { color: #fff; }
.cf-submit:hover { transform: scale(1.03); }
.cf-submit:disabled,
.cf-submit.is-sending { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Result messages */
.cf-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.cf-success { color: var(--lime); }
.cf-error   { color: var(--destructive); }

/* ==========================================================================
   Misc helpers
   ========================================================================== */
.btn-reset { background: none; border: none; padding: 0; }
.flow-icon-link { display: inline-flex; align-items: center; }
::selection { background: var(--lime); color: #08110a; }
html.light ::selection { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* noscript fallback so reveal content is visible without JS */
html.no-js .reveal, html.no-js .reveal-line > span { opacity: 1 !important; transform: none !important; }
html.no-js .page-loader { display: none !important; }

/* ==========================================================================
   Spider / Radar Chart — canvas-based, data lives in .spider-source HTML
   ========================================================================== */
.spider-wrap      { position: relative; margin-top: 1.75rem; }
.spider-source    { display: none; }
/* Canvas fills card width, aspect-ratio keeps it square.
   The internal drawing resolution is 500px and scales down via CSS. */
.spider-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 260;   /* matches internal canvas proportions */
  margin: 0 auto;
}

/* ── Whiteboard: Mobile ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .wb-board-container {
    padding: 0 1rem;
  }
}

@media (max-width: 767px) {
  .wb-board {
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* items can vary left/right via align-self */
    gap: 1.25rem;
    padding: 1.25rem 1rem 1.5rem;
    overflow: visible;
  }

 

  /* Static positioning — override inline left/top/transform */
  .wb-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    touch-action: auto !important; /* ← allows native scroll on mobile */
    width: auto;
    max-width: calc(100% - 2rem);
  }

  /* ── Per-item left/right scatter (nth-child matches HTML order) ── */
  /* 1 luggage tag */
  .wb-board > :nth-child(1) { align-self: center; }
  /* 2 polaroid Studio Vibes */
  .wb-board > :nth-child(2) { align-self: flex-start; margin-left: 1.5rem; }
  /* 3 Design Nerd sticker */
  .wb-board > :nth-child(3) { align-self: flex-end;   margin-right: 2rem; }
  /* 4 tools grid */
  .wb-board > :nth-child(4) { align-self: flex-start; margin-left: 0.5rem; }
  /* 5 rainbow */
  .wb-board > :nth-child(5) { align-self: flex-end;   margin-right: 0.75rem; }
  /* 6 GIF placeholder */
  .wb-board > :nth-child(6) { align-self: flex-start; margin-left: 2rem; }
  /* 7 Vibe Coding pill */
  .wb-board > :nth-child(7) { align-self: center; }
  /* 8 polaroid Inspiration */
  .wb-board > :nth-child(8) { align-self: flex-end;   margin-right: 1.5rem; }
  /* 9 terminal */
  .wb-board > :nth-child(9) { align-self: flex-start; margin-left: 1rem; }

  /* Sizes */
  .wb-tag-card    { width: 10rem; }
  .wb-terminal    { width: 50%; max-width: 300px; }
  .wb-polaroid                { max-width: 220px; }
  .wb-polaroid img,
  .wb-polaroid .wb-placeholder { height: auto; aspect-ratio: 16 / 9; }
  .wb-card--tools { max-width: 240px; }
  .wb-sticker, .wb-pill { width: auto; }
  .wb-placeholder-card  { width: 9rem; height: 9rem; }
  .wb-rainbow           { width: 7rem; }
}

.cf-captcha-hint { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.8rem; color: oklch(0.75 0.15 55); }

/* ==========================================================================
   YouTube Player (swr-motion.html gallery-item--0)
   ========================================================================== */
.yt-player {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #000;
}

/* Thumbnail */
.yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.yt-player:hover .yt-thumb {
  transform: scale(1.03);
  filter: brightness(0.85);
}

/* Dark overlay */
.yt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  transition: background 0.3s ease;
}
.yt-player:hover .yt-overlay { background: rgba(0,0,0,0.5); }

/* Play button (centered) */
.yt-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Rotating text ring */
.yt-ring {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-ring__svg {
  width: 160px;
  height: 160px;
  animation: yt-spin 8s linear infinite;
  transform-origin: center;
}
.yt-player:hover .yt-ring__svg { animation-duration: 5s; }
@keyframes yt-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.yt-ring__text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  fill: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Inner white circle + play icon */
.yt-icon {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #111;
}
.yt-player:hover .yt-icon { transform: scale(1.1); }

/* Expand icon hidden on yt-player */
.yt-player .gallery-item__expand { display: none; }

/* Iframe fills whole cell after playing */
.yt-player.is-playing .yt-thumb,
.yt-player.is-playing .yt-overlay,
.yt-player.is-playing .yt-btn    { display: none; }
.yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Horizontal rail reveals ────────────────────────────────────────────────
   Cards in pinned scroll rails fade in as they slide into the viewport.
   No translateX needed here — the rail itself provides the motion.        */
.featured-scroll__rail .portfolio-card {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-scroll__rail .portfolio-card.is-rail-visible {
  opacity: 1;
}
[data-rail-item] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-rail-item].is-rail-visible { opacity: 1; }

/* ==========================================================================
   Case Study Hero
   ========================================================================== */

/* Case Hero — full-width, grid behind the image, starts from document top */
.case-study { margin: 0; padding: 0; } /* reset any browser article defaults */

.case-hero {
  position: relative;
  overflow: hidden;         /* clips grid to this section */
  margin: 0 0 4rem;
  padding-top: 6.5rem;      /* clears fixed navbar (1.5rem nav padding + 4rem bar + 1rem gap) */
  padding-bottom: 3rem;
  padding-inline: 1rem;/* grid goes edge-to-edge */
}
@media (min-width: 768px) { .case-hero { padding-top: 7.5rem; padding-inline: 2rem; } }

/* Grid: full-width, from doc top to bottom of hero */
.case-hero__grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;  /* explicit instead of inset shorthand */
  pointer-events: none;
  opacity: 0.07;
  background-image:
    linear-gradient(var(--foreground) 1px, transparent 1px),
    linear-gradient(90deg, var(--foreground) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Inner image box — width leaves a gap to the viewport edges so the image
   doesn't touch the screen borders on mobile.
   padding-inline would be ignored by the absolute bg image, so we use
   width: calc(100% - 2×gap) + margin-inline: auto instead.                    */
.case-hero__inner {
  position: relative;
  width: calc(100% - 2rem);   /* 1rem gap each side on mobile */
  max-width: 1600px;
  margin-inline: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: clamp(240px, 40vh, 440px);
  display: flex;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .case-hero__inner { width: calc(100% - 4rem); }  /* 2rem gap each side */
}

.case-hero__bg { position: absolute; inset: 0; }
.case-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, transparent 75%),
    linear-gradient(0deg,  rgba(0,0,0,0.4)  0%, transparent 60%);
}

.case-hero__content {
  position: relative; z-index: 1;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 42rem;
}

.case-hero__label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 1rem;
}

/* Title — plain white, no lime background */
.case-hero__title {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 900; line-height: 1.08;
  letter-spacing: -0.02em; margin-bottom: 1.5rem;
  color: #fff;
}

/* Tags — pill links with bottom-to-top lime fill on hover */
.case-hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ch-tag {
  position: relative; overflow: hidden;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
  z-index: 0;
}
/* Lime fill slides up from bottom */
.ch-tag::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  border-radius: inherit;
}
.ch-tag:hover { color: var(--background); border-color: var(--lime); }
.ch-tag:hover::after { transform: translateY(0); }



/* Shared section scaffolding */

.svc-leitbild {
  padding: 6rem 1rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) {
  .svc-arbeitsweise, .svc-leitbild { padding: 8rem 2rem; }
}

.svc-section-head {
  max-width: 52rem;
  margin-bottom: 4rem;
}
.svc-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 1rem;
  color: var(--foreground);
}
.svc-section-intro {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  max-width: 42rem;
}


/* ── Leitbild ── */
.svc-manifesto {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--foreground);
  max-width: 54rem;
  margin: 0 0 5rem;
  padding: 0;
  border: none;
}
.svc-manifesto em {
  font-style: normal;
  color: var(--lime);
}

.svc-values {
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--border);
  padding: 3rem 0;
}
@media (min-width: 768px) { .svc-values { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.svc-value__icon {
  display: block;
  font-size: 1.5rem;
  color: var(--lime);
  margin-bottom: 1rem;
  line-height: 1;
}
.svc-value__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.svc-value__text {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Services — Arbeitsweise (sticky vertical card stack) & Leitbild
   ========================================================================== */
.svc-process,
.svc-leitbild { border-top: 1px solid var(--border); }

/* ── Now shared by mobile and desktop: the scroll-driven pin + stacked-
   card mechanic runs everywhere. Only the *arrangement* inside the
   sticky pane (single column vs. two-column grid) still differs by
   breakpoint, below. ── */
.svc-process__track {
  height: 350vh;
  position: relative;
}

.svc-process__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 2rem 3rem;
  max-width: 1600px;
  margin-inline: auto;
  overflow: hidden;
}

.svc-process__header { display: flex; flex-direction: column; gap: 1rem; }
.svc-process__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--foreground);
}
.svc-process__intro {
  font-size: 0.9rem; line-height: 1.8; color: var(--muted-foreground);
}
.svc-process__progress {
  display: block;
  margin-top: 0.5rem; height: 2px; width: 80%;
  background: color-mix(in oklch, var(--foreground) 12%, transparent);
  border-radius: 999px; overflow: hidden;
}
.svc-process__progress-bar { display: block; height: 100%; width: 0%; background: var(--lime); border-radius: inherit; }

.svc-process__stage {
  position: relative;
  height: min(400px, 52vh);
  /* Right and (mostly) bottom stay clipped so not-yet-arrived cards
     don't show — though the real guarantee for those is the explicit
     visibility:hidden set in effects.js, since the bottom buffer below
     is now big enough that a merely-translated waiting card could
     otherwise peek through it too. Top/left leave generous room so the
     stacked-offset cards behind the front one can peek out there
     instead of being clipped along with the waiting cards. Buffers
     must stay >= STACK_STEP × STACK_MAX_DEPTH in effects.js (currently
     10 × 3 = 30px) or the deepest layer gets clipped again. */
  clip-path: inset(-90px -90px -1200px -90px);
}

.svc-process__card {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--lime);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  will-change: transform;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.35), 0 8px 16px -8px rgba(0,0,0,0.25);
}

/* ── Desktop: switch the sticky pane to a two-column grid (label/intro
   on the left, card stack on the right) instead of the single stacked
   column used on mobile. ── */
@media (min-width: 768px) {
  .svc-process__sticky {
    flex-direction: row;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    align-items: center;
    padding: 0 6rem;
  }
  .svc-process__stage {
    height: min(460px, 72vh);
    clip-path: inset(-90px -90px -1200px -120px);
    display: block;       /* reset flex */
  }
  .svc-process__card {
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }
}
.svc-process__card[data-card-idx="0"] { background: var(--lime); }
.svc-process__card[data-card-idx="1"] { background: var(--lime); }
.svc-process__card[data-card-idx="2"] { background: var(--lime); }
.svc-process__card[data-card-idx="3"] { background: var(--lime); }

.svc-process__card-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--lime);
  display: block;
  margin-bottom: 1.5rem;
}
.svc-process__card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--background);
  margin-bottom: 1rem;
  max-width: 20rem;
}
.svc-process__card-text {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 30rem;
}
.svc-process__card-deco {
  position: absolute;
  bottom: -0.1em; right: 0.05em;
  font-family: var(--font-heading);
  font-size: clamp(7rem, 15vw, 13rem);
  font-weight: 900; line-height: 1;
  color: color-mix(in oklch, var(--background) 5%, transparent);
  pointer-events: none; user-select: none;
  letter-spacing: -0.05em;
}

/* Fallback hidden — real cards handle mobile now */
.svc-process__fallback { display: none; }

/* ── Leitbild ── */
.svc-leitbild { padding: 6rem 1rem; }
@media (min-width: 768px) { .svc-leitbild { padding: 8rem 2rem; } }

.svc-section-head { max-width: 52rem; margin-bottom: 4rem; }
.svc-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.1; margin-top: 1rem; color: var(--foreground);
}
.svc-manifesto {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 700; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--foreground);
  max-width: 54rem; margin: 2rem 0 5rem; padding: 0; border: none;
}
.svc-manifesto em { font-style: normal; color: var(--lime); }
.svc-values {
  display: grid; gap: 2rem;
  border-top: 1px solid var(--border); padding-top: 3rem;
}
@media (min-width: 768px) { .svc-values { grid-template-columns: repeat(3,1fr); gap: 3rem; } }
.svc-value__icon  { display: block; font-size: 1.5rem; color: var(--lime); margin-bottom: 1rem; line-height: 1; }
.svc-value__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground); margin-bottom: 0.75rem; }
.svc-value__text  { font-size: 0.875rem; line-height: 1.75; color: var(--muted-foreground); }

/* services.html — service rows inherit all index.html service-row styles;
   this modifier removes the top padding the section has on the homepage */
.services-preview--page { padding-top: 0; border-top: 1px solid var(--border); }
.services-preview--page .container-xl { padding-top: 0; }

/* Whiteboard drag cursor */
.wb-item { cursor: grab; }
.wb-item.is-dragging,
body.wb-dragging { cursor: grabbing !important; }

/* Custom cursor ring while dragging — shrinks and goes solid to feel like a fist */
body.wb-dragging .custom-cursor__ring {
  width: 20px !important;
  height: 20px !important;
  background: var(--lime) !important;
  border-color: var(--lime) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
body.wb-dragging .custom-cursor__dot { opacity: 0; }

/* Timeline: push left-side cards toward the center line */
.journey__item.is-left .journey__card { margin-left: auto; }

/* Lightbox prev / next navigation */
.lightbox__prev,
.lightbox__next {
  position: absolute; top: 50%; z-index: 20;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px;
  border: none;
  background: #fff;
  color: #111; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__prev { left: 1.25rem; }
.lightbox__next { right: 1.25rem; }
@media (min-width: 768px) {
  .lightbox__prev { left: 2rem; }
  .lightbox__next { right: 2rem; }
}
.lightbox__prev:hover { background: var(--lime); transform: translateY(-50%) translateX(-2px); }
.lightbox__next:hover { background: var(--lime); transform: translateY(-50%) translateX(2px); }

/* Hide arrows when only 1 image */
.lightbox[data-single] .lightbox__prev,
.lightbox[data-single] .lightbox__next { display: none; }

/* ==========================================================================
   Legal pages (Impressum / Datenschutz)
   ========================================================================== */
.legal-hero {
  padding: 10rem 1rem 3rem;
}
@media (min-width: 768px) { .legal-hero { padding: 12rem 2rem 4rem; } }

.legal-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--foreground);
  margin-top: 1rem;
}

.legal-body { padding: 0 1rem 6rem; }
@media (min-width: 768px) { .legal-body { padding: 0 2rem 8rem; } }

.legal-content {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.legal-block h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.legal-block h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.legal-block p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
.legal-block a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-block a:hover { opacity: 0.8; }

/* ==========================================================================
   Hero Goo Reveal Effect
   ========================================================================== */

.hero-goo-defs {
  position: absolute; width: 0; height: 0;
  overflow: hidden; pointer-events: none;
}

/* Overlay: same bounding box as the hero section.
   Uses EXPLICIT opposite-theme CSS variables instead of filter:invert()
   so lime stays lime and no hue-shifts occur.                               */
.hero-goo-overlay {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; overflow: hidden;
  -webkit-mask: url(#hero-reveal-mask);
  mask: url(#hero-reveal-mask);

  /* ── Dark mode: overlay shows LIGHT theme ── */
  --background:       oklch(1 0 0);
  --foreground:       oklch(0.16 0.006 285);
  --card:             oklch(0.98 0 0);
  --card-foreground:  oklch(0.16 0.006 285);
  --muted:            oklch(0.96 0 0);
  --muted-foreground: oklch(0.45 0.006 285);
  --lime:             oklch(0.55 0.22 264);
  --border:           oklch(0 0 0 / 10%);
  background: var(--background);
  color: var(--foreground);
}

/* Light mode: overlay shows DARK theme */
html.light .hero-goo-overlay {
  --background:       oklch(0.16 0.006 285);
  --foreground:       oklch(0.97 0 0);
  --card:             oklch(0.21 0.006 285);
  --card-foreground:  oklch(0.97 0 0);
  --muted:            oklch(0.27 0.006 285);
  --muted-foreground: oklch(0.68 0.006 285);
  --lime:             oklch(0.85 0.21 128);
  --border:           oklch(1 0 0 / 10%);
  background: var(--background);
  color: var(--foreground);
}

.hero { isolation: isolate; }
@media (pointer: coarse) { .hero-goo-overlay { display: none; } }

/* ==========================================================================
   Sticky-hero scroll-over effect
   .page-cover slides up over the sticky hero as the user scrolls.
   ========================================================================== */
.page-cover {
  position: relative;
  z-index: 2;
  background: var(--background);
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.18);
  /* overflow: hidden removed — would clip the horizontal-scroll section */
}
/* Light mode shadow is subtler */
html.light .page-cover {
  box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Masking process — Zajno style  (full-width breakout)
   ========================================================================== */

/* Full-width breakout — reliable regardless of parent padding or max-width */
[data-mpm-section] {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Process label above the sticky */
[data-mpm-section] > .service-detail__process-label {
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* Sticky — true fullscreen */
.mpm-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Track: 4 × 100vw, JS translates horizontally */
.mpm-track {
  display: flex;
  width: 400vw;
  height: 100%;
  will-change: transform;
}

/* Each item: one full viewport wide */
.mpm-item {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* The expanding circle — JS drives width + height.
   Always OPPOSITE to current theme: dark bg → white circle, light bg → dark circle */
.mpm-circle {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  will-change: width, height;
  /* Dark mode: white circle */
  background: var(--lime);
}
html.light .mpm-circle {
  /* Light mode: dark circle */
  background: var(--lime);
}

/* ── Inner layout inside the circle ─────────────────────────────────────────
   Two-column on desktop: Lottie left, text right.
   The inner is fixed-size so it sits stably as the circle grows.           */
.mpm-inner {
  /* Fixed layout size — larger than the initial dot, visible once circle grows */
  width: min(70vw, 82vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 1.5rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .mpm-inner { grid-template-columns: 1fr; gap: 1.5rem; width: min(380px, 86vw); }
}

/* Intro frame (the service's short description) — sits plainly on the
   section background as a heading (eyebrow + headline), not inside a
   circle. Always the first frame in the horizontal sequence; fades out
   as the user scrolls into the first real process circle. */
.mpm-intro-frame {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  gap: 1rem;
  max-width: 42rem;
  padding-inline: 2rem;
  will-change: opacity;
}
.mpm-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lime);
}
.mpm-intro-desc {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--foreground);
}

/* Lottie — left column */
.mpm-lottie {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1.25rem;
  overflow: hidden;
  background: color-mix(in oklch, var(--foreground) 5%, var(--card));
}

/* Text — right column */
.mpm-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Large decorative number */
/* Text colors: opposite of current theme (inside circle) */
/* Dark mode → circle is white → text must be dark */
.mpm-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--lime);
  margin-bottom: 1rem;
  display: block;
}
html.light .mpm-num {
  color: oklch(0.97 0 0 / 15%);
}

.mpm-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: oklch(0.13 0.006 285);   /* dark text in white circle */
  margin-bottom: 1rem;
}
html.light .mpm-title {
  color: oklch(0.97 0 0);          /* white text in dark circle */
}

.mpm-desc {
  font-size: 0.9rem;
  line-height: 1.75;
  color: oklch(0.13 0.006 285 / 55%);
  max-width: 22rem;
}
html.light .mpm-desc {
  color: oklch(0.97 0 0 / 60%);
}

/* Lottie bg inside circle also flips */
.mpm-lottie {
  background: var(--background);
}
html.light .mpm-lottie {
  background: oklch(0.97 0 0 / 8%);
}

/* ==========================================================================
   Mobile: turn pinned horizontal rails + circular reveal into a plain
   vertical stack. Below 768px, js/effects.js's initPinRails() clears all
   the inline styles it would otherwise set (height, transform, clip-path,
   margin) — everything below is what actually renders once those are gone.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- Featured scroll (homepage project cards) ---- */
  .featured-scroll__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: 3rem 2.5rem;
  }
  .featured-scroll__rail-wrap { overflow: visible; margin-top: 2rem; }
  .featured-scroll__rail { flex-direction: column; gap: 1.25rem; }
  .featured-scroll__rail .portfolio-card {
    width: 100%;
    min-width: 0;
    opacity: 1 !important; /* bypass the JS-driven "slides into view" fade */
  }

  /* ---- Skills rail (about.html) ---- */
  .skills__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 3rem 2.5rem;
  }
  .skills__rail-wrap { overflow: visible; margin-top: 2rem; }
  .skills__rail { flex-direction: column; gap: 1.25rem; }
  .skill-card { width: 100%; }

  /* ---- Home services circular reveal (homepage) ----
     No mask on mobile: render as a normal static section, no sticky,
     no clip-path, no extra 50vh runway that only existed to give the
     growing circle room to reveal the heading gradually. */
  .home-services-reveal {
    position: static !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
  }
  .services-reveal-stage,
  .services-reveal-freeze {
    height: auto !important;
    margin-top: 0 !important;
  }
  .home-services-reveal__top { padding-top: 0; }
}

/* ==========================================================================
   Mobile: service-detail process (mpm) — plain vertical stack instead of
   the scroll-driven horizontal circle-scale mechanic. The matching JS
   (inline script per service page) skips the pin/scroll logic entirely
   below this breakpoint and just autoplays each Lottie once.
   ========================================================================== */
@media (max-width: 767px) {
  .mpm-sticky { position: static; height: auto; overflow: visible; display: block; }
  .mpm-track { width: auto !important; height: auto; display: flex; flex-direction: column; gap: 1.25rem; transform: none !important; }
  .mpm-item { width: auto; height: auto; }
  .mpm-circle {
    width: 100% !important; height: auto !important;
    border-radius: 1.5rem;
    background: var(--lime);
  }
  .mpm-inner { width: 100%; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem; }
  .mpm-lottie { max-width: 12rem; margin-inline: auto; }
}

/* ==========================================================================
   Reusable "hover swap" text animation
   Add class="hover-swap" to any link/element. On hover, the current text
   slides up and out while an identical copy slides up from below to take
   its place — a clean vertical text-swap. No need to duplicate the text
   yourself: JS clones whatever content the element already has (including
   bilingual data-l spans and icons), so it stays in sync with everything
   else automatically.
   ========================================================================== */
.hover-swap { align-items: center !important; }
.hover-swap__mask { display: block; overflow: hidden; }
.hover-swap__track {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hover-swap__line { display: flex; align-items: center; gap: 0.5em; white-space: nowrap; line-height: 1.25; }
.hover-swap__line[aria-hidden] { pointer-events: none; }
.hover-swap:hover .hover-swap__track { transform: translateY(-50%); }