/* bajclean: dark palette, quiet modern editorial. The hero opens with
   the copy and the van photo behind a frosted-glass fog; a squeegee
   sweeps right-to-left and the fog clips away in sync. No JS. */

:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --bg-2: #101013;
  --bg-3: #17181c;
  --ink: #f2ede2;
  --ink-soft: #d9d3c6;
  --muted: #8a8681;
  --dim: #5a5651;
  --hair: rgb(242 237 226 / 0.10);
  --hair-strong: rgb(242 237 226 / 0.22);
  --accent: #4fb4d8;
  --accent-hi: #7dcae8;
  --accent-deep: #2c7f9d;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Menlo", Consolas, "Liberation Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --page: 82rem;
  --measure: 42rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ink);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
a:hover { color: var(--accent-hi); }

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

.skip {
  position: absolute; left: 1rem; top: -3rem;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 60;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------- mast -- */

.mast {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  color: var(--ink);
  background: rgba(10, 10, 12, 0.82);
  border-bottom: 1px solid var(--hair);
}
@supports (backdrop-filter: blur(10px)) {
  .mast {
    background: rgba(10, 10, 12, 0.6);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 550 1.02rem/1 var(--sans);
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.005em;
}
.mast-nav {
  display: none; gap: 1.75rem;
  margin-left: auto;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mast-nav a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.mast-nav a:hover { color: var(--ink); }
.mast-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ink);
  font: 500 0.85rem/1 var(--sans);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mast-cta:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
  color: var(--ink);
}
.mast-cta-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: cta-pulse 3s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(0.7); }
}
@media (min-width: 62rem) {
  .mast-nav { display: inline-flex; margin-left: auto; }
  .mast-cta { margin-left: 0; }
}

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  background: var(--bg);
}

/* the van behind the glass: the fog sits on top of it, so the wipe
   reveals the real photo. A landscape shot on wide screens, a portrait
   one on tall ones; the scrim keeps the copy legible over either. */
.hero-photo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64%;
  z-index: 0;
}
.hero-photo img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 45% 64%;
}
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgb(10 10 12 / 0.6) 30%, transparent 60%);
}
@media (min-aspect-ratio: 1/1) {
  .hero-photo { height: auto; bottom: 0; left: 36%; }
  .hero-photo img { object-position: 72% 60%; }
  .hero-photo::after {
    background:
      linear-gradient(to top, var(--bg) 0%, transparent 30%),
      linear-gradient(to right, var(--bg) 0%, rgb(10 10 12 / 0.55) 25%, transparent 55%);
  }
  .hero .hero-copy h1 { max-width: 12ch; }
}

/* the actual content, always sharp, always on. */
.hero-copy {
  position: relative;
  z-index: 1;
  padding: clamp(6rem, 14vh, 8rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 10vh, 6rem);
  max-width: var(--page);
  margin-inline: auto;
  width: 100%;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.98;
  max-width: 22ch;
  color: var(--ink);
}
.hero-lede {
  margin-top: 1.75rem;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.15rem;
}
.hero-lede em {
  color: var(--accent-hi);
  font-style: italic;
}
.hero-actions {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}

/* Shared wipe progress: both the fog's clip-path and the squeegee's
   right offset are driven by the same custom property, so they can't
   drift. Two separate animations diverged by up to a dozen pixels near
   the ends, which was the halo of fog visible right of the squeegee. */
@property --wipe {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

.hero {
  --wipe: 0%;
  animation: hero-wipe 1.1s cubic-bezier(0.72, 0, 0.28, 1) 0.15s forwards;
}
@keyframes hero-wipe {
  from { --wipe: 0%; }
  to   { --wipe: 100%; }
}

/* the frost overlay — obscures the copy at rest, gets wiped away.
   The wash carries the "hidden" state on its own; the backdrop blur
   is small on purpose, because backdrop-filter's blur radius bleeds
   past clip-path edges and a wide radius would leave a halo. */
.fog {
  position: absolute; inset: 0;
  z-index: 2;
  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: inset(0 var(--wipe) 0 0);
}

/* the squeegee, sliding right-to-left at the wipe boundary. Its right
   offset equals the fog's clip, so its right edge is exactly on the
   fog's visible right edge at every frame. Opaque bar with sharp edges
   — soft edges would let the fog's blur bleed through the tool. */
.squeegee {
  position: absolute;
  top: 0; bottom: 0;
  right: var(--wipe);
  width: 6px;
  z-index: 3;
  pointer-events: none;
  background: #050505;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: squeegee-appear 0.1s linear 0.13s forwards;
}
@keyframes squeegee-appear {
  to { opacity: 1; }
}

/* a shine sweep across the just-cleaned surface, once, right after the
   fog is gone. Same diagonal as the card hover shine so the two read
   as the same visual vocabulary. */
.hero-glare {
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(125, 202, 232, 0.12) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(125, 202, 232, 0.12) 52%,
    transparent 60%);
  transform: translateX(-100%) skewX(-15deg);
  animation: hero-glare-sweep 1s cubic-bezier(0.2,0.7,0.2,1) 1.3s forwards;
}
@keyframes hero-glare-sweep {
  from { transform: translateX(-100%) skewX(-15deg); }
  to   { transform: translateX(360%) skewX(-15deg); }
}

/* ------------------------------------------------------------ links -- */

