/* Evolve UniTech — v2 design (warm paper / navy-gold)
   Palette carried over from the Claude Design project
   "evolve-unipu-design-system". Components are expressed as classes here
   rather than inline styles so that a single semantic token set drives both
   the warm-paper ground and the navy "inverse" sections.

   The site is deliberately light-only: the warm paper / navy-gold pairing is
   the brand, and a dark repaint of it was not wanted. Tokens still earn their
   place — they drive the inverse regions and keep colour out of the markup. */

/* ==========================================================================
   1. Palette (raw ramps — never referenced directly outside this block)
   ========================================================================== */
:root{
--navy-50:#eef3f9;--navy-100:#d6e2ef;--navy-200:#aec4dd;--navy-300:#7b9cc2;--navy-400:#4a72a0;--navy-500:#1f4e80;--navy-600:#164a80;--navy-700:#0c3259;--navy-800:#082744;--navy-900:#051a2e;
--gold-50:#fbf7e4;--gold-100:#f5ecbf;--gold-200:#eadb84;--gold-300:#dcc23f;--gold-400:#ceb318;--gold-500:#bea502;--gold-600:#9c8802;--gold-700:#786901;--gold-800:#574b01;--gold-900:#3a3200;
--neutral-0:#ffffff;--neutral-50:#faf9f5;--neutral-100:#f1efe8;--neutral-200:#e2dfd4;--neutral-300:#c9c5b7;--neutral-400:#a29d8d;--neutral-500:#7b7668;--neutral-600:#59554a;--neutral-700:#3d3a32;--neutral-800:#26241e;--neutral-900:#14130f;
--green-500:#2e7d5b;--amber-500:#c97a10;--red-500:#a62a21;
}

/* ==========================================================================
   2. Semantic tokens — the one set. Components read these names only, never
   the ramps above, so a palette change is an edit here and nowhere else.
   ========================================================================== */
:root{
/* surfaces */
--surface-page:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-accent:var(--gold-50);

/* text */
--text-body:var(--neutral-800);
--text-heading:var(--navy-700);
--text-muted:var(--neutral-600);
--text-accent:var(--gold-700);
--text-numeral:var(--gold-700);

/* lines. --border-control is used for anything a person operates
   (fields, ghost buttons) and is held at >=3:1 against its own surface. */
--border-subtle:#ddd9cc;
--border-card:var(--neutral-300);
--border-control:var(--neutral-500);
--border-rule:var(--navy-700);

/* accent surfaces */
--accent-solid:var(--gold-500);
--accent-solid-hover:var(--gold-600);
--on-accent:var(--navy-900);
--accent-rule:var(--gold-500);
/* The gold fill is only 2.33:1 against warm paper, so a filled button needs
   its own edge for the control's boundary to be identifiable. On the navy
   ground the fill already carries that job. */
--accent-edge:var(--gold-700);

/* focus — solid, never alpha, so the ring keeps its contrast on any ground */
--focus-ring:var(--gold-700);

/* header */
--header-bg:rgb(250 249 245 / .88);
--header-border:var(--border-card);

/* elevation */
--shadow-sm:0 1px 3px rgb(12 50 89 / .10),0 1px 2px rgb(12 50 89 / .05);
--shadow-md:0 4px 12px rgb(12 50 89 / .10),0 1px 3px rgb(12 50 89 / .05);
--shadow-lg:0 12px 32px rgb(12 50 89 / .14),0 2px 6px rgb(12 50 89 / .06);

/* radius */
--radius-md:8px;--radius-lg:14px;--radius-xl:24px;--radius-pill:999px;

/* type */
--font-display:'EB Garamond',Garamond,Georgia,serif;
--font-body:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

/* Type scale. The smallest step is 12px: the previous 11px labels sat on
   the legibility floor while carrying real content, and uppercase +
   wide tracking costs legibility on top of size. */
--fs-label:.75rem;      /* 12px — mono, uppercase, tracked */
--fs-sm:.9375rem;       /* 15px — dense card copy */
--fs-base:1rem;         /* 16px — body copy */
--fs-lead:clamp(1rem,.96rem + .3vw,1.125rem);
--fs-h3-sm:1.25rem;
--fs-h3:clamp(1.375rem,1.28rem + .45vw,1.625rem);
--fs-h2:clamp(1.75rem,1.35rem + 1.9vw,3.125rem);
--fs-display:clamp(1.5rem,1.1rem + 2vw,2.875rem);

/* layout */
--wrap:76rem;
--gutter:clamp(20px,5vw,48px);
--section-y:clamp(72px,10vw,128px);
--header-h:64px;

/* motion */
--ease-standard:cubic-bezier(.32,.72,0,1);
--dur-fast:.18s;
--dur-base:.24s;
}

