/* ============================================================
   SHS · FINAL
   Colors: warm neutrals — white / warm gray / ink / taupe
   Hero: one quiet photograph, centered Weiter as the exit beat
   Buttons: beige / dark-grey pair
   ============================================================ */

:root {
  --white: #F8F4EB;      /* light beige paper — the page's base surface */
  --gray: #F0EADF;       /* a step deeper, keeps the section alternation readable */
  --ink: #1A1A1A;
  --ink-soft: #5C574F;
  --taupe: #9A8B72;
  --taupe-deep: #77684F;
  --taupe-mid: #9B8357;  /* exact midpoint of taupe and bronze: selected + hover states */
  --bronze: #9C7A3C;     /* the vibrant end of the taupe family: hovers + accents */
  --beige: #C8BBA4;
  --line: rgba(26, 26, 26, 0.12);
  --font-display: "Marcellus", "Georgia", serif;
  --font-body: "Karla", "Helvetica Neue", sans-serif;
  --radius: 6px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* dark-mode aliases: same var names, dusk palette */
  --shadow-color: 26, 26, 26;
  --header-bg: 248, 244, 235;
  --taupe-rgb: 154, 139, 114;
  color-scheme: light;
}

/* ============================================================
   DARK MODE — same warm identity, dusk edition
  [data-theme="dark"] swaps the palette through the same tokens;
   no component needs to know which mode is active.
   ============================================================ */
[data-theme="dark"] {
  --white: #141210;      /* page background */
  --gray: #1E1B17;       /* warm charcoal, replaces the warm gray */
  --ink: #ECE6DB;        /* warm off-white text */
  --ink-soft: #A89F90;
  --taupe: #A99A81;
  --taupe-deep: #C2B294; /* darker mode needs the lighter end for contrast */
  --taupe-mid: #B99F6F;  /* midpoint of the dark taupe and dark bronze */
  --bronze: #C9A35C;
  --beige: #3A342B;      /* was a light fill; becomes a dark raised fill */
  --line: rgba(236, 230, 219, 0.14);
  --shadow-color: 0, 0, 0;
  --header-bg: 30, 27, 23;
  --taupe-rgb: 169, 154, 129;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* With JS available, the body waits one beat for the choreography to arm;
   without JS everything below simply renders, fully visible. */
html.js body { opacity: 0; transition: opacity 0.5s var(--ease-out); }
html.js body.is-ready { opacity: 1; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- view transitions: theme + language cross-fade ----------
   One material for both switches: the whole page breathes through a
   short blur — the room "relights" rather than snapping. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 260ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 340ms 60ms var(--ease-out) both; }
}
@keyframes vt-out {
  to { opacity: 0; filter: blur(6px); }
}
@keyframes vt-in {
  from { opacity: 0; filter: blur(6px); }
  to { opacity: 1; filter: blur(0); }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 3px;
}

::selection { background: var(--taupe); color: var(--white); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--white); }
::-webkit-scrollbar-thumb { background: var(--beige); border: 3px solid var(--white); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--taupe); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h2 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin-bottom: 1.4rem; }
h3 { font-size: 1.35rem; }

p { max-width: 68ch; }
.lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- skip link (keyboard users land past the nav) ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--white); text-decoration: none;
  font-size: 0.9rem; box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.25);
  transform: translateY(-64px); opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.skip-link:focus-visible { transform: none; opacity: 1; }

