/* ==========================================================================
   GJ Insurance Consulting — main.css
   --------------------------------------------------------------------------
   Architecture:
     1. Design tokens (single source of truth — colors, type, spacing, radii)
     2. Base + reset
     3. Shared components (eyebrow, labels, buttons, segmented controls, cards)
     4. Header / navigation / fullscreen menu
     5. Hero
     6. Section 01 — Področja (+ partner marquee)
     7. Section 02 — Pristop (stepper + gauge)
     8. Section 03 — Mnenja
     9. Section 04 — Zaveza
    10. Kontakt / Kariera + form
    11. Footer
    12. Pravno page
    13. Motion preferences

   Responsive model: mobile-first. Base styles = narrow layout (< 500px).
   A single breakpoint at 500px switches to the wide layout.
   ========================================================================== */

/* ==========================================================================
   0. FONTS (self-hosted variable font — no third-party requests)
   ========================================================================== */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/frank-ruhl-libre-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;
}
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/frank-ruhl-libre-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;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* -- Color: surfaces ---------------------------------------------------- */
  --ink:        #0A0D12;             /* page background                      */
  --ink-rgb:    10, 13, 18;          /* --ink components, for rgba() tints   */
  --ink-raised: #0E131A;             /* cards, footer, contact section       */
  --accent:     #E9F2FC;             /* ice blue — the single accent         */
  --white:      #FFFFFF;
  --slate-rgb:  48, 62, 84;          /* glass tint, used at varying alpha    */

  /* -- Color: text tiers (opacity ladder on white) ------------------------ */
  --text-hi:    rgba(255, 255, 255, 0.9);
  --text-mid:   rgba(255, 255, 255, 0.72);
  --text-soft:  rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.5);   /* 0.45 in the design; raised to clear WCAG AA contrast */

  /* -- Color: lines -------------------------------------------------------- */
  --line:     rgba(255, 255, 255, 0.18);   /* input underlines, seg borders  */
  --hairline: rgba(255, 255, 255, 0.07);   /* card borders, dividers         */

  /* -- Glass (header controls, overlays) ----------------------------------- */
  --glass-bg:   rgba(var(--slate-rgb), 0.16);
  --glass-blur: 6px;

  /* -- Typography ----------------------------------------------------------- */
  --font: 'Frank Ruhl Libre', Georgia, serif;

  --fs-display: clamp(44px, 5.2vw, 84px);   /* hero h1                       */
  --fs-h2:      clamp(34px, 4.4vw, 58px);   /* section headings              */
  --fs-h3:      clamp(20px, 2.4vw, 32px);   /* stepper heading               */
  --fs-body-lg: clamp(17px, 1.5vw, 21px);   /* lead paragraphs               */
  --fs-body:    clamp(15px, 1.2vw, 17px);   /* default copy                  */
  --fs-sm:      14px;                       /* secondary copy                */
  --fs-caption: 12.5px;                     /* buttons, fine print           */
  --fs-eyebrow: clamp(10px, 0.95vw, 13px);  /* section eyebrows              */
  --fs-label:   11.5px;                     /* form / footer labels          */

  --ls-eyebrow: 0.3em;
  --ls-label:   0.24em;
  --ls-btn:     0.18em;
  --ls-tight:   -0.02em;

  /* -- Radii ----------------------------------------------------------------- */
  --r-sm:   6px;                        /* buttons, small chips              */
  --r-md:   10px;                       /* segmented control shells          */
  --r-lg:   14px;                       /* narrow cards, marquee strip       */
  --r-xl:   16px;                       /* wide cards                        */
  --r-card: clamp(16px, 2vw, 22px);     /* hero-level container card         */

  /* -- Motion ----------------------------------------------------------------- */
  --t-fast: 0.3s ease;
  --t-med:  0.35s ease;
  --t-slow: 0.45s ease;
  --ease-rv: cubic-bezier(0.22, 0.61, 0.36, 1);   /* scroll-reveal easing (narrow) */

  /* -- Layout widths ------------------------------------------------------------ */
  --w-areas:   1240px;    /* Področja card                                   */
  --w-content: 1160px;    /* Pristop, Mnenja, Pravno                         */
  --w-cta:     1200px;    /* Kontakt + footer                                */
  --w-quote:   840px;     /* Zaveza                                          */

  /* -- Recurring paddings -------------------------------------------------------- */
  --pad-x:   clamp(20px, 4vw, 72px);                       /* section gutter */
  --hdr-pad: clamp(16px, 2.5vw, 28px) clamp(20px, 4vw, 56px);

  /* -- Per-section paddings (narrow values; overridden at the breakpoint) --------- */
  --sec-pad-areas: 40px 14px;
  --sec-pad-b:     56px 20px;            /* Pristop + Mnenja                 */
  --sec-pad-z:     56px 20px;            /* Zaveza                           */
  --sec-pad-k:     48px 20px 56px;       /* Kontakt                          */
  --sec-min-h:     auto;                 /* Pristop + Mnenja                 */
  --k-min-h:       auto;                 /* Kontakt                          */

  /* -- Hero ------------------------------------------------------------------------ */
  --hero-min-h:  420px;
  --hero-gap-pad: clamp(38px, 5.5vh, 64px);
  --fade-start: 0%;   /* inherited; narrow scroll shifts it negative to raise the hero blend */

  /* -- Partner marquee (narrow values) ----------------------------------------------- */
  --lg-w:   96px;
  --lg-h:   22px;
  --lg-gap: 44px;
  --lg-pad: 20px 0;
  --lg-dur: 26s;
}

@media (min-width: 500px) {
  :root {
    --sec-pad-areas: clamp(48px, 8vh, 110px) clamp(14px, 4vw, 72px);
    --sec-pad-b:     clamp(88px, 14vh, 150px) var(--pad-x);
    --sec-pad-z:     clamp(88px, 12vh, 140px) var(--pad-x);
    --sec-pad-k:     clamp(56px, 9vh, 110px) var(--pad-x);
    --sec-min-h:     clamp(520px, 72vh, 820px);
    --k-min-h:       92svh;

    --hero-min-h:  440px;
    --hero-gap-pad: clamp(38px, 6vh, 72px);

    --lg-w:   135px;
    --lg-h:   30px;
    --lg-gap: 72px;
    --lg-pad: 30px 0;
    --lg-dur: 32s;
  }
}