/* ==========================================================================
   3. Inverse (navy) regions — same token names, re-pointed.
   Anything inside .inverse gets the navy treatment, so components need no
   "on navy" variants of their own.
   ========================================================================== */
/* .card--feature is a navy card sitting inside a paper section, so it takes
   the same token re-point as a full navy region: without it the card's
   labels kept the paper-ground gold and landed at 2.4:1 on navy. */
.inverse,.card--feature{
--surface-page:var(--navy-700);
--surface-card:var(--navy-800);
--surface-sunken:var(--navy-800);
--surface-accent:var(--navy-800);

--text-body:var(--navy-100);
--text-heading:var(--neutral-50);
--text-muted:var(--navy-200);
--text-accent:var(--gold-300);
--text-numeral:var(--gold-300);

--border-subtle:rgb(255 255 255 / .16);
--border-card:rgb(255 255 255 / .18);
--border-control:var(--navy-300);
--border-rule:var(--gold-400);

--accent-solid:var(--gold-500);
--accent-solid-hover:var(--gold-400);
--on-accent:var(--navy-900);
--accent-rule:var(--gold-400);
--accent-edge:var(--gold-500);

--focus-ring:var(--gold-300);

background:var(--surface-page);
color:var(--text-body);
}
/* ==========================================================================
   4. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Fixed header would otherwise cover the target heading of every in-page
     jump; the header is 64px on desktop and taller once the nav sheet is in
     play, so the offset is generous. */
  scroll-padding-top:calc(var(--header-h) + 16px);
  /* Pinned, not a default: the site is light-only, and without this the
     browser paints native controls — scrollbars, the select popup, autofill
     backgrounds — in dark for visitors whose OS is set to dark. */
  color-scheme:light;
}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--text-accent);text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
template{display:none}
::selection{background:var(--accent-solid);color:var(--on-accent)}

/* Focus: solid token colour at 3px. The previous ring was gold at .38 alpha,
   which composited to 1.36:1 on paper — effectively invisible. */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:2px;
}

input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}

/* ==========================================================================
   5. Layout primitives
   ========================================================================== */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.section{
  padding-block:var(--section-y);
  background:var(--surface-page);
  color:var(--text-body);
}
.section--hairline{border-top:1px solid var(--border-subtle)}
.section--flush-top{padding-top:0}
.section--relative{position:relative;overflow:hidden}

.stack-sm>*+*{margin-top:10px}
.measure{max-width:62ch}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:100;
  padding:12px 18px;border-radius:var(--radius-md);
  background:var(--accent-solid);color:var(--on-accent);
  font-size:var(--fs-sm);font-weight:600;
  transition:top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus{top:12px}

/* ==========================================================================
   6. Typography
   ========================================================================== */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-accent);
  margin:0;
}
.label{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.label--accent{color:var(--text-accent)}
.label--heading{color:var(--text-heading)}
.label--plain{text-transform:none;letter-spacing:.06em}

.h2{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h2);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--text-heading);
  text-wrap:pretty;
}
.h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h3);
  line-height:1.14;
  color:var(--text-heading);
  text-wrap:pretty;
}
.h3--sm{font-size:var(--fs-h3-sm)}
.h3--plain{font-family:var(--font-body);font-size:var(--fs-base);font-weight:600}

.lead{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--text-body);text-wrap:pretty}
.body{margin:0;font-size:var(--fs-base);line-height:1.6;color:var(--text-body);text-wrap:pretty}
.body--muted{color:var(--text-muted)}
.body--sm{font-size:var(--fs-sm);line-height:1.55}

.rule{width:64px;height:3px;background:var(--accent-rule);margin-top:22px;border:0}
.rule--short{width:28px;margin:0}

