/* ==========================================================================
   GEOLINK — "Prerez" (Section Through Ground)
   Hand-authored design system. One dark ground, end to end: the sealed,
   below-grade dark where the work is hidden. Depth comes from a hairline
   edge, one type family, and photography given room.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font: Archivo (variable, weight 300-800), self-hosted. Subsets latin and
   latin-ext (c/s/z with caron). Same files and unicode-ranges the Google-hosted
   version used. SIL Open Font License 1.1 - see assets/fonts/LICENSE.txt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-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, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background: var(--deep);
  scrollbar-color: var(--deep-line) var(--deep);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}
img { height: auto; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol { list-style: none; }
:where(h1, h2, h3, h4) {
  font-weight: inherit;
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ground */
  --deep:        oklch(13% .008 250);
  --deep-2:      oklch(17.5% .009 250);
  --deep-line:   oklch(27% .008 250);
  --deep-fg:     oklch(97.5% .003 250);
  --deep-mut:    oklch(72% .007 250);
  /* prejšnja barva (modro-tirkizna, do sept. 2026): oklch(76% .09 222) */
  --deep-accent: oklch(52% .086 188);
  /* svetlejša različica za besedilo in ikone na temnem ozadju (kontrast >= 4,5:1); ozadja gumbov ostanejo --accent */
  --accent-text: oklch(58% .086 188);

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1520px;
  --pad-section: clamp(88px, 13vh, 184px);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur: .6s;

  /* Active ground (defaults to deep; body starts below grade) */
  --bg: var(--deep);
  --fg: var(--deep-fg);
  --mut: var(--deep-mut);
  --line: var(--deep-line);
  --accent: var(--deep-accent);
  --surface: var(--deep-2);
  --media-edge: 1px solid var(--deep-line);
  --media-shadow: none;
}