/* ==========================================================================
   2. BASE + RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--white);
  text-decoration: none;
}
a:hover { color: var(--accent); }

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

img { max-width: 100%; }

h1, h2, h3, p, blockquote, figure { margin: 0; }

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link — hidden until keyboard focus */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  z-index: 60;
  background: var(--accent);
  color: var(--ink-raised);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: 13px 28px;
  transition: transform var(--t-fast);
}
.skip-link:focus {
  transform: translateX(-50%) translateY(0);
  color: var(--ink-raised);
}

/* Show-only-on-one-layout helpers */
.narrow-only { display: revert; }
.wide-only   { display: none !important; }
@media (min-width: 500px) {
  .narrow-only { display: none !important; }
  .wide-only   { display: revert !important; }
}

/* --------------------------------------------------------------------------
   Too-narrow guard (NARROW-ONLY)
   The narrow layout renders only from 250px up to 499.98px. Below 250px it is
   replaced by a Slovenian notice. Bounded by max-width: 249.98px, so this can
   never reach the wide layout.
   -------------------------------------------------------------------------- */
.too-narrow { display: none; }

@media (max-width: 249.98px) {
  html, body { overflow: hidden; }
  .too-narrow {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 22px;
    background: var(--ink);
  }
  .too-narrow img { height: 50px; width: auto; }
  .too-narrow__title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    color: var(--text-hi);
  }
  .too-narrow__text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-mid);
    max-width: 26ch;
  }
}

/* ==========================================================================
   3. SHARED COMPONENTS
   ========================================================================== */

/* -- Section heading kit ---------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

.heading {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--text-hi);
  text-wrap: pretty;
}
.heading--narrow-measure { max-width: 20ch; }

/* -- Small-caps label (forms, footer, info blocks) --------------------------- */
.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-mid);
}

/* -- Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  border: 1.5px solid transparent;   /* design: keeps pills level with the 46px burger */
  border-radius: var(--r-sm);
  padding: 13px 28px;
  transition: all var(--t-slow);
  white-space: nowrap;
}

.btn--solid {
  background: var(--accent);
  color: var(--ink-raised);
}
.btn--start { align-self: flex-start; }
.btn--solid:hover {
  background: var(--white);
  color: var(--ink-raised);
}

.btn--glass {
  color: var(--white);
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
/* Header Kontakt pill: white frosted glass instead of the slate tint (the
   burger is .nav-burger.btn--glass, not .btn, so it keeps the slate look).
   Explicit alpha per state so rest reads clearly white and scrolled isn't too
   bright — a tight, even frosted-white band. */
.btn.btn--glass {
  --slate-rgb: 255, 255, 255;
  --glass-bg: rgba(255, 255, 255, 0.24);   /* rest: a touch more present */
}
.is-scrolled .btn.btn--glass {
  --glass-bg: rgba(255, 255, 255, 0.30);   /* scrolled: softer than the 0.34 slate step */
}
.btn--glass:hover {
  color: var(--white);
  background-color: rgba(var(--slate-rgb), 0.26);
}
/* Denser glass once the page is scrolled */
.is-scrolled .btn--glass {
  --glass-bg:   rgba(var(--slate-rgb), 0.34);
  --glass-blur: 12px;
}
.is-scrolled .btn--glass:hover { background-color: rgba(var(--slate-rgb), 0.44); }

/* -- Segmented control (Kontakt/Kariera tabs + Pristop dots) -------------------- */
.seg {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
  background: var(--ink-raised);
}
.seg__btn {
  border-radius: var(--r-sm);
  padding: 11px 24px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--text-soft);
  transition: all var(--t-med);
}
.seg__btn--sm {
  padding: 10px 18px;
  text-transform: none;
}
.seg__btn:hover { color: var(--white); }
.seg__btn.is-active {
  background: var(--accent);
  color: var(--ink-raised);
}
.seg__btn.is-active:hover { color: var(--ink-raised); }

/* Sliding-pill capsule is a narrow-only enhancement; hidden by default so
   the wide layout keeps its plain accent-on-active-button look untouched. */
.seg__pill { display: none; }

/* -- Raised card ------------------------------------------------------------------ */
.card {
  background: var(--ink-raised);
  border-radius: var(--r-lg);
}
@media (min-width: 500px) {
  .card { border-radius: var(--r-xl); }
}

/* ==========================================================================
   4. HEADER / NAVIGATION / MENU
   ========================================================================== */
.site-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 45;
  padding: var(--hdr-pad);
}
.site-logo img {
  height: clamp(46px, 5.5vw, 62px);
  width: auto;
  display: block;
}

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: var(--hdr-pad);
}

.nav-burger {
  border-radius: var(--r-sm);
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  transition: all var(--t-slow);
}
.nav-burger span {
  display: block;
  width: 33px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-med);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { transform: translateY(-4.75px) rotate(-45deg); }

/* -- Dropdown menu -----------------------------------------------------------
   Drops from the burger (top-right). Items mirror the section eyebrows
   (uppercase + diamond marker). The section you're on is full accent, the rest
   dimmed — js/main.js toggles aria-current from a reading line as you scroll. */
