/*
 * izolmak.com.mk front page: the hero slider (home.20261024b.js runs it).
 * Board: https://claude.ai/artifact/75k8r4GnWVFwiFPshJZMh2 (layout, the four backs, the motion timeline).
 *
 * All slides sit in one grid cell, so the hero is as tall as its tallest slide. A slide change: the old back
 * is pushed out and the new one slides in (700 ms), the picture rides in on it (160 px, from 150 ms), then the
 * label, heading, text and buttons rise one after another (from 300 ms, 60 ms apart). .ih--still: the first
 * slide on load, no entrance. .ih--rev: going back, every direction reversed. The incoming animations fill
 * backwards only: once over, nothing holds the elements on a separate layer.
 * The file name changes with its content: CSS is cached 30 days.
 */
.ih {
  --ih-ground: #072378;
  --ih-yellow: #FDB813;
  --ih-time: 7s;
  position: relative;
  overflow: hidden;
  background: var(--ih-ground);
  color: #ffffff;
  isolation: isolate;
}
.ih-track { display: grid; }

/* ---------- a slide ---------- */
.ih-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  min-height: 600px;
  box-sizing: border-box;
  padding: 48px max(64px, calc((100% - 1152px) / 2)) 112px;
  visibility: hidden;
  pointer-events: none;
}
.ih-slide.is-on { visibility: visible; pointer-events: auto; z-index: 2; }
.ih-slide.is-out { visibility: visible; z-index: 1; }

/* the text and picture get their own layer: an animated back is drawn on one, and Chrome would paint it over them */
.ih-copy, .ih-stage { position: relative; z-index: 1; will-change: transform; }
.ih-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.ih-brand { display: flex; align-items: center; gap: 14px; height: 44px; }
.ih-logo { display: block; height: 34px; width: auto; }
.ih-plate { display: inline-flex; align-items: center; height: 44px; padding: 0 10px; background: #ffffff; border-radius: 4px; }
.ih-plate .ih-logo { height: 30px; }
.ih-word { font-size: 30px; font-weight: 700; font-style: italic; letter-spacing: -.5px; line-height: 1; }
.ih-word span { font-weight: 400; }
.ih-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .35); }
.ih-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ih-yellow); }