.section-head{margin-bottom:clamp(30px,4vw,48px);max-width:60ch}
.section-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;max-width:none;
}
.section-head--ruled{padding-bottom:22px;border-bottom:3px solid var(--accent-rule);margin-bottom:0}

/* ==========================================================================
   7. Buttons — every control clears 44px so it is comfortable to hit
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;text-align:center;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.btn--primary{
  background:var(--accent-solid);color:var(--on-accent);
  border-color:var(--accent-edge);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3);
}
.btn--primary:hover{
  background:var(--accent-solid-hover);color:var(--on-accent);
  border-color:var(--accent-solid-hover);
}
.btn--ghost{
  background:transparent;color:var(--text-heading);
  border-color:var(--border-control);font-weight:500;
}
.btn--ghost:hover{border-color:var(--accent-solid);background:color-mix(in srgb,var(--accent-solid) 10%,transparent)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.875rem}

/* ==========================================================================
   8. Site header + navigation
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px clamp(16px,4vw,40px);
  background:var(--header-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--header-border);
  opacity:0;transform:translateY(-100%);visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard),
             visibility var(--dur-base);
}
/* Visibility (not just opacity) so the links leave the tab order while the
   header is parked off-screen; `inert` is set alongside it from script.js. */
.site-header.is-visible{opacity:1;transform:translateY(0);visibility:visible}

.brand{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--text-heading)}
.brand__mark{display:block;width:32px;height:32px;flex:none}
.brand__name{
  font-family:var(--font-display);font-weight:500;font-size:1rem;
  letter-spacing:.12em;color:var(--text-heading);white-space:nowrap;
}
.brand__name em{font-style:normal;color:var(--text-accent)}

.nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px)}
.nav__link{
  display:inline-flex;align-items:center;
  min-height:44px;padding-inline:6px;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover{color:var(--text-heading)}

.nav-toggle{
  display:none;
  align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 14px;
  background:transparent;border:1px solid var(--border-control);
  border-radius:var(--radius-md);color:var(--text-heading);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.nav-toggle__bars{position:relative;width:16px;height:2px;background:currentColor;flex:none}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* Below this width the inline links wrap onto extra rows and the fixed header
   grows past the hero; they move into a sheet instead. The threshold sits at
   1160px rather than 900px because the row now also carries the language
   switch: laid out on one line the brand, six links, switch and call to
   action measure ~1116px in Croatian and ~1145px in English. */
@media (max-width:1160px){
  .nav-toggle{display:inline-flex}
  /* Closed sheet is display:none, so its links leave the tab order without
     needing an extra aria-hidden or inert. */
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(16px,4vw,40px) 20px;
    background:var(--surface-page);
    border-bottom:1px solid var(--header-border);
    box-shadow:var(--shadow-lg);
  }
  .nav.is-open{display:flex}
  .nav__link{
    min-height:52px;padding-inline:0;
    font-size:.8125rem;letter-spacing:.14em;
    border-bottom:1px solid var(--border-subtle);
  }
  .nav .btn{margin-top:16px;width:100%}
  .nav .lang-switch{align-self:flex-start;margin-top:16px}
}

/* ==========================================================================
   8b. Language switch
   The site ships in Croatian; this is the control that repaints it in
   English. Two of them are always in the document — one floating over the
   hero, because the header is parked off-screen until you scroll, and one
   inside the header for everywhere after that — plus a spelled-out pair in
   the footer. They share one state, written by i18n.js as aria-pressed.
   ========================================================================== */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px;
  background:var(--surface-page);
  border:1px solid var(--border-control);border-radius:var(--radius-pill);
}
.lang-switch__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 14px;
  background:transparent;border:0;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.lang-switch__btn:hover{color:var(--text-heading)}
.lang-switch__btn[aria-pressed="true"]{
  background:var(--accent-solid);color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3);
}

/* The hero copy of the switch. It steps aside the moment the header arrives
   with its own — two switches on screen at once would be one too many. */
.lang-switch--float{
  position:fixed;z-index:55;
  top:clamp(10px,2vw,20px);right:clamp(12px,4vw,40px);
  box-shadow:var(--shadow-md);
  transition:opacity var(--dur-base) var(--ease-standard),
             visibility var(--dur-base);
}
.header-visible .lang-switch--float{opacity:0;visibility:hidden;pointer-events:none}

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vh,28px);
  padding:clamp(44px,7vh,96px) var(--gutter) clamp(48px,7vh,84px);
  overflow:hidden;text-align:center;
}
.hero__watermark{
  position:absolute;right:-16vw;bottom:-26vw;width:74vw;height:74vw;
  opacity:.07;pointer-events:none;
}
.hero__lockup{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vh,24px)}
/* The mark is the thing people should remember, so it gets the room.
   It stays governed by vh as well as vw: the hero is one viewport tall and
   has six stacked children, so a mark sized on width alone would push the
   calls to action off a short laptop screen. */
.hero__mark{width:clamp(84px,min(16vw,16vh),216px);height:auto;line-height:0}
.hero__wordmark{
  display:flex;align-items:baseline;gap:clamp(10px,1.4vw,20px);
  flex-wrap:wrap;justify-content:center;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,min(5.4vw,7.4vh),4.25rem);
  line-height:1;letter-spacing:.17em;
}
.hero__word{display:flex;color:var(--text-heading)}
.hero__word--accent{color:var(--text-accent)}
.hero__title{
  margin:0;max-width:22ch;
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-display);line-height:1.14;letter-spacing:-.01em;
  color:var(--text-heading);text-wrap:pretty;
}
.hero__sub{margin:0;max-width:54ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero__eyebrow{text-wrap:balance}
.hero__scroll{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(16px,3vh,34px);
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
}
.hero__pulse{width:6px;height:6px;border-radius:50%;background:var(--accent-solid);animation:eutPulse 2.2s ease-in-out infinite}

@keyframes eutPulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ==========================================================================
   10. Cards & grids
   ========================================================================== */
.grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.grid--cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(12px,1.4vw,16px)}
.grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(26px,4vw,56px)}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,5vw,72px);align-items:start}
.grid--phases{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(12px,1.4vw,16px)}
.grid--sectors{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,3vw,40px)}
/* Explicit 1 / 2 / 3 rather than auto-fit: the count divides the row, so six
   logos fill 3+3 on desktop and 2+2+2 on tablet with no orphan. These two
   numbers are tied to how many partners are listed — revisit them when the
   list changes length. */
.grid--logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
@media (max-width:460px){.grid--logos{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1000px){.grid--logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  min-width:0;
  display:flex;flex-direction:column;gap:10px;
  padding:24px;
  background:var(--surface-card);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card--tall{min-height:250px}
.card--roomy{padding:clamp(22px,2.6vw,30px);gap:12px}
.card--feature{
  background:var(--navy-700);border-color:var(--navy-700);
  padding:clamp(24px,3vw,36px);gap:12px;
}
.card--flagged{border-color:var(--accent-solid)}
.card--interactive{
  transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.card--interactive:hover,.card--interactive:focus-within{
  transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.card__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--border-subtle);
  font-family:var(--font-mono);font-size:var(--fs-label);
  line-height:1.6;letter-spacing:.06em;color:var(--text-muted);
}
.card__foot strong{display:block;font-weight:400;color:var(--text-heading)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}

.phase__dot{width:9px;height:9px;border-radius:50%;background:var(--accent-solid);flex:none}
.phase__head{display:flex;align-items:center;gap:10px}

/* "Sedam ulaza" — the lead card spans two columns, but only once two
   columns actually exist. Unconditional `span 2` forced a phantom second
   track at phone widths and squeezed six cards into 63px. */
@media (min-width:760px){
  .card--span2{grid-column:span 2}
}

/* ==========================================================================
   11. Numbered reason list
   ========================================================================== */
.reasons{--reason-pad:clamp(14px,2vw,24px)}
.reason{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(14px,2.4vw,36px);
  align-items:baseline;
  padding:clamp(22px,3vw,34px) var(--reason-pad);
  /* Pulled back out so the numeral column stays on the same optical line
     whether or not the row carries a background. */
  margin-inline:calc(var(--reason-pad) * -1);
  border-bottom:1px solid var(--border-subtle);
}
.reason__num{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.4vw,3rem);
  line-height:.9;color:var(--text-numeral);
}
.reason__tag{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-accent);white-space:nowrap;
}
.reason__body{margin:8px 0 0;max-width:62ch}
/* Emphasis without breaking the row rhythm: a gold edge and a tint, not a
   floating card that indents the numeral against its neighbours. */