/* ---------- header ----------
   Desktop: the bar leaves the flow entirely (fixed, in the media query
   at the end of this file), so the hero render runs behind it to the
   top of the viewport and nav, language and theme float in the sky of
   the photograph; past the hero they settle onto frosted capsules.
   Mobile keeps the classic in-flow bar. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* the SHS mark sits left of the hero title; the header carries no
   brand of its own */
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  text-decoration: none; font-size: 0.92rem; letter-spacing: 0.04em;
  color: var(--ink-soft); transition: color 0.2s;
  position: relative; padding: 4px 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--taupe); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav .nav-cta {
  border: 1px solid var(--taupe-deep); padding: 8px 18px; border-radius: 999px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
/* hover warms into the theme's taupe–bronze midpoint instead of going black */
.site-nav .nav-cta:hover { background: var(--taupe-mid); border-color: var(--taupe-mid); color: #F6F3EE; }
.site-nav .nav-cta::after { display: none; }

/* the menu marks the section you are in (script.js scroll spy):
   plain links get the persistent underline, the Team button fills */
.site-nav a.is-active { color: var(--ink); }
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav .nav-cta.is-active { background: var(--taupe-deep); border-color: var(--taupe-deep); color: #F6F3EE; }
.mobile-menu a.is-active { color: var(--taupe-deep); font-weight: 600; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 10px; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); width: 100%; transition: transform 0.3s, opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 8px 24px 18px;
  border-top: 1px solid var(--line);
  background: rgba(var(--header-bg), 0.97); /* readable even over the transparent header on the hero */
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 4px; text-decoration: none; font-size: 1.05rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ---------- buttons: beige / dark-grey pair ---------- */
.btn {
  display: inline-block; padding: 14px 32px; border-radius: 999px;
  text-decoration: none; font-size: 0.95rem; letter-spacing: 0.04em;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn-solid {
  background: var(--ink); color: var(--gray); border: 1px solid var(--ink);
}
.btn-solid:hover {
  background: var(--taupe-deep); border-color: var(--taupe-deep); color: var(--white);
  box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.18);
}
.btn-line {
  background: var(--beige); color: var(--ink); border: 1px solid var(--beige);
}
.btn-line:hover {
  background: transparent; border-color: var(--taupe-deep); color: var(--taupe-deep);
}

/* ---------- hero: the render, full bleed ----------
   The studio's 3D-rendered concept image is the page centerpiece:
   edge to edge, headline and actions sit in its lower left like an
   invitation into the room. The scrim is mixed from the site's own
   ink tone and the text keeps one fixed warm paper tone in both
   modes, since it always sits on the photograph, never on the page
   background. */
.hero {
  position: relative;
  min-height: calc(100dvh - 66px);
  display: flex; align-items: flex-end;
  padding: 0; overflow: hidden;
  background: var(--gray);
}
.hero-stage { position: absolute; inset: 0; overflow: hidden; }
.hero-stage img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}


/* THE FOCAL MOMENT — the hero is a room revealed:
   the render resolves from blur into focus while the display type
   settles from wide architectural-drawing tracking into place.
   Runs once on load, only when JS armed it (html.js). */
@keyframes hero-stage-in {
  from { opacity: 0; filter: blur(22px); transform: scale(1.03); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes hero-settle {
  from { opacity: 0; letter-spacing: 0.12em; }
  to   { opacity: 1; letter-spacing: 0.01em; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html.js .hero-stage { animation: none; }
html.js .hero-copy h1 { animation: none; }
html.js .hero-copy .hero-lead,
html.js .hero-copy .hero-actions { animation: none; }
html.js body.is-ready .hero-stage { animation: hero-stage-in 1.25s 0.15s var(--ease-out) both; }
html.js body.is-ready .hero-copy h1 { animation: hero-settle 1.1s 0.3s var(--ease-out) both; }
html.js body.is-ready .hero-copy .hero-lead { animation: hero-rise 0.9s 0.65s var(--ease-out) both; }
html.js body.is-ready .hero-copy .hero-actions { animation: hero-rise 0.9s 0.8s var(--ease-out) both; }

.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 26, 26, 0.3) 0%, rgba(26, 26, 26, 0) 30%),
    linear-gradient(180deg, rgba(26, 26, 26, 0) 42%, rgba(26, 26, 26, 0.8) 100%);
}
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 1240px; margin: 0 auto;
  padding: 0 24px clamp(96px, 16vh, 168px);
}
.hero-copy h1 {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px);
  font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1.06;
  color: #F6F3EE;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
/* the SHS mark sits left of the title. The charcoal source artwork is
   inverted to warm paper white so it holds up over the darkened scrim
   the way the type does. */
/* .hero-copy prefix out-ranks `.hero-stage img` (0,1,1), which would
   otherwise stretch this mark to the full hero width like the photo. */
.hero-copy .hero-logo {
  /* one mark, the exact vertical height of the two title lines
     (2 × line-height 1.06): em tracks the title at every breakpoint */
  height: 2.12em; width: auto; flex: none;
  filter: invert(1) brightness(1.9) saturate(0);
}
.hero-lead {
  margin: 22px 0 30px; font-size: 1.2rem;
  color: rgba(246, 243, 238, 0.9); max-width: 46ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* both hero CTAs keep the photograph visible through a transparent
   fill, but they read differently: the primary is a white glass with a
   firm paper edge, bold label and deep shadow; the secondary a bronze
   glass accent with a hairline edge, regular weight, no shadow.
   At rest the glass tint follows the theme; hovers follow the theme
   too — light fills in light mode, dark fills in dark mode — while
   each button keeps its own hue voice so they never blur together. */
.hero .btn-solid {
  /* light beige glass at rest — a faint 0.22 wash with a soft beige
     edge, far from a strong white; hover brings the full beige-paper
     fill so the button materialises under the pointer */
  background: rgba(200, 187, 164, 0.22); border-color: rgba(200, 187, 164, 0.55); color: #F6F3EE;
  font-weight: 600; letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-solid:hover {
  /* light mode: light hover — warm paper fill, brown-beige label */
  background: rgba(248, 244, 235, 0.94); border-color: #F8F4EB; color: #77684F;
}
[data-theme="dark"] .hero .btn-solid {
  background: rgba(24, 20, 15, 0.5); border-color: rgba(236, 230, 219, 0.25); color: #ECE6DB;
}
[data-theme="dark"] .hero .btn-solid:hover {
  background: #3A342B; border-color: rgba(194, 178, 148, 0.6); color: #ECE6DB;
}
/* beige glass wash: the warm sibling of the primary's white glass —
   still transparent over the photograph. */
.hero .btn-line {
  /* light mode: deep bronze glass — deliberately darker than dark
     mode's golden glass, so the theme switch reads at a glance */
  background: rgba(119, 94, 45, 0.35);
  border-color: rgba(119, 94, 45, 0.6);
  color: #F6F3EE;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .hero .btn-line {
  /* dark mode: muted champagne-bronze glass — a touch darker and less
     brown than the gold, distinct from the primary's charcoal glass */
  background: rgba(184, 165, 110, 0.35);
  border-color: rgba(184, 165, 110, 0.55);
  color: #F6F3EE;
}
.hero .btn-line:hover {
  /* light mode: light hover — the theme's warm beige fill, dark label;
     a warmer voice than the primary's cool paper hover */
  background: rgba(200, 187, 164, 0.94);
  border-color: rgba(200, 187, 164, 0.94);
  color: #1A1A1A;
}
[data-theme="dark"] .hero .btn-line:hover {
  /* dark mode: dark hover — espresso-bronze fill, golden edge, light
     label; richer and warmer than the primary's grey-charcoal hover */
  background: rgba(74, 58, 28, 0.94);
  border-color: rgba(201, 163, 92, 0.8);
  color: #F6F3EE;
}

/* the weiter beat now floats over the image bottom */
.weiter-row {
  position: absolute; left: 0; right: 0; bottom: 18px;
  margin-top: 0; z-index: 3;
}

.hero-tag {
  position: absolute; bottom: 18px; right: 18px; z-index: 2;
  padding: 7px 14px; font-size: 0.75rem;
  letter-spacing: 0.1em; line-height: 1.4; border-radius: 999px;
  background: rgba(26, 26, 26, 0.82); color: #F6F3EE;
}
/* ---------- WEITER: centered arrow-only exit beat under the hero ----------
   Sinks below the fold line and fades while scrolling down; returns on scroll-up. */
.weiter-row {
  margin-top: clamp(48px, 9vh, 96px);
  display: flex; justify-content: center;
  animation: weiter-in 0.9s 0.55s var(--ease-out) both;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.weiter-row.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
@keyframes weiter-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.weiter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink);
  padding: 6px 14px; border-radius: 999px;
}
/* the exit beat carries the inverted scheme too: paper circle with a
   dark arrow in light mode, readable raised charcoal in dark mode.
   It hops briefly every few seconds — a nudge, not a metronome — and
   script.js removes it for good at the user's first real scroll. */
.weiter-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F6F3EE; color: #1A1A1A;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(var(--shadow-color), 0.2);
  animation: weiter-jump 2.4s ease-in-out infinite;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
@keyframes weiter-jump {
  /* one clean parabolic jump (~0.31s), then ~2.1s of stillness.
     A single apex with ease-in-out on each segment is velocity-smooth
     through the top and at both landings — no flicker, no stutter */
  0%, 13%, 100% { transform: translateY(0); }
  6%            { transform: translateY(-9px); }
}
.weiter-row.is-gone { display: none; }
.weiter-arrow svg { width: 22px; height: 22px; }
.weiter-arrow.is-paused { animation-play-state: paused; }
.weiter-btn:hover .weiter-arrow, .weiter-btn:focus-visible .weiter-arrow {
  background: var(--taupe-deep); color: var(--white);
  box-shadow: 0 14px 28px rgba(var(--shadow-color), 0.28);
}
.weiter-btn:hover .weiter-arrow svg { animation: weiter-nudge 0.7s var(--ease-out); }
@keyframes weiter-nudge {
  0% { transform: translateY(0); }
  55% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

.section { padding: 110px 24px; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section-white { background: var(--white); }
.section-gray { background: var(--gray); }
.section.section-white { background: var(--white); color: var(--ink); }

.split { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.split-text p { margin-bottom: 1.1rem; }
.split-text h3 { margin: 1.9rem 0 0.9rem; }
.quote {
  margin: 30px 0;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.45;
  color: var(--taupe-deep); font-style: italic;
}
.quote::before { content: "„"; color: var(--taupe); }
.quote::after { content: "“"; color: var(--taupe); }
.split-figure img, .showroom-img img {
  width: 100%; border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(var(--shadow-color), 0.14);
}

.service-list { list-style: none; margin: 0 0 1.4rem; border-top: 1px solid var(--line); }
.service-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.service-list li span { font-family: var(--font-display); font-size: 1.25rem; }
.service-list li small { color: var(--ink-soft); }

.showroom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: center; margin-top: clamp(56px, 9vh, 100px); }
.showroom-text h3 { margin-bottom: 0.9rem; }
.text-link { color: var(--taupe-deep); font-weight: 600; text-underline-offset: 4px; }
.text-link:hover { color: var(--ink); }

.motto { font-size: 1.18rem; margin: 20px 0 44px; max-width: 62ch; color: var(--ink-soft); }
.motto em { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--taupe-deep); }

/* ---------- service cards: framed style ---------- */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.service-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 38px 32px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.service-card:hover {
  transform: translateY(-6px); border-color: rgba(var(--taupe-rgb), 0.55);
  box-shadow: 0 18px 40px rgba(var(--shadow-color), 0.08);
}
.service-card h3 { font-size: 1.5rem; }
.service-sub { font-size: 0.86rem; letter-spacing: 0.03em; color: var(--taupe-deep); }
.service-card p:not(.service-sub) { color: var(--ink-soft); }
.service-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- process ---------- */
.process { list-style: none; margin-top: clamp(36px, 6vh, 60px); }
.process-step {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px);
  padding: 32px 0; border-top: 1px solid var(--line);
}
.process-step:last-child { border-bottom: 1px solid var(--line); }
.process-num { font-family: var(--font-display); font-size: 1.8rem; color: var(--taupe-deep); padding-top: 2px; }
.process-step h3 { margin-bottom: 0.5rem; }
.process-step p { color: var(--ink-soft); }

/* ---------- gallery: masonry with overlay captions ---------- */
.gallery {
  max-width: 1180px; margin: clamp(40px, 6vh, 64px) auto 0; padding: 0;
  columns: 3; column-gap: 22px;
}
@media (max-width: 1000px) { .gallery { columns: 2; } }
@media (max-width: 620px) { .gallery { columns: 1; } }
.gallery-item {
  break-inside: avoid; margin-bottom: 22px; position: relative;
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  background: var(--gray); border: 1px solid var(--line);
}
.gallery-item img { width: 100%; height: auto; transition: transform 0.6s var(--ease-out); }
.gallery-item.img-hover img { transform: scale(1.04); }
.gallery-caption {
  position: absolute; inset: auto 0 0 0; padding: 48px 20px 16px;
  background: linear-gradient(to top, rgba(var(--shadow-color), 0.82), rgba(var(--shadow-color), 0));
  color: var(--gray); opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.gallery-item.img-hover .gallery-caption, .gallery-item:focus-visible .gallery-caption { opacity: 1; transform: translateY(0); }
.gallery-caption h3 { font-size: 1.15rem; color: var(--white); margin-bottom: 2px; }
.gallery-caption p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); line-height: 1.45; }

/* ---------- team: founders on top, team below ---------- */
.founders {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 5vh, 52px);
}
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: clamp(48px, 7vh, 84px); }
.sublabel {
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe-deep);
}
.founders-label { margin-top: clamp(32px, 5vh, 52px); }
.team-label { margin-top: clamp(48px, 7vh, 84px); }
.founder-card img { aspect-ratio: 4 / 5; }
.founder-card h3 { font-size: 1.6rem; }
.founder-card .team-role { font-size: 0.9rem; }
.founder-card .team-bio { font-size: 1.02rem; max-width: 46ch; margin-inline: auto; }
.founder-tag {
  display: inline-block; margin-top: 14px; padding: 7px 16px;
  border: 1px solid rgba(var(--taupe-rgb), 0.55); border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--taupe-deep);
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {  .founders { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; }
.team-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 18px;
}
.team-card h3 { font-size: 1.3rem; }
.team-role { font-size: 0.86rem; letter-spacing: 0.04em; color: var(--taupe-deep); margin: 6px 0 12px; }
.team-bio { font-size: 0.95rem; color: var(--ink-soft); margin: 0 auto; }

