:root {
  --black: #080808;
  --paper: #f2f0e9;
  --paper-soft: #fbfaf5;
  --ink: #090909;
  --muted: #5d5d58;
  --line: rgba(9, 9, 9, 0.22);
  --white-line: rgba(255, 255, 255, 0.34);
  --accent-blue: #69D3CF;
  --accent-sky: #CD6F6F;
  --accent-orange: #D3696D;
  --accent-orange-soft: #CD6F6F;
  --accent-blue-rgb: 105, 211, 207;
  --accent-sky-rgb: 205, 111, 111;
  --accent-orange-rgb: 211, 105, 109;
  --accent-orange-soft-rgb: 205, 111, 111;
  --radius: 8px;
  --max: 1150px;
  --header-height: 74px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.22);

  --ph-bg: #0B1320;
  --ph-surface: #0B1117;
  --ph-primary: #69D3CF;
  --ph-accent: #D48A2A;
  --ph-soft-coral: #D3696D;
  --ph-text: #F1E7D8;
  --ph-muted: #95A5A1;
  --ph-bg-rgb: 14, 34, 39;
  --ph-surface-rgb: 23, 52, 58;
  --ph-primary-rgb: 105, 211, 207;
  --ph-accent-rgb: 212, 138, 42;
  --ph-soft-coral-rgb: 211, 105, 109;
  --ph-text-rgb: 241, 231, 216;
  --ph-muted-rgb: 149, 165, 161;
  --ph-line: rgba(var(--ph-text-rgb), 0.18);
  --ph-paper: var(--ph-text);
  --ph-ink: var(--ph-text);
  --ph-black: var(--ph-bg);
  --ph-gold: var(--ph-accent);
  --ph-cyan: var(--ph-primary);
  --ph-coral: var(--ph-soft-coral);

}


@font-face {
  font-display: swap; 
  font-family: 'Send Flowers';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/send-flowers-v7-latin-regular.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.25rem);
  overflow-x: clip;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

body {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.42'/%3E%3C/svg%3E");
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  font: inherit;
}

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

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-140%);
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: var(--black);
  background: var(--accent-orange);
  font-weight: 900;
  transition: transform 0.25s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.8rem max(1rem, calc((100vw - var(--max)) / 2));
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.site-header.on-dark {
  color: var(--paper);
}

.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem;
  border: 1px solid rgba(9, 9, 9, 0.18);
  border-radius: var(--radius);
  background: rgba(242, 240, 233, 0.58);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1);
}

.site-header.on-dark .header-actions {
  border-color: rgba(242, 240, 233, 0.24);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.26);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-header.on-dark .site-nav {
  background: transparent;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0 0.92rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.9rem;
  font-weight: 800;
  opacity: 0.78;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
  background: rgba(var(--accent-blue-rgb), 0.18);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.25rem;
  padding-left: 0.45rem;
  border-left: 1px solid rgba(9, 9, 9, 0.2);
}

.site-header.on-dark .social-links {
  border-left-color: rgba(242, 240, 233, 0.0);
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.45rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  color: currentColor;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 950;
  transition: transform 0.2s var(--ease), background 0.2s ease, color 0.2s ease;
}

.site-header.on-dark .social-links a {
  background: rgba(255, 255, 255, 0.0);
}

.social-links a:hover,
.social-links a:focus-visible {
  transform: translateY(-2px);
  color: var(--black);
  background: var(--accent-orange) !important;
}

.social-links svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-toggle {
  display: none;
  width: 2.85rem;
  aspect-ratio: 1;
  border-radius: var(--radius);
  color: currentColor;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 1.28rem;
  height: 2px;
  margin: 0.28rem auto;
  border-radius: 999px;
  background: currentColor;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.panel-dark {
  color: var(--paper);
  background: var(--black);
}

.panel-light,
.paper-section {
  color: var(--ink);
  background: var(--paper);
}

.cover {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: calc(var(--header-height) + 3rem) 1.25rem 4rem;
}

.cover-noise {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  background:
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.18), transparent 13rem),
    radial-gradient(circle at 72% 48%, rgba(var(--accent-orange-rgb), 0.24), transparent 8rem),
    radial-gradient(circle at 44% 45%, rgba(var(--accent-blue-rgb), 0.13), transparent 12rem);
}

.cover-float {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(242, 240, 233, 0.22);
  pointer-events: none;
  animation: floatAccent 7s ease-in-out infinite alternate;
}

.float-a {
  width: 9rem;
  height: 5rem;
  left: 9%;
  top: 24%;
  transform: rotate(-9deg);
}

.float-b {
  width: 6rem;
  aspect-ratio: 1;
  right: 10%;
  bottom: 18%;
  border-radius: 999px;
  animation-delay: -2.4s;
}

.cover .ambient-light {
  position: absolute;
  z-index: 0;
  width: clamp(8rem, 14vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  filter: blur(3.2rem);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.14;
  will-change: transform;
}

.cover .ambient-light-teal {
  top: 18%;
  right: 18%;
  color: rgb(var(--accent-blue-rgb));
  animation: ambientDriftTeal 13s ease-in-out infinite alternate;
}

.cover .ambient-light-coral {
  bottom: 14%;
  left: 17%;
  color: rgb(var(--accent-orange-rgb));
  animation: ambientDriftCoral 15s ease-in-out -3.5s infinite alternate;
}

@keyframes ambientDriftTeal {
  from { transform: translate3d(-0.6rem, 0.35rem, 0) scale(0.96); }
  to { transform: translate3d(1.25rem, -1.1rem, 0) scale(1.05); }
}

@keyframes ambientDriftCoral {
  from { transform: translate3d(0.65rem, -0.35rem, 0) scale(1.04); }
  to { transform: translate3d(-1.35rem, 1rem, 0) scale(0.95); }
}

@keyframes floatAccent {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -1.1rem;
  }
}

.cover-inner {
  position: relative;
  z-index: 1;
  width: min(1360px, 100%);
  display: grid;
  justify-items: center;
}

.meta-line {
  margin: 0 0 2rem;
  color: rgba(242, 240, 233, 0.82);
  font-size: 1.05rem;
  font-weight: 800;
}

.selection-frame {
  position: relative;
  border: 1px dashed currentColor;
  max-width: 100%;
}
.selection-frame a {
  transition: all 1s ease;
}
.selection-frame a:hover {
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.26);
}

.cover-frame {
  width: min(1180px, 100%);
  height: var(--cover-frame-height, 22rem);
  min-height: 18rem;
  max-height: 72svh;
  display: grid;
  place-items: center;
  padding: 3rem 2rem;
  color: rgba(242, 240, 233, 0.72);
  animation: frameFloat 6s ease-in-out infinite alternate;
  touch-action: none;
}

.handle {
  position: absolute;
  z-index: 2;
  width: 0.82rem;
  aspect-ratio: 1;
  background: currentColor;
  animation: handlePulse 2.6s ease-in-out infinite;
}

.handle-a { left: -0.41rem; top: -0.41rem; }
.handle-b { left: 50%; top: -0.41rem; transform: translateX(-50%); }
.handle-c { right: -0.41rem; top: -0.41rem; }
.handle-d { right: -0.41rem; bottom: -0.41rem; }
.handle-e { left: 50%; bottom: -0.41rem; transform: translateX(-50%); }
.handle-f { left: -0.41rem; bottom: -0.41rem; }

@keyframes frameFloat {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -0.45rem, 0);
  }
}

@keyframes handlePulse {
  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.45;
  }
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin: 0;
  color: var(--paper);
  font-size: 8.7rem;
  line-height: 0.82;
  font-weight: 950;
  letter-spacing: 0;
}

#coverTitle {
  display: inline-block;
  white-space: nowrap;
}

.cover-title-word {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

h2 {
  margin-bottom: 1rem;
  font-size: 5.4rem;
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.7rem;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.72;
}

#casesTitle,
#webTitle,
#profileTitle,
#servicesTitle,
#ihkTitle,
#mark,
#galleryTitle,
#pixelCaseTitle,
#contactTitle{
  padding-bottom: 1.6rem !important;
}


.panel-dark p {
  color: rgba(242, 240, 233, 0.82);
}

.light-orb {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  border-radius: 999px;
  color: transparent;
  background: radial-gradient(circle, #ffffff 0 42%, rgba(255, 255, 255, 0.86) 43% 52%, transparent 54%);
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.78));
  vertical-align: -0.04em;
  animation: orbPulse 2.7s ease-in-out infinite;
}

.light-orb::after {
  content: "";
  position: absolute;
  inset: -0.08em;
  border: 2px solid rgba(var(--accent-orange-rgb), 0.86);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 999px;
  animation: orbSpin 4.2s linear infinite;
}

@keyframes orbPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.74));
  }

  50% {
    transform: translateY(-0.05em) scale(1.08);
    filter: drop-shadow(0 0 38px rgba(var(--accent-orange-rgb), 0.9));
  }
}

@keyframes orbSpin {
  to {
    transform: rotate(360deg);
  }
}

.cover-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--paper);
  opacity: 45%;
  font-size: 1.1rem;
  font-weight: 850;
}

.signature,
.script-note,
.script-note-right,
.contents-frame em {
  color: var(--accent-blue);
  font-family: 'Send Flowers';
  font-style: normal;
  font-weight: 400;
}

.signature {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  margin: 0;
  color: #ffffff96 !important;
  background: linear-gradient(100deg, var(--accent-orange), var(--accent-blue)) ;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 18px rgba(var(--accent-orange-rgb), 0.68));
  font-size: 3rem;
  transform: rotate(-5deg);
}

.resize-grip {
  position: absolute;
  right: -0.95rem;
  bottom: -0.95rem;
  z-index: 4;
  width: 2.35rem;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 240, 233, 0.48);
  border-radius: 999px;
  color: var(--black);
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(8, 8, 8, 0.24) 45% 50%, transparent 51%),
    linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  cursor: nwse-resize;
}

.resize-grip::before,
.resize-grip::after {
  content: "";
  position: absolute;
  right: 0.62rem;
  bottom: 0.62rem;
  width: 0.65rem;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.resize-grip::after {
  right: 0.62rem;
  bottom: 0.95rem;
  width: 0.95rem;
}

.resize-grip:hover,
.resize-grip:focus-visible,
.cover-frame.is-resizing .resize-grip {
  transform: scale(1.06);
  box-shadow: 0 20px 60px rgba(var(--accent-orange-rgb), 0.28);
}

.cursor-mark {
  position: absolute;
  right: -2.3rem;
  bottom: -2.45rem;
  width: 2rem;
  height: 2rem;
}

.cursor-mark::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0;
  width: 0;
  height: 0;
  border-left: 0.72rem solid currentColor;
  border-top: 0.72rem solid transparent;
  border-bottom: 0.72rem solid transparent;
  transform: rotate(-42deg);
}

.cursor-mark::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 0.95rem;
  height: 0.18rem;
  background: currentColor;
  transform: rotate(44deg);
  transform-origin: left center;
}

a .inhalt{
  color: #071827;
}

.paper-section,
.chapter {
  padding: 7rem max(1.25rem, calc((100vw - var(--max)) / 2));
}

.parallax-break {
  position: relative;
  height: 14rem;
  overflow: hidden;
  isolation: isolate;
}

.break-to-paper {
  background:
    linear-gradient(180deg, var(--black) 0 50%, var(--paper) 50% 100%);
}

.break-to-dark {
  background:
    linear-gradient(180deg, var(--paper) 0 50%, var(--black) 50% 100%);
}

.parallax-break.compact {
  height: 8rem;
  background: var(--paper);
}

.parallax-break::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1080px, calc(100% - 2rem));
  height: 1px;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(90deg, rgba(242, 240, 233, 0.62) 0 0.5rem, transparent 0.5rem 0.9rem);
  opacity: 0.55;
}

.break-to-dark::before,
.parallax-break.compact::before {
  background: repeating-linear-gradient(90deg, rgba(9, 9, 9, 0.42) 0 0.5rem, transparent 0.5rem 0.9rem);
}

.parallax-slab {
  position: absolute;
  display: block;
  border-radius: var(--radius);
  pointer-events: none;
  will-change: transform;
}

.slab-blue {
  left: max(1.25rem, calc((100vw - var(--max)) / 2));
  top: 2.25rem;
  width: 18rem;
  height: 5.2rem;
  background: var(--accent-blue);
  box-shadow: 0 24px 70px rgba(var(--accent-blue-rgb), 0.22);
  transform: translate3d(0, var(--parallax-y, 0), 0) rotate(-4deg);
}

.slab-orange {
  right: max(1.25rem, calc((100vw - var(--max)) / 2));
  bottom: 2rem;
  width: 14rem;
  height: 4.4rem;
  background: var(--accent-orange);
  box-shadow: 0 24px 70px rgba(var(--accent-orange-rgb), 0.22);
  transform: translate3d(0, var(--parallax-y, 0), 0) rotate(6deg);
}

.slab-outline {
  left: 50%;
  top: 2rem;
  width: 22rem;
  height: 6rem;
  border: 1px solid currentColor;
  color: rgba(242, 240, 233, 0.44);
  transform: translate3d(-50%, var(--parallax-y, 0), 0) rotate(-2deg);
}

.break-to-dark .slab-outline,
.parallax-break.compact .slab-outline {
  color: rgba(9, 9, 9, 0.28);
}

.profile {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.95fr);
  gap: 4rem;
  align-items: center;
}

.script-note {
  margin: 0 0 -0.25rem;
  font-size: 2.7rem;
  line-height: 1;
  transform: rotate(-5deg);
  transform-origin: left center;
}
.script-note-right {
  margin-top: -0.25rem;
  margin-right: 0;
  font-size: 1.7rem;
  line-height: 1;
  transform: rotate(5deg);
  transform-origin: left center;
}

.lead {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 850;
}

.sketch-portrait {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  
  place-items: center;
  border-radius: var(--radius);
  
}

.sketch-portrait span {
  position: relative;
  z-index: 1;
  
  color: transparent;
  -webkit-text-stroke: 1px rgba(9, 9, 9, 0.72);
  font-size: 9rem;
  font-weight: 950;
}

.portrait-lines {
  background-image: url('assets/ich-draw.png');
  background-size: cover;
  position: absolute;
  inset: 3rem;
  border: 2px solid rgba(9, 9, 9, 0.24);
  border-radius: 44% 56% 52% 48% / 38% 40% 60% 62%;
}

.portrait-lines::before,
.portrait-lines::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: inherit;
}

.portrait-lines::before {
  inset: 2rem 2.8rem 3.6rem;
  transform: rotate(6deg);
}

.portrait-lines::after {
  inset: 4.4rem 4rem 6rem;
  transform: rotate(-8deg);
}

.section-kicker {
  width: min(760px, 100%);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-kicker h2 {
  margin: 0;
}

.section-kicker p:not(.script-note) {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
  font-weight: 760;
}

.services {
  padding-top: 4.5rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--accent-blue-rgb), 0.14), transparent 18rem),
    linear-gradient(180deg, var(--paper), var(--paper-soft));
}

.services-grid,
.case-overview-grid {
  display: grid;
  gap: 1rem;
}

.services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card,
.case-overview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 18px 52px rgba(9, 9, 9, 0.08);
}

.service-card {
  min-height: 15.5rem;
  display: grid;
  align-content: end;
  padding: 1.15rem;
}

.service-card::before,
.case-overview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.16), rgba(var(--accent-orange-rgb), 0.12));
  transition: opacity 0.22s ease;
}

.service-card:hover::before,
.case-overview-card:hover::before {
  opacity: 1;
}

.service-card span,
.case-overview-card span {
  position: relative;
  z-index: 1;
  color: rgba(9, 9, 9, 0.16);
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 950;
}

.service-card h3,
.case-overview-card h3 {
  position: relative;
  z-index: 1;
  margin: 1.4rem 0 0.55rem;
  font-size: 1.28rem;
  line-height: 1.05;
}

.service-card p,
.case-overview-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 720;
}

.card-icon {
  width: 1.9rem;
  height: 1.9rem;
  opacity: 0.55;
  margin-bottom: 0.5rem;
}

.contents {
  padding-top: 3rem;
}

.contents h2 {
  margin-bottom: 2.3rem;
}

.contents-frame {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  padding: 2.2rem 2rem;
  color: var(--line);
}

.contents-frame a {
  position: relative;
  min-height: 7.5rem;
  display: grid;
  align-content: center;
  color: var(--ink);
}

.contents-frame a span {
  position: absolute;
  left: -0.15rem;
  top: -0.4rem;
  z-index: 0;
  color: rgba(9, 9, 9, 0.1);
  font-size: 5.8rem;
  line-height: 1;
  font-weight: 950;
}

.contents-frame a:hover span {
  color: rgba(71, 71, 71, 0.415);
}
.contents-frame a:hover strong {
  color: var(--accent-orange);
}


.contents-frame strong {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  line-height: 1;
  font-weight: 950;
}

.contents-frame em {
  position: relative;
  z-index: 1;
  margin-left: 4.2rem;
  color: var(--accent-blue);
  font-size: 1.8rem;
  line-height: 0.9;
}

.chapter-cover {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  text-align: center;
}

.chapter-frame {
  width: 100%;
  padding: 3.2rem 2rem;
  color: rgba(242, 240, 233, 0.72);
}

.chapter-frame h2 {
  margin: 0;
  color: var(--accent-orange);
}

.chapter-cover p {
  max-width: 560px;
  margin: 2rem 0 0;
  font-size: 1.2rem;
}

.brand-folio-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 34rem;
  display: grid;
  place-items: center;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.brand-folio-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 24%, rgba(var(--accent-blue-rgb), 0.18), transparent 18rem),
    radial-gradient(circle at 78% 68%, rgba(var(--accent-orange-rgb), 0.16), transparent 18rem);
}

.case-overview {
  padding-top: 4.5rem;
}

.case-overview-grid {
  grid-template-columns: 1.15fr 1fr 1fr;
}

.case-overview-card {
  min-height: 17rem;
  display: grid;
  align-content: end;
  padding: 1.25rem;
  color: var(--ink);
  transition: transform 0.24s var(--ease), border-color 0.24s ease, box-shadow 0.24s ease;
}

.case-overview-card:hover,
.case-overview-card:focus-visible {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--accent-blue-rgb), 0.42);
  box-shadow: 0 26px 72px rgba(9, 9, 9, 0.13);
}

.case-overview-card.is-primary {
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.24), rgba(var(--accent-orange-rgb), 0.2)),
    var(--black);
}

.case-overview-card.is-primary span {
  color: rgba(242, 240, 233, 0.18);
}

.case-overview-card.is-primary p {
  color: rgba(242, 240, 233, 0.72);
}

.case-overview-card em {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: 1.3rem;
  padding: 0.45rem 0.65rem;
  border-radius: calc(var(--radius) - 3px);
  color: var(--ink);
  background: var(--accent-blue);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
}

.case-overview-card.is-primary em {
  background: var(--accent-orange);
}

.pixel-case {
  position: relative;
  overflow: hidden;
  padding: 7rem max(1.25rem, calc((100vw - var(--max)) / 2));
  color: #f8efe1;
  background:
    radial-gradient(circle at 78% 8%, rgba(var(--accent-orange-rgb), 0.22), transparent 18rem),
    radial-gradient(circle at 16% 26%, rgba(var(--accent-blue-rgb), 0.16), transparent 18rem),
    linear-gradient(180deg, #071827 0%, #0b2235 58%, #071827 100%);
  isolation: isolate;
}

.pixel-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    linear-gradient(90deg, rgba(248, 239, 225, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(248, 239, 225, 0.08) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.pixel-case > * {
  position: relative;
  z-index: 1;
}

.case-orbit {
  position: absolute;
  z-index: 0;
  display: block;
  border: 1px solid rgba(248, 239, 225, 0.18);
  border-radius: var(--radius);
  opacity: 0.6;
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0), 0) rotate(var(--case-rotate));
  will-change: transform;
}

.case-orbit::before {
  content: "";
  position: absolute;
  inset: 0.7rem;
  background:
    linear-gradient(90deg, rgba(212, 138, 42, 0.32) 0 0.7rem, transparent 0.7rem),
    linear-gradient(180deg, rgba(40, 163, 183, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 163, 183, 0.22) 1px, transparent 1px);
  background-size: auto, 1rem 1rem, 1rem 1rem;
}

.case-orbit-a {
  --case-rotate: -8deg;
  left: max(1.25rem, calc((100vw - var(--max)) / 2 - 5rem));
  top: 9rem;
  width: 10rem;
  height: 7rem;
}

.case-orbit-b {
  --case-rotate: 5deg;
  right: max(1.25rem, calc((100vw - var(--max)) / 2 - 4rem));
  top: 36rem;
  width: 12rem;
  height: 12rem;
}

.case-orbit-c {
  --case-rotate: 11deg;
  left: max(1.25rem, calc((100vw - var(--max)) / 2 + 14rem));
  bottom: 16rem;
  width: 7rem;
  height: 7rem;
}

.pixel-case p {
  color: rgba(248, 239, 225, 0.72);
}

.pixel-case .lead {
  color: #f8efe1;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.case-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(248, 239, 225, 0.2);
  border-radius: calc(var(--radius) - 2px);
  color: #f8efe1;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.8rem;
  font-weight: 900;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.case-meta span {
  min-height: 4.4rem;
  padding: 0.85rem;
  border: 1px solid rgba(248, 239, 225, 0.16);
  border-radius: calc(var(--radius) - 2px);
  color: rgba(248, 239, 225, 0.78);
  background: rgba(7, 24, 39, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 800;
}

.case-meta strong {
  display: block;
  margin-bottom: 0.24rem;
  color: #28a3b7;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.case-claim {
  width: fit-content;
  margin: 1.4rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 0.28rem solid #d48a2a;
  color: #f8efe1 !important;
  background: rgba(212, 138, 42, 0.12);
  font-weight: 950;
}

.pixel-case-hero,
.design-system {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.9fr);
  gap: 4rem;
  align-items: center;
}

.pixel-case-copy h2,
.design-system h2 {
  color: #f8efe1;
}

.pixel-brand-board {
  position: relative;
  min-height: 31rem;
  border: 1px dashed rgba(248, 239, 225, 0.34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 58% 36%, rgba(var(--accent-orange-rgb), 0.28), transparent 10rem),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
}

.pixel-logo-lockup {
  position: absolute;
  left: 1.4rem;
  top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(7, 24, 39, 0.72);
  border: 1px solid rgba(248, 239, 225, 0.18);
}

.pixel-mark {
  width: clamp(4.8rem, 8vw, 6.4rem);
  flex: 0 0 auto;
  aspect-ratio: 1;
}

.pixel-mark--sharp,
.pixel-icon {
  padding: 0.35rem;
  border-radius: var(--radius);
  background: #071827;
  box-shadow: 0 0 34px rgba(212, 138, 42, 0.18);
}

.pixel-icon {
  width: 3.8rem;
  aspect-ratio: 1;
}

.ph-light,
.ph-roof {
  fill: #d48a2a;
}

.ph-light-soft {
  fill: #d48a2a;
  opacity: 0.78;
}

.ph-tower {
  fill: #f3e4c8;
}

.ph-window,
.ph-door {
  fill: #071827;
}

.ph-wave {
  fill: #28a3b7;
}

.pixel-logo-lockup strong {
  display: block;
  color: #f8efe1;
  font-size: 1.45rem;
  font-weight: 950;
}

.pixel-logo-lockup span,
.steam-capsule span,
.color-chip span,
.type-card span,
.application-card > span,
.case-grid article span,
.logo-directions article span {
  display: block;
  color: #28a3b7;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.steam-capsule {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  width: min(58%, 18.5rem);
  min-height: 13rem;
  display: grid;
  align-content: end;
  padding: 1.4rem;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--accent-orange-rgb), 0.92) 0 34%, transparent 34%),
    linear-gradient(135deg, #0e2c44, #071827);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.steam-capsule strong {
  margin-top: 0.55rem;
  color: #f8efe1;
  font-size: 2.1rem;
  line-height: 1;
}

