/* WordPress-specific adjustments layered over main.css (the base stylesheet).
   Anything WordPress needs (admin bar, menu markup, plugin widgets) belongs
   here. */

/* Fixed header vs. logged-in admin bar */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-menu { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .mobile-menu { top: 46px; }
}
/* Below 600px core switches #wpadminbar to position:absolute, so it scrolls
   away while the header stays pinned 46px down — mid-page the header floats
   with content peeking above it. Pin the bar so the offset stays true
   (admin-only viewports; visitors never load the admin bar). */
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed !important; }
}
/* The bar also pushes the page down, so the 100svh hero ends below the
   fold — subtract the bar height (visitors are unaffected, they have no
   admin bar). */
body.admin-bar .hero { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .hero { min-height: calc(100svh - 46px); }
}

/* wp_nav_menu renders <ul><li><a> — flatten to the design's bare-link layout */
nav.main ul,
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
nav.main li,
.mobile-menu li {
  display: contents;
}

/* Language switch: with TranslatePress each language lives on its own URL, so
   the switch renders <a> instead of <button> — mirror main.css's .lang button
   rules for anchors. */
.lang a {
  font: inherit;
  padding: 0 11px;
  color: var(--grey-mut);
  transition: color .25s;
}
.lang a:first-child { padding-left: 0; }
.lang a.on {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.lang a:hover { color: var(--ink); }
.site-header .lang a { color: rgba(255, 255, 255, .6); }
.site-header .lang a.on,
.site-header .lang a:hover { color: #fff; }
.fbar .lang a { color: rgba(255, 255, 255, .46); } /* .45 hit 4.48:1 on #15171a — 4.5 needed (WCAG AA) */
.fbar .lang a.on,
.fbar .lang a:hover { color: #fff; }

/* Header logo enlarged from the design's 30px on client request (bumped in
   steps to the current 62px). Under 920px the bar is shorter (see below),
   so the logo stays smaller there to keep its air. */
.hdr .logo img { height: 62px; }
@media (max-width: 920px) {
  .hdr .logo img { height: 50px; }
}
/* footer logo rides the same scale (client request 23.7.: match the navbar) */
.site-footer .flogo img { height: 62px; }
@media (max-width: 920px) {
  .site-footer .flogo img { height: 50px; }
}
/* Bar heights raised to match the enlarged logo — the 88px bar was designed
   around a 30px logo (29px of air each side); at 62px the logo had 13px at
   rest and 6px scrolled. Restored proportions: 21px air at rest, 14px
   scrolled; the sub-920 bar follows for its 50px logo. */
.hdr { height: 104px; }
.site-header.scrolled .hdr { height: 90px; }
@media (max-width: 920px) {
  .hdr { height: 76px; }
  .site-header.scrolled .hdr { height: 70px; }
}
/* JS-measured collapse (main.js): above the 920px floor, the hamburger takes
   over as soon as the free run between the logo and the link cluster drops
   under one average link width — the links yield, the logo never shrinks.
   Measured live, so the longer EN labels collapse earlier on their own. */
html.nav-tight nav.main { display: none; }
html.nav-tight .navtoggle { display: flex; }
/* when nav-tight flips, main.js replays this glide on the lang switch and on
   whichever control just appeared (links or hamburger), so the cluster
   settles into its new position instead of teleporting */
@keyframes hdr-swap-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* !important: the header-entrance rules below (body.loaded .hdr .lang
   { animation: pl-hdr-in ... }, + a .385s delay longhand) outrank
   any normal-specificity selector, so without it the replayed swap never
   reaches the computed style and the flip doesn't animate */
.hdr .hdr-swap { animation: hdr-swap-in .35s ease-out both !important; animation-delay: var(--swap-delay, 0s) !important; }
@media (prefers-reduced-motion: reduce) { .hdr .hdr-swap { animation: none !important; } }
/* the logo is never negotiable: without this, flex squeezes the .logo item
   during a live resize (img max-width:100% then compresses the mark) in the
   frames before the JS collapse lands */
.hdr .logo { flex-shrink: 0; }

/* Top navbar blur band (.hero-media::before in main.css, 132px / solid-to-45%)
   was sized for the original 30px logo in an 88px bar. With the 62px logo in
   the 104px bar the logo bottom sits at 83px — the band started fading above
   it. Resized so full-strength blur reaches ~96px (a hair past the logo, the
   same margin the scrolled 90px gray bar gives its logo), then fades out. */
.hero-media::before {
  height: 160px;
  background: linear-gradient(180deg, rgba(10,14,20,.5) 0%, rgba(10,14,20,.14) 60%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, #000 60%, transparent 100%);
          mask: linear-gradient(180deg, #000 60%, transparent 100%);
}
/* sub-920 bar is 76px with a 50px logo (bottom at 63px) → band scales down */
@media (max-width: 920px) {
  .hero-media::before {
    height: 124px;
    -webkit-mask: linear-gradient(180deg, #000 58%, transparent 100%);
            mask: linear-gradient(180deg, #000 58%, transparent 100%);
  }
}

/* ---- Standard type sizes --------------------------------------------------
   The base editorial sizes read too small. Body text raised to a 16px floor
   (17px from ~1420px up, was 15px until ~1620px); every Roboto Mono
   micro-label and the 13px chrome moved up one step. Headings, buttons, nav
   and 14px+ secondary text unchanged. main.css keeps the base values; these
   same-specificity overrides win by load order. careers/company/utility.css
   carry their own edits. */

/* Body reading text: 15px floor → 16 (base clamp(15px,1.05vw,17px)). */
.prose,
.ed-sec .ed-body p,
.ed-trio .col p { font-size: clamp(16px, 1.2vw, 17px); }
.ncard .nexc { font-size: 16px; }

/* Mono micro-labels: all 14px (was 9.5–12px tiers; raised to a uniform 14,
   matching the 13px-chrome rule below, so every small mono element on the
   site reads 14px). */
.eyebrow,
.ed-more .k,
.ed-trio .col .k,
.ph .cap,
.block .media .cap,
.ed-figure .cap,
.hero-tag,
.pillar-head .count,
.statband .lbl,
.ncard .date,
.ncard .nimg .tag,
.scrollcue,
.brand-slide .bcap { font-size: 15px; }
/* …and 12px on phone/tablet; 920 = the hamburger breakpoint.
   careers/company/utility.css repeat this for their own labels (they load
   after this sheet, so the override must live there). */
@media (max-width: 920px) {
  .eyebrow,
  .ed-more .k,
  .ed-trio .col .k,
  .ph .cap,
  .block .media .cap,
  .ed-figure .cap,
  .hero-tag,
  .pillar-head .count,
  .statband .lbl,
  .ncard .date,
  .ncard .nimg .tag,
  .scrollcue,
  .brand-slide .bcap { font-size: 13px; }
}

/* 13px chrome: language switch, footer legal bar, pillar/job indices. */
.lang,
.fbar,
.pillar-head .num { font-size: 15px; }             /* 13 → 14 → 15 */

/* Company pages, "Druge družbe skupine" on small screens: the shared mobile
   rule squares the tiles (1/1), but three across they read too squat —
   50% taller. Front page (2×2) keeps the squares. */
@media (max-width: 900px) {
  .brand-grid.cols-3 .brand-slide .bimg { aspect-ratio: 2/3; }
  /* Tile names: 16px floor on phones — the base clamp(15px,4vw,22px)
     rendered 15.6px at 390px. Tablets stay at the cap. */
  .brand-grid .brand-slide .bname { font-size: clamp(16px, 4vw, 22px); }
}

/* Company tiles on phones: an infinite loop slider replaces the 2×2 grid of
   small squares — brand-slider.js rebuilds the grid into
   .brand-slider/.slider-track and main.js drives it (seamless wrap, < >
   arrows, drag, autoplay with reduced-motion opt-out). The strip, 76vw
   slides and 7/10 cards all come from main.css; here only the card names
   step up for the large cards (grid fallback without JS included). */
@media (max-width: 640px) {
  .brand-slide .bname,
  .brand-grid .brand-slide .bname { font-size: clamp(20px, 5.5vw, 24px); }
  /* Active card inset from the screen edge by the site gutter, so the
     inter-card spacing also appears on the left. The track's offsets are
     unaffected — padding shifts the whole strip. */
  .brand-slider .slider-viewport { padding-left: var(--pad); }
}

/* Dots under the phone company slider: which company is on screen. Sits in
   the shared .slider-ctl strip (chevrons flanking the dots, same as the
   news slider); built by brand-slider.js. Ink on the company pages' light
   "Druge družbe" band, white on the front page's dark DRUŽBE band. */
.brand-dots { display: flex; justify-content: center; gap: 9px; }
.brand-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(21, 23, 26, .22);
  transition: background .3s, transform .3s;
}
.brand-dots i.on { background: var(--ink); transform: scale(1.2); }
.druzbe .brand-dots i { background: rgba(255, 255, 255, .32); }
.druzbe .brand-dots i.on { background: #fff; }
.druzbe .slider-ctl .sbtn { color: #fff; }

/* Hamburger layouts (<=920): pull the SLO|EN switcher next to the toggle —
   the desktop 34px gap plus the toggle's 9px inner padding read as the
   switcher floating mid-header on phones. */
@media (max-width: 920px) {
  .hdr .right { gap: 10px; }
}

/* Hero text legibility over bright slideshow photos.
   The slogan (w300) sat on the faded edge of the design's blur pool once
   the h1 wraps to two lines on phones. (1) Soft text-shadow on slogan +
   h1 — same device the scrollcue already uses; (2) on phones, the blur
   pool grows to cover the taller text block and darkens a step. */
.hero .slogan { text-shadow: 0 1px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); }
.hero h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
@media (max-width: 640px) {
  .hero-media::after {
    width: min(94%, 1000px);
    height: min(44%, 300px);
    background: rgba(30, 34, 40, .5);
  }
  /* Slogan on two centered rows, one sentence per row —
     a single line hugged the screen edges. 22ch breaks between the
     sentences in both languages; text-wrap:balance evens the rows out. */
  .hero .slogan {
    max-width: 22ch;
    margin-inline: auto;
    text-wrap: balance;
    line-height: 1.35;
  }
}

/* Aktualno: native news cards (P9) — the design handoff's .news-slider,
   server-rendered from the headless Elfsight fetch (inc/news-feed.php).
   Slider layout and card styling live in main.css; this block only covers
   what live cards add over the handoff's placeholders: whole-card links and
   a real photo in .nimg (imageless posts keep the striped fallback). */
a.ncard { color: inherit; text-decoration: none; }
.ncard .nimg { border-radius: 0; } /* sharp-edged like every other photo on the page */
.ncard .date { line-height: 1.7; } /* date + company stacked on two lines */
.ncard .date .ncomp { color: var(--blue); } /* company in the section-eyebrow blue */
/* The card's read-more is the site-wide .cta component; the whole card is
   the link, so card hover drives the same underline-grow + arrow nudge. */
.ncard:hover .cta::after { transform: scaleX(1); }
.ncard:hover .cta svg { transform: translateX(5px); }
/* Hover reads as ONE element: the whole card lifts — nothing else. These are
   flat, borderless cards (image + text directly on the page), so any shadow
   or surface materializing on hover reads as a glitch (tried both, rejected);
   the unified movement is the signal, the CTA underline the accent. */
.ncard { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.ncard:hover { transform: translateY(-7px); }
.ncard:hover .ntitle { color: inherit; } /* no text color shift */
.ncard:hover .nimg { box-shadow: none; } /* no image shadow either (main.css has one) */
/* The viewport clips at its box (overflow:hidden for the slide effect) —
   without headroom the lifted card gets chopped at the top edge. Padding
   extends the clip box vertically; negative margins keep the layout exactly
   where it was. Horizontal stays tight so cards still slide out. */
.news-slider .slider-viewport { padding: 30px 0; margin: -30px 0; }
.slider-track.dragging .ncard { transform: none; } /* no lift jitter mid-drag */
/* Control strip shared by the news and company sliders: small chevrons
   flanking the dots — mouse users can't swipe, so the arrows stay, but
   grouped with the dots as one quiet strip instead of floating over content
   or in the header (both tried and rejected). News dots are built by
   main.js (one per reachable slide position, adapts to cards-per-view);
   brand dots by brand-slider.js (one per company). */
.slider-ctl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.slider-ctl .sbtn {
  position: static;
  transform: none;
  padding: 6px;
  color: var(--ink);
  opacity: .6;
  -webkit-tap-highlight-color: transparent;
}
.slider-ctl .sbtn svg { width: 15px; height: 23px; filter: none; }
.slider-ctl .sbtn:hover { opacity: 1; }
.slider-ctl .sbtn.prev:hover { transform: translateX(-2px); }
.slider-ctl .sbtn.next:hover { transform: translateX(2px); }
.slider-ctl .sbtn:disabled { opacity: .18; pointer-events: none; }
.slider-ctl .sbtn:focus:not(:focus-visible) { outline: none; }
.news-dots { display: flex; justify-content: center; gap: 9px; }
.news-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(21, 23, 26, .22);
  transition: background .3s, transform .3s;
}
.news-dots i.on { background: var(--ink); transform: scale(1.2); }
/* A slice of the next card peeks in from the right on touch layouts — the
   affordance that the row slides (same trick as the company slider's 76vw
   cards). */
@media (max-width: 860px) {
  .news-slider .ncard { flex-basis: calc((100% - 2 * var(--sgap)) / 2.18); }
}
@media (max-width: 540px) {
  .news-slider .ncard { flex-basis: 86%; }
}
.ncard .nimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.ncard:hover .nimg img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .ncard .nimg img { transition: none; }
  .ncard:hover .nimg img { transform: none; }
  .ncard { transition: none; }
  .ncard:hover { transform: none; }
}

/* Footer column labels: <h4>s demoted to divs — they were the only headings
   after each page's content and skipped levels on every page (h2->h4;
   404 h1->h4), an a11y heading-order issue. Identical look: mirror of
   main.css's .fcol h4 rule. */
.fcol .ftitle{font-family:"Roboto Mono",monospace;font-size:15px;letter-spacing:.16em;text-transform:uppercase; /* 11 → 14 → 15 */
  color:rgba(255,255,255,.46);font-weight:500;margin:0 0 18px} /* .46 not .45: contrast 4.5:1 */
/* 12px on phone/tablet like the other mono labels — must follow the base
   rule above (same sheet + specificity: later wins). */
@media (max-width: 920px) {
  .fcol .ftitle { font-size: 13px; }
}

/* ==== Header entrance: nav links fade in with a small stagger on first
   paint (every page). Keyframes, not transitions — the links keep their
   color/underline hover transitions untouched. body.loaded comes from
   main.js; JS-off visitors are covered by the noscript fallback in
   header.php. ==== */
@media (prefers-reduced-motion: no-preference) {
  .hdr nav.main a,
  .hdr .lang,
  .hdr .navtoggle { opacity: 0; }
  body.loaded .hdr nav.main a,
  body.loaded .hdr .lang,
  body.loaded .hdr .navtoggle {
    animation: pl-hdr-in .45s ease-out both;
  }
  body.loaded .hdr nav.main li:nth-child(2) a { animation-delay: .055s; }
  body.loaded .hdr nav.main li:nth-child(3) a { animation-delay: .11s; }
  body.loaded .hdr nav.main li:nth-child(4) a { animation-delay: .165s; }
  body.loaded .hdr nav.main li:nth-child(5) a { animation-delay: .22s; }
  body.loaded .hdr nav.main li:nth-child(6) a { animation-delay: .275s; }
  body.loaded .hdr nav.main li:nth-child(7) a { animation-delay: .33s; }
  body.loaded .hdr .lang { animation-delay: .385s; }
  body.loaded .hdr .navtoggle { animation-delay: .44s; }
  /* on phones the links are display:none and the hamburger is the nav —
     don't make it wait out the whole desktop sequence (920 = hamburger bp) */
  @media (max-width: 920px) {
    body.loaded .hdr .navtoggle { animation-delay: .08s; }
    body.loaded .hdr .lang { animation-delay: .16s; }
  }
}
@keyframes pl-hdr-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Figure image load-fade + deferred zoom-settle (P6) -------------------
   main.js adds .loaded to every figure <img> (and its .fill / .media-fill
   wrapper) on the image's load event. Until then the frame shows its
   placeholder fill (#eef0f1 or the figure's custom fill_bg) and the
   Oniverse zoom-settle is held at its zoomed start — so the settle can
   never play out on an empty frame, it starts the moment the photo lands.
   Images already in cache get .loaded before first paint: zero visible
   change on fast connections. The settle-hold overrides main.css (locked)
   .ed-figure.reveal.in .fill / .block .media.reveal.in .media-fill by one
   :not() of specificity; the transform *transitions* stay defined there.
   noscript fallback in header.php shows the images for JS-off visitors. */
.ed-figure .fill img,
.block .media-fill img { opacity: 0; transition: opacity .6s ease; }
.ed-figure .fill img.loaded,
.block .media-fill img.loaded { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ed-figure.reveal.in .fill:not(.loaded) { transform: scale(1.12); }
  .block .media.reveal.in .media-fill:not(.loaded) { transform: scale(1.16); }
}

/* ---- Micro-interaction polish (P7) ----------------------------------------
   Origin-aware underlines: grow from the left on hover-in, exit to the
   right on hover-out (transform-origin swaps while scaleX(0) is invisible),
   instead of retracting back where they came from. main.css (locked)
   animates the nav underline via `right` — converted here to the same
   scaleX technique the .cta already uses, which also moves it off a
   layout-animating property. */
nav.main a::after,
.mobile-menu a::after {
  right: 0;                       /* full-width box; scaleX does the drawing */
  transform: scaleX(0);
  transform-origin: 100% 50%;     /* unhover shrinks toward the right */
  transition: transform .3s ease;
}
nav.main a:hover::after,
nav.main a.on::after,
.mobile-menu a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;        /* hover grows from the left */
}
/* .cta underline already scales — just the origin swap */
.cta::after { transform-origin: 100% 50%; }
.cta:hover::after { transform-origin: 0 50%; }

/* One card-zoom spec: brand tiles dropped from .8s to the site-wide
   700ms/expo-ish curve (news cards currently have no zoom — Elfsight —
   but any native card (P9) should use this same spec). */
.brand-slide .bimg .tex,
.brand-slide .bimg .bphoto {
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
/* Arrow-nudge family on one spec (matches .cta svg and .cp-act-cta svg). */
.ncard .more svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }

/* ---- Radius scale: two steps (P10) ----------------------------------------
   6px for small chrome (caption chips, skeleton lines), 12px for cards and
   buttons. The handoff mixed 4/5/6/10/12/14; everything rendered today
   already sits on 6 or 12. These
   overrides put main.css's (locked) not-yet-used blocks on the scale too,
   so nothing off-step can ship later (.ncard is P9's native news card).
   Pills (999px/50%) and 2px hairlines are shapes, not scale steps. */
.btn-primary { border-radius: 12px; }
.ncard .nimg .tag { border-radius: 6px; }

/* ---- Reveal hierarchy: the headline wipe (P4) ------------------------------
   Three motion registers, used consistently: the pillar mask-wipe is the
   signature move and belongs to headlines; body/prose/cards keep the quiet
   22px rise (main.css .stagger-line); figures keep the zoom-settle. main.js
   tags every section h2 (lede-block / ed-sec / joblist-head / cp-others-head
   / section-label) with .wipe-line and guarantees it sits in a stagger host,
   so this one recipe drives them all. Same durations/curve as the pillar
   wipe in front-page.css; the 130ms/line delay step matches the site-wide
   stagger so sibling lines (eyebrow before, body after) fall in beat.
   Under reduced motion (and without JS) .wipe-line is never styled/added,
   so main.css's static fallbacks apply untouched. */
/* The wipe runs as a keyframe animation (fill-mode backwards, not
   forwards) so the mask DROPS once the reveal ends: a mask always clips
   to the border box, and the tight headline line-height lets descenders
   (g/p/j — e.g. EN "Other group companies") ink below that box, so a
   permanently masked heading permanently clips them. */
@media (prefers-reduced-motion: no-preference) {
  h2.wipe-line {
    opacity: 0;
    transform: translateY(44px);
    will-change: opacity, transform;
  }
  .reveal.in h2.wipe-line {
    opacity: 1;
    transform: none;
    animation: perspektiva-wipe-line 1.1s cubic-bezier(.2,.85,.25,1) backwards;
    animation-delay: calc(var(--si, 0) * 130ms);
  }
  @keyframes perspektiva-wipe-line {
    from {
      opacity: 0;
      transform: translateY(44px);
      -webkit-mask: linear-gradient(180deg, #000 50%, transparent) 0 100% / 100% 220% no-repeat;
              mask: linear-gradient(180deg, #000 50%, transparent) 0 100% / 100% 220% no-repeat;
    }
    to {
      opacity: 1;
      transform: none;
      -webkit-mask: linear-gradient(180deg, #000 50%, transparent) 0 0 / 100% 220% no-repeat;
              mask: linear-gradient(180deg, #000 50%, transparent) 0 0 / 100% 220% no-repeat;
    }
  }
}

/* ============ O NAS — ambient dotted globe (ported from the cene variant) ==
   A huge planet limb behind the centered head + statband: pure BACKGROUND
   ornament — absolute, cropped by the section, zero influence on layout.
   It sits above the ink plate (z 0) but beneath the content (z 1; main.css
   gives .onas-dark > * z-index:1 — this block's higher specificity puts the
   clip back underneath), softly faded so the stats stay the protagonists.
   globe.js solves the sphere's size/position so its limb passes through two
   anchor points of the band and aims the country cluster into the free right
   flank beside the centered text; CSS only carries the ambience. */
.onas-dark .globe-clip{position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);width:100vw;z-index:0;overflow:hidden;
  pointer-events:none;
  /* order arcs and drifting motes fly ABOVE the sphere's limb — at the
     band's top edge they were guillotined mid-air. Dissolve everything over
     the last 110px instead: the cut becomes a fade into the ink. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 110px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 110px)}
.onas-dark .globe-wrap{position:absolute;inset:0;
  /* band-sized: the sphere's square is virtual (camera.setViewOffset in
     globe.js) — the canvas only ever spans the visible band */
  /* an ambience, not a subject — the copy stays the protagonist */
  opacity:.68}
.onas-dark .globe-wrap canvas{display:block;width:100%!important;height:100%!important}
@media(max-width:920px){
  .onas-dark .globe-wrap{opacity:.55}
}
/* Legibility over the dots: the centered layout puts text where the sphere
   body can reach, so the type gets a soft ink halo — invisible on the plain
   band, it only swallows the dots that pass directly beneath a glyph. */
.onas-dark .statband .lbl{
  text-shadow:0 0 3px rgba(21,23,26,.98),0 0 9px rgba(21,23,26,.95),0 0 16px rgba(21,23,26,.8)}
.onas-dark .statband .num{text-shadow:0 0 4px rgba(21,23,26,.92),0 0 20px rgba(21,23,26,.6)}
.onas-dark .lede-block .prose{text-shadow:0 0 4px rgba(21,23,26,.95),0 0 12px rgba(21,23,26,.7)}

/* ============ ACCESSIBILITY TYPE PASS — larger text, wider canvas ============
   The audience skews older, so every text role steps up one notch from the
   handoff scale (body 15-17 → 17-19, footer/nav ~15 → 16.5, meta 11-12 →
   12.5-14) and the content canvas grows 1280 → 1400px so the page fills
   more of the screen. main.css stays the verbatim handoff copy — these
   overrides load right after it. company/subpage/careers/utility.css print
   AFTER this sheet, so their bumps live in those files directly (same
   pattern as the earlier mono-label pass). Supersedes the older scattered
   per-element bumps higher up in this file. */
:root{--maxw:1400px}

/* reading text */
.prose,.ed-sec .ed-body p,.ed-trio .col p{font-size:clamp(18px,1.3vw,21px)}
.hero .lede{font-size:clamp(20px,1.6vw,24px)}
.hero .slogan{font-size:clamp(22px,2.2vw,31px)}
.ed-lede{font-size:clamp(21px,1.7vw,25px);max-width:820px}
/* px-bound text columns widen with the type, so the measure stays steady */
.lede-block .head{max-width:980px}

/* headings — one gentle notch each, the scale's ratios stay intact */
.display{font-size:clamp(48px,6.5vw,92px)}
.htitle,.lede-block h2,.ed-sec h2{font-size:clamp(32px,4vw,52px)}
.ed-more h3{font-size:clamp(32px,3.8vw,52px)}
.pillar-head h3{font-size:clamp(24px,2.6vw,32px)}
.ed-trio .col h3{font-size:23px}

/* interface + meta */
.eyebrow{font-size:14px;font-weight:700} /* true Roboto Mono 700, self-hosted in fonts.css */
.cta{font-size:18px}
nav.main a{font-size:19px} /* bumps: 15.5 -> 16.5 -> 17.5 -> 19 */
.lang{font-size:16px}
.mobile-menu a{font-size:24px}
.btn-primary{font-size:17px}
.hero-tag{font-size:13px}

/* cards */
.firm-card .fname{font-size:21px}
.firm-card .fdesc{font-size:17px}
.ncard .ntitle{font-size:23px}
.ncard .nexc{font-size:18px}
.ncard .date{font-size:13.5px}
.ncard .more{font-size:16px}
.brand-slide .bname{font-size:clamp(20px,1.75vw,32px)}

/* stat band + editorial stats */
.statband .num{font-size:clamp(46px,5.5vw,76px)} /* stat numbers: their own extra step on request */
.statband .lbl{font-size:16px;font-weight:700;color:rgba(255,255,255,.85)} /* true Roboto Mono 700, self-hosted in fonts.css */
.ed-stats .s .l{font-size:17.5px}

/* photo-credit chips */
.ph .cap,.block .media .cap,.ed-figure .cap{font-size:13px}

/* footer */
.site-footer .ftag{font-size:17.5px}
.fcol a,.fcol .addr{font-size:18px}
.site-footer .li-btn{font-size:18px}
.fbar{font-size:15px}

/* ============ COMPANY BRAND MARKS ON CARDS ============ */
/* The white brand mark replaces the typeset .bname text on the company
   cards (front-page slider + "Druge družbe" grid) — markup comes from
   perspektiva_company_mark() in inc/company.php, which also carries each
   mark's optical width inline (the four logos' aspect ratios are too
   different for one shared box). brightness(0) invert(1) knocks any brand
   color to white; the drop-shadows stand in for the name's text-shadow. */
.brand-slide .blogo{height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 2px 12px rgba(0,0,0,.45))}

/* ============ COMPANY PAGES: SEPARATOR ABOVE "DRUGE DRUŽBE" ============ */
/* Hairline between the last figure and the other-companies band, same
   width as the figures above it (maxw minus the page gutters). The band's
   top margin mirrors its own top padding so the line floats centered
   between the image and the heading (the last figure carries no bottom
   margin of its own on these pages). Scoped under .editorial because
   company.css loads after this file and would win a same-specificity tie. */
.editorial .cp-others-band{margin-top:clamp(84px,12vh,148px)}
.cp-others-band::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 2*var(--pad)),calc(var(--maxw) - 2*var(--pad)));height:1px;background:var(--line)}