.site-menu {
  position: fixed;
  top: calc(clamp(16px, 2.5vw, 28px) + var(--header-btn-h, 46px) + 8px);
  right: clamp(20px, 4vw, 56px);
  z-index: 45;
  background: rgba(var(--ink-rgb), 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(var(--ink-rgb), 0.6);
  padding: 10px 16px;
  min-width: 12rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.28s var(--ease-rv), transform 0.28s var(--ease-rv), visibility 0s 0.28s;
}
.site-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s var(--ease-rv), transform 0.28s var(--ease-rv);
}
.site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-soft);
  transition: color 0.3s var(--ease-rv), transform 0.2s var(--ease-rv);
}
.site-menu a::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}
.site-menu a[aria-current="true"] { color: var(--accent); }
.site-menu a:hover { color: var(--accent); transform: translateX(3px); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero {
  height: 100svh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
}

.hero__media {
  height: 75vh;
  min-height: var(--hero-min-h);
  position: relative;
  overflow: hidden;
}

/* Image + tint layers share one bottom-fade mask. The gradient is declared
   here (not via a :root token) and references the INHERITED --fade-start, so
   the scroll effect can raise the dissolve live by shifting --fade-start on
   .hero__media. Default 0% = the original blend (wide is untouched). */
.hero-fade {
  -webkit-mask-image: linear-gradient(to bottom,
      black calc(62% + var(--fade-start, 0%)),
      rgba(0,0,0,.87) calc(69% + var(--fade-start, 0%)),
      rgba(0,0,0,.7) calc(75% + var(--fade-start, 0%)),
      rgba(0,0,0,.5) calc(80% + var(--fade-start, 0%)),
      rgba(0,0,0,.32) calc(85% + var(--fade-start, 0%)),
      rgba(0,0,0,.17) calc(90% + var(--fade-start, 0%)),
      rgba(0,0,0,.07) calc(94% + var(--fade-start, 0%)),
      rgba(0,0,0,.02) calc(97% + var(--fade-start, 0%)),
      transparent calc(100% + var(--fade-start, 0%)));
  mask-image: linear-gradient(to bottom,
      black calc(62% + var(--fade-start, 0%)),
      rgba(0,0,0,.87) calc(69% + var(--fade-start, 0%)),
      rgba(0,0,0,.7) calc(75% + var(--fade-start, 0%)),
      rgba(0,0,0,.5) calc(80% + var(--fade-start, 0%)),
      rgba(0,0,0,.32) calc(85% + var(--fade-start, 0%)),
      rgba(0,0,0,.17) calc(90% + var(--fade-start, 0%)),
      rgba(0,0,0,.07) calc(94% + var(--fade-start, 0%)),
      rgba(0,0,0,.02) calc(97% + var(--fade-start, 0%)),
      transparent calc(100% + var(--fade-start, 0%)));
}

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;      /* narrow crop */
}
@media (min-width: 500px) {
  .hero__media img { object-position: 60% bottom; }  /* wide crop */
}

.hero__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 58% at 50% 58%, rgba(var(--ink-rgb), 0.5) 0%, rgba(var(--ink-rgb), 0) 100%),
    linear-gradient(to bottom, rgba(var(--ink-rgb), 0.65) 0%, rgba(var(--ink-rgb), 0) 26%),
    linear-gradient(to top, rgba(var(--ink-rgb), 0.7) 0%, rgba(var(--ink-rgb), 0) 28%);
}
.hero__dim {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.4);
}

.hero__title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: clamp(72px, 10vh, 110px) var(--pad-x) clamp(60px, 10vh, 120px);
}

.hero__title {
  width: 100%;
  font-size: var(--fs-display);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

/* Rotating second line — pure CSS, 6 words × 3s = 18s loop */
.hero-words {
  position: relative;
  display: block;
  height: 1.1em;
  margin-top: clamp(4px, 0.6vh, 10px);
}
.hero-words span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--white);
  animation: heroFade 18s ease infinite both;
}
.hero-words span:nth-child(2) { animation-delay: 3s; }
.hero-words span:nth-child(3) { animation-delay: 6s; }
.hero-words span:nth-child(4) { animation-delay: 9s; }
.hero-words span:nth-child(5) { animation-delay: 12s; }
.hero-words span:nth-child(6) { animation-delay: 15s; }

/* Sub-hero strip: brand line + tagline + scroll cue */
.hero__intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--hero-gap-pad) var(--pad-x);
}
.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 14px);
}
.hero__brand-name {
  white-space: nowrap;
  font-size: clamp(13px, 1.2vw, 15.5px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__tagline {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 46ch;
  text-align: center;
  text-wrap: pretty;
}
.hero__scroll {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(40px, 8vh, 90px);
}
.hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(30px, 5vh, 48px);
  overflow: hidden;
  background: var(--line);
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 16px;
  background: var(--accent);
  animation: sc-drop 1.7s ease-in-out infinite;
}

/* ==========================================================================
   6. SECTION 01 — PODROČJA + PARTNER MARQUEE
   ========================================================================== */
.section-areas { padding: var(--sec-pad-areas); }

.section-areas__inner {
  max-width: var(--w-areas);
  margin: 0 auto;
}

.areas-card {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(var(--ink-rgb), 0.5);
}

.areas-card__body {
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px) clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 40px);
}

/* Services: narrow = icon-left rows; wide = 4-column grid */
.svc-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.svc {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.svc__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.svc__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-hi);
}
.svc__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}
@media (min-width: 500px) {
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 32px;
  }
  .svc {
    flex-direction: column;
    gap: 14px;
  }
  .svc__icon {
    width: 30px;
    height: 30px;
    margin-top: 0;
  }
  .svc__text { gap: 14px; }
  .svc__title {
    font-size: clamp(16px, 1.2vw, 17px);
    line-height: 1.4;
  }
}

/* Icon library — alpha-masked inline SVGs, tinted by --accent above */
.svc--life     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20S3.5 14.9 3.5 9.3C3.5 6.4 5.7 4.5 8 4.5c1.7 0 3.2.9 4 2.3.8-1.4 2.3-2.3 4-2.3 2.3 0 4.5 1.9 4.5 4.8C20.5 14.9 12 20 12 20z'/%3E%3C/svg%3E"); }
.svc--accident { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8.5v7M8.5 12h7'/%3E%3C/svg%3E"); }
.svc--illness  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 4 12L16 12h5'/%3E%3C/svg%3E"); }
.svc--health   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.svc--car      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l2-5h12l2 5M4 12h16v5H4zM7 17v2M17 17v2'/%3E%3Ccircle cx='7.5' cy='14.5' r='1'/%3E%3Ccircle cx='16.5' cy='14.5' r='1'/%3E%3C/svg%3E"); }
.svc--property { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6.5 9.5V19h11V9.5'/%3E%3C/svg%3E"); }
.svc--business { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='11' rx='2'/%3E%3Cpath d='M9 8V6.5A1.5 1.5 0 0110.5 5h3A1.5 1.5 0 0115 6.5V8M4 13h16'/%3E%3C/svg%3E"); }
.svc--invest   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }

/* Partner logo marquee */
.marquee {
  background: var(--accent);
  overflow: hidden;
  padding: var(--lg-pad);
  margin: 0 clamp(16px, 4vw, 40px) clamp(16px, 4vw, 40px);
  border-radius: var(--r-lg);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: lg-scroll var(--lg-dur) linear infinite;
}
.marquee__logo {
  height: var(--lg-h);       /* uniform height — logos are trimmed to content, so */
  width: auto;               /* natural width keeps every gap equal, none taller   */
  margin-right: var(--lg-gap);
  display: block;
  flex: none;
}

/* ==========================================================================
   7. SECTION 02 — PRISTOP (stepper)
   ========================================================================== */
.section-steps {
  padding: var(--sec-pad-b);
  min-height: var(--sec-min-h);
}
.section-steps__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 26px);
}
.heading--steps { max-width: 20ch; }