.pixel-swatch {
  position: absolute;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid rgba(248, 239, 225, 0.18);
}

.swatch-navy {
  left: 1.4rem;
  bottom: 1.4rem;
  background: #071827;
}

.swatch-orange {
  left: 6rem;
  bottom: 1.4rem;
  background: var(--accent-orange);
}

.swatch-cream {
  left: 10.6rem;
  bottom: 1.4rem;
  background: #f3e4c8;
}

.pixel-interface-card {
  position: absolute;
  right: 1.4rem;
  top: 2rem;
  width: min(34%, 10rem);
  min-height: 7.2rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(var(--accent-blue-rgb), 0.2) 0 0.6rem, transparent 0.6rem),
    rgba(7, 24, 39, 0.76);
}

.pixel-interface-card span {
  display: block;
  width: 2.2rem;
  aspect-ratio: 1;
  margin-left: auto;
  background: var(--accent-orange);
}

.pixel-interface-card strong,
.pixel-interface-card small {
  display: block;
}

.pixel-interface-card strong {
  margin-top: 1.25rem;
  color: #f8efe1;
}

.pixel-interface-card small {
  margin-top: 0.2rem;
  color: rgba(248, 239, 225, 0.62);
  font-weight: 800;
}

.case-grid,
.logo-directions,
.application-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.case-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.logo-directions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-brief {
  margin-top: 4rem;
}

.case-grid article,
.logo-directions article,
.application-card,
.system-board,
.case-flow article {
  border: 1px solid rgba(248, 239, 225, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.22);
}

.case-grid article,
.logo-directions article {
  min-height: 16rem;
  padding: 1.25rem;
}

.case-grid h3,
.logo-directions h3 {
  color: #f8efe1;
  margin-top: 3.6rem;
}

.logo-directions article {
  position: relative;
  overflow: hidden;
}

.logo-directions article em {
  position: absolute;
  right: 1rem;
  top: 1rem;
  padding: 0.35rem 0.55rem;
  border-radius: calc(var(--radius) - 3px);
  color: #071827;
  background: var(--accent-orange);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.logo-directions article.is-selected {
  border-color: rgba(161, 129, 56, 1) !important;
  background: linear-gradient(0.35turn, rgba(161, 129, 56, 0.4), rgba(61, 61, 61, 0.4)) !important;
}

.design-system {
  margin-top: 5rem;
}

.system-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 1rem;
}

.color-chip {
  min-height: 8.5rem;
  display: grid;
  align-content: end;
  padding: 0.9rem;
  border-radius: calc(var(--radius) - 2px);
  color: #f8efe1;
}

.color-chip strong {
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

.color-chip.navy { background: #0b1320; }
.color-chip.orange { background: #d48a2a; color: #fff; }
.color-chip.cream { background: #f3e4c8; color: #0b1320; }
.color-chip.cyan { background: #28a3b7; color: #fff; }

.type-card,
.pattern-card {
  grid-column: span 3;
  text-align: center;
  min-height: 11rem;
  padding: 1rem;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(7, 24, 39, 0.72);
}

.type-card strong {
  text-align: center;
  display: block;
  margin: 2.2rem 0 0.4rem;
  color: #f8efe1;
  font-size: 1.45rem;
}
.type-card p {
  text-align: center;
}
.pattern-card {
  background:
    linear-gradient(90deg, var(--accent-orange) 0 1rem, transparent 1rem),
    linear-gradient(180deg, rgba(243, 228, 200, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 228, 200, 0.24) 1px, transparent 1px),
    #071827;
  background-size: auto, 1.2rem 1.2rem, 1.2rem 1.2rem, auto;
}

.application-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 5rem;
}

.application-card.website,
.application-card.card {
  grid-column: span 2;
}

.application-card {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.15rem;
  overflow: hidden;
  position: relative;
}

.application-card::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(248, 239, 225, 0.2);
  border-radius: calc(var(--radius) - 2px);
}

.application-card strong {
  position: relative;
  z-index: 1;
  color: #f8efe1;
  font-size: 1.5rem;
}

.application-card > span {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.app-mock {
  position: relative;
  z-index: 1;
  margin-bottom: auto;
}

.browser-mini {
  overflow: hidden;
  min-height: 8.5rem;
  border: 1px solid rgba(248, 239, 225, 0.24);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(7, 24, 39, 0.74);
}

.browser-mini-top {
  display: flex;
  gap: 0.3rem;
  padding: 0.55rem;
  border-bottom: 1px solid rgba(248, 239, 225, 0.16);
}

.browser-mini-top i {
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #f3e4c8;
  opacity: 0.76;
}

.browser-mini-body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem;
}

.browser-mini-body p {
  margin: 0;
  color: #f8efe1;
  font-size: 1rem;
  font-weight: 950;
}

.browser-mini-body b {
  grid-column: 2;
  width: fit-content;
  padding: 0.42rem 0.56rem;
  border-radius: calc(var(--radius) - 3px);
  color: #071827;
  background: var(--accent-orange);
  font-size: 0.72rem;
}

.steam-art {
  min-height: 9rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at 72% 22%, rgba(var(--accent-orange-rgb), 0.62), transparent 4.2rem),
    linear-gradient(180deg, rgba(var(--accent-blue-rgb), 0.18), transparent 55%),
    #071827;
}

.steam-art .pixel-icon {
  width: 5.6rem;
  transform: translateY(0.4rem);
}

.steam-art i {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 1rem;
  height: 0.7rem;
  background: repeating-linear-gradient(90deg, var(--accent-blue) 0 1.1rem, transparent 1.1rem 1.8rem);
  opacity: 0.72;
}

.sticker-mock {
  display: grid;
  place-items: center;
  width: 8.1rem;
  aspect-ratio: 1;
  align-self: center;
  border-radius: 999px;
  background: #f3e4c8;
  box-shadow: inset 0 0 0 0.6rem rgba(255, 255, 255, 0.36), 0 18px 42px rgba(0, 0, 0, 0.2);
}

.sticker-mock .pixel-icon {
  width: 5.2rem;
}

.card-stack {
  min-height: 9rem;
  isolation: isolate;
}

.card-stack > div {
  position: absolute;
  width: 72%;
  min-height: 5.4rem;
  padding: 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.card-stack > div:first-child {
  left: 0;
  top: 1.1rem;
  color: #071827;
  background: #f3e4c8;
}

.card-stack > div:last-child {
  right: 0;
  bottom: 0.2rem;
  display: grid;
  place-items: center;
  background: #071827;
}

.card-stack b,
.card-stack small {
  display: block;
}

.card-stack small {
  margin-top: 0.4rem;
  color: rgba(7, 24, 39, 0.64);
  font-weight: 800;
}

.hoodie-mock {
  width: 8.4rem;
  min-height: 9.5rem;
  align-self: center;
  display: grid;
  place-items: center;
  border-radius: 40% 40% 16% 16% / 20% 20% 10% 10%;
  background:
    radial-gradient(circle at 50% 17%, transparent 0 1.65rem, rgba(243, 228, 200, 0.18) 1.7rem 2rem, transparent 2.05rem),
    #071827;
  box-shadow: inset 0 0 0 0.8rem rgba(255, 255, 255, 0.04);
}

.hoodie-mock::before,
.hoodie-mock::after {
  content: "";
  position: absolute;
  top: 2.4rem;
  width: 2.2rem;
  height: 5.7rem;
  border-radius: var(--radius);
  background: #071827;
}

.hoodie-mock::before {
  left: -1.25rem;
  transform: rotate(12deg);
}

.hoodie-mock::after {
  right: -1.25rem;
  transform: rotate(-12deg);
}

.hoodie-mock .pixel-icon {
  width: 3.9rem;
  z-index: 1;
}

.favicon-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.1rem 0.7rem;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(7, 24, 39, 0.12);
}

.favicon-set .pixel-icon:nth-child(1) {
  width: 2.75rem;
}

.favicon-set .pixel-icon:nth-child(2) {
  width: 3.6rem;
}

.favicon-set .pixel-icon:nth-child(3) {
  width: 5rem;
}

.application-card.website {
  background:
    radial-gradient(circle at 78% 28%, var(--accent-orange) 0 1.4rem, transparent 1.5rem),
    linear-gradient(90deg, rgba(var(--accent-blue-rgb), 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--accent-blue-rgb), 0.16) 1px, transparent 1px),
    linear-gradient(135deg, #0e2c44, #071827);
  background-size: auto, 1.2rem 1.2rem, 1.2rem 1.2rem, auto;
}

.application-card.steam {
  background:
    linear-gradient(135deg, rgba(var(--accent-orange-rgb), 0.94) 0 38%, transparent 38%),
    linear-gradient(135deg, #12354d, #071827);
}

.application-card.steam strong {
  font-size: 1.32rem;
}

.application-card.sticker {
  background:
    radial-gradient(circle at 50% 45%, #f3e4c8 0 4.3rem, transparent 4.4rem),
    var(--accent-blue);
}

.application-card.sticker > span,
.application-card.sticker strong {
  color: #071827;
}

.application-card.sticker strong {
  align-self: center;
  font-size: 1.15rem;
}

.application-card.card {
  background:
    linear-gradient(90deg, #f3e4c8 0 58%, #071827 58%);
}

.application-card.card span,
.application-card.card strong {
  color: #071827;
}

.application-card.hoodie {
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--accent-orange-rgb), 0.7), transparent 5rem),
    #111820;
}

.application-card.favicon {
  background:
    linear-gradient(90deg, rgba(7, 24, 39, 0.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 24, 39, 0.14) 1px, transparent 1px),
    #f3e4c8;
  background-size: 0.8rem 0.8rem;
}

.application-card.favicon > span,
.application-card.favicon strong {
  color: #071827;
}

.application-card.favicon strong {
  text-align: center;
  font-size: 1.08rem;
}

.case-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 5rem;
}

.case-flow article {
  min-height: 13rem;
  padding: 1.1rem;
}

.case-flow span {
  color: var(--accent-orange);
  font-size: 2.5rem;
  font-weight: 950;
  line-height: 1;
}

.case-flow strong {
  display: block;
  margin: 1.8rem 0 0.55rem;
  color: #f8efe1;
  font-size: 1.1rem;
}

.chapter-split {
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(320px, 0.9fr);
  gap: 4rem;
  align-items: center;
}

.chapter-split.reverse {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 0.75fr);
}

.project-steps {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.project-steps article {
  padding: 0.85rem;
  border: 1px solid rgba(9, 9, 9, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.54);
}

.project-steps strong {
  display: block;
  color: var(--accent-orange);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-steps p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.52;
  font-weight: 720;
}

.project-steps-dark article {
  border-color: rgba(242, 240, 233, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.project-steps-dark strong {
  color: var(--accent-blue);
}

.project-steps-dark p {
  color: rgba(242, 240, 233, 0.7);
}

.ihk-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.1rem;
}

.browser-mockup {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-soft);
  box-shadow: var(--shadow);
}

.browser-top {
  display: flex;
  gap: 0.45rem;
  padding: 0.85rem;
  border-bottom: 2px solid var(--ink);
}

.browser-top span {
  width: 0.78rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--ink);
}

.mock-hero {
  height: 11rem;
  margin: 1.2rem;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--accent-orange) 0 32%, transparent 32%),
    linear-gradient(135deg, var(--black), #153b66);
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0 1.2rem 1.2rem;
}

.mock-grid span {
  min-height: 5.7rem;
  border-radius: var(--radius);
  background: #dedbd1;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.social-grid span {
  min-height: 13rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.82) 0 28%, transparent 28%),
    linear-gradient(135deg, #f2f0e9, #171717);
}

