/* ==========================================================================
   Klima Zirdum — design system
   --------------------------------------------------------------------------
   Direction: the subject is cooling. The palette is built cold — a deep petrol
   ground and an ice-cyan accent — with one warm ember tone reserved for heating
   and for the single primary action per screen. Type pairs Sora (geometric,
   engineered) for headings with IBM Plex Sans for text; both carry full Croatian
   diacritics, which rules out a lot of otherwise-nice faces.
   ========================================================================== */

/* Fonts are served from this host, not from Google. Loading them from
   fonts.gstatic.com sends every visitor's IP address to a third party
   before they have agreed to anything, which is exactly what the cookie
   notice would then have to disclose. Regenerate with
   app/migrations/fetch_fonts.py. Sora and IBM Plex Sans are variable
   fonts, so one file covers all of their weights. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-2.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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-2.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-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:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sora-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;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sora-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:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-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;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-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:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-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;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-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:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/sora-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;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/sora-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;}

:root{
  /* ground + ink */
  --ink:#08181F;
  --ink-2:#0E2630;
  --body:#334E58;
  --muted:#6B8592;
  --line:#DCE7EB;
  --line-soft:#EDF3F5;
  --line-input:#C6D8DF;   /* firmer than --line: a field has to read as a field */
  --bg:#FFFFFF;
  --bg-2:#F4F8F9;
  --bg-3:#E9F1F3;

  /* brand */
  --brand:#0B5E73;
  --brand-2:#128CA8;
  --brand-3:#31B4D0;
  --ice:#E2F1F5;

  /* semantic */
  --ember:#C2410C;      /* heating + primary CTA */
  --ember-2:#EA580C;
  --ok:#15734F;
  --warn:#9A3412;

  /* type */
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* rhythm — 4pt scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;  --s7:3rem;  --s8:4rem;  --s9:6rem;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --shadow-1:0 1px 2px rgba(8,24,31,.06), 0 1px 3px rgba(8,24,31,.04);
  --shadow-2:0 4px 6px -2px rgba(8,24,31,.06), 0 12px 24px -8px rgba(8,24,31,.12);
  --shadow-3:0 12px 24px -6px rgba(8,24,31,.10), 0 32px 56px -20px rgba(8,24,31,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t:220ms; --t-slow:340ms;

  --wrap:1220px;
  --nav-h:72px;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 17px/1.65 var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--brand-2); text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:700}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:600; letter-spacing:-.01em}
h4{font-size:1rem; font-weight:600}
p{margin:0 0 var(--s4); max-width:68ch}
ul,ol{margin:0 0 var(--s4); padding-left:1.15em}
:focus-visible{outline:3px solid var(--brand-3); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.narrow{max-width:800px}
.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}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);transition:top var(--t)}
.skip:focus{top:var(--s4); color:#fff}

/* ----------------------------------------------------------- navigation -- */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--t), box-shadow var(--t);
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:var(--shadow-1)}
.nav__in{display:flex; align-items:center; gap:var(--s5); height:100%}
.logo{display:flex; align-items:baseline; gap:.42rem; font-family:var(--display); font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.03em}
.logo em{font-style:normal; color:var(--brand-2)}
.logo:hover{color:var(--ink)}
.nav__links{display:flex; align-items:center; gap:var(--s1); margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav__links a{
  display:block; padding:.5rem .7rem; border-radius:var(--r-sm); color:var(--ink-2);
  font-weight:500; font-size:.95rem; position:relative; transition:color var(--t), background var(--t);
}
.nav__links a::after{
  content:''; position:absolute; left:.7rem; right:.7rem; bottom:.32rem; height:2px;
  background:var(--brand-2); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease-out);
}
.nav__links a:hover{background:var(--bg-2)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links a[aria-current]{color:var(--brand)}
.nav__end{display:flex; align-items:center; gap:var(--s3)}
.langsw{display:flex; gap:2px; background:var(--bg-2); border-radius:var(--r-sm); padding:3px}
.langsw a{padding:.28rem .5rem; border-radius:4px; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.langsw a[aria-current]{background:#fff; color:var(--ink); box-shadow:var(--shadow-1)}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer}
.burger span{display:block; width:19px; height:2px; background:var(--ink); position:relative; transition:background var(--t-fast)}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:19px; height:2px; background:var(--ink); transition:transform var(--t) var(--ease-out)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  --bg-btn:var(--brand); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.4rem; border:0; border-radius:var(--r);
  background:var(--bg-btn); color:var(--fg-btn); cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.98rem; line-height:1;
  text-align:center; transition:transform var(--t-fast) var(--ease), box-shadow var(--t), background var(--t);
  box-shadow:var(--shadow-1);
}
/* Hover darkens the BACKGROUND only, never the whole element. filter:
   brightness() multiplies the label along with the surface, so on a solid
   button with a white label both move together and contrast falls whichever
   way it is pointed: brightness(1.08) took --ember from 5.18:1 to 4.88:1 and
   brightness(.92) only reached 5.09:1. Mixing the background toward black
   leaves the label at full white: --ember 5.18 -> 6.33:1, --brand 7.34 ->
   8.64:1. Variants that set their own hover background (ghost, hero ghost,
   consent bar) come later in the file and win on source order. */
.btn:hover{color:var(--fg-btn); background:color-mix(in srgb, var(--bg-btn) 88%, #000);
  box-shadow:var(--shadow-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--cta{--bg-btn:var(--ember)}

/* The hero has one job - get people to the units - so that button is sized and
   lit to be the obvious thing on the screen. Ember on the dark sky carries
   5.2:1 against white, so the emphasis does not cost contrast.

   The pulse is a spreading box-shadow rather than a scaled ring: spread grows
   by the same number of pixels on every side and follows the border radius,
   whereas scaling a button that is far wider than it is tall throws the ring
   out sideways and reads as a stray outline. It also never moves the target
   under the cursor, and it stops on hover and focus - by then it has done its
   job and would only be noise. */
.btn--hero{
  min-height:58px; padding:1.05rem 2rem; font-size:1.08rem; letter-spacing:.005em;
  box-shadow:0 14px 34px -10px rgba(194,65,12,.85),
             0 2px 6px rgba(3,20,28,.35),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.js .btn--hero{animation:ctaPulse 3s var(--ease) infinite}
.btn--hero:hover,.btn--hero:focus-visible{
  animation:none;
  box-shadow:0 18px 40px -10px rgba(194,65,12,.95),
             0 2px 6px rgba(3,20,28,.35),
             inset 0 1px 0 rgba(255,255,255,.22),
             0 0 0 4px rgba(255,142,82,.35);
}
.btn--hero svg{transition:transform var(--t-fast) var(--ease)}
.btn--hero:hover svg{transform:translateX(3px)}

@keyframes ctaPulse{
  0%      {box-shadow:0 14px 34px -10px rgba(194,65,12,.85),
             0 2px 6px rgba(3,20,28,.35),
             inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 0 rgba(255,142,82,.55)}
  70%,100%{box-shadow:0 14px 34px -10px rgba(194,65,12,.85),
             0 2px 6px rgba(3,20,28,.35),
             inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 18px rgba(255,142,82,0)}
}
.btn--ghost{--bg-btn:transparent; --fg-btn:var(--ink); border:1px solid var(--line); box-shadow:none}
/* --ice, not --bg-2: a ghost button inside a .section--tint or the service
   CTA card sits on --bg-2 already, so hovering to --bg-2 changed nothing at
   all. Four buttons across the site had a hover you could not see. --ice is
   distinct from both white and --bg-2, and keeps --ink above 15:1. */
.btn--ghost:hover{border-color:var(--brand-2); background:var(--ice)}
.btn--light{--bg-btn:rgba(255,255,255,.14); --fg-btn:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.26); box-shadow:none}
.btn--sm{min-height:40px; padding:.55rem 1rem; font-size:.9rem}
.btn--block{width:100%}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative; overflow:hidden; color:#CFE3EB; isolation:isolate;
  /* Dusk over the ice. The daylight version was too pale to see white snow
     against - this keeps the cold, gives the flakes something to fall through,
     and still ends in a lit white shelf rather than the flat dark slab the
     hero started as. */
  background:linear-gradient(180deg,#07222E 0%, #0C3648 38%, #14526A 72%, #1C6D87 100%);
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(9rem,17vw,12.5rem);
}
.hero>*{position:relative; z-index:2}

/* --- artwork ---------------------------------------------------------------
   Sky glow, drifting snow, crystals, an ice shelf and the penguin standing on
   it. Everything is vector or gradient: nothing third-party may load, and this
   stays sharp at any size for a couple of kB. */
.hero__art{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}

/* cold low sun, top right */
.hero__glow{
  position:absolute; inset:0;
  /* A low sun sitting behind the penguin, so a dark silhouette still reads
     against a dark sky, plus a cold wash top-left to keep the corner alive. */
  background:
    radial-gradient(26rem 20rem at 84% 78%, rgba(173,226,240,.55), transparent 64%),
    radial-gradient(44rem 34rem at 88% 86%, rgba(49,180,208,.30), transparent 70%),
    radial-gradient(34rem 26rem at 6% 6%,  rgba(49,180,208,.16), transparent 72%);
}

/* --- snow ------------------------------------------------------------------
   One flake drawn once as a data URI and reused by every span. Each flake gets
   its own column, size, duration and a negative delay so the field is already
   mid-fall on first paint. Animated on transform, which the compositor owns.

   Speed matters more than count here: the previous gradient layers moved at
   3-20 px/s and read as a static texture. These cross the hero in 8-22s, which
   is roughly 40-110 px/s - the range that actually looks like falling snow.

   The flake is stroked twice, a wider pale blue under white, so it stays
   visible over the pale sky AND over the white ice at the bottom. */
.hero__snow{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.flake{
  position:absolute; top:0; display:block;
  width:calc(22px * var(--s)); height:calc(22px * var(--s));
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%2386C2D6' stroke-width='4.2'%3E%3Cpath d='M0-16V16M-13.8-8 13.8 8M-13.8 8 13.8-8'/%3E%3Cpath d='M0-11l-3.6 4M0-11l3.6 4M0 11l-3.6-4M0 11l3.6-4'/%3E%3Cpath d='M-9.5-5.5l-1 5.2M-9.5-5.5l5.2 1M9.5 5.5l1-5.2M9.5 5.5l-5.2-1'/%3E%3Cpath d='M-9.5 5.5l5.2-1M-9.5 5.5l-1-5.2M9.5-5.5l-5.2 1M9.5-5.5l1 5.2'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M0-16V16M-13.8-8 13.8 8M-13.8 8 13.8-8'/%3E%3Cpath d='M0-11l-3.6 4M0-11l3.6 4M0 11l-3.6-4M0 11l3.6-4'/%3E%3Cpath d='M-9.5-5.5l-1 5.2M-9.5-5.5l5.2 1M9.5 5.5l1-5.2M9.5 5.5l-5.2-1'/%3E%3Cpath d='M-9.5 5.5l5.2-1M-9.5 5.5l-1-5.2M9.5-5.5l-5.2 1M9.5-5.5l1 5.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  will-change:transform;
}
/* depth: the far ones are fainter and sway less */
.flake--a{opacity:.45}
.flake--b{opacity:.7}
.flake--c{opacity:.92}

.js .flake{animation:flakeFall var(--d) linear var(--delay) infinite}
.flake--b{--sway:22px}
.flake--c{--sway:34px}
.flake--a{--sway:12px}

/* The travel is viewport-relative plus a fixed floor. On a wide but short
   window the hero is sized by width while vh is small, so a purely vh-based
   fall stops short of the ice and the flakes wink out in mid-air; the extra
   pixels cover that. Overshoot costs nothing - .hero__snow clips it. */
@keyframes flakeFall{
  0%  {transform:translate3d(0,calc(-20vh - 40px),0) rotate(0deg)}
  50% {transform:translate3d(var(--sway,18px),calc(55vh + 80px),0) rotate(180deg)}
  100%{transform:translate3d(0,calc(130vh + 200px),0) rotate(360deg)}
}

/* crystals drift very slowly, so they read as texture, not decoration */
.hero__crystals{
  position:absolute; inset:0; width:100%; height:100%;
  color:#BFE6F2; opacity:.34;
}
.js .hero__crystals{animation:crystalDrift 30s ease-in-out infinite alternate}

/* Ice and penguin share one box anchored to the bottom of the hero, so the
   penguin is placed against the shelf rather than against the section - the
   reason it was floating 80px above the surface before. */
.hero__ground{position:absolute; left:0; right:0; bottom:0; height:clamp(9rem,17vw,13.5rem)}
.hero__ice{position:absolute; inset:0; width:100%; height:100%}
.ice--far {fill:#7FB9CE}
.ice--mid {fill:#BFDEEA}
.ice--near{fill:#FFFFFF}
.ice__edge{stroke:rgba(255,255,255,.55); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke}

/* --- the penguin -----------------------------------------------------------
   The one piece of brand equity worth carrying over, so it is now a figure on
   the ice rather than a watermark: full strength, and large enough to be the
   thing you look at after the headline. */
.hero__pen{
  /* 16.67% == (300-250)/300: the flat part of the near plane in the viewBox. */
  position:absolute; right:clamp(1rem,8vw,7.5rem); bottom:16.67%;
  height:clamp(9rem,21vw,17rem); display:grid; place-items:end center;
}
.hero__penguin{height:100%; width:auto; color:#06212C; display:block;
  /* a cold rim so the silhouette separates from the sky above the ice line */
  filter:drop-shadow(0 0 1px rgba(190,230,245,.85)) drop-shadow(0 10px 20px rgba(3,20,28,.45))}
.hero__shadow{
  position:absolute; bottom:-.55rem; left:50%; transform:translateX(-50%);
  width:118%; height:1.5rem; border-radius:50%;
  background:radial-gradient(closest-side, rgba(6,33,44,.34), transparent 70%);
}
.js .hero__pen{animation:penguinIn 900ms var(--ease-out) both 120ms}

@keyframes penguinIn{from{opacity:0; transform:translateY(20px) scale(.97)} to{opacity:1; transform:none}}
@keyframes crystalDrift{from{transform:translate3d(0,0,0)} to{transform:translate3d(-14px,10px,0)}}

@media (max-width:900px){
  .hero__pen{height:clamp(7rem,20vw,10rem); right:1rem}
  .hero__crystals{opacity:.32}
}
@media (max-width:620px){
  .hero{padding-bottom:clamp(8.5rem,30vw,11rem)}
  .hero__pen{height:7rem; right:.75rem}
}

/* --- hero type -------------------------------------------------------------
   Ink on ice. The old rules were written for a dark slab, so every colour here
   had to be re-grounded rather than inherited. */
.hero h1{color:#fff; max-width:15ch}
.hero__kicker{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:var(--s4);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8FE0F5; background:rgba(49,180,208,.14); border:1px solid rgba(143,224,245,.34);
  padding:.4rem .8rem; border-radius:999px; backdrop-filter:blur(4px);
}
.hero__lead{font-size:clamp(1.02rem,1.6vw,1.18rem); color:#B7D2DD; max-width:52ch; margin:var(--s5) 0 var(--s6)}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s3)}
/* The hero ghost button hovers DARKER, like every other button on the site.
   Lightening a translucent white panel on a dark gradient moves it toward the
   label: measured at the button position (47-54% of the hero, #0E3E52-#104458)
   the old white .20 hover fell to 4.83:1, barely over AA. Darkening with
   black .22 and a full white label gives 13.03:1, and the rest state 8.17:1.
   Border alphas are sized to clear 3:1 against the hero, which WCAG 1.4.11
   asks of a control boundary -- the old .28 managed only 2.64:1. */
.hero .btn--ghost{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.46); color:#fff;
  backdrop-filter:blur(6px); font-weight:500}
.hero .btn--ghost:hover{background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.62); color:#fff}
.hero__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s5);
  margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.16);
}
.stat__n{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.6rem); color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.stat__l{font-size:.86rem; color:#8FAEBB; margin-top:.35rem}

/* -------------------------------------------------------------- sections -- */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section--tint{background:var(--bg-2)}
.section--ink{background:var(--ink); color:#C7DAE1}
.section--ink h2,.section--ink h3{color:#fff}
.section__head{margin-bottom:var(--s7); max-width:62ch}
.section__kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-2); margin-bottom:var(--s3)}
.section__lead{color:var(--muted); font-size:1.06rem; margin-top:var(--s3)}

/* ----------------------------------------------------------- product card -- */
.grid{display:grid; gap:var(--s5)}
.grid--products{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:#C6DBE2}
.card__media{position:relative; aspect-ratio:4/3; background:var(--bg-2); display:grid; place-items:center; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:contain; padding:var(--s4); transition:transform var(--t-slow) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.045)}
.card__badge{
  position:absolute; top:var(--s3); left:var(--s3); z-index:2;
  background:var(--ember); color:#fff; font-family:var(--display); font-weight:700;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px;
}
.card__body{padding:var(--s4) var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card__brand{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.card__title{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.3; color:var(--ink); letter-spacing:-.01em}
.card a.card__title:hover{color:var(--brand)}
.card__attrs{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.15rem}
.chip{
  font-family:var(--mono); font-size:.7rem; color:var(--brand); background:var(--ice);
  padding:.2rem .45rem; border-radius:4px; white-space:nowrap;
}
.card__price{margin-top:auto; padding-top:var(--s3)}
.price{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.price__now{font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--ink); font-variant-numeric:tabular-nums}
.price__was{font-size:.92rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums}
.price__net{font-size:.78rem; color:var(--muted)}
/* dodatna ("sidrena") cijena — NN 101/2026 */
.price__anchor{
  display:block; margin-top:.3rem; font-size:.76rem; color:var(--muted);
  font-variant-numeric:tabular-nums; border-top:1px dashed var(--line); padding-top:.3rem;
}
.avail{display:inline-flex; align-items:center; gap:.36rem; font-size:.8rem; color:var(--body)}
.avail::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.avail--no::before{background:var(--muted)}
.stretch::after{content:''; position:absolute; inset:0}

/* ------------------------------------------------------------- catalogue -- */
.cat{display:grid; grid-template-columns:270px 1fr; gap:clamp(1.5rem,3vw,2.6rem); align-items:start}
.filters{position:sticky; top:calc(var(--nav-h) + 1rem); max-height:calc(100dvh - var(--nav-h) - 2rem); overflow-y:auto; padding-right:.35rem}
.filters__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4)}
.facet{border-top:1px solid var(--line); padding:var(--s4) 0}
.facet:first-of-type{border-top:0; padding-top:0}
.facet__h{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:var(--s2);
  background:none; border:0; padding:0 0 var(--s3); cursor:pointer; text-align:left;
  font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink);
}
.facet__h svg{transition:transform var(--t) var(--ease); flex:none; color:var(--muted)}
.facet__h[aria-expanded="false"] svg{transform:rotate(-90deg)}
.facet__body{display:grid; gap:.1rem; overflow:hidden}
.facet__h[aria-expanded="false"] + .facet__body{display:none}
.opt{display:flex; align-items:center; gap:.6rem; padding:.42rem .45rem; border-radius:var(--r-sm); cursor:pointer; transition:background var(--t-fast); min-height:38px}
.opt:hover{background:var(--bg-2)}
.opt input{width:17px; height:17px; accent-color:var(--brand-2); flex:none; cursor:pointer}
.opt__l{font-size:.9rem; color:var(--body)}
.opt__n{margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--muted); background:var(--bg-2); padding:.05rem .35rem; border-radius:4px}
.opt input:checked ~ .opt__l{color:var(--ink); font-weight:600}

.toolbar{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-bottom:var(--s5)}
.search{position:relative; flex:1 1 260px; min-width:0}
.search input{
  width:100%; min-height:48px; padding:.7rem 1rem .7rem 2.6rem; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; transition:border-color var(--t), box-shadow var(--t);
}
.search input:focus{outline:0; border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(18,140,168,.12)}
.search svg{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.select{min-height:48px; padding:.6rem 2.2rem .6rem .9rem; border:1px solid var(--line); border-radius:var(--r); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B8592' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center; appearance:none; cursor:pointer}
.count{font-size:.92rem; color:var(--muted); margin-left:auto; white-space:nowrap}
.pills{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--s4)}
.pill{display:inline-flex; align-items:center; gap:.4rem; background:var(--ice); color:var(--brand); border:1px solid #C5E2EA; border-radius:999px; padding:.3rem .5rem .3rem .75rem; font-size:.82rem}
.pill button{background:none; border:0; cursor:pointer; color:inherit; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; transition:background var(--t-fast)}
.pill button:hover{background:rgba(11,94,115,.14)}
.filters__toggle{display:none}

.empty{text-align:center; padding:var(--s9) var(--s4); border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--bg-2)}
.pager{display:flex; gap:.35rem; justify-content:center; margin-top:var(--s7); flex-wrap:wrap}
.pager a,.pager span{min-width:44px; min-height:44px; display:grid; place-items:center; padding:0 .7rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; font-size:.92rem; color:var(--body); transition:border-color var(--t), background var(--t)}
.pager a:hover{border-color:var(--brand-2); background:var(--bg-2)}
.pager [aria-current]{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600}

/* ----------------------------------------------------------- product page -- */
.pd{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:start}
.gallery__main{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden}
.gallery__main img{width:100%; height:100%; object-fit:contain; padding:var(--s6)}
/* Breadcrumbs. Mirrors the BreadcrumbList in the head - the structured data
   should describe a trail the visitor can actually see. */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.88rem; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand); text-decoration:underline}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:var(--ink); font-weight:500}
.gallery__thumbs{display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap}
.gallery__thumbs button{width:66px; height:66px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); padding:.3rem; cursor:pointer; transition:border-color var(--t)}
.gallery__thumbs button[aria-current]{border-color:var(--brand-2); box-shadow:0 0 0 2px rgba(18,140,168,.18)}
.gallery__thumbs img{width:100%; height:100%; object-fit:contain}
.pd__price{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); margin:var(--s5) 0}
.pd__price .price__now{font-size:2.1rem}
.spectable{width:100%; border-collapse:collapse; font-size:.94rem}
.spectable th,.spectable td{text-align:left; padding:.65rem .2rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
.spectable th{color:var(--muted); font-weight:500; width:45%}
.spectable td{color:var(--ink); font-weight:500}
/* CMS body copy. Headings are reset to margin:0 globally, so anything coming
   out of the editor needs its own rhythm here rather than relying on defaults. */
.prose{color:var(--body)}
.prose p{margin-bottom:var(--s3)}
.prose h2{font-size:clamp(1.25rem,2.4vw,1.6rem); margin:2.2rem 0 .7rem}
.prose h3{font-size:1.06rem; margin:1.6rem 0 .5rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 var(--s3) 1.15rem; display:grid; gap:.35rem}
.prose li{padding-left:.15rem}
.prose a{color:var(--brand-2); text-decoration:underline; text-underline-offset:2px}
.prose code{font-family:var(--mono); font-size:.86em; background:var(--surface-2,#EEF4F7);
  border:1px solid var(--line); border-radius:5px; padding:.08em .38em}
.prose table{width:100%; border-collapse:collapse; margin:0 0 var(--s3); font-size:.92rem}
.prose thead th{text-align:left; font-family:var(--display); font-weight:600; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); padding:.5rem .7rem .5rem 0}
.prose tbody td{border-bottom:1px solid var(--line); padding:.7rem .7rem .7rem 0;
  vertical-align:top; line-height:1.5}
.prose tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .prose table,.prose thead,.prose tbody,.prose tr,.prose td{display:block; width:100%}
  .prose thead{display:none}
  .prose tbody tr{border-bottom:1px solid var(--line); padding:.6rem 0}
  .prose tbody tr:last-child{border-bottom:0}
  .prose tbody td{border:0; padding:.15rem 0}
  .prose tbody td:first-child{font-family:var(--mono); font-size:.84rem; color:var(--ink)}
}
/* supplier spec bullets rendered as a table rather than a wall of text */
.spectable--desc{margin:var(--s4) 0}
.spectable--desc th{width:42%; font-weight:500}
.spectable--desc td{font-variant-numeric:tabular-nums}
.desc-list{margin:var(--s3) 0 var(--s4); padding-left:1.1em}
.desc-list li{margin:.28rem 0}
@media (max-width:540px){
  .spectable--desc th{width:46%}
  .spectable--desc th,.spectable--desc td{font-size:.86rem; padding:.5rem .15rem}
}

/* ------------------------------------------------------------------ misc -- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s5)}
.tile{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); transition:transform var(--t) var(--ease-out), box-shadow var(--t)}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.tile__icon{width:44px; height:44px; border-radius:var(--r); background:var(--ice); color:var(--brand); display:grid; place-items:center; margin-bottom:var(--s4)}
.section--ink .tile{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10)}
.section--ink .tile__icon{background:rgba(49,180,208,.14); color:var(--brand-3)}
.clients{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.1rem .2rem; list-style:none; padding:0}
.clients li{padding:.6rem .2rem; border-bottom:1px solid var(--line-soft); font-size:.93rem}
.section--ink .clients li{border-color:rgba(255,255,255,.09)}
.field{display:grid; gap:.4rem; margin-bottom:var(--s4)}
.field label{font-size:.88rem; font-weight:600; color:var(--ink)}
.field label span{color:var(--muted); font-weight:400}
.field input,.field textarea{width:100%; min-height:48px; padding:.7rem .9rem;
  border:1px solid var(--line-input); border-radius:var(--r); background:#fff;
  transition:border-color var(--t), box-shadow var(--t)}
.field textarea{min-height:140px; resize:vertical}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(18,140,168,.12)}

/* Map on the contact page.
   Shown as a placeholder until the visitor asks for it - the embed is a
   third-party frame, and the cookie notice promises none of those load
   unasked. Same box either way, so nothing jumps when it swaps. */
.map{position:relative; aspect-ratio:16/9; min-height:260px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2)}
.map__frame{display:block; width:100%; height:100%; border:0}
.map__ask{position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:.5rem; padding:var(--s5); text-align:center; color:var(--muted);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3))}
.map__ask svg{color:var(--brand-2)}
.map__addr{margin:0; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.02rem}
.map__note{margin:0; font-size:.83rem; max-width:44ch; line-height:1.5}
.map__btns{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem}

@media (max-width:560px){ .map{aspect-ratio:4/3} }

/* Enquiry form panel.
   The page is white and so are the inputs, which left the fields floating with
   only a hairline to find them by. A tinted panel behind the form gives them
   something to sit on, and keeps working on the product page where the section
   is already tinted - there the border and shadow do the separating. */
.formcard{margin-top:1.5rem; padding:clamp(1.1rem,3vw,1.75rem);
  background:rgba(18,140,168,.05); border:1px solid var(--line);
  border-radius:var(--r-lg,18px); box-shadow:0 1px 2px rgba(11,44,57,.04)}
.formcard .field:last-of-type{margin-bottom:var(--s3)}
.section--tint .formcard{background:rgba(255,255,255,.62)}
@supports (backdrop-filter:blur(2px)){
  .section--tint .formcard{backdrop-filter:blur(2px)}
}
.hp{position:absolute; left:-9999px}
.note{background:var(--ice); border-left:3px solid var(--brand-2); border-radius:0 var(--r) var(--r) 0; padding:var(--s4); font-size:.93rem; color:var(--ink-2)}
.note--ok{background:#E4F3EC; border-color:var(--ok)}
.note--err{background:#FBEAE4; border-color:var(--warn)}

.foot{background:var(--ink); color:#93B3BF; padding:clamp(2.5rem,6vw,4rem) 0 var(--s5); font-size:.94rem}
.foot h4{color:#fff; margin-bottom:var(--s3); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--mono); font-weight:500; color:#5F8593}
.foot a{color:#C7DAE1}
.foot a:hover{color:#fff}
.foot__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s6)}
.foot ul{list-style:none; padding:0; display:grid; gap:.45rem}
.foot__bar{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.10); display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; font-size:.85rem; color:#5F8593}

/* ------------------------------------------------------------- animation -- */
/* Scroll reveal. Elements start hidden ONLY when JS is running, so the page is
   fully readable if JS fails or is blocked. */
.js [data-reveal]{opacity:0; transform:translateY(18px)}
.js [data-reveal].in{opacity:1; transform:none; transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out)}
.js [data-reveal][data-delay="1"].in{transition-delay:60ms}
.js [data-reveal][data-delay="2"].in{transition-delay:120ms}
.js [data-reveal][data-delay="3"].in{transition-delay:180ms}
.js [data-reveal][data-delay="4"].in{transition-delay:240ms}
.js [data-reveal][data-delay="5"].in{transition-delay:300ms}

@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.stagger > *{animation:fadeUp var(--t-slow) var(--ease-out) both}
.stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s} .stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s} .stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s} .stagger > *:nth-child(8){animation-delay:.30s}

/* cross-document view transitions where supported */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut 140ms var(--ease) both}
::view-transition-new(root){animation:vtIn 260ms var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1040px){
  .cat{grid-template-columns:1fr}
  .filters{
    position:fixed; inset:0; z-index:150; max-height:none; background:#fff; padding:var(--s5);
    overflow-y:auto; transform:translateX(-100%); transition:transform var(--t-slow) var(--ease-out);
    box-shadow:var(--shadow-3);
  }
  .filters.open{transform:none}
  .filters__toggle{display:inline-flex}
  .pd{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:var(--s3) var(--s4) var(--s5);
    box-shadow:var(--shadow-2); transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
  }
  .nav__links.open{opacity:1; transform:none; pointer-events:auto}
  .nav__links a{padding:.85rem .5rem; font-size:1.02rem; border-bottom:1px solid var(--line-soft)}
  .nav__links a::after{display:none}
  .burger{display:flex}
  body{font-size:16px}
}
/* Grid and flex items default to min-width:auto, which means they refuse to
   shrink below their content and silently push the document wider than the
   viewport. These three rules are what stop horizontal overflow on mobile. */
.cat > *, .grid > *, .tiles > *, .pd > *, .foot__grid > *, .cols > *{min-width:0}

/* Two-column split. minmax(300px,…) alone overflows viewports narrower than
   300px + gutters, so the track floor is clamped to the available width. */
.cols{display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.card__title, .card__brand, .price__anchor{overflow-wrap:anywhere}

/* The header must be able to shrink too. */
.nav__in{min-width:0}
.logo{flex:0 1 auto; min-width:0; white-space:nowrap}
.nav__end{flex:0 0 auto}

@media (max-width:680px){
  /* keep the call button as an icon-only target rather than losing it */
  .nav__tel{display:none}
  .nav__end .btn--cta{padding:.6rem .75rem; min-width:44px}
}
@media (max-width:540px){
  .grid--products{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s3)}
  .card__body{padding:var(--s3)}
  .card__media img{padding:var(--s2)}
  .price__now{font-size:1.05rem}
  .price__anchor,.price__net{font-size:.7rem}
  .card__title{font-size:.92rem}
  .hero__actions .btn{flex:1 1 100%}
  .toolbar{gap:var(--s2)}
  .toolbar .select{flex:1 1 auto; min-width:0}
  .count{margin-left:0; width:100%}
}
@media (max-width:380px){
  .grid--products{grid-template-columns:1fr}
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1; transform:none}
  .card:hover,.tile:hover{transform:none}
  .js .flake,.js .hero__crystals,.js .btn--hero{animation:none}
  @view-transition{navigation:none}
}

@media print{
  .nav,.foot,.filters,.hero__actions{display:none}
  body{font-size:11pt; color:#000}
}

/* ==========================================================================
   Cookie notice
   --------------------------------------------------------------------------
   A small card in the bottom corner, roughly the width of a phone dialog. It
   has to be noticed and answered, not take over the page - the earlier
   full-width bar covered a third of the hero on a laptop.
   ========================================================================== */
.cc{position:fixed; left:clamp(.75rem,2vw,1.5rem); bottom:clamp(.75rem,2vw,1.5rem);
  z-index:1000; width:min(23rem,calc(100vw - 1.5rem))}
.cc[hidden]{display:none}
.cc__box{background:var(--ink); color:#DCE8ED; border-radius:14px;
  padding:1rem 1.05rem 1.05rem; box-shadow:0 18px 50px -14px rgba(0,0,0,.55);
  animation:cc-in .32s var(--ease-out) both}
.cc__title{font-family:var(--display); font-size:.94rem; font-weight:700;
  color:#fff; margin:0 0 .3rem; letter-spacing:-.01em}
.cc__text{margin:0; font-size:.8rem; line-height:1.5; color:#A9C2CD}
.cc__text a{color:#fff; text-decoration:underline; text-underline-offset:2px}

.cc__actions{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.85rem}
.cc__actions .btn{font-size:.8rem; padding:.44rem .8rem}
.cc__actions .btn--ghost{border-color:rgba(255,255,255,.3); color:#DCE8ED; background:none}
.cc__actions .btn--ghost:hover{background:rgba(255,255,255,.1)}
.cc__link{margin-left:auto; background:none; border:0; padding:.2rem; cursor:pointer;
  font:inherit; font-size:.78rem; color:#89A6B3; text-decoration:underline;
  text-underline-offset:2px}
.cc__link:hover{color:#fff}

.cc__prefs{display:grid; gap:.5rem; margin-top:.8rem; padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.14); max-height:min(46vh,20rem); overflow-y:auto}
.cc__opt{display:flex; gap:.5rem; align-items:flex-start; font-size:.78rem; cursor:pointer}
.cc__opt input{margin-top:.12rem; width:14px; height:14px; accent-color:var(--cta); flex:none}
.cc__opt input:disabled{opacity:.5; cursor:not-allowed}
.cc__opt strong{display:block; color:#fff; font-weight:600; font-size:.8rem}
.cc__opt em{font-style:normal; color:#8CA7B3; line-height:1.45}
.cc [hidden]{display:none}

@keyframes cc-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .cc__box{animation:none} }

@media (max-width:520px){
  .cc{left:.6rem; right:.6rem; bottom:.6rem; width:auto}
  .cc__actions .btn{flex:1 1 auto; justify-content:center}
  .cc__link{margin-left:0; width:100%; text-align:center; padding-top:.35rem}
}

/* ------------------------------------------------- service pages -------- */
/* The closing call to action on a service page, and the links across to the
   other two services. Both sit inside .narrow, so they inherit its measure. */
.svc-cta{margin:var(--s7) 0 0; padding:var(--s6); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-lg)}
.svc-cta__t{font-family:var(--display); font-weight:600; font-size:1.1rem;
  color:var(--ink); margin:0 0 var(--s4)}
.svc-cta__b{display:flex; flex-wrap:wrap; gap:var(--s3)}

.svc-more{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line)}
.svc-more__t{font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3)}
.svc-more ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5)}
.svc-more a{color:var(--brand-2); text-decoration:underline; text-underline-offset:2px}
.svc-more a:hover{color:var(--brand)}