/* ==========================================================================
   OAA Digital — Shared site chrome (design tokens, nav + dropdown, footer,
   buttons, section headings, fade-up reveal, reusable inner-page blocks).
   Loaded on every page. Page-specific sections stay in each page's own
   <style> block — this file only holds what must look identical everywhere.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:    #0D1B2A;
  --navy2:   #14263A;
  --navy3:   #1A3150;
  --gold:    #C9A84C;
  --gold-lt: #E2C47A;
  --gold-dk: #A07830;
  --cream:   #F5F0E8;
  --muted:   #7A8FA3;
  --border:  rgba(201,168,76,0.18);
  --ff-h:    'Cormorant Garamond', serif;
  --ff-b:    'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body { background:var(--navy); color:var(--cream); font-family:var(--ff-b); font-size:16px; line-height:1.75; overflow-x:hidden; }
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--navy)} ::-webkit-scrollbar-thumb{background:var(--gold-dk);border-radius:2px}

/* Visible keyboard focus everywhere, without adding a ring on mouse clicks */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* Visually hidden but accessible to screen readers/SEO structure */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- NAV ---------- */
nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 6vw;
  background:rgba(13,27,42,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex;align-items:center;gap:12px;text-decoration:none; }
.nav-logo img { height:48px;width:auto;object-fit:contain; }
.nav-logo-text { display:flex;flex-direction:column;line-height:1.1; }
.nav-logo-text .nl1 { font-family:var(--ff-h);font-size:1.4rem;font-weight:700;color:var(--gold);letter-spacing:.06em; }
.nav-logo-text .nl2 { font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--muted); }
.nav-links { display:flex;align-items:center;gap:36px;list-style:none; }
.nav-links > li { display:flex;align-items:center; }
.nav-links a { font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;position:relative;transition:color .3s; }
.nav-links a::after { content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s; }
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:var(--gold); }
.nav-links a.active::after { transform:scaleX(1); }
.nav-cta { padding:9px 24px!important;border:1px solid var(--gold)!important;color:var(--gold)!important;border-radius:2px;transition:background .3s,color .3s!important; }
.nav-cta:hover { background:var(--gold)!important;color:var(--navy)!important; }
.nav-cta::after { display:none!important; }
.hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:15px 12px; margin:-15px -12px; }
.hamburger span { width:24px;height:1.5px;background:var(--cream);transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* Usluge — dropdown trigger */
.nav-item-dropdown { position:relative; }
.nav-drop-toggle {
  appearance:none;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);display:inline-flex;align-items:center;gap:7px;padding:0;position:relative;
  transition:color .3s;
}
.nav-drop-toggle::after { content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s; }
.nav-drop-toggle:hover, .nav-drop-toggle:focus-visible, .nav-item-dropdown.open .nav-drop-toggle, .nav-drop-toggle.active {
  color:var(--gold);
}
.nav-drop-toggle:hover::after, .nav-drop-toggle:focus-visible::after, .nav-item-dropdown.open .nav-drop-toggle::after, .nav-drop-toggle.active::after {
  transform:scaleX(1);
}
.nav-drop-caret { width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease,margin .2s ease; }
.nav-item-dropdown.open .nav-drop-caret { transform:rotate(-135deg); margin-top:4px; }

.nav-dropdown {
  position:absolute;top:calc(100% + 18px);left:0;
  min-width:250px;max-width:min(300px, calc(100vw - 32px));
  background:linear-gradient(180deg, var(--navy2), var(--navy));
  border:1px solid var(--border);border-radius:6px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.05);
  padding:10px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:210;
}
.nav-item-dropdown.open .nav-dropdown {
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.nav-dropdown a {
  display:block;padding:11px 16px;border-radius:3px;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  color:var(--cream);text-decoration:none;transition:background .2s,color .2s;white-space:nowrap;
}
.nav-dropdown a::after { display:none!important; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background:rgba(201,168,76,0.1);color:var(--gold-lt); }

/* Language switcher — same dropdown mechanics as Usluge, but a short,
   right-anchored list (SR/EN/RU) instead of a wide service menu. */
.nav-dropdown-lang { min-width:90px;left:auto;right:0; }
.nav-dropdown-lang a { text-align:center; }
.nav-dropdown a.active { color:var(--gold); }

@media(max-width:1080px){
  .nav-links{
    display:none;
  }
  .nav-links.open{
    display:flex;flex-direction:column;align-items:flex-start;position:fixed;top:80px;left:0;right:0;
    background:rgba(13,27,42,0.97);padding:20px 6vw;gap:4px;border-top:1px solid rgba(201,168,76,0.15);
    z-index:199;max-height:calc(100vh - 80px);overflow-y:auto;
  }
  .nav-links.open > li { width:100%; }
  .nav-links.open > li > a { padding:12px 0;width:100%; } /* larger touch target on mobile */
  .hamburger{display:flex}

  .nav-item-dropdown{ width:100%;flex-direction:column;align-items:stretch; }
  .nav-drop-toggle{ width:100%;justify-content:space-between;padding:12px 0; }
  .nav-dropdown{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:none;
    max-height:0;overflow:hidden;padding:0;margin-top:0;border:none;box-shadow:none;background:transparent;
    transition:max-height .22s ease,padding .22s ease,margin .22s ease;min-width:0;max-width:none;
  }
  .nav-item-dropdown.open .nav-dropdown{
    max-height:400px;pointer-events:auto;padding:6px 0 4px 14px;margin-top:8px;
  }
  .nav-dropdown a{ padding:10px 0;color:var(--muted); }
  .nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background:transparent;color:var(--gold-lt); }
}