.steps {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.steps__gauge {
  position: relative;
  width: 100%;
  max-width: 260px;
  align-self: center;
}
.steps__gauge svg { display: block; width: 100%; height: auto; }
.gauge--wide { display: none !important; }
@media (min-width: 500px) {
  .gauge--wide   { display: block !important; }
  .gauge--narrow { display: none !important; }
}
.steps__gauge .gauge-track { fill: none; stroke: var(--hairline); stroke-width: 3px; }
.steps__gauge .gauge-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3px;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.steps__num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.steps__num span { display: none; }
.steps__num span.is-active { display: inline; }

.steps__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 118px;
}
.steps__panel {
  display: none;
  flex-direction: column;
  gap: inherit;
}
.steps__panel.is-active { display: flex; }
.steps__q {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, 0.8);
}
.steps__d {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 28ch;
}
.steps__dots { margin-top: auto; display: none; }
.steps__prog { display: none; }   /* narrow-only ghost-number bar (see narrow block) */
@keyframes stepProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Reduced motion: no sweep — snap the bar to the current step's share instead. */
@media (prefers-reduced-motion: reduce) {
  .steps__prog i { animation: none; transform: scaleX(var(--progress, 0.25)); }
}

@media (min-width: 500px) {
  .steps {
    margin-top: clamp(18px, 3vh, 40px);
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }
  .steps__gauge {
    order: 2;
    max-width: 560px;
    justify-self: center;
    margin-top: clamp(-210px, -17vh, -110px);
  }
  .steps__num {
    bottom: 12px;
    font-size: 132px;   /* design value; the 500-820 fluid zone overrides below */
  }
  .steps__text {
    order: 1;
    gap: 18px;
    min-height: 180px;
  }
  .steps__d { max-width: 48ch; }
  .steps__dots { display: inline-flex; }
}

/* ==========================================================================
   8. SECTION 03 — MNENJA
   ========================================================================== */
.section-reviews {
  padding: var(--sec-pad-b);
  min-height: var(--sec-min-h);
}
.section-reviews__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}
.section-reviews__head {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 26px);
}
.heading--reviews { max-width: 20ch; }

.reviews {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Carousel arrows — shown on narrow only; styled as the site's segmented
   control (bordered pill, ink-raised) so they read as part of the UI kit. */
.reviews__nav {
  display: none;
  align-self: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
  background: var(--ink-raised);
}
.cbtn {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-soft); cursor: pointer;
  transition: color var(--t-med), background var(--t-med);
}
.cbtn svg { width: 18px; height: 18px; }
.cbtn:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.cbtn:disabled { opacity: 0.3; cursor: default; }
.reviews__more svg { width: 1em; height: 1em; flex: none; }
.review {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review__stars {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent);
}
.review__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-hi);
  text-wrap: pretty;
}
.review__who { margin-top: auto; }
.review__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-hi);
}
.review__src {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.reviews__bar {
  background: rgba(var(--slate-rgb), 0.5);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reviews__score-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.reviews__score-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: var(--ls-tight);
}
.reviews__score-max {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.reviews__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

@media (min-width: 500px) {
  .reviews { gap: 20px; }
  /* HTML places the bar first (narrow order); wide restores grid → bar. */
  .reviews__grid {
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .reviews__bar { order: 2; }
  .review[data-clone] { display: none; }   /* wide grid shows only the real 3 cards */
  .review {
    padding: clamp(26px, 2.4vw, 32px);
    gap: 20px;
  }
  .review__stars { font-size: 13px; letter-spacing: 5px; }
  .review__text { font-size: var(--fs-body); line-height: 1.65; }
  .review__name { font-size: 15px; }
  .reviews__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    border-radius: var(--r-xl);
    padding: clamp(24px, 2.4vw, 30px) clamp(28px, 3vw, 36px);
  }
  .reviews__score-wrap {
    gap: clamp(22px, 2.6vw, 34px);
    flex-wrap: wrap;
  }
  .reviews__score { gap: 8px; }
  .reviews__score-num { font-size: clamp(40px, 3.4vw, 52px); }
  .reviews__note { max-width: 36ch; text-wrap: pretty; }
}

/* ==========================================================================
   9. SECTION 04 — ZAVEZA
   ========================================================================== */
.section-quote {
  padding: var(--sec-pad-z);
  background: var(--ink);
}
.section-quote__inner {
  max-width: var(--w-quote);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 3vh, 26px);
}
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 26px);
}
.quote__mark {
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: 1;
  height: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--accent);
}
.quote__text {
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--text-hi);
  text-wrap: pretty;
  max-width: 22ch;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(4px, 1vh, 10px);
}
.quote__portrait {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  object-position: center 12%;
}
.quote__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.quote__name {
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  color: var(--text-hi);
}
.quote__role {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
/* Big portrait is a narrow-only element (see the narrow block); wide uses the
   small avatar in the byline. */
.quote__photo-frame { display: none; }

/* ==========================================================================
   10. KONTAKT / KARIERA + FORM
   ========================================================================== */
.section-cta {
  min-height: var(--k-min-h);
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
}
.section-cta__inner {
  flex: 1;
  max-width: var(--w-cta);
  width: 100%;
  margin: 0 auto;
  padding: var(--sec-pad-k);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5.5vh, 52px);
}

/* Tab-dependent copy: both variants live in markup, data-tab decides */
.section-cta[data-tab="kontakt"] .tab-kariera { display: none; }
.section-cta[data-tab="kariera"] .tab-kontakt { display: none; }

.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: clamp(-8px, -1vh, -4px);
}
.cta-left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 22px);
}
.cta-desc {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 40ch;
  text-wrap: pretty;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4.2vh, 38px);
  border-left: 1px solid var(--hairline);
  padding-left: 20px;
  margin-top: 12px;
}
.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-info__value {
  font-size: clamp(16px, 1.3vw, 18px);
  transition: color var(--t-fast);
}
.contact-info__plain {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-mid);
}

@media (min-width: 500px) {
  .cta-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(48px, 7vw, 110px);
  }
  .contact-info {
    padding-left: 24px;
    margin-top: clamp(10px, 2.8vh, 28px);
  }
}

/* -- Form ------------------------------------------------------------------ */
.form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 22px);
}
.form__kicker { margin-bottom: 2px; }
.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form__field--half { flex: 1 1 200px; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 0 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--white);
  outline: none;
  transition: border-color var(--t-fast);
  width: 100%;
}
.form textarea {
  line-height: 1.6;
  resize: vertical;
}
.form input:focus,
.form textarea:focus { border-bottom-color: var(--accent); }

