@font-face { font-family: 'Codin Pixel'; src: url('fonts/codin-pixel.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: block; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #fff; scroll-behavior: auto; }
:root { --pixel-color: hsl(272, 76%, 56%); --logo-color: #101012; }
body { overflow-x: hidden; font-family: 'Codin Pixel', monospace; }
.scroll-scene { height: 100svh; }
.hero { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100svh; min-height: 240px; overflow: hidden; isolation: isolate; }
#particles { height: 100%; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
h1 { margin: 0; white-space: nowrap; color: #101012; font-family: 'Codin Pixel', monospace; font-size: clamp(46px, 11vw, 170px); font-weight: 400; letter-spacing: 0; line-height: 1.2; user-select: none; }
.letter { display: inline-block; will-change: transform, opacity; }
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.ambient-light { position: absolute; inset: 0; z-index: -2; opacity: 0; background: radial-gradient(ellipse at 75% 70%, #f5efff 0%, transparent 52%), radial-gradient(ellipse at 10% 30%, #f8f6ff 0%, transparent 45%); transition: opacity 2.5s; pointer-events: none; }
.interface { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 1.5s 1s, transform 1.5s 1s; pointer-events: none; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 52px; height: 72px; padding: 0; border: 0; background: transparent; color: #101012; cursor: pointer; }
.scroll-cue:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.mouse-shape { position: relative; display: block; width: 23px; height: 36px; border: 1.5px solid currentColor; border-radius: 13px; }
.mouse-wheel { position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: scroll-wheel 1.8s ease-in-out infinite; }
.scroll-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: scroll-chevron 1.8s ease-in-out infinite; }
@keyframes scroll-wheel { 0%, 15% { transform: translateY(0); opacity: 1; } 65%, 100% { transform: translateY(9px); opacity: 0; } }
@keyframes scroll-chevron { 0%, 100% { translate: 0 0; opacity: .35; } 55% { translate: 0 4px; opacity: .9; } }
.ready .interface, .ready .ambient-light { opacity: 1; transform: none; }
.ready .interface { visibility: visible; pointer-events: auto; }
.pixel-logo { position: fixed; z-index: 10; top: 0; left: 0; display: block; width: 70px; height: 50px; color: var(--logo-color); opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.logo-glyphs { position: absolute; left: 0; top: -20px; display: flex; font: 400 100px/100px 'Codin Pixel', monospace; letter-spacing: 0; }
.logo-letter { display: block; flex: 0 0 40px; width: 40px; height: 100px; }
.logo-letter + .logo-letter { margin-left: -10px; }
.pixel-logo.docked { pointer-events: auto; }
.pixel-logo:focus-visible { outline: 2px solid var(--logo-color); outline-offset: 8px; border-radius: 4px; }
.next-section { position: relative; min-height: 85svh; display: flex; flex-direction: column; justify-content: center; padding: 100px 9vw; background: #fff; }
.section-label { font: 400 15px 'Codin Pixel', monospace; letter-spacing: .04em; color: var(--pixel-color); }
h2 { max-width: 850px; margin: 20px 0; font: 400 clamp(48px, 8vw, 110px)/1.15 'Codin Pixel', monospace; letter-spacing: 0; }
@media (max-width: 700px) { .interface { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation-duration: 2s; } .interface, .ambient-light { transition: none; } .mouse-wheel, .scroll-chevron { animation: none; } }

/* Webdesign: an open editorial layout with a responsive design canvas. */
.services { position: relative; z-index: 2; color: #17171b; background: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.services-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); align-items: center; gap: 76px 5vw; padding: 144px clamp(24px, 6vw, 100px) 70px; isolation: isolate; }
.services-atmosphere { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; opacity: .48; background: #eee7f4; -webkit-mask-image: radial-gradient(ellipse at 85% 42%, #000 0%, transparent 73%); mask-image: radial-gradient(ellipse at 85% 42%, #000 0%, transparent 73%); }
.services-stage::after { content: ''; position: absolute; z-index: -1; inset: 0; background: url('assets/grain.svg') repeat; opacity: .025; pointer-events: none; }
.services-heading { min-width: 0; position: relative; z-index: 2; }
.services-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 34px; color: #72677a; font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.services-eyebrow > span { font-size: 28px; color: var(--pixel-color); line-height: 1; }
.services-heading h2 { margin: 0; max-width: none; font: 900 clamp(50px, 5.7vw, 92px)/.99 'Arial Black', 'Arial-Black', Arial, sans-serif; letter-spacing: -.07em; }
.services-heading h2 > span { display: inline-block; margin-top: 10px; color: #8d3ec5; font-size: .71em; letter-spacing: -.065em; }
.services-intro { margin: 32px 0 16px; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.35; letter-spacing: -.035em; font-weight: 550; }
.services-description { max-width: 39ch; color: #706977; font-size: 15px; line-height: 1.75; margin: 0; }
.services-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.services-primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 26px; min-height: 50px; padding: 15px 22px; border-radius: 999px; background: #17171b; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; transition: background .2s; }
.services-primary:hover { background: var(--pixel-color); }
.services-primary span { font-size: 20px; }
.services-secondary { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; color: #51455c; font-size: 12px; text-decoration: none; border-bottom: 1px solid #b7a7c5; }
.services-secondary:hover { color: var(--pixel-color); }
.services-actions a:focus-visible, .preview-switch button:focus-visible { outline: 2px solid var(--pixel-color); outline-offset: 5px; }
.services-showcase { min-width: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 11px; color: #74677e; }
.preview-switch { display: inline-flex; flex-shrink: 0; padding: 3px; background: #e7e0ed80; border: 1px solid #ffffffb3; border-radius: 999px; }
.preview-switch button { min-height: 32px; border: 0; border-radius: 999px; padding: 8px 13px; background: transparent; color: #796b83; font-weight: 500; line-height: 1; font-family: inherit; font-size: 10px; cursor: pointer; }
.preview-switch button[aria-pressed="true"] { background: #fff; color: #27212d; box-shadow: 0 2px 8px #3723460b; }
.service-slot { position: relative; z-index: 3; min-width: 0; height: clamp(430px, 39vw, 600px); }
.service-tile { --glass: 1; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgb(255 255 255 / calc(var(--glass) * .8)); border-radius: 30px; background: linear-gradient(130deg, rgb(255 255 255 / calc(var(--glass) * .55)), rgb(236 222 249 / calc(var(--glass) * .4))), hsl(272 76% 56% / calc(1 - var(--glass))); box-shadow: inset 0 1px 0 #ffffff80, 0 22px 60px rgb(55 29 78 / calc(var(--glass) * .07)); }
.tile-content { height: 100%; display: grid; place-items: center; padding: 65px 28px 38px; opacity: var(--content, 1); }
.design-browser { width: 100%; max-width: 660px; overflow: hidden; border: 1px solid #fff; border-radius: 10px; background: #faf8f1; box-shadow: 0 18px 36px #44275918; transform: rotate(-3deg); transition: width .55s cubic-bezier(.22,1,.36,1), transform .55s, border-radius .55s; }
.design-chrome { height: 26px; display: flex; align-items: center; gap: 16px; padding: 0 10px; background: #ffffffc4; border-bottom: 1px solid #dfd9e2; color: #8a8090; font-size: 7px; }
.design-chrome > span:first-child { display: flex; gap: 3px; }
.design-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #d5cbdc; }
.design-page { padding: 22px; }
.design-page-nav { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.design-page-nav > strong { font-size: 24px; font-weight: 800; letter-spacing: -.09em; }
.design-page-nav strong span { font-size: 8px; vertical-align: top; margin-left: 4px; }
.design-page-nav > span { font-size: 6px; }
.design-page-nav b { margin-left: 10px; font-size: 12px; }
.design-page-body { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 8px; padding: 32px 0; }
.design-kicker { display: block; margin-bottom: 14px; font-size: 6px; letter-spacing: .1em; }
.design-page-copy > strong { display: block; font: 500 clamp(29px, 3.2vw, 54px)/.98 Georgia, serif; letter-spacing: -.065em; }
.design-page-copy strong > span { color: #8d3ec5; }
.design-mini-link { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 6px; }
.design-mini-link b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #27212d; color: #fff; font-size: 11px; }
.design-sculpture { position: relative; aspect-ratio: .85; min-width: 0; }
.design-sculpture > span { position: absolute; inset: 0 12% 0 2%; border-radius: 50% 50% 4px 4px; background: linear-gradient(120deg, #e6c6fb, #a25be0 50%, #6437a5); box-shadow: inset 10px 0 16px #ffffff40; }
.design-sculpture > span:nth-child(2) { inset: 17% 0 -4% 28%; border-radius: 50% 50% 3px 3px; background: linear-gradient(120deg, #c6a0ee, #9a63d0 55%, #69408d); }
.design-sculpture > span:nth-child(3) { inset: 40% 24% -6% 48%; border-radius: 90px 90px 2px 2px; background: #f1e7db; box-shadow: none; }
.design-sculpture > i { position: absolute; left: 8%; bottom: 10%; font: italic 70px/.8 Georgia, serif; color: #f7effc; }
.design-page-footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid #dcd4df; color: #827688; font-size: 6px; }
.design-browser[data-mode="mobile"] { width: 205px; border-radius: 22px; transform: rotate(2deg); }
.design-browser[data-mode="mobile"] .design-chrome { height: 20px; font-size: 5px; }
.design-browser[data-mode="mobile"] .design-page { padding: 14px; }
.design-browser[data-mode="mobile"] .design-page-nav > span { display: none; }
.design-browser[data-mode="mobile"] .design-page-body { grid-template-columns: 1fr; padding: 12px 0; gap: 12px; }
.design-browser[data-mode="mobile"] .design-page-copy > strong { font-size: 30px; }
.design-browser[data-mode="mobile"] .design-kicker { margin-bottom: 8px; }
.design-browser[data-mode="mobile"] .design-mini-link { margin-top: 8px; }
.design-browser[data-mode="mobile"] .design-sculpture { width: 88px; justify-self: end; aspect-ratio: 1.5; }
.design-browser[data-mode="mobile"] .design-sculpture > i { font-size: 40px; }
.design-browser[data-mode="mobile"] .design-page-footer { font-size: 5px; }
.preview-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 16px 5px 0; font-size: 10px; color: #77687f; }
.preview-caption > span:last-child { font-size: 7px; letter-spacing: .05em; }
.motion-ready:not(.is-expanded) .service-tile { position: fixed; inset: auto; left: 0; top: 0; width: 3px; height: 3px; opacity: 0; border-radius: 0; --glass: 0; --content: 0; will-change: width, height, transform, border-radius; }
@media (max-width: 1050px) and (min-width: 761px) {
  .services-stage { padding-inline: 28px; column-gap: 30px; }
  .services-heading h2 { font-size: 5.8vw; }
  .services-actions { gap: 14px; }
  .preview-toolbar > span { max-width: 11ch; line-height: 1.5; }
  .tile-content { padding-inline: 18px; }
  .design-page { padding: 16px; }
}
@media (max-width: 760px) {
  .services-stage { grid-template-columns: minmax(0, 1fr); padding: 104px 22px 56px; gap: 42px; }
  .services-heading h2 { font-size: clamp(46px, 11.4vw, 82px); }
  .services-eyebrow { margin-bottom: 28px; }
  .services-intro { margin-top: 26px; font-size: 23px; }
  .services-description { max-width: 43ch; font-size: 14px; }
  .services-actions { gap: 20px; margin-top: 26px; }
  .services-primary { padding-inline: 20px; }
  .service-slot { height: clamp(440px, 78vw, 560px); }
  .tile-content { padding: 62px 22px 34px; }
  .design-page-copy > strong { font-size: clamp(32px, 7vw, 52px); }
  .services-atmosphere { -webkit-mask-image: radial-gradient(ellipse at 85% 48%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 85% 48%, #000, transparent 75%); }
}
@media (max-width: 380px) {
  .services-stage { padding-inline: 18px; }
  .services-heading h2 { font-size: 44px; }
  .preview-toolbar { font-size: 10px; }
  .preview-toolbar > span { max-width: 12ch; line-height: 1.5; }
  .tile-content { padding-inline: 16px; }
  .design-page { padding: 15px; }
  .design-page-body { grid-template-columns: 1.1fr .8fr; }
  .design-page-copy > strong { font-size: 29px; }
  .design-page-nav > span { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) { .design-browser, .services-primary { transition: none; } }

/* The same cloud pixels assemble the service icons and contact control. */
.pixel-journey { position: fixed; inset: 0; z-index: 12; width: 100%; height: 100%; pointer-events: none; }
.service-pixel-icon { --icon-size: 32px; --icon-inset: 24px; position: absolute; z-index: 2; right: var(--icon-inset); top: var(--icon-inset); width: var(--icon-size); height: var(--icon-size); display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: .8px; pointer-events: none; }
.service-pixel-icon span { background: var(--pixel-color); border-radius: .15px; }
.service-pixel-icon-main { --icon-size: 32px; }
.pixel-journey-ready .service-pixel-icon { opacity: 0; }
.pixel-journey-done .service-pixel-icon { opacity: 1; }
.contact-button { position: fixed; z-index: 13; top: 16px; right: 36px; display: flex; align-items: center; justify-content: center; gap: 14px; width: 184px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #17171b; color: #fff; font: 600 14px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; box-shadow: none; text-decoration: none; cursor: pointer; opacity: 1; visibility: visible; pointer-events: auto; transition: background-color .2s ease; }
.pixel-journey-ready .contact-button { visibility: visible; }
.pixel-journey-done .contact-button { opacity: 1; pointer-events: auto; }
.contact-button:hover { background: var(--pixel-color); }
.contact-button:focus-visible { outline: 2px solid var(--pixel-color); outline-offset: 4px; }
@media (max-width: 700px) {
  .contact-button { top: 12px; right: 22px; width: 164px; height: 42px; font-size: 13px; }
  .service-pixel-icon { --icon-inset: 18px; }
  .service-pixel-icon-main { --icon-size: 32px; top: var(--icon-inset); bottom: auto; }
}

/* Slightly imperfect icon pixels retain their individual placement. */
.service-pixel-icon span {
  translate: var(--offset-x, 0px) var(--offset-y, 0px);
  rotate: var(--turn, 0deg);
  scale: var(--pixel-scale, 1);
}
.contact-hover-pixel { position: fixed; z-index: 14; pointer-events: none; border-radius: .3px; background: var(--pixel-color); }

.pixel-logo.is-hovering { color: var(--pixel-color); }
.pixel-logo.is-hovering .logo-glyphs { transform-origin: 35px 45px; animation: logo-hover-wiggle 1.3s linear infinite; }
@keyframes logo-hover-wiggle {
  0%, 23.077%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(-7deg); }
  11% { transform: rotate(6deg); }
  17% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .pixel-logo.is-hovering .logo-glyphs { animation: none; } }

/* Soft, grainy moving color fields inspired by the Weaverly reference. */
.fluid-background { position: absolute; inset: 0; z-index: auto; width: 100%; height: 100%; background: radial-gradient(ellipse at 88% 24%, #efb78b, transparent 64%), radial-gradient(ellipse at 18% 75%, #8c9bbf, transparent 70%), radial-gradient(ellipse at 74% 80%, #b5a1d6, transparent 64%), #f1eef4; }

/* Compact navigation stays between the CD mark and contact action. */
html { scroll-behavior: smooth; }
#services, #contact, .service-slot[id] { scroll-margin-top: 88px; }
.site-navigation { position: fixed; z-index: 15; top: 16px; left: 50%; transform: translateX(-50%); padding: 4px; border: 1px solid #ffffffb3; border-radius: 999px; background: #ffffffc9; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 2px 14px #17171b08; font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #353139; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a, .nav-services > summary { display: block; padding: 10px 16px; border-radius: 999px; color: inherit; text-decoration: none; cursor: pointer; list-style: none; }
.nav-services > summary::-webkit-details-marker { display: none; }
.nav-services > summary span { margin-left: 6px; }
.nav-links > a:hover, .nav-services > summary:hover { background: #eee6f6; color: #8034bd; }
.nav-services { position: relative; }
.nav-submenu { position: absolute; top: calc(100% + 12px); left: -12px; width: 260px; padding: 8px; border: 1px solid #e8e2ed; border-radius: 18px; background: #fffffff5; box-shadow: 0 12px 40px #17171b14; }
.nav-submenu a { display: block; padding: 12px; color: #46404c; text-decoration: none; border-radius: 10px; font-size: 12px; }
.nav-submenu a:hover { color: #8034bd; background: #f2ebf9; }
.nav-toggle { display: none; }
.site-navigation :focus-visible { outline: 2px solid var(--pixel-color); outline-offset: 2px; }
.contact-section { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 120px); align-items: center; min-height: 90svh; padding: 120px clamp(24px, 6vw, 100px); background: radial-gradient(ellipse at 6% 80%, #eee5f769, transparent 55%), #fcfbfe; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.contact-eyebrow { margin: 0 0 24px; color: #86758f; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.contact-intro h2 { margin: 0 0 28px; color: #17171b; font: 900 clamp(68px, 7.4vw, 116px)/.88 'Arial Black', 'Arial-Black', Arial, sans-serif; letter-spacing: -.065em; }
.contact-intro h2 span { color: var(--pixel-color); }
.contact-description { max-width: 35ch; margin: 0; color: #706978; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.contact-topics span { padding: 8px 12px; border: 1px solid #ded5e6; border-radius: 999px; color: #766582; font-size: 11px; }
.contact-form { display: grid; gap: 22px; padding: clamp(24px, 3.2vw, 48px); border: 1px solid #e5deeb; border-radius: 30px; background: #ffffffad; box-shadow: 0 20px 80px #3f244607; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 10px; min-width: 0; color: #403746; font-size: 12px; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #e2dce8; border-radius: 12px; background: #fff9; color: #302936; font-size: 14px; line-height: 1.4; font-weight: 400; font-family: inherit; }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a099a6; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid #a060d859; border-color: #a86fd0; }
.contact-submit { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border: 0; border-radius: 999px; background: #17171b; color: #fff; font-size: 14px; line-height: 1.2; font-weight: 600; font-family: inherit; cursor: pointer; }
.contact-submit:hover:not(:disabled) { background: var(--pixel-color); }
.contact-submit:disabled { opacity: .45; cursor: not-allowed; }
.contact-form-status { margin: -8px 0 0; color: #8c8393; font-size: 11px; line-height: 1.5; }
@media (max-width: 900px) {
  .site-navigation { top: 12px; left: 82px; transform: none; border-radius: 999px; }
  .nav-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
  .nav-toggle span { font-size: 12px; }
  .nav-links { display: none; position: absolute; left: -4px; top: calc(100% + 12px); align-items: stretch; width: min(280px, calc(100vw - 104px)); padding: 8px; border: 1px solid #e8e2ed; border-radius: 18px; background: #fffffff5; box-shadow: 0 12px 40px #17171b14; }
  .site-navigation.is-open .nav-links { display: flex; flex-direction: column; }
  .nav-submenu { position: static; width: auto; border: 0; box-shadow: none; background: #f8f4fc; margin-top: 4px; }
  .nav-links > a, .nav-services > summary { padding: 13px 14px; }
  .contact-section { grid-template-columns: 1fr; gap: 40px; padding: 88px 22px 64px; }
  .contact-intro h2 { font-size: clamp(64px, 13vw, 90px); }
  .contact-form { padding: 24px; border-radius: 24px; }
  .contact-field-row { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 360px) {
  .site-navigation { left: 72px; font-size: 12px; }
  .nav-toggle { padding: 9px 8px; gap: 6px; }
  .contact-button { right: 16px; width: 136px; padding: 0 12px; gap: 8px; font-size: 11px; white-space: nowrap; }
}

/* Portfolio: two offset browser canvases, with the original project artwork. */
#portfolio { scroll-margin-top: 88px; }
.portfolio-section { position: relative; overflow: hidden; padding: 112px clamp(24px, 6vw, 100px) 96px; background: linear-gradient(180deg, #f8f6fb, #fff 65%, #fcfbfe); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.portfolio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 64px; }
.portfolio-eyebrow { margin: 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: .13em; color: #85778f; }
.portfolio-heading h2 { margin: 0; color: #17171b; font: 900 clamp(64px, 8.7vw, 130px)/.95 'Arial Black', 'Arial-Black', Arial, sans-serif; letter-spacing: -.065em; }
.portfolio-heading h2 > span { color: var(--pixel-color); }
.portfolio-heading > p { margin: 0 0 8px; color: #82768b; font-size: 16px; line-height: 1.5; }
.portfolio-grid { display: grid; grid-template-columns: 1.17fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.portfolio-project { min-width: 0; }
.portfolio-project-next { grid-column: 1; }
.portfolio-project-thugatra { margin-top: 140px; }
@media (min-width: 901px) {
  .portfolio-project-runa { grid-column: 1; grid-row: 1; }
  .portfolio-project-next { grid-column: 1; grid-row: 2; }
  .portfolio-project-thugatra { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; }
}
.project-preview { position: relative; display: block; overflow: hidden; isolation: isolate; color: #282330; text-decoration: none; border: 1px solid #fff; border-radius: 28px; }
.project-preview-runa { aspect-ratio: 1.18; background: radial-gradient(ellipse at 80% 12%, #e8ecfc, transparent 65%), linear-gradient(145deg, #dce5f0, #ebe8f5); }
.project-preview-thugatra { aspect-ratio: 1.07; background: radial-gradient(ellipse at 5% 20%, #eae2f2, transparent 65%), linear-gradient(150deg, #f0ecf4, #dce4eb); }
.project-index { position: absolute; top: 3%; left: 5%; z-index: -1; color: #ffffffa8; font-size: clamp(90px, 13vw, 190px); font-weight: 800; letter-spacing: -.09em; line-height: 1; }
.project-browser { position: absolute; left: 7%; right: 7%; top: 17%; height: 65%; overflow: hidden; border: 1px solid #ffffffbd; border-radius: 12px; background: #fff; box-shadow: 0 28px 55px #27314924, 0 4px 9px #27314910; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s; }
.project-browser-runa { transform: rotate(-3deg); }
.project-browser-thugatra { transform: rotate(3deg); }
.project-browser-chrome { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 12px; border-bottom: 1px solid #e8e5ec; background: #ffffffed; color: #96909b; font-size: 8px; letter-spacing: .01em; }
.browser-dots { display: flex; gap: 3px; }
.browser-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #d8d2df; }
.project-runa-page { height: calc(100% - 28px); padding: 5% 6%; background: url('assets/portfolio/runa-alps.png') center / cover; }
.project-runa-logo { display: block; width: 35%; max-width: 180px; height: auto; }
.project-runa-copy { margin-top: 10%; color: #172026; }
.project-runa-copy h3 { margin: 0 0 12px; font-size: clamp(16px, 1.8vw, 29px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.project-runa-copy p { max-width: 80%; margin: 0 0 14px; font-size: clamp(8px, .75vw, 12px); line-height: 1.4; }
.project-runa-copy > span { display: inline-block; padding: 7px 12px; border-radius: 3px; background: #172026; color: #fff; font-size: 8px; }
.project-thugatra-page { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; height: calc(100% - 28px); padding: 5%; background: #fdfefe; }
.project-thugatra-page > img { width: 88%; height: auto; }
.project-thugatra-page > p { margin: 0; color: #586b82; text-align: center; font-size: clamp(9px, .95vw, 14px); font-weight: 500; line-height: 1.5; }
.project-thugatra-waves { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; stroke: #82909e; stroke-width: 1.5; opacity: .25; }
.project-open { position: absolute; right: 6%; bottom: 6%; display: inline-flex; align-items: center; gap: 18px; padding: 11px 15px; border: 1px solid #ffffff9c; border-radius: 999px; background: #ffffffa8; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #524460; font-size: 11px; transition: background .2s, color .2s; }
.project-preview:hover .project-browser, .project-preview:focus-visible .project-browser { transform: rotate(0) translateY(-5px) scale(1.025); box-shadow: 0 32px 65px #2731492e; }
.project-preview:hover .project-open, .project-preview:focus-visible .project-open { color: #fff; background: var(--pixel-color); }
.project-preview:focus-visible { outline: 2px solid var(--pixel-color); outline-offset: 5px; }
.project-caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 22px 2px 0; }
.project-caption p { margin: 0 0 8px; color: #9b90a4; font-size: 10px; letter-spacing: .12em; }
.project-caption h3 { margin: 0; font-size: clamp(26px, 2.7vw, 40px); font-weight: 700; letter-spacing: -.045em; }
.project-caption h3 a { color: #292230; text-decoration: none; }
.project-caption h3 a:hover { color: var(--pixel-color); }
.project-caption h3 span { font-size: .6em; vertical-align: middle; color: #8c729e; }
.project-category { padding-bottom: 4px; color: #8b8095; font-size: 10px; text-align: right; }
.project-preview-next { aspect-ratio: 1.07; background: radial-gradient(ellipse at 90% 12%, #ede3f8, transparent 65%), linear-gradient(145deg, #e5dded, #f4f0f9); }
.project-browser-next { transform: rotate(-3deg); }
.project-next-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: calc(100% - 28px); padding: 6%; background: #fcfaff; text-align: center; }
.project-next-plus { color: #a88ac3; font-size: 24px; font-weight: 300; line-height: 1; }
.project-next-page strong { color: #392642; font-size: clamp(25px, 2.9vw, 44px); font-weight: 800; line-height: .95; letter-spacing: -.06em; }
.project-next-page p { margin: 0; color: #9985a8; font-size: 10px; }
@media (max-width: 900px) {
  .portfolio-section { padding: 88px 28px 72px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 56px; }
  .portfolio-project-runa, .portfolio-project-next { width: 94%; }
  .portfolio-project-thugatra { width: 85%; margin: 0 0 0 auto; }
  .project-runa-copy h3 { font-size: clamp(20px, 3.5vw, 32px); }
  .project-runa-copy p { font-size: 11px; }
  .project-thugatra-page > p { font-size: 14px; }
  .project-next-page strong { font-size: clamp(32px, 5vw, 54px); }
}
@media (max-width: 600px) {
  .portfolio-section { padding: 80px 22px 64px; }
  .portfolio-heading { display: block; margin-bottom: 36px; }
  .portfolio-heading h2 { font-size: clamp(56px, 13.8vw, 82px); }
  .portfolio-heading > p { margin: 18px 0 0; font-size: 14px; }
  .portfolio-project-runa, .portfolio-project-thugatra, .portfolio-project-next { width: 100%; }
  .project-preview { border-radius: 22px; }
  .project-runa-copy h3 { font-size: clamp(15px, 4.2vw, 23px); }
  .project-runa-copy p { font-size: 8px; margin-bottom: 8px; }
  .project-runa-copy > span { padding: 5px 8px; font-size: 7px; }
  .project-browser-chrome { height: 22px; padding: 0 8px; font-size: 7px; }
  .project-runa-page, .project-thugatra-page, .project-next-page { height: calc(100% - 22px); }
  .project-thugatra-page { gap: 16px; }
  .project-thugatra-page > p { font-size: 10px; }
  .project-open { padding: 9px 12px; font-size: 10px; }
  .project-caption { align-items: flex-start; }
  .project-category { max-width: 90px; font-size: 9px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .project-browser, .project-open { transition: none; } }

/* Portrait and expertise as two complementary, open columns. */
#ueber-mich { scroll-margin-top: 88px; }
.about-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(40px, 8vw, 120px); padding: 96px clamp(24px, 6vw, 100px) 110px; background: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.about-profile, .about-expertise { min-width: 0; }
.about-portrait { width: 100%; max-width: 320px; margin: 0; }
.about-portrait > img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 24px; background: #e5e1df; }
.about-portrait figcaption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px 15px; margin-top: 15px; color: #86758f; font-size: 8px; letter-spacing: .07em; }
.about-profile h2 { margin: 26px 0 0; color: #17171b; font: 900 clamp(38px, 4.5vw, 68px)/1.08 'Arial Black', 'Arial-Black', Arial, sans-serif; letter-spacing: -.065em; }
.about-profile h2 > span { display: block; margin-bottom: 8px; color: #796d81; font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; }
.about-profile h2 em { display: block; font-style: normal; }
.expertise-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 25px; }
.about-expertise .eyebrow { margin: 0; color: #86758f; font-size: 9px; font-weight: 650; letter-spacing: .1em; }
.about-ai-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #f3eaf9; color: #8143a7; font-size: 10px; font-weight: 600; }
.about-ai-label > span { font-size: 16px; line-height: 1; }
.about-expertise h3 { margin: 0 0 32px; color: #17171b; font-size: clamp(32px, 3.2vw, 48px); font-weight: 650; line-height: 1.1; letter-spacing: -.055em; }
.about-expertise h3 > span { color: var(--pixel-color); }
.expertise-list { list-style: none; margin: 0; padding: 0; }
.expertise-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 24px 0; border-top: 1px solid #eae4ee; }
.expertise-list li:last-child { border-bottom: 1px solid #eae4ee; }
.expertise-number { color: #a37cbd; font-size: 10px; }
.expertise-list h4 { margin: 0; color: #39303f; font-size: clamp(17px, 1.6vw, 24px); font-weight: 550; line-height: 1.3; letter-spacing: -.03em; overflow-wrap: break-word; }
.expertise-list p { margin: 8px 0 0; color: #8a7d92; font-size: 12px; line-height: 1.6; }
.about-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 28px; margin-top: 7px; }
.about-contact-link { display: inline-flex; align-items: center; gap: 28px; min-height: 44px; margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid #c7b7d4; color: #403147; font-size: 12px; text-decoration: none; }
.about-contact-link > span { font-size: 22px; }
.about-linkedin { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 24px; color: #706978; font-size: 12px; text-decoration: none; }
.about-contact-link:hover, .about-linkedin:hover { color: var(--pixel-color); }
.about-contact-link:focus-visible, .about-linkedin:focus-visible { outline: 2px solid var(--pixel-color); outline-offset: 5px; }
.about-linkedin svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 900px) { .about-section { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 72px 22px; } .about-portrait { max-width: 280px; } .about-profile h2 { font-size: clamp(42px, 10vw, 64px); } .about-expertise h3 { font-size: 38px; } .expertise-list h4 { font-size: 20px; } }
@media (max-width: 380px) { .about-profile h2 { font-size: 39px; } .about-expertise h3 { font-size: 33px; } .expertise-list li { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; } .expertise-list h4 { font-size: 17px; } .expertise-list p { font-size: 11px; } }

/* Liquid glass navigation with an integrated language control. */
.site-navigation { display: flex; align-items: center; gap: 7px; padding: 5px; isolation: isolate; border: 1px solid #ffffffc9; background: linear-gradient(135deg, #ffffff73, #ffffff2e 52%, #eee5f547); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 1px 0 #fffffff2, inset 0 -1px 0 #ffffff52, inset 1px 0 1px #ffffffa6, 0 8px 30px #30203e0d, 0 1px 5px #30203e08; }
.site-navigation::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 20% 0%, #ffffffa6, transparent 60%); pointer-events: none; }
.nav-links > a { padding: 10px 13px; white-space: nowrap; transition: color .2s, background .2s; }
.nav-links > a:hover { background: #ffffff8c; color: #8034bd; }
.language-switch { display: flex; flex-shrink: 0; align-items: center; gap: 2px; padding: 3px; border: 1px solid #ffffff8c; border-radius: 999px; background: #6552750a; box-shadow: inset 0 1px 4px #31203f08; }
.language-switch button { display: grid; place-items: center; min-width: 32px; min-height: 29px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; color: #6d6075; font: 600 10px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.language-switch button[aria-pressed="true"] { color: #3c254d; background: #ffffffd9; box-shadow: 0 1px 5px #39224414, inset 0 1px 0 #fff; }
.language-switch button:hover { color: #8034bd; background: #ffffff8c; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-navigation { background: #fffffff0; } }
@media (max-width: 1050px) {
  .site-navigation { top: 12px; left: 82px; transform: none; border-radius: 999px; }
  .nav-toggle { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
  .nav-toggle span { font-size: 12px; }
  .nav-links { display: none; position: absolute; left: -4px; top: calc(100% + 12px); align-items: stretch; width: min(280px, calc(100vw - 104px)); padding: 8px; border: 1px solid #ffffffb3; border-radius: 20px; background: linear-gradient(135deg, #ffffffe6, #f9f4fcd9); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 1px 0 #fff, 0 14px 40px #30203e14; }
  .site-navigation.is-open .nav-links { display: flex; flex-direction: column; }
  .nav-links > a { padding: 13px 14px; }
}
@media (max-width: 500px) {
  .site-navigation { gap: 3px; padding: 4px; }
  .nav-toggle .nav-toggle-label { display: none; }
  .nav-toggle { padding: 10px 8px; gap: 0; }
  .language-switch { padding: 2px; }
  .language-switch button { min-width: 27px; min-height: 28px; padding-inline: 5px; font-size: 9px; }
}
@media (max-width: 360px) { .site-navigation { left: 72px; } .contact-button { width: 120px; font-size: 10px; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .language-switch button, .nav-links > a { transition: none; } }

/* Reserve the same space in both languages; only the switch indicator moves. */
@media (min-width: 1051px) {
  .nav-links > a { display: grid; place-items: center; flex-shrink: 0; padding-inline: 8px; }
  .nav-links > a:nth-child(1) { width: 72px; }
  .nav-links > a:nth-child(2) { width: 86px; }
  .nav-links > a:nth-child(3) { width: 88px; }
  .nav-links > a:nth-child(4) { width: 98px; }
  .nav-links > a:nth-child(5) { width: 86px; }
}
.language-switch { --language-cell: 32px; --language-inset: 3px; --indicator-x: 0px; position: relative; display: grid; grid-template-columns: repeat(2, var(--language-cell)); gap: 2px; padding: var(--language-inset); isolation: isolate; }
html[lang="en"] .language-switch { --indicator-x: 34px; }
.language-indicator { position: absolute; z-index: -1; left: var(--language-inset); top: var(--language-inset); bottom: var(--language-inset); width: var(--language-cell); border-radius: 999px; background: #ffffffd9; box-shadow: 0 1px 5px #39224414, inset 0 1px 0 #fff; translate: var(--indicator-x) 0; transition: translate .48s cubic-bezier(.22, .8, .25, 1); pointer-events: none; }
.language-switch button { width: var(--language-cell); min-width: 0; padding-inline: 0; }
.language-switch button[aria-pressed="true"], .language-switch button:hover { background: transparent; box-shadow: none; }
@media (min-width: 501px) and (max-width: 1050px) { .nav-toggle { width: 78px; justify-content: center; } }
@media (max-width: 500px) { .language-switch { --language-cell: 27px; --language-inset: 2px; } html[lang="en"] .language-switch { --indicator-x: 29px; } }
@media (prefers-reduced-motion: reduce) { .language-indicator { transition: none; } }

/* The service pixels continue through the portfolio into the LinkedIn control. */
.pixel-route { position: fixed; inset: 0; z-index: 12; width: 100%; height: 100%; pointer-events: none; }
.portfolio-pixel-logo { position: absolute; z-index: 3; top: 18px; right: 20px; display: grid; place-items: center; width: 138px; height: 44px; pointer-events: none; }
.portfolio-pixel-logo > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.portfolio-cd-mark { display: flex; color: var(--pixel-color); font: 400 70px/70px 'Codin Pixel', monospace; transform: translateY(-14px); }
.portfolio-cd-mark > span { width: 28px; }
.portfolio-cd-mark > span + span { margin-left: -7px; }
.pixel-route-ready .portfolio-pixel-logo > * { visibility: hidden; }
.pixel-route-ready .route-departed .service-pixel-icon { opacity: 0; }
.pixel-route-ready .about-linkedin { position: relative; justify-content: center; flex-shrink: 0; width: 158px; height: 46px; color: transparent; border: 0; }
.pixel-route-ready .about-linkedin > * { visibility: hidden; }
.pixel-route-ready .about-linkedin:hover { background: #a14bdf0a; border-radius: 999px; }
.pixel-route-ready .about-linkedin:focus-visible { border-radius: 999px; }
@media (max-width: 600px) { .portfolio-pixel-logo { top: 14px; right: 16px; width: 116px; height: 36px; } }

.portfolio-pixel-logo[data-pixel-mark="runa"] { width: 164px; height: 52px; top: 12px; }
.portfolio-question-mark { display: block; color: var(--pixel-color); font: 400 60px/1 'Codin Pixel', monospace; }
@media (max-width: 600px) { .portfolio-pixel-logo[data-pixel-mark="runa"] { width: 138px; height: 44px; top: 10px; } }

.about-profile h2 { margin: 0 0 25px; }
.about-linkedin { justify-content: center; width: 158px; height: 46px; border-radius: 999px; background: var(--pixel-color); color: #fff; }
.about-linkedin svg { display: none; }
.about-linkedin:hover { color: #fff; background: #8136bc; }
.pixel-route-ready .about-linkedin, .pixel-route-ready .about-linkedin:hover { color: transparent; background: transparent; }
.portfolio-project.portfolio-reveal-ready { --enter-x: -60vw; }
.portfolio-project-thugatra.portfolio-reveal-ready { --enter-x: 60vw; }
.portfolio-project.portfolio-reveal-ready > .project-preview, .portfolio-project.portfolio-reveal-ready > .project-caption { opacity: 0; transform: translateX(var(--enter-x)); transition: transform .85s cubic-bezier(.2,.75,.25,1), opacity .55s ease; }
.portfolio-project.portfolio-reveal-ready.is-revealed > .project-preview, .portfolio-project.portfolio-reveal-ready.is-revealed > .project-caption { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .portfolio-project.portfolio-reveal-ready > .project-preview, .portfolio-project.portfolio-reveal-ready > .project-caption { opacity: 1; transform: none; transition: none; } }

.about-introduction { display: grid; gap: 15px; margin-bottom: 35px; max-width: 54ch; }
.about-introduction p { margin: 0; color: #706978; font-size: 14px; line-height: 1.8; }
.about-introduction p:first-child { color: #43394b; }
@media (max-width: 600px) { .about-introduction { margin-bottom: 29px; } .about-introduction p { font-size: 13px; } }

/* Soft rose highlights retain the translucency of the navigation. */
.nav-links > a:hover, .nav-links > a:focus-visible, .nav-services > summary:hover, .nav-toggle:hover, .language-switch button:hover { background: rgb(245 176 209 / .28); color: #88416b; box-shadow: inset 0 1px 0 #ffffff70; }
.nav-toggle { border-radius: 999px; transition: background .2s, color .2s; }
/* Keep the travelling pixel fill, with crisp text once the button has formed. */
.about-linkedin { font-weight: 600; gap: 24px; padding-inline: 18px; transition: box-shadow .25s, background .25s; }
.pixel-route-ready.linkedin-formed .about-linkedin { z-index: 13; color: #fff; background: transparent; box-shadow: inset 0 1px 0 #ffffff50, 0 4px 14px #9133cc14; }
.pixel-route-ready.linkedin-formed .about-linkedin > span { visibility: visible; font-size: 20px; }
.pixel-route-ready.linkedin-formed .about-linkedin:hover { color: #fff; background: #ffffff14; box-shadow: inset 0 1px 0 #ffffff70, 0 6px 20px #9133cc2b; }
@media (prefers-reduced-motion: reduce) { .about-linkedin, .nav-toggle { transition: none; } }

.about-profile h2 .about-name-dot { color: var(--pixel-color); }
.service-pixel-icon > span { position: absolute; width: calc(100% / 11 - .8px); height: calc(100% / 11 - .8px); transition: left .48s cubic-bezier(.22,.75,.25,1), top .48s cubic-bezier(.22,.75,.25,1); }
@media (prefers-reduced-motion: reduce) { .service-pixel-icon > span { transition: none; } }

.preview-toolbar { justify-content: flex-end; }

/* The portfolio pixels settle into a four-stop project timeline. */
#ablauf { scroll-margin-top: 88px; }
.timeline-section { padding: 100px clamp(24px, 6vw, 100px) 112px; background: linear-gradient(150deg, #faf7fd, #fff 75%); color: #17171b; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.timeline-heading h2 { margin: 0 0 62px; font: 900 clamp(46px, 5.5vw, 82px)/1.02 'Arial Black', 'Arial-Black', Arial, sans-serif; letter-spacing: -.065em; }
.timeline-heading h2 > span { color: var(--pixel-color); }
.timeline-layout { position: relative; }
.timeline-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }
.timeline-step { position: relative; min-width: 0; }
.timeline-node { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 28px; color: #8c5ba9; font-size: 9px; background: #faf7fd; }
.timeline-node::before { content: ''; position: absolute; inset: 0; border: 3px dotted #a663d8; }
.timeline-rail { position: absolute; z-index: 0; left: 17px; right: calc(25% - 9px); top: 15px; height: 3px; background: repeating-linear-gradient(to right, #a663d8 0 3px, transparent 3px 5px); }
.timeline-step h3 { margin: 0 0 14px; color: #51435d; font-size: clamp(18px, 1.65vw, 25px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; transition: color .4s; }
.timeline-step p { max-width: 27ch; margin: 0; color: #8a7c94; font-size: 13px; line-height: 1.8; }
.timeline-step.is-current h3, .timeline-step.is-complete h3 { color: #7935ad; }
.timeline-step.is-current .timeline-node { color: #64258e; font-weight: 700; }
.pixel-route-ready .timeline-node::before, .pixel-route-ready .timeline-rail { visibility: hidden; }
@media (max-width: 760px) {
  .timeline-section { padding: 72px 22px; }
  .timeline-heading h2 { font-size: clamp(42px, 10vw, 64px); margin-bottom: 44px; }
  .timeline-track { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .timeline-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 25px; }
  .timeline-node { margin: 0; }
  .timeline-step h3 { font-size: 23px; margin-bottom: 11px; }
  .timeline-step p { max-width: 42ch; font-size: 12px; }
  .timeline-rail { left: 15px; top: 17px; right: auto; bottom: 65px; width: 3px; height: auto; background: repeating-linear-gradient(to bottom, #a663d8 0 3px, transparent 3px 5px); }
}
@media (prefers-reduced-motion: reduce) { .timeline-step h3 { transition: none; } }

/* Violet highlights belong to navigation links, not the language control. */
.nav-links > a:hover, .nav-links > a:focus-visible, .nav-services > summary:hover, .nav-toggle:hover { background: rgb(173 119 225 / .25); color: #7132a2; box-shadow: inset 0 1px 0 #ffffff70; }
.language-switch button:hover { background: transparent; box-shadow: none; color: #6d6075; }
.language-switch button[aria-pressed="true"]:hover { color: #3c254d; }
/* Completed pixel logos live inside each card and scroll with its composited layer. */
.portfolio-mark-canvas { position: absolute; inset: 0; z-index: auto; width: 100%; height: 100%; }
.pixel-route-ready.portfolio-formed .portfolio-pixel-logo > .portfolio-mark-canvas { visibility: visible; }
/* An architectural editorial concept for the responsive service preview. */
.design-browser { background: #edeee5; border-radius: 13px; transform: rotate(-2deg); box-shadow: 0 24px 45px #30243d22; }
.studio-page { padding: 19px; background: #edeee5; color: #293228; }
.studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-nav > strong { font-size: 23px; font-weight: 650; letter-spacing: -.09em; line-height: 1; }
.studio-nav strong > span { font-size: 7px; vertical-align: top; margin-left: 4px; letter-spacing: 0; }
.studio-nav > span { font-size: 6px; color: #6e7864; }
.studio-nav b { margin-left: 12px; font-size: 13px; }
.studio-body { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; padding: 24px 0; }
.studio-copy > span:first-child { display: block; margin-bottom: 15px; color: #747e6a; font-size: 5px; letter-spacing: .1em; }
.studio-copy > strong { display: block; font: 400 clamp(27px, 3vw, 46px)/1.04 Georgia, serif; letter-spacing: -.065em; }
.studio-copy em { color: #6d765a; font-weight: 400; }
.studio-cta { display: inline-flex; align-items: center; gap: 15px; margin-top: 20px; padding: 8px 11px; border-radius: 999px; background: #303b29; color: #fff; font-size: 6px; }
.studio-cta b { font-size: 10px; }
.studio-visual { position: relative; min-width: 0; }
.studio-visual > img { display: block; width: 100%; aspect-ratio: .85; object-fit: cover; border-radius: 120px 120px 3px 3px; }
.studio-visual > span { display: block; margin-top: 7px; font-size: 5px; color: #7c8372; }
.studio-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid #cbd0c0; color: #7c8372; font-size: 5px; line-height: 1.4; }
.design-browser[data-mode="mobile"] .studio-page { padding: 12px; }
.design-browser[data-mode="mobile"] .studio-nav > strong { font-size: 21px; }
.design-browser[data-mode="mobile"] .studio-nav > span { display: none; }
.design-browser[data-mode="mobile"] .studio-body { grid-template-columns: 1fr; gap: 12px; padding: 10px 0; }
.design-browser[data-mode="mobile"] .studio-copy > strong { font-size: 30px; }
.design-browser[data-mode="mobile"] .studio-copy > span:first-child { margin-bottom: 9px; }
.design-browser[data-mode="mobile"] .studio-cta { margin-top: 12px; padding: 6px 10px; }
.design-browser[data-mode="mobile"] .studio-visual > img { height: 80px; aspect-ratio: auto; border-radius: 4px; object-position: center 58%; }
.design-browser[data-mode="mobile"] .studio-visual > span { display: none; }
.design-browser[data-mode="mobile"] .studio-footer { padding-top: 8px; font-size: 4px; }
@media (max-width: 420px) { .studio-page { padding: 14px; } .studio-body { gap: 8px; padding-block: 22px; } .studio-copy > strong { font-size: 25px; } .studio-nav > span { font-size: 5px; } .studio-copy > span:first-child { font-size: 4px; margin-bottom: 10px; } .studio-cta { padding: 6px 9px; gap: 8px; margin-top: 14px; font-size: 5px; } }

/* A vertical, image-led timeline inspired by Talent Elevator's event schedule. */
.timeline-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); align-items: start; gap: clamp(35px, 5vw, 85px); padding-block: 110px; background: linear-gradient(155deg, #f7f3fc, #fff 65%); }
.timeline-heading { position: sticky; top: 120px; }
.timeline-heading h2 { margin: 0; font-size: clamp(35px, 3.8vw, 58px); line-height: 1.06; }
.timeline-layout { position: relative; min-width: 0; padding-left: 20px; }
.timeline-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-left: 32px; }
.timeline-step { display: block; position: relative; min-width: 0; }
.timeline-node { position: absolute; z-index: 4; left: -49px; top: 50%; translate: 0 -50%; margin: 0; width: 34px; height: 34px; color: #8553a8; background: #faf7fd; }
.timeline-rail { left: 19px; top: 150px; bottom: 150px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(to bottom, #a663d8 0 3px, transparent 3px 5px); }
.timeline-card { position: relative; display: flex; align-items: flex-end; min-height: 300px; overflow: hidden; isolation: isolate; border: 1px solid #fff; border-radius: 24px; background: #39313d; box-shadow: 0 10px 30px #3822460c; }
.timeline-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.timeline-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #21192b08 0%, #21192b26 30%, #21192bc9 100%); }
.timeline-card-copy { width: 100%; padding: 30px; }
.timeline-card-copy h3 { margin: 0 0 12px; color: #fff; font-size: clamp(24px, 2.15vw, 33px); font-weight: 650; letter-spacing: -.04em; }
.timeline-card-copy p { max-width: 48ch; color: #ffffffe0; font-size: 13px; line-height: 1.7; }
.timeline-step.is-current h3, .timeline-step.is-complete h3 { color: #fff; }
.timeline-step.is-current .timeline-card { box-shadow: 0 0 0 1px #b275db66, 0 12px 36px #803eab14; }
.timeline-pixel-canvas { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
.pixel-route-ready.timeline-formed .timeline-pixel-canvas { visibility: visible; }
@media (max-width: 900px) { .timeline-section { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 72px 22px; } .timeline-heading { position: static; } .timeline-heading h2 { font-size: clamp(42px, 7vw, 64px); } .timeline-layout { max-width: 780px; width: 100%; } }
@media (max-width: 600px) { .timeline-section { gap: 32px; } .timeline-layout { padding-left: 16px; } .timeline-track { padding-left: 25px; gap: 22px; } .timeline-node { left: -42px; font-size: 8px; } .timeline-card { min-height: 290px; border-radius: 20px; } .timeline-card-copy { padding: 24px 20px; } .timeline-card-copy h3 { font-size: 24px; } .timeline-card-copy p { font-size: 12px; } .timeline-rail { left: 15px; top: 145px; bottom: 145px; } }
@media (prefers-reduced-motion: reduce) { .timeline-card { box-shadow: 0 10px 30px #3822460c; } }
.pixel-route-ready .timeline-node { background: transparent; }

/* Frosted, reflective glass over the timeline photography. */
.timeline-card { border-color: #ffffffb3; box-shadow: inset 0 1px 1px #ffffffe0, inset 0 -1px 1px #ffffff38, 0 14px 38px #38224614; }
.timeline-card::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, #ffffff40, #ffffff0d 45%, #dfc4f226); -webkit-backdrop-filter: blur(3px) saturate(125%); backdrop-filter: blur(3px) saturate(125%); box-shadow: inset 0 1px 0 #ffffffb3, inset 1px 0 0 #ffffff66; }
.timeline-card-copy { width: calc(100% - 32px); margin: 16px; padding: 22px 24px; border: 1px solid #ffffff59; border-radius: 18px; background: linear-gradient(125deg, #ffffff30, #ffffff0f 65%, #ddbcf21f); -webkit-backdrop-filter: blur(15px) saturate(150%); backdrop-filter: blur(15px) saturate(150%); box-shadow: inset 0 1px 0 #ffffff80, inset 0 -1px 0 #ffffff1f, 0 8px 24px #160c2221; }
@media (max-width: 600px) { .timeline-card-copy { width: calc(100% - 24px); margin: 12px; padding: 19px 17px; border-radius: 15px; } }

/* Mobile: a stable header, comfortable controls and unclipped content. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  html { scroll-padding-top: calc(98px + env(safe-area-inset-top, 0px)); }
  #services, #portfolio, #ablauf, #ueber-mich, #contact { scroll-margin-top: calc(98px + env(safe-area-inset-top, 0px)); }
  .site-navigation { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(68px + env(safe-area-inset-left, 0px)); gap: 4px; padding: 4px; }
  .nav-toggle { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; gap: 0; }
  .nav-toggle .nav-toggle-label { display: none; }
  .nav-toggle > span:last-child { font-size: 16px; }
  .language-switch { --language-cell: 33px; --language-inset: 3px; }
  .language-switch button { min-height: 40px; font-size: 10px; }
  html[lang="en"] .language-switch { --indicator-x: 35px; }
  .contact-button { top: calc(17px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); width: clamp(104px, calc(100vw - 216px), 164px); height: 44px; padding-inline: 9px; gap: 7px; font-size: 10.5px; white-space: nowrap; }
  .nav-links { left: -52px; top: calc(100% + 10px); width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); max-width: 360px; max-height: calc(100svh - 102px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 9px; border-radius: 22px; }
  .nav-links > a { display: flex; align-items: center; min-height: 48px; padding: 13px 16px; font-size: 15px; }
  .interface { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .services-stage { padding: 88px 20px 60px; gap: 32px; }
  .services-heading h2 { font-size: clamp(43px, 11.8vw, 76px); }
  .services-intro { margin-top: 23px; font-size: clamp(20px, 5.2vw, 24px); }
  .services-description { max-width: 45ch; font-size: 15px; line-height: 1.7; }
  .services-actions { align-items: stretch; gap: 14px; margin-top: 25px; }
  .services-primary { justify-content: space-between; width: 100%; min-height: 50px; font-size: 13px; }
  .services-secondary { align-self: flex-start; min-height: 44px; font-size: 13px; }
  .preview-toolbar { margin-bottom: 14px; }
  .preview-switch button { min-height: 44px; min-width: 80px; font-size: 12px; }
  .service-slot { height: clamp(420px, 84vw, 540px); }
  .tile-content { padding: 60px 16px 28px; }
  .design-browser[data-mode="mobile"] { width: min(220px, 100%); }
  .design-browser[data-mode="mobile"] .studio-copy > strong { font-size: 32px; }
  .design-browser[data-mode="mobile"] .studio-visual > img { height: 88px; }
  .portfolio-section { padding: 70px 20px 64px; }
  .portfolio-heading { margin-bottom: 30px; }
  .portfolio-heading h2 { font-size: clamp(52px, 13.8vw, 82px); }
  .portfolio-grid { gap: 36px; }
  .project-caption { padding-top: 17px; }
  .project-caption h3 { font-size: clamp(23px, 6.2vw, 32px); }
  .project-caption h3 a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
  .project-caption h3 span { font-size: 18px; }
  .timeline-section { padding: 70px 20px; gap: 34px; }
  .timeline-heading h2 { font-size: clamp(39px, 10vw, 60px); }
  .timeline-card { min-height: 306px; }
  .timeline-card-copy { width: calc(100% - 20px); margin: 10px; padding: 19px 16px; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
  .timeline-card-copy h3 { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.15; }
  .timeline-card-copy p { font-size: 13px; line-height: 1.7; }
  .timeline-rail { top: 153px; bottom: 153px; }
  .about-section { padding: 70px 20px; gap: 36px; }
  .about-profile { width: 100%; }
  .about-portrait { width: min(100%, 280px); }
  .about-profile h2 { font-size: clamp(38px, 10.3vw, 60px); }
  .about-expertise h3 { font-size: clamp(32px, 8.5vw, 42px); margin-bottom: 25px; }
  .expertise-list li { gap: 13px; padding-block: 21px; }
  .expertise-list h4 { font-size: clamp(17px, 4.5vw, 22px); }
  .expertise-list p { font-size: 13px; line-height: 1.65; }
  .about-links { gap: 0 20px; }
  .about-contact-link { font-size: 13px; }
  .about-linkedin { font-size: 13px; }
  .contact-section { min-height: 0; padding: 70px 20px calc(48px + env(safe-area-inset-bottom, 0px)); gap: 30px; }
  .contact-intro h2 { font-size: clamp(58px, 14.5vw, 88px); }
  .contact-description { font-size: 16px; line-height: 1.65; }
  .contact-form { padding: 22px 18px; gap: 20px; }
  .contact-form label { font-size: 13px; }
  .contact-form input, .contact-form textarea { font-size: 16px; padding: 14px 13px; }
  .contact-form input { min-height: 50px; }
  .contact-form textarea { min-height: 150px; }
  .contact-submit { min-height: 50px; font-size: 14px; }
  .contact-form-status { font-size: 12px; line-height: 1.6; }
}
@media (max-width: 600px) {
  .portfolio-project-runa, .portfolio-project-thugatra, .portfolio-project-next { width: 100%; }
  .project-preview-runa, .project-preview-thugatra, .project-preview-next { aspect-ratio: 1.05; }
  .project-browser { left: 6%; right: 6%; top: 24%; height: 56%; }
  .project-runa-copy p, .project-runa-copy > span { display: none; }
  .project-runa-copy { margin-top: 8%; }
  .project-runa-copy h3 { margin-bottom: 0; font-size: clamp(15px, 4.2vw, 22px); }
  .project-thugatra-page { gap: 10px; }
  .project-thugatra-page > img { width: 78%; }
  .project-thugatra-page > p { font-size: 9px; }
  .project-next-page { gap: 8px; }
  .project-next-plus { display: none; }
  .project-next-page strong { font-size: clamp(27px, 7.8vw, 40px); }
  .project-next-page p { font-size: 9px; }
  .project-open { right: 14px; bottom: 14px; min-height: 36px; gap: 12px; font-size: 11px; }
}
@media (max-width: 360px) {
  .services-heading h2 { font-size: 40px; }
  .timeline-track { padding-left: 21px; }
  .timeline-node { left: -38px; }
  .timeline-card-copy { padding: 17px 14px; }
  .timeline-card-copy h3 { font-size: 21px; }
  .expertise-list li { grid-template-columns: 19px minmax(0, 1fr); gap: 11px; }
}
@media (hover: none) and (pointer: coarse) {
  .project-preview:hover .project-browser { transform: none; }
  .contact-button:hover { background: #17171b; }
  .nav-links > a:hover { background: transparent; color: inherit; }
}

@media (max-width: 600px) { .timeline-node { left: -41px; } }
@media (max-width: 360px) { .timeline-node { left: -37px; } }