:root {
  --ground: #FBFAF6;
  --surface: #EFEADF;
  --ink: #1C1F17;
  --ink-soft: #55593F;
  --olive: #555F3B;
  --olive-deep: #3A4522;
  --rule: #DCD7C9;
  --field: #FFFFFF;

  --display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15180F;
    --surface: #1F2415;
    --ink: #ECE8DA;
    --ink-soft: #A8AE8E;
    --olive: #A8BC6E;
    --olive-deep: #C4D493;
    --rule: #333A24;
    --field: #1A1E12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #15180F;
  --surface: #1F2415;
  --ink: #ECE8DA;
  --ink-soft: #A8AE8E;
  --olive: #A8BC6E;
  --olive-deep: #C4D493;
  --rule: #333A24;
  --field: #1A1E12;
  color-scheme: dark;
}

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body[data-lang="sl"] [data-lang="en"],
body[data-lang="en"] [data-lang="sl"] { display: none }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* --- glava --- */
.top { border-bottom: 1px solid var(--rule) }
.top .wrap {
  padding-block: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; min-width: 0; text-decoration: none; color: var(--olive) }
.brand .mark { height: 112px; width: auto; flex: none; display: block }
.brand:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px }
.headtools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap }

nav.site { display: flex; gap: 20px }
nav.site a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
nav.site a:hover { color: var(--ink) }
nav.site a[aria-current="page"] { color: var(--olive); border-bottom-color: var(--olive) }
nav.site a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px }

.langs { display: flex; gap: 0; flex: none }
.langs button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.langs button:first-child { border-radius: 3px 0 0 3px }
.langs button:last-child { border-radius: 0 3px 3px 0; border-left: none }
.langs button[aria-pressed="true"] {
  background: var(--olive);
  color: var(--ground);
  border-color: var(--olive);
}
.langs button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px }

@media (max-width: 560px) {
  .brand .mark { height: 88px }
  .top .wrap { padding-block: 14px }
  .headtools { gap: 14px; width: 100%; justify-content: space-between }
}

/* --- odseki --- */
section { border-bottom: 1px solid var(--rule) }
section > .wrap { padding-block: 58px }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 18px;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 20px;
}
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 20px;
}
h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
}
p { margin: 0 0 16px; max-width: 62ch }
p:last-child { margin-bottom: 0 }
.lede { font-size: 19px; color: var(--ink-soft) }

/* --- storitve --- */
.services { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 620px) { .services { grid-template-columns: 1fr } }
.services > div { min-width: 0 }
.services p { font-size: 16px; color: var(--ink-soft); margin: 0 }

/* --- postopek --- */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: s }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}
.steps li:first-child { border-top: none; padding-top: 0 }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--olive);
  padding-top: 3px;
}
.steps p { font-size: 16px; color: var(--ink-soft); margin: 0 }

/* --- podatki o družbi --- */
.record {
  background: var(--surface);
  border-radius: 4px;
  padding: 26px 28px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.95;
}
.record dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 0 18px;
}
@media (max-width: 560px) {
  .record dl { grid-template-columns: 1fr; gap: 0 }
  .record dt { margin-top: 12px }
  .record dt:first-child { margin-top: 0 }
}
.record dt { color: var(--ink-soft) }
.record dd { margin: 0; font-variant-numeric: tabular-nums }

/* --- kontaktni podatki --- */
.contact { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 560px) { .contact { grid-template-columns: 1fr } }
.contact > div { min-width: 0 }
.contact .label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.contact .value {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  overflow-wrap: anywhere;
}
.contact a.value { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule) }
.contact a.value:hover { border-bottom-color: var(--olive); color: var(--olive) }

/* --- obrazec --- */
form.enquiry { margin: 0 }
.grid2 { display: grid; gap: 18px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr } }
.field { min-width: 0; display: flex; flex-direction: column }
.field.full { grid-column: 1 / -1 }
.field label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field .req { color: var(--olive) }
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 11px 13px;
  width: 100%;
  min-width: 0;
}
.field textarea { resize: vertical; min-height: 140px }
.field select { appearance: none; background-image: none; cursor: pointer }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 18%, transparent);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: #A8452F }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.formfoot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
button.send {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ground);
  background: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 3px;
  padding: 12px 26px;
  cursor: pointer;
}
button.send:hover { background: var(--olive-deep); border-color: var(--olive-deep) }
button.send:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px }
button.send[disabled] { opacity: 0.55; cursor: progress }

.formnote { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); margin: 0; max-width: 46ch; line-height: 1.6 }

.status { margin-top: 22px; padding: 14px 16px; border-radius: 3px; font-size: 15.5px; display: none }
.status.on { display: block }
.status.ok { background: color-mix(in srgb, var(--olive) 14%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent) }
.status.bad { background: color-mix(in srgb, #A8452F 12%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, #A8452F 40%, transparent) }

footer .wrap {
  padding-block: 26px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}