.social-grid span:nth-child(2) {
  background:
    linear-gradient(90deg, var(--accent-orange) 0 32%, transparent 32%),
    linear-gradient(135deg, #f2f0e9, #222);
}

.social-grid span:nth-child(3) {
  background:
    radial-gradient(circle at 72% 34%, var(--accent-sky) 0 16%, transparent 17%),
    linear-gradient(135deg, #f2f0e9, #191919);
}

.social-grid span:nth-child(4) {
  background:
    linear-gradient(135deg, transparent 0 55%, var(--accent-orange-soft) 55%),
    linear-gradient(135deg, #f2f0e9, #242424);
}

.print-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: #171717;
  box-shadow: var(--shadow);
}

.print-spread span {
  min-height: 24rem;
  border-radius: calc(var(--radius) - 2px);
  background:
    linear-gradient(90deg, rgba(9, 9, 9, 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9, 9, 9, 0.16) 1px, transparent 1px),
    var(--paper-soft);
  background-size: 1.5rem 1.5rem;
}

.print-spread span:first-child {
  background:
    linear-gradient(180deg, var(--accent-blue) 0 22%, transparent 22%),
    linear-gradient(90deg, rgba(9, 9, 9, 0.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9, 9, 9, 0.16) 1px, transparent 1px),
    var(--paper-soft);
  background-size: auto, 1.5rem 1.5rem, 1.5rem 1.5rem;
}

.process h2 {
  margin-bottom: 2.2rem;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.contact {
  padding: 8rem max(1.25rem, calc((100vw - var(--max)) / 2));
}

.contact-inner {
  width: min(900px, 100%);
}

.contactTitle h2 {
  max-width: 880px;
}

.mail-link {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid rgba(242, 240, 233, 0.42);
  border-radius: 999px;
  color: var(--black);
  background: var(--accent-orange);
  font-weight: 950;
}

.site-footer {
  width: min(var(--max), calc(100% - 2.5rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 1.6rem 0;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer a {
  color: inherit;
}

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 240, 233, 0.4);
  border-radius: 999px;
  color: var(--black);
  background: var(--accent-orange);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  transition: transform 0.22s var(--ease), box-shadow 0.22s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reveal {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.985);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-card.reveal,
.case-overview-card.reveal {
  opacity: 1;
  transform: none;
}

.magnetic {
  will-change: transform;
}

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 4px;
}

@media (max-width: 1050px) {
  .site-nav a {
    padding-inline: 0.65rem;
  }

  .social-links a {
    width: 2.2rem;
  }

  h1 {
    font-size: 6.4rem;
  }

  h2 {
    font-size: 4.2rem;
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .services-grid,
  .case-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-overview-card.is-primary {
    grid-column: 1 / -1;
  }

  .pixel-case-hero,
  .design-system {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .case-grid,
  .case-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ihk-steps {
    grid-template-columns: 1fr;
  }

  .logo-directions {
    grid-template-columns: 1fr;
  }

  .application-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-orbit {
    opacity: 0.34;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 70px;
  }

  .site-header {
    padding-inline: 1rem;
    justify-content: end;
  }

  .site-header::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(5, 8, 9, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.24s ease;
  }

  body.nav-open .site-header::before {
    pointer-events: auto;
    opacity: 1;
  }

  .header-actions {
    z-index: 1;
    gap: 0.5rem;
    padding: 0.25rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }

  body.nav-open .header-actions {
    color: var(--paper);
    border-color: rgba(242, 240, 233, 0.22);
    background: rgba(18, 20, 21, 0.94);
  }

  .social-links a {
    width: 2.45rem;
  }

  .social-links a:nth-child(3),
  .social-links a:nth-child(4) {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    top: calc(var(--header-height) + 0.8rem);
    left: auto;
    right: 1rem;
    width: min(22rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: 1fr;
    counter-reset: mobile-nav;
    gap: 0.35rem;
    padding: 0.6rem;
    border: 1px solid rgba(242, 240, 233, 0.18);
    border-radius: var(--radius);
    color: var(--paper);
    background: rgba(12, 15, 18, 0.62);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.65rem) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.24s var(--ease);
  }

  .site-nav.is-open {
    color: var(--paper);
    background: rgba(12, 15, 18, 0.62);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .site-header.on-dark .site-nav.is-open {
    color: var(--paper);
    background: rgba(12, 15, 18, 0.62);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-color: rgba(242, 240, 233, 0.18);
  }

  .site-nav a {
    counter-increment: mobile-nav;
    justify-content: flex-start;
    gap: 0.65rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(242, 240, 233, 0.09);
    color: var(--paper);
    background: rgba(242, 240, 233, 0.055);
    opacity: 0.88;
  }

  .site-nav a::before {
    content: counter(mobile-nav, decimal-leading-zero);
    flex: 0 0 auto;
    color: var(--accent-blue);
    font-size: 0.68rem;
    font-weight: 950;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.is-active {
    color: var(--paper);
    border-color: rgba(var(--accent-blue-rgb), 0.42);
    background: rgba(var(--accent-blue-rgb), 0.14);
    opacity: 1;
  }

  body.nav-open .social-links a,
  body.nav-open .nav-toggle {
    color: var(--paper);
  }

  .cover-frame {
    min-height: 15rem;
    height: auto;
    animation: none;
  }

  .resize-grip {
    display: none;
  }

  h1 {
    font-size: 4.6rem;
  }

  h2 {
    font-size: 3.25rem;
  }

  .signature {
    right: 1.5rem;
    bottom: 1.5rem;
    font-size: 1.5rem;
  }

  .cover-label {
    left: 1.4rem;
    top: 1.2rem;
    font-size: 0.95rem;
  }

  .cursor-mark {
    right: 0.7rem;
    bottom: 0.7rem;
    transform: scale(0.82);
  }

  .contents-frame {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-orbit-a,
  .case-orbit-b,
  .case-orbit-c {
    display: none;
  }

  .pixel-portal-bg {
    transform: none !important;
  }

  .portal-ring {
    display: none;
  }
}

@media (max-width: 560px) {
  .cover,
  .paper-section,
  .chapter,
  .contact {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .cover {
    min-height: 92svh;
  }

  h1 {
    font-size: 3.3rem;
  }

  h2 {
    font-size: 2.55rem;
  }

  .cover-frame {
    min-height: 12rem;
    height: auto;
    padding: 2rem 1rem;
  }

  .profile,
  .contents,
  .paper-section,
  .chapter,
  .contact {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sketch-portrait {
    min-height: 23rem;
  }

  .sketch-portrait span {
    font-size: 5.8rem;
  }

  .contents-frame,
  .services-grid,
  .case-overview-grid,
  .project-steps {
    grid-template-columns: 1fr;
  }

  .case-overview-card.is-primary {
    grid-column: auto;
  }

  .section-kicker p:not(.script-note) {
    font-size: 1rem;
  }

  .service-card,
  .case-overview-card {
    min-height: 12.8rem;
  }

  .contents-frame {
    gap: 0.75rem;
    padding: 1.4rem 1.1rem;
  }

  .contents-frame a {
    min-height: 6.5rem;
  }

  .contents-frame a span {
    font-size: 4.4rem;
  }

  .contents-frame strong {
    font-size: 1.62rem;
  }

  .contents-frame em {
    margin-left: 3.3rem;
    font-size: 1.45rem;
  }

  .cover-label {
    display: none;
  }

  .cursor-mark {
    display: none;
  }

  .pixel-case {
    padding: 5rem 0.9rem;
  }

  .pixel-case-copy h2,
  .design-system h2 {
    font-size: 2.55rem;
  }

  .case-tags span {
    flex: 1 1 calc(50% - 0.55rem);
    justify-content: center;
  }

  .case-meta {
    grid-template-columns: 1fr;
  }

  .pixel-brand-board {
    min-height: 34rem;
  }

  .pixel-logo-lockup {
    left: 0.9rem;
    right: 0.9rem;
    top: 0.9rem;
  }

  .pixel-mark {
    width: 4.5rem;
  }

  .pixel-interface-card {
    left: 0.9rem;
    right: 0.9rem;
    top: 9.6rem;
    width: auto;
    min-height: 6.8rem;
  }

  .steam-capsule {
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.9rem;
    width: auto;
    min-height: 10.8rem;
  }

  .steam-capsule strong {
    font-size: 1.72rem;
  }

  .pixel-swatch {
    width: 3rem;
  }

  .swatch-navy {
    left: 0.9rem;
    bottom: 12.45rem;
  }

  .swatch-orange {
    left: 4.45rem;
    bottom: 12.45rem;
  }

  .swatch-cream {
    left: 8rem;
    bottom: 12.45rem;
  }

  .case-grid,
  .logo-directions,
  .system-board,
  .application-grid,
  .case-flow {
    grid-template-columns: 1fr;
  }

  .case-grid h3,
  .logo-directions h3 {
    margin-top: 2.6rem;
  }

  .type-card,
  .pattern-card,
  .application-card.website,
  .application-card.card {
    grid-column: auto;
  }

  .application-card {
    min-height: 12rem;
  }

  .site-footer {
    width: calc(100% - 1.8rem);
    align-items: flex-start;
    padding-right: 3.3rem;
  }

  .back-to-top {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 2.75rem;
  }
}

/* Portfolio review pass: clearer positioning, honest skill levels and deeper cases. */
#casesTitle {
  padding-bottom: 1.6rem;
}

.skills-toolkit {
  width: min(var(--max), 100%);
  margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
  padding-block: clamp(1.5rem, 2.5vw, 2.1rem);
  border-top: 1px solid rgba(9, 9, 9, 0.16);
  border-bottom: 1px solid rgba(9, 9, 9, 0.16);
}

.skills-toolkit-head {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(18rem, 1.25fr);
  gap: 0.2rem 2rem;
  align-items: end;
  margin-bottom: 1.35rem;
}

.skills-toolkit-head .script-note {
  grid-column: 1 / -1;
  margin-bottom: 0.15rem;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
}

.skills-toolkit-head h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.skills-toolkit-head > p:last-child {
  max-width: 38rem;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

.skill-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(9, 9, 9, 0.12);
}

.skill-groups section {
  min-width: 0;
  padding: 1.2rem;
}

.skill-groups section + section {
  border-left: 1px solid rgba(9, 9, 9, 0.12);
}

.skill-groups h4 {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.skill-groups ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-groups li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid rgba(9, 9, 9, 0.11);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.48);
  font-size: 0.86rem;
  font-weight: 850;
}

.skill-groups li span {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.skill-groups li em {
  flex: 0 0 auto;
  color: var(--accent-orange);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.ihk-steps article {
  display: grid;
  align-content: start;
}

.pixel-case .case-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pixel-case .case-flow article {
  min-height: clamp(12rem, 14vw, 14.5rem);
}

.case-visual-note {
  width: min(54rem, 100%);
  margin: clamp(1.4rem, 2.5vw, 2rem) auto 0;
  padding: 0.9rem 1rem;
  border-left: 0.22rem solid var(--ph-primary);
  color: rgba(var(--ph-text-rgb), 0.82) !important;
  background: rgba(var(--ph-surface-rgb), 0.54);
  font-size: 0.88rem;
  line-height: 1.55;
}

.case-visual-note strong {
  color: var(--ph-text);
}

.palette-cyan,
.color-chip.cyan {
  background: var(--ph-soft-coral) !important;
}

.gallery-tag {
  min-height: 2.75rem;
}

@media (max-width: 1050px) {
  .pixel-case .case-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .skills-toolkit-head {
    grid-template-columns: 1fr;
  }

  .skill-groups {
    grid-template-columns: 1fr;
  }

  .skill-groups section + section {
    border-top: 1px solid rgba(9, 9, 9, 0.12);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .skills-toolkit-head > p:last-child {
    font-size: 0.9rem;
  }

  .skill-groups section {
    padding-inline: 0;
  }

  .pixel-case .case-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cursor-trail {
    display: none;
  }
}

/* Pixelhafen studio direction */
.pixel-case {
  --ph-paper: #f7f4ee;
  --ph-ink: #0b1320;
  --ph-black: #0e1117;
  --ph-gold: #d48a2a;
  --ph-cyan: #28a3b7;
  /* Override global accents so all child elements use Pixelhafen brand colors */
  --accent-orange: #d48a2a;
  --accent-orange-rgb: 212, 138, 42;
  --accent-orange-soft: #e09e4a;
  --accent-orange-soft-rgb: 224, 158, 74;
  --accent-blue: #28a3b7;
  --accent-blue-rgb: 40, 163, 183;
  --ph-line: rgba(11, 19, 32, 0.16);
  color: var(--ph-ink);
  background:
    radial-gradient(circle at 82% 12%, rgba(212, 138, 42, 0.14), transparent 20rem),
    radial-gradient(circle at 18% 22%, rgba(40, 163, 183, 0.1), transparent 17rem),
    linear-gradient(180deg, #fbfaf6 0%, var(--ph-paper) 100%);
}

.pixel-case::before {
  opacity: 0.38;
  background:
    linear-gradient(90deg, rgba(11, 19, 32, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11, 19, 32, 0.055) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem;
}

.pixel-case p,
.pixel-case .lead {
  color: rgba(11, 19, 32, 0.72);
}

.pixel-case .lead {
  color: var(--ph-ink);
}

.pixel-case-copy h2,
.design-system h2 {
  color: var(--ph-ink);
}

.case-orbit {
  border-color: rgba(11, 19, 32, 0.12);
}

.case-orbit::before {
  background:
    linear-gradient(90deg, rgba(212, 138, 42, 0.42) 0 0.7rem, transparent 0.7rem),
    linear-gradient(180deg, rgba(11, 19, 32, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 32, 0.12) 1px, transparent 1px);
  background-size: auto, 1rem 1rem, 1rem 1rem;
}

.case-tags span,
.case-meta span {
  border-color: var(--ph-line);
  color: var(--ph-ink);
  background: rgba(255, 255, 255, 0.72);
}

.case-meta strong,
.case-grid article span,
.logo-directions article span,
.color-chip span,
.type-card span,
.application-card > span {
  color: var(--ph-gold);
}

.case-claim {
  border-left-color: var(--ph-gold);
  color: #fff !important;
  background: var(--ph-ink);
  box-shadow: 0 18px 44px rgba(11, 19, 32, 0.16);
}

.pixel-brand-board {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 244, 238, 0.96));
  box-shadow: 0 30px 80px rgba(11, 19, 32, 0.14);
}

.studio-presentation-head {
  align-items: center;
  justify-content: center;
}

.studio-logo-slot {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 52% 44%, rgba(212, 138, 42, 0.28), transparent 42%),
    linear-gradient(145deg, #081321, #0e1117);
  box-shadow: 0 18px 46px rgba(11, 19, 32, 0.24);
}

.studio-logo-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255, 255, 255, 0.16) 44% 56%, transparent 56%),
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.08), transparent 38%);
  opacity: 0.82;
}

.studio-logo-slot span,
.studio-logo-slot i {
  position: relative;
  z-index: 1;
  display: block;
  width: 22%;
  height: 52%;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, #fff7ea, #d48a2a);
}

.studio-logo-slot span::after,
.studio-logo-slot i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  width: 3.8rem;
  height: 2.1rem;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--ph-gold) 0 3px, transparent 3px 7px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.logo-slot-hero {
  width: clamp(8rem, 18vw, 13rem);
  aspect-ratio: 1;
  border-radius: 0 36% 0 0;
}

.studio-wordmark strong {
  display: block;
  color: var(--ph-ink);
  font-size: clamp(2.3rem, 4vw, 4rem);
  font-weight: 650;
  letter-spacing: 0.34em;
  line-height: 1;
}

.studio-wordmark span {
  display: block;
  margin-top: 1.2rem;
  color: var(--ph-gold);
  font-size: clamp(1rem, 1.8vw, 1.9rem);
  font-weight: 750;
  letter-spacing: 0.44em;
}

.studio-wordmark em {
  display: block;
  margin-top: 1.6rem;
  color: rgba(11, 19, 32, 0.58);
  font-style: normal;
  font-weight: 800;
}

.studio-reasons {
  grid-row: span 2;
  padding-left: 1.5rem;
  border-left: 1px solid var(--ph-line);
}

.studio-reasons h3 {
  margin: 0 0 1.1rem;
  color: var(--ph-gold);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.studio-reasons article {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  margin-top: 1rem;
}

.studio-reasons article > span {
  display: grid;
  place-items: center;
  width: 2.55rem;
  aspect-ratio: 1;
  border-radius: 999px;
  color: #fff;
  background: var(--ph-ink);
  font-size: 1.2rem;
  font-weight: 850;
}

.studio-reasons article:nth-of-type(2) > span::before,
.studio-reasons article:nth-of-type(3) > span::before,
.studio-reasons article:nth-of-type(4) > span::before {
  content: "";
  width: 1rem;
  aspect-ratio: 1;
  border: 2px solid currentColor;
  border-radius: 999px 999px 2px 2px;
}

.studio-reasons article:nth-of-type(3) > span::before {
  border-radius: 2px;
}

.studio-reasons article:nth-of-type(4) > span::before {
  border-radius: 0;
  transform: rotate(45deg);
  background: currentColor;
}

.studio-reasons strong {
  display: block;
  color: var(--ph-ink);
  font-size: 0.92rem;
}

.studio-reasons p {
  margin: 0.18rem 0 0;
  color: rgba(11, 19, 32, 0.62);
  font-size: 0.84rem;
  line-height: 1.35;
}

.studio-preview-row {
  display: grid;
  grid-template-columns: 0.9fr 1.55fr 0.85fr 0.9fr;
  gap: 0;
  padding-top: 1.4rem;
}

.studio-preview-row article {
  min-height: 8.8rem;
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding: 0 1.1rem;
  border-right: 1px solid var(--ph-line);
}

.studio-preview-row article:last-child {
  border-right: 0;
}

.studio-preview-row span,
.studio-palette span {
  color: var(--ph-ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo-slot-small,
.logo-slot-favicon,
.logo-slot-mono {
  width: 5.7rem;
  aspect-ratio: 1;
}

.logo-slot-favicon {
  border-radius: 1.1rem;
}

.logo-slot-mono {
  filter: grayscale(1) contrast(1.18);
}

.mini-wordmark strong {
  display: block;
  color: var(--ph-ink);
  font-size: 1.6rem;
  letter-spacing: 0.32em;
}

.mini-wordmark em {
  display: block;
  margin-top: 0.45rem;
  color: var(--ph-gold);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.42em;
}

.studio-palette {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ph-line);
}

.studio-palette article {
  min-height: 7rem;
  display: grid;
  align-content: end;
  padding: 0.9rem;
  border-radius: calc(var(--radius) - 2px);
}

.studio-palette strong {
  margin-top: 0.24rem;
  font-size: 0.8rem;
}

.palette-navy,
.palette-navy span,
.color-chip.navy {
  color: #fff !important;
  background: #0b1320;
}

.palette-black,
.palette-black span,
.color-chip.black {
  color: #fff !important;
  background: #0e1117;
}

.palette-gold,
.palette-gold span,
.color-chip.orange {
  color: #fff !important;
  /* background: #d48a2a; */
}

.palette-cyan,
.color-chip.cyan {
  color: #fff !important;
  background: #28a3b7;
}

.case-grid article,
.logo-directions article,
.application-card,
.system-board,
.case-flow article {
  border-color: var(--ph-line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 54px rgba(11, 19, 32, 0.1);
}

.case-grid h3,
.logo-directions h3 {
  color: var(--ph-ink);
}

.logo-directions article em {
  color: #fff;
  background: var(--ph-gold);
}

.logo-directions article.is-selected {
  border-color: rgba(212, 138, 42, 0.58);
  background: linear-gradient(145deg, rgba(212, 138, 42, 0.18), rgba(255, 255, 255, 0.82));
}

.system-board {
  background: rgba(255, 255, 255, 0.72);
}

.type-card,
.pattern-card {
  background: var(--ph-ink);
}

.type-card strong {
  color: #fff;
}

.type-card p {
  color: rgba(255, 255, 255, 0.68);
}

.pattern-card {
  background:
    radial-gradient(circle at 72% 34%, rgba(212, 138, 42, 0.42), transparent 5rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    #0b1320;
  background-size: auto, 1.35rem 1.35rem, 1.35rem 1.35rem, auto;
}

.application-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.application-card.website,
.application-card.splash {
  grid-column: span 2;
}

.application-card {
  min-height: 17rem;
}

.application-card::before {
  border-color: rgba(11, 19, 32, 0.12);
}

.application-card > span,
.application-card strong {
  color: var(--ph-ink);
}

.website-scene,
.splashscreen,
.social-preview {
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at 76% 34%, rgba(212, 138, 42, 0.52), transparent 6rem),
    linear-gradient(145deg, rgba(11, 19, 32, 0.96), rgba(14, 17, 23, 0.98));
}

.website-scene {
  min-height: 12rem;
  padding: 0.9rem;
}

.scene-nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.scene-nav b {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.logo-slot-mini {
  width: 2rem;
  aspect-ratio: 1;
}

.website-scene strong,
.website-scene p,
.website-scene em {
  display: block;
  color: #fff;
}

.website-scene strong {
  margin-top: 2rem;
  font-size: 1.35rem;
  line-height: 1.05;
}

.website-scene p {
  width: min(16rem, 78%);
  margin: 0.7rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
}

.website-scene em {
  width: fit-content;
  margin-top: 1rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ph-gold);
  border-radius: calc(var(--radius) - 3px);
  color: var(--ph-gold);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

.studio-hoodie {
  position: relative;
  width: 8.5rem;
  min-height: 10.4rem;
  align-self: center;
  display: grid;
  place-items: center;
  border-radius: 44% 44% 12% 12% / 26% 26% 8% 8%;
  background: linear-gradient(145deg, #111821, #070b10);
  box-shadow: inset 0 0 0 0.75rem rgba(255, 255, 255, 0.04), 0 18px 42px rgba(11, 19, 32, 0.2);
}

.studio-hoodie::before,
.studio-hoodie::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  width: 2.15rem;
  height: 5.8rem;
  border-radius: var(--radius);
  background: #090f17;
}

.studio-hoodie::before {
  left: -1.15rem;
  transform: rotate(12deg);
}

.studio-hoodie::after {
  right: -1.15rem;
  transform: rotate(-12deg);
}

.logo-slot-fabric {
  width: 4.4rem;
  aspect-ratio: 1;
  z-index: 1;
  box-shadow: none;
}

.splashscreen {
  min-height: 11rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
}

.logo-slot-splash {
  width: 5.4rem;
  aspect-ratio: 1;
  box-shadow: none;
}

.splashscreen strong {
  color: #fff;
  letter-spacing: 0.42em;
  font-size: 0.9rem;
}

.splashscreen > span {
  width: 2.2rem;
  aspect-ratio: 1;
  border: 2px solid rgba(212, 138, 42, 0.3);
  border-top-color: var(--ph-gold);
  border-radius: 999px;
}

.social-preview {
  min-height: 12rem;
  padding: 0 0.9rem 0.9rem;
  background: #fff;
  border: 1px solid var(--ph-line);
}

.social-cover {
  height: 5rem;
  margin: 0 -0.9rem;
  background:
    radial-gradient(circle at 74% 42%, rgba(212, 138, 42, 0.55), transparent 4rem),
    linear-gradient(145deg, #0b1320, #0e1117);
}

.logo-slot-avatar {
  width: 4.5rem;
  aspect-ratio: 1;
  margin-top: -2.3rem;
  border: 0.22rem solid #fff;
  border-radius: 999px;
}

.social-preview strong {
  display: block;
  margin-top: 0.5rem;
  color: var(--ph-ink);
  font-size: 1.1rem;
}

.social-preview p {
  margin: 0.25rem 0 0;
  color: rgba(11, 19, 32, 0.64);
  font-size: 0.82rem;
}

.card-stack > div:first-child {
  color: var(--ph-ink);
  background: #fff;
}

.card-stack > div:last-child {
  background: var(--ph-ink);
}

.logo-slot-card {
  width: 4.4rem;
  aspect-ratio: 1;
}

.favicon-set {
  background: rgba(11, 19, 32, 0.08);
}

.logo-slot-16 {
  width: 1.8rem;
  aspect-ratio: 1;
}

.logo-slot-32 {
  width: 2.7rem;
  aspect-ratio: 1;
}

.logo-slot-64 {
  width: 4.1rem;
  aspect-ratio: 1;
}

.case-flow span {
  color: var(--ph-gold);
}

.case-flow strong {
  color: var(--ph-ink);
}

@media (max-width: 1050px) {
  .pixel-brand-board {
    grid-template-columns: 1fr;
  }

  .studio-reasons {
    grid-row: auto;
    padding: 1.3rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--ph-line);
  }

  .studio-preview-row,
  .studio-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .application-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pixel-case {
    padding: 5rem 0.9rem;
  }

  .studio-presentation-head {
    min-height: auto;
  }

  .pixel-brand-board {
    padding: 1rem;
  }

  .studio-wordmark strong {
    font-size: clamp(1.8rem, 11vw, 2.45rem);
    letter-spacing: 0.18em;
  }

  .studio-wordmark span {
    letter-spacing: 0.28em;
  }

  .studio-preview-row,
  .studio-palette {
    grid-template-columns: 1fr;
  }

  .studio-preview-row article {
    border-right: 0;
    border-bottom: 1px solid var(--ph-line);
  }

  .studio-preview-row article:last-child {
    border-bottom: 0;
  }

  .application-card.website,
  .application-card.splash {
    grid-column: auto;
  }

  .application-grid {
    grid-template-columns: 1fr;
  }

  .website-scene strong {
    font-size: 1.18rem;
  }
}

/* Pixelhafen asset integration */
.pixel-case {
  --ph-paper: #f8f2e8;
  --ph-ink: #f8f2e8;
  --ph-black: #060b11;
  --ph-gold: #d48a2a;
  --ph-cyan: #28a3b7;
  --ph-line: rgba(248, 242, 232, 0.18);
  color: var(--ph-ink);
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.9), rgba(5, 8, 12, 0.72) 38%, rgba(5, 8, 12, 0.92)),
    radial-gradient(circle at 69% 28%, rgba(212, 138, 42, 0.24), transparent 22rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover fixed;
}

.pixel-case::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6, 11, 17, 0.18), rgba(6, 11, 17, 0.74));
  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem, auto;
  mask-image: none;
}

.pixel-case p,
.pixel-case .lead {
  color: rgba(248, 242, 232, 0.76);
}

.pixel-case .lead,
.pixel-case-copy h2,
.design-system h2 {
  color: var(--ph-ink);
}

.case-tags span,
.case-meta span,
.case-grid article,
.logo-directions article,
.application-card,
.system-board,
.case-flow article,
.pixel-brand-board {
  border-color: var(--ph-line);
  background: rgba(6, 11, 17, 0.62);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.case-meta strong,
.case-grid article span,
.logo-directions article span,
.color-chip span,
.type-card span,
.application-card > span,
.studio-reasons h3,
.studio-preview-row span,
.studio-palette span {
  color: var(--ph-gold);
}

.case-grid h3,
.logo-directions h3,
.application-card > strong,
.case-flow strong,
.studio-reasons strong,
.studio-wordmark strong,
.mini-wordmark strong {
  color: var(--ph-ink);
}

.case-claim {
  border-left-color: var(--ph-gold);
  color: var(--ph-black) !important;
  background: linear-gradient(135deg, #fff4dc, var(--ph-gold));
}

.pixel-brand-board {
  background:
    linear-gradient(180deg, rgba(6, 11, 17, 0.68), rgba(6, 11, 17, 0.46)),
    radial-gradient(circle at 76% 28%, rgba(212, 138, 42, 0.18), transparent 15rem);
}

.studio-presentation-head,
.studio-reasons,
.studio-preview-row article,
.studio-palette {
  border-color: var(--ph-line);
}

.studio-logo-slot {
  background: rgba(4, 8, 13, 0.58);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.studio-logo-slot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.28rem;
}

.studio-logo-slot:has(img)::before,
.studio-logo-slot:has(img) span,
.studio-logo-slot:has(img) i {
  display: none;
}

.logo-slot-hero {
  width: min(26rem, 100%);
  aspect-ratio: 1.35;
  border-radius: var(--radius);
  background: rgba(4, 8, 13, 0.18);
  box-shadow: none;
}

.logo-slot-hero img {
  padding: 0;
}

.studio-wordmark span,
.mini-wordmark em {
  color: var(--ph-gold);
}

.studio-wordmark em,
.studio-reasons p,
.case-flow p {
  color: rgba(248, 242, 232, 0.68);
}

.studio-reasons article > span {
  color: var(--ph-gold);
  background: rgba(248, 242, 232, 0.08);
  border: 1px solid var(--ph-line);
}

.studio-palette article,
.color-chip {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.palette-navy,
.color-chip.navy {
  color: #fff;
  background: #0b1320;
}

.palette-black,
.color-chip.black {
  color: #fff;
  background: #0e1117;
}

.palette-gold,
.color-chip.orange {
  color: #0b1320;
  background: #d48a2a;
}

.palette-cyan,
.color-chip.cyan {
  color: #061016;
  background: #28a3b7;
}

.color-chip span,
.color-chip strong {
  color: inherit;
}

.logo-directions article.is-selected {
  border-color: rgba(212, 138, 42, 0.58);
  background: linear-gradient(145deg, rgba(212, 138, 42, 0.18), rgba(6, 11, 17, 0.66));
}

.type-card,
.pattern-card {
  background: rgba(6, 11, 17, 0.82);
}

.type-card strong {
  color: var(--ph-ink);
}

.pattern-card {
  background:
    radial-gradient(circle at 70% 42%, rgba(212, 138, 42, 0.42), transparent 5rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
}

.website-scene,
.splashscreen {
  background:
    linear-gradient(135deg, rgba(6, 11, 17, 0.82), rgba(6, 11, 17, 0.42)),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
}

.asset-mock {
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(6, 11, 17, 0.5);
}

.asset-mock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-shirt,
.asset-bag {
  min-height: 12.8rem;
}

.phone-preview {
  min-height: 17rem;
  justify-self: center;
}

.phone-preview img {
  object-position: center;
}

.splashscreen img {
  width: min(11rem, 68%);
  max-height: 7rem;
  object-fit: contain;
}

.splashscreen strong {
  color: rgba(248, 242, 232, 0.86);
}

.favicon-set {
  background: rgba(248, 242, 232, 0.08);
}

.logo-slot-16,
.logo-slot-32,
.logo-slot-64,
.logo-slot-mini,
.logo-slot-small,
.logo-slot-favicon,
.logo-slot-mono {
  background: rgba(248, 242, 232, 0.94);
}

.logo-slot-16 img,
.logo-slot-32 img,
.logo-slot-64 img,
.logo-slot-mini img,
.logo-slot-small img,
.logo-slot-favicon img,
.logo-slot-mono img {
  padding: 0;
}

/* Keep the Pixelhafen brand board compact inside the hero column. */
.pixel-brand-board {
  grid-template-columns: 1fr;
  gap: 1.35rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.studio-presentation-head {
  min-height: 13.5rem;
  grid-template-columns: minmax(7rem, 0.36fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: 0 0 1.25rem;
}

.studio-wordmark {
  min-width: 0;
  overflow: hidden;
}

.studio-wordmark strong {
  max-width: 100%;
  font-size: clamp(1.85rem, 2.35vw, 2.75rem);
  letter-spacing: clamp(0.16em, 1.2vw, 0.28em);
  white-space: nowrap;
}

.studio-wordmark span {
  font-size: clamp(0.9rem, 1.25vw, 1.2rem);
  letter-spacing: clamp(0.22em, 1.2vw, 0.34em);
}

.studio-reasons {
  grid-row: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
  padding: 1.25rem 0 0;
  border-left: 0;
  border-top: 1px solid var(--ph-line);
}

.studio-reasons h3 {
  grid-column: 1 / -1;
  margin: 0;
}

.studio-reasons article {
  margin: 0;
  align-items: start;
}

.studio-reasons p {
  max-width: 26ch;
}

.studio-preview-row {
  grid-template-columns: 0.95fr minmax(0, 1.2fr) 0.85fr 0.9fr;
  border-top: 1px solid var(--ph-line);
}

.mini-wordmark {
  min-width: 0;
  overflow: hidden;
}

.mini-wordmark strong {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: clamp(0.16em, 1vw, 0.24em);
  white-space: nowrap;
}

.mini-wordmark em {
  letter-spacing: clamp(0.2em, 1vw, 0.32em);
}

.studio-palette {
  padding-top: 1.2rem;
}

@media (max-width: 1180px) {
  .studio-presentation-head {
    grid-template-columns: 1fr;
  }

  .logo-slot-hero {
    width: min(20rem, 100%);
  }
}

@media (max-width: 700px) {
  .studio-reasons,
  .studio-preview-row {
    grid-template-columns: 1fr;
  }

  .studio-preview-row article {
    min-height: 7.8rem;
    border-right: 0;
    border-bottom: 1px solid var(--ph-line);
  }

  .studio-preview-row article:last-child {
    border-bottom: 0;
  }

  .studio-wordmark strong {
    white-space: normal;
  }
}

@media (max-width: 820px) {
  .pixel-case {
    background-attachment: scroll;
    background-position: center top;
  }
}

/* Prevent the long "Markenrichtung" headline from sliding behind the board. */
.design-system {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin-top: clamp(4.8rem, 7vw, 6.6rem);
}

.design-system > div:first-child,
.system-board {
  min-width: 0;
}

.design-system > div:first-child {
  padding-top: 0.35rem;
  overflow: clip;
}

.design-system h2 {
  max-width: 100%;
  font-size: clamp(2.85rem, 3.25vw, 3.75rem);
  line-height: 0.92;
  white-space: nowrap;
}

.design-system p {
  max-width: 34rem;
}

.system-board {
  overflow: hidden;
}

.system-board > * {
  min-width: 0;
}

.application-grid {
  position: relative;
  z-index: 2;
  gap: clamp(1rem, 2vw, 1.35rem);
  margin-top: clamp(4rem, 6vw, 5.8rem);
}

.application-card.hoodie,
.application-card.social,
.application-card.favicon {
  grid-column: span 2;
}

@media (max-width: 1050px) {
  .design-system {
    grid-template-columns: 1fr;
  }

  .design-system > div:first-child {
    overflow: visible;
  }

  .design-system h2 {
    font-size: clamp(3rem, 8vw, 5rem);
    white-space: normal;
  }

  .application-card.hoodie,
  .application-card.social,
  .application-card.favicon {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .design-system {
    gap: 1.4rem;
  }

  .design-system h2 {
    font-size: clamp(2.55rem, 12vw, 4rem);
    overflow-wrap: anywhere;
  }

  .application-card {
    grid-column: auto;
  }
}

/* Pixelhafen polish pass: keep marks, system headline and favicon mockups clean. */
.studio-preview-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding-top: 1.15rem;
}

.studio-preview-row article,
.studio-preview-row article:last-child {
  min-width: 0;
  min-height: 8.1rem;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 0.9rem 0.65rem;
  border: 1px solid var(--ph-line);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(6, 11, 17, 0.26);
}

.studio-preview-row span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.logo-slot-small,
.logo-slot-favicon,
.logo-slot-mono {
  width: min(5.15rem, 100%);
  max-width: 5.15rem;
}

.design-system {
  grid-template-columns: 1fr;
  gap: 1.45rem;
}

.design-system > div:first-child {
  max-width: 48rem;
  overflow: visible;
}

.design-system h2 {
  font-size: clamp(3.2rem, 5.6vw, 5.2rem);
  white-space: normal;
}

.system-board {
  width: 100%;
}

.application-card.splash,
.application-card.social,
.application-card.favicon {
  justify-content: space-between;
}

.application-card.splash .app-mock,
.application-card.social .app-mock,
.application-card.favicon .app-mock {
  margin-block: auto;
}

.application-card.social .phone-preview {
  align-self: center;
}

.application-card.favicon {
  align-items: stretch;
}

.application-card.favicon .favicon-set {
  min-height: 15rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  place-content: center;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  padding: 1rem;
}

.application-card.favicon strong {
  margin-top: 0;
  text-align: center;
}

.logo-slot-16 {
  width: clamp(3rem, 4.4vw, 3.8rem);
}

.logo-slot-32 {
  width: clamp(3.8rem, 5.4vw, 4.8rem);
}

.logo-slot-64 {
  width: clamp(4.9rem, 6.8vw, 6rem);
}

@media (max-width: 700px) {
  .studio-preview-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .studio-preview-row article,
  .studio-preview-row article:last-child {
    min-height: 7rem;
    padding: 0.7rem 0.45rem;
    border: 1px solid var(--ph-line);
  }

  .studio-preview-row span {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .logo-slot-small,
  .logo-slot-favicon,
  .logo-slot-mono {
    width: min(4.2rem, 100%);
  }
}

@media (max-width: 460px) {
  .studio-preview-row {
    grid-template-columns: 1fr;
  }

  .application-card.favicon .favicon-set {
    grid-template-columns: repeat(3, auto);
    min-height: 12rem;
  }
}

/* Pixelhafen portal intro */
.pixel-case {
  overflow: clip;
}

.pixel-portal {
  --portal-progress: 0;
  --portal-zoom: 1;
  --portal-copy-opacity: 1;
  --portal-bg-opacity: 0;
  --portal-bg-scale: 1.13;
  --portal-aura-opacity: 0;
  --portal-mark-blur: 0px;
  --portal-mark-opacity: 1;
  --portal-mark-y: 120px;
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 188svh;
  margin: -1.5rem calc(50% - 50vw) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.pixel-portal-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: calc(var(--header-height) + 2rem) 1rem 3rem;
  perspective: 1000px;
}

.pixel-portal-bg {
  position: absolute;
  inset: 0;
  opacity: var(--portal-bg-opacity);
  transform: scale(var(--portal-bg-scale));
  transform-origin: center;
  background:
    linear-gradient(180deg, rgba(6, 11, 17, 0.16), rgba(6, 11, 17, 0.78)),
    radial-gradient(circle at 50% 42%, rgba(212, 138, 42, 0.28), transparent 22rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
  filter: saturate(1.08) contrast(1.04);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.pixel-portal-copy {
  position: absolute;
  top: clamp(7rem, 12vh, 9rem);
  left: 50%;
  z-index: 2;
  width: min(56rem, calc(100% - 2rem));
  transform: translate3d(-50%, calc(var(--portal-progress) * -2.4rem), 0);
  opacity: var(--portal-copy-opacity);
  text-align: center;
  pointer-events: none;
}

.pixel-portal-copy .script-note {
  margin: 0 0 0.25rem;
}

.pixel-portal-copy strong {
  display: block;
  color: var(--ph-ink);
  font-size: clamp(4rem, 10vw, 10.5rem);
  font-weight: 950;
  line-height: 0.82;
  letter-spacing: 0;
}

.pixel-portal-copy span {
  display: block;
  margin-top: 1rem;
  color: rgba(248, 242, 232, 0.78);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pixel-portal-anchor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--portal-mark-y));
  z-index: 3;
  width: clamp(9rem, 22vw, 18rem);
  aspect-ratio: 643 / 774;
  transform: translate3d(-46.05%, -54.05%, 0)
             rotateY(var(--portal-tilt-y, 0deg))
             rotateX(var(--portal-tilt-x, 0deg));
  will-change: top, transform;
}

.portal-ring {
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-radius: 12px;
  pointer-events: none;
  will-change: transform, opacity;
}

.portal-ring-1 {
  inset: -16% -12%;
  border-color: rgba(var(--ph-accent-rgb), 0.42);
  box-shadow:
    0 0 2rem rgba(var(--ph-accent-rgb), 0.18),
    inset 0 0 2rem rgba(var(--ph-accent-rgb), 0.08);
  transform: scale(var(--ring-1-scale, 1));
  transform-origin: 46.81% 53.07%;
  opacity: var(--ring-1-opacity, 0);
}

.portal-ring-2 {
  inset: -36% -28%;
  border-color: rgba(var(--ph-primary-rgb), 0.26);
  box-shadow: 0 0 3rem rgba(var(--ph-primary-rgb), 0.12);
  transform: scale(var(--ring-2-scale, 1));
  transform-origin: 47.47% 52.35%;
  opacity: var(--ring-2-opacity, 0);
}

.pixel-portal-mark {
  position: absolute;
  inset: 0;
  opacity: var(--portal-mark-opacity);
  transform: scale(var(--portal-zoom));
  transform-origin: 46.05% 54.05%;
  filter:
    drop-shadow(0 2rem 5rem rgba(0, 0, 0, 0.46))
    blur(var(--portal-mark-blur));
  will-change: transform;
}

.pixel-portal-mark::before,
.pixel-portal-mark::after {
  content: "";
  position: absolute;
  left: 46.05%;
  top: 54.05%;
  z-index: 1;
  width: 34%;
  aspect-ratio: 1 / 1.45;
  border-radius: 999px 999px 18px 18px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.pixel-portal-mark::before {
  opacity: var(--portal-aura-opacity);
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 246, 228, 0.68), rgba(212, 138, 42, 0.28) 46%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
}

.pixel-portal-mark::after {
  width: 42%;
  opacity: calc(var(--portal-aura-opacity) * 0.55);
  border: 1px solid rgba(248, 242, 232, 0.24);
  box-shadow:
    inset 0 0 2rem rgba(255, 246, 228, 0.13),
    0 0 4rem rgba(212, 138, 42, 0.24);
}

.pixel-portal-mark img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pixel-portal-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  min-width: 4.2rem;
  min-height: 2.2rem;
  transform: translateX(-50%);
  border: 1px solid rgba(248, 242, 232, 0.18);
  border-radius: 999px;
  color: rgba(248, 242, 232, 0.7);
  background: rgba(6, 11, 17, 0.42);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: var(--portal-copy-opacity);
}

.pixel-case-hero {
  position: relative;
  z-index: 3;
}

.site-header.on-dark {
  color: var(--paper) !important;
}

.site-header.on-dark .site-nav:not(.is-open) a,
.site-header.on-dark .social-links a,
.site-header.on-dark .nav-toggle {
  color: var(--paper);
}

/* Pixelhafen final palette pass: edit the --ph-* values in :root to retone the whole case study. */
.pixel-case {
  --ph-paper: var(--ph-text);
  --ph-ink: var(--ph-text);
  --ph-black: var(--ph-bg);
  --ph-gold: var(--ph-accent);
  --ph-cyan: var(--ph-primary);
  --ph-line: rgba(var(--ph-text-rgb), 0.18);
  color: var(--ph-text);
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.93), rgba(var(--ph-bg-rgb), 0.76) 38%, rgba(var(--ph-bg-rgb), 0.94)),
    radial-gradient(circle at 69% 28%, rgba(var(--ph-accent-rgb), 0.2), transparent 22rem),
    radial-gradient(circle at 20% 18%, rgba(var(--ph-primary-rgb), 0.14), transparent 18rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover fixed;
}

.pixel-case::before {
  background:
    linear-gradient(90deg, rgba(var(--ph-text-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--ph-text-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.14), rgba(var(--ph-bg-rgb), 0.72));
}

.pixel-case p,
.pixel-case .lead,
.studio-wordmark em,
.studio-reasons p,
.case-flow p {
  color: rgba(var(--ph-text-rgb), 0.76);
}

.case-tags span,
.case-meta span,
.case-grid article,
.logo-directions article,
.application-card,
.system-board,
.case-flow article,
.pixel-brand-board {
  border-color: var(--ph-line);
  background: rgba(var(--ph-bg-rgb), 0.62);
}

.case-meta strong,
.case-grid article span,
.logo-directions article span,
.color-chip span,
.type-card span,
.application-card > span,
.studio-reasons h3,
.studio-preview-row span,
.studio-palette span,
.studio-wordmark span,
.mini-wordmark em {
  color: var(--ph-accent);
}

.logo-directions article em,
.case-claim {
  color: var(--ph-bg) !important;
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-accent));
}

.logo-directions article.is-selected {
  border-color: rgba(var(--ph-accent-rgb), 0.58);
  background: linear-gradient(145deg, rgba(var(--ph-accent-rgb), 0.18), rgba(var(--ph-bg-rgb), 0.66));
}

.pixel-brand-board {
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.68), rgba(var(--ph-surface-rgb), 0.48)),
    radial-gradient(circle at 76% 28%, rgba(var(--ph-primary-rgb), 0.16), transparent 15rem);
}

.studio-logo-slot,
.asset-mock {
  background: rgba(var(--ph-bg-rgb), 0.56);
}

.studio-preview-row article,
.studio-preview-row article:last-child {
  background: rgba(var(--ph-surface-rgb), 0.4);
}

.studio-palette {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.palette-navy,
.color-chip.navy {
  color: var(--ph-text) !important;
  background: var(--ph-bg);
}

.palette-black,
.color-chip.black {
  color: var(--ph-text) !important;
  background: var(--ph-surface);
}

.palette-gold,
.color-chip.orange {
  color: var(--ph-bg) !important;
  background: var(--ph-primary);
}

.palette-cyan,
.color-chip.cyan {
  color: var(--ph-bg) !important;
  background: var(--ph-accent);
}

.palette-navy span,
.palette-black span,
.palette-gold span,
.palette-cyan span,
.color-chip span,
.color-chip strong {
  color: inherit !important;
}

.system-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(var(--ph-bg-rgb), 0.62);
}

.type-card,
.pattern-card {
  grid-column: 1 / -1;
  background: rgba(var(--ph-bg-rgb), 0.82);
}

.type-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.type-card p {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  color: rgba(var(--ph-text-rgb), 0.76);
}

.pattern-card {
  background:
    radial-gradient(circle at 70% 42%, rgba(var(--ph-primary-rgb), 0.36), transparent 5rem),
    radial-gradient(circle at 32% 68%, rgba(var(--ph-accent-rgb), 0.22), transparent 7rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
}

.website-scene,
.splashscreen {
  background:
    linear-gradient(135deg, rgba(var(--ph-bg-rgb), 0.84), rgba(var(--ph-surface-rgb), 0.44)),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
}

.favicon-set {
  background: rgba(var(--ph-text-rgb), 0.08);
}

.pixel-portal-bg {
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.16), rgba(var(--ph-bg-rgb), 0.78)),
    radial-gradient(circle at 50% 42%, rgba(var(--ph-accent-rgb), 0.28), transparent 22rem),
    url("assets/pixelhafen-hintergrund.png") center center / cover;
}

.pixel-portal-copy span {
  color: rgba(var(--ph-text-rgb), 0.78);
}

.pixel-portal-mark::before {
  background:
    radial-gradient(ellipse at 50% 34%, rgba(var(--ph-text-rgb), 0.58), rgba(var(--ph-accent-rgb), 0.28) 46%, transparent 72%);
}

.pixel-portal-mark::after,
.pixel-portal-hint {
  border-color: rgba(var(--ph-text-rgb), 0.2);
}

.pixel-portal-mark::after {
  box-shadow:
    inset 0 0 2rem rgba(var(--ph-text-rgb), 0.12),
    0 0 4rem rgba(var(--ph-accent-rgb), 0.24);
}

.pixel-portal-hint {
  color: rgba(var(--ph-text-rgb), 0.7);
  background: rgba(var(--ph-bg-rgb), 0.42);
}

@media (max-width: 820px) {
  .pixel-case {
    background-attachment: scroll;
  }

  .studio-palette,
  .system-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .studio-palette,
  .system-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .pixel-portal {
    height: 154svh;
    margin-bottom: 3rem;
  }

  .pixel-portal-copy {
    top: clamp(6rem, 14vh, 8rem);
  }

  .pixel-portal-anchor {
    width: clamp(8.5rem, 42vw, 15rem);
    top: 53%;
  }
}

@media (max-width: 520px) {
  .pixel-portal-copy strong {
    font-size: clamp(3.45rem, 16vw, 5rem);
  }

  .pixel-portal-copy span {
    letter-spacing: 0.08em;
  }
}

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

  .cursor-trail {
    display: none;
  }

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

  .pixel-portal {
    height: auto;
    min-height: 92svh;
    margin: 0 calc(50% - 50vw) 3rem;
  }

  .pixel-portal-sticky {
    position: relative;
    min-height: 92svh;
  }

  .pixel-portal-bg {
    opacity: 0.38;
    transform: none;
  }

  .pixel-portal-copy {
    transform: translateX(-50%);
    opacity: 1;
  }

  .pixel-portal-anchor {
    top: 50%;
    transform: translate3d(-46.05%, -54.05%, 0);
  }

  .pixel-portal-mark {
    transform: none;
    opacity: 1;
  }
}

/* ── Table of Contents hover pass ─────────────────── */
.contents-frame em {
  transition: color 0.22s ease;
}

.contents-frame a {
  padding: 0.55rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  transition: background 0.22s ease !important;
}

.contents-frame a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  border-radius: 999px;
  background: var(--accent-blue);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.26s var(--ease);
}

.contents-frame a::after {
  content: "↗";
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  color: var(--accent-blue);
  font-size: 1rem;
  font-weight: 900;
  font-family: inherit;
  opacity: 0;
  transform: translate(-0.3rem, 0.25rem);
  transition: opacity 0.2s ease, transform 0.22s var(--ease);
}

.contents-frame a:hover {
  background: rgba(var(--accent-blue-rgb), 0.08);
  box-shadow: none !important;
}

.contents-frame a:hover::before {
  transform: scaleY(1);
}

.contents-frame a:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

.contents-frame a:hover em {
  color: var(--accent-orange);
}

/* ── Active nav link ───────────────────────────────── */
.site-nav a.is-active {
  opacity: 1;
  background: rgba(var(--accent-blue-rgb), 0.14);
}

/* ── Cover scroll cue ──────────────────────────────── */
.cover-scroll-cue {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: 1px;
  height: 3.2rem;
  pointer-events: none;
  overflow: hidden;
}

.cover-scroll-cue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(242, 240, 233, 0.72) 40%, rgba(242, 240, 233, 0.72));
  animation: scrollCueDrop 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes scrollCueDrop {
  0%    { transform: translateY(-100%); opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 1; }
  100%  { transform: translateY(100%); opacity: 0; }
}

@media (max-width: 820px) {
  .cover-scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-scroll-cue { display: none; }
}

/* ── Availability badge ────────────────────────────── */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(var(--accent-blue-rgb), 0.32);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(var(--accent-blue-rgb), 0.14);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.availability-badge i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 0 0 rgba(var(--accent-blue-rgb), 0.6);
  animation: availPulse 2.2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-blue-rgb), 0.6); }
  70%  { box-shadow: 0 0 0 0.55rem rgba(var(--accent-blue-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-blue-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .availability-badge i { animation: none; }
}

/* Legal pages */
.legal-page {
  background: var(--paper-soft);
}

.legal-main {
  overflow: hidden;
}

.legal-hero {
  position: relative;
  min-height: clamp(25rem, 52svh, 34rem);
  display: grid;
  align-items: end;
  padding: calc(var(--header-height) + 4rem) max(1.25rem, calc((100vw - var(--max)) / 2)) clamp(4rem, 7vw, 6rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(var(--accent-blue-rgb), 0.22), transparent 18rem),
    radial-gradient(circle at 82% 64%, rgba(var(--accent-orange-rgb), 0.2), transparent 18rem),
    linear-gradient(135deg, #050505, #101111 56%, #060606);
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(90deg, rgba(242, 240, 233, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(242, 240, 233, 0.12) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 82%, transparent);
}

.legal-hero-inner {
  position: relative;
  z-index: 1;
  width: min(58rem, 100%);
}

.legal-hero h1 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.86;
}

.legal-hero .lead {
  max-width: 42rem;
  color: rgba(242, 240, 233, 0.74);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 850;
}

.legal-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.legal-pill-row span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.82rem;
  border: 1px solid rgba(242, 240, 233, 0.24);
  border-radius: var(--radius);
  color: var(--paper);
  background: rgba(242, 240, 233, 0.07);
  font-size: 0.78rem;
  font-weight: 950;
}

.legal-pill-row:empty {
  display: none;
}

.legal-content {
  padding: clamp(4rem, 7vw, 6.5rem) max(1.25rem, calc((100vw - var(--max)) / 2));
  background:
    radial-gradient(circle at 86% 20%, rgba(var(--accent-orange-rgb), 0.12), transparent 16rem),
    linear-gradient(180deg, var(--paper-soft), var(--paper));
}

.legal-layout {
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.legal-layout--single {
  width: min(980px, 100%);
  grid-template-columns: minmax(0, 1fr);
}

.legal-aside,
.legal-card {
  border: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px);
}

.legal-aside {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  padding: 1rem;
}

.legal-aside span,
.legal-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent-orange);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-aside strong {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.05;
}

.legal-aside p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.legal-stack {
  display: grid;
  gap: 1rem;
}

.legal-layout--single .legal-stack {
  width: 100%;
}

.legal-page .legal-aside.reveal,
.legal-page .legal-stack.reveal {
  opacity: 1;
  transform: none;
}

.legal-card {
  overflow: hidden;
  padding: clamp(1.15rem, 2.4vw, 1.65rem);
}

.legal-card h2 {
  max-width: 44rem;
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1;
}

.legal-card h3 {
  max-width: 56rem;
  margin: 1.65rem 0 0.65rem;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.12;
}

.legal-card h4 {
  max-width: 56rem;
  margin: 1.15rem 0 0.45rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 950;
}

.legal-card p,
.legal-card address,
.legal-checklist,
.legal-card ul {
  max-width: 52rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.68;
}

.legal-card p {
  margin: 0.65rem 0;
}

.legal-card ul {
  padding-left: 1.2rem;
  margin: 0.7rem 0 1rem;
}

.legal-card li {
  margin: 0.35rem 0;
}

.legal-card :is(p, li, address, a, h2, h3, h4) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.legal-card address {
  font-style: normal;
}

.legal-card a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-orange-rgb), 0.55);
  text-underline-offset: 0.22em;
}