.link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink);
  font: 500 0.98rem/1 var(--sans);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hair-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link.primary {
  color: var(--accent-hi);
  border-bottom-color: var(--accent);
}
.link:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}
.link-arrow { display: inline-block; transition: transform 0.25s ease; }
.link:hover .link-arrow { transform: translateX(4px); }

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

.section {
  padding-block: clamp(5rem, 10vw, 8rem);
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
  border-top: 1px solid var(--hair);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  max-width: 20ch;
}
.section-lede {
  margin-top: 1.25rem;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 1.1rem;
}

/* ---------------------------------------------------------- services -- */

.services {
  padding-block: clamp(5rem, 10vw, 8rem);
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
  border-top: 1px solid var(--hair);
}
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 62rem) {
  .cards { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
.cards.cards-3 { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 62rem) {
  .cards.cards-3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.card {
  --pad: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  padding: var(--pad);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.03), transparent 40%),
    var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.9rem;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--hair-strong);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6),
              0 0 0 1px var(--hair-strong);
}
/* absolute + no grid placement: containing block is the card's padding
   box, so the shine spans the full card interior (including padding),
   not the inner grid area. */
.card-shine {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent 40%, rgba(125,202,232,0.14) 50%, transparent 60%);
  transform: translateX(-150%) skewX(-15deg);
  pointer-events: none;
  transition: transform 1s cubic-bezier(0.2,0.7,0.2,1);
}
.card:hover .card-shine { transform: translateX(400%) skewX(-15deg); }
/* fixed slots: 01, heading, body. Every card uses the same 3-row grid
   so the number, heading and body sit at the same y across cards. */
.card-num {
  grid-row: 1;
  font: 550 1.15rem/1 var(--sans);
  color: var(--dim);
  letter-spacing: -0.01em;
}
.card-h {
  grid-row: 2;
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  color: var(--ink);
}
.card-body {
  grid-row: 3;
  color: var(--muted);
  align-self: start;
}

/* a service card with a photo bled to its top edge: the photo takes
   row 1 and the fixed slots shift down by one. */
.card.has-photo { grid-template-rows: auto auto auto 1fr; }
.has-photo .card-num { grid-row: 2; }
.has-photo .card-h { grid-row: 3; }
.has-photo .card-body { grid-row: 4; }
.card-photo {
  grid-row: 1;
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) -3.5rem;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  /* the hero's treatment: graded down into the dark, faded into the card
     so the copy starts on the photo instead of under a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  filter: saturate(0.55) brightness(0.62) contrast(1.05);
  transition: filter 0.5s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1);
}
.card:hover .card-photo {
  filter: saturate(0.95) brightness(0.8) contrast(1.05);
  transform: scale(1.03);
}
.has-photo .card-num,
.has-photo .card-h { position: relative; }

.gallery-link { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------------------------------------------------- closing card -- */

/* The about + kontakt merge: one wide card with the pitch on the left
   and the facts on the right, closing the page as a single unified
   surface instead of two thin sections. */
.closing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 62rem) {
  .closing {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}
.closing-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.closing-h {
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  line-height: 1;
  max-width: 18ch;
}
.closing-lede {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: var(--measure);
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 0.5rem;
}
.closing-facts {
  margin: 0; padding: 0;
  display: grid; gap: 1rem;
  align-self: start;
}
@media (min-width: 62rem) {
  .closing-facts {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid var(--hair);
  }
}
.closing-facts > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.4rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair);
}
.closing-facts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.closing-facts dt {
  color: var(--dim);
  font: 400 0.72rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}
.closing-facts dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.closing-facts a {
  color: var(--accent-hi);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.closing-facts a:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}

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

.gallery-page { padding-top: clamp(7rem, 14vh, 9rem); border-top: 0; }
.crumb {
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.gallery-page h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98; }
.gallery-group + .gallery-group { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.gallery-group h2 {
  margin-bottom: 1.5rem;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--bg-2);
}
.tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1), filter 0.4s ease;
}
.tile:hover img { transform: scale(1.04); filter: saturate(1); }
.tile:hover { border-color: var(--hair-strong); }

/* --------------------------------------------------------------- foot -- */

.foot {
  border-top: 1px solid var(--hair);
  background: var(--bg-2);
  padding-bottom: 3rem;
}
.foot-in {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-block: 2.5rem;
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
}
@media (min-width: 55rem) {
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; }
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 550 1rem/1 var(--sans);
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.foot-copy {
  color: var(--muted);
  font: 400 0.9rem/1.5 var(--serif);
  max-width: 28rem;
}
.foot-meta {
  display: grid; gap: 0.4rem;
  color: var(--muted);
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.05em;
}
.foot-meta a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.foot-meta a:hover { color: var(--ink); border-bottom-color: var(--hair-strong); }

/* --------------------------------------------------- scroll reveals */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step,
    .studio,
    .section-head,
    .card {
      animation: rise 700ms ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------- reduced motion overrides */

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; --wipe: 100%; }
  .fog { opacity: 0; }
  .squeegee { display: none; }
  .hero-glare { display: none; }
  .mast-cta-dot { animation: none; }
}

/* ---------------------------------------------------------------- 404 -- */

.lost {
  display: grid; align-content: center;
  min-height: 75vh;
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--gutter);
  gap: 1rem;
  color: var(--ink);
}
.lost h1 {
  font: 550 clamp(2.5rem, 6vw, 4rem) var(--sans);
  line-height: 1;
  letter-spacing: -0.02em;
}
.lost .hero-lede {
  color: var(--ink-soft);
}