/* ---------- Shared eyebrow / section headings ---------- */
.hero-label { display:inline-flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:24px; }
.hero-label::before { content:'';width:28px;height:1px;background:var(--gold); }
.section-label { display:inline-flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:16px; }
.section-label::before { content:'';width:24px;height:1px;background:var(--gold); }
.section-title { font-family:var(--ff-h);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:300;color:#fff;line-height:1.15; }
.section-title em { font-style:italic;color:var(--gold-lt); }

/* ---------- Buttons ---------- */
.btn-primary { padding:14px 36px;background:var(--gold);color:var(--navy);border:none;cursor:pointer;font-family:var(--ff-b);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .3s,transform .2s;display:inline-block; }
.btn-primary:hover { background:var(--gold-lt);transform:translateY(-2px); }
.btn-outline { padding:13px 36px;background:transparent;color:var(--cream);border:1px solid rgba(245,240,232,0.25);cursor:pointer;font-family:var(--ff-b);font-size:.78rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:border-color .3s,color .3s;display:inline-block; }
.btn-outline:hover { border-color:var(--gold);color:var(--gold); }

/* ---------- Section base ---------- */
section { padding:100px 6vw; }

/* ---------- Fade-up reveal ---------- */
.fade-up { opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease; }
.fade-up.visible { opacity:1;transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity:1;transform:none;transition:none; }
}

/* ---------- FOOTER ---------- */
footer { background:var(--navy);border-top:1px solid var(--border);padding:60px 6vw 32px; }
.footer-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;margin-bottom:48px;max-width:1200px; }
.footer-brand img { height:56px;width:auto;object-fit:contain;margin-bottom:16px; }
.footer-brand p { font-size:.85rem;color:var(--muted);font-weight:300;line-height:1.75;max-width:280px;margin-bottom:24px; }
.social-row { display:flex;gap:12px; }
.social-btn { width:36px;height:36px;border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:border-color .3s,background .3s; }
.social-btn:hover { border-color:var(--gold);background:rgba(201,168,76,0.08); }
.social-btn svg { width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.5; }
.footer-col h4 { font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border); }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:12px; }
.footer-col a { font-size:.85rem;color:var(--muted);text-decoration:none;font-weight:300;transition:color .3s; }
.footer-col a:hover { color:var(--cream); }
.footer-bottom { padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:1200px; }
.footer-bottom p { font-size:.74rem;color:var(--muted);font-weight:300; }

/* ---------- Reusable inner-page blocks (service pages, Poslovni softver) ---------- */
.page-hero { min-height:56vh;display:flex;align-items:center;padding:160px 6vw 80px;position:relative;overflow:hidden; }
.page-hero::before { content:'';position:absolute;top:-200px;right:-120px;width:520px;height:520px;border:1px solid rgba(201,168,76,0.07);border-radius:50%;pointer-events:none; }
.page-hero-inner { position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center; }
.page-hero .hero-label { justify-content:center; }
.page-hero-title { font-family:var(--ff-h);font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:300;color:#fff;line-height:1.15;margin-bottom:24px; }
.page-hero-title em { font-style:italic;color:var(--gold-lt); }
.page-hero-desc { font-size:1rem;font-weight:300;color:var(--muted);max-width:620px;margin:0 auto 40px;line-height:1.8; }
.page-hero-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }

.placeholder-section { border-top:1px solid var(--border); }
.placeholder-section.alt { background:var(--navy2); }
.placeholder-head { max-width:680px;margin:0 auto 48px;text-align:center; }
.placeholder-head .section-label, .placeholder-head .section-title { display:block; }
.placeholder-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;max-width:1200px;margin:0 auto; }
.placeholder-grid.cols-3 { grid-template-columns:repeat(3, 1fr); }
.placeholder-grid.cols-3 > .placeholder-card:last-child:nth-child(3n+1) { grid-column:2; }
.placeholder-card { background:var(--navy);border:1px solid var(--border);border-radius:4px;padding:32px 28px;transition:transform .3s,border-color .3s; }
.placeholder-section.alt .placeholder-card { background:var(--navy); }
.placeholder-card:hover { transform:translateY(-4px);border-color:var(--gold-dk); }
.placeholder-card h3 { font-family:var(--ff-h);font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:10px; }
.placeholder-card p { font-size:.88rem;color:var(--muted);font-weight:300;line-height:1.7; }
.placeholder-note { text-align:center;font-size:.8rem;color:var(--muted);font-style:italic;margin-top:32px;max-width:640px;margin-left:auto;margin-right:auto; }