.reason--flagged{
  background:var(--surface-accent);
  border-left:3px solid var(--accent-rule);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding-left:calc(var(--reason-pad) - 3px);
}
@media (max-width:620px){
  .reason{grid-template-columns:auto 1fr;row-gap:6px}
  .reason__tag{grid-column:2;justify-self:start}
}

/* ==========================================================================
   12. Sector columns, chips, notes
   ========================================================================== */
.sector__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:3px solid var(--border-rule);
}
.sector__head--accent{border-bottom-color:var(--accent-rule)}
.sector{display:flex;flex-direction:column;gap:16px}
.sector__list{display:flex;flex-direction:column;gap:12px}
.sector__item{font-size:var(--fs-sm);line-height:1.5;color:var(--text-body)}

.chip-row{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(28px,4vw,44px);padding-top:22px;
  border-top:1px solid var(--border-subtle);
}
.chip{
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);border:1px solid var(--border-card);
  font-size:.875rem;color:var(--text-body);
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:var(--radius-pill);
  border:1px dashed var(--accent-rule);
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
}
.pill--solid{
  border-style:solid;background:var(--accent-solid);
  border-color:var(--accent-solid);color:var(--on-accent);
}

.bullet{display:flex;gap:10px;font-size:var(--fs-sm);line-height:1.55;color:var(--text-body)}
.bullet__glyph{flex:none;color:var(--text-accent)}
.bullet--negative{color:var(--text-muted)}
.bullet--negative .bullet__glyph{color:var(--text-muted)}
.bullet-group__head{
  display:block;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);
  margin-bottom:14px;
}

.meta-list{display:flex;flex-direction:column}
.meta-row{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:18px 0;border-top:1px solid var(--border-subtle);
}
.meta-row:last-child{border-bottom:1px solid var(--border-subtle)}
.meta-row__num{
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.16em;color:var(--text-accent);padding-top:4px;
}

.callout{
  position:relative;overflow:hidden;
  border:1px solid var(--accent-rule);border-radius:var(--radius-xl);
  padding:clamp(26px,4vw,52px);background:var(--surface-card);
}
.callout__watermark{
  position:absolute;right:-8%;bottom:-38%;width:46%;height:auto;aspect-ratio:1;
  opacity:.07;pointer-events:none;
}

.watermark{position:absolute;opacity:.06;pointer-events:none}
.watermark--metoda{left:-18vw;top:-14vw;width:56vw;height:56vw}
.watermark--kontakt{left:-22vw;bottom:-26vw;width:64vw;height:64vw}

/* Case-study fields that are still awaiting copy. Marked, not disguised. */
.placeholder-copy{
  outline:1px dashed var(--accent-rule);outline-offset:6px;
  color:var(--text-muted);
}
.case-field{padding:20px 0;border-bottom:1px solid var(--border-subtle)}
.case-field:last-child{border-bottom:0}
.case-meta{
  display:flex;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--border-subtle);
}
.case-media{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-card);aspect-ratio:4/3;background:var(--surface-sunken);
}

/* Partner logos are painted as CSS masks rather than dropped in as images.
   The sources arrive in their own palettes — UNIPU gold + grey, Cenosco
   black, HGK red + black — and a light brand blue would sit near 1.7:1 on
   the white card, close to invisible at this size. Masking them all to one
   navy ink makes the row read as a single system, and keeps gold reserved
   for Evolve's own mark, which is the same spiral as UNIPU's seal and would
   otherwise read as a duplicate.
   Check each brand book: most permit a one-colour reproduction. */
.logo-slot{
  height:104px;background:var(--surface-card);
  border:1px solid var(--border-card);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  padding:16px 24px;
}
.logo-slot__mark{
  width:100%;height:56px;
  background-color:var(--text-heading);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* contain does the optical sizing for free: a wide wordmark fits by width
     and lands shorter than a square mark, which is what the eye wants. */
  -webkit-mask-size:contain;mask-size:contain;
}
/* A seal with a ring of microtype needs the full box; a wordmark set at the
   same height would tower over its neighbours. */
