@import url("/assets/fonts.css");

/* Design tokens taken from the original template. */
:root {
  --dark: #171312;
  --light: #f2f2f2;
  --accent: #fc7200;
  --black: #000;
  --white: #fff;
  --gray: #383838;
  --pad: 32px;
  --ease: cubic-bezier(.44, 0, .56, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --display: "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
  --body: "Public Sans", "Public Sans Placeholder", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--light); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--light); color: var(--black); font-family: var(--body); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, dl, dd, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--black); }
.container { padding: 0 var(--pad); }
.img-missing { background: none; }
/* Only the studio preview marks empty image slots. */
.is-preview .img-missing { background: rgba(127, 127, 127, .15); }
main { position: relative; }
main > section, main > header, main > div, .footer { position: relative; }
/* Every section paints its own background, so the sticky hero stays underneath as the page scrolls over it. */
main > section.theme-light, main > div.theme-light { background: var(--light); z-index: 1; }
main > section.theme-dark, main > div.theme-dark, .footer { background: var(--dark); z-index: 1; }
.pt-other { background: var(--white) !important; }

/* ---------- typography ---------- */

.sec-number, .small-head { font: 500 18px/1.6 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.sec-number { color: var(--accent); }
.sec-title { font: 600 110px/.9 var(--display); letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.body-text, .sec-intro, .about-paragraphs p, .hero-intro { font: 300 16px/1.4 var(--body); letter-spacing: -.02em; }

/* ---------- buttons ---------- */

.btn { text-align: left; position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 272px; max-width: 100%; height: 48px; padding: 6px 12px; border-radius: 4px; overflow: hidden; font: 400 16px/1.2 var(--body); letter-spacing: -.02em; isolation: isolate; }
.btn-dark { background: var(--black); color: var(--white); }
.btn-light { background: var(--white); color: var(--black); }
.btn-text { background: transparent; color: inherit; padding-left: 0; }
.btn-block { width: 100%; }
.btn-fill { position: absolute; left: -10px; right: -10px; top: -12px; height: 8px; background: var(--accent); z-index: -1; transition: height .28s var(--ease); }
.btn-label, .btn-icon span, .roll { display: inline-grid; overflow: hidden; }
.btn-label { flex: 1; height: 20px; }
.btn-label > span, .roll > span { grid-area: 1 / 1; transition: transform .4s var(--ease); }
.btn-label > span + span, .roll > span + span { transform: translateY(calc(100% + 14px)); }
.btn-icon { display: grid; width: 20px; height: 20px; overflow: hidden; }
.btn-icon > span { grid-area: 1 / 1; display: block; width: 20px; height: 20px; transition: transform .4s var(--ease); }
.btn-icon > span + span { transform: translateY(24px); }
.btn-icon svg { width: 20px; height: 20px; }
.btn:hover .btn-fill, .btn:focus-visible .btn-fill { height: calc(100% + 24px); }
.btn-dark:hover { color: var(--black); }
.btn:hover .btn-label > span, .btn:hover .roll > span { transform: translateY(calc(-100% - 14px)); }
.btn:hover .btn-label > span + span, .btn:hover .roll > span + span { transform: translateY(0); }
.btn:hover .btn-icon > span { transform: translateY(-24px); }
.btn:hover .btn-icon > span + span { transform: translateY(0); }
.btn-text:hover { color: var(--black); }
.btn-text .btn-fill { left: -14px; }

.roll-link, .footer-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roll > span + span { color: var(--accent); }
.roll-link:hover .roll > span, .footer-menu a:hover .roll > span { transform: translateY(calc(-100% - 14px)); }
.roll-link:hover .roll > span + span, .footer-menu a:hover .roll > span + span { transform: translateY(0); }
.icon-stack { display: grid; width: 20px; height: 20px; overflow: hidden; flex: none; }
.icon-stack > span { grid-area: 1 / 1; display: block; transition: transform .4s var(--ease); }
.icon-stack > span + span { transform: translateY(24px); color: var(--accent); }
.icon-stack svg { width: 20px; height: 20px; display: block; }
a:hover > .icon-stack > span { transform: translateY(-24px); }
a:hover > .icon-stack > span + span { transform: translateY(0); }

/* ---------- header & menu ---------- */

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; transition: transform .6s var(--ease); }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header.menu-open { transform: none; }
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 82px; padding: 16px var(--pad); color: var(--black); transition: color .3s var(--ease); }
.nav > * { pointer-events: auto; }
.site-header[data-tone="dark"] .nav, .site-header.menu-open .nav { color: var(--white); }
/* Away from the top, a frosted bar in the colours of the section underneath, so the logo and the menu never sit on
   the page's own text (site.js adds .is-scrolled; not over the hero, where the header floats on the 3D). */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background-color: rgba(242, 242, 242, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(0, 0, 0, .07); transition: opacity .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.is-scrolled .nav::before { opacity: 1; }
.site-header[data-tone="dark"] .nav::before { background-color: rgba(23, 19, 18, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.site-header.menu-open .nav::before { opacity: 0; }
.brand { display: inline-flex; align-items: flex-start; gap: .36em; font: 600 24px/1.4 var(--body); letter-spacing: -.02em; padding: 8px 8px 8px 0; white-space: nowrap; }
.brand-name { display: flex; flex-direction: column; }
/* "powered by VARDA TEAM": tiny, spaced capitals under the name. */
.brand-by { margin-top: 1px; font: 400 9.5px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.brand-by span { opacity: .55; transition: opacity .3s var(--ease); }
.brand-by b { font-weight: 600; letter-spacing: .18em; opacity: .9; }
.brand:hover .brand-by span { opacity: .8; }
/* The logo eye: takes the header's colour; opens once on load and blinks on hover. */
.brand-eye { flex: none; width: 1.13em; height: .93em; margin-top: .235em; overflow: visible; } /* centred on the name line (1.4em) */
/* A slow sway: the layers move by different amounts, so the eye reads as a 3D object (no squeezing, no blur). */
.brand-eye-front { animation: eye-sway 8s ease-in-out infinite; }
@keyframes eye-sway {
  0%, 100% { transform: translateX(-.035px) scaleX(.97); }
  25%, 75% { transform: none; }
  50% { transform: translateX(.035px) scaleX(.97); }
}
.brand-eye-depth { opacity: .16; animation: eye-depth 8s ease-in-out infinite; }
@keyframes eye-depth {
  0%, 100% { transform: translate(.11px, .06px); }
  25%, 75% { transform: translate(.04px, .06px); }
  50% { transform: translate(-.03px, .06px); }
}
/* The iris sways a bit further than the outline, and looks at the mouse on computers (--lx / --ly from site.js). */
/* Room inside the outline: about .26 sideways and .13 up/down (eye half-widths). */
.brand-eye-iris { translate: calc(var(--lx, 0) * .26px) calc(var(--ly, 0) * .13px); transition: translate .35s cubic-bezier(.2, .8, .3, 1); animation: eye-look 8s ease-in-out infinite; }
.brand-eye-front > path, .brand-eye-depth { translate: calc(var(--lx, 0) * .04px) calc(var(--ly, 0) * .03px); transition: translate .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes eye-look {
  0%, 100% { transform: translate(-.05px, .01px); }
  25%, 75% { transform: none; }
  50% { transform: translate(.05px, -.01px); }
}
.brand-eye-glint { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .brand-eye-front, .brand-eye-depth, .brand-eye-iris { animation: none; } }
.menu-toggle { display: flex; flex-direction: column; gap: 6px; width: 205px; padding: 0; }
.menu-toggle-line { display: block; width: 100%; height: 1px; border-radius: 20px; background: currentColor; opacity: .6; transition: opacity .3s; }
.site-header.menu-open .menu-toggle-line { opacity: 1; }
.menu-toggle-row { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.menu-toggle-label { display: grid; height: 19px; overflow: hidden; font: 400 16px/1.2 var(--body); text-transform: uppercase; }
.menu-toggle-label > span { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.menu-toggle-label > span + span { transform: translateY(110%); }
.site-header.menu-open .menu-toggle-label > span { transform: translateY(-110%); }
.site-header.menu-open .menu-toggle-label > span + span { transform: translateY(0); }
.menu-dots { display: grid; grid-template-columns: repeat(3, 4px); gap: 4px; padding: 4px; width: 28px; height: 28px; transition: transform .5s var(--ease); }
.menu-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform .5s var(--ease), opacity .3s; }
.menu-toggle:hover .menu-dots { transform: rotate(90deg); }
.site-header.menu-open .menu-dots i:nth-child(2n) { opacity: 0; transform: scale(0); }
.site-header.menu-open .menu-dots { transform: rotate(45deg); }

.menu-overlay { position: fixed; inset: 0; z-index: 1; background: var(--dark); color: var(--white); pointer-events: auto; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.menu-overlay[hidden] { display: block; visibility: hidden; }
.menu-overlay.open { clip-path: inset(0 0 0 0); visibility: visible; }
/* The links shrink with the screen height (and their count, --n), so the social row always stays on screen. */
.menu-inner { --menu-top: clamp(120px, 26vh, 234px); --menu-room: calc(100vh - var(--menu-top) - 120px); position: relative; height: 100%; padding: var(--menu-top) var(--pad) 32px; display: grid; grid-template-columns: 1fr 350px; grid-template-rows: 1fr auto; column-gap: 32px; }
.menu-links { --row: min(99px, calc(var(--menu-room) / var(--n, 4) - 19px)); display: flex; flex-direction: column; gap: 19px; }
.menu-link { display: inline-flex; align-items: flex-start; gap: 14px; }
.menu-link-text { display: grid; overflow: hidden; height: var(--row); font: 600 calc(var(--row) / .9) / .9 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.menu-link-text > span, .menu-link-number > span { grid-area: 1 / 1; transition: transform .6s var(--ease); }
.menu-link-text > span + span { color: var(--accent); transform: translateY(105%); }
.menu-link-number { display: grid; overflow: hidden; height: 29px; font: 500 18px/1.6 var(--display); letter-spacing: -.02em; color: rgba(255, 255, 255, .6); }
.menu-link-number > span + span { transform: translateY(100%); }
.menu-link:hover .menu-link-text > span, .menu-link:hover .menu-link-number > span { transform: translateY(-105%); }
.menu-link:hover .menu-link-text > span + span, .menu-link:hover .menu-link-number > span + span { transform: translateY(0); }
.menu-overlay .menu-links li { overflow: hidden; }
.menu-overlay .menu-link { transform: translateY(110%); transition: transform .8s var(--ease); }
.menu-overlay.open .menu-link { transform: none; }
.menu-overlay.open li:nth-child(2) .menu-link { transition-delay: .05s; }
.menu-overlay.open li:nth-child(3) .menu-link { transition-delay: .1s; }
.menu-overlay.open li:nth-child(4) .menu-link { transition-delay: .15s; }
.menu-overlay.open li:nth-child(5) .menu-link { transition-delay: .2s; }
.menu-images { position: relative; width: 350px; height: min(430px, var(--menu-room)); overflow: hidden; border-radius: 0; }
.menu-image { position: absolute; inset: 0; transform: translateY(100%); transition: transform .8s var(--ease); }
.menu-image.active { transform: none; }
.menu-image img { width: 100%; height: 100%; object-fit: cover; }
/* Live 3D in place of the pictures: the scenes cross-fade, with no frame, and spill a little past the column. */
.menu-images.has-3d { overflow: visible; }
.menu-images.has-3d .menu-image { transform: none; opacity: 0; transition: opacity .7s var(--ease); }
.menu-images.has-3d .menu-image.active { opacity: 1; }
.menu-image img { transition: opacity .6s var(--ease); }
.menu-image.is-3d img { opacity: 0; }
.menu-canvas { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; display: block; opacity: 0; transition: opacity .9s ease; -webkit-mask: radial-gradient(closest-side, #000 74%, transparent); mask: radial-gradient(closest-side, #000 74%, transparent); }
.menu-image.is-3d .menu-canvas { opacity: 1; }
/* The social links: one row, centred under the menu. */
.menu-social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 64px; align-self: end; }
.menu-social .roll-link { justify-content: flex-start; gap: 10px; font: 400 18px/1.2 var(--body); letter-spacing: -.02em; color: var(--white); }
.menu-social .roll { width: auto; }

/* ---------- cursor ---------- */

.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .3s; }
.has-cursor .cursor { opacity: 1; }
.cursor-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: transform .5s var(--ease), opacity .3s; }
.cursor-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.2); padding: 14px 16px; border-radius: 999px; background: rgba(23, 19, 18, .9); color: var(--white); font: 500 12px/1 var(--body); letter-spacing: .02em; text-transform: uppercase; opacity: 0; transition: transform .5s var(--ease), opacity .3s; white-space: nowrap; }
.cursor.is-view .cursor-dot { transform: scale(0); }
.cursor.is-view .cursor-label { transform: translate(-50%, -50%) scale(1); opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- section header ---------- */

.sec-head { display: flex; flex-direction: column; gap: 8px; }
.sec-title-row { display: flex; align-items: flex-start; gap: 8px; min-height: 99px; }
.sec-head-stack .sec-title-row { flex-direction: column; gap: 8px; }
.sec-head-stack .sec-title { width: 100%; }
.sec-head-button { margin-left: auto; align-self: flex-end; padding-bottom: 0; }
.sec-head .sec-line { height: 1px; background: currentColor; opacity: .4; }
.theme-dark .sec-head .sec-line { opacity: .6; }
.sec-intro { width: 300px; margin-left: auto; color: rgba(0, 0, 0, .6); }
.sec-head-stack .sec-intro { margin-left: 0; }
.theme-dark .sec-intro { color: rgba(255, 255, 255, .6); }

/* ---------- hero ---------- */

.hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--dark); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; z-index: 0; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
/* Scroll animation: frames are stacked, each one fades in over the previous (driven by site.js). */
.hero-frames { background: #000; transform-origin: 50% 50%; will-change: transform; }
.hero-frame { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
/* Growing version: starts with the whole image visible and grows until it fills the screen. */
.hero-frames[data-zoom="1"] .hero-frame { object-fit: contain; transform: none; }
.hero-frame[data-frame="0"] { opacity: 1; }
.hero-scroll-space { position: relative; pointer-events: none; }
/* Live 3D in place of a picture. Until it draws (or where it can't), a soft glow in the shape's colour. */
.shape-embed { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(60% 55% at 50% 48%, color-mix(in srgb, var(--shape-color, #1c9bff) 26%, #000), #000 72%); }
.shape-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.shape-embed.is-3d .shape-canvas { opacity: 1; }
.shape-embed .shape-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape-embed.is-3d .shape-fallback { visibility: hidden; }
/* The growing window looks onto a full-screen scene: the canvas keeps the screen's size, centred in the window. */
.shape-reveal .shape-canvas { inset: auto; left: 50%; top: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); }
.about-media .shape-embed { height: 420px; border-radius: 4px; }
.tabs-image .shape-embed { border-radius: 4px; }
/* One scene per tab, floating on the page: no box, soft edges, the open tab's scene fades in over the last one. */
.tabs-image.tabs-stage { position: relative; overflow: visible; border-radius: 0; }
.tabs-stage .shape-embed { position: absolute; inset: -4% -10%; width: auto; height: auto; background: none; border-radius: 0; overflow: visible; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.tabs-stage .shape-embed.active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.tabs-stage .shape-canvas { -webkit-mask: radial-gradient(closest-side, #000 72%, transparent); mask: radial-gradient(closest-side, #000 72%, transparent); }
/* Behind the page the hero keeps its place; its text hides once other sections cover it. */
.hero.is-behind .hero-content { visibility: hidden; }
/* A see-through section: the 3D shape continues behind it (blurred and recoloured in hero-shape.js). */
.section-glass { transition: background-color .5s var(--ease); }
.hero-3d-on .section-glass { background-color: rgba(16, 12, 11, .5); }
/* 3D shape: the canvas fades in once the first frame is drawn; the still image only shows if 3D is unavailable. */
.hero-shape { background: #000; }
.hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.hero-shape.is-3d .hero-canvas { opacity: 1; }
.hero-shape .hero-shape-fallback { opacity: 0; transition: opacity .6s ease; }
.hero-shape.no-3d .hero-shape-fallback { opacity: 1; }
.hero-shape.no-3d .hero-canvas { display: none; }
.hero-content { position: relative; display: flex; flex-direction: column; gap: 40px; padding: 0 var(--pad) var(--pad); }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; min-height: 248px; }
.hero-intro { width: 344px; color: rgba(255, 255, 255, .8); }
/* Text protection: a soft, edgeless shadow behind the small text, so it reads over any background. */
.hero-intro { position: relative; z-index: 0; }
.hero-intro::before { content: ""; position: absolute; z-index: -1; inset: -90px -150px -90px -130px; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, 0)); }
.hero-shade-soft .hero-intro { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.hero-shade-strong .hero-intro { color: #fff; font-weight: 400; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.hero-shade-strong .hero-intro::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .88), rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, 0)); }
.hero-shade-none .hero-intro::before { display: none; }
.hero-side { display: flex; align-items: flex-end; gap: 8px; }
.hero .btn { width: 234px; height: 44px; }
.hero-follow { display: flex; flex-direction: column; align-items: center; width: 47px; gap: 16px; }
.hero-follow-label { writing-mode: vertical-rl; transform: rotate(180deg); font: 300 16px/1.4 var(--body); letter-spacing: -.02em; color: rgba(255, 255, 255, .8); }
.hero-follow-line { display: block; width: 1px; height: 47px; background: rgba(255, 255, 255, .6); margin-bottom: -4px; }
.hero-social { display: flex; flex-direction: column; gap: 8px; }
.social-link { display: grid; place-items: center; width: 26px; height: 24px; }
.social-link .icon-stack { width: 18px; height: 18px; }
.social-link .icon-stack svg { width: 18px; height: 18px; }
.social-link:hover .icon-stack > span { transform: translateY(-24px); }
.social-link:hover .icon-stack > span + span { transform: translateY(0); }
.hero-top { display: flex; flex-direction: column; gap: 8px; }
.hero-wordmark, .footer-wordmark { width: 100%; }
.fit-text { display: block; white-space: nowrap; font-family: var(--display); line-height: .8; letter-spacing: -.04em; }
.hero-wordmark .fit-text { font-weight: 500; font-size: 20vw; padding-top: .03em; }
.hero-line { height: 1px; background: var(--light); transform-origin: left; }
.hero-labels { display: flex; justify-content: space-between; font: 400 16px/1.2 var(--body); text-transform: uppercase; }
.hero-labels p { width: 20%; }
.hero-labels p:nth-child(2) { text-align: center; }
.hero-labels p:nth-child(3) { text-align: right; }

/* ---------- about ---------- */

.about { padding: 160px 0; background: var(--light); }
.small-head { display: flex; gap: 10px; }
.about-body { margin-top: 16px; display: flex; flex-direction: column; gap: 120px; }
.about-top { display: flex; flex-direction: column; gap: 8px; }
.about-heading { width: 56%; font: 500 48px/1.3 var(--body); letter-spacing: -.04em; }
.about-text { align-self: flex-end; width: 46%; display: flex; flex-direction: column; gap: 16px; }
.about-paragraphs { display: flex; flex-direction: column; gap: 10px; color: rgba(0, 0, 0, .6); }
.about-bottom { display: flex; justify-content: space-between; align-items: center; min-height: 400px; }
.about-media { width: 494px; max-width: 46%; }
.about-bottom.no-media { justify-content: flex-end; }
.stats { width: 46%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 33px; row-gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 12px; min-height: 184px; }
.stat:nth-child(n + 3) { justify-content: flex-end; }
.stat-value, .pt-stat-value { font: 600 64px/1 var(--display); white-space: nowrap; }
.stat-line { display: block; height: 1px; background: rgba(0, 0, 0, .4); transform-origin: left; }
.stat-text { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
/* "Cu ce ne ocupăm": what the studio does, as numbered text blocks under the introduction. */
.about-services { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 32px; }
.about-service { display: flex; flex-direction: column; gap: 14px; }
.about-service-number { margin-top: 8px; font: 500 14px/1 var(--body); letter-spacing: .04em; color: var(--accent); }
.about-service-title { font: 500 30px/1.15 var(--body); letter-spacing: -.03em; }
.about-service-text { max-width: 36ch; font: 300 16px/1.45 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }

.slideshow { position: relative; width: 100%; height: 420px; overflow: hidden; }
.slideshow-track { display: flex; gap: 10px; height: 100%; will-change: transform; }
.slide { flex: 0 0 100%; height: 100%; }
.slide img, .slide .img-missing { width: 100%; height: 100%; object-fit: cover; }
.slideshow-empty { width: 100%; height: 100%; }
.slideshow-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 10px; padding: 4px; border-radius: 50px; background: rgba(0, 0, 0, .2); }
.slideshow-dots button { width: 6px; height: 6px; border-radius: 50%; background: var(--white); opacity: .5; transition: opacity .3s; }
.slideshow-dots button.active { opacity: 1; }

/* ---------- projects ---------- */

.projects { padding: 140px 0; background: var(--dark); color: var(--white); }
.cards { margin-top: 64px; display: flex; flex-direction: column; gap: 64px; }
.cards-row { display: flex; gap: 16px; }
.cards-row-pair { justify-content: flex-end; }
.cards-row-left { justify-content: flex-start; }
.card { display: flex; flex-direction: column; gap: 16px; }
.card-media { position: relative; overflow: hidden; }
.card-img, .card-media .img-missing { width: 100%; height: 100%; object-fit: cover; transition: filter .6s var(--ease), transform .8s var(--ease); }
.card:hover .card-img { filter: blur(6px) brightness(.8); transform: scale(1.03); }
.card-mask { position: absolute; left: -20px; right: -20px; top: -10px; height: calc(100% + 40px); background: var(--black); pointer-events: none; transform: translateY(calc(100% + 10px)); }
.card-info { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card-title { font: 400 32px/1.2 var(--body); letter-spacing: -.02em; }
.card-category { font: 300 16px/1.2 var(--body); letter-spacing: -.02em; color: var(--accent); text-align: right; }
.card-big { flex-direction: row; align-items: flex-end; width: 100%; }
.card-big .card-media { width: 66.9%; height: 500px; flex: none; }
.card-big .card-info { flex: 1; padding-bottom: 0; }
.card-small { width: 440px; }
.card-small .card-media { height: 500px; }
.theme-light .card-mask, .contact .card-mask { background: var(--light); }
.testimonials .card-mask, .pt-other .card-mask { background: var(--dark); }
.pt-other .card-mask { background: var(--white); }

.projects-list { padding: 140px 0 120px; }
.list-cards { margin-top: 64px; display: flex; flex-direction: column; gap: 64px; }
.card-list { flex-direction: row; align-items: flex-end; width: 100%; }
.card-list .card-media { width: 65.8%; height: 500px; flex: none; }
.card-list .card-info { flex: 1; }

/* ---------- skills ---------- */

.skills { padding: 140px 0; }
.skill-list { margin-top: 64px; }
.skill { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 192px; padding: 24px 16px; border-bottom: 1px solid rgba(0, 0, 0, .4); isolation: isolate; }
.skill-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--white); z-index: -1; transition: height .6s var(--ease); }
.skill:hover .skill-fill { height: 100%; }
.skill-title { display: grid; overflow: hidden; height: 62px; font: 500 48px/1.3 var(--body); letter-spacing: -.04em; text-transform: uppercase; }
.skill-title > span { grid-area: 1 / 1; transition: transform .6s var(--ease); }
.skill-title > span + span { color: var(--accent); transform: translateY(100%); }
.skill:hover .skill-title > span { transform: translateY(-100%); }
.skill:hover .skill-title > span + span { transform: translateY(0); }
.skill-side { width: 272px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.skill-text { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tag { display: inline-flex; align-items: center; height: 31px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(0, 0, 0, .4); font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.tag-dark { background: var(--black); border-color: var(--black); color: var(--white); }
.skill-preview { position: fixed; left: 0; top: 0; z-index: 40; width: 240px; height: 300px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .3s, transform .5s var(--ease); }
.skill-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.skill.is-hover .skill-preview { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- process ---------- */

.process { padding: 140px 0; }
.process-grid { margin: 20px 20px 0 auto; width: 868px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.process-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 350px; padding: 16px; border-radius: 4px; background: var(--white); overflow: hidden; isolation: isolate; transition: box-shadow .8s var(--out); }
.process-card.is-active { box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .55); }
/* The dark side of a card is a copy of it (site.js), cut by a circle that grows from where the pointer came in and
   shrinks back to where it left; inside it, an orange light and a dot grid follow the pointer. */
.process-ink { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: inherit; background: var(--black); color: var(--white); pointer-events: none; isolation: isolate; clip-path: circle(0 at var(--ox, 48px) var(--oy, 48px)); transition: clip-path .8s var(--out); }
.process-card.is-active .process-ink { clip-path: circle(150% at var(--ox, 48px) var(--oy, 48px)); }
.process-ink::before, .process-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.process-ink::before { background: radial-gradient(440px circle at var(--mx, 30%) var(--my, 22%), rgba(252, 114, 0, .3), transparent 60%); }
.process-ink::after { background: radial-gradient(circle, rgba(255, 255, 255, .3) 1px, transparent 1.6px) 8px 8px / 16px 16px; -webkit-mask: radial-gradient(260px circle at var(--mx, 30%) var(--my, 22%), #000, transparent 72%); mask: radial-gradient(260px circle at var(--mx, 30%) var(--my, 22%), #000, transparent 72%); }
.process-edge { position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 22%), rgba(252, 114, 0, .95), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.process-ink .process-icon { translate: calc(var(--dx, 0) * 6px) calc(var(--dy, 0) * 6px); transition: translate .6s var(--out); }
.process-card .process-ink p { color: rgba(255, 255, 255, .62); }
.process-icon { display: block; width: 64px; height: 64px; }
.process-icon svg { width: 64px; height: 64px; overflow: visible; }
.process-icon .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease); }
.process-card.is-in .process-icon .d, .no-js .process-icon .d { stroke-dashoffset: 0; }
.process-text { display: flex; flex-direction: column; gap: 9px; }
.process-card h3 { font: 400 32px/1.2 var(--body); letter-spacing: -.02em; text-transform: uppercase; }
.process-card p { font: 300 16px/1.4 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }

/* ---------- process icons ----------
   Only the copy on the dark side moves: while the card is active (is-active) the parts change state, and while it is
   live (active, or still closing) the loops run, so nothing jumps back while the circle shrinks. */
.pi .dim { opacity: .4; }
.pi-trail, .pi-blip, .pi-core, .pi-glint { fill: currentColor; stroke: none; opacity: 0; transition: opacity 1s var(--ease) 1s; }
.process-card.is-in .pi :is(.pi-trail, .pi-blip, .pi-core, .pi-glint), .no-js .pi :is(.pi-trail, .pi-blip, .pi-core, .pi-glint) { opacity: 1; }
.pi-ping { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pi-sweep { transform-box: view-box; transform-origin: 32px 32px; }
.is-live .process-ink .pi-sweep { animation: pi-spin 2.6s linear infinite; }
.is-live .process-ink .pi-blip { animation: pi-blip 2.6s linear calc(var(--t) - .1s) infinite backwards; }
.is-live .process-ink .pi-ping { animation: pi-ping 2.6s var(--out) calc(var(--t) - .1s) infinite backwards; }
@keyframes pi-spin { to { transform: rotate(360deg); } }
@keyframes pi-blip { 0%, 100% { fill: currentColor; opacity: .45; } 4% { fill: var(--accent); opacity: 1; } 45% { fill: var(--accent); opacity: .45; } }
@keyframes pi-ping { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(3.6); } }

.pi-node { fill: var(--accent); fill-opacity: 0; }
.pi-signal { stroke: var(--accent); stroke-width: 3; stroke-dasharray: .07 2; stroke-dashoffset: .07; opacity: 0; }
.pi-reticle, .pi-core { transform-box: view-box; transform-origin: 52px 14px; }
.is-live .process-ink .pi-signal { opacity: 1; animation: pi-signal 2.4s linear infinite; }
.is-live .process-ink .pi-node { animation: pi-node 2.4s linear calc(var(--t) - .07s) infinite backwards; }
.is-live .process-ink .pi-reticle { animation: pi-lock 2.4s var(--out) infinite; }
.is-live .process-ink .pi-core { animation: pi-core 2.4s var(--out) infinite; }
@keyframes pi-signal { 0% { stroke-dashoffset: .07; } 70%, 100% { stroke-dashoffset: -1; } }
@keyframes pi-node { 0%, 100% { fill-opacity: 0; } 3% { fill-opacity: 1; } 35% { fill-opacity: 0; } }
@keyframes pi-lock { 0%, 62% { transform: rotate(0) scale(1); } 70% { transform: rotate(50deg) scale(.8); } 84%, 100% { transform: rotate(90deg) scale(1); } }
@keyframes pi-core { 0%, 62%, 100% { fill: currentColor; transform: scale(1); } 68% { fill: var(--accent); transform: scale(2.2); } 86% { fill: var(--accent); transform: scale(1.2); } }

.pi-layer { transition: transform .8s var(--out), color .5s var(--ease); }
.is-active .process-ink .pi-layer { transform: translateY(calc(var(--k) * 6px)); }
.is-active .process-ink .pi-mid { color: var(--accent); }
.pi-inner { stroke: var(--accent); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--out) .25s, opacity .3s .25s; }
.is-active .process-ink .pi-inner { stroke-dashoffset: 0; opacity: 1; }
.is-live .process-ink .pi-float { animation: pi-float 3s ease-in-out .8s infinite; }
@keyframes pi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

.pi-bracket, .pi-slash { transition: transform .7s var(--out), opacity .4s var(--ease); }
.pi-slash { transform-box: fill-box; transform-origin: center; }
.is-active .process-ink .pi-bracket { transform: translateX(calc(var(--k) * 4px)); }
.is-active .process-ink .pi-slash { transform: rotate(45deg) scale(.2); opacity: 0; }
.pi-check { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .7s var(--out) .15s, opacity .2s .15s; }
.is-active .process-ink .pi-check { stroke-dashoffset: 0; opacity: 1; }

.pi-scan { stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.is-live .process-ink .pi-iris { animation: pi-look 4s var(--ease) infinite; }
.is-live .process-ink .pi-scan { animation: pi-scan 2.2s ease-in-out infinite; }
.is-active .process-ink .pi-iris { color: var(--accent); }
@keyframes pi-look { 0%, 100% { transform: translate(0, 0); } 20%, 35% { transform: translate(-8px, 1px); } 55%, 70% { transform: translate(8px, -1px); } 85% { transform: translate(0, 0); } }
@keyframes pi-scan { 0% { transform: translateY(-22px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .process-ink .pi * { animation: none !important; }
}

/* ---------- tabs (background) ---------- */

.tabs { padding: 140px 0; }
.tabs-body { margin-top: 64px; display: grid; grid-template-columns: 312px 302px 1fr; column-gap: 32px; align-items: start; }
.tabs-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tabs-nav button { font: 600 24px/1.4 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .4); transition: color .3s; text-align: left; }
.tabs-nav button.active, .tabs-nav button:hover { color: var(--black); }
.tabs-image { height: 405px; border-radius: 4px; overflow: hidden; }
.tabs-body.no-image { grid-template-columns: 312px 1fr; }
.tabs-image img, .tabs-image .img-missing { width: 100%; height: 100%; object-fit: cover; }
.tabs-panels { position: relative; margin-left: 20px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tab-in .6s var(--ease); }
@keyframes tab-in { from { opacity: 0; transform: translateY(20px); } }
.tab-row { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 135px; padding: 16px 16px 16px 32px; border-bottom: 1px solid rgba(0, 0, 0, .4); isolation: isolate; }
.tab-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--white); z-index: -1; transition: height .6s var(--ease); }
.tab-row:hover .tab-fill { height: 100%; }
.tab-row h3 { font: 600 20px/1.6 var(--body); letter-spacing: -.02em; text-transform: uppercase; }
.tab-row-meta { display: flex; justify-content: space-between; gap: 16px; font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.tab-period { font-weight: 300; white-space: nowrap; }

/* ---------- testimonials ---------- */

.testimonials { padding: 140px 0; background: var(--dark); color: var(--white); }
.quotes { position: relative; margin-top: 64px; min-height: 500px; }
.quote { display: none; grid-template-columns: 749px 1fr 413px; grid-template-rows: auto 1fr; column-gap: 32px; min-height: 500px; }
.quote.active { display: grid; animation: tab-in .6s var(--ease); }
.quote-person { grid-column: 1; grid-row: 1; }
.quote-person h3 { font: 400 32px/1.2 var(--body); letter-spacing: -.02em; }
.quote-person p { margin-top: 9px; font: 300 16px/1.2 var(--body); color: rgba(255, 255, 255, .6); }
.quote blockquote { grid-column: 1; grid-row: 2; align-self: end; font: 400 32px/1.2 var(--body); letter-spacing: -.02em; }
.quote-media { grid-column: 3; grid-row: 1 / 3; position: relative; overflow: hidden; height: 500px; }
.quote-media img, .quote-media .img-missing { width: 100%; height: 100%; object-fit: cover; }
.quote-arrows { position: absolute; left: calc(749px + 83px); bottom: 0; display: flex; gap: 8px; }
.quote-arrows button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: var(--gray); color: var(--white); transition: background .3s; }
.quote-arrows button:hover { background: var(--accent); }
.quote-arrows svg { width: 20px; height: 20px; }

/* ---------- FAQ ---------- */

.faq { padding: 140px 0; }
.faq-list { margin: 64px 0 0 auto; width: 908px; max-width: 100%; }
.faq-item { background: var(--white); border-bottom: 1px solid rgba(0, 0, 0, .4); }
.faq-item summary { display: flex; align-items: center; gap: 16px; min-height: 77px; padding: 12px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-number { font: 500 18px/1.6 var(--display); letter-spacing: -.02em; color: var(--accent); }
.faq-question { flex: 1; font: 400 18px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .8); }
.faq-icon { position: relative; width: 24px; height: 24px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 2px; background: var(--accent); transition: transform .5s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-item[open] .faq-icon { transform: rotate(180deg); transition: transform .5s var(--ease); }
.faq-answer { overflow: hidden; }
.faq-answer p { padding: 0 52px 20px 50px; font: 300 16px/1.4 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }

/* ---------- contact ---------- */

.contact { padding: 140px 0; }
.contact-body { margin-top: 64px; display: grid; grid-template-columns: 404px 446px 446px; justify-content: space-between; column-gap: 16px; align-items: stretch; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-title { font: 600 64px/1.2 var(--display); letter-spacing: -.04em; margin-bottom: 8px; }
.field { display: block; border-bottom: 1px solid rgba(0, 0, 0, .4); }
.field input, .field textarea { width: 100%; padding: 16px 12px; border: 0; background: transparent; font: 400 14px/1.2 var(--body); color: var(--black); outline: none; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(0, 0, 0, .6); }
.field:focus-within { border-color: var(--black); }
.contact-form .btn { margin-top: 0; font-weight: 300; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.2em; font: 400 14px/1.2 var(--body); color: rgba(0, 0, 0, .6); }
.form-status.error { color: #b3261e; }
.contact-media { position: relative; overflow: hidden; height: 381px; }
.contact-body.no-media { grid-template-columns: 404px 446px; }
.contact-media img, .contact-media .img-missing { width: 100%; height: 100%; object-fit: cover; }
.contact-details { display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; }
.contact-detail h4 { font: 500 18px/1.6 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.contact-line { display: block; height: 1px; margin: 6px 0; background: rgba(0, 0, 0, .4); transform-origin: left; }
.contact-detail p { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }

.contact-big { padding: 140px 0; }
.contact-big-top { display: grid; grid-template-columns: 640px 640px; justify-content: space-between; gap: 32px; }
.contact-big-top .contact-media { height: 500px; }
.contact-big-body { margin-top: 64px; display: grid; grid-template-columns: 382px 866px; justify-content: space-between; gap: 32px; align-items: start; }
.contact-big-text h2 { font: 500 48px/1.3 var(--body); letter-spacing: -.04em; }
.contact-big-text p { margin-top: 10px; font: 300 16px/1.4 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .8); }
.contact-big-card { min-height: 564px; background: rgba(255, 255, 255, .8); border-radius: 4px; padding: 32px; }
.contact-big-card .btn { width: 272px; }
.contact-big-body.no-media { margin-top: 0; }
.contact-big-text .contact-details { margin-top: 64px; justify-content: flex-start; }

/* ---------- team: the people behind the pixels ---------- */

.team { padding: 140px 0; }
.team-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 32px; align-items: start; }
.team-member { min-width: 0; }
.team-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: #e2e2e2; }
.team-stage { position: absolute; inset: 0; opacity: 0; }
.team-stage[data-stage="0"] { opacity: 1; }
.team-stage img, .team-stage .img-missing { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
/* The pixel steps keep hard square pixels instead of being smoothed when scaled. */
.team-stage[data-stage="0"] img, .team-stage[data-stage="1"] img { image-rendering: pixelated; }
.team-text { margin-top: 24px; }
.team-index { font: 500 13px/1 var(--body); letter-spacing: .06em; color: var(--accent); }
.team-name { margin-top: 12px; font: 600 clamp(28px, 2.6vw, 42px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.team-role { margin-top: 10px; font: 500 16px/1.35 var(--body); letter-spacing: -.01em; }
.team-bio { margin-top: 16px; display: grid; gap: 10px; }
.team-bio p { font: 300 16px/1.5 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .7); }
.team-skills { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.team-skills li { padding: 7px 11px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 999px; font: 400 13px/1 var(--body); }
@media (max-width: 1199px) {
  .team-grid { gap: 20px; }
}
/* Phones: one under another. */
@media (max-width: 809px) {
  .team { padding: 60px 0; }
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .team-name { font-size: 34px; }
}

/* ---------- gallery ---------- */

.gallery { padding: 140px 0; background: var(--dark); color: var(--white); overflow: hidden; }
.gallery-rows { display: flex; flex-direction: column; gap: 16px; }
.gallery-row { position: relative; display: flex; gap: 16px; width: max-content; will-change: transform; }
.gallery-img { width: 360px; height: 190px; border-radius: 4px; overflow: hidden; flex: none; }
.gallery-img img, .gallery-img .img-missing { width: 100%; height: 100%; object-fit: cover; }
.gallery-word { min-width: 360px; padding: 0 32px; flex: none; display: grid; place-items: center; white-space: nowrap; font: 600 64px/1.2 var(--display); letter-spacing: -.04em; }

/* ---------- page title & image reveal ---------- */

.page-title { padding: 160px 0 0; }
.image-reveal { height: 2500px; }
.image-reveal-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
/* Centred on its own: once it grows past the screen it overflows evenly on every side instead of drifting right. */
.image-reveal-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48.6vw; height: 27.8vw; overflow: hidden; will-change: width, height; }
.image-reveal-frame img, .image-reveal-frame .img-missing { width: 100%; height: 100%; object-fit: cover; }

.text-block { padding: 140px 0; }
.text-block-body { display: grid; grid-template-columns: 1fr 46%; gap: 32px; }
.text-block h2 { font: 500 48px/1.3 var(--body); letter-spacing: -.04em; }
.text-block-content { display: flex; flex-direction: column; gap: 16px; font: 300 16px/1.4 var(--body); color: rgba(0, 0, 0, .6); }
.text-block-content > div { display: flex; flex-direction: column; gap: 10px; }

/* ---------- project page ---------- */

.pt-hero { position: relative; height: 675px; overflow: hidden; background: var(--dark); }
.pt-hero-image { width: 100%; height: 100%; }
.pt-hero-image img, .pt-hero-image .img-missing { width: 100%; height: 100%; object-fit: cover; }
/* Short words around the picture (e.g. the hospital's modules): a row under it on small screens, two tidy columns beside it on wide ones. */
.pt-hero-tags { position: absolute; inset: 0; z-index: 1; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 8px; margin: 0; padding: 0 16px 24px; list-style: none; pointer-events: none; }
.pt-tag { padding: .41em .76em; border-radius: 99px; background: rgba(255, 255, 255, .15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 500 13px/1 var(--body); letter-spacing: -.01em; white-space: nowrap; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pt-tag { animation: pt-tag-in .9s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .09s); }
}
@keyframes pt-tag-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 1100px) {
  .pt-hero-tags { display: grid; grid-template-columns: 1fr 1fr; align-content: space-evenly; justify-content: stretch; gap: 0 24px; padding: 90px 3vw 120px; }
  .pt-tag { justify-self: start; margin-inline: var(--in, 0); font-size: clamp(14px, 1.45vw, 30px); }
  .pt-tag:nth-child(even) { justify-self: end; }
  .pt-tag:nth-child(-n+2) { --in: 3.5vw; }
  .pt-tag:nth-child(n+3):nth-child(-n+4) { --in: 0vw; }
  .pt-tag:nth-child(n+5):nth-child(-n+6) { --in: 5vw; }
  .pt-tag:nth-child(n+7) { --in: 2vw; }
}
.pt-head { padding: 64px 0 64px; }
.pt-head .sec-title-row { min-height: 0; }
.pt-main { padding-bottom: 64px; }
.pt-columns { display: grid; grid-template-columns: 440px 1fr; gap: 64px; align-items: start; }
.pt-card { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 4px; background: var(--white); }
.pt-card h2 { font: 400 32px/1.2 var(--body); letter-spacing: -.02em; }
.pt-card dl { display: grid; grid-template-columns: minmax(100px, max-content) 1fr; column-gap: 12px; }
/* Longer labels (German "Leistungen") widen the label column for every row, so values stay aligned. */
.pt-card dl > div { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(100px, max-content) 1fr; grid-template-columns: subgrid; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.pt-card dl > div:first-child { padding-top: 0; }
.pt-card dt { font: 500 18px/1.6 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.pt-card dd { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.pt-card dd a { color: var(--black); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.pt-card dd a:hover { text-decoration-color: var(--accent); }
/* A site that is not public yet: a quiet pill with a pulsing dot instead of the button. */
.pt-soon { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px dashed rgba(0, 0, 0, .25); font: 500 15px/1.2 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .7); }
.pt-soon span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pt-soon 1.8s var(--ease) infinite; }
@keyframes pt-soon { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.pt-body a { color: var(--black); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.pt-content { display: flex; flex-direction: column; gap: 60px; }
.pt-block h2, .pt-impact h2 { font: 500 48px/1.3 var(--body); letter-spacing: -.04em; text-transform: uppercase; }
.pt-body, .pt-body > div, .pt-impact-text > div { display: flex; flex-direction: column; gap: 20px; }
.pt-body { margin-top: 24px; }
.pt-block p, .pt-impact p:not(.pt-stat-value):not(.pt-stat-text) { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.pt-section { padding: 32px var(--pad); }
.pt-images { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.pt-image { position: relative; height: 640px; border-radius: 4px; overflow: hidden; }
.pt-image:nth-child(2) { margin-top: 93px; }
.pt-image img, .pt-image .img-missing { width: 100%; height: 100%; object-fit: cover; }
.pt-impact { display: grid; grid-template-columns: 578px 1fr; column-gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.pt-impact-text > div { margin-top: 24px; }
.pt-stats { margin-left: auto; width: 633px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 33px; align-content: start; }
.pt-stat { display: flex; flex-direction: column; gap: 8px; }
.pt-stat-value { font: 600 64px/1.2 var(--display); letter-spacing: -.04em; }
.pt-stat .stat-line { display: none; }
.pt-stat-text { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .6); }
.pt-wide { padding-top: 32px; padding-bottom: 32px; }
.pt-wide-image { height: 810px; border-radius: 4px; overflow: hidden; }
.pt-wide-image img, .pt-wide-image .img-missing { width: 100%; height: 100%; object-fit: cover; }
.pt-rest { padding-bottom: 100px; }
.pt-other { padding: 160px 0; background: var(--white); }
.pt-other .cards-row { margin-top: 64px; }

/* 404: "4 ◉ 4", the zero is the brand's live 3D eye searching for the page. */
.not-found { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 150px 0 90px; overflow: hidden; text-align: center; background: var(--dark); color: var(--white); }
.not-found::before { content: ""; position: absolute; left: 50%; top: 42%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--shape-glow, #1c9bff) 14%, transparent), transparent); pointer-events: none; }
.not-found .container { position: relative; display: flex; flex-direction: column; align-items: center; }
.nf-code { display: flex; align-items: center; justify-content: center; font: 600 clamp(150px, 23vw, 330px)/.8 var(--display); letter-spacing: -.05em; }
.nf-code > span { position: relative; z-index: 1; }
/* The eye takes the zero's place: about a digit tall, its glow fading into the page behind the fours. */
.nf-eye { position: relative; flex: none; width: .95em; height: .8em; margin: 0 .01em; overflow: visible; background: none; color: var(--white); }
.nf-eye .shape-canvas { position: absolute; left: -.225em; top: -.15em; width: 1.4em; height: 1.1em; -webkit-mask: radial-gradient(closest-side, #000 68%, transparent); mask: radial-gradient(closest-side, #000 68%, transparent); }
.nf-eye-fallback { position: absolute; inset: .06em -.04em; display: grid; place-items: center; transition: opacity .8s ease; }
.nf-eye-fallback svg { width: 100%; height: 100%; }
.nf-eye.is-3d .nf-eye-fallback { opacity: 0; }
.not-found h1 { margin-top: 40px; font: 500 clamp(30px, 3.6vw, 52px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.not-found p { max-width: 540px; margin-top: 16px; font: 300 18px/1.55 var(--body); letter-spacing: -.01em; color: rgba(255, 255, 255, .66); text-wrap: pretty; }
.nf-actions { margin-top: 34px; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 44px; }
.nf-links span { margin-right: 4px; font: 400 14px/1 var(--body); color: rgba(255, 255, 255, .45); }
.nf-links a { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font: 400 14px/1 var(--body); color: var(--white); transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.nf-links a:hover, .nf-links a:focus-visible { border-color: var(--accent); background: rgba(255, 255, 255, .05); }
/* The page comes in by itself (it may not scroll, so the scroll-triggered animations would never start). */
.nf-in { animation: nf-in .9s var(--out) both; animation-delay: calc(.15s + var(--i, 0) * .09s); }
@keyframes nf-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nf-in { animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- footer ---------- */

.footer { padding-top: 80px; height: 900px; background: var(--dark); color: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.ticker { overflow: hidden; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); user-select: none; touch-action: pan-y; }
.ticker:active { cursor: grabbing; }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-item { display: flex; align-items: center; gap: 32px; padding-right: 32px; font: 600 164px/1.1 var(--display); letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; }
.ticker-dot { width: 24px; height: 24px; border-radius: 20px; background: var(--accent); flex: none; }
.footer-body { margin-top: 91px; display: flex; justify-content: space-between; gap: 32px; }
.footer-follow h3 { font: 400 32px/1.2 var(--body); letter-spacing: -.02em; text-transform: uppercase; }
.footer-follow ul { margin-top: 30px; display: flex; flex-direction: column; gap: 19px; width: 157px; }
.footer-follow .roll-link { font: 400 16px/1.2 var(--body); letter-spacing: -.02em; color: rgba(255, 255, 255, .8); }
.footer-follow .roll { flex: 1; }
.footer-menu { width: 523px; margin-right: 55px; display: flex; flex-direction: column; }
.footer-menu li { position: relative; }
.footer-menu a { position: relative; padding: 8px 0 7px; overflow: hidden; font: 600 20px/1.6 var(--body); letter-spacing: -.02em; text-transform: uppercase; border-bottom: 1px solid var(--gray); }
.footer-number { font: 500 18px/1.6 var(--display); letter-spacing: -.02em; color: rgba(255, 255, 255, .6); }
.footer-number > span + span { color: rgba(255, 255, 255, .6) !important; }
.footer-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--white); transform: translateX(-101%); transition: transform .6s var(--ease); }
.footer-menu a:hover .footer-line { transform: none; }
.footer-wordmark { margin-top: auto; margin-left: -2.9%; width: 105.8%; line-height: 0; }
.footer-wordmark .fit-text { font-weight: 600; font-size: 20vw; margin-bottom: -.14em; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, 0) 92%); -webkit-background-clip: text; background-clip: text; }

/* ---------- language ----------
   Large screens: in the header, left of "Menu", in the same style (a line above, the same letters); the current
   language is full strength with an orange dot. Phones: inside the open menu, with the languages' own names. */

.nav-end { display: flex; align-items: flex-start; gap: 44px; }
.nav-langs { display: flex; flex-direction: column; gap: 6px; }
.nav-langs-row { display: flex; align-items: center; gap: 18px; height: 28px; }
.nav-langs a { position: relative; font: 400 16px/1.2 var(--body); text-transform: uppercase; opacity: .45; transition: opacity .3s var(--ease); }
.nav-langs a:hover, .nav-langs a[aria-current] { opacity: 1; }
.nav-langs a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.menu-langs { display: none; }

/* ---------- appear animations (the JS adds .is-in; without JS everything is visible) ---------- */

.js [data-anim="fade-up"], .js [data-anim="title"] { opacity: 0; transform: translateY(70px); }
.js [data-anim="line"] { transform: scaleX(0); transform-origin: left; }
.js [data-anim="zoom"] img { transform: scale(1.1); }
.js [data-anim="reveal"] .card-mask { transform: translateY(0); }
.js [data-appear] { opacity: .001; }
.is-in[data-anim="line"] { transform: none; }
.js .is-in[data-anim="reveal"] .card-mask { transform: translateY(calc(100% + 10px)); transition: transform 1.2s var(--ease); }
.is-in[data-anim="zoom"] img { transform: none; transition: transform 1.2s var(--ease); }
.is-preview [data-anim], .is-preview [data-appear] { opacity: 1 !important; transform: none !important; }
.is-preview [data-anim] .card-mask { transform: translateY(calc(100% + 10px)) !important; }
[data-edit] { cursor: pointer; }
.is-preview [data-edit]:hover { outline: 2px dashed var(--accent); outline-offset: 3px; }
.is-preview .edit-flash { outline: 2px solid var(--accent) !important; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-appear] { opacity: 1 !important; transform: none !important; }
  .js [data-anim] .card-mask { transform: translateY(110%) !important; }
}

/* ---------- tablet (810–1199px) ---------- */

@media (max-width: 1199.98px) {
  .sec-number, .small-head { font-size: 16px; letter-spacing: -.02em; }
  .sec-title { font-size: 64px; }
  .sec-title-row { min-height: 58px; }
  .sec-intro { width: 300px; }
  .about, .projects, .skills, .process, .tabs, .testimonials, .faq, .contact { padding: 100px 0; }
  .gallery { padding: 120px 0; }
  .hero-intro { width: 261px; }
  .hero-labels p { width: 25%; }
  .about-heading { width: 100%; font-size: 40px; }
  .about-text { width: 50%; }
  .about-bottom { align-items: flex-start; }
  .stats { width: 46%; grid-template-columns: 1fr; row-gap: 24px; }
  .stat, .stat:nth-child(n + 3) { min-height: 0; justify-content: flex-start; }
  .about-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .card-big .card-media { width: 66%; height: 500px; }
  .card-small { width: calc(50% - 8px); }
  .card-title { font-size: 18px; }
  .skill-title { height: auto; font-size: 32px; }
  .skill-title > span + span { display: none; }
  .process-grid { width: 72%; margin-right: 0; gap: 16px; }
  .process-card { height: 320px; }
  .tabs-body { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .tabs-nav { grid-column: 1 / -1; flex-direction: row; gap: 32px; }
  .tabs-nav button { font-size: 20px; }
  .tabs-panels { margin-left: 0; }
  .quote { grid-template-columns: 1fr 320px; }
  .quote-media { grid-column: 2; }
  .quote-arrows { left: 0; bottom: -64px; }
  .quotes { margin-bottom: 64px; }
  .faq-list { width: 100%; }
  .contact-body { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .contact-details { grid-column: 1 / -1; }
  .contact-body.no-media { grid-template-columns: 1fr 1fr; }
  .contact-body.no-media .contact-details { grid-column: auto; }
  .tabs-body.no-image { grid-template-columns: 1fr; }
  .form-title { font-size: 48px; }
  .menu-links { --row: min(72px, calc(var(--menu-room) / var(--n, 4) - 19px)); }
  .menu-inner { grid-template-columns: 1fr 260px; }
  .menu-images { width: 260px; height: min(320px, var(--menu-room)); }
  .footer { height: 800px; }
  .ticker-item { font-size: 120px; }
  .footer-menu { width: 50%; margin-right: 0; }
  .pt-columns { grid-template-columns: 320px 1fr; gap: 32px; }
  .pt-block h2, .pt-impact h2 { font-size: 32px; }
  .pt-impact { grid-template-columns: 1fr; row-gap: 32px; }
  .pt-stats { margin-left: 0; width: 100%; }
  .pt-image { height: 480px; }
  .pt-wide-image { height: 520px; }
  .card-list .card-media { width: 66%; }
  .contact-big-top { grid-template-columns: 1fr 1fr; }
  .contact-big-top .contact-media { height: 380px; }
  .contact-big-body { grid-template-columns: 1fr; }
}

/* ---------- phone (≤809px) ---------- */

@media (max-width: 809.98px) {
  :root { --pad: 24px; }
  .nav { height: 70px; }
  .brand { font-size: 16px; }
  .brand-by { font-size: 8px; letter-spacing: .14em; }
  .menu-toggle { width: auto; min-width: 85px; }
  .menu-toggle-label { flex-shrink: 0; }
  .menu-toggle-row { gap: 16px; }
  .menu-toggle-label { font-size: 14px; height: 17px; }
  .sec-number, .small-head { font-size: 16px; line-height: 1.2; letter-spacing: 0; }
  .sec-title { font-size: 32px; }
  .sec-title-row { flex-direction: column; min-height: 0; gap: 8px; }
  .sec-head-button { margin-left: 0; order: 5; }
  .sec-head { position: relative; }
  .sec-intro { width: 100%; margin-left: 0; letter-spacing: 0; }
  .about, .projects, .skills, .process, .tabs, .testimonials, .faq, .contact, .projects-list { padding: 60px 0; }
  .gallery { padding: 140px 0; }
  .cards, .skill-list, .tabs-body, .quotes, .faq-list, .contact-body, .list-cards { margin-top: 64px; }

  .hero-content { gap: 64px; padding: 0 var(--pad) var(--pad); }
  .hero-bottom { flex-direction: column; align-items: flex-end; gap: 32px; min-height: 0; }
  .hero-intro { width: 100%; letter-spacing: 0; }
  .hero-side { flex-direction: column; align-items: flex-end; gap: 16px; }
  .hero .btn { font-size: 14px; }
  .hero-follow { flex-direction: row; width: auto; gap: 12px; }
  .hero-follow-label { writing-mode: horizontal-tb; transform: none; }
  .hero-follow-line { width: 32px; height: 1px; margin: 0; }
  .hero-social { flex-direction: row; }
  .hero-labels { flex-direction: column; gap: 15px; font-size: 14px; }
  .hero-labels p { width: 100%; }

  .about-body { gap: 64px; margin-top: 32px; }
  .about-top { gap: 24px; }
  .about-heading { width: 80%; font-size: 26px; line-height: 1.2; }
  .about-text { width: 100%; }
  .about-paragraphs p { letter-spacing: 0; }
  .about-bottom { flex-direction: column-reverse; gap: 64px; }
  .about-media { width: 100%; max-width: none; }
  .stats { width: 100%; column-gap: 32px; }
  .stat { min-height: 0; }
  .stat-value { font-size: 48px; }
  .stat-text { font-size: 14px; }
  .about-services { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-service-title { font-size: 24px; }

  .btn { font-size: 14px; }
  .cards { gap: 64px; }
  .cards-row, .cards-row-pair { flex-direction: column; gap: 64px; }
  .card-big { flex-direction: column; align-items: stretch; }
  .card-big .card-media, .card-small .card-media, .card-small { width: 100%; height: 500px; }
  .card-small { height: auto; }
  .card-title { font-size: 24px; }
  .card-category { font-size: 14px; }
  .card-list { flex-direction: column; align-items: stretch; }
  .card-list .card-media { width: 100%; height: 500px; }

  .skill { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 12px; min-height: 0; }
  .skill-title { font-size: 24px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
  .skill-side { width: 100%; }
  .skill-text, .tag { font-size: 14px; }
  .skill-tags { padding-left: 12px; }
  .skill-preview { display: none; }

  .process-grid { width: 100%; grid-template-columns: 1fr; gap: 36px; margin-top: 64px; }
  .process-card { height: 350px; }
  .process-card { width: 90.6%; justify-self: center; padding: 16px; }
  .process-card + .process-card { width: 88.3%; }
  .process-card h3 { font-size: 24px; }

  .tabs-body { grid-template-columns: 1fr; margin-top: 64px; }
  .tabs-nav { justify-content: space-between; gap: 12px; }
  .tabs-nav button { font-size: 16px; }
  .tabs-image { height: 323px; }
  .tab-row { padding: 16px; min-height: 0; }
  .tab-row h3 { font-size: 18px; }
  .tab-row-meta { flex-direction: column; gap: 12px; font-size: 14px; }
  .tab-period { align-self: flex-end; }

  .quote.active { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
  .quote-media { order: -1; height: 360px; }
  .quote-person h3 { font-size: 24px; }
  .quote-person p { font-size: 14px; }
  .quote blockquote { font-size: 24px; margin-top: 16px; }
  .quote-arrows { position: static; margin-top: 32px; }
  .quotes { margin-bottom: 0; }

  .faq-item summary { min-height: 72px; gap: 16px; }
  .faq-number, .faq-question { font-size: 16px; }
  .faq-answer p { padding: 0 12px 16px 48px; }

  .contact-body { display: flex; flex-direction: column; gap: 32px; }
  .contact-media { order: -2; height: 428px; }
  .contact-details { order: -1; gap: 24px; }
  .contact-detail h4 { font-size: 16px; line-height: 1.2; }
  .contact-detail p { font-size: 14px; }
  .form-title { font-size: 32px; line-height: 1.2; margin-bottom: 20px; }

  .gallery-img { width: 360px; }
  .gallery-word { min-width: 300px; padding: 0 24px; }
  .gallery-word { font-size: 36px; }

  .page-title { padding: 120px 0 40px; }
  .image-reveal { height: 140vh; }
  .image-reveal-frame { width: 70vw; height: 40vw; }
  .text-block-body { grid-template-columns: 1fr; }
  .text-block h2 { font-size: 26px; line-height: 1.2; }

  .menu-inner { display: flex; flex-direction: column; padding: clamp(110px, calc(100svh - 540px), 300px) var(--pad) 24px; gap: 0; }
  .menu-links { gap: clamp(22px, 4svh, 34px); }
  .menu-link-text { font: 500 20px/1.3 var(--body); letter-spacing: -.04em; height: 26px; }
  .menu-link-number { font-size: 16px; height: 19px; }
  .menu-images { display: none; }
  .menu-social { align-self: stretch; margin-top: 28px; gap: 12px 32px; }
  .nav-langs { display: none; }
  .menu-langs { display: flex; gap: 26px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .35); }
  .menu-langs a { position: relative; font: 400 14px/1.2 var(--body); letter-spacing: .02em; text-transform: uppercase; color: var(--white); opacity: .45; transition: opacity .3s var(--ease); }
  .menu-langs a[aria-current] { opacity: 1; }
  .menu-langs a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
  .menu-social .roll-link { gap: 8px; font-size: 15px; }

  .footer { height: 800px; padding-top: 105px; }
  .ticker-item { font-size: 64px; gap: 24px; padding-right: 24px; }
  .ticker-dot { width: 16px; height: 16px; }
  .footer-body { flex-direction: column-reverse; margin-top: 85px; gap: 64px; }
  .footer-menu { width: 100%; }
  .footer-menu a { font-size: 18px; }
  .footer-number { font-size: 16px; }
  .footer-follow h3 { font-size: 24px; }
  .footer-follow ul { width: 100%; margin-top: 29px; gap: 21px; }
  .footer-follow .roll-link { font-size: 14px; }

  .pt-hero { height: 675px; }
  .pt-head { padding: 64px 0 32px; }
  .pt-columns { grid-template-columns: 1fr; gap: 64px; }
  .pt-card { position: static; }
  .pt-card h2 { font-size: 24px; }
  .pt-card dt { font-size: 16px; line-height: 1.2; }
  .pt-card dd { font-size: 14px; }
  .pt-block h2, .pt-impact h2 { font-size: 20px; line-height: 1.2; }
  .pt-block p, .pt-impact p:not(.pt-stat-value):not(.pt-stat-text) { font-size: 14px; }
  .pt-images { grid-template-columns: 1fr; }
  .pt-image { height: 350px; }
  .pt-image:nth-child(2) { margin-top: 0; }
  .pt-stat-value { font-size: 32px; }
  .pt-stat-text { font-size: 14px; }
  .pt-wide-image { height: 630px; }
  .pt-other { padding: 60px 0; }
  .contact-big { padding: 60px 0; }
  .contact-big-top { grid-template-columns: 1fr; }
  .contact-big-top .contact-media { height: 428px; }
  .contact-big-text h2 { font-size: 26px; line-height: 1.2; }
  .contact-big-card .btn { width: 100%; }
  .contact-big-card { padding: 24px; }
  .contact-big-text .contact-details { order: 0; margin-top: 40px; }
  .nf-code { font-size: 34vw; }
  .not-found { padding: 120px 0 70px; }
  .not-found p { font-size: 16px; }
  .nf-links { margin-top: 36px; }
}
.footer-follow[hidden] { display: flex !important; visibility: hidden; }
.roll { justify-items: start; }
.pt-other .card-small { width: calc(50% - 8px); }
.pt-other .card-small .card-media { height: 500px; }
@media (max-width: 809.98px) { .pt-other .card-small { width: 100%; } }

/* ---------- site chat (chat.js) ---------- */

.chat { position: fixed; right: 24px; bottom: 24px; z-index: 70; font-family: var(--body); color: var(--black); }
.chat-launcher { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--black); color: var(--white); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .4s var(--out), background-color .3s var(--ease); }
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher svg { grid-area: 1 / 1; width: 25px; height: 25px; transition: opacity .25s var(--ease), transform .4s var(--out); }
.chat-launcher-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.chat.is-open .chat-launcher-icon { opacity: 0; transform: rotate(45deg) scale(.6); }
.chat.is-open .chat-launcher-close { opacity: 1; transform: none; }
.chat-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--black); font: 600 11px/20px var(--body); text-align: center; }
body.menu-is-open .chat { opacity: 0; pointer-events: none; }
.chat-teaser { position: absolute; right: 0; bottom: 72px; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 14px; background: var(--white); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .45); font: 400 14px/1.3 var(--body); white-space: nowrap; animation: chat-in .5s var(--out); }
.chat-teaser[hidden] { display: none; }
.chat-teaser span { cursor: pointer; }
.chat-teaser button { font-size: 18px; line-height: 1; opacity: .45; }
.chat-panel { position: absolute; right: 0; bottom: 74px; display: flex; flex-direction: column; width: 380px; height: min(620px, calc(100vh - 120px)); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .06); transform-origin: bottom right; animation: chat-in .45s var(--out); }
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; background: var(--black); color: var(--white); }
.chat-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.chat-avatar svg { width: 22px; height: 16px; }
.chat-head-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-head-text b { font: 600 15px/1.2 var(--body); letter-spacing: -.01em; }
.chat-state { display: flex; align-items: center; gap: 6px; font: 400 12px/1.2 var(--body); color: rgba(255, 255, 255, .65); }
.chat-state i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); }
.chat-panel[data-status="human"] .chat-state i { background: var(--accent); box-shadow: 0 0 0 3px rgba(252, 114, 0, .2); }
.chat-panel[data-status="closed"] .chat-state i { background: rgba(255, 255, 255, .4); box-shadow: none; }
.chat-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(255, 255, 255, .8); }
.chat-x:hover { background: rgba(255, 255, 255, .1); }
.chat-x svg { width: 20px; height: 20px; }
.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; background: var(--light); }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 86%; animation: chat-in .3s var(--out); }
.chat-msg p { padding: 10px 13px; border-radius: 14px; font: 400 14.5px/1.45 var(--body); letter-spacing: -.01em; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-who { padding: 0 4px; font: 500 11px/1 var(--body); letter-spacing: .02em; color: rgba(0, 0, 0, .45); }
.chat-bot, .chat-team { align-self: flex-start; }
.chat-bot p, .chat-team p { background: var(--white); border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
.chat-team p { box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 rgba(0, 0, 0, .05); }
.chat-team .chat-who { color: var(--accent); }
.chat-visitor { align-self: flex-end; }
.chat-visitor p { background: var(--black); color: var(--white); border-bottom-right-radius: 4px; }
.chat-visitor.is-pending p { opacity: .6; }
.chat-visitor.is-failed p { background: #b3261e; }
.chat-note { align-self: center; max-width: 92%; }
.chat-note p { padding: 4px 8px; background: none; font-size: 12.5px; line-height: 1.4; text-align: center; color: rgba(0, 0, 0, .5); }
.chat-typing p { display: flex; gap: 4px; padding: 14px 14px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .35); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-contact { padding: 12px 14px; border-top: 1px solid rgba(0, 0, 0, .08); background: #fff8f1; }
.chat-contact[hidden] { display: none; }
.chat-contact p { margin-bottom: 8px; font: 400 12.5px/1.4 var(--body); color: rgba(0, 0, 0, .7); }
.chat-contact div { display: flex; gap: 8px; }
.chat-contact input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 10px; background: var(--white); font: 400 14px/1.2 var(--body); }
.chat-contact button { padding: 0 14px; border-radius: 10px; background: var(--black); color: var(--white); font: 500 13px/1 var(--body); }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 12px 10px 16px; border-top: 1px solid rgba(0, 0, 0, .08); background: var(--white); }
.chat-form textarea { flex: 1; min-width: 0; max-height: 120px; padding: 9px 0; border: 0; outline: none; resize: none; background: none; font: 400 15px/1.4 var(--body); color: var(--black); }
.chat-form button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); transition: opacity .2s; }
.chat-form button svg { width: 20px; height: 20px; }
.chat-form.is-busy button { opacity: .35; pointer-events: none; }
.chat-human { padding: 0 16px 12px; background: var(--white); font: 500 12.5px/1.2 var(--body); color: rgba(0, 0, 0, .55); text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.chat-human:hover { color: var(--black); }
.chat-human[hidden] { display: none; }
@media (max-width: 809.98px) {
  .chat { right: 16px; bottom: 16px; }
  .chat-launcher { width: 54px; height: 54px; }
  /* On phones the conversation takes the whole screen. */
  .chat-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; animation: none; }
  .chat.is-open .chat-launcher { display: none; }
  .chat-msg p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .chat-panel, .chat-msg, .chat-teaser { animation: none; } .chat-typing i { animation: none; } }


/* ---------- long documents (privacy, cookies, imprint) ---------- */

.legal { padding: 40px 0 140px; }
.legal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.legal-toc { position: sticky; top: 110px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 10px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 12px; font: 400 15px/1.35 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .55); transition: color .2s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 13px/1.6 var(--body); color: var(--accent); }
.legal-toc a:hover { color: var(--black); }
.legal-doc { max-width: 760px; font: 300 17px/1.6 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .75); }
.legal-doc h2 { margin: 56px 0 14px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .15); font: 500 28px/1.2 var(--body); letter-spacing: -.03em; color: var(--black); scroll-margin-top: 110px; }
.legal-doc h2:first-of-type { margin-top: 24px; }
.legal-doc p + p, .legal-doc ul + p, .legal-doc p + ul { margin-top: 12px; }
.legal-doc ul { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-doc li::marker { color: var(--accent); }
.legal-doc a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { font: 500 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 809.98px) {
  .legal { padding: 20px 0 80px; }
  .legal-body { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .legal-doc { font-size: 16px; }
  .legal-doc h2 { font-size: 23px; margin-top: 40px; }
}

/* ---------- footer: © and the legal pages ---------- */

.footer-legal { position: relative; z-index: 2; margin-top: 48px; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font: 400 14px/1.3 var(--body); letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-legal a { color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer-legal a:hover { color: var(--white); }

/* ---------- cookies: notice and settings ---------- */

.cookie-notice { position: fixed; left: 24px; bottom: 24px; z-index: 75; width: 560px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px; border-radius: 16px; background: var(--black); color: var(--white); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08); animation: chat-in .5s var(--out); }
.cookie-notice[hidden], .cookie-notice [hidden] { display: none; }
.cookie-main > p, .cookie-cat p { font: 400 14px/1.45 var(--body); letter-spacing: -.01em; color: rgba(255, 255, 255, .78); }
.cookie-notice a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
/* "Only necessary" and "Accept all" look exactly alike: refusing is as easy as accepting. */
.cookie-btn { flex: 1 1 auto; padding: 12px 16px; border-radius: 10px; background: var(--white); color: var(--black); font: 500 14px/1 var(--body); white-space: nowrap; transition: background-color .2s; }
.cookie-btn:hover { background: #e9e9e9; }
.cookie-btn-quiet { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.cookie-btn-quiet:hover { background: rgba(255, 255, 255, .1); }
.cookie-settings h2 { margin-bottom: 14px; font: 500 20px/1.2 var(--body); letter-spacing: -.02em; }
.cookie-cat { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.cookie-cat p { margin-top: 6px; padding-left: 50px; font-size: 13px; }
.cookie-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-switch b { font: 500 15px/1.2 var(--body); }
.cookie-switch small { margin-left: auto; font: 400 12px/1 var(--body); color: rgba(255, 255, 255, .5); }
.cookie-toggle { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .22); transition: background-color .2s; }
.cookie-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform .25s var(--out); }
.cookie-switch input:checked + .cookie-toggle { background: var(--accent); }
.cookie-switch input:checked + .cookie-toggle::after { transform: translateX(16px); }
.cookie-switch input:disabled + .cookie-toggle { opacity: .55; }
.cookie-switch input:focus-visible + .cookie-toggle { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer-legal button { font: inherit; color: rgba(255, 255, 255, .7); transition: color .2s; }
.footer-legal button:hover { color: var(--white); }
@media (max-width: 809.98px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: calc(100vh - 24px); padding: 16px; }
  .cookie-btn { flex-basis: 100%; padding: 13px 16px; }
  .cookie-actions .cookie-btn-quiet { order: 3; }
  /* The chat button waits above the notice until a choice is made. */
  html.has-notice .chat { bottom: calc(var(--notice-h, 150px) + 24px); }
}

/* The note about the privacy policy under the forms and in the chat. */
.privacy-note { margin-top: 10px; font: 400 12.5px/1.4 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .5); }
.privacy-note a, .chat-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.theme-dark .privacy-note { color: rgba(255, 255, 255, .5); }
.chat-privacy { padding: 0 16px 12px; background: var(--white); font: 400 11.5px/1.35 var(--body); color: rgba(0, 0, 0, .45); }
.chat-privacy[hidden] { display: none; }

/* ---------- blog ---------- */

.blog-list { padding: 40px 0 140px; }
.page-title + .blog-list { padding-top: 24px; }
.blog-more { padding-top: 60px; }
.post-card { display: flex; flex-direction: column; gap: 18px; color: var(--black); }
.post-card-media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: #e2e2e2; }
.post-card-media img, .post-card-media .img-missing { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--out), filter .6s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-text { display: flex; flex-direction: column; gap: 10px; }
.post-meta { font: 500 13px/1.3 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.post-card h3 { font: 500 26px/1.2 var(--body); letter-spacing: -.03em; transition: color .3s var(--ease); }
.post-card:hover h3 { color: rgba(0, 0, 0, .6); }
.post-excerpt { font: 300 16px/1.5 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-big { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 48px; margin: 56px 0 72px; }
.post-card-big .post-card-media { aspect-ratio: 16 / 10; }
.post-card-big h3 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.post-card-big .post-excerpt { font-size: 18px; -webkit-line-clamp: 5; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.sec-head + .post-grid { margin-top: 64px; }

.article { padding: 150px 0 40px; }
.article-head { max-width: 980px; }
.article-back { display: inline-block; margin-bottom: 36px; font: 500 14px/1 var(--body); color: rgba(0, 0, 0, .55); transition: color .2s; }
.article-back:hover { color: var(--black); }
.article-title { margin-top: 18px; font: 600 clamp(40px, 5.4vw, 84px)/1 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.article-lead { margin-top: 28px; max-width: 760px; font: 300 22px/1.45 var(--body); letter-spacing: -.02em; color: rgba(0, 0, 0, .7); text-wrap: pretty; }
.article-author { margin-top: 20px; font: 500 14px/1 var(--body); color: rgba(0, 0, 0, .55); }
.article-cover { margin-top: 56px; }
.article-cover img, .article-cover .img-missing { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.article-body { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; font: 300 18px/1.7 var(--body); letter-spacing: -.01em; color: rgba(0, 0, 0, .8); }
.article-aside { position: sticky; top: 110px; }
.article-toc > p { margin-bottom: 18px; font: 500 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.article-main { max-width: 760px; }
.article-main > .article-text:first-child > :first-child { margin-top: 0; }
.article-text > * + * { margin-top: 18px; }
.article-text h2 { margin-top: 52px; font: 500 30px/1.2 var(--body); letter-spacing: -.03em; color: var(--black); scroll-margin-top: 110px; }
.article-text h2 + * { margin-top: 14px; }
.article-text ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.article-text li::marker { color: var(--accent); }
.article-text strong { font-weight: 600; color: var(--black); }
.article-text a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.article-figure { margin: 44px 0; }
.article-figure img { width: 100%; height: auto; border-radius: 4px; }
.article-figure figcaption { margin-top: 10px; font: 400 14px/1.4 var(--body); color: rgba(0, 0, 0, .5); }
.article-quote { margin: 44px 0; padding-left: 24px; border-left: 3px solid var(--accent); }
.article-quote p { font: 400 26px/1.35 var(--body); letter-spacing: -.02em; color: var(--black); }
.article-quote cite { display: block; margin-top: 12px; font: 500 14px/1 var(--body); font-style: normal; color: rgba(0, 0, 0, .55); }
.article-cta { margin-top: 80px; padding: 32px; border-radius: 16px; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.article-cta > div { display: flex; flex-direction: column; gap: 8px; }
.article-cta h2 { font: 500 28px/1.2 var(--body); letter-spacing: -.03em; }
.article-cta p { font: 300 16px/1.5 var(--body); color: rgba(255, 255, 255, .7); }
@media (max-width: 1199.98px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card-big { gap: 32px; }
}
@media (max-width: 809.98px) {
  .blog-list { padding: 20px 0 80px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .post-card-big { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 32px 0 44px; }
  .post-card h3 { font-size: 23px; }
  .article { padding-top: 110px; }
  .article-lead { font-size: 18px; }
  .article-cover { margin-top: 36px; }
  .article-body { margin-top: 40px; grid-template-columns: minmax(0, 1fr); font-size: 17px; }
  .article-aside { display: none; }
  .article-text h2 { font-size: 24px; margin-top: 40px; }
  .article-quote p { font-size: 21px; }
  .article-cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}