.process-steps { list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;max-width:1200px;margin:0 auto; }
.process-steps li { counter-increment:step;background:var(--navy);border:1px solid var(--border);border-radius:4px;padding:32px 26px;position:relative; }
.process-steps.alt-bg li { background:var(--navy2); }
.process-steps li::before { content:counter(step, decimal-leading-zero);font-family:var(--ff-h);font-size:1.6rem;font-weight:700;color:var(--gold);display:block;margin-bottom:14px; }
.process-steps li h3 { font-family:var(--ff-h);font-size:1.15rem;font-weight:600;color:#fff;margin-bottom:8px; }
.process-steps li p { font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.7; }

.cta-band { background:var(--navy2);text-align:center;position:relative; }
.cta-band::before { content:'';position:absolute;top:0;left:6vw;right:6vw;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dk),transparent);opacity:.3; }
.cta-band-inner { max-width:640px;margin:0 auto; }
.cta-band .section-title { margin-bottom:16px; }
.cta-band .section-label { justify-content:center; }
.cta-band p { font-size:.95rem;color:var(--muted);font-weight:300;margin-bottom:32px; }
.cta-band-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }

@media(max-width:900px){
  .page-hero { min-height:auto;padding:150px 6vw 64px; }
  .footer-grid { grid-template-columns:1fr;gap:36px; }
  .footer-bottom { flex-direction:column;text-align:center; }
  .placeholder-grid.cols-3 { grid-template-columns:repeat(2, 1fr); }
  .placeholder-grid.cols-3 > .placeholder-card:last-child:nth-child(3n+1) { grid-column:auto; }
  .placeholder-grid.cols-3 > .placeholder-card:last-child:nth-child(2n+1) { grid-column:1/-1;max-width:calc(50% - 12px);margin:0 auto; }
}
@media(max-width:640px){
  section{ padding:70px 5vw }
  .page-hero{ padding:130px 5vw 56px }
  .placeholder-grid.cols-3 { grid-template-columns:1fr; }
  .placeholder-grid.cols-3 > .placeholder-card:last-child { grid-column:auto;max-width:none;margin:0; }
}

/* ---------- Portfolio grid + filter tabs + per-card hover carousel ----------
   Shared by the homepage "Naš rad" preview (3 featured cards, no tabs) and
   the dedicated /portfolio page (all projects + tabs). See assets/portfolio.js. */
.projekti-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 6px; max-width:1000px; margin:0 auto 40px; }
.projekti-tab { appearance:none; background:none; cursor:pointer; font-family:var(--ff-b); border:1px solid var(--border); border-radius:20px; padding:9px 20px; font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s ease, border-color .3s ease; }
.projekti-tab:hover { color:var(--cream); border-color:var(--gold-dk); }
.projekti-tab.is-active { color:var(--gold); border-color:var(--gold); }

.projekti-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:stretch; gap:32px; max-width:1200px; margin:0 auto; }
.portfolio-card { display:flex; flex-direction:column; height:100%; box-sizing:border-box; overflow:hidden; background:var(--navy); border:1px solid var(--border); border-radius:4px; transition:border-color .3s ease; }
.portfolio-card.is-filtered-out { display:none; }
.portfolio-card:hover { border-color:var(--gold-dk); }
.portfolio-card:hover .portfolio-link span { transform:translateX(4px); }

.portfolio-visual { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:var(--navy2); }
.portfolio-slides { position:absolute; inset:0; width:100%; height:100%; }
.portfolio-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease, transform .6s ease; }
.portfolio-slide.is-active { opacity:1; z-index:1; }
.portfolio-card:hover .portfolio-slide.is-active { transform:scale(1.02); }

.portfolio-visual-placeholder { position:absolute; inset:0; align-items:center; justify-content:center; }
.portfolio-visual-placeholder:not([hidden]) { display:flex; }
.portfolio-placeholder-pattern { position:absolute; inset:0; background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px); background-size:28px 28px; }
.portfolio-placeholder-mark { position:relative; z-index:1; width:56px; height:56px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--ff-h); font-weight:700; font-size:1.2rem; color:var(--gold); }