.ih .ih-title { margin: 0; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -.3px; color: #ffffff; text-transform: none; }
.ih .ih-text { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: #dfe5f5; }
.ih-y { color: var(--ih-yellow); }

.ih-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ih-btn, .ih-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 4px; font-size: 15px; text-decoration: none; box-sizing: border-box; }
.ih-btn { background: var(--ih-yellow); color: #1B3679; font-weight: 700; }
.ih-btn:hover { background: #ffc93d; color: #1B3679; }
.ih-btn2 { border: 1px solid rgba(255, 255, 255, .55); color: #ffffff; font-weight: 500; }
.ih-btn2:hover { border-color: #ffffff; background: rgba(255, 255, 255, .08); color: #ffffff; }
.ih-btn:focus-visible, .ih-btn2:focus-visible, .ih-round:focus-visible, .ih-tab:focus-visible { outline: 3px solid var(--ih-yellow); outline-offset: 3px; }

.ih-stage { height: 440px; display: flex; align-items: center; justify-content: center; }
.ih-stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 34px; height: 46px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); filter: blur(18px); }
.ih-pic { position: relative; display: block; max-width: min(560px, 100%); max-height: 420px; width: auto; height: auto; object-fit: contain; }
.ih-pic--photo { width: min(560px, 100%); height: auto; aspect-ratio: 902 / 580; max-height: none; object-fit: cover;
  border: 6px solid #ffffff; border-radius: 10px; box-sizing: border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }

/* ---------- the backs: one panel, a yellow edge, the gold lines; four shapes ---------- */
.ih-back { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ih-panel, .ih-edge, .ih-extra { position: absolute; inset: 0; }
.ih-panel { background: #1B3679; }
.ih-edge { background: var(--ih-yellow); }
.ih-extra { display: none; }
.ih-lines { position: absolute; top: 0; right: -40px; width: 64%; height: 100%; object-fit: cover; opacity: .8; }

/* the shapes start in the gap between the text and the picture (--ih-x), never under the text: the text's yellow
   highlight would vanish on a yellow edge */
.ih-slide { --ih-x: calc(max(64px, (100% - 1152px) / 2) + 544px); }
.ih-bg1 .ih-panel { clip-path: polygon(calc(var(--ih-x) + 150px) 0, 100% 0, 100% 100%, var(--ih-x) 100%); }
.ih-bg1 .ih-edge { clip-path: polygon(calc(var(--ih-x) + 132px) 0, calc(var(--ih-x) + 150px) 0, var(--ih-x) 100%, calc(var(--ih-x) - 18px) 100%); }

.ih-bg2 .ih-panel { background: #163a85; clip-path: polygon(var(--ih-x) 0, 100% 0, 100% 100%, calc(var(--ih-x) + 170px) 100%); }
.ih-bg2 .ih-edge { clip-path: polygon(calc(var(--ih-x) - 18px) 0, var(--ih-x) 0, calc(var(--ih-x) + 170px) 100%, calc(var(--ih-x) + 152px) 100%); }
.ih-bg2 .ih-extra { display: block; background: rgba(253, 184, 19, .35);
  clip-path: polygon(calc(var(--ih-x) - 44px) 0, calc(var(--ih-x) - 36px) 0, calc(var(--ih-x) + 134px) 100%, calc(var(--ih-x) + 126px) 100%); }
.ih-bg2 .ih-lines { opacity: .75; transform: scaleX(-1); }

.ih-bg3 .ih-panel { background: #1f3f8f; clip-path: polygon(calc(var(--ih-x) + 110px) 0, 100% 0, 100% 100%, calc(var(--ih-x) + 110px) 100%, var(--ih-x) 50%); }
.ih-bg3 .ih-edge { clip-path: polygon(calc(var(--ih-x) + 92px) 0, calc(var(--ih-x) + 110px) 0, var(--ih-x) 50%, calc(var(--ih-x) + 110px) 100%,
  calc(var(--ih-x) + 92px) 100%, calc(var(--ih-x) - 18px) 50%); }
.ih-bg3 .ih-lines { opacity: .75; transform: scaleY(-1); }

.ih-bg4 .ih-panel { clip-path: polygon(calc(var(--ih-x) + 160px) 0, 100% 0, 100% 100%, calc(var(--ih-x) + 10px) 100%); }
.ih-bg4 .ih-edge { clip-path: polygon(calc(var(--ih-x) + 142px) 0, calc(var(--ih-x) + 160px) 0, calc(var(--ih-x) + 10px) 100%, calc(var(--ih-x) - 8px) 100%); }
.ih-bg4 .ih-extra { display: block; background: var(--ih-yellow); clip-path: polygon(90% 0, 100% 0, 100% 100%, 80% 100%); }
.ih-bg4 .ih-lines { right: auto; left: -120px; opacity: .45; }

/* ---------- the motion ---------- */
.ih-slide.is-on .ih-back { animation: ih-back-in .7s cubic-bezier(.65, 0, .35, 1) backwards; }
.ih-slide.is-out .ih-back { animation: ih-back-out .7s cubic-bezier(.65, 0, .35, 1) both; }
.ih--rev .ih-slide.is-on .ih-back { animation-name: ih-back-in-rev; }
.ih--rev .ih-slide.is-out .ih-back { animation-name: ih-back-out-rev; }
.ih-slide.is-out .ih-copy, .ih-slide.is-out .ih-stage { animation: ih-fade-out .25s ease-in both; }
.ih-slide.is-on .ih-stage { animation: ih-pic-in .7s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.ih--rev .ih-slide.is-on .ih-stage { animation-name: ih-pic-in-rev; }
.ih-slide.is-on .ih-rise { animation: ih-rise .5s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.ih-slide.is-on .ih-d1 { animation-delay: .36s; }
.ih-slide.is-on .ih-d2 { animation-delay: .42s; }
.ih-slide.is-on .ih-d3 { animation-delay: .48s; }
.ih--still .ih-slide.is-on .ih-back, .ih--still .ih-slide.is-on .ih-stage, .ih--still .ih-slide.is-on .ih-rise { animation: none; }

@keyframes ih-back-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ih-back-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes ih-back-in-rev { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ih-back-out-rev { from { transform: none; } to { transform: translateX(100%); } }
@keyframes ih-pic-in { from { opacity: 0; transform: translateX(160px); } to { opacity: 1; transform: none; } }
@keyframes ih-pic-in-rev { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: none; } }
@keyframes ih-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ih-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* less motion asked for: a cross-fade, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .ih-slide.is-on .ih-back, .ih-slide.is-out .ih-back, .ih-slide.is-on .ih-stage, .ih-slide.is-on .ih-rise { animation: none !important; }
  .ih-slide.is-on { animation: ih-fade-in .25s ease-out both; }
  .ih--still .ih-slide.is-on { animation: none; }
  .ih-slide.is-out { animation: ih-fade-out .25s ease-in both; }
  .ih-slide.is-out .ih-copy, .ih-slide.is-out .ih-stage { animation: none; }
}
@keyframes ih-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the control bar ---------- */
.ih-bar { position: absolute; z-index: 5; left: max(64px, calc((100% - 1152px) / 2)); right: max(64px, calc((100% - 1152px) / 2));
  bottom: 26px; display: flex; align-items: flex-end; gap: 28px; }
.ih-count { font-size: 14px; color: #c9d3ee; padding-bottom: 12px; min-width: 64px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ih-count strong { font-size: 18px; color: #ffffff; }
.ih-curlabel { display: none; }
/* the tabs stay within the text column: past it they would cross the backs' yellow edges */
.ih-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; flex: 1; max-width: 420px; }
.ih-tab { appearance: none; border: 0; background: none; margin: 0; padding: 10px 0 0; min-height: 44px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: #c9d3ee; }
.ih-tab:hover, .ih-tab.is-on { color: #ffffff; }
.ih-tab.is-on { font-weight: 500; }
.ih-line { display: block; height: 3px; margin-bottom: 9px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ih-fill { display: block; height: 100%; width: 0; background: var(--ih-yellow); }
.ih-tab.is-done .ih-fill { width: 100%; }
.ih-tab.is-on .ih-fill { animation: ih-progress var(--ih-time) linear both; }
@keyframes ih-progress { from { width: 0; } to { width: 100%; } }
/* paused: the button, the keyboard focus inside, or a mouse over the hero */
.ih.is-paused .ih-tab.is-on .ih-fill, .ih:focus-within .ih-tab.is-on .ih-fill { animation-play-state: paused; }
@media (hover: hover) { .ih:hover .ih-tab.is-on .ih-fill { animation-play-state: paused; } }

.ih-buttons { margin-left: auto; display: flex; gap: 10px; padding-bottom: 2px; }
.ih-round { width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .45); background: transparent;
  color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ih-round:hover { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
.ih-i-play { display: none; }
.ih.is-paused .ih-i-play { display: block; }
.ih.is-paused .ih-i-pause { display: none; }

/* ---------- phones and narrow tablets (up to 900 px): picture on top, text below, the bar at the bottom ---------- */
@media (max-width: 900px) {
  .ih-slide { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0 16px 132px; }
  .ih-stage { order: -1; height: 300px; padding-top: 24px; box-sizing: border-box; }
  .ih-stage::before { left: 18%; right: 18%; bottom: 14px; height: 28px; filter: blur(12px); }
  .ih-pic { max-width: 100%; max-height: 250px; }
  .ih-pic--photo { width: 100%; max-width: 360px; border-width: 4px; border-radius: 8px; }
  .ih-copy { gap: 14px; padding-top: 30px; }
  .ih-brand { height: 36px; gap: 12px; }
  .ih-logo { height: 28px; }
  .ih-plate { height: 36px; padding: 0 8px; }
  .ih-plate .ih-logo { height: 24px; }
  .ih-word { font-size: 24px; }
  .ih-sep { height: 20px; }
  .ih-eyebrow { font-size: 12px; letter-spacing: 1.2px; }
  .ih .ih-title { font-size: 27px; line-height: 1.2; }
  .ih .ih-text { font-size: 16px; line-height: 1.55; }
  .ih-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-top: 8px; }
  .ih-btn, .ih-btn2 { min-height: 50px; font-size: 16px; }

  .ih-lines { top: 0; left: -120px; right: auto; width: 640px; height: 330px; }
  .ih-bg1 .ih-panel { clip-path: polygon(0 0, 100% 0, 100% 270px, 0 320px); }
  .ih-bg1 .ih-edge { clip-path: polygon(0 320px, 100% 270px, 100% 279px, 0 329px); }
  .ih-bg2 .ih-panel { clip-path: polygon(0 0, 100% 0, 100% 320px, 0 270px); }
  .ih-bg2 .ih-edge { clip-path: polygon(0 270px, 100% 320px, 100% 329px, 0 279px); }
  .ih-bg2 .ih-extra { clip-path: polygon(0 290px, 100% 340px, 100% 344px, 0 294px); }
  .ih-bg3 .ih-panel { clip-path: polygon(0 0, 100% 0, 100% 285px, 50% 330px, 0 285px); }
  .ih-bg3 .ih-edge { clip-path: polygon(0 285px, 50% 330px, 100% 285px, 100% 294px, 50% 339px, 0 294px); }
  .ih-bg4 .ih-panel { clip-path: polygon(0 0, 100% 0, 100% 320px, 0 290px); }
  .ih-bg4 .ih-edge { clip-path: polygon(0 290px, 100% 320px, 100% 329px, 0 299px); }
  .ih-bg4 .ih-extra { clip-path: polygon(76% 0, 100% 0, 100% 175px); }
  .ih-bg4 .ih-lines { left: -120px; }
  @keyframes ih-pic-in { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
  @keyframes ih-pic-in-rev { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }

  .ih-bar { left: 16px; right: 16px; bottom: 20px; flex-wrap: wrap; gap: 0 10px; align-items: center; }
  .ih-tabs { order: -1; flex: 1 0 100%; max-width: none; gap: 8px; }
  .ih-tab { padding: 18px 0; display: flex; align-items: center; }
  .ih-line { width: 100%; margin: 0; }
  .ih-tablabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ih-count { padding: 0; }
  .ih-curlabel { display: inline; }
  .ih-buttons { gap: 8px; padding: 0; }
}