.legal-card a[href^="http"] {
  overflow-wrap: anywhere;
  word-break: normal;
}

.legal-note {
  border-color: rgba(var(--accent-orange-rgb), 0.34);
  background:
    linear-gradient(135deg, rgba(var(--accent-orange-rgb), 0.12), rgba(var(--accent-blue-rgb), 0.08)),
    rgba(255, 255, 255, 0.76);
}

.legal-checklist {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.legal-checklist li {
  position: relative;
  padding-left: 1.35rem;
}

.legal-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(9, 9, 9, 0.12);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.54);
  font-size: 0.82rem;
  font-weight: 900;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.legal-nav a:hover,
.legal-nav a:focus-visible,
.legal-nav a[aria-current="page"] {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-orange-rgb), 0.48);
  background: rgba(var(--accent-orange-rgb), 0.14);
}

@media (max-width: 820px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-aside {
    position: relative;
    top: auto;
  }
}

@media (max-width: 560px) {
  .legal-hero,
  .legal-content {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .legal-hero h1 {
    font-size: clamp(3.1rem, 15vw, 4.7rem);
  }

  .site-footer {
    align-items: flex-start;
  }

  .legal-nav {
    justify-content: flex-start;
  }

  .design-system h2 {
    font-size: clamp(2rem, 9.6vw, 3.3rem);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

@media (max-width: 340px) {
  .design-system h2 {
    font-size: 1.9rem;
  }
}

/* IHK case study */
.ihk-case {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) max(1.25rem, calc((100vw - var(--max)) / 2));
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--accent-blue-rgb), 0.2), transparent 20rem),
    radial-gradient(circle at 92% 28%, rgba(var(--accent-orange-rgb), 0.18), transparent 18rem),
    linear-gradient(180deg, var(--paper-soft), var(--paper));
}

.ihk-case::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(90deg, rgba(9, 9, 9, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9, 9, 9, 0.08) 1px, transparent 1px);
  background-size: 1.35rem 1.35rem;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.ihk-case-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4vw, 3.4rem);
  align-items: start;
}

.ihk-copy {
  width: min(100%, 48rem);
  min-width: 0;
}

.ihk-copy h2 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(3.05rem, 3.45vw, 3.65rem);
  line-height: 0.9;
}

.ihk-copy .lead {
  margin-top: 1.4rem;
  max-width: 40rem;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.28;
  font-weight: 900;
}

.ihk-copy p:not(.script-note):not(.lead) {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.72;
  font-weight: 750;
}

.ihk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.ihk-tags span,
.ihk-meta span {
  border: 1px solid rgba(9, 9, 9, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
}

.ihk-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.ihk-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.ihk-meta span {
  min-height: 4.6rem;
  padding: 0.85rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 820;
}

.ihk-meta strong {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--accent-orange);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ihk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ihk-button {
  min-height: 2.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1rem;
  border: 1px solid rgba(9, 9, 9, 0.22);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 950;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ihk-button::after {
  content: "";
  width: 0.52rem;
  aspect-ratio: 1;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.ihk-button:hover,
.ihk-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-blue-rgb), 0.7);
  background: rgba(var(--accent-blue-rgb), 0.16);
}

.ihk-button.is-primary {
  border-color: transparent;
  color: var(--black);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
}

.ihk-showcase {
  width: 100%;
  margin-top: 1.45rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.82fr));
  gap: 0.85rem;
  align-items: stretch;
  opacity: 1;
}

.ihk-showcase.reveal.is-visible {
  opacity: 1;
}

.ihk-shot {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow: hidden;
  padding: 0.8rem;
  border: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
    rgba(var(--accent-blue-rgb), 0.05);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
}

.ihk-shot-main {
  grid-row: auto;
}

.ihk-shot::before {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px dashed rgba(9, 9, 9, 0.1);
  border-radius: calc(var(--radius) - 2px);
  pointer-events: none;
}

.ihk-shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(8rem, 9vw, 10.2rem);
  object-fit: cover;
  border-radius: calc(var(--radius) - 3px);
  opacity: 0.76;
  filter: saturate(0.78) contrast(0.92) brightness(1.04);
}

.ihk-shot span {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  color: var(--accent-orange);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ihk-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.08), rgba(var(--accent-orange-rgb), 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

@media (max-width: 980px) {
  .ihk-copy h2 {
    max-width: 10ch;
  }

  .ihk-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .ihk-shot-main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .ihk-case {
    padding-inline: 0.9rem;
  }

  .ihk-meta,
  .ihk-showcase {
    grid-template-columns: 1fr;
  }

  .ihk-shot-main {
    grid-row: auto;
    min-height: 17rem;
  }

  .ihk-shot {
    min-height: 13rem;
  }

  .ihk-actions {
    flex-direction: column;
  }

  .ihk-button {
    justify-content: center;
  }
}

/* ── Portal mask-zoom reveal (SVG silhouette → image opens to viewport) ── */
.portal-mask-reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--portal-mask-opacity, 1);
  pointer-events: none;
  -webkit-mask-image: url('assets/logo-wo.svg');
  mask-image: url('assets/logo-wo.svg');
  -webkit-mask-position: 50% calc(50% + var(--portal-mark-y, 0px));
  mask-position: 50% calc(50% + var(--portal-mark-y, 0px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--portal-mask-size, 20%);
  mask-size: var(--portal-mask-size, 20%);
  transition: opacity 0.16s ease;
  will-change: opacity, mask-size, mask-position;
}

.portal-mask-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.03) brightness(1.03);
}

/* ── Portal logo signal-acquisition reveal ─────────────────────────────── */
.pixel-portal-mark img.portal-logo-revealing {
  animation: portalLogoReveal 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes portalLogoReveal {
  0%   {
    opacity: 0;
    filter: brightness(2.4) saturate(0) blur(8px);
  }
  10%  {
    opacity: 0.6;
    filter: brightness(1.8) saturate(0.15) blur(4px)
            drop-shadow(14px 0 0 rgba(var(--ph-primary-rgb), 0.92))
            drop-shadow(-14px 0 0 rgba(var(--ph-accent-rgb), 0.92));
  }
  22%  {
    opacity: 1;
    filter: brightness(1.1) saturate(0.6) blur(0.5px)
            drop-shadow(10px 0 0 rgba(var(--ph-primary-rgb), 0.72))
            drop-shadow(-10px 0 0 rgba(var(--ph-accent-rgb), 0.72));
  }
  30%  {
    filter: drop-shadow(6px 0 0 rgba(var(--ph-primary-rgb), 0.5))
            drop-shadow(-6px 0 0 rgba(var(--ph-accent-rgb), 0.5));
  }
  /* glitch spike 1 */
  36%  {
    filter: drop-shadow(16px 0 0 rgba(var(--ph-primary-rgb), 0.96))
            drop-shadow(-16px 0 0 rgba(var(--ph-accent-rgb), 0.96));
  }
  38%  {
    filter: drop-shadow(1px 0 0 rgba(var(--ph-primary-rgb), 0.2))
            drop-shadow(-1px 0 0 rgba(var(--ph-accent-rgb), 0.2));
  }
  /* glitch spike 2 */
  46%  {
    filter: drop-shadow(11px 0 0 rgba(var(--ph-primary-rgb), 0.86))
            drop-shadow(-11px 0 0 rgba(var(--ph-accent-rgb), 0.86));
  }
  48%  {
    filter: drop-shadow(2px 0 0 rgba(var(--ph-primary-rgb), 0.24))
            drop-shadow(-2px 0 0 rgba(var(--ph-accent-rgb), 0.24));
  }
  /* signal lock */
  60%  {
    filter: drop-shadow(3px 0 0 rgba(var(--ph-primary-rgb), 0.3))
            drop-shadow(-3px 0 0 rgba(var(--ph-accent-rgb), 0.3));
  }
  74%, 100% {
    filter: none;
    opacity: 1;
  }
}

.portal-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ph-primary-rgb), 0.48) 18%,
    rgba(var(--ph-text-rgb), 0.95) 50%,
    rgba(var(--ph-accent-rgb), 0.48) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 10px 3px rgba(var(--ph-primary-rgb), 0.3),
    0 0 18px 5px rgba(var(--ph-accent-rgb), 0.22);
  animation: portalScanSweep 1.5s ease-in-out both;
}

@keyframes portalScanSweep {
  0%   { top: -2px; opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 0.7; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-portal-mark img.portal-logo-revealing { animation: none; }
  .portal-scan-line { display: none; }
}

@media (max-width: 820px) {
  .pixel-portal-bg {
    transform: none !important;
  }

  .portal-ring {
    display: none !important;
  }
}

/* Layout repair: skills, cases, IHK and Pixelhafen summary */
.services-grid {
  align-items: stretch;
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
}

.service-card {
  min-height: clamp(16.5rem, 20vw, 19.5rem);
  display: flex;
  flex-direction: column;
  align-content: initial;
  padding: clamp(1.15rem, 1.55vw, 1.45rem);
}

.service-card .card-icon {
  flex: 0 0 auto;
  margin-bottom: clamp(0.75rem, 1.7vw, 1.15rem);
}

.service-card span {
  margin-bottom: 0.75rem;
  font-size: clamp(3rem, 4.4vw, 4.1rem);
}

.service-card h3 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.16rem, 1.55vw, 1.38rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.service-card p {
  font-size: clamp(0.95rem, 1.2vw, 1.04rem);
}

.case-overview-grid {
  align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

.case-overview-card {
  min-height: clamp(17rem, 22vw, 20rem);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  padding: clamp(1.15rem, 1.65vw, 1.45rem);
}

.case-overview-card span {
  max-width: 100%;
  font-size: clamp(3rem, 4.9vw, 4.4rem);
  line-height: 0.92;
  overflow-wrap: normal;
}

.case-overview-card h3 {
  margin-top: clamp(1.1rem, 1.8vw, 1.45rem);
}

.case-overview-card p {
  max-width: 31rem;
}

.case-overview-card em {
  align-self: end;
}

.ihk-copy {
  width: min(100%, var(--max));
}

.ihk-showcase,
.ihk-tags,
.ihk-meta,
.ihk-steps,
.ihk-actions {
  width: 100%;
  max-width: 100%;
}

.ihk-showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ihk-shot-main {
  grid-column: auto;
}

.ihk-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ihk-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.ihk-steps article {
  min-height: auto;
  padding: clamp(0.9rem, 1.55vw, 1.15rem);
}

.ihk-steps p {
  max-width: none !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
}

.pixel-case .case-flow {
  width: min(var(--max), 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  margin-top: clamp(2.6rem, 4vw, 3.8rem);
}

.pixel-case .case-flow article {
  min-height: clamp(14.5rem, 18vw, 17rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.15rem, 1.75vw, 1.45rem);
}

.pixel-case .case-flow strong {
  margin: 1.1rem 0 0.55rem;
}

.pixel-case .case-flow p {
  max-width: 25rem;
}

@media (max-width: 1050px) {
  .ihk-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .ihk-shot-main {
    grid-column: 1 / -1;
  }

  .ihk-meta,
  .ihk-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pixel-case .case-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .service-card {
    min-height: auto;
  }

  .ihk-meta,
  .ihk-showcase,
  .ihk-steps {
    grid-template-columns: 1fr;
  }
}

/* Motion polish: design-tool intro and stronger scroll fly-ins */
.title-letter,
.cover-label,
.signature {
  opacity: 0;
}

.cover-frame {
  border-color: rgba(242, 240, 233, 0);
  transition: border-color 0.24s ease 0.92s;
}

.cover-frame::before,
.cover-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.cover-frame::before {
  inset: -1px;
  background:
    linear-gradient(currentColor, currentColor) left top / 0 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px 0 no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1px 0 no-repeat;
  opacity: 0.8;
}

.cover-frame::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(var(--accent-blue-rgb), 0.45) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(var(--accent-orange-rgb), 0.42) 50%, transparent calc(50% + 1px));
  opacity: 0;
}

.cover-inner.is-visible .cover-frame {
  border-color: rgba(242, 240, 233, 0.72);
}

.cover-inner.is-visible .cover-frame::before {
  animation: frameDraw 0.92s var(--ease) 0.08s both;
}

.cover-inner.is-visible .cover-frame::after {
  animation: frameGuides 1.08s var(--ease) 0.34s both;
}

.title-letter {
  --i: 0;
  --letter-x: 0;
  --letter-y: 0.28em;
  --letter-rotate: 0deg;
  display: inline-block;
  transform: translate3d(var(--letter-x), var(--letter-y), 0) rotate(var(--letter-rotate)) scale(0.965);
  filter: blur(5px);
}

.title-letter:nth-child(1) { --i: 0; --letter-x: -0.16em; --letter-y: 0.3em; --letter-rotate: -2.2deg; }
.title-letter:nth-child(2) { --i: 1; --letter-x: 0.1em; --letter-y: 0.18em; --letter-rotate: 1.4deg; }
.title-letter:nth-child(3) { --i: 2; --letter-x: -0.08em; --letter-y: 0.24em; --letter-rotate: -1.2deg; }
.title-letter:nth-child(4) { --i: 3; --letter-x: 0.06em; --letter-y: 0.13em; --letter-rotate: 0.9deg; }
.title-letter:nth-child(5) { --i: 4; --letter-x: -0.04em; --letter-y: 0.23em; --letter-rotate: -0.8deg; }
.title-letter:nth-child(6) { --i: 5; --letter-x: 0.02em; --letter-y: 0.08em; --letter-rotate: 0deg; }
.title-letter:nth-child(7) { --i: 6; --letter-x: 0.08em; --letter-y: 0.2em; --letter-rotate: 1.1deg; }
.title-letter:nth-child(8) { --i: 7; --letter-x: -0.05em; --letter-y: 0.14em; --letter-rotate: -0.7deg; }
.title-letter:nth-child(9) { --i: 8; --letter-x: 0.12em; --letter-y: 0.27em; --letter-rotate: 1.8deg; }

.title-letter.light-orb {
  display: inline-grid;
}

.cover-inner.is-visible .title-letter {
  animation: letterSettle 0.72s var(--ease) both;
  animation-delay: calc(0.34s + (var(--i) * 42ms));
}

.cover-inner.is-visible .cover-label {
  animation: coverLabelIntro 0.72s var(--ease) 0.18s both;
}

.cover-inner.is-visible .signature {
  animation: signatureIntro 1.1s var(--ease) 0.76s both;
}

.cover-inner.is-visible .light-orb::before {
  animation: orbMeasurePulse 0.9s var(--ease) 0.78s both;
}

.cover-inner.is-visible .cover-frame .handle {
  animation:
    handleIntro 0.64s var(--ease) both,
    handlePulse 2.6s ease-in-out 0.8s infinite;
}

.cover-inner.is-visible .cover-frame .handle-b,
.cover-inner.is-visible .cover-frame .handle-f {
  animation-delay: 0.06s, 0.86s;
}

.cover-inner.is-visible .cover-frame .handle-b,
.cover-inner.is-visible .cover-frame .handle-e {
  animation-name: handleIntroCenter, handlePulse;
}

.cover-inner.is-visible .cover-frame .handle-c,
.cover-inner.is-visible .cover-frame .handle-e {
  animation-delay: 0.12s, 0.92s;
}

.cover-inner.is-visible .cover-frame .handle-d {
  animation-delay: 0.18s, 0.98s;
}

.light-orb::before {
  content: "";
  position: absolute;
  inset: -0.2em;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(var(--accent-blue-rgb), 0.58);
  background: transparent;
  opacity: 0;
  transform: scale(0.68);
}

@keyframes frameDraw {
  0% {
    background-size: 0 1px, 1px 0, 0 1px, 1px 0;
    opacity: 0.28;
  }
  72% {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    opacity: 0.9;
  }
  100% {
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    opacity: 0;
  }
}

@keyframes frameGuides {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

@keyframes letterSettle {
  0% {
    opacity: 0;
    transform: translate3d(var(--letter-x), var(--letter-y), 0) rotate(var(--letter-rotate)) scale(0.965);
    filter: blur(5px);
  }
  58% {
    opacity: 1;
    filter: blur(0);
  }
  72% {
    transform: translate3d(0, -0.035em, 0) rotate(0deg) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes coverLabelIntro {
  0% {
    opacity: 0;
    transform: translate3d(-0.7rem, -0.35rem, 0);
  }
  100% {
    opacity: 0.45;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes signatureIntro {
  0% {
    opacity: 0;
    transform: translate3d(1.4rem, 0.8rem, 0) rotate(-10deg);
    filter: blur(7px);
  }
  100% {
    opacity: 1;
    transform: rotate(-5deg);
    filter: drop-shadow(0 0 18px rgba(var(--accent-orange-rgb), 0.68));
  }
}

@keyframes orbMeasurePulse {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }
  38% {
    opacity: 0.76;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

@keyframes handleIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.55rem, 0) scale(0.4);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes handleIntroCenter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(0, 0.55rem, 0) scale(0.4);
  }
  100% {
    opacity: 0.9;
    transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
  }
}

.service-card.reveal,
.case-overview-card.reveal {
  opacity: 0;
  transform: translate3d(0, 2rem, 0) scale(0.97);
  transition: opacity 0.82s var(--ease), transform 0.82s var(--ease);
}

.service-card.reveal:nth-child(odd),
.case-overview-card.reveal:nth-child(odd) {
  transform: translate3d(-1.15rem, 2rem, 0) rotate(-0.35deg) scale(0.97);
}

.service-card.reveal:nth-child(even),
.case-overview-card.reveal:nth-child(even) {
  transform: translate3d(1.15rem, 2rem, 0) rotate(0.35deg) scale(0.97);
}

.service-card.reveal.is-visible,
.case-overview-card.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
}

.ihk-timebox.reveal article,
.ihk-showcase.reveal .ihk-shot,
.project-steps.reveal article,
.application-grid.reveal .application-card,
.case-flow.reveal article {
  opacity: 0;
  transform: translate3d(0, 1.8rem, 0) scale(0.975);
  transition: opacity 0.78s var(--ease), transform 0.78s var(--ease);
}

.ihk-timebox.reveal article:nth-child(odd),
.ihk-showcase.reveal .ihk-shot:nth-child(odd),
.project-steps.reveal article:nth-child(odd),
.application-grid.reveal .application-card:nth-child(odd),
.case-flow.reveal article:nth-child(odd) {
  transform: translate3d(-1rem, 1.8rem, 0) scale(0.975);
}

.ihk-timebox.reveal article:nth-child(even),
.ihk-showcase.reveal .ihk-shot:nth-child(even),
.project-steps.reveal article:nth-child(even),
.application-grid.reveal .application-card:nth-child(even),
.case-flow.reveal article:nth-child(even) {
  transform: translate3d(1rem, 1.8rem, 0) scale(0.975);
}

.ihk-timebox.reveal.is-visible article,
.ihk-showcase.reveal.is-visible .ihk-shot,
.project-steps.reveal.is-visible article,
.application-grid.reveal.is-visible .application-card,
.case-flow.reveal.is-visible article {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.ihk-timebox.reveal article:nth-child(2),
.ihk-showcase.reveal .ihk-shot:nth-child(2),
.project-steps.reveal article:nth-child(2),
.application-grid.reveal .application-card:nth-child(2),
.case-flow.reveal article:nth-child(2) {
  transition-delay: 90ms;
}

.ihk-timebox.reveal article:nth-child(3),
.ihk-showcase.reveal .ihk-shot:nth-child(3),
.project-steps.reveal article:nth-child(3),
.application-grid.reveal .application-card:nth-child(3),
.case-flow.reveal article:nth-child(3) {
  transition-delay: 170ms;
}

.project-steps.reveal article:nth-child(4),
.application-grid.reveal .application-card:nth-child(4) {
  transition-delay: 240ms;
}

.application-grid.reveal .application-card:nth-child(5) {
  transition-delay: 310ms;
}

.application-grid.reveal .application-card:nth-child(6) {
  transition-delay: 380ms;
}

.ihk-timebox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.ihk-timebox article {
  position: relative;
  overflow: hidden;
  min-height: 8.8rem;
  padding: 1rem;
  border: 1px solid rgba(9, 9, 9, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.12), rgba(var(--accent-orange-rgb), 0.1)),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.07);
}

.ihk-timebox article::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.22rem;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-orange));
}

.ihk-timebox span {
  display: block;
  color: var(--accent-orange);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ihk-timebox strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 0.96;
}

.ihk-timebox p {
  margin: 0.65rem 0 0;
  max-width: none !important;
  color: var(--muted);
  font-size: 0.88rem !important;
  line-height: 1.48 !important;
}

@media (max-width: 820px) {
  .ihk-timebox {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-letter,
  .cover-label,
  .signature,
  .service-card.reveal,
  .case-overview-card.reveal,
  .ihk-timebox.reveal article,
  .ihk-showcase.reveal .ihk-shot,
  .project-steps.reveal article,
  .application-grid.reveal .application-card,
  .case-flow.reveal article {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .cover-frame {
    border-color: rgba(242, 240, 233, 0.72);
  }

  .title-letter {
    filter: none;
  }

  .title-letter.light-orb {
    display: inline-grid;
  }

  .cover-frame::before,
  .cover-frame::after,
  .light-orb::before {
    display: none;
  }

  .cover-label {
    opacity: 0.45;
  }
}

/* Content cleanup: grouped skills, contact form and responsive media wrappers */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 3.4rem;
}

.contact-form label {
  display: grid;
  gap: 0.35rem;
}

.contact-form-message {
  grid-column: 1 / -1;
}

.contact-form span {
  color: rgba(242, 240, 233, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(242, 240, 233, 0.22);
  border-radius: var(--radius);
  color: var(--paper);
  background: rgba(242, 240, 233, 0.06);
  padding: 0.85rem 0.9rem;
  font: inherit;
  font-weight: 760;
}

.contact-form textarea {
  resize: vertical;
}

.contact-submit {
  width: fit-content;
  border-radius: 999px;
  cursor: pointer;
}

.ihk-shot picture,
.studio-logo-slot picture,
.asset-mock picture,
.splashscreen picture,
.portal-mask-reveal picture {
  display: block;
  width: 100%;
  height: 100%;
}

.portrait-lines {
  background-image: image-set(
    url("assets/ich-draw.webp") type("image/webp"),
    url("assets/ich-draw.png") type("image/png")
  );
}

.pixel-case {
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.93), rgba(var(--ph-bg-rgb), 0.76) 38%, rgba(var(--ph-bg-rgb), 0.94)),
    radial-gradient(circle at 69% 28%, rgba(var(--ph-accent-rgb), 0.2), transparent 22rem),
    radial-gradient(circle at 20% 18%, rgba(var(--ph-primary-rgb), 0.14), transparent 18rem),
    image-set(
      url("assets/pixelhafen-hintergrund.webp") type("image/webp"),
      url("assets/pixelhafen-hintergrund.png") type("image/png")
    ) center center / cover fixed;
}

.pattern-card {
  background:
    radial-gradient(circle at 70% 42%, rgba(var(--ph-primary-rgb), 0.36), transparent 5rem),
    radial-gradient(circle at 32% 68%, rgba(var(--ph-accent-rgb), 0.22), transparent 7rem),
    image-set(
      url("assets/pixelhafen-hintergrund.webp") type("image/webp"),
      url("assets/pixelhafen-hintergrund.png") type("image/png")
    ) center center / cover;
}

.website-scene,
.splashscreen {
  background:
    linear-gradient(135deg, rgba(var(--ph-bg-rgb), 0.84), rgba(var(--ph-surface-rgb), 0.44)),
    image-set(
      url("assets/pixelhafen-hintergrund.webp") type("image/webp"),
      url("assets/pixelhafen-hintergrund.png") type("image/png")
    ) center center / cover;
}

.pixel-portal-bg {
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.16), rgba(var(--ph-bg-rgb), 0.78)),
    radial-gradient(circle at 50% 42%, rgba(var(--ph-accent-rgb), 0.28), transparent 22rem),
    image-set(
      url("assets/pixelhafen-hintergrund.webp") type("image/webp"),
      url("assets/pixelhafen-hintergrund.png") type("image/png")
    ) center center / cover;
}

@media (max-width: 680px) {
  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }
}

/* Final layout polish: anchors, wrapping, layers and motion fallbacks. */
:root {
  --nav-safe-offset: calc(var(--header-height) + clamp(1.5rem, 3vw, 2.75rem));
}

html {
  scroll-padding-top: var(--nav-safe-offset);
}

[id],
section[id],
article[id] {
  scroll-margin-top: var(--nav-safe-offset);
}

.site-header {
  z-index: 120;
}

.back-to-top {
  z-index: 110;
}

.parallax-break,
.parallax-break::before,
.parallax-slab {
  z-index: 0;
  pointer-events: none;
}

.panel,
.panel-dark,
.paper-section,
.chapter,
.services,
.cases,
.ihk-case,
.pixel-case,
.contact {
  position: relative;
  z-index: 1;
}

.service-card h3,
.case-overview-card h3,
.case-flow strong,
.application-card strong,
.project-steps strong,
.design-system h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.service-card h3 {
  width: min(100%, 13.5ch);
  max-width: none;
  text-wrap: balance;
}

.service-card p,
.case-overview-card p,
.case-flow p,
.project-steps p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.case-overview-card span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(2.7rem, 4.3vw, 4rem);
  line-height: 0.95;
}

.panel-dark p,
.brand-folio-section .chapter-cover p,
.pixel-case p,
.pixel-case .lead,
.studio-reasons p,
.case-flow p,
.application-card p,
.design-system p {
  color: rgba(242, 240, 233, 0.9);
}

.pixel-case p,
.pixel-case .lead,
.studio-reasons p,
.case-flow p,
.application-card p,
.design-system p {
  color: rgba(var(--ph-text-rgb), 0.9);
}