.form__attach {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.form__attach:hover,
.form__attach:focus-within { border-color: var(--accent); }
.form__attach-plus {
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
  font-weight: 500;
}
.form__attach-note {
  font-size: var(--fs-caption);
  color: var(--text-soft);
  margin-left: auto;
  text-align: right;
}
/* Keyboard-reachable but visually hidden (display:none would drop it from tab order) */
.form__attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__submit { align-self: stretch; border: none; padding: 14px 28px; }  /* design: submit has no border */
.form__submit:disabled { opacity: 0.6; cursor: default; }

.form__privacy {
  align-self: stretch;
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-faint);
}
/* Stays in the accessibility tree while empty (clipped, no flex slot) so the
   aria-live region reliably announces; .is-ok/.is-error restore normal flow. */
.form__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.form__status.is-ok,
.form__status.is-error {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  align-self: stretch;
}
.form__status.is-ok    { color: var(--accent); }
.form__status.is-error { color: var(--text-mid); }

/* Honeypot — visually gone, present for bots */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(30px, 5vh, 44px) var(--pad-x) clamp(20px, 3vh, 28px);
}
.site-footer--raised { background: var(--ink-raised); }
.site-footer__inner {
  max-width: var(--w-cta);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 36px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}
.foot-brand {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  grid-column: 1 / -1;
  justify-self: center;
  margin-bottom: 16px;
}
.foot-brand img {
  height: 68px;
  width: auto;
  display: block;
}
.foot-brand__text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-soft);
}
.foot-brand__text strong {
  display: block;
  font-weight: 600;
  color: var(--text-hi);
}
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col span:not(.label) {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
}
.foot-col--sedez {
  order: 2;
  grid-column: 1 / -1;
}

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(16px, 2.5vh, 22px);
}
.site-footer__copy {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}
.site-footer__legal {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: var(--text-mid);
}
a.site-footer__legal:hover { color: var(--text-mid); }  /* design: no hover state here */
.site-footer__legal--current { color: var(--text-faint); }

@media (min-width: 500px) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .foot-brand {
    grid-column: auto;
    justify-self: start;
    margin-bottom: 0;
  }
  .foot-col--sedez {
    order: 0;
    grid-column: auto;
  }
}

/* ==========================================================================
   12. PRAVNO PAGE
   ========================================================================== */
.page-legal {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.legal-main {
  flex: 1;
  max-width: var(--w-content);
  width: 100%;
  margin: 0 auto;
  padding: clamp(130px, 18vh, 190px) var(--pad-x) clamp(88px, 14vh, 150px);
}
.legal-content {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 26px);
}
.legal-lead {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 40ch;
  text-wrap: pretty;
}
.legal-blocks {
  margin-top: clamp(24px, 4.5vh, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 56px);
}
.legal-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 32px);
}
.legal-block .label { padding-top: 5px; }
.legal-block p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-mid);
  text-wrap: pretty;
}
.legal-block strong {
  font-weight: 600;
  color: var(--text-hi);
}
.legal-block a { transition: color var(--t-fast); }

@media (min-width: 500px) {
  .legal-block { grid-template-columns: 220px 1fr; }
}

/* ==========================================================================
   FLUID WIDE ZONE (500–820px)
   --------------------------------------------------------------------------
   The design defines the wide layout for >= 820px viewports. Between 500 and
   820px we still show the wide design (per site rule: >= 500px = wide), but
   let its fixed multi-column tracks reflow so nothing overflows or cramps.
   At >= 820px every rule below stops applying and the exact design returns.
   ========================================================================== */
