/* Kontakt: the last diptych, a photo half and the enquiry half. */

/* ============ the form is the hero ============ */
.kt{align-items:start;background:var(--band)}
.kt-ph{grid-column:full-start/m 6;grid-row:1;position:sticky;top:0;height:100lvh;min-height:640px;overflow:hidden;background:var(--band2)}
.kt-r{grid-column:m 7/m-end;grid-row:1;min-width:0;padding:116px 0 clamp(70px,7vw,120px)}
.kt-h{--span:6;--fmax:170px;line-height:.98}
.kt-lead{margin-top:22px;font-size:var(--body);font-weight:500;max-width:26em}
.kt-box{margin-top:clamp(30px,3.4vw,52px)}
.fm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gut);transition:opacity .4s,transform .5s var(--e2)}
.fm.is-sent{opacity:0;transform:translate3d(0,-16px,0)}
.f{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;min-width:0;margin:0;padding:0;border:0}
fieldset.f{display:block}
.f-half{grid-column:span 1}
.f-l{display:block;font-size:16px;font-weight:600;padding:0}
fieldset .f-l{margin-bottom:9px}
.f input:not([type=radio]),.f textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:0;border-radius:14px;height:56px;padding:0 18px;
  outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s;-webkit-appearance:none;appearance:none}
.f textarea{height:auto;min-height:132px;padding:15px 18px;resize:vertical;line-height:1.5}
.f input:focus,.f textarea:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.f.bad input{box-shadow:inset 0 0 0 2px var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ch{position:relative;display:inline-flex}
.ch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ch span{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:999px;background:#fff;font-size:16px;font-weight:500;transition:background-color .25s,color .25s}
.ch input:checked+span{background:var(--ink);color:#fff}
.ch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ch.flash span{animation:flash 1s var(--e2)}
@keyframes flash{0%{transform:none}35%{transform:scale(1.08)}100%{transform:none}}
.f-plus{margin-top:12px}
.f-plus .chip{background:#fff;font-size:15px}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Cloudflare Turnstile (26.10.2026): its 300x65 box keeps its space before the script arrives, so nothing below moves */
.f-ts{min-height:65px;margin-top:4px}
.f-ts .cf-turnstile{max-width:100%}
.f-send{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.f-send .btn[disabled]{opacity:.7;cursor:progress}
.f-err{display:flex;flex-direction:column;gap:2px;font-size:16px;font-weight:600;color:var(--red2)}
.fm-done{padding:clamp(10px,2vw,30px) 0}
.fm-ok{--span:6;--fmax:110px;line-height:.98}
html.js .fm-done .ln>span{transform:translate3d(0,140%,0);transition:transform 1.2s var(--e3)}
html.js .fm-done.in .ln>span{transform:none}
@media (max-width:899px){
  .kt-ph{position:relative;grid-column:full-start/full-end;grid-row:2;height:auto;min-height:0;aspect-ratio:4/5}
  .kt-r{grid-column:m 1/m-end;grid-row:1;padding:96px 0 56px}
  .kt-h{--span:12;--fmaxm:110px}
  .fm{grid-template-columns:1fr}
  .f-half{grid-column:1/-1}
  .fm-ok{--fmaxm:56px}
}

/* ============ Kako ide: a conversation, you on one side, him on the other ============ */
.kd{padding:clamp(110px,11vw,180px) 0 clamp(70px,7vw,120px)}
.kd-h-v{max-width:calc(var(--maxw) + 2 * var(--mar));margin:0 auto clamp(30px,3vw,50px);padding-inline:var(--mar);font-weight:600;font-size:clamp(18px,1.5vw,24px)}
.kd-g{align-items:start}
.kd-lab{grid-row:1;font-weight:800;font-size:clamp(90px,11vw,180px);letter-spacing:-.015em;line-height:.8}
.kd-lab-vi{grid-column:1/7}
.kd-lab-ja{grid-column:7/13}
.kd-l{display:contents}
.kd-s{display:block;margin-top:clamp(28px,3vw,48px)}
.kd-vi{grid-column:1/6}
.kd-ja{grid-column:7/12}
.kd-who{display:none}
.kd-t{display:block;padding-right:.06em;font-weight:700;font-size:clamp(26px,2.6vw,44px);letter-spacing:-.006em;line-height:1.08;text-wrap:balance}
@media (max-width:899px){
  .kd-lab{display:none}
  .kd-s{grid-row:auto!important;margin-top:28px}
  .kd-vi{grid-column:1/11}
  .kd-ja{grid-column:3/13}
  .kd-who{display:block;margin-bottom:6px;font-weight:600;font-size:15px;color:var(--ink2)}
  .kd-t{font-size:clamp(24px,6.6vw,30px)}
}

/* ============ where else to find him ============ */
.kl{padding:clamp(40px,4vw,70px) 0 clamp(110px,11vw,180px)}
.kl-g{align-items:end}
.kl-ig{grid-column:1/8;display:inline-flex;align-items:flex-end;gap:.08em;font-weight:800;font-size:clamp(50px,7vw,124px);letter-spacing:-.015em;line-height:.9;justify-self:start}
.kl-ig .ln{margin-right:0}
.kl-ig svg{width:.38em;height:.38em;flex:none;margin-bottom:.12em;stroke-width:2.4;transition:transform .55s var(--e2)}
.kl-ig:hover svg{transform:translate3d(.05em,-.05em,0)}
.kl-list{grid-column:8/13}
.kl-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:17px}
.kl-k{font-weight:600}
.kl-list a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:899px){
  .kl-ig{grid-column:1/-1;font-size:clamp(40px,12.6vw,68px)}
  .kl-list{grid-column:1/-1;margin-top:34px}
}
/* 26.10.2026: the privacy note under the send button */
.f-pp{flex:1 1 240px;font-size:14.5px;line-height:1.45;color:var(--mute)}
.f-pp a{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--grey)}
.f-pp a:hover{text-decoration-color:var(--red)}