@media (max-width: 1050px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-overview-grid,
  .case-grid,
  .application-grid,
  .case-flow,
  .pixel-case .case-flow {
    grid-template-columns: 1fr;
  }

  .case-overview-card.is-primary,
  .application-card.website,
  .application-card.card,
  .application-card.splash,
  .application-card.hoodie,
  .application-card.social,
  .application-card.favicon {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  :root {
    --nav-safe-offset: calc(var(--header-height) + 1rem);
  }

  .services-grid,
  .case-overview-grid,
  .case-grid,
  .application-grid,
  .case-flow,
  .pixel-case .case-flow {
    grid-template-columns: 1fr;
  }

  .service-card h3 {
    width: min(100%, 18ch);
    max-width: none;
  }

  .case-overview-card span {
    width: auto;
    font-size: clamp(2.55rem, 14vw, 3.35rem);
  }

  .design-system h2 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  [data-parallax],
  .parallax-slab,
  .case-orbit,
  .cover-tool,
  .title-letter,
  .pixel-portal-mark,
  .pixel-portal-bg,
  .portal-ring {
    transform: none !important;
  }

  .parallax-break {
    height: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
  }

  .parallax-break.compact {
    height: clamp(2rem, 4vw, 3rem);
  }

  .parallax-slab {
    opacity: 0.18;
  }

  .reveal,
  .reveal.is-visible,
  .service-card.reveal,
  .case-overview-card.reveal,
  .application-grid.reveal .application-card,
  .case-flow.reveal article {
    opacity: 1 !important;
    transform: none !important;
  }

  .pixel-portal {
    min-height: 88svh;
    height: auto;
    margin-bottom: 2rem;
  }
}

/* Brand Folio logo showcase: real logo cards instead of distorted background marks. */
.brand-folio-section {
  min-height: auto;
  place-items: stretch center;
  gap: clamp(2rem, 4vw, 3.4rem);
}

.brand-logo-gallery {
  position: relative;
  z-index: 2;
  width: min(var(--max), 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
}

.brand-logo-gallery article {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.6rem;
  padding: clamp(0.85rem, 1.3vw, 1rem);
  border: 1px solid rgba(242, 240, 233, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.12), rgba(var(--accent-orange-rgb), 0.08)),
    rgba(242, 240, 233, 0.055);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s var(--ease), border-color 0.24s ease, background 0.24s ease;
}

.brand-logo-gallery article:hover,
.brand-logo-gallery article:focus-within {
  transform: translateY(-0.25rem);
  border-color: rgba(var(--accent-blue-rgb), 0.42);
  background:
    linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.16), rgba(var(--accent-orange-rgb), 0.1)),
    rgba(242, 240, 233, 0.075);
}

.brand-logo-card-media {
  width: 100%;
  min-height: clamp(9.8rem, 14vw, 12.4rem);
  height: auto;
  aspect-ratio: 16 / 10;
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  border: 1px solid rgba(242, 240, 233, 0.13);
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at 72% 22%, rgba(var(--accent-blue-rgb), 0.18), transparent 7rem),
    linear-gradient(135deg, rgba(6, 17, 20, 0.95), rgba(16, 25, 28, 0.86));
}

.brand-logo-card-media picture {
  display: contents;
}

.brand-logo-card-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

.brand-logo-gallery span {
  margin-top: 0.25rem;
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-logo-gallery strong {
  color: var(--paper);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.08;
  font-weight: 950;
}

.brand-logo-gallery p {
  margin: 0;
  color: rgba(242, 240, 233, 0.86);
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 720;
}

@media (max-width: 1050px) {
  .brand-logo-card-media {
    min-height: clamp(12rem, 42vw, 17rem);
    aspect-ratio: 16 / 9;
    padding: clamp(1.4rem, 4vw, 2.25rem);
  }

  .brand-logo-card-media img {
    max-width: 76%;
    max-height: 76%;
  }
}

@media (max-width: 520px) {
  .brand-logo-card-media {
    min-height: clamp(11rem, 54vw, 14rem);
    aspect-ratio: 4 / 3;
  }

  .brand-logo-card-media img {
    max-width: 82%;
    max-height: 82%;
  }
}

/* Contact polish: clearer closing section with a focused form card. */
.contact {
  overflow: hidden;
  padding: clamp(5.5rem, 8vw, 8rem) max(1.25rem, calc((100vw - var(--max)) / 2));
  background:
    radial-gradient(circle at 12% 18%, rgba(var(--accent-blue-rgb), 0.16), transparent 18rem),
    radial-gradient(circle at 86% 74%, rgba(var(--accent-orange-rgb), 0.14), transparent 16rem),
    var(--black);
}

.contact-inner {
  width: min(var(--max), 100%);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr);
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: start;
}

.contact-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: start;
}

.contact .script-note {
  margin-bottom: -0.3rem;
}

#contactTitle h2 {
  max-width: 12ch;
  margin: 0.2rem 0 1rem;
  padding-bottom: 0 !important;
  color: var(--paper);
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: 0.88;
}

.contact-lead {
  max-width: 47rem;
  margin: 0;
  color: rgba(242, 240, 233, 0.86);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.48;
  font-weight: 850;
}

.contact-actions {
  gap: 0.85rem;
  margin-top: clamp(1.35rem, 2.6vw, 2rem);
}

.contact-actions .mail-link {
  min-height: 3.2rem;
  align-items: center;
  margin-top: 0;
  padding: 0.9rem 1.1rem;
}

.contact-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid rgba(242, 240, 233, 0.16);
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(145deg, rgba(242, 240, 233, 0.075), rgba(242, 240, 233, 0.035)),
    rgba(20, 20, 20, 0.82);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.contact-form-head {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.95rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(242, 240, 233, 0.12);
}

.contact-form .contact-form-head span {
  color: var(--accent-blue);
}

.contact-form-head strong {
  color: var(--paper);
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  line-height: 1.05;
  font-weight: 950;
}

.contact-card label {
  min-width: 0;
}

.contact-card input,
.contact-card textarea {
  min-height: 3.15rem;
  border-color: rgba(242, 240, 233, 0.18);
  background: rgba(242, 240, 233, 0.075);
  box-shadow: inset 0 1px 0 rgba(242, 240, 233, 0.06);
}

.contact-card input:focus,
.contact-card textarea:focus {
  outline: 2px solid rgba(var(--accent-blue-rgb), 0.42);
  outline-offset: 2px;
  border-color: rgba(var(--accent-blue-rgb), 0.5);
}

.contact-card textarea {
  min-height: 9rem;
}

.contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.2rem;
}

@media (max-width: 960px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }

  #contactTitle h2 {
    max-width: 13ch;
  }
}

@media (max-width: 620px) {
  .contact {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
  }

  #contactTitle {
    max-width: 9.5ch;
    font-size: clamp(3rem, 14vw, 4.7rem);
  }

  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-submit,
  .contact-actions .mail-link {
    width: 100%;
    justify-content: center;
  }
}

/* Contact reset: keep the whole section as one cohesive closing card. */
.contact-inner {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.3rem, 2.4vw, 1.9rem);
  padding: clamp(1.1rem, 2.5vw, 2rem);
  border: 1px solid rgba(242, 240, 233, 0.14);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(145deg, rgba(242, 240, 233, 0.07), rgba(242, 240, 233, 0.03)),
    rgba(16, 16, 16, 0.86);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.38);
}

.contact-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: start;
  padding-bottom: clamp(1.1rem, 2vw, 1.45rem);
  border-bottom: 1px solid rgba(242, 240, 233, 0.12);
}

.contact .script-note {
  grid-column: 1;
  margin-bottom: -0.45rem;
}

.contact .availability-badge {
  grid-column: 2;
  justify-self: end;
  width: fit-content;
  margin: 0.55rem 0 0;
}

#contactTitle,
.contact-lead,
.contact-actions {
  grid-column: 1 / -1;
}

#contactTitle {
  max-width: none;
  margin: 0;
  font-size: clamp(2.8rem, 5.2vw, 4.55rem);
}

.contact-lead {
  max-width: 48rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.25rem;
}

.contact-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact-form-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
}

.contact-card input,
.contact-card textarea {
  background: rgba(242, 240, 233, 0.06);
}

.contact-card textarea {
  min-height: 8rem;
}

@media (min-width: 760px) {
  .contact-submit {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .contact-inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(1.7rem, 3.6vw, 3rem);
  }

  .contact-copy {
    grid-template-columns: 1fr;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .contact .script-note,
  .contact .availability-badge,
  #contactTitle,
  .contact-lead,
  .contact-actions {
    grid-column: 1;
  }

  .contact .availability-badge {
    justify-self: start;
    margin-top: 0;
  }

  #contactTitle {
    max-width: 10ch;
  }

  .contact-card {
    padding: clamp(0.95rem, 1.6vw, 1.25rem);
    border: 1px solid rgba(242, 240, 233, 0.13);
    border-radius: var(--radius);
    background: rgba(242, 240, 233, 0.04);
  }

  .contact-form-head {
    display: grid;
    justify-content: stretch;
  }
}

@media (max-width: 620px) {
  .contact-inner {
    padding: 1rem;
  }

  .contact-copy {
    grid-template-columns: 1fr;
  }

  .contact .script-note,
  .contact .availability-badge,
  #contactTitle,
  .contact-lead,
  .contact-actions {
    grid-column: 1;
  }

  .contact .availability-badge {
    justify-self: start;
    margin-top: 0;
  }

  #contactTitle {
    max-width: none;
    font-size: clamp(2.85rem, 13vw, 4rem);
  }

  .contact-form-head {
    display: grid;
    justify-content: stretch;
  }
}

/* Contact validation states. */
.contact-card input[aria-invalid="true"],
.contact-card textarea[aria-invalid="true"] {
  border-color: rgba(var(--accent-orange-rgb), 0.8);
  box-shadow: 0 0 0 3px rgba(var(--accent-orange-rgb), 0.16);
}

.form-honey {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  grid-column: 1 / -1;
  min-height: 1.4rem;
  margin: -0.25rem 0 0;
  color: rgba(242, 240, 233, 0.82);
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 800;
}

.captcha-field {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0.1rem 0 0.2rem;
}

.frc-captcha {
  max-width: 100%;
}

.contact-submit:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

/* Final contact composition: one balanced closing module. */
.contact {
  padding-top: clamp(6rem, 8vw, 8.5rem);
  padding-bottom: clamp(6rem, 8vw, 8.5rem);
}

.contact-inner {
  width: min(820px, 100%);
  grid-template-columns: 1fr;
  gap: clamp(1.45rem, 3vw, 2.15rem);
  align-items: stretch;
  padding: clamp(1.35rem, 3vw, 2.6rem);
}

.contact-copy {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(0.75rem, 1.3vw, 1rem);
  padding: 0 0 clamp(1.25rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid rgba(242, 240, 233, 0.12);
}

.contact .script-note,
.contact .availability-badge,
#contactTitle,
.contact-lead,
.contact-actions {
  grid-column: 1;
}

.contact .script-note {
  margin: 0;
}

.contact .availability-badge {
  justify-self: start;
  margin: 0;
}

#contactTitle {
  max-width: none;
  margin: clamp(0.4rem, 1vw, 0.8rem) 0 0;
  color: var(--paper);
  font-size: clamp(3rem, 4.8vw, 5rem);
  line-height: 0.88;
}

.contact-lead {
  max-width: 43rem;
  margin: 0;
  color: rgba(242, 240, 233, 0.88);
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.55;
  font-weight: 780;
}

.contact-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: clamp(0.7rem, 1.5vw, 1.1rem);
}

.contact-actions .mail-link {
  width: 100%;
  min-height: 3.2rem;
  justify-content: center;
  margin: 0;
}

.contact-card {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 1rem;
  padding: clamp(1.15rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(242, 240, 233, 0.15);
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(145deg, rgba(242, 240, 233, 0.075), rgba(242, 240, 233, 0.035)),
    rgba(20, 20, 20, 0.82);
  box-shadow: inset 0 1px 0 rgba(242, 240, 233, 0.05);
}

.contact-form-head {
  display: grid;
  gap: 0.45rem;
  justify-content: stretch;
  padding-bottom: 1rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(242, 240, 233, 0.12);
}

.contact-form-head strong {
  max-width: 12ch;
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
}

.contact-card input,
.contact-card textarea {
  min-height: 3.35rem;
  background: rgba(242, 240, 233, 0.07);
}

.contact-card textarea {
  min-height: 8.8rem;
}

.captcha-field {
  margin-top: 0.15rem;
}

.contact-submit {
  width: fit-content;
  min-width: 13.5rem;
  justify-self: end;
  margin-top: 0.2rem;
}

@media (max-width: 980px) {
  .contact-inner {
    width: min(820px, 100%);
  }

  .contact-copy {
    padding-bottom: clamp(1.2rem, 3vw, 1.7rem);
  }

  #contactTitle {
    max-width: none;
  }

  .contact-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .contact {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
  }

  .contact-inner {
    padding: 1rem;
  }

  #contactTitle {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  .contact-actions,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-submit,
  .contact-actions .mail-link {
    width: 100%;
  }
}

/* Desktop scale pass: wider rhythm, calmer maximum sizes. */
:root {
  --max: 1280px;
  --section-y: clamp(4.75rem, 6vw, 6.4rem);
  --section-x: max(1.5rem, calc((100vw - var(--max)) / 2));
}

h2 {
  font-size: clamp(3.55rem, 4.7vw, 5rem);
}

p {
  line-height: 1.62;
}

.paper-section,
.chapter {
  padding: var(--section-y) var(--section-x);
}

.pixel-case,
.ihk-case,
.contact {
  padding: var(--section-y) var(--section-x);
}

.parallax-break {
  height: clamp(6rem, 8vw, 9rem);
}

.parallax-break.compact {
  height: clamp(3.75rem, 5vw, 5.5rem);
}

.section-kicker {
  width: min(920px, 100%);
  margin-bottom: clamp(1.7rem, 3vw, 2.45rem);
}

.section-kicker p:not(.script-note) {
  max-width: 52rem;
}

.script-note {
  font-size: clamp(2.15rem, 3.3vw, 2.65rem);
}

.profile {
  gap: clamp(2.5rem, 4vw, 4.5rem);
}

.profile .lead {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
}

.profile p:not(.script-note):not(.lead) {
  max-width: 38rem;
}

.sketch-portrait {
  min-height: clamp(27rem, 34vw, 32rem);
}

.services {
  padding-top: clamp(4rem, 5vw, 5.25rem);
}

.services-grid,
.case-overview-grid,
.brand-logo-gallery,
.ihk-case-inner,
.pixel-case .case-flow {
  width: min(var(--max), 100%);
  margin-inline: auto;
}

.service-card {
  min-height: clamp(14.6rem, 16vw, 17rem);
  padding: clamp(1rem, 1.25vw, 1.25rem);
}

.service-card span {
  font-size: clamp(2.45rem, 3.2vw, 3.35rem);
}

.service-card h3 {
  width: min(100%, 15.5ch);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
}

.service-card p {
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  line-height: 1.5;
}

.contents {
  padding-top: clamp(3rem, 4.8vw, 4.75rem);
}

.contents-frame {
  width: min(var(--max), 100%);
  margin-inline: auto;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  padding: clamp(1.55rem, 2.5vw, 2rem);
}

.contents-frame a {
  min-height: clamp(6rem, 9vw, 7rem);
}

.contents-frame a span {
  font-size: clamp(4.2rem, 5.7vw, 5.15rem);
}

.contents-frame strong {
  font-size: clamp(1.55rem, 2.3vw, 1.85rem);
}

.contents-frame em {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.case-overview {
  padding-top: clamp(3.5rem, 5vw, 4.8rem);
}

.case-overview-card {
  min-height: clamp(15.2rem, 18vw, 17.5rem);
  padding: clamp(1.05rem, 1.4vw, 1.28rem);
}

.case-overview-card span {
  font-size: clamp(2.35rem, 3.25vw, 3.45rem);
  line-height: 0.98;
}

.case-overview-card h3 {
  margin-top: clamp(0.8rem, 1.3vw, 1.1rem);
  font-size: clamp(1.18rem, 1.55vw, 1.35rem);
}

.case-overview-card p {
  font-size: clamp(0.92rem, 1.08vw, 1rem);
  line-height: 1.55;
}

.brand-folio-section {
  gap: clamp(1.8rem, 3vw, 2.7rem);
}

.chapter-cover {
  width: min(980px, 100%);
}

.chapter-frame {
  padding: clamp(2rem, 3vw, 2.65rem) 2rem;
}

.chapter-frame h2 {
  font-size: clamp(3.5rem, 5.3vw, 5.6rem);
}

.brand-logo-card-media {
  min-height: clamp(8.8rem, 10.5vw, 10.6rem);
}

.brand-logo-gallery strong {
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
}

.brand-logo-gallery p {
  font-size: clamp(0.82rem, 0.96vw, 0.9rem);
  line-height: 1.5;
}

.ihk-case-inner {
  gap: clamp(1.9rem, 3.2vw, 2.8rem);
}

.ihk-copy {
  width: min(100%, 58rem);
}

.ihk-copy h2 {
  font-size: clamp(3rem, 3.15vw, 3.45rem);
}

.ihk-copy .lead {
  max-width: 51rem;
  font-size: clamp(1.12rem, 1.45vw, 1.36rem);
  line-height: 1.42;
}

.ihk-copy p:not(.script-note):not(.lead) {
  max-width: 50rem;
}

.ihk-timebox article {
  padding: clamp(1rem, 1.4vw, 1.25rem);
}

.ihk-timebox strong {
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
}

.ihk-shot img {
  height: clamp(8.3rem, 8vw, 9.5rem);
}

.pixel-portal {
  height: 166svh;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.pixel-case-hero,
.design-system,
.application-grid {
  width: min(var(--max), 100%);
  margin-inline: auto;
}

.pixel-case-copy h2,
.design-system h2 {
  font-size: clamp(3.1rem, 4.4vw, 4.8rem);
}

.pixel-case .lead {
  font-size: clamp(1.12rem, 1.45vw, 1.35rem);
  line-height: 1.5;
}

.pixel-brand-board {
  padding: clamp(1rem, 1.6vw, 1.35rem);
}

.design-system {
  margin-top: clamp(3.6rem, 5.2vw, 5rem);
}

.system-board {
  padding: clamp(1rem, 1.7vw, 1.4rem);
}

.application-grid {
  margin-top: clamp(3rem, 4.5vw, 4.5rem);
}

.pixel-case .case-flow {
  margin-top: clamp(2rem, 3.2vw, 3rem);
}

.pixel-case .case-flow article {
  min-height: clamp(12rem, 14vw, 14.5rem);
}

.contact-inner {
  width: min(980px, 100%);
}

#contactTitle {
  font-size: clamp(2.8rem, 4.2vw, 4.35rem);
}

.contact-card textarea {
  min-height: clamp(7.5rem, 9vw, 8.6rem);
}

@media (max-width: 1180px) {
  :root {
    --max: 1120px;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-logo-card-media {
    min-height: clamp(10.5rem, 20vw, 14rem);
  }
}

@media (max-width: 760px) {
  :root {
    --section-y: clamp(3.8rem, 10vw, 5rem);
    --section-x: max(1rem, calc((100vw - var(--max)) / 2));
  }

  h2 {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .profile {
    gap: 2.2rem;
  }

  .contents-frame {
    padding: 1rem;
  }

  .parallax-break {
    height: clamp(4.25rem, 14vw, 6rem);
  }

  .pixel-portal {
    height: 146svh;
  }

  .contact-inner {
    width: min(100%, 40rem);
  }
}

@media (min-width: 1500px) {
  .site-header {
    transform: scale(0.96);
    transform-origin: top center;
  }
}

/* 2K refinement: less paper-column feeling, tighter tall modules. */
@media (min-width: 1024px) {
  :root {
    --section-y: clamp(4.15rem, 5.2vw, 5.65rem);
  }

  .paper-section,
  .chapter,
  .pixel-case,
  .ihk-case,
  .contact {
    padding-block: var(--section-y);
  }

  .profile,
  .ihk-case-inner,
  .pixel-case-hero {
    align-items: center;
  }

  .contact {
    min-height: auto;
  }

  .contact-inner {
    width: min(1040px, 100%);
    gap: clamp(1rem, 1.75vw, 1.45rem);
    padding: clamp(1rem, 1.8vw, 1.65rem);
  }

  .contact-copy {
    gap: 0.7rem;
    padding-bottom: clamp(0.9rem, 1.7vw, 1.25rem);
  }

  #contactTitle {
    font-size: clamp(2.55rem, 3.35vw, 3.75rem);
    line-height: 0.94;
  }

  .contact-lead {
    max-width: 54rem;
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    line-height: 1.52;
  }

  .contact-actions {
    gap: 0.75rem;
    margin-top: 0.55rem;
  }

  .contact-actions .mail-link {
    min-height: 2.85rem;
  }

  .contact-card {
    gap: 0.8rem;
    padding: clamp(1rem, 1.45vw, 1.3rem);
  }

  .contact-form-head {
    padding-bottom: 0.7rem;
  }

  .contact-form-head strong {
    max-width: none;
    font-size: clamp(1.35rem, 1.9vw, 1.85rem);
    line-height: 0.98;
  }

  .contact-card input {
    min-height: 2.8rem;
  }

  .contact-card textarea {
    min-height: clamp(5.7rem, 6.3vw, 6.8rem);
  }

  .contact-submit {
    min-height: 2.9rem;
    margin-top: 0;
  }

  .pixel-portal {
    height: 150svh;
    margin-bottom: clamp(1.4rem, 2.8vw, 2.35rem);
  }

  .pixel-portal-sticky {
    min-height: 94svh;
    padding-block: calc(var(--header-height) + 1rem) 2rem;
  }

  .pixel-portal-copy {
    top: clamp(5.8rem, 9.5vh, 7.25rem);
  }

  .pixel-case {
    padding-top: clamp(4.2rem, 5.4vw, 5.8rem);
  }

  .pixel-case .case-flow article {
    min-height: clamp(10.6rem, 12vw, 12.8rem);
  }

  .design-system {
    margin-top: clamp(2.9rem, 4vw, 4.1rem);
  }

  .application-grid {
    margin-top: clamp(2.5rem, 3.5vw, 3.6rem);
  }

  .brand-folio-section {
    padding-bottom: clamp(4rem, 5vw, 5.4rem);
  }

  .case-overview-grid {
    gap: clamp(1.05rem, 1.7vw, 1.45rem);
  }
}

@media (min-width: 1500px) {
  .cover-frame {
    transform: scale(0.94);
    transform-origin: center;
  }

  .chapter-frame h2 {
    font-size: clamp(3.4rem, 4.9vw, 5.15rem);
  }
}

@media (max-width: 760px) {
  .pixel-portal {
    height: 132svh;
  }

  .contact-card textarea {
    min-height: 7rem;
  }
}

/* Contact fine-tuning: compact the form without changing its visual language. */
.contact-form.contact-card {
  margin-top: 0;
}

.form-status:empty {
  display: none;
}

@media (min-width: 1024px) {
  .contact-card {
    row-gap: 0.68rem;
  }

  .captcha-field {
    grid-column: 1;
    align-self: center;
    padding: 0;
    margin-top: 0;
  }

  .frc-captcha {
    width: min(100%, 21rem);
  }

  .contact-submit {
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .captcha-field,
  .contact-submit {
    grid-column: 1;
  }

  .frc-captcha {
    width: 100%;
  }
}

/* Compact contact pass: keep the dark card, remove the oversized form feeling. */
.contact {
  padding-top: clamp(4.5rem, 5.5vw, 6rem);
  padding-bottom: clamp(4.5rem, 5.5vw, 6rem);
}

.contact-inner {
  width: min(920px, 100%);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  padding: clamp(1rem, 1.6vw, 1.45rem);
}

.contact-copy {
  gap: 0.55rem;
  padding-bottom: clamp(0.85rem, 1.4vw, 1.05rem);
}

.contact .script-note {
  font-size: clamp(1.75rem, 2.55vw, 2.15rem);
}

.contact .availability-badge {
  min-height: 1.8rem;
  padding-inline: 0.75rem 0.9rem;
  font-size: 0.76rem;
}

#contactTitle {
  margin-top: 0.2rem;
  font-size: clamp(2.35rem, 3.2vw, 3.35rem);
}

.contact-lead {
  max-width: 48rem;
  font-size: clamp(0.92rem, 1.02vw, 1rem);
  line-height: 1.48;
}

.contact-actions {
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.contact-actions .mail-link {
  min-height: 2.55rem;
  padding-inline: 1rem;
  font-size: 0.86rem;
}

.contact-card {
  gap: 0.62rem 0.75rem;
  padding: clamp(0.85rem, 1.25vw, 1.1rem);
}

.contact-form-head {
  gap: 0.25rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0;
}

.contact-form-head strong {
  font-size: clamp(1.22rem, 1.55vw, 1.55rem);
}

.contact-card label {
  gap: 0.22rem;
}

.contact-form span {
  font-size: 0.68rem;
}

.contact-card input,
.contact-card textarea {
  min-height: 2.45rem;
  padding: 0.65rem 0.75rem;
}

.contact-card textarea {
  min-height: clamp(4.85rem, 5vw, 5.65rem);
}

.frc-captcha {
  transform: scale(0.88);
  transform-origin: left center;
}

.contact-submit {
  min-width: 11.75rem;
  min-height: 2.55rem;
  padding-inline: 1.05rem;
  font-size: 0.9rem;
}

@media (min-width: 1500px) {
  .contact-inner {
    width: min(900px, 100%);
  }
}

@media (max-width: 620px) {
  .contact {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .contact-inner {
    width: min(100%, 32rem);
    padding: 0.9rem;
  }

  .contact-actions {
    grid-template-columns: 1fr;
  }

  .frc-captcha {
    transform: none;
  }

  .contact-card textarea {
    min-height: 7rem;
  }
}

/* Contact final compact layout: calm closing section instead of oversized form block. */
.contact-inner {
  width: min(840px, 100%);
  padding: clamp(0.9rem, 1.3vw, 1.15rem);
}

#contactTitle h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-copy {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.35rem 1rem;
  padding-bottom: 0.8rem;
}

.contact .script-note {
  grid-column: 1;
  font-size: clamp(1.65rem, 2.15vw, 1.95rem);
}

.contact .availability-badge {
  grid-column: 2;
  justify-self: start;
}

.contact-lead {
  grid-column: 1 / -1;
  max-width: none;
  font-size: clamp(0.88rem, 0.96vw, 0.95rem);
}

.contact-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.contact-actions .mail-link {
  width: auto;
  min-width: min(100%, 14rem);
  min-height: 2.35rem;
  flex: 0 1 auto;
  padding-inline: 1rem;
}

.contact-card {
  padding: clamp(0.75rem, 1.05vw, 0.95rem);
}

.contact-form-head {
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0.45rem;
  padding-bottom: 0.45rem;
}

.contact-form-head strong {
  font-size: clamp(1.12rem, 1.35vw, 1.35rem);
}

.contact-card input,
.contact-card textarea {
  min-height: 2.25rem;
  padding: 0.55rem 0.68rem;
}

.contact-card textarea {
  min-height: clamp(4rem, 4.2vw, 4.75rem);
}

.contact-submit {
  min-width: 10.8rem;
  min-height: 2.35rem;
}

@media (min-width: 1500px) {
  .contact-inner {
    width: min(820px, 100%);
  }
}

@media (max-width: 620px) {
  .contact-copy {
    grid-template-columns: 1fr;
  }

  .contact .script-note,
  .contact .availability-badge,
  .contact-lead,
  .contact-actions {
    grid-column: 1;
  }

  .contact-actions .mail-link,
  .contact-submit {
    width: 100%;
  }

  .contact-card textarea {
    min-height: 6.25rem;
  }
}

/* Contact concept: editorial split layout inspired by poster-style contact pages. */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}

.profile-cv-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(8, 8, 8, 0.18);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(var(--accent-blue-rgb), 0.12);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(8, 8, 8, 0.08);
}

.profile-cv-link:hover,
.profile-cv-link:focus-visible {
  border-color: rgba(var(--accent-blue-rgb), 0.55);
  background: rgba(var(--accent-blue-rgb), 0.2);
}

.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 7vw, 7rem) var(--section-x);
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.95), rgba(8, 8, 8, 0.98)),
    repeating-linear-gradient(90deg, rgba(242, 240, 233, 0.055) 0 1px, transparent 1px 6.5rem),
    repeating-linear-gradient(0deg, rgba(242, 240, 233, 0.035) 0 1px, transparent 1px 6.5rem);
}