.logo-slot__mark--seal{height:64px}
.logo-slot__mark--word{height:34px}
/* A mark that stacks a symbol over its own wordmark spends most of its height
   on the symbol, so the lettering underneath needs the taller box to stay
   above the point where its thin strokes start to break up. */
.logo-slot__mark--stacked{height:64px}
/* A partner whose mark has not arrived yet. The slot keeps its size so the
   row holds its rhythm, and says what is missing instead of reading as a
   logo that failed to load. Same dashed treatment as the other placeholders
   on the page. */
.logo-slot--pending{
  background:var(--surface-sunken);
  border-style:dashed;border-color:var(--border-control);
  box-shadow:none;
  padding:12px;text-align:center;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
}
.partner{display:flex;flex-direction:column;gap:12px}
.partner__name{font-size:.875rem;font-weight:600;color:var(--text-heading)}

.media-slot{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;
  background:var(--surface-sunken);
  border:1px dashed var(--border-control);
  color:var(--text-muted);
  font-size:.875rem;line-height:1.4;
}

/* ==========================================================================
   13. Contact form
   ========================================================================== */
.contact-panel{
  background:var(--surface-card);
  border:1px solid var(--border-card);
  border-radius:var(--radius-xl);
  padding:clamp(22px,3vw,36px);
}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:.875rem;color:var(--text-muted)}
.field__hint{font-size:.8125rem;color:var(--text-muted)}
.field__control{
  min-height:48px;padding:0 14px;
  border-radius:var(--radius-md);
  /* was rgb(255 255 255 / .22) — 1.96:1 against the field, below the 3:1
     floor for the boundary of a control */
  border:1px solid var(--border-control);
  background:var(--surface-page);
  color:var(--text-body);
  font-size:var(--fs-sm);
}
textarea.field__control{padding:12px 14px;line-height:1.55;resize:vertical;min-height:112px}
.field__control:hover{border-color:var(--text-body)}

.form__note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--text-muted)}
.form__status{
  display:flex;flex-direction:column;gap:14px;
  min-height:280px;justify-content:center;
}
.form__status .rule{margin-top:0;width:36px}
.form__error{
  padding:12px 14px;border-radius:var(--radius-md);
  border:1px solid var(--red-500);
  background:color-mix(in srgb,var(--red-500) 12%,transparent);
  color:var(--text-heading);font-size:var(--fs-sm);
}

/* inline-flex + min-height so this display-size link is still a 48px target,
   rather than the 38px an inline-block gave it */
.contact__email{
  display:inline-flex;align-items:flex-end;
  min-height:48px;margin-top:26px;
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.6vw,2.125rem);line-height:1.1;
  color:var(--text-accent);
  border-bottom:1px solid var(--accent-rule);padding-bottom:6px;
}
.contact__email:hover{color:var(--text-heading);border-color:var(--text-heading)}

/* Legal / company-register details (impressum). Plain-case, not the tracked
   mono style below it: that style reads fine for a three-word tagline but
   turns a full registered name and a street address into noise. Four
   columns of short paragraphs, wrapping like the other auto-fit grids on
   the page rather than a rigid table. */
.footer-legal{
  padding-top:clamp(28px,4vw,44px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(16px,2.4vw,28px);
}
.footer-legal p+p{margin-top:4px}
.footer-legal__org{font-size:var(--fs-sm);line-height:1.5;color:var(--text-body)}
.footer-legal__email{display:inline-block;margin-top:4px;color:var(--text-accent)}
.footer-legal__email:hover{color:var(--text-heading)}

.site-footer{
  margin-top:clamp(24px,3.4vw,36px);
  padding:26px 0;
  border-top:1px solid var(--border-subtle);
  display:flex;gap:clamp(14px,3vw,32px);flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}

/* ==========================================================================
   14. Motion
   ========================================================================== */
/* Scroll reveals are armed by script.js, never by the stylesheet. If the
   script fails to load, `.reveal` means nothing and every section is simply
   visible — the alternative is a blank page with the content in the DOM. */
.reveal-armed .reveal{opacity:0;transform:translateY(8px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .38s var(--ease-standard),transform .38s var(--ease-standard);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-armed .reveal{opacity:1;transform:none;transition:none}
  .hero__pulse{animation:none;opacity:.85}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}