[data-ground="deep"] {
  --bg: var(--deep);
  --fg: var(--deep-fg);
  --mut: var(--deep-mut);
  --line: var(--deep-line);
  --accent: var(--deep-accent);
  --surface: var(--deep-2);
  /* An edge is drawn, not lit: a hairline defines the frame, no shadow. */
  --media-edge: 1px solid var(--deep-line);
  --media-shadow: none;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

body {
  font-size: clamp(.975rem, .93rem + .22vw, 1.075rem);
  font-weight: 380;
  line-height: 1.6;
  letter-spacing: -.003em;
}

/* Tracking tightens as size grows — size-specific, never one value for all. */
.t-display {
  font-size: clamp(3.1rem, 1.1rem + 9.1vw, 10.5rem);
  font-weight: 600;
  line-height: .93;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.t-h2 {
  font-size: clamp(2.2rem, 1.25rem + 3.6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.t-h3 {
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.t-lead {
  font-size: clamp(1.075rem, .97rem + .5vw, 1.4rem);
  font-weight: 380;
  line-height: 1.5;
  letter-spacing: -.011em;
  color: var(--mut);
  text-wrap: pretty;
  max-width: 46ch;
}

.t-label {
  font-size: .6875rem;
  font-weight: 550;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mut);
}

.t-index {
  font-size: .6875rem;
  font-weight: 550;
  line-height: 1;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ground {
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

.section {
  padding-block: var(--pad-section);
  scroll-margin-top: 72px;
}
.section + .section,
.section + .footer { border-top: 1px solid var(--line); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* Skip link */
.skip {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 550;
  transition: transform .3s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. Navigation — translucent material, adapts to the ground beneath it
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  --nav-fg: var(--deep-fg);
  --nav-mut: var(--deep-mut);
    --nav-line: transparent;
  --nav-tint: transparent;
  color: var(--nav-fg);
  background: var(--nav-tint);
  border-bottom: 1px solid var(--nav-line);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              color .5s var(--ease), backdrop-filter .5s var(--ease);
}

.nav.is-stuck {
  --nav-tint: oklch(13% .008 250 / .72);
  --nav-line: oklch(100% 0 0 / .09);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--nav-fg);
  transition: opacity .3s var(--ease);
}
.nav__brand {
  font-size: .8125rem;
  font-weight: 550;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.nav__brand:hover { opacity: .68; }

/* Wordmark as a mask so it inherits the ground's colour exactly */
.mark {
  display: block;
  height: 19px;
  aspect-ratio: 418.55 / 100;
  background: currentColor;
  -webkit-mask: url("/images/geolink-wordmark-adaptive.svg") center / contain no-repeat;
  mask: url("/images/geolink-wordmark-adaptive.svg") center / contain no-repeat;
}
.mark--lg { height: clamp(34px, 6vw, 58px); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav__link {
  position: relative;
  font-size: .8125rem;
  font-weight: 480;
  letter-spacing: -.005em;
  color: var(--nav-mut);
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__link:hover { color: var(--nav-fg); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__side {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.lang a {
  color: var(--nav-mut);
  transition: color .3s var(--ease);
}
.lang a:hover { color: var(--nav-fg); }
.lang a[aria-current="page"] { color: var(--accent-text); }
.lang__sep {
  color: var(--nav-mut);
  opacity: .5;
}

/* Hamburger */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  place-items: center;
  border-radius: var(--r-pill);
  transition: background .3s var(--ease);
}
.burger:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.burger span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--r-pill);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: center;
  padding: 0 var(--gutter);
  background: oklch(13% .008 250 / .88);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  color: var(--deep-fg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.sheet[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.sheet__list {
  display: grid;
  gap: 4px;
}
.sheet__item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px solid var(--deep-line);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.028em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet[data-open="true"] .sheet__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
}
.sheet__item .t-index { font-size: .75rem; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 104px;
  padding-bottom: clamp(28px, 5vh, 56px);
  position: relative;
  isolation: isolate;
}

/* Fine mineral grain — material, not decoration. Deep ground only. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bottom-weighted: the mass of empty ground above the type is the point. */
.hero__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(26px, 5vh, 68px);
}

/* Lockup: the wordmark and the line beneath it share one width. --H is the
   wordmark height; the headline is sized from it so the two edges align. */
.hero {
  --H: clamp(min(4.4rem, 20vw), min(9.5vw, 21vh), 12.5rem);
  --k: .61;
}
html[lang="en"] .hero { --k: .49; }
.mark--hero { height: var(--H); }
.hero .hero__logo {
  padding-bottom: 0;
  margin-bottom: calc(var(--H) * .3);
}
.hero__title {
  display: flex;
  flex-wrap: nowrap;
  column-gap: .26em;
  font-size: calc(var(--H) * var(--k));
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  margin-bottom: clamp(30px, 4.4vh, 56px);
}
.hero__title > span { display: block; }

.hero__lead {
  margin-bottom: clamp(30px, 4vh, 52px);
  max-width: 52ch;
}
.hero__lead span { display: block; }

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.hero__rise,
.hero__fade {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(90ms * var(--i, 0) + 260ms);
}
/* Hidden only while JS is running (html.js is set by an inline script in <head>),
   so without JS, and in print, the content is simply visible. */
html.js .hero__rise,
html.js .hero__fade {
  opacity: 0;
  transform: translateY(18px);
}
html.js.is-ready .hero__rise,
html.js.is-ready .hero__fade {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   7. Links & buttons
   -------------------------------------------------------------------------- */

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.008em;
  padding-block: 4px;
  color: var(--fg);
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.link:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}
.link .arrow { transition: transform .45s var(--ease); }
.link:hover .arrow { transform: translateX(5px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 62px;
  padding: 16px 22px 16px 26px;
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.008em;
  border: 1px solid var(--line);
  color: var(--fg);
  background: transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), transform .18s var(--ease);
}
.btn .arrow {
  color: var(--mut);
  transition: transform .45s var(--ease), color .4s var(--ease);
}
.btn:hover { border-color: color-mix(in oklab, var(--fg) 38%, transparent); }
.btn:hover .arrow {
  transform: translateX(5px);
  color: var(--fg);
}
.btn:active { transform: scale(.985); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--deep-fg);
}
.btn--primary .arrow { color: color-mix(in oklab, var(--deep-fg) 62%, transparent); }
.btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 88%, black);
  border-color: color-mix(in oklab, var(--accent) 88%, black);
}
.btn--primary:hover .arrow { color: var(--deep-fg); }

.arrow {
  font-feature-settings: "liga" 0;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. Service sections
   -------------------------------------------------------------------------- */

.svc__head {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(44px, 6vw, 88px);
}
.svc__claim { max-width: 18ch; }
.svc__media { margin-top: clamp(56px, 8vw, 120px); }
.section--tight { padding-bottom: clamp(56px, 8vh, 120px); }
.t-lead--wide { max-width: 62ch; }
.statement__line { margin-top: clamp(22px, 3vw, 34px); }
.stat__num--text {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: -.02em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Section 01: sticky statement beside a scrolling list */
.split {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(48px, 6vw, 112px);
  }
  .split__aside {
    position: sticky;
    top: 132px;
    align-self: start;
  }
}

.svc__title { margin-bottom: 22px; }

/* Item list */
.items { display: grid; }
.items--grid { margin-top: clamp(44px, 6vw, 88px); }
.items__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  transition: border-color .4s var(--ease);
}
.items__row:last-child { border-bottom: 1px solid var(--line); }
.items__num {
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--mut);
  padding-top: .45em;
  transition: color .4s var(--ease);
}
.items__row:hover .items__num { color: var(--accent-text); }
.items__name {
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.014em;
  color: var(--fg);
  text-wrap: pretty;
}
/* The copy already separates title from description with an em dash; the
   dash stays exactly where it is and simply changes voice mid-sentence. */
.items__desc {
  color: var(--mut);
  font-weight: 380;
}

/* 2×2 grid variant for section 02 */
@media (min-width: 820px) {
  .items--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .items--grid .items__row:nth-child(2) { border-top: 1px solid var(--line); }
  .items--grid .items__row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   9. Media
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: clip;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: var(--media-edge);
  box-shadow: var(--media-shadow);
}
.media img { width: 100%; }

.media__cap {
  margin-top: 14px;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--mut);
  max-width: 52ch;
}

.pair {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(48px, 6vw, 88px);
}
.pair .media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; } }

/* Scroll-scrubbed arrival. Progressive enhancement only. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .media img {
      animation: media-settle linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 46%;
    }
    @keyframes media-settle {
      from { transform: scale(1.07); }
      to   { transform: scale(1); }
    }
  }
}

/* --------------------------------------------------------------------------
   10. Statement + stats
   -------------------------------------------------------------------------- */

.statement {
  display: grid;
  gap: clamp(44px, 6vw, 96px);
}
@media (min-width: 960px) {
  .statement {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}

.stats { display: grid; }
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.stat:last-child { border-bottom: 1px solid var(--line); }
.stat__num {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat__label { text-align: right; }

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
}
@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
  }
}
.contact__actions {
  display: grid;
  gap: 12px;
  font-style: normal; /* <address> is italic by default */
}
.contact .eyebrow,
.split__aside .eyebrow { margin-bottom: clamp(18px, 2.4vw, 28px); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}
.footer__mark {
  color: var(--fg);
  opacity: .9;
}
.footer__mark svg, .footer__mark img {
  height: clamp(34px, 6vw, 58px);
  width: auto;
}
.footer__entity {
  margin-top: clamp(20px, 2.6vw, 30px);
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .15em;
  color: var(--mut);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(36px, 5vw, 64px);
}
.footer__legal {
  font-size: .8125rem;
  color: var(--mut);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 32px);
}
.footer__nav a {
  font-size: .8125rem;
  color: var(--mut);
  transition: color .3s var(--ease);
}
.footer__nav a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */

.r {
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(70ms * var(--i, 0));
}
html.js .r {
  opacity: 0;
  transform: translateY(22px);
}
html.js .r.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   15. Browser surfaces
   -------------------------------------------------------------------------- */

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb {
  background: var(--deep-line);
  border: 3px solid var(--deep);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--deep-mut); }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .split__aside { position: static; }
  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (min-width: 900px) {
  .sheet { display: none; }
}

/* --------------------------------------------------------------------------
   17. Accessibility preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck {
    --nav-tint: var(--deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sheet {
    background: var(--deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .hero__rise,
  .hero__fade,
  .r {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   18. 404 page (404.html, en/404.html) - reuses the hero shell; only used there
   -------------------------------------------------------------------------- */

/* Neodvisno od .hero (ki uporablja grid-template-rows: 1fr auto - to bi
   vsebino pripelo na dno): .nf je samostojen flex stolpec, ki resnično
   centrira svojo vsebino navpično na sredino zaslona, ne glede na višino
   okna (testirano pri 700, 900, 1080, 1300 px). */
.nf {
  min-height: 100svh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Logotip: levo zgoraj, na višini kot v glavi glavne strani (64 px visoka vrstica) */
.nf__top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 64px;
  display: flex;
  align-items: center;
}
.nf__logo {
  display: block;
  color: var(--fg);
  transition: opacity .3s var(--ease);
}
.nf__logo .mark {
  height: clamp(24px, 2.4vw, 32px);
}
.nf__logo:hover {
  opacity: .68;
}

/* Vsebinski blok: padding-block ohranja razdaljo od logotipa/roba zaslona
   pri nizkih oknih, ne da bi vplival na navpično centriranje (.nf skrbi
   zanj preko justify-content, ne ta blok). */
.nf__body {
  padding-block: 96px;
}
.nf__content {
  width: 100%;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nf__content .eyebrow {
  align-self: stretch;
}
.nf__eyebrow {
  margin-bottom: 16px;
}
.nf__title {
  margin-bottom: 16px;
}
.nf__lead {
  margin-bottom: 40px;
}
.nf__btn {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   19. Print
   Everything is visible (no reveal states), on white with dark text, the fixed
   nav flows into the page instead of repeating, and the wordmark still prints.
   -------------------------------------------------------------------------- */

@media print {
  html {
    background: #fff;
  }
  :root,
  [data-ground] {
    --bg: #fff;
    --fg: #111;
    --mut: #444;
    --line: #bbb;
    --accent: #0b5c56;
    --accent-text: #0b5c56;
    --surface: #f3f3f3;
    --media-edge: 1px solid #bbb;
    color-scheme: light;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .r,
  .hero__rise,
  .hero__fade,
  .media img {
    opacity: 1 !important;
    transform: none !important;
  }
  .grain::after,
  .sheet,
  .skip,
  .burger {
    display: none !important;
  }
  .hero {
    min-height: 0;
  }
  .nav {
    --nav-fg: #111;
    --nav-mut: #444;
    position: static;
    background: none;
    border-bottom: 0;
  }
  .mark {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .btn--primary {
    background: none;
    color: var(--fg);
    border-color: var(--fg);
  }
  .btn--primary .arrow {
    color: var(--mut);
  }
  .media,
  .items__row,
  .stat {
    break-inside: avoid;
  }
}