.contact-layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1080px, 100%);
  margin-inline: auto;
  grid-template-columns: minmax(300px, 0.9fr) minmax(330px, 0.82fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.contact-line-form.contact-form {
  --contact-placeholder-size: clamp(0.82rem, 0.9vw, 0.92rem);
  order: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.65vw, 1.35rem);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.contact-line-form .contact-form-head {
  display: none;
}

.contact-line-form label {
  display: grid;
  gap: 0.25rem;
}

.contact-line-form span {
  color: rgba(242, 240, 233, 0.76);
  font-size: 0.8rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: none;
}

.contact-line-form input,
.contact-line-form textarea {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.35rem 0 0.65rem;
  border: 0;
  border-bottom: 1px solid rgba(242, 240, 233, 0.42);
  border-radius: 0;
  color: var(--paper);
  background: transparent;
  font: inherit;
  font-weight: 760;
  box-shadow: none;
}

.contact-line-form input::placeholder,
.contact-line-form textarea::placeholder {
  color: rgba(242, 240, 233, 0.48);
  font-size: var(--contact-placeholder-size);
  font-weight: 650;
  line-height: 1.45;
  opacity: 1;
}

.contact-line-form textarea {
  min-height: clamp(4.8rem, 7vw, 6.2rem);
  resize: vertical;
}

.contact-line-form input:focus,
.contact-line-form textarea:focus {
  outline: 0;
  border-color: var(--accent-blue);
  box-shadow: 0 2px 0 rgba(var(--accent-orange-rgb), 0.65);
}

.contact-line-form input[aria-invalid="true"],
.contact-line-form textarea[aria-invalid="true"] {
  border-color: var(--accent-orange);
  box-shadow: 0 2px 0 rgba(var(--accent-orange-rgb), 0.7);
}

.contact-line-form .captcha-field,
.contact-line-form .form-status,
.contact-line-form .contact-submit {
  grid-column: 1;
}

.contact-line-form .captcha-field {
  padding: 0;
  margin: 0;
}

.contact-line-form .frc-captcha {
  width: min(100%, 21rem);
  transform: scale(0.88);
  transform-origin: left center;
}

.contact-line-form .contact-submit {
  justify-self: start;
  min-width: min(100%, 18rem);
  min-height: 2.9rem;
  margin-top: 0.2rem;
  border: 1px solid var(--paper);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow:
    4px 4px 0 var(--accent-blue),
    -3px -3px 0 var(--accent-orange);
}

.contact-visual {
  order: 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: clamp(22rem, 33vw, 29rem);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  isolation: isolate;
}

.contact-visual::before {
  content: "";
  position: absolute;
  inset: 8% 4% 8% 6%;
  z-index: -1;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: 48% 52% 45% 55% / 42% 48% 52% 58%;
  transform: rotate(-9deg);
}

.contact-visual .script-note {
  grid-column: 1;
  margin: 0 0 0.35rem;
  color: rgba(242, 240, 233, 0.72);
  font-size: clamp(1.65rem, 2.4vw, 2rem);
}

.contact-visual .availability-badge {
  grid-column: 1;
  justify-self: start;
  margin-bottom: clamp(0.7rem, 1.4vw, 1rem);
}

.contact-visual h2 {
  grid-column: 1;
  position: relative;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.4rem, 6.5vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: 0;
  text-shadow:
    2px 0 0 var(--accent-blue),
    -2px 0 0 var(--accent-orange);
}

.contact-visual h2 span {
  position: relative;
  display: block;
  padding-left: clamp(2.4rem, 6vw, 4.8rem);
}

.contact-visual h2 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: clamp(1.8rem, 4.5vw, 3.8rem);
  height: 2px;
  background: currentColor;
  box-shadow:
    0 2px 0 var(--accent-blue),
    0 -2px 0 var(--accent-orange);
}

.contact-visual p {
  grid-column: 1;
  max-width: 24rem;
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  color: rgba(242, 240, 233, 0.74);
  font-size: clamp(0.84rem, 1vw, 0.95rem);
  font-weight: 720;
  line-height: 1.55;
}

.contact-visual .contact-actions {
  grid-column: 1;
  display: block;
  margin-top: 1rem;
}

.contact-visual .mail-link {
  width: auto;
  min-width: 0;
  min-height: 2.35rem;
  padding-inline: 1rem;
  border-color: rgba(242, 240, 233, 0.28);
  color: var(--paper);
  background: rgba(242, 240, 233, 0.06);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }

  .contact-visual {
    order: 1;
    min-height: auto;
    padding: 1.25rem 0 0;
  }

  .contact-line-form.contact-form {
    order: 2;
  }

  .contact-visual::before {
    inset: 0 4% -4% 16%;
  }
}

@media (max-width: 620px) {
  .contact {
    padding-block: 4.5rem;
  }

  .contact-visual h2 {
    font-size: clamp(2.85rem, 14vw, 4.15rem);
  }

  .contact-visual p {
    max-width: 100%;
  }

  .contact-line-form .frc-captcha {
    transform: none;
  }

  .contact-line-form .contact-submit {
    width: 100%;
  }
}

/* Contact layout: form first, compact information second. */
.contact {
  padding-block: clamp(4.5rem, 6vw, 6.25rem);
}

.contact-layout {
  width: min(1040px, 100%);
  grid-template-columns: minmax(320px, 0.95fr) minmax(260px, 0.55fr);
  align-items: start;
  gap: clamp(2.4rem, 5vw, 4.6rem);
}

.contact-line-form.contact-form {
  --contact-placeholder-size: clamp(0.9rem, 0.95vw, 1rem);
  gap: 0.9rem;
  padding-top: 0.25rem;
}

.contact-line-form .contact-form-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  justify-content: stretch;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}

.contact-line-form .contact-form-head span,
.contact-info-kicker,
.contact-socials > span {
  color: var(--accent-blue);
  font-size: 0.82rem;
  font-weight: 860;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contact-line-form .contact-form-head strong {
  max-width: none;
  color: var(--paper);
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  line-height: 0.98;
}

.contact-line-form label {
  gap: 0.35rem;
}

.contact-line-form input,
.contact-line-form textarea {
  min-height: 3rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: 7px;
  background: rgba(242, 240, 233, 0.085);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.contact-line-form textarea {
  min-height: clamp(7.2rem, 12vw, 9rem);
}

.contact-line-form input:focus,
.contact-line-form textarea:focus {
  border-color: rgba(var(--accent-blue-rgb), 0.7);
  background: rgba(242, 240, 233, 0.11);
  box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.16);
}

.contact-line-form input[aria-invalid="true"],
.contact-line-form textarea[aria-invalid="true"] {
  box-shadow: 0 0 0 3px rgba(var(--accent-orange-rgb), 0.18);
}

.contact-line-form .captcha-field {
  margin-top: 0.25rem;
}

.contact-line-form .frc-captcha {
  transform: none;
}

.contact-line-form .contact-submit {
  justify-self: start;
  min-width: min(100%, 14rem);
  min-height: 3rem;
  margin-top: 0.3rem;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--accent-orange);
  box-shadow: none;
}

.contact-visual {
  min-height: auto;
  padding: 0.25rem 0 0;
  align-content: start;
  gap: clamp(1.3rem, 2.2vw, 1.8rem);
}

.contact-visual::before {
  display: none;
}

.contact-info-block {
  display: grid;
  gap: 0.7rem;
}

.contact-visual h2 {
  color: var(--paper);
  font-size: clamp(2.05rem, 3.5vw, 3.25rem);
  line-height: 0.98;
  text-shadow: none;
}

.contact-visual h2 span {
  display: inline;
  padding-left: 0;
}

.contact-visual h2 span::before {
  display: none;
}

.contact-visual p {
  max-width: 24rem;
  margin: 0;
  color: rgba(242, 240, 233, 0.82);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 700;
}

