[hidden] { display: none !important; }
.vi-skip-link { position: fixed; left: 20px; top: -100px; z-index: 100000; padding: 12px 18px; background: #fff; color: #111; }
.vi-skip-link:focus { top: 12px; }
.admin-bar .site-header, .admin-bar .legal-header { top: 32px; }
.legal-content .wp-block-image img { height: auto; }
.legal-content a { text-decoration: underline; text-underline-offset: 4px; }
.legal-content p { margin-block: 1em; }
.vi-form-fallback { padding: 30px; border: 1px solid #ffffff33; }
.vi-no-frames .video-journey { height: 100svh; }
.vi-no-frames .video-brand-lockup, .vi-no-frames .video-caption, .vi-no-frames .video-loader, .vi-no-frames .video-scroll-cue { display: none; }
.vi-no-frames .video-final { opacity: 1; visibility: visible; }
@media (max-width: 782px) { .admin-bar .site-header, .admin-bar .legal-header { top: 46px; } }
@media (max-width: 600px) { #wpadminbar { position: fixed; } }

/* Main display typography, 20% smaller at each original breakpoint. */
.video-caption span { font-size: clamp(2.32rem, 5.12vw, 5.92rem); }
.video-final h1 { font-size: clamp(2.56rem, 5.24vw, 6rem); }
.brand-statement h2 { font-size: clamp(2.8rem, 6.72vw, 7.68rem); }
.section-heading h2 { font-size: clamp(2.16rem, 4.48vw, 5.12rem); }
.about-section__title h2 { font-size: clamp(2.4rem, 4.56vw, 5.2rem); }
.developer-focus h2 { font-size: clamp(1.92rem, 3.4vw, 4rem); }
.contact-intro h2 { font-size: clamp(2.4rem, 4.48vw, 5.12rem); }
@media (max-width: 900px) {
  .video-caption span { font-size: clamp(2.08rem, 9.6vw, 4.08rem); }
  .video-final h1 { font-size: clamp(2.32rem, 9.6vw, 4.48rem); }
  .brand-statement h2 { font-size: clamp(2.32rem, 9.92vw, 5.12rem); }
  .section-heading h2 { font-size: clamp(2.16rem, 8.96vw, 4rem); }
  .about-section__title h2 { font-size: clamp(2.24rem, 8.96vw, 4.24rem); }
  .developer-focus h2 { font-size: clamp(2.24rem, 8.96vw, 4.16rem); }
  .contact-intro h2 { font-size: clamp(1.92rem, 8.16vw, 4.16rem); }
}
@media (max-height: 600px) and (orientation: landscape) {
  .video-caption span { font-size: clamp(1.36rem, 5.6svh, 2.4rem); }
  .video-final h1 { font-size: clamp(1.6rem, 7.2svh, 2.8rem); }
}

/* Two contact actions; keep generous touch targets on a narrow screen. */
.inquiry-form .form-footer { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.form-footer .form-actions button { flex: 1 1 205px; min-width: 0; width: auto; gap: 12px; }
.form-footer .appointment-trigger { color: #f4f2ee; background: transparent; }
.form-footer .appointment-trigger:hover { color: #121212; background: #f4f2ee; }

.appointment-dialog { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 32px)); max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 30px; border: 1px solid #d8d3c9; border-radius: 8px; background: #f7f5f1; color: #171715; box-shadow: 0 24px 80px #0004; color-scheme: light; }
.appointment-dialog:not([open]) { display: none; }
.appointment-dialog::backdrop { background: #0a0a0abd; backdrop-filter: blur(8px); }
.appointment-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; cursor: pointer; }
.appointment-close:hover { background: #e9e5dd; }
.appointment-close svg { width: 20px; height: 20px; stroke-width: 1.3px; }
.appointment-eyebrow { margin: 0 44px 16px 0; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; }
.appointment-dialog h2 { margin: 0 24px 10px 0; font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 300; line-height: 1.2; letter-spacing: -.025em; }
.appointment-description { margin: 0 12px 24px 0; max-width: 34em; color: #69665f; font-size: .86rem; line-height: 1.55; }
.appointment-fields { display: grid; gap: 14px; min-width: 0; }
.appointment-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; min-width: 0; }
.appointment-form label { display: grid; gap: 7px; min-width: 0; font-size: .75rem; line-height: 1.4; color: #46443e; }
.appointment-form label small { color: #777269; font-size: inherit; }
.appointment-form input, .appointment-form select, .appointment-form textarea { appearance: auto; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 46px; padding: 10px 11px; border: 1px solid #c6c0b5; border-radius: 4px; background: #fff9; color: #191817; font: inherit; font-size: 16px; line-height: 1.4; box-sizing: border-box; }
.appointment-form textarea { resize: vertical; min-height: 70px; max-height: 180px; }
.appointment-form input:focus, .appointment-form select:focus, .appointment-form textarea:focus { outline: 1px solid #272520; outline-offset: 2px; }
.appointment-form input[type=date], .appointment-form input[type=time] { overflow: hidden; }
.appointment-timezone { margin: -6px 0 0; font-size: .68rem; color: #777269; }
.appointment-note { margin: 2px 0; color: #69665f; font-size: .76rem; line-height: 1.5; }
.appointment-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 13px 18px; border: 1px solid #171715; border-radius: 999px; background: #171715; color: #fff; cursor: pointer; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.appointment-submit:hover { background: #37352f; }
.appointment-submit:disabled { opacity: .6; cursor: wait; }
.appointment-submit svg { width: 18px; height: 18px; stroke-width: 1.4px; flex: 0 0 18px; }
.appointment-privacy { margin: 0; color: #777269; font-size: .68rem; line-height: 1.5; }
.appointment-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.appointment-error { margin: 0; padding: 11px 12px; border: 1px solid #a76454; border-radius: 4px; color: #893b2c; background: #fff7f2; font-size: .8rem; overflow-wrap: anywhere; }
.appointment-success { padding: 12px 0 0; }
.appointment-success>svg { width: 34px; height: 34px; margin-bottom: 18px; stroke-width: 1.2px; }
.appointment-success h3 { margin: 0 0 14px; font-size: 1.5rem; font-weight: 300; line-height: 1.2; }
.appointment-success p { margin: 12px 0; font-size: .86rem; line-height: 1.6; overflow-wrap: anywhere; }
.appointment-success .appointment-submit { margin-top: 22px; justify-content: center; }
@media (max-width: 480px) {
  .form-footer .form-actions button { flex-basis: 100%; }
  .appointment-dialog { padding: 24px 20px; }
  .appointment-person { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .appointment-description { margin-bottom: 18px; }
}
@media (max-width: 380px) { .appointment-row { grid-template-columns: minmax(0,1fr); } }

/* 1.1.1 — One locally hosted typeface throughout the public website. */
:root {
  --vi-typeface: "Inter Atelier", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: var(--vi-typeface);
  --font-display: var(--vi-typeface);
  --font-mono: var(--vi-typeface);
}
html, body { font-family: var(--vi-typeface); font-kerning: normal; }
body { font-weight: 350; }
button, input, select, textarea { font-family: var(--vi-typeface); }
h1, h2, h3, h4, h5, h6, .video-caption span,
.stats-strip strong, .developer-project__facts strong, .mobile-menu nav a {
  font-family: var(--vi-typeface);
}
.video-caption span, .video-final h1, .brand-statement h2,
.section-heading h2, .about-section__title h2, .developer-focus h2,
.contact-intro h2, .founder-copy h3 {
  font-weight: 260;
  letter-spacing: -.028em;
  line-height: 1.12;
}
.project-card h3, .service-list h3, .process-list h3,
.appointment-dialog h2, .appointment-success h3 {
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.desktop-nav { font-weight: 400; letter-spacing: .1em; }
.section-kicker, .project-card__copy>p, .project-card dt,
.appointment-eyebrow, .inquiry-form label>span {
  font-weight: 400;
  letter-spacing: .12em;
}
.about-section__copy p, .founder-copy>p:not(.section-kicker),
.section-heading--split>p, .section-heading>p:last-child:not(.section-kicker),
.service-list p, .process-list p, .contact-intro>p:not(.section-kicker) {
  font-weight: 350;
  line-height: 1.65;
}
.form-footer button, .appointment-submit { font-weight: 400; letter-spacing: .075em; }

/* A slightly smaller project presentation; preserve original photo ratios. */
.projects-section { padding-block: clamp(100px, 10.5vw, 180px); }
.projects-section>.section-heading, .projects-section>.project-grid {
  width: 92%;
  max-width: 1440px;
  margin-inline: auto;
  min-width: 0;
}
.projects-section .section-heading h2 { font-size: clamp(2rem, 4.1vw, 4.7rem); }
.projects-section .project-grid { row-gap: clamp(38px, 5vw, 84px); }
.project-card h3 { font-size: clamp(1.45rem, 2.1vw, 2.7rem); }
.project-card__copy { padding-top: 22px; }
.project-card dl { margin-top: 22px; }
.project-card .project-address { font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) {
  .projects-section { padding-block: 88px; }
  .projects-section>.section-heading, .projects-section>.project-grid { width: 96%; }
  .projects-section .section-heading h2 { font-size: clamp(1.95rem, 8.2vw, 3.65rem); }
  .projects-section .project-grid { row-gap: 56px; }
  .project-card h3 { font-size: clamp(1.55rem, 5.7vw, 2.5rem); }
}

/* Booking hours and topics; long German labels stay within the dialog. */
.appointment-form select { overflow: hidden; text-overflow: ellipsis; }
.appointment-form select:disabled { opacity: .55; cursor: not-allowed; }
.appointment-schedule { margin: -4px 0 0; color: #69665f; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.appointment-schedule:empty { display: none; }
.appointment-schedule.is-error { color: #893b2c; }
@media (max-width: 480px) { .appointment-row { grid-template-columns: minmax(0,1fr); } }