@media (min-width: 500px) and (max-width: 819.98px) {
  .svc-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: auto;
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .steps__gauge {
    order: 0;
    margin-top: 0;
    max-width: 420px;
  }
  .steps__num { font-size: clamp(64px, 12vw, 104px); }
  .steps__text {
    order: 1;
    min-height: 150px;   /* tallest panel: keeps auto-advance from shifting layout */
  }
  .legal-block { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ==========================================================================
   NARROW FLUID SCALING (250–499.98px) — NARROW-ONLY
   --------------------------------------------------------------------------
   Makes the entire narrow layout scale proportionally with viewport width.
   Mechanism: the root font-size becomes fluid, anchored to the design's 390px
   reference (1rem = 16px at 390px). Every value below is expressed in rem, so
   text, spacing, boxes, cards and images all grow/shrink together across the
   band. Bounded by max-width: 499.98px — the wide layout is never affected.

   rem convention: value ÷ 16 = the design's narrow px at 390px.
   ========================================================================== */
@media (min-width: 250px) and (max-width: 499.98px) {

  /* Fluid root: 10.3px @250  ·  16px @390  ·  20.5px @499 */
  :root { font-size: calc(100vw / 24.375); }

  /* --- Tokens redefined in rem (cascade to every consumer) --------------- */
  :root {
    --fs-display: 2.875rem;   /* 46 — longest word "vašo prihodnost" fits within padding up to ~49px (3.09rem) */
    --fs-h2:      2.125rem;     /* 34 */
    --fs-h3:      1.25rem;      /* 20 */
    --fs-body-lg: 1.0625rem;    /* 17 */
    --fs-body:    0.9375rem;    /* 15 */
    --fs-sm:      0.875rem;     /* 14 */
    --fs-caption: 0.78125rem;   /* 12.5 */
    --fs-eyebrow: 0.625rem;     /* 10 */
    --fs-label:   0.71875rem;   /* 11.5 */

    --r-sm:   0.375rem;         /* 6 */
    --r-md:   0.625rem;         /* 10 */
    --r-lg:   0.875rem;         /* 14 */
    --r-xl:   1rem;             /* 16 */
    --r-card: 1rem;             /* 16 */

    --pad-x:   1.25rem;                     /* 20 */
    --hdr-pad: 1rem 1.25rem;                /* 16 20 */
    --header-btn-h: 2.875rem;               /* header control height (burger + pill) */
    --sec-pad-areas: 2.5rem 0.875rem;       /* 40 14 */
    --sec-pad-b:     3.5rem 1.25rem;        /* 56 20 */
    --sec-pad-z:     3.5rem 1.25rem;        /* 56 20 */
    --sec-pad-k:     3rem 1.25rem 3.5rem;   /* 48 20 56 */
    --hero-gap-pad:  2.375rem;              /* 38 */

    --lg-w:   6rem;             /* 96 */
    --lg-h:   1.375rem;         /* 22 */
    --lg-gap: 2.75rem;          /* 44 */
    --lg-pad: 1.25rem 0;        /* 20 0 */
  }

  /* --- Shared components ------------------------------------------------- */
  .eyebrow { gap: 0.875rem; font-size: 0.6875rem; }   /* slightly larger label */
  .eyebrow::before { width: 0.3125rem; height: 0.3125rem; }   /* slightly smaller marker */

  .btn { gap: 0.625rem; padding: 0.8125rem 1.75rem; }
  .seg { padding: 0.25rem; gap: 0.25rem; }
  .seg__btn { padding: 0.6875rem 1.5rem; }
  .seg__btn--sm { padding: 0.625rem 1.125rem; }

  /* Sliding-pill: the accent capsule jumps left/right on tab change. */
  .seg--slide { position: relative; }
  .seg--slide .seg__pill {
    display: block;
    position: absolute;
    top: 0.25rem;
    left: 0;
    height: calc(100% - 0.5rem);
    width: var(--pill-w, 0px);
    transform: translateX(var(--pill-x, 0.25rem));
    background: var(--accent);
    border-radius: var(--r-sm);
    transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
                width 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 0;
    pointer-events: none;
  }
  .seg--slide .seg__btn { position: relative; z-index: 1; transition: color var(--t-med); }
  /* Active button rides the pill, so its own background stays transparent. */
  .seg--slide .seg__btn.is-active,
  .seg--slide .seg__btn.is-active:hover { background: transparent; color: var(--ink-raised); }

  /* --- Header / menu ----------------------------------------------------- */
  .nav-burger { height: var(--header-btn-h); gap: 0.375rem; padding: 0 0.875rem; }
  /* Logo shield height == header button height. The shield fills 79.1% of the
     square PNG; its top ~10.9% is transparent, so pull the image up by that
     strip to top-align the shield with the buttons (equal height + equal top). */
  .site-logo img {
    height: calc(var(--header-btn-h) / 0.791);
    margin-top: calc(var(--header-btn-h) / 0.791 * -0.109);
  }
  .nav-burger span { width: 2.0625rem; height: 0.125rem; }
  .site-menu { padding: 0.625rem 1rem; min-width: 11rem; }
  .site-menu a { font-size: 0.6875rem; }

  /* --- Hero -------------------------------------------------------------- */
  .hero__brand-name { font-size: 0.8125rem; }
  /* Lock the two hero lines so they never re-wrap:
     heading line 2 (the rotating word) and the tagline's two lines. */
  .hero__title { white-space: nowrap; }
  .hero__tagline { white-space: nowrap; }
  /* Raise the H1 within the hero image (bottom-aligned, so more bottom
     padding = higher). Bump/lower this one value to taste. */
  .hero__title-wrap { padding-bottom: 24vh; }
  /* Remove the "scroll down" indicator below the description */
  .hero__scroll { display: none; }
  /* Slower rotation + softer fade-in/out for the rotating words (narrow only) */
  .hero-words span { animation-name: heroFadeNarrow; animation-duration: 24s; }
  .hero-words span:nth-child(2) { animation-delay: 4s; }
  .hero-words span:nth-child(3) { animation-delay: 8s; }
  .hero-words span:nth-child(4) { animation-delay: 12s; }
  .hero-words span:nth-child(5) { animation-delay: 16s; }
  .hero-words span:nth-child(6) { animation-delay: 20s; }

  /* --- 01 Področja ------------------------------------------------------- */
  .areas-card__body { padding: 2rem 1.5rem 1.75rem; }
  /* Services: plain title + description. No left marker on the item; the
     description carries a static gray left line — no colour, no scroll effect. */
  .svc { gap: 0.375rem; align-items: flex-start; }
  .svc__icon { display: none; }
  .svc__title { font-size: 1.1875rem; }
  .svc__desc {
    border-left: 2px solid var(--line);
    padding-left: 0.875rem;
    margin-top: 0.45rem;
    margin-left: 0.4375rem;   /* indent the line + description from the title */
    font-size: 0.9375rem;
  }
  .marquee { margin: 0 1rem 1rem; }
  /* Generali & Prva are all-caps wordmarks trimmed flush to their glyphs, so at a
     uniform height they read noticeably larger than the mixed-case marks. Nudge
     the two down so every logo carries the same optical weight. */
  .marquee__logo[src*="Generali"],
  .marquee__logo[src*="Prva"] { height: calc(var(--lg-h) * 0.84); }

  /* --- 02 Pristop -------------------------------------------------------- */
  /* "Številka-duh": a huge faint number sits behind the copy (top-right), the
     title + description read left-aligned over it, and a thin bar below fills
     as the steps advance. The arc gauge is hidden here. */
  .steps { position: relative; display: block; margin-top: 1rem; }
  .gauge--narrow { display: none !important; }
  .steps__gauge {
    position: absolute;
    top: -0.75rem;
    right: 0;
    width: auto;
    max-width: none;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .steps__num {
    position: static;
    font-size: 7rem;
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: rgba(233, 242, 252, 0.08);
  }
  .steps__text {
    position: relative;
    z-index: 1;
    text-align: left;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 1.5rem;
    min-height: 8rem;
    gap: 0.5rem;
  }
  .steps__q { color: var(--text-hi); }
  .steps__d { max-width: 34ch; margin: 0; }
  .steps__prog {
    display: block;
    height: 2px;
    margin-top: 1.5rem;
    background: var(--hairline);
    border-radius: 2px;
    overflow: hidden;
  }
  /* The bar fills continuously left→right across each step's dwell time
     (var(--step-dur)) and restarts when the step advances — never standing
     still. JS restarts the animation on every setStep(). */
  .steps__prog i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: stepProgress var(--step-dur, 5000ms) linear forwards;
  }

  /* --- 03 Mnenja — horizontal scroll-snap carousel + thin bar ------------- */
  .reviews { gap: 0.875rem; }
  .reviews__grid {
    flex-direction: row;
    /* gap == side padding: the previous card is fully hidden when snapped, so
       you always see exactly one full card + the next peeking (never three). */
    gap: var(--pad-x);
    overflow-x: auto;
    overflow-y: hidden;   /* horizontal only — stops the track scrolling up/down */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Full-bleed: cancel the section gutter so peeking cards reach the screen
       edges, then re-add it as padding + scroll-padding so the first card still
       lines up under the heading. */
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  /* 78% + a hairline border → always one full card and a clearly-visible
     partial next card (the raised bg alone was too close to the page colour). */
  .review {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 1.375rem;
    gap: 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
  }
  .review__stars { font-size: 0.75rem; letter-spacing: 0.25rem; }
  .review__text { font-size: 0.9375rem; }
  /* Score bar (blue bg) sits ON TOP of the first card — same width (78%) and
     left edge. Score on top, CTA below. */
  .reviews__bar {
    width: 78%;
    align-self: flex-start;   /* same left edge as the first card */
    flex-direction: row;
    flex-wrap: wrap;          /* CTA drops below the score if it can't fit */
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r-lg);
  }
  .reviews__note { display: none; }
  .reviews__score-wrap { flex: none; gap: 0.375rem; align-items: baseline; }
  .reviews__score { gap: 0.375rem; }
  .reviews__score-num { font-size: 1.5rem; }
  /* CTA → solid accent button, same family as "Pošljite povpraševanje". */
  .reviews__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--accent);
    color: var(--ink-raised);
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--t-med);
  }
  .reviews__more:hover { background: var(--white); }
  /* Arrows: the pill spans exactly the peeking card's visible sliver, right-
     aligned — so its left edge sits under that card, not under the gap.
     Peek = 100% − 78% card − one gap(var(--pad-x)) = calc(22% - var(--pad-x)). */
  .reviews__nav { display: flex; width: calc(22% - var(--pad-x)); align-self: flex-end; }
  .cbtn { flex: 1; width: auto; height: 2.25rem; }

  /* --- 04 Zaveza — testimonial card: portrait photo with the quote card
         overlapping its lower edge (see index.html: .quote__photo is narrow-only) */
  .section-quote__inner { display: block; text-align: left; gap: 0; max-width: none; }
  /* A short landscape frame clips the square photo; the image is enlarged and
     top-anchored inside it so only the head + shoulders + upper chest show —
     the crossed arms and waist fall below the crop. Three tuning knobs:
       · aspect-ratio on the frame  = how tall the photo block is
       · width on the image         = zoom (bigger % → tighter, bigger face)
       · top on the image           = vertical position of the crop */
  .quote__photo-frame {
    display: block;
    position: relative;
    width: auto;
    margin-inline: calc(var(--pad-x) * -1);   /* full-bleed: cancel the section's side padding */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
  }
  .quote__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 132%;
    height: auto;
    transform: translateX(-50%);
  }
  .quote {
    align-items: stretch;
    gap: 0.9rem;
    margin: -3.25rem 0.5rem 0;             /* lift the card over the photo's lower edge */
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--ink-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    text-align: left;
    position: relative;
    z-index: 1;
  }
  .quote .eyebrow { justify-content: flex-start; }
  .quote__mark { display: none; }          /* card leads with the eyebrow, no glyph */
  .quote__portrait { display: none; }      /* small avatar replaced by the big photo above */
  .quote__text {
    font-size: 1.375rem;                    /* 22 */
    line-height: 1.34;
    color: var(--accent);                   /* ice-blue quote */
    max-width: none;
    margin: 0;
  }
  .quote__who { margin-top: 1.1rem; gap: 0; }
  .quote__meta { text-align: left; gap: 0.15rem; }
  .quote__name { font-size: 1.0625rem; }    /* 17 */
  .quote__role { color: var(--accent); opacity: 0.62; }

  /* --- Kontakt / form ---------------------------------------------------- */
  .cta-grid { gap: 2rem; }
  /* Left line identical to the services description line. */
  .contact-info {
    border-left: 2px solid var(--line);
    padding-left: 0.875rem;
    margin-left: 0.4375rem;
  }
  /* Emphasis swap: labels (Telefon / E-pošta / Delovni čas / Pišite nam) are
     bigger and FULL white; the values under them step back to mid tone. */
  .contact-info .label,
  .form__kicker {
    font-size: 0.875rem;          /* 14 — up from 11.5 */
    color: var(--white);
  }
  .contact-info__value { font-size: 1rem; color: var(--text-mid); }
  .contact-info__plain { color: var(--text-mid); }
  .form__row { gap: 1.75rem; }
  .form__field { gap: 0.625rem; }
  .form input[type="text"],
  .form input[type="email"],
  .form textarea { font-size: 1rem; padding: 0.375rem 0 0.75rem; }
  .form__attach { gap: 0.75rem; padding: 0.75rem 1.125rem; }
  .form__submit { padding: 0.875rem 1.75rem; }

  /* --- Footer ------------------------------------------------------------ */
  .foot-brand { gap: 1rem; justify-self: start; }   /* left-aligned, not centered */
  .foot-brand img { height: 4.25rem; }
  .site-footer__grid { gap: 1.25rem; }
  .foot-col { gap: 0.625rem; }
  .foot-col .label { color: var(--white); }                 /* small title: white */
  .foot-col > span:not(.label) { color: var(--text-soft); } /* value: gray */
  .site-footer__bar { gap: 0.875rem; }

  /* --- Pravno ------------------------------------------------------------ */
  .legal-block { gap: 0.75rem; }
}