/* ---------- footer: brand + contact + nav in one lean block ---------- */
.site-footer { background: var(--gray); color: var(--ink-soft); border-top: 1px solid var(--line); }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 72px 24px 44px;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-logo-mark { width: clamp(150px, 14vw, 200px); height: auto; }
.footer-tagline {
  font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* social icons: quiet circular buttons that warm up on hover */
.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-soft); transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out), background 0.25s;
}
.footer-social svg { width: 19px; height: 19px; }
.footer-social a:hover {
  color: var(--ink); border-color: rgba(var(--taupe-rgb), 0.65); background: rgba(var(--taupe-rgb), 0.1);
  transform: translateY(-2px);
}
.footer-social a:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
.footer-head {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe-deep); margin-bottom: 16px;
}
.footer-contact {
  font-style: normal; line-height: 2; color: var(--ink-soft);
}
.footer-contact a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
.footer-contact a:hover { text-decoration: underline; }
.footer-map-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-map {
  width: 100%; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
}
.footer-map iframe {
  display: block; width: 100%; height: 240px; border: 0;
  filter: grayscale(0.35) contrast(1.02);
}
.footer-map-link {
  margin-top: 12px; font-size: 0.85rem; color: var(--taupe-deep);
  text-decoration: none; text-underline-offset: 3px;
}
.footer-map-link:hover { color: var(--ink); }
.footer-legal-row {
  max-width: 1180px; margin: 0 auto; padding: 22px 24px 36px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-legal { font-size: 0.82rem; }
/* the two legal links share the copyright's size, anchored right on the
   same line, with a measured, breathing gap between them */
.footer-legal-links { display: flex; gap: 28px; }
.footer-legal-links a {
  font-size: 0.82rem; color: var(--ink-soft); text-decoration: none;
  text-underline-offset: 4px; transition: color 0.25s;
}
.footer-legal-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(12, 12, 12, 0.95);
  display: grid; place-items: center; padding: 40px 20px;
  opacity: 1; transition: opacity 0.3s var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox.is-closing { opacity: 0; }
.lightbox-figure { max-width: 1100px; width: 100%; transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), filter 0.35s var(--ease-out); }
.lightbox.is-closing .lightbox-figure { opacity: 0; transform: scale(0.97); filter: blur(4px); }
.lightbox-figure img { max-height: 74vh; width: auto; height: auto; margin: 0 auto; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.lightbox-figure figcaption { color: var(--white); margin-top: 16px; text-align: center; }
.lightbox-figure figcaption h3 { color: var(--white); font-size: 1.35rem; }
.lightbox-figure figcaption p { margin: 4px auto 0; color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; max-width: 60ch; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: none;
  color: var(--white); font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.lightbox-close:hover { background: var(--white); color: var(--ink); }

/* ---------- reveal system: photographs resolve, text simply settles ----------
   The one material idea of the page, carried below the hero. Groups
   (data-reveal-group) share one timing so a composition arrives as one;
   standalone blocks (data-reveal) arrive on their own. Content stays
   visible by default — JS adds the hidden state, never the HTML. */
[data-reveal] { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
html.js [data-reveal]:not(.is-visible) { opacity: 0.001; transform: translateY(18px); }
html.js [data-reveal="photo"]:not(.is-visible) { transform: none; filter: blur(14px); opacity: 0; }
html.js [data-reveal="photo"].is-visible { filter: blur(0); }
[data-reveal-group] > * { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.js [data-reveal-group]:not(.is-visible) > * { opacity: 0.001; transform: translateY(16px); }
html.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
/* a photograph inside a group keeps its own slower, blur-carrying resolve.
   Nested reveals are absorbed (the group's own transition wins) except for
   the material that matters: the photo's blur. */
html.js [data-reveal="photo"] { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
html.js [data-reveal-group] [data-reveal="photo"]:not(.is-visible) { opacity: 0; filter: blur(14px); transform: none; }
html.js [data-reveal-group] [data-reveal="photo"].is-visible { filter: blur(0); }
/* a list arrives as a list: quiet sibling stagger, hard-capped */
html.js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
html.js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
html.js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
html.js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
html.js [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }
.team-card img { background: var(--gray); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { min-height: calc(100svh - 60px); }
  .hero-copy { padding-bottom: 110px; }
  .hero-copy h1 { font-size: 2.5rem; }
  .split, .showroom { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
  .service-cards { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .lang-btn { padding: 5px 8px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .process-step { grid-template-columns: 60px minmax(0, 1fr); }
  .weiter-arrow { width: 42px; height: 42px; }
  .footer-inner { grid-template-columns: 1fr; }
}
/* tiny phones: the title-height logo needs the row to shrink with it */
@media (max-width: 480px) {
  .hero-copy h1 { font-size: 2.3rem; }
}

/* ---------- header controls: language switcher + theme toggle ---------- */
.header-controls { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px;
}
.lang-btn {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink-soft);
  transition: background 0.25s, color 0.25s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--taupe-mid); color: var(--white); }
.theme-toggle {
  appearance: none; background: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-soft);
  display: grid; place-items: center;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--taupe); }
.theme-icon { width: 18px; height: 18px; }
/* light mode shows the moon (switch to dark); dark mode shows the sun */
.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }

/* ---------- dark-mode touch-ups ----------
   A few places name a fixed color that must not flip with the tokens. */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--white); }
[data-theme="dark"] .btn-solid { color: #141210; }
[data-theme="dark"] .btn-solid:hover { color: #141210; }
[data-theme="dark"] .weiter-arrow {
  background: #3A342B; border-color: rgba(236, 230, 219, 0.28); color: #ECE6DB;
}
[data-theme="dark"] .nav-cta { color: var(--ink); }
[data-theme="dark"] .nav-cta:hover { background: var(--taupe-mid); border-color: var(--taupe-mid); color: #141210; }
[data-theme="dark"] .gallery-caption { background: rgba(10, 9, 8, 0.82); }
[data-theme="dark"] .gallery-caption h3 { color: var(--ink); }
[data-theme="dark"] .gallery-caption p { color: rgba(236, 230, 219, 0.85); }
[data-theme="dark"] .footer-map iframe { filter: grayscale(0.35) contrast(1.02) invert(0.9) hue-rotate(180deg); }

/* ---------- reduced motion: fewer and gentler, meaning preserved ----------
   Opacity and color paths stay (state changes must remain legible);
   spatial travel, blur and loops are dropped. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js body { opacity: 1; transition: none; }
  html.js body.is-ready { opacity: 1; }
  .hero-stage, .hero-copy h1, .hero-copy .hero-lead, .hero-copy .hero-actions { animation: none !important; }
  .weiter-row { transition: opacity 0.45s var(--ease-out); } /* keep the fade, drop the travel */
  .weiter-row.is-hidden { transform: none; }
  /* the hop is spatial; reduced motion gets a gentle opacity pulse,
     still an attention cue, no travel */
  .weiter-arrow {
    animation: weiter-pulse 2.6s ease-in-out infinite;
  }
  .weiter-btn:hover .weiter-arrow svg { animation: none; }
  .weiter-btn:hover .weiter-arrow svg { animation: none; }
  .weiter-btn:hover { transform: none; }
  .btn { transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s; }
  .btn:hover, .btn:active { transform: none; }
  [data-reveal], [data-reveal-group] > * { transition: opacity 0.4s var(--ease-out); }
  html.js [data-reveal]:not(.is-visible),
  html.js [data-reveal-group]:not(.is-visible) > * { transform: none; filter: none; }
  html.js [data-reveal="photo"]:not(.is-visible) { filter: none; }
  .gallery-item img, .service-card { transition: none; }
  .lightbox, .lightbox-figure { transition: none; }
  .lightbox.is-closing .lightbox-figure { opacity: 1; transform: none; filter: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

@keyframes weiter-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------- back to top: appears once the hero is behind you ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--header-bg), 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--ink-soft);
  box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.18);
  cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), color 0.25s, border-color 0.25s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--ink); border-color: var(--taupe); transform: translateY(-2px); }

