@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F;
}
:root { color-scheme: light; --ink: #172a3a; --gutter: clamp(1.5rem, 5vw, 6rem); }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #ffb64d; font-family: "Source Serif 4", Georgia, serif; }
p { margin: 0; }
.landing { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.portrait { position: absolute; inset: 0; z-index: -1; background: url("../images/vlatko-landing-bg.png") center / cover no-repeat; }
.header { display: flex; align-items: center; justify-content: space-between; padding: 2rem var(--gutter); }
.wordmark { font-size: 1.6rem; font-weight: 900; line-height: .8; letter-spacing: -.065em; text-transform: uppercase; transform: rotate(-2deg); }
.wordmark span { display: block; }
.label, .eyebrow { font: 700 .7rem/1.4 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.label { border-bottom: 1px solid currentColor; padding-bottom: .5rem; }
.message { align-self: center; padding: 4rem var(--gutter) 5rem; width: 61%; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin-bottom: 2rem; }
.eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
h1 { font-size: clamp(4rem, 8.7vw, 10rem); font-weight: 900; line-height: .87; letter-spacing: -.065em; text-transform: uppercase; margin: 0 0 2rem; }
.period { color: #fff4d5; }
.intro { font-size: clamp(1.1rem, 1.8vw, 1.65rem); font-weight: 650; line-height: 1.3; }
.note { margin-top: .75rem; font-size: 1rem; line-height: 1.5; }
.footer { margin: 0 var(--gutter); padding: 1.2rem 0 1.5rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #172a3a66; font-size: .8rem; }
.footer p { font-weight: 700; }
.footer span { background: #ffcd71; padding: .15rem .4rem; }
@media (max-width: 760px) {
  .landing { grid-template-rows: auto auto minmax(340px, 54svh) auto; }
  .header { padding-top: 1.75rem; padding-bottom: 1rem; }
  .label { font-size: .58rem; letter-spacing: .09em; }
  .wordmark { font-size: 1.35rem; }
  .message { width: 100%; padding-top: 2.5rem; padding-bottom: 2rem; }
  .eyebrow { margin-bottom: 1.5rem; font-size: .65rem; }
  h1 { font-size: clamp(3.7rem, 13vw, 6rem); margin-bottom: 1.5rem; }
  .portrait { position: relative; inset: auto; grid-row: 3; background-size: auto 100%; background-position: 81% center; }
  .footer { flex-wrap: wrap; font-size: .7rem; padding-top: 1rem; padding-bottom: 1rem; }
}

/* Shared contact form styling from the main site. */
.contact-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(400px,1.28fr);gap:clamp(3rem,8vw,9rem);padding:clamp(4rem,9vw,9rem) var(--gutter)}.contact-intro h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.85;margin:0 0 2rem}.contact-intro p{max-width:27rem}.contact-intro>a{font-weight:900}.contact-form{display:grid;gap:1.3rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.contact-form label{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}.contact-form label span{font-weight:400;text-transform:none;letter-spacing:0}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:.45rem;background:transparent;border:0;border-bottom:var(--border);padding:.75rem .2rem;outline:0}.contact-form textarea{border:var(--border);padding:.9rem;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{background:var(--white);box-shadow:0 0 0 3px var(--orange)}.check-field{display:flex;gap:.8rem;align-items:flex-start}.check-field input{width:22px;height:22px;flex:0 0 auto;margin:0}.contact-form>.button{justify-self:start}.honeypot{position:absolute;left:-9999px}.notice{padding:1rem;border:var(--border);font-weight:800}.notice-success{background:var(--mint)}.notice-error{background:var(--orange)}

:root { --border: 2px solid var(--ink); --white: #fffdf1; --orange: #ec843e; --mint: #84ceb9; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.contact-layout { background: #f4edc5; border-top: var(--border); }
.contact-intro .eyebrow { margin-bottom: 1.5rem; }
.contact-intro p { line-height: 1.6; margin-bottom: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 52px; padding: .8rem 1.2rem; border: var(--border); font-weight: 800; text-decoration: none; cursor: pointer; }
.button-dark { background: var(--ink); color: var(--white); }
.button:hover { background: #29465b; }
.contact-link { margin-top: 2rem; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; } }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }