@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;src:url('/site/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;src:url('/site/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;src:url('/site/fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;src:url('/site/fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Round 2 refinement — shared by 01-quiet, 02-signal, 03-centered.
 * Brand primitives → semantic theme tokens. Pages only change layout, never colours. */
:root{
  --navy:#0A1F2C;--cyan:#2BA0D6;--slate:#5A6B78;--white:#FFFFFF;
  --mist:#F3F7FA;--line:#D8E0E6;--cyan-ink:#17729C;--pale-cyan:#EAF5FB;
  --dark-line:#344956;--dark-muted:#B9CAD4;--dark-raised:#142E3E;--dark-hover:#1B3A4D;

  --bg:var(--white);--fg:var(--navy);--muted:var(--slate);--border:var(--line);--accent:var(--cyan);--focus:var(--cyan-ink);
  --row:var(--mist);--row-hover:var(--pale-cyan);--row-border-hover:var(--cyan);--arrow:var(--slate);
  --control-border:var(--line);--control-hover:var(--mist);
  --dialog-bg:var(--white);--dialog-fg:var(--navy);--dialog-muted:var(--slate);--dialog-border:var(--line);
  --dialog-button-bg:var(--navy);--dialog-button-fg:var(--white);--backdrop:#0A1F2C99;

  --radius:14px;--font:Plex,'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  /* The wordmark SVG has ~5.8% transparent padding before the left bracket. */
  --wordmark-inset:-.058;
}
[data-theme=dark]{
  --bg:var(--navy);--fg:var(--white);--muted:var(--dark-muted);--border:var(--dark-line);--focus:var(--cyan);
  --row:var(--dark-raised);--row-hover:var(--dark-hover);--arrow:var(--dark-muted);
  --control-border:var(--dark-line);--control-hover:var(--dark-raised);
  --dialog-bg:var(--dark-raised);--dialog-fg:var(--white);--dialog-muted:var(--dark-muted);--dialog-border:var(--dark-line);
  --dialog-button-bg:var(--white);--dialog-button-fg:var(--navy);--backdrop:#020A10CC;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
body{margin:0;min-width:320px;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
img,svg{display:block;max-width:100%}
h1,h2,p{margin:0}
h1,h2,strong{font-weight:600}
[hidden]{display:none!important}
html[lang=hr] [data-l=en],html[lang=en] [data-l=hr]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;z-index:100;left:12px;top:12px;background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:8px;transform:translateY(-200%)}
.skip:focus{transform:translateY(0)}

/* Wordmark: one element; refinement.js swaps the src, CSS covers the first paint. */
.wordmark{height:auto;flex:none}
[data-theme=dark] .wordmark{content:url('/social/poletis-logo-dark.svg')}

/* Controls: language + theme, both 44px circles. */
.controls{display:flex;gap:8px;flex:none}
.control{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--control-border);background:transparent;border-radius:50%;font-size:12px;font-weight:600;letter-spacing:.06em;transition:background .16s,border-color .16s}
.control:hover{background:var(--control-hover);border-color:var(--muted)}
.control svg{width:20px;height:20px}
[data-theme-toggle] .sun,[data-theme=dark] [data-theme-toggle] .moon{display:none}
[data-theme=dark] [data-theme-toggle] .sun{display:block}

.intro{color:var(--muted);font-size:16px;line-height:1.6}

/* Soft filled rows (from Village Cover): icon + action label + outbound arrow. All equal height. */
.socials{display:grid;gap:8px}
.social{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px;border:1px solid transparent;border-radius:var(--radius);background:var(--row);color:var(--fg);text-align:left;transition:background .16s,border-color .16s,transform .16s}
.social:hover{background:var(--row-hover);border-color:var(--row-border-hover)}
.social:active{transform:translateY(1px)}
.social .icon{width:22px;height:22px;flex:none}
.social-text{flex:1;min-width:0;display:grid;gap:1px}
.social-label{font-size:16px;line-height:1.35;font-weight:600}
.social-detail{font-size:13px;line-height:1.4;color:var(--muted)}
.social .arrow{width:18px;height:18px;flex:none;color:var(--arrow);transition:transform .16s}
.social:hover .arrow{transform:translate(2px,-2px)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.social:hover .arrow,.social:active{transform:none}}