.portfolio-dots { position:absolute; left:0; right:0; bottom:10px; z-index:3; display:flex; justify-content:center; gap:6px; }
.portfolio-dot { position:relative; width:6px; height:6px; padding:0; border:none; border-radius:50%; background:rgba(245,240,232,.35); cursor:pointer; transition:background .25s ease,transform .25s ease; }
.portfolio-dot::before { content:''; position:absolute; inset:-11px; } /* enlarges the tap target to ~28px without changing the visual dot */
.portfolio-dot.is-active { background:var(--gold); transform:scale(1.3); }

.portfolio-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:rgba(13,27,42,.6); color:var(--cream); display:flex; align-items:center; justify-content:center; line-height:1; cursor:pointer; opacity:0; transition:opacity .25s ease, border-color .25s ease; }
.portfolio-card:hover .portfolio-arrow { opacity:1; }
.portfolio-arrow:hover { border-color:var(--gold); color:var(--gold); }
.portfolio-arrow-prev { left:10px; }
.portfolio-arrow-next { right:10px; }

.portfolio-body { display:flex; flex-direction:column; flex:1; padding:26px 24px; }
.portfolio-category { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:10px; }
.portfolio-body h3 { font-family:var(--ff-h); font-size:1.25rem; font-weight:600; color:#fff; margin-bottom:8px; line-height:1.3; }
.portfolio-body > p { font-size:.86rem; color:var(--muted); font-weight:300; line-height:1.7; margin-bottom:16px; }
.portfolio-services { list-style:none; display:flex; flex-wrap:wrap; gap:8px 6px; margin-bottom:16px; }
.portfolio-services li { font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); border-radius:20px; padding:4px 10px; }
.portfolio-link { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); text-decoration:none; transition:color .3s ease; }
.portfolio-link:hover { color:var(--gold-lt); }
.portfolio-link span { display:inline-block; transition:transform .25s ease; }

@media (hover:none) {
  .portfolio-arrow { opacity:1; width:38px; height:38px; } /* bigger tap target — the primary way to navigate slides on touch */
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-slide, .portfolio-card { transition:none !important; }
}
@media(max-width:900px){
  .projekti-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:640px){
  .projekti-grid{ grid-template-columns:1fr; }
}

/* ---------- Numbered process timeline ----------
   Shared by the homepage "Naš proces" section and the "O nama" page's
   "Naš pristup" section. Each host section sets its own #id{background}
   and ::before hairline; .proces-step-num's background must match whatever
   that host section's background is (it "punches through" the connecting
   line), so reuse var(--navy3) as the section background wherever this
   timeline is used, or update the badge background alongside it. */
.proces-steps { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:72px 32px; max-width:1200px; margin:0 auto; }
.proces-steps.cols-4 { grid-template-columns:repeat(4, 1fr); }
.proces-step { position:relative; padding-top:36px; border-top:1px solid var(--border); transition:opacity .7s ease, transform .7s ease, border-color .3s ease; }
.proces-step:hover { transform:translateY(-3px); border-color:var(--gold-dk); }
.proces-step-num { position:absolute; top:-27px; left:0; width:54px; height:54px; border:1px solid var(--gold); border-radius:50%; background:var(--navy3); display:flex; align-items:center; justify-content:center; font-family:var(--ff-h); font-weight:700; font-size:1.05rem; color:var(--gold); }
.proces-step h3 { font-family:var(--ff-h); font-size:1.25rem; font-weight:600; color:#fff; margin:4px 0 10px; }
.proces-step p { font-size:.88rem; color:var(--muted); font-weight:300; line-height:1.7; }

.proces-step:nth-child(1){ transition-delay:0s }
.proces-step:nth-child(2){ transition-delay:.08s }
.proces-step:nth-child(3){ transition-delay:.16s }
.proces-step:nth-child(4){ transition-delay:.24s }
.proces-step:nth-child(5){ transition-delay:.32s }
.proces-step:nth-child(6){ transition-delay:.4s }
.proces-step.visible{ transition-delay:0s }

.proces-cta { text-align:center; max-width:600px; margin:88px auto 0; padding-top:56px; border-top:1px solid var(--border); }
.proces-cta h3 { font-family:var(--ff-h); font-size:1.6rem; font-weight:300; color:#fff; margin-bottom:14px; }
.proces-cta p { font-size:.92rem; color:var(--muted); font-weight:300; line-height:1.7; margin-bottom:28px; }

@media(max-width:900px){
  .proces-steps{ grid-template-columns:repeat(2, 1fr); }
  .proces-steps.cols-4{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:640px){
  .proces-steps{ grid-template-columns:1fr; gap:44px; position:relative; padding-left:56px; }
  .proces-steps::before{ content:''; position:absolute; top:22px; bottom:22px; left:22px; width:1px; background:var(--border); }
  .proces-step{ padding-top:0; border-top:none; }
  .proces-step-num{ top:0; left:-56px; width:44px; height:44px; font-size:.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .proces-step { transition-delay:0s !important; }
}