.contact-info-list {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.contact-info-list div {
  display: grid;
  gap: 0.25rem;
}

.contact-info-list dt {
  color: var(--accent-orange);
  font-size: 0.75rem;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-info-list dd {
  margin: 0;
  color: rgba(242, 240, 233, 0.84);
  font-size: 0.98rem;
  font-weight: 720;
  line-height: 1.45;
}

.contact-info-list a,
.contact-socials a {
  color: var(--paper);
  text-decoration: none;
}

.contact-info-list a:hover,
.contact-info-list a:focus-visible,
.contact-socials a:hover,
.contact-socials a:focus-visible {
  color: var(--accent-blue);
}

.contact-info-list .availability-badge {
  margin: 0;
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.contact-socials > span {
  flex-basis: 100%;
}

.contact-socials a {
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: 999px;
  background: rgba(242, 240, 233, 0.06);
  font-size: 0.86rem;
  font-weight: 820;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    width: min(620px, 100%);
  }

  .contact-line-form.contact-form {
    order: 1;
  }

  .contact-visual {
    order: 2;
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .contact-layout {
    gap: 2.2rem;
  }

  .contact-line-form .contact-form-head strong,
  .contact-visual h2 {
    font-size: clamp(1.85rem, 9vw, 2.35rem);
  }

  .contact-line-form .contact-submit {
    width: 100%;
  }

  .contact-socials a {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Rifthafen portal repair: keep the signet centered long enough to scroll into it. */
.pixel-portal {
  height: 192svh;
  margin-bottom: clamp(2.4rem, 4.5vw, 4rem);
}

.pixel-portal-sticky {
  min-height: 100svh;
  padding-block: calc(var(--header-height) + 1.25rem) 2.5rem;
}

.pixel-portal-anchor {
  width: clamp(9.5rem, 21vw, 18.5rem);
  transform: translate3d(-46.05%, -54.05%, 0)
             rotateY(var(--portal-tilt-y, 0deg))
             rotateX(var(--portal-tilt-x, 0deg));
}

.pixel-portal-mark {
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

.portal-ring {
  z-index: 3;
}

.portal-mask-reveal {
  -webkit-mask-position: 50% calc(50% + var(--portal-mark-y, 0px));
  mask-position: 50% calc(50% + var(--portal-mark-y, 0px));
}

@media (min-width: 1024px) {
  .pixel-portal {
    height: 198svh;
  }
}

@media (max-width: 820px) {
  .pixel-portal {
    height: 168svh;
  }

  .pixel-portal-anchor {
    width: clamp(8rem, 43vw, 15rem);
  }
}

@media (max-width: 520px) {
  .pixel-portal {
    height: 156svh;
  }
}

/* The portal reveal clips the full-screen image through the inner opening.
   This keeps the background aligned while the cutout grows into the scene. */
.portal-mask-reveal {
  inset: 0;
  left: auto;
  top: auto;
  z-index: 4;
  width: auto;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
  opacity: var(--portal-mask-opacity, 1);
  transform: none;
  transform-origin: center;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-position: initial;
  mask-position: initial;
  -webkit-mask-size: initial;
  mask-size: initial;
  -webkit-clip-path: inset(
    var(--portal-window-top, 42%)
    var(--portal-window-right, 46%)
    var(--portal-window-bottom, 42%)
    var(--portal-window-left, 46%)
    round 999px 999px 18px 18px
  );
  clip-path: inset(
    var(--portal-window-top, 42%)
    var(--portal-window-right, 46%)
    var(--portal-window-bottom, 42%)
    var(--portal-window-left, 46%)
    round 999px 999px 18px 18px
  );
  background:
    linear-gradient(180deg, rgba(var(--ph-bg-rgb), 0.02), rgba(var(--ph-bg-rgb), 0.18)),
    image-set(
      url("assets/pixelhafen-hintergrund.webp") type("image/webp"),
      url("assets/pixelhafen-hintergrund.png") type("image/png")
    ) center center / cover;
  filter: saturate(1.12) contrast(1.04) brightness(1.06);
  box-shadow: none;
  will-change: clip-path, opacity;
}

.portal-mask-reveal picture,
.portal-mask-reveal img {
  display: none !important;
}

/* Sticky needs visible overflow on its ancestors; the stage itself still clips content. */
.pixel-case {
  overflow: visible;
}

.pixel-portal {
  overflow: visible;
}

/* Let the case study begin inside the last part of the portal zoom. */
.pixel-case {
  --portal-hero-opacity: 1;
  --portal-hero-y: 0px;
  --portal-hero-overlap: clamp(40rem, 96svh, 58rem);
}

.pixel-case-hero {
  z-index: 6;
  margin-top: calc(-1 * var(--portal-hero-overlap));
  padding-top: clamp(5.5rem, 9vh, 7.5rem);
  opacity: var(--portal-hero-opacity, 1);
  transform: translate3d(0, var(--portal-hero-y, 0px), 0);
  will-change: opacity, transform;
}

.pixel-case-hero .reveal,
.pixel-case-hero .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 820px) {
  .pixel-case {
    --portal-hero-overlap: clamp(25rem, 76svh, 34rem);
  }

  .pixel-case-hero {
    padding-top: clamp(3.5rem, 8vh, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-case-hero {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 0;
    opacity: 1;
    transform: none;
  }
}

/* Curated gallery */
.work-gallery {
  padding-block: clamp(4.8rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 13% 18%, rgba(var(--accent-blue-rgb), 0.09), transparent 18rem),
    radial-gradient(circle at 88% 10%, rgba(var(--accent-orange-rgb), 0.08), transparent 18rem),
    var(--paper);
}

.work-gallery .section-kicker {
  width: min(var(--max), 100%);
  margin-inline: auto;
}

.gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(1rem, 1.8vw, 1.35rem);
}

.gallery-tag {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(9, 9, 9, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(9, 9, 9, 0.6);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.gallery-tag:hover {
  background: rgba(var(--accent-blue-rgb), 0.1);
  color: rgba(9, 9, 9, 0.9);
}

.gallery-tag.is-active {
  border-color: rgba(var(--accent-blue-rgb), 0.5);
  background: rgba(var(--accent-blue-rgb), 0.13);
  color: rgba(9, 9, 9, 0.9);
}

/* Photo grid filter */
.photo-grid[data-filter="branding"] .photo-grid-item:not([data-cat~="branding"]),
.photo-grid[data-filter="print"]    .photo-grid-item:not([data-cat~="print"]),
.photo-grid[data-filter="3d"]       .photo-grid-item:not([data-cat~="3d"]),
.photo-grid[data-filter="foto"]     .photo-grid-item:not([data-cat~="foto"]),
.photo-grid[data-filter="illu"]     .photo-grid-item:not([data-cat~="illu"]) {
  display: none;
}

/* Masonry photo grid */
.photo-grid {
  columns: 3;
  column-gap: clamp(0.5rem, 0.8vw, 0.75rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  width: 100vw;
  margin-left: calc(-1 * max(1.25rem, (100vw - var(--max)) / 2));
  
}

.photo-grid-item {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin-bottom: clamp(0.5rem, 0.8vw, 0.75rem);
  border: none;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: #0d0d0d;
  font: inherit;
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;

}

.photo-grid-item.is-visible {
  opacity: 1;
  transform: translateY(0);

}


.photo-grid-item img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: all 0.7s ease-in-out;
  filter: brightness(1) saturate(0.2);
}

.photo-grid-item img.photo-align-top {
  object-position: top;
}

.photo-grid-item:hover img,
.photo-grid-item:focus-visible img {
  filter: brightness(1.1) saturate(1.0);
}

.photo-grid-label {
  position: absolute;
  bottom: 0.55rem;
  left: 0.55rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(242, 240, 233, 0.88);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

.photo-grid-item:focus-visible {
  outline: 2px solid rgba(var(--accent-blue-rgb), 0.7);
  outline-offset: 2px;
  z-index: 3;
}

@media (max-width: 820px) {
  .photo-grid {
    columns: 2;
    margin-left: 0;
    width: 100%;
    padding: 0 max(1rem, (100vw - var(--max)) / 2);
    box-sizing: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-grid-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.gallery-dialog {
  width: min(66rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: var(--radius);
  color: var(--paper);
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.5);
}

.gallery-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.gallery-dialog img {
  display: block;
  width: 100%;
  max-height: 76svh;
  object-fit: contain;
  background: #111;
}

.gallery-dialog figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(242, 240, 233, 0.1);
}

.dialog-caption-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.gallery-dialog figcaption span {
  color: rgba(242, 240, 233, 0.45);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-dialog figcaption strong {
  color: var(--paper);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-dialog button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(242, 240, 233, 0.18);
  border-radius: 999px;
  color: rgba(242, 240, 233, 0.7);
  background: rgba(242, 240, 233, 0.06);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.gallery-dialog button:hover {
  background: rgba(242, 240, 233, 0.14);
  color: var(--paper);
  border-color: rgba(242, 240, 233, 0.34);
}

.gallery-dialog button svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 680px) {
  .gallery-tags {
    gap: 0.45rem;
  }

  .gallery-tag {
    min-height: 2rem;
    padding: 0.38rem 0.75rem;
    font-size: 0.78rem;
  }

  .gallery-dialog figcaption {
    align-items: start;
  }
}

/* Narrow phones: keep long service titles fully inside their cards. */
@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: auto;
  }

  .service-card h3 {
    width: 100%;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }
}

/* Final cascade guard for the review pass. */
.palette-cyan,
.color-chip.cyan {
  background: var(--ph-soft-coral) !important;
}

.gallery-tag {
  min-height: 2.75rem;
}

.photo-grid-item img {
  transition: filter 0.45s ease;
}

.photo-grid-parallax picture {
  display: block;
}

@media (min-width: 1051px) {
  .pixel-case .case-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 1050px) {
  .pixel-case .case-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .gallery-tag {
    min-height: 2.75rem;
  }

  .pixel-case .case-flow {
    grid-template-columns: 1fr;
  }
}

/* Paula's Garden: an editorial case opening with the work as the first signal. */
.ihk-copy {
  width: min(100%, 72rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  column-gap: clamp(2rem, 4.5vw, 4.75rem);
  align-items: start;
}

.ihk-case-label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ihk-case-label span {
  color: var(--accent-orange);
}

.ihk-case-label strong {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(var(--accent-blue-rgb), 0.38);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(var(--accent-blue-rgb), 0.12);
}

.ihk-copy > .script-note {
  grid-column: 1;
  grid-row: 2;
}

.ihk-copy > h2 {
  grid-column: 1;
  grid-row: 3;
}

.ihk-copy > .lead {
  grid-column: 1;
  grid-row: 4;
  max-width: 34rem;
}

.ihk-copy > .ihk-tags {
  grid-column: 1;
  grid-row: 5;
  align-self: end;
}

.ihk-copy > .ihk-showcase {
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: stretch;
}

.ihk-hero-showcase,
.ihk-copy > .ihk-showcase {
  position: relative;
  min-height: clamp(30rem, 41vw, 38rem);
  margin-top: 0;
  grid-template-columns: minmax(0, 1.45fr) minmax(10rem, 0.78fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.3vw, 1.15rem);
}

.ihk-copy > .ihk-showcase::before {
  content: "IHK";
  position: absolute;
  right: 0;
  top: -0.15em;
  z-index: -1;
  color: rgba(9, 9, 9, 0.055);
  font-size: clamp(7rem, 13vw, 12rem);
  font-weight: 950;
  line-height: 0.8;
  pointer-events: none;
}

.ihk-copy > .ihk-showcase .ihk-shot {
  min-height: 0;
  padding: clamp(0.65rem, 1vw, 0.85rem);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1.2rem 3rem rgba(39, 52, 49, 0.11);
}

.ihk-copy > .ihk-showcase .ihk-shot-main {
  grid-column: 1;
  grid-row: 1 / 3;
  --ihk-shot-rotate: -0.8deg;
  --ihk-shot-y: 0rem;
}

.ihk-copy > .ihk-showcase .ihk-shot:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  --ihk-shot-rotate: 0.9deg;
  --ihk-shot-y: 1.1rem;
}

.ihk-copy > .ihk-showcase .ihk-shot:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  --ihk-shot-rotate: -0.6deg;
  --ihk-shot-y: -0.3rem;
}

.ihk-copy > .ihk-showcase .ihk-shot picture {
  min-height: 0;
  flex: 1;
}

.ihk-copy > .ihk-showcase .ihk-shot img {
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  filter: saturate(0.92) contrast(0.98);
  background: rgba(255, 255, 255, 0.82);
}

.ihk-copy > .ihk-showcase.reveal.is-visible .ihk-shot {
  transform: translateY(var(--ihk-shot-y, 0)) rotate(var(--ihk-shot-rotate, 0deg));
}

.ihk-copy > .ihk-timebox {
  grid-column: 1 / -1;
  grid-row: 6;
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
}

.ihk-copy > .ihk-meta {
  grid-column: 1 / -1;
  grid-row: 7;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ihk-copy > .ihk-steps {
  grid-column: 1 / -1;
  grid-row: 8;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ihk-copy > .ihk-actions {
  grid-column: 1 / -1;
  grid-row: 9;
}

@media (max-width: 980px) {
  .ihk-copy {
    grid-template-columns: 1fr;
  }

  .ihk-copy > .script-note,
  .ihk-copy > h2,
  .ihk-copy > .lead,
  .ihk-copy > .ihk-tags,
  .ihk-copy > .ihk-showcase,
  .ihk-copy > .ihk-timebox,
  .ihk-copy > .ihk-meta,
  .ihk-copy > .ihk-steps,
  .ihk-copy > .ihk-actions,
  .ihk-case-label {
    grid-column: 1;
  }

  .ihk-case-label { grid-row: 1; }
  .ihk-copy > .script-note { grid-row: 2; }
  .ihk-copy > h2 { grid-row: 3; }
  .ihk-copy > .lead { grid-row: 4; max-width: 48rem; }
  .ihk-copy > .ihk-showcase { grid-row: 5; margin-top: 2rem; }
  .ihk-copy > .ihk-tags { grid-row: 6; }
  .ihk-copy > .ihk-timebox { grid-row: 7; margin-top: 2rem; }
  .ihk-copy > .ihk-meta { grid-row: 8; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihk-copy > .ihk-steps { grid-row: 9; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihk-copy > .ihk-actions { grid-row: 10; }
}

@media (max-width: 680px) {
  .ihk-case-label {
    flex-wrap: wrap;
  }

  .ihk-copy > .ihk-showcase {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .ihk-copy > .ihk-showcase .ihk-shot,
  .ihk-copy > .ihk-showcase .ihk-shot-main,
  .ihk-copy > .ihk-showcase .ihk-shot:nth-child(2),
  .ihk-copy > .ihk-showcase .ihk-shot:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    transform: none;
  }

  .ihk-copy > .ihk-showcase .ihk-shot img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .ihk-copy > .ihk-meta,
  .ihk-copy > .ihk-steps {
    grid-template-columns: 1fr;
  }
}

/* Stable wrapper layout for the editorial IHK opening. */
.ihk-copy {
  display: block;
  width: min(100%, 72rem);
  margin-inline: auto;
}

.ihk-project-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4.5vw, 4.75rem);
  align-items: center;
}

.ihk-project-intro {
  min-width: 0;
}

.ihk-project-intro .lead {
  max-width: 34rem;
}

.ihk-project-hero .ihk-showcase {
  position: relative;
  min-height: clamp(30rem, 41vw, 38rem);
  margin-top: 0;
  grid-template-columns: minmax(0, 1.45fr) minmax(10rem, 0.78fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.3vw, 1.15rem);
}

.ihk-project-hero .ihk-showcase::before {
  content: "IHK";
  position: absolute;
  right: 0;
  top: -0.15em;
  z-index: -1;
  color: rgba(9, 9, 9, 0.055);
  font-size: clamp(7rem, 13vw, 12rem);
  font-weight: 950;
  line-height: 0.8;
  pointer-events: none;
}

.ihk-project-hero .ihk-shot {
  min-height: 0;
  padding: clamp(0.65rem, 1vw, 0.85rem);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1.2rem 3rem rgba(39, 52, 49, 0.11);
}

.ihk-project-hero .ihk-shot-main {
  grid-column: 1;
  grid-row: 1 / 3;
  --ihk-shot-rotate: -0.8deg;
  --ihk-shot-y: 0rem;
}

.ihk-project-hero .ihk-shot:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  --ihk-shot-rotate: 0.9deg;
  --ihk-shot-y: 1.1rem;
}

.ihk-project-hero .ihk-shot:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  --ihk-shot-rotate: -0.6deg;
  --ihk-shot-y: -0.3rem;
}

.ihk-project-hero .ihk-shot picture {
  min-height: 0;
  flex: 1;
}

.ihk-project-hero .ihk-shot img {
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  filter: saturate(0.92) contrast(0.98);
  background: rgba(255, 255, 255, 0.82);
}

.ihk-project-hero .ihk-showcase.reveal.is-visible .ihk-shot {
  transform: translateY(var(--ihk-shot-y, 0)) rotate(var(--ihk-shot-rotate, 0deg));
}

.ihk-copy > .ihk-timebox {
  margin-top: clamp(2.8rem, 5vw, 4.5rem);
}

@media (max-width: 980px) {
  .ihk-project-hero {
    grid-template-columns: 1fr;
  }

  .ihk-project-intro .lead {
    max-width: 48rem;
  }

  .ihk-project-hero .ihk-showcase {
    margin-top: 0.5rem;
  }
}

@media (max-width: 680px) {
  .ihk-project-hero .ihk-showcase {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .ihk-project-hero .ihk-shot,
  .ihk-project-hero .ihk-shot-main,
  .ihk-project-hero .ihk-shot:nth-child(2),
  .ihk-project-hero .ihk-shot:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    transform: none;
  }

  .ihk-project-hero .ihk-shot img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Softer hand-off from the portal zoom into the fixed Rifthafen world. */
.pixel-portal-bg {
  inset: -2px 0 -1px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.96) 78%,
    rgba(0, 0, 0, 0.68) 89%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 70%,
    rgba(0, 0, 0, 0.96) 78%,
    rgba(0, 0, 0, 0.68) 89%,
    transparent 100%
  );
}

/* Section transitions use the same editable-frame language as the cover. */
.parallax-break,
.parallax-break.compact {
  position: relative;
  z-index: 4;
  overflow: visible;
  isolation: isolate;
}

.parallax-break {
  height: clamp(8rem, 10vw, 11rem);
}

.parallax-break.compact {
  height: clamp(6.5rem, 7.5vw, 8.25rem);
}

.parallax-break::before {
  z-index: 0;
  opacity: 0.34;
}

.parallax-slab {
  z-index: 2;
  border: 1.5px dashed currentColor;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  filter: none;
  will-change: transform;
}

.parallax-slab::before,
.parallax-slab::after {
  content: "";
  position: absolute;
  width: 0.58rem;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  background: transparent;
}

.parallax-slab::before {
  top: -0.36rem;
  left: -0.36rem;
}

.parallax-slab::after {
  right: -0.36rem;
  bottom: -0.36rem;
}

.slab-blue {
  top: -0.8rem;
  left: max(2rem, calc((100vw - var(--max)) / 2));
  width: clamp(13rem, 19vw, 20rem);
  height: clamp(4.6rem, 6vw, 6.2rem);
  color: rgba(var(--accent-blue-rgb), 0.82);
  filter: drop-shadow(0 0 1.15rem rgba(var(--accent-blue-rgb), 0.16));
  transform: translate3d(var(--parallax-y, 0px), 0, 0) rotate(-4deg);
}

.slab-orange {
  right: max(2rem, calc((100vw - var(--max)) / 2));
  bottom: -0.8rem;
  width: clamp(11rem, 16vw, 16rem);
  height: clamp(4rem, 5.2vw, 5.2rem);
  color: rgba(var(--accent-orange-rgb), 0.82);
  filter: drop-shadow(0 0 1.15rem rgba(var(--accent-orange-rgb), 0.16));
  transform: translate3d(var(--parallax-y, 0px), 0, 0) rotate(5deg);
}

.slab-outline {
  top: 50%;
  width: clamp(15rem, 25vw, 24rem);
  height: clamp(4.8rem, 6.5vw, 6.5rem);
  color: rgba(var(--accent-blue-rgb), 0.62);
  transform: translate3d(calc(-50% + var(--parallax-y, 0px)), -50%, 0) rotate(-2deg);
}

.break-to-dark .slab-outline,
.parallax-break.compact .slab-outline {
  color: rgba(var(--accent-orange-rgb), 0.62);
}

/* Paula's Garden: selected evidence from the submitted documentation. */
.ihk-documentation {
  margin-top: clamp(3.5rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 4vw, 4rem);
  border-block: 1px solid rgba(20, 20, 20, 0.16);
}

.ihk-documentation-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.ihk-documentation-head .script-note {
  grid-column: 1 / -1;
  color: var(--accent-blue);
}

.ihk-documentation-head h3 {
  width: 100%;
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  line-height: 0.98;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.ihk-documentation-head > p:last-child {
  max-width: 40rem;
  margin: 0;
  color: var(--muted);
}

.ihk-requirements {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3.25rem);
  border-block: 1px dashed rgba(20, 20, 20, 0.2);
}

.ihk-requirements span {
  min-width: 0;
  padding: 1.25rem clamp(0.75rem, 1.6vw, 1.4rem);
  color: var(--muted);
  line-height: 1.3;
}

.ihk-requirements span + span {
  border-left: 1px solid rgba(20, 20, 20, 0.12);
}

.ihk-requirements strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent-orange);
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1;
}

.ihk-design-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

.ihk-design-notes article {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(20, 20, 20, 0.14);
}

.ihk-design-notes article:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid rgba(20, 20, 20, 0.14);
}

.ihk-design-notes article:nth-child(even) {
  padding-right: 0;
}

.ihk-design-notes article > span {
  color: var(--accent-orange);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ihk-design-notes h4 {
  margin: 0.55rem 0 0.7rem;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.12;
}

.ihk-design-notes p {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
}

.ihk-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.ihk-swatches i {
  display: flex;
  min-width: 0;
  min-height: 5rem;
  align-items: end;
  padding: 0.65rem;
  color: #111;
  background: var(--swatch);
  font-style: normal;
}

.ihk-swatches i:last-child {
  color: #fff;
}

.ihk-swatches b {
  max-width: 100%;
  font-size: 0.7rem;
  overflow-wrap: normal;
}

@media (max-width: 820px) {
  .ihk-documentation-head {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .ihk-documentation-head h3 {
    max-width: 20ch;
  }

  .ihk-requirements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ihk-requirements span:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(20, 20, 20, 0.12);
  }

  .ihk-requirements span:nth-child(4) {
    border-top: 1px solid rgba(20, 20, 20, 0.12);
  }
}

@media (max-width: 480px) {
  .ihk-documentation-head h3 {
    max-width: 100%;
    font-size: 2rem;
    line-height: 1.02;
  }
}

@media (max-width: 680px) {
  .parallax-break {
    height: 7.5rem;
  }

  .parallax-break.compact {
    height: 6rem;
  }

  .slab-blue {
    left: 1.25rem;
    width: 11.5rem;
  }

  .slab-orange {
    right: 1.25rem;
    width: 9.5rem;
  }

  .slab-outline {
    width: 13rem;
  }

  .ihk-design-notes {
    grid-template-columns: 1fr;
  }

  .ihk-design-notes article,
  .ihk-design-notes article:nth-child(odd),
  .ihk-design-notes article:nth-child(even) {
    padding: 1.5rem 0;
    border-right: 0;
  }

  .ihk-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .slab-blue {
    transform: rotate(-4deg) !important;
  }

  .slab-orange {
    transform: rotate(5deg) !important;
  }

  .slab-outline {
    transform: translate(-50%, -50%) rotate(-2deg) !important;
  }
}

/* Editorial section index: compact, scannable and distinct from the case cards. */
.contents {
  padding-top: clamp(3.5rem, 5vw, 5.5rem);
}

.contents-frame {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  gap: 0;
  width: min(var(--max), 100%);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--line);
}

.contents-frame #contentsTitle{
  color: var(--black);
}
.contents-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) clamp(0.25rem, 1vw, 1rem);
  border-right: 1px dashed rgba(9, 9, 9, 0.2);
}

.contents-intro .script-note {
  margin-bottom: 0.15rem;
}

.contents-intro h2 {
  margin: 0;
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  line-height: 0.92;
}

.contents-intro > p:not(.script-note) {
  max-width: 24rem;
  margin: 1.35rem 0 0;
  color: var(--muted);
}

.contents-intro > span {
  position: static;
  margin-top: 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(9, 9, 9, 0.16);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}

.contents-list {
  display: grid;
  align-content: center;
  min-width: 0;
  padding-left: clamp(1rem, 3vw, 2.75rem);
}

.contents-frame .contents-list a {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2.5rem;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  min-width: 0;
  min-height: 5.25rem;
  align-items: center;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px solid rgba(9, 9, 9, 0.12);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  transition: color 0.22s ease, background 0.22s ease;
}

.contents-frame .contents-list a:last-child {
  border-bottom: 0;
}

.contents-frame .contents-list a::before,
.contents-frame .contents-list a::after {
  content: none;
}

.contents-frame .contents-list a > span:first-child {
  position: static;
  color: rgba(9, 9, 9, 0.42);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
}

.contents-frame .contents-link-copy {
  position: static;
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  color: inherit;
  transition: transform 0.25s var(--ease);
}

.contents-frame .contents-link-copy strong {
  position: static;
  color: inherit;
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: normal;
  hyphens: auto;
}

.contents-frame .contents-link-copy em {
  position: static;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.25;
}

.contents-list svg {
  width: 1.35rem;
  height: 1.35rem;
  justify-self: end;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  opacity: 0.42;
  transition: opacity 0.22s ease, transform 0.25s var(--ease);
}

.contents-frame .contents-list a:hover {
  color: var(--accent-orange);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-blue-rgb), 0.07));
}

.contents-frame .contents-list a:hover .contents-link-copy {
  transform: translateX(0.35rem);
}

.contents-frame .contents-list a:hover em {
  color: var(--muted);
}

.contents-frame .contents-list a:hover svg {
  opacity: 1;
  transform: translateX(0.2rem);
}

/* Filled transition shapes with a smoother diagonal parallax path. */
.parallax-slab {
  border: 0;
  border-radius: var(--radius);
  opacity: 0.94;
  transition: transform 0.08s linear;
}

.parallax-slab::before,
.parallax-slab::after {
  display: none;
}

.slab-blue {
  color: var(--accent-blue);
  background: var(--accent-blue) !important;
  box-shadow: 0 1.5rem 4rem rgba(var(--accent-blue-rgb), 0.2);
  filter: none;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-depth, 0px), 0) rotate(-4deg);
}

.slab-orange {
  color: var(--accent-orange);
  background: var(--accent-orange) !important;
  box-shadow: 0 1.5rem 4rem rgba(var(--accent-orange-rgb), 0.2);
  filter: none;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-depth, 0px), 0) rotate(5deg);
}

.slab-outline {
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: rgba(242, 240, 233, 0.42);
  background: transparent !important;
  transform: translate3d(
    calc(-50% + var(--parallax-x, 0px)),
    calc(-50% + var(--parallax-depth, 0px)),
    0
  ) rotate(-2deg);
}

.break-to-dark .slab-outline,
.parallax-break.compact .slab-outline {
  color: rgba(9, 9, 9, 0.26);
}

@media (max-width: 820px) {
  .contents-frame {
    grid-template-columns: 1fr;
  }

  .contents-intro {
    padding: 1rem 0 2rem;
    border-right: 0;
    border-bottom: 1px dashed rgba(9, 9, 9, 0.2);
  }

  .contents-intro > p:not(.script-note) {
    max-width: 34rem;
  }

  .contents-intro > span {
    margin-top: 1.25rem;
  }

  .contents-list {
    padding: 1rem 0 0;
  }
}

@media (max-width: 520px) {
  .contents-frame {
    padding: 1.15rem;
  }

  .contents-frame .contents-list a {
    grid-template-columns: 2rem minmax(0, 1fr) 1.75rem;
    min-height: 4.9rem;
    gap: 0.65rem;
  }

  .contents-frame .contents-link-copy strong {
    font-size: 1.02rem;
  }

  .contents-frame .contents-link-copy em {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-slab {
    transition: none;
  }

  .slab-blue {
    transform: rotate(-4deg) !important;
  }

  .slab-orange {
    transform: rotate(5deg) !important;
  }

  .slab-outline {
    transform: translate(-50%, -50%) rotate(-2deg) !important;
  }
}

/* Final responsive and closing-section pass. */
.parallax-break::before {
  content: none !important;
  display: none !important;
}

.parallax-slab {
  border-style: solid !important;
}

.contact {
  padding-block: clamp(4.5rem, 6vw, 6.25rem);
}

.contact-layout {
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact-section-head {
  grid-column: 1 / -1;
  display: block;
  width: min(920px, 100%);
  margin: 0;
  padding-bottom: clamp(1.5rem, 3vw, 2.2rem);
  border-bottom: 1px solid rgba(242, 240, 233, 0.16);
}

.contact-section-head .script-note {
  margin: 0 0 -0.2rem;
  color: var(--accent-blue);
  font-size: clamp(2.15rem, 3.3vw, 2.65rem);
  line-height: 1;
}

.contact-section-head h2 {
  margin: 0 0 1rem;
  padding-bottom: 0 !important;
  color: var(--paper);
  font-size: clamp(3.55rem, 4.7vw, 5rem);
  line-height: 0.9;
}

.contact-section-head > p:last-child {
  max-width: 52rem;
  margin: 0;
  color: rgba(242, 240, 233, 0.78);
  font-size: 1.08rem;
  font-weight: 760;
  line-height: 1.65;
}

.contact-line-form.contact-form {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.contact-line-form > label,
.contact-line-form .captcha-field,
.contact-line-form .form-status,
.contact-line-form .contact-submit {
  grid-column: 1;
}

.contact-line-form label {
  display: grid;
  gap: 0.35rem;
}

.contact-line-form label > span {
  color: rgba(242, 240, 233, 0.72);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.contact-line-form input,
.contact-line-form textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid rgba(242, 240, 233, 0.28);
  border-radius: 0;
  color: var(--paper);
  background: transparent;
  box-shadow: none;
}

.contact-line-form textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.contact-line-form input:hover,
.contact-line-form textarea:hover {
  border-bottom-color: rgba(242, 240, 233, 0.48);
}

.contact-line-form input:focus,
.contact-line-form textarea:focus {
  border-bottom-color: var(--accent-blue);
  background: transparent;
  box-shadow: 0 2px 0 var(--accent-blue);
  outline: 0;
}

.contact-line-form input[aria-invalid="true"],
.contact-line-form textarea[aria-invalid="true"] {
  border-bottom-color: var(--accent-orange);
  box-shadow: 0 2px 0 var(--accent-orange);
}

.contact-line-form .captcha-field {
  margin-top: 0.25rem;
}

.contact-line-form .frc-captcha {
  width: min(100%, 20rem);
  transform: none;
}

.contact-line-form .contact-submit {
  justify-self: start;
  min-width: 12.5rem;
  min-height: 3rem;
  margin-top: 0.2rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius);
  box-shadow: none;
}

.contact-visual {
  grid-column: 2;
  display: grid;
  gap: 1.5rem;
  min-width: 0;
  min-height: 0;
  padding: 0 0 0 clamp(1.4rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(242, 240, 233, 0.16);
  background: transparent;
}

.contact-visual::before {
  display: none;
}

.contact-info-list {
  gap: 1.2rem;
}

.contact-info-list dd {
  overflow-wrap: anywhere;
}

.contact-socials {
  gap: 0.55rem 1rem;
}

.contact-socials a {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(242, 240, 233, 0.22);
}

@media (max-width: 760px) {
  .design-system,
  .design-system > div:first-child,
  .brand-folio-section,
  .chapter-cover,
  .chapter-frame,
  .brand-logo-gallery,
  .brand-logo-gallery article {
    min-width: 0;
    max-width: 100%;
  }

  .design-system h2 {
    width: 100%;
    max-width: 100%;
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .brand-folio-section {
    padding-inline: 1rem;
    overflow: hidden;
  }

  .chapter-cover,
  .chapter-frame {
    width: 100%;
  }

  .chapter-frame {
    padding: 1.65rem 1rem;
  }

  .chapter-frame h2 {
    max-width: 100%;
    margin: 0;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .chapter-cover > p {
    max-width: 34rem;
    margin-inline: auto;
  }

  .brand-logo-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .brand-logo-gallery article {
    width: 100%;
    padding: 0.9rem;
  }

  .brand-logo-card-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 1.25rem;
  }

  .brand-logo-card-media img {
    max-width: 86%;
    max-height: 86%;
  }

  .brand-logo-gallery strong,
  .brand-logo-gallery p {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .contact-section-head {
    width: 100%;
  }

  .contact-section-head h2 {
    font-size: 2.8rem;
  }

  .contact-line-form.contact-form,
  .contact-visual {
    grid-column: 1;
  }

  .contact-line-form.contact-form {
    order: 1;
  }

  .contact-visual {
    order: 2;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(242, 240, 233, 0.16);
    border-left: 0;
  }
}

@media (max-width: 420px) {
  .design-system h2 {
    font-size: 2rem;
  }

  .chapter-frame h2 {
    font-size: 2.15rem;
  }

  .contact-section-head h2 {
    font-size: 2.45rem;
  }

  .contact-line-form .contact-submit {
    width: 100%;
  }
}