/* ==========================================================================
   SCROLL REVEALS — NARROW-ONLY, choreographed section entrances
   --------------------------------------------------------------------------
   Elements are tagged and split by js/main.js, only on narrow with motion
   allowed. Every hidden/animated state below is bounded by the narrow media
   query, so the wide layout is never touched — even if the markup keeps the
   classes after a rotate. Transform/opacity only; one-shot (never replays).

     .rv-fade / .rv-rise / .rv-scale  — element fades / rises / scales in
     .rv-lines                        — heading rises line-by-line behind a mask
     .rv-words                        — copy rises word-by-word
     .is-rv                           — added to a unit once it scrolls in
     --rv-d                           — per-element start delay (choreography)
     --i                              — per-line / per-word stagger index
   ========================================================================== */
@media (min-width: 250px) and (max-width: 499.98px) {

  /* — element-level: fade / rise / scale — */
  .rv-fade  { opacity: 0; transition: opacity .7s var(--ease-rv) var(--rv-d, 0ms); }
  /* Logo strip: a longer, gentler fade so it eases in instead of snapping. */
  .marquee.rv-fade { transition-duration: 1.3s; }
  .rv-rise  { opacity: 0; transform: translateY(1.75rem);
              transition: opacity .7s var(--ease-rv) var(--rv-d, 0ms),
                          transform .8s var(--ease-rv) var(--rv-d, 0ms); }
  .rv-scale { opacity: 0; transform: scale(1.05);
              transition: opacity .85s var(--ease-rv) var(--rv-d, 0ms),
                          transform .95s var(--ease-rv) var(--rv-d, 0ms); }
  .is-rv .rv-fade,  .rv-fade.is-rv,
  .is-rv .rv-rise,  .rv-rise.is-rv,
  .is-rv .rv-scale, .rv-scale.is-rv { opacity: 1; transform: none; }

  /* — headings: line-by-line mask rise — */
  .rv-lines .rv-line   { display: block; overflow: hidden; padding-bottom: 0.08em; }
  .rv-lines .rv-line-i { display: inline-block; transform: translateY(116%);
                         transition: transform .82s var(--ease-rv)
                                     calc(var(--rv-d, 0ms) + var(--i, 0) * 70ms); }
  .is-rv .rv-lines .rv-line-i, .is-rv.rv-lines .rv-line-i { transform: none; }

  /* eyebrow diamond marker rises + fades in sync with its label (the ::before
     can't be masked like the text, so it matches with a transform+fade) */
  .eyebrow.rv-lines::before {
    opacity: 0;
    transform: translateY(0.7em) rotate(45deg);
    transition: opacity .5s var(--ease-rv) var(--rv-d, 0ms),
                transform .82s var(--ease-rv) var(--rv-d, 0ms);
  }
  .eyebrow.rv-lines.is-rv::before,      /* eyebrow observed on its own */
  .is-rv .eyebrow.rv-lines::before {    /* eyebrow inside an observed group (Zaveza card) */
    opacity: 1; transform: translateY(0) rotate(45deg);
  }

  /* — copy: word-by-word rise — */
  .rv-words .rv-w { display: inline-block; opacity: 0; transform: translateY(0.55em);
                    transition: opacity  .5s var(--ease-rv) calc(var(--rv-d, 0ms) + var(--i, 0) * 26ms),
                                transform .58s var(--ease-rv) calc(var(--rv-d, 0ms) + var(--i, 0) * 26ms); }
  .is-rv .rv-words .rv-w, .is-rv.rv-words .rv-w { opacity: 1; transform: none; }

  /* — hero intro: the H1 lines + brand line + tagline rise out of a mask on
       first load, matching the section headings. main.js wraps each line in
       a .hero-mask > .hero-rise pair, then adds .hero-lit to play it. The
       scroll-scrub (js) transforms .hero__title / .hero__brand themselves, so
       animating the inner .hero-rise here never collides with it. — */
  .hero-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }   /* descender room */
  .hero-rise { display: block; transform: translateY(120%); }   /* hidden instantly (no transition yet) */
  .hero-lit .hero-rise { transform: none;
               transition: transform .9s var(--ease-rv) var(--rv-d, 0ms); }   /* rise only on reveal */

  /* Pre-paint hide (set by js/boot.js) so the wrap/reveal never flashes the
     static text. Cleared by main.js once wrapped, or by a boot.js timeout. */
  html.rv-boot .hero__title,
  html.rv-boot .hero__brand { visibility: hidden; }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuIn  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sc-drop {
  0%   { transform: translateY(-16px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(44px); opacity: 0; }
}
@keyframes lg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroFade {
  0%     { opacity: 0; }
  2%     { opacity: 1; }
  14%    { opacity: 1; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}
/* Narrow variant: same 6-word cadence, soft fade-in, quicker fade-out */
@keyframes heroFadeNarrow {
  0%     { opacity: 0; }
  4.5%   { opacity: 1; }
  13.5%  { opacity: 1; }
  16.67% { opacity: 0; }
  100%   { opacity: 0; }
}

/* ==========================================================================
   13. PRINT
   --------------------------------------------------------------------------
   Dark theme would print as (near) blank pages; remap the token ladder to
   dark-on-light and drop the interactive chrome. Matters most for /pravno/.
   ========================================================================== */
@media print {
  :root {
    --ink:        #FFFFFF;
    --ink-raised: #FFFFFF;
    --accent:     #1C2B3A;
    --white:      #000000;
    --text-hi:    rgba(0, 0, 0, 0.92);
    --text-mid:   rgba(0, 0, 0, 0.75);
    --text-soft:  rgba(0, 0, 0, 0.62);
    --text-faint: rgba(0, 0, 0, 0.5);
    --line:       rgba(0, 0, 0, 0.35);
    --hairline:   rgba(0, 0, 0, 0.15);
  }
  body { background: #fff; color: #000; }
  a { color: #000; }
  .site-nav,
  .site-menu,
  .skip-link,
  .hero__scroll,
  .marquee,
  .form,
  .steps__dots { display: none !important; }
  .areas-card { box-shadow: none; }
  .site-logo { position: static; }
  .hero,
  .section-cta { min-height: 0; }
  .steps__panel { display: flex !important; }  /* print all four steps */
  .steps__gauge { display: none; }
}

/* ==========================================================================
   14. MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-words span { animation: none; opacity: 0; }
  .hero-words span:first-child {
    position: static;
    transform: none;
    opacity: 1;
  }
  .hero__scroll-line::after { animation: none; }
  .marquee__track { animation: none; }
  .site-menu, .site-menu.is-open { transition: none; }
  /* Scroll reveals never run for reduced-motion (js bails); force-visible as
     a safety net in case any reveal class is present. */
  .rv-fade, .rv-rise, .rv-scale { opacity: 1 !important; transform: none !important; }
  .rv-lines .rv-line-i          { transform: none !important; }
  .rv-words .rv-w               { opacity: 1 !important; transform: none !important; }
  .eyebrow.rv-lines::before     { opacity: 1 !important; transform: rotate(45deg) !important; }
  .hero-rise                    { transform: none !important; }
  html.rv-boot .hero__title,
  html.rv-boot .hero__brand     { visibility: visible !important; }
}

/* ==========================================================================
   LENIS smooth scroll (self-hosted; initialised on narrow only, see main.js)
   Recommended companion styles — the .lenis classes exist only while active.
   ========================================================================== */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   DEV — viewport width badge (temporary; enable with ?debug, remove before launch)
   ========================================================================== */
.debug-badge {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 10000;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre;
  color: #0A0D12;
  background: #E9F2FC;
  border-radius: 6px;
  padding: 6px 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  opacity: 0.92;
}