/* ---------- desktop: the header lives in the sky ----------
   The header leaves the document flow (fixed) so the hero render runs
   edge to edge to the very top of the viewport. Menu, language and
   theme share ONE surface — the cluster shrinks to its
   content and anchors to the right edge. Soft 12px corners instead of
   pills: an architectural frame that matches the interior render.
   The surface rests at 45% transparency and deepens when the pointer
   rests on it. Past the hero (is-past-hero, toggled by script.js) the
   hover surface turns more solid. */
@media (min-width: 901px) {
  .site-header { position: fixed; left: 0; right: 0; } /* no band, no line */
  .hero { min-height: 100dvh; } /* the render now reaches the top, behind the header */

  .header-inner {
    max-width: none;
    width: fit-content;          /* one surface around the cluster, not a band */
    margin: 12px 40px 0 auto;    /* off the top edge, small gap to the right */
    justify-content: flex-end;
    padding: 12px 20px;
    gap: 26px;                   /* one rhythm: every gap in the bar is the same */
    border-radius: 12px;
    background: rgba(var(--header-bg), 0.4); /* 60% transparent glass (light mode) */
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid transparent;
    box-shadow: none;
    transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
                border-color 0.35s var(--ease-out),
                -webkit-backdrop-filter 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out);
  }
  /* hover: the frosted glass fades in so the cluster reads over anything */
  .header-inner:hover {
    background: rgba(var(--header-bg), 0.8);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-color: var(--line);
    box-shadow: 0 10px 28px rgba(var(--shadow-color), 0.1); /* the float */
  }
  .header-controls { gap: 26px; }
  /* thin separators between menu | language | theme, in the theme's own
     hairline color (var(--line) flips with the palette). The language|
     theme divider is a zero-width flex item slotted between the siblings
     via order — the rhythm stays symmetric around it. */
  .header-controls { border-left: 1px solid var(--line); padding-left: 26px; }
  .header-inner .lang-switch { order: 0; }
  .header-inner .theme-toggle { order: 2; }
  .header-controls::after {
    content: ""; order: 1;
    width: 1px; align-self: stretch;
    background: var(--line);
  }
  /* dark mode keeps a touch more opacity — the bright sky behind a thin
     dark wash would swallow the light marks otherwise */
  [data-theme="dark"] .header-inner { background: rgba(var(--header-bg), 0.6); }
  [data-theme="dark"] .header-inner:hover { background: rgba(var(--header-bg), 0.9); }

  /* the groups melt into the shared surface: no chips of their own */
  .site-nav {
    gap: 26px; padding: 0;
    border: none; background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .header-inner .lang-switch { border: none; background: transparent; }
  .header-inner .lang-btn { border-radius: 8px; }
  .header-inner .theme-toggle { border-radius: 10px; }
  .header-inner .site-nav .nav-cta { border-radius: 10px; }

  /* past the hero: hover still turns the surface more solid */
  .site-header.is-past-hero .header-inner:hover {
    background: rgba(var(--header-bg), 0.94);
    box-shadow: 0 12px 30px rgba(var(--shadow-color), 0.14);
  }
  [data-theme="dark"] .site-header.is-past-hero .header-inner:hover { background: rgba(var(--